From be6051dfcdfc88b1ff1d72a8b62379daefc0141c Mon Sep 17 00:00:00 2001 From: yann300 Date: Wed, 2 Mar 2022 13:21:50 +0100 Subject: [PATCH] fix highlighting --- apps/remix-ide/src/app/editor/editor.js | 28 +++++---- .../editor/src/lib/remix-ui-editor.tsx | 60 ++++++++++--------- package-lock.json | 48 +++++++++++++++ 3 files changed, 94 insertions(+), 42 deletions(-) diff --git a/apps/remix-ide/src/app/editor/editor.js b/apps/remix-ide/src/app/editor/editor.js index dcbe03bcc7..a50b5fd8b6 100644 --- a/apps/remix-ide/src/app/editor/editor.js +++ b/apps/remix-ide/src/app/editor/editor.js @@ -25,6 +25,9 @@ class Editor extends Plugin { remixDark: 'remix-dark' } + this.registeredDecorations = { sourceAnnotationsPerFile: {}, markerPerFile: {} } + this.currentDecorations = { sourceAnnotationsPerFile: {}, markerPerFile: {} } + // Init this.event = new EventManager() this.sessions = {} @@ -104,8 +107,7 @@ class Editor extends Plugin { } this.ref.gotoLine = (line, column) => this.gotoLine(line, column || 0) this.ref.getCursorPosition = () => this.getCursorPosition() - this.ref.addMarkerPerFile = (marker, filePath) => this.addMarkerPerFile(marker, filePath) - this.ref.addSourceAnnotationsPerFile = (annotation, filePath) => this.addSourceAnnotationsPerFile(annotation, filePath) + this.ref.addDecoration = (marker, filePath, typeOfDecoration) => this.addDecoration(marker, filePath, typeOfDecoration) this.ref.clearDecorationsByPlugin = (filePath, plugin, typeOfDecoration) => this.clearDecorationsByPlugin(filePath, plugin, typeOfDecoration) this.ref.keepDecorationsFor = (name, typeOfDecoration) => this.keepDecorationsFor(name, typeOfDecoration) }} id='editorView'> @@ -408,12 +410,15 @@ class Editor extends Plugin { if (filePath && !this.sessions[filePath]) throw new Error('file not found' + filePath) const path = filePath || this.currentFile - this.api.clearDecorationsByPlugin(path, plugin, typeOfDecoration) + const { currentDecorations, registeredDecorations } = this.api.clearDecorationsByPlugin(path, plugin, typeOfDecoration, this.registeredDecorations[typeOfDecoration][filePath] || [], this.currentDecorations[typeOfDecoration][filePath] || []) + this.currentDecorations[typeOfDecoration][filePath] = currentDecorations + this.registeredDecorations[typeOfDecoration][filePath] = registeredDecorations } keepDecorationsFor (plugin, typeOfDecoration) { if (!this.currentFile) return - this.api.keepDecorationsFor(this.currentFile, plugin, typeOfDecoration) + const { currentDecorations } = this.api.keepDecorationsFor(this.currentFile, plugin, typeOfDecoration, this.registeredDecorations[typeOfDecoration][this.currentFile] || [], this.currentDecorations[typeOfDecoration][this.currentFile] || []) + this.currentDecorations[typeOfDecoration][this.currentFile] = currentDecorations } /** @@ -458,14 +463,11 @@ class Editor extends Plugin { const { from } = this.currentRequest decoration.from = from - if (typeOfDecoration === 'markerPerFile') { - this.api.addMarkerPerFile(decoration, path) - return - } - if (typeOfDecoration === 'sourceAnnotationsPerFile') { - this.api.addSourceAnnotationsPerFile(decoration, path) - return - } + const { currentDecorations, registeredDecorations } = this.api.addDecoration(decoration, path, typeOfDecoration) + if (!this.registeredDecorations[typeOfDecoration][filePath]) this.registeredDecorations[typeOfDecoration][filePath] = [] + this.registeredDecorations[typeOfDecoration][filePath].push(...registeredDecorations) + if (!this.currentDecorations[typeOfDecoration][filePath]) this.currentDecorations[typeOfDecoration][filePath] = [] + this.currentDecorations[typeOfDecoration][filePath].push(...currentDecorations) } /** @@ -495,7 +497,7 @@ class Editor extends Plugin { discardHighlight () { const { from } = this.currentRequest for (const session in this.sessions) { - this.clearDecorationsByPlugin(session, from, 'markerPerFile') + this.clearDecorationsByPlugin(session, from, 'markerPerFile', this.registeredDecorations, this.currentDecorations) } } } diff --git a/libs/remix-ui/editor/src/lib/remix-ui-editor.tsx b/libs/remix-ui/editor/src/lib/remix-ui-editor.tsx index 8452fa2124..e0e1d75fce 100644 --- a/libs/remix-ui/editor/src/lib/remix-ui-editor.tsx +++ b/libs/remix-ui/editor/src/lib/remix-ui-editor.tsx @@ -40,6 +40,11 @@ type sourceMarker = { loader.config({ paths: { vs: 'assets/js/monaco-editor/dev/vs' } }) +export type DecorationsReturn = { + currentDecorations: Array + registeredDecorations?: Array +} + /* eslint-disable-next-line */ export interface EditorUIProps { contextualListener: any @@ -61,10 +66,9 @@ export interface EditorUIProps { getFontSize: () => number, getValue: (uri: string) => string getCursorPosition: () => cursorPosition - addMarkerPerFile: (marker: sourceMarker, filePath: string) => void - addSourceAnnotationsPerFile: (annotations: sourceAnnotation, filePath: string) => void - clearDecorationsByPlugin: (filePath: string, plugin: string, typeOfDecoration: string) => void - keepDecorationsFor: (filePath: string, plugin: string, typeOfDecoration: string) => void + addDecoration: (marker: sourceMarker, filePath: string, typeOfDecoration: string) => DecorationsReturn + clearDecorationsByPlugin: (filePath: string, plugin: string, typeOfDecoration: string, registeredDecorations: any, currentDecorations: any) => DecorationsReturn + keepDecorationsFor: (filePath: string, plugin: string, typeOfDecoration: string, registeredDecorations: any, currentDecorations: any) => DecorationsReturn } } @@ -73,8 +77,8 @@ export const EditorUI = (props: EditorUIProps) => { const editorRef = useRef(null) const monacoRef = useRef(null) const currentFileRef = useRef('') - const currentDecorations = useRef({ sourceAnnotationsPerFile: {}, markerPerFile: {} }) // decorations that are currently in use by the editor - const registeredDecorations = useRef({}) // registered decorations + // const currentDecorations = useRef({ sourceAnnotationsPerFile: {}, markerPerFile: {} }) // decorations that are currently in use by the editor + // const registeredDecorations = useRef({}) // registered decorations const [editorModelsState, dispatch] = useReducer(reducerActions, initialState) @@ -265,58 +269,56 @@ export const EditorUI = (props: EditorUIProps) => { } } - props.editorAPI.clearDecorationsByPlugin = (filePath: string, plugin: string, typeOfDecoration: string) => { + props.editorAPI.clearDecorationsByPlugin = (filePath: string, plugin: string, typeOfDecoration: string, registeredDecorations: any, currentDecorations: any) => { const model = editorModelsState[filePath]?.model if (!model) return const decorations = [] const newRegisteredDecorations = [] - if (registeredDecorations.current[filePath]) { - for (const decoration of registeredDecorations.current[filePath]) { + if (registeredDecorations) { + for (const decoration of registeredDecorations) { if (decoration.type === typeOfDecoration && decoration.value.from !== plugin) { decorations.push(convertToMonacoDecoration(decoration.value, typeOfDecoration)) newRegisteredDecorations.push(decoration) } } } - currentDecorations.current[typeOfDecoration][filePath] = model.deltaDecorations(currentDecorations.current[typeOfDecoration][filePath], decorations) - registeredDecorations.current[filePath] = newRegisteredDecorations + return { + currentDecorations: model.deltaDecorations(currentDecorations, decorations), + registeredDecorations: newRegisteredDecorations + } } - props.editorAPI.keepDecorationsFor = (filePath: string, plugin: string, typeOfDecoration: string) => { + props.editorAPI.keepDecorationsFor = (filePath: string, plugin: string, typeOfDecoration: string, registeredDecorations: any, currentDecorations: any) => { const model = editorModelsState[filePath]?.model if (!model) return const decorations = [] - if (registeredDecorations.current[filePath]) { - for (const decoration of registeredDecorations.current[filePath]) { - if (decoration.type === typeOfDecoration && decoration.value.from === plugin) { + if (registeredDecorations) { + for (const decoration of registeredDecorations) { + if (decoration.value.from === plugin) { decorations.push(convertToMonacoDecoration(decoration.value, typeOfDecoration)) } } } - currentDecorations.current[typeOfDecoration][filePath] = model.deltaDecorations(currentDecorations.current[typeOfDecoration][filePath], decorations) + return { + currentDecorations: model.deltaDecorations(currentDecorations, decorations) + } } const addDecoration = (decoration: sourceAnnotation | sourceMarker, filePath: string, typeOfDecoration: string) => { const model = editorModelsState[filePath]?.model - if (!model) return + if (!model) return { currentDecorations: [] } const monacoDecoration = convertToMonacoDecoration(decoration, typeOfDecoration) - if (!registeredDecorations.current[filePath]) registeredDecorations.current[filePath] = [] - registeredDecorations.current[filePath].push({ value: decoration, type: typeOfDecoration }) - if (!currentDecorations.current[typeOfDecoration][filePath]) currentDecorations.current[typeOfDecoration][filePath] = [] - - currentDecorations.current[typeOfDecoration][filePath].push(...model.deltaDecorations([], [monacoDecoration])) + return { + currentDecorations: model.deltaDecorations([], [monacoDecoration]), + registeredDecorations: [{ value: decoration, type: typeOfDecoration }] + } } - props.editorAPI.addSourceAnnotationsPerFile = (annotation: sourceAnnotation, filePath: string) => { - addDecoration(annotation, filePath, 'sourceAnnotationsPerFile') + props.editorAPI.addDecoration = (marker: sourceMarker, filePath: string, typeOfDecoration: string) => { + return addDecoration(marker, filePath, typeOfDecoration) } - props.editorAPI.addMarkerPerFile = (marker: sourceMarker, filePath: string) => { - addDecoration(marker, filePath, 'markerPerFile') - } - - props.editorAPI.findMatches = (uri: string, value: string) => { if (!editorRef.current) return const model = editorModelsState[uri]?.model diff --git a/package-lock.json b/package-lock.json index 60a67766f0..79f73e1452 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3888,6 +3888,22 @@ "integrity": "sha512-82cpyJyKRoQoRi+14ibCeGPu0CwypgtBAdBhq1WfvagpCZNKqwXbKwXllYSMG91DhmG4jt9gN8eP6lGOtozuaw==", "dev": true }, + "@isomorphic-git/idb-keyval": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/@isomorphic-git/idb-keyval/-/idb-keyval-3.3.2.tgz", + "integrity": "sha512-r8/AdpiS0/WJCNR/t/gsgL+M8NMVj/ek7s60uz3LmpCaTF2mEVlZJlB01ZzalgYzRLXwSPC92o+pdzjM7PN/pA==" + }, + "@isomorphic-git/lightning-fs": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/@isomorphic-git/lightning-fs/-/lightning-fs-4.4.1.tgz", + "integrity": "sha512-E9bYtiHF6pPh0N8Sx5Nvq0F1RL6Wdtq43PUmbAKAAYTi51F3MmMg9MkCOQT40Xc0TYhZcJMEP/wnH4mXaCxSsQ==", + "requires": { + "@isomorphic-git/idb-keyval": "3.3.2", + "isomorphic-textencoder": "1.0.1", + "just-debounce-it": "1.1.0", + "just-once": "1.1.0" + } + }, "@istanbuljs/load-nyc-config": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz", @@ -10543,6 +10559,15 @@ "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.35.tgz", "integrity": "sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==" }, + "@types/isomorphic-git__lightning-fs": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/@types/isomorphic-git__lightning-fs/-/isomorphic-git__lightning-fs-4.4.2.tgz", + "integrity": "sha512-dGKrVNnTBKglqcRqurIXtuzwlGN/lD4fwFShu7aD6Sba7PEMU46zSpxoeuZEvy6/Gcs4PPZQRblk+CZ1UVNOTQ==", + "dev": true, + "requires": { + "@types/node": "*" + } + }, "@types/istanbul-lib-coverage": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz", @@ -19153,6 +19178,11 @@ "integrity": "sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==", "dev": true }, + "fast-text-encoding": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/fast-text-encoding/-/fast-text-encoding-1.0.3.tgz", + "integrity": "sha512-dtm4QZH9nZtcDt8qJiOH9fcQd1NAgi+K1O2DbE6GG1PPCK/BWfOH3idCTRQ4ImXRUOyopDEgDEnVEE7Y/2Wrig==" + }, "fastq": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz", @@ -24325,6 +24355,14 @@ "simple-get": "^3.0.2" } }, + "isomorphic-textencoder": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/isomorphic-textencoder/-/isomorphic-textencoder-1.0.1.tgz", + "integrity": "sha512-676hESgHullDdHDsj469hr+7t3i/neBKU9J7q1T4RHaWwLAsaQnywC0D1dIUId0YZ+JtVrShzuBk1soo0+GVcQ==", + "requires": { + "fast-text-encoding": "^1.0.0" + } + }, "isstream": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", @@ -29032,6 +29070,16 @@ "integrity": "sha512-qpcRocdkUmf+UTNBYx5w6dexX5J31AKK1OmPwH630a83DdVVUIngk55RSAiIGpQyoH0dlr872VHfPjnQnK1qDQ==", "dev": true }, + "just-debounce-it": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/just-debounce-it/-/just-debounce-it-1.1.0.tgz", + "integrity": "sha512-87Nnc0qZKgBZuhFZjYVjSraic0x7zwjhaTMrCKlj0QYKH6lh0KbFzVnfu6LHan03NO7J8ygjeBeD0epejn5Zcg==" + }, + "just-once": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/just-once/-/just-once-1.1.0.tgz", + "integrity": "sha512-+rZVpl+6VyTilK7vB/svlMPil4pxqIJZkbnN7DKZTOzyXfun6ZiFeq2Pk4EtCEHZ0VU4EkdFzG8ZK5F3PErcDw==" + }, "keccak": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/keccak/-/keccak-3.0.2.tgz",