1 files changed, 20 insertions, 30 deletions

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 };