4 files changed, 87 insertions, 9 deletions

diff --git a/language-web/src/main/js/xtext/HighlightingService.ts b/language-web/src/main/js/xtext/HighlightingService.ts
new file mode 100644
index 00000000..b8ceed20
--- /dev/null
+++ b/language-web/src/main/js/xtext/HighlightingService.ts
@@ -0,0 +1,43 @@
+import { Decoration } from '@codemirror/view';
+import { Range, RangeSet } from '@codemirror/rangeset';
+
+import type { EditorStore } from '../editor/EditorStore';
+import type { UpdateService } from './UpdateService';
+import { getLogger } from '../utils/logger';
+import { isHighlightingResult } from './xtextServiceResults';
+
+const log = getLogger('xtext.ValidationService');
+
+export class HighlightingService {
+  private store: EditorStore;
+
+  private updateService: UpdateService;
+
+  constructor(store: EditorStore, updateService: UpdateService) {
+    this.store = store;
+    this.updateService = updateService;
+  }
+
+  onPush(push: unknown): void {
+    if (!isHighlightingResult(push)) {
+      log.error('Invalid highlighting result', push);
+      return;
+    }
+    const allChanges = this.updateService.computeChangesSinceLastUpdate();
+    const decorations: Range<Decoration>[] = [];
+    push.regions.forEach(({ offset, length, styleClasses }) => {
+      if (styleClasses.length === 0) {
+        return;
+      }
+      const from = allChanges.mapPos(offset);
+      const to = allChanges.mapPos(offset + length);
+      if (to <= from) {
+        return;
+      }
+      decorations.push(Decoration.mark({
+        class: styleClasses.map((c) => `cmt-problem-${c}`).join(' '),
+      }).range(from, to));
+    });
+    this.store.updateSemanticHighlighting(RangeSet.of(decorations, true));
+  }
+}
diff --git a/language-web/src/main/js/xtext/ValidationService.ts b/language-web/src/main/js/xtext/ValidationService.ts
index 163b5535..31c8f716 100644
--- a/language-web/src/main/js/xtext/ValidationService.ts
+++ b/language-web/src/main/js/xtext/ValidationService.ts
@@ -24,15 +24,20 @@ export class ValidationService {
     }
     const allChanges = this.updateService.computeChangesSinceLastUpdate();
     const diagnostics: Diagnostic[] = [];
-    push.issues.forEach((issue) => {
-      if (issue.severity === 'ignore') {
+    push.issues.forEach(({
+      offset,
+      length,
+      severity,
+      description,
+    }) => {
+      if (severity === 'ignore') {
         return;
       }
       diagnostics.push({
-        from: allChanges.mapPos(issue.offset),
-        to: allChanges.mapPos(issue.offset + issue.length),
-        severity: issue.severity,
-        message: issue.description,
+        from: allChanges.mapPos(offset),
+        to: allChanges.mapPos(offset + length),
+        severity,
+        message: description,
       });
     });
     this.store.updateDiagnostics(diagnostics);
diff --git a/language-web/src/main/js/xtext/XtextClient.ts b/language-web/src/main/js/xtext/XtextClient.ts
index 7683a8ef..ccb58ab4 100644
--- a/language-web/src/main/js/xtext/XtextClient.ts
+++ b/language-web/src/main/js/xtext/XtextClient.ts
@@ -6,6 +6,7 @@ import type { Transaction } from '@codemirror/state';
 
 import type { EditorStore } from '../editor/EditorStore';
 import { ContentAssistService } from './ContentAssistService';
+import { HighlightingService } from './HighlightingService';
 import { UpdateService } from './UpdateService';
 import { getLogger } from '../utils/logger';
 import { ValidationService } from './ValidationService';
@@ -20,6 +21,8 @@ export class XtextClient {
 
   private contentAssistService: ContentAssistService;
 
+  private highlightingService: HighlightingService;
+
   private validationService: ValidationService;
 
   constructor(store: EditorStore) {
@@ -29,6 +32,7 @@ export class XtextClient {
     );
     this.updateService = new UpdateService(store, this.webSocketClient);
     this.contentAssistService = new ContentAssistService(this.updateService);
+    this.highlightingService = new HighlightingService(store, this.updateService);
     this.validationService = new ValidationService(store, this.updateService);
   }
 
@@ -50,12 +54,12 @@ export class XtextClient {
       await this.updateService.updateFullText();
     }
     switch (service) {
+      case 'highlight':
+        this.highlightingService.onPush(push);
+        return;
       case 'validate':
         this.validationService.onPush(push);
         return;
-      case 'highlight':
-        // TODO
-        return;
       default:
         log.error('Unknown push service:', service);
         break;
diff --git a/language-web/src/main/js/xtext/xtextServiceResults.ts b/language-web/src/main/js/xtext/xtextServiceResults.ts
index 6c3d9daf..e32d49c3 100644
--- a/language-web/src/main/js/xtext/xtextServiceResults.ts
+++ b/language-web/src/main/js/xtext/xtextServiceResults.ts
@@ -198,3 +198,29 @@ export function isContentAssistResult(result: unknown): result is IContentAssist
   return isDocumentStateResult(result)
     && isArrayOfType(contentAssistResult.entries, isContentAssistEntry);
 }
+
+export interface IHighlightingRegion {
+  offset: number;
+
+  length: number;
+
+  styleClasses: string[];
+}
+
+export function isHighlightingRegion(value: unknown): value is IHighlightingRegion {
+  const region = value as IHighlightingRegion;
+  return typeof region === 'object'
+    && typeof region.offset === 'number'
+    && typeof region.length === 'number'
+    && isArrayOfType(region.styleClasses, (s): s is string => typeof s === 'string');
+}
+
+export interface IHighlightingResult {
+  regions: IHighlightingRegion[];
+}
+
+export function isHighlightingResult(result: unknown): result is IHighlightingResult {
+  const highlightingResult = result as IHighlightingResult;
+  return typeof highlightingResult === 'object'
+    && isArrayOfType(highlightingResult.regions, isHighlightingRegion);
+}