5 files changed, 113 insertions, 34 deletions

diff --git a/language-web/src/main/js/editor/EditorParent.ts b/language-web/src/main/js/editor/EditorParent.ts
index ea8c13b6..b890ac3c 100644
--- a/language-web/src/main/js/editor/EditorParent.ts
+++ b/language-web/src/main/js/editor/EditorParent.ts
@@ -190,5 +190,11 @@ export const EditorParent = styled('div')(({ theme }) => {
       textAlign: 'center',
     },
     ...codeMirrorLintStyle,
+    '.cm-problem-write': {
+      background: 'rgba(255, 255, 128, 0.3)',
+    },
+    '.cm-problem-read': {
+      background: 'rgba(255, 255, 255, 0.15)',
+    },
   };
 });
diff --git a/language-web/src/main/js/editor/EditorStore.ts b/language-web/src/main/js/editor/EditorStore.ts
index f47f47a0..8788e00f 100644
--- a/language-web/src/main/js/editor/EditorStore.ts
+++ b/language-web/src/main/js/editor/EditorStore.ts
@@ -30,7 +30,6 @@ import {
   TransactionSpec,
 } from '@codemirror/state';
 import {
-  DecorationSet,
   drawSelection,
   EditorView,
   highlightActiveLine,
@@ -43,8 +42,13 @@ import {
   reaction,
 } from 'mobx';
 
+import { findOccurrences, IOccurrence, setOccurrences } from './findOccurrences';
 import { problemLanguageSupport } from '../language/problemLanguageSupport';
-import { semanticHighlighting, setSemanticHighlighting } from './semanticHighlighting';
+import {
+  IHighlightRange,
+  semanticHighlighting,
+  setSemanticHighlighting,
+} from './semanticHighlighting';
 import type { ThemeStore } from '../theme/ThemeStore';
 import { getLogger } from '../utils/logger';
 import { XtextClient } from '../xtext/XtextClient';
@@ -95,6 +99,7 @@ export class EditorStore {
         EditorView.theme({}, {
           dark: this.themeStore.darkMode,
         }),
+        findOccurrences,
         highlightActiveLine(),
         highlightActiveLineGutter(),
         highlightSpecialChars(),
@@ -204,8 +209,12 @@ export class EditorStore {
     return null;
   }
 
-  updateSemanticHighlighting(decorations: DecorationSet): void {
-    this.dispatch(setSemanticHighlighting(decorations));
+  updateSemanticHighlighting(ranges: IHighlightRange[]): void {
+    this.dispatch(setSemanticHighlighting(ranges));
+  }
+
+  updateOccurrences(write: IOccurrence[], read: IOccurrence[]): void {
+    this.dispatch(setOccurrences(write, read));
   }
 
   /**
diff --git a/language-web/src/main/js/editor/decorationSetExtension.ts b/language-web/src/main/js/editor/decorationSetExtension.ts
new file mode 100644
index 00000000..2d630c20
--- /dev/null
+++ b/language-web/src/main/js/editor/decorationSetExtension.ts
@@ -0,0 +1,39 @@
+import { StateEffect, StateField, TransactionSpec } from '@codemirror/state';
+import { EditorView, Decoration, DecorationSet } from '@codemirror/view';
+
+export type TransactionSpecFactory = (decorations: DecorationSet) => TransactionSpec;
+
+export function decorationSetExtension(): [TransactionSpecFactory, StateField<DecorationSet>] {
+  const setEffect = StateEffect.define<DecorationSet>();
+  const field = StateField.define<DecorationSet>({
+    create() {
+      return Decoration.none;
+    },
+    update(currentDecorations, transaction) {
+      let newDecorations: DecorationSet | null = null;
+      transaction.effects.forEach((effect) => {
+        if (effect.is(setEffect)) {
+          newDecorations = effect.value;
+        }
+      });
+      if (newDecorations === null) {
+        if (transaction.docChanged) {
+          return currentDecorations.map(transaction.changes);
+        }
+        return currentDecorations;
+      }
+      return newDecorations;
+    },
+    provide: (f) => EditorView.decorations.from(f),
+  });
+
+  function transactionSpecFactory(decorations: DecorationSet) {
+    return {
+      effects: [
+        setEffect.of(decorations),
+      ],
+    };
+  }
+
+  return [transactionSpecFactory, field];
+}
diff --git a/language-web/src/main/js/editor/findOccurrences.ts b/language-web/src/main/js/editor/findOccurrences.ts
new file mode 100644
index 00000000..92102746
--- /dev/null
+++ b/language-web/src/main/js/editor/findOccurrences.ts
@@ -0,0 +1,35 @@
+import { Range, RangeSet } from '@codemirror/rangeset';
+import type { TransactionSpec } from '@codemirror/state';
+import { Decoration } from '@codemirror/view';
+
+import { decorationSetExtension } from './decorationSetExtension';
+
+export interface IOccurrence {
+  from: number;
+
+  to: number;
+}
+
+const [setOccurrencesInteral, findOccurrences] = decorationSetExtension();
+
+const writeDecoration = Decoration.mark({
+  class: 'cm-problem-write',
+});
+
+const readDecoration = Decoration.mark({
+  class: 'cm-problem-read',
+});
+
+export function setOccurrences(write: IOccurrence[], read: IOccurrence[]): TransactionSpec {
+  const decorations: Range<Decoration>[] = [];
+  write.forEach(({ from, to }) => {
+    decorations.push(writeDecoration.range(from, to));
+  });
+  read.forEach(({ from, to }) => {
+    decorations.push(readDecoration.range(from, to));
+  });
+  const rangeSet = RangeSet.of(decorations, true);
+  return setOccurrencesInteral(rangeSet);
+}
+
+export { findOccurrences };
diff --git a/language-web/src/main/js/editor/semanticHighlighting.ts b/language-web/src/main/js/editor/semanticHighlighting.ts
index 2d6804f8..2aed421b 100644
--- a/language-web/src/main/js/editor/semanticHighlighting.ts
+++ b/language-web/src/main/js/editor/semanticHighlighting.ts
@@ -1,34 +1,24 @@
-import { StateEffect, StateField, TransactionSpec } from '@codemirror/state';
-import { EditorView, Decoration, DecorationSet } from '@codemirror/view';
+import { RangeSet } from '@codemirror/rangeset';
+import type { TransactionSpec } from '@codemirror/state';
+import { Decoration } from '@codemirror/view';
 
-const setSemanticHighlightingEffect = StateEffect.define<DecorationSet>();
+import { decorationSetExtension } from './decorationSetExtension';
 
-export function setSemanticHighlighting(decorations: DecorationSet): TransactionSpec {
-  return {
-    effects: [
-      setSemanticHighlightingEffect.of(decorations),
-    ],
-  };
+export interface IHighlightRange {
+  from: number;
+
+  to: number;
+
+  classes: string[];
+}
+
+const [setSemanticHighlightingInternal, semanticHighlighting] = decorationSetExtension();
+
+export function setSemanticHighlighting(ranges: IHighlightRange[]): TransactionSpec {
+  const rangeSet = RangeSet.of(ranges.map(({ from, to, classes }) => Decoration.mark({
+    class: classes.map((c) => `cmt-problem-${c}`).join(' '),
+  }).range(from, to)), true);
+  return setSemanticHighlightingInternal(rangeSet);
 }
 
-export const semanticHighlighting = StateField.define<DecorationSet>({
-  create() {
-    return Decoration.none;
-  },
-  update(currentDecorations, transaction) {
-    let newDecorations: DecorationSet | null = null;
-    transaction.effects.forEach((effect) => {
-      if (effect.is(setSemanticHighlightingEffect)) {
-        newDecorations = effect.value;
-      }
-    });
-    if (newDecorations === null) {
-      if (transaction.docChanged) {
-        return currentDecorations.map(transaction.changes);
-      }
-      return currentDecorations;
-    }
-    return newDecorations;
-  },
-  provide: (f) => EditorView.decorations.from(f),
-});
+export { semanticHighlighting };