fix highlighting

3 years ago · 7dff60a34d
parent 36623ce84e
commit 7dff60a34d
3 changed files with 94 additions and 42 deletions
--- 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)
    }
  }
 }
--- 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<string>
+  registeredDecorations?: Array<any>
+}
+
 /* 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
--- 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",