3 files changed, 70 insertions, 1 deletions

diff --git a/language-web/src/main/js/editor/EditorParent.ts b/language-web/src/main/js/editor/EditorParent.ts
index a19759a4..ea8c13b6 100644
--- a/language-web/src/main/js/editor/EditorParent.ts
+++ b/language-web/src/main/js/editor/EditorParent.ts
@@ -133,6 +133,34 @@ export const EditorParent = styled('div')(({ theme }) => {
     '.cmt-variableName': {
       color: '#c8ae9d',
     },
+    '.cmt-problem-node': {
+      '&, & .cmt-variableName': {
+        color: theme.palette.text.secondary,
+      },
+    },
+    '.cmt-problem-unique': {
+      '&, & .cmt-variableName': {
+        color: theme.palette.text.primary,
+      },
+    },
+    '.cmt-problem-abstract, .cmt-problem-new': {
+      fontStyle: 'italic',
+    },
+    '.cmt-problem-containment': {
+      fontWeight: 700,
+    },
+    '.cmt-problem-error': {
+      '&, & .cmt-typeName': {
+        color: theme.palette.error.main,
+      },
+    },
+    '.cmt-problem-builtin': {
+      '&, & .cmt-typeName, & .cmt-atom, & .cmt-variableName': {
+        color: theme.palette.primary.main,
+        fontWeight: 400,
+        fontStyle: 'normal',
+      },
+    },
     '.cm-tooltip-autocomplete': {
       background: theme.palette.background.paper,
       boxShadow: `0px 2px 4px -1px rgb(0 0 0 / 20%),
diff --git a/language-web/src/main/js/editor/EditorStore.ts b/language-web/src/main/js/editor/EditorStore.ts
index 78cf763c..f47f47a0 100644
--- a/language-web/src/main/js/editor/EditorStore.ts
+++ b/language-web/src/main/js/editor/EditorStore.ts
@@ -30,6 +30,7 @@ import {
   TransactionSpec,
 } from '@codemirror/state';
 import {
+  DecorationSet,
   drawSelection,
   EditorView,
   highlightActiveLine,
@@ -43,8 +44,9 @@ import {
 } from 'mobx';
 
 import { problemLanguageSupport } from '../language/problemLanguageSupport';
-import { getLogger } from '../utils/logger';
+import { semanticHighlighting, setSemanticHighlighting } from './semanticHighlighting';
 import type { ThemeStore } from '../theme/ThemeStore';
+import { getLogger } from '../utils/logger';
 import { XtextClient } from '../xtext/XtextClient';
 
 const log = getLogger('editor.EditorStore');
@@ -103,6 +105,7 @@ export class EditorStore {
           top: true,
           matchCase: true,
         }),
+        semanticHighlighting,
         // We add the gutters to `extensions` in the order we want them to appear.
         foldGutter(),
         lineNumbers(),
@@ -201,6 +204,10 @@ export class EditorStore {
     return null;
   }
 
+  updateSemanticHighlighting(decorations: DecorationSet): void {
+    this.dispatch(setSemanticHighlighting(decorations));
+  }
+
   /**
    * @returns `true` if there is history to undo
    */
diff --git a/language-web/src/main/js/editor/semanticHighlighting.ts b/language-web/src/main/js/editor/semanticHighlighting.ts
new file mode 100644
index 00000000..2d6804f8
--- /dev/null
+++ b/language-web/src/main/js/editor/semanticHighlighting.ts
@@ -0,0 +1,34 @@
+import { StateEffect, StateField, TransactionSpec } from '@codemirror/state';
+import { EditorView, Decoration, DecorationSet } from '@codemirror/view';
+
+const setSemanticHighlightingEffect = StateEffect.define<DecorationSet>();
+
+export function setSemanticHighlighting(decorations: DecorationSet): TransactionSpec {
+  return {
+    effects: [
+      setSemanticHighlightingEffect.of(decorations),
+    ],
+  };
+}
+
+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),
+});