Merge pull request #8 from kris7t/cm6

Switch to CodeMirror 6 editor and WebSocket-based transport for Xtext

45 files changed, 2802 insertions, 2058 deletions

diff --git a/language-web/src/main/js/App.tsx b/language-web/src/main/js/App.tsx
index d25ac4d3..2567aa9c 100644
--- a/language-web/src/main/js/App.tsx
+++ b/language-web/src/main/js/App.tsx
@@ -1,15 +1,14 @@
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import MenuIcon from '@mui/icons-material/Menu';
-import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import React from 'react';
 
 import { EditorArea } from './editor/EditorArea';
 import { EditorButtons } from './editor/EditorButtons';
+import { GenerateButton } from './editor/GenerateButton';
 
 export const App = (): JSX.Element => (
   <Box
@@ -46,13 +45,7 @@ export const App = (): JSX.Element => (
       p={1}
     >
       <EditorButtons />
-      <Button
-        variant="outlined"
-        color="primary"
-        startIcon={<PlayArrowIcon />}
-      >
-        Generate
-      </Button>
+      <GenerateButton />
     </Box>
     <Box
       flexGrow={1}
diff --git a/language-web/src/main/js/RootStore.tsx b/language-web/src/main/js/RootStore.tsx
index 88b8a445..96e1b26a 100644
--- a/language-web/src/main/js/RootStore.tsx
+++ b/language-web/src/main/js/RootStore.tsx
@@ -8,9 +8,9 @@ export class RootStore {
 
   themeStore;
 
-  constructor() {
+  constructor(initialValue: string) {
     this.themeStore = new ThemeStore();
-    this.editorStore = new EditorStore(this.themeStore);
+    this.editorStore = new EditorStore(initialValue, this.themeStore);
   }
 }
 
diff --git a/language-web/src/main/js/editor/EditorArea.tsx b/language-web/src/main/js/editor/EditorArea.tsx
index 531a57c9..678a632d 100644
--- a/language-web/src/main/js/editor/EditorArea.tsx
+++ b/language-web/src/main/js/editor/EditorArea.tsx
@@ -1,41 +1,151 @@
+import { Command, EditorView } from '@codemirror/view';
+import { closeSearchPanel, openSearchPanel } from '@codemirror/search';
+import { closeLintPanel, openLintPanel } from '@codemirror/lint';
 import { observer } from 'mobx-react-lite';
-import React, { useRef } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 
+import { EditorParent } from './EditorParent';
 import { useRootStore } from '../RootStore';
+import { getLogger } from '../utils/logger';
+
+const log = getLogger('editor.EditorArea');
+
+function usePanel(
+  panelId: string,
+  stateToSet: boolean,
+  editorView: EditorView | null,
+  openCommand: Command,
+  closeCommand: Command,
+  closeCallback: () => void,
+) {
+  const [cachedViewState, setCachedViewState] = useState<boolean>(false);
+  useEffect(() => {
+    if (editorView === null || cachedViewState === stateToSet) {
+      return;
+    }
+    if (stateToSet) {
+      openCommand(editorView);
+      const buttonQuery = `.cm-${panelId}.cm-panel button[name="close"]`;
+      const closeButton = editorView.dom.querySelector(buttonQuery);
+      if (closeButton) {
+        log.debug('Addig close button callback to', panelId, 'panel');
+        // We must remove the event listener added by CodeMirror from the button
+        // that dispatches a transaction without going through `EditorStorre`.
+        // Cloning a DOM node removes event listeners,
+        // see https://stackoverflow.com/a/9251864
+        const closeButtonWithoutListeners = closeButton.cloneNode(true);
+        closeButtonWithoutListeners.addEventListener('click', (event) => {
+          closeCallback();
+          event.preventDefault();
+        });
+        closeButton.replaceWith(closeButtonWithoutListeners);
+      } else {
+        log.error('Opened', panelId, 'panel has no close button');
+      }
+    } else {
+      closeCommand(editorView);
+    }
+    setCachedViewState(stateToSet);
+  }, [
+    stateToSet,
+    editorView,
+    cachedViewState,
+    panelId,
+    openCommand,
+    closeCommand,
+    closeCallback,
+  ]);
+  return setCachedViewState;
+}
+
+function fixCodeMirrorAccessibility(editorView: EditorView) {
+  // Reported by Lighthouse 8.3.0.
+  const { contentDOM } = editorView;
+  contentDOM.removeAttribute('aria-expanded');
+  contentDOM.setAttribute('aria-label', 'Code editor');
+}
 
 export const EditorArea = observer(() => {
   const { editorStore } = useRootStore();
-  const { CodeMirror } = editorStore.chunk || {};
-  const fallbackTextarea = useRef<HTMLTextAreaElement>(null);
-
-  if (!CodeMirror) {
-    return (
-      <textarea
-        value={editorStore.value}
-        onChange={(e) => editorStore.updateValue(e.target.value)}
-        ref={fallbackTextarea}
-        className={`problem-fallback-editor cm-s-${editorStore.codeMirrorTheme}`}
-      />
-    );
-  }
-
-  const textarea = fallbackTextarea.current;
-  if (textarea) {
-    editorStore.setInitialSelection(
-      textarea.selectionStart,
-      textarea.selectionEnd,
-      document.activeElement === textarea,
-    );
-  }
+  const editorParentRef = useRef<HTMLDivElement | null>(null);
+  const [editorViewState, setEditorViewState] = useState<EditorView | null>(null);
+
+  const setSearchPanelOpen = usePanel(
+    'search',
+    editorStore.showSearchPanel,
+    editorViewState,
+    openSearchPanel,
+    closeSearchPanel,
+    useCallback(() => editorStore.setSearchPanelOpen(false), [editorStore]),
+  );
+
+  const setLintPanelOpen = usePanel(
+    'panel-lint',
+    editorStore.showLintPanel,
+    editorViewState,
+    openLintPanel,
+    closeLintPanel,
+    useCallback(() => editorStore.setLintPanelOpen(false), [editorStore]),
+  );
+
+  useEffect(() => {
+    if (editorParentRef.current === null) {
+      // Nothing to clean up.
+      return () => {};
+    }
+
+    const editorView = new EditorView({
+      state: editorStore.state,
+      parent: editorParentRef.current,
+      dispatch: (transaction) => {
+        editorStore.onTransaction(transaction);
+        editorView.update([transaction]);
+        if (editorView.state !== editorStore.state) {
+          log.error(
+            'Failed to synchronize editor state - store state:',
+            editorStore.state,
+            'view state:',
+            editorView.state,
+          );
+        }
+      },
+    });
+    fixCodeMirrorAccessibility(editorView);
+    setEditorViewState(editorView);
+    setSearchPanelOpen(false);
+    setLintPanelOpen(false);
+    // `dispatch` is bound to the view instance,
+    // so it does not have to be called as a method.
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    editorStore.updateDispatcher(editorView.dispatch);
+    log.info('Editor created');
+
+    return () => {
+      editorStore.updateDispatcher(null);
+      editorView.destroy();
+      log.info('Editor destroyed');
+    };
+  }, [
+    editorParentRef,
+    editorStore,
+    setSearchPanelOpen,
+    setLintPanelOpen,
+  ]);
 
   return (
-    <CodeMirror
-      value={editorStore.value}
-      options={editorStore.codeMirrorOptions}
-      editorDidMount={(editor) => editorStore.editorDidMount(editor)}
-      editorWillUnmount={() => editorStore.editorWillUnmount()}
-      onBeforeChange={(_editor, _data, value) => editorStore.updateValue(value)}
-      onChange={() => editorStore.reportChanged()}
+    <EditorParent
+      className="dark"
+      sx={{
+        '.cm-lineNumbers': editorStore.showLineNumbers ? {} : {
+          display: 'none !important',
+        },
+      }}
+      ref={editorParentRef}
     />
   );
 });
diff --git a/language-web/src/main/js/editor/EditorButtons.tsx b/language-web/src/main/js/editor/EditorButtons.tsx
index 56577e82..09ce33dd 100644
--- a/language-web/src/main/js/editor/EditorButtons.tsx
+++ b/language-web/src/main/js/editor/EditorButtons.tsx
@@ -1,14 +1,36 @@
+import type { Diagnostic } from '@codemirror/lint';
 import { observer } from 'mobx-react-lite';
+import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import CheckIcon from '@mui/icons-material/Check';
+import ErrorIcon from '@mui/icons-material/Error';
 import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import RedoIcon from '@mui/icons-material/Redo';
+import SearchIcon from '@mui/icons-material/Search';
 import UndoIcon from '@mui/icons-material/Undo';
+import WarningIcon from '@mui/icons-material/Warning';
 import React from 'react';
 
 import { useRootStore } from '../RootStore';
 
+// Exhastive switch as proven by TypeScript.
+// eslint-disable-next-line consistent-return
+function getLintIcon(severity: Diagnostic['severity'] | null) {
+  switch (severity) {
+    case 'error':
+      return <ErrorIcon fontSize="small" />;
+    case 'warning':
+      return <WarningIcon fontSize="small" />;
+    case 'info':
+      return <InfoOutlinedIcon fontSize="small" />;
+    case null:
+      return <CheckIcon fontSize="small" />;
+  }
+}
+
 export const EditorButtons = observer(() => {
   const { editorStore } = useRootStore();
 
@@ -17,35 +39,55 @@ export const EditorButtons = observer(() => {
       direction="row"
       spacing={1}
     >
-      <ToggleButtonGroup
-        size="small"
+      <Stack
+        direction="row"
+        alignItems="center"
       >
-        <ToggleButton
+        <IconButton
           disabled={!editorStore.canUndo}
           onClick={() => editorStore.undo()}
           aria-label="Undo"
           value="undo"
         >
           <UndoIcon fontSize="small" />
-        </ToggleButton>
-        <ToggleButton
+        </IconButton>
+        <IconButton
           disabled={!editorStore.canRedo}
           onClick={() => editorStore.redo()}
           aria-label="Redo"
           value="redo"
         >
           <RedoIcon fontSize="small" />
-        </ToggleButton>
-      </ToggleButtonGroup>
-      <ToggleButton
-        selected={editorStore.showLineNumbers}
-        onChange={() => editorStore.toggleLineNumbers()}
+        </IconButton>
+      </Stack>
+      <ToggleButtonGroup
         size="small"
-        aria-label="Show line numbers"
-        value="show-line-numbers"
       >
-        <FormatListNumberedIcon fontSize="small" />
-      </ToggleButton>
+        <ToggleButton
+          selected={editorStore.showLineNumbers}
+          onClick={() => editorStore.toggleLineNumbers()}
+          aria-label="Show line numbers"
+          value="show-line-numbers"
+        >
+          <FormatListNumberedIcon fontSize="small" />
+        </ToggleButton>
+        <ToggleButton
+          selected={editorStore.showSearchPanel}
+          onClick={() => editorStore.toggleSearchPanel()}
+          aria-label="Show find/replace"
+          value="show-search-panel"
+        >
+          <SearchIcon fontSize="small" />
+        </ToggleButton>
+        <ToggleButton
+          selected={editorStore.showLintPanel}
+          onClick={() => editorStore.toggleLintPanel()}
+          aria-label="Show diagnostics panel"
+          value="show-lint-panel"
+        >
+          {getLintIcon(editorStore.highestDiagnosticLevel)}
+        </ToggleButton>
+      </ToggleButtonGroup>
     </Stack>
   );
 });
diff --git a/language-web/src/main/js/editor/EditorParent.ts b/language-web/src/main/js/editor/EditorParent.ts
new file mode 100644
index 00000000..ee1323f6
--- /dev/null
+++ b/language-web/src/main/js/editor/EditorParent.ts
@@ -0,0 +1,200 @@
+import { styled } from '@mui/material/styles';
+
+/**
+ * Returns a squiggly underline background image encoded as a CSS `url()` data URI with Base64.
+ *
+ * Based on
+ * https://github.com/codemirror/lint/blob/f524b4a53b0183bb343ac1e32b228d28030d17af/src/lint.ts#L501
+ *
+ * @param color the color of the underline
+ * @returns the CSS `url()`
+ */
+function underline(color: string) {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="6" height="3">
+    <path d="m0 3 l2 -2 l1 0 l2 2 l1 0" stroke="${color}" fill="none" stroke-width=".7"/>
+  </svg>`;
+  const svgBase64 = window.btoa(svg);
+  return `url('data:image/svg+xml;base64,${svgBase64}')`;
+}
+
+export const EditorParent = styled('div')(({ theme }) => {
+  const codeMirrorLintStyle: Record<string, unknown> = {};
+  (['error', 'warning', 'info'] as const).forEach((severity) => {
+    const color = theme.palette[severity].main;
+    codeMirrorLintStyle[`.cm-diagnostic-${severity}`] = {
+      borderLeftColor: color,
+    };
+    codeMirrorLintStyle[`.cm-lintRange-${severity}`] = {
+      backgroundImage: underline(color),
+    };
+  });
+
+  return {
+    background: theme.palette.background.default,
+    '&, .cm-editor': {
+      height: '100%',
+    },
+    '.cm-scroller, .cm-tooltip-autocomplete, .cm-completionLabel, .cm-completionDetail': {
+      fontSize: 16,
+      fontFamily: '"JetBrains MonoVariable", "JetBrains Mono", monospace',
+      fontFeatureSettings: '"liga", "calt"',
+      fontWeight: 400,
+      letterSpacing: 0,
+      textRendering: 'optimizeLegibility',
+    },
+    '.cm-scroller': {
+      color: theme.palette.text.secondary,
+    },
+    '.cm-gutters': {
+      background: theme.palette.background.default,
+      color: theme.palette.text.disabled,
+      border: 'none',
+    },
+    '.cm-specialChar': {
+      color: theme.palette.secondary.main,
+    },
+    '.cm-activeLine': {
+      background: 'rgba(0, 0, 0, 0.3)',
+    },
+    '.cm-activeLineGutter': {
+      background: 'rgba(0, 0, 0, 0.3)',
+      color: theme.palette.text.primary,
+    },
+    '.cm-cursor, .cm-cursor-primary': {
+      borderColor: theme.palette.primary.main,
+      background: theme.palette.common.black,
+    },
+    '.cm-selectionBackground': {
+      background: '#3e4453',
+    },
+    '.cm-focused': {
+      outline: 'none',
+      '.cm-selectionBackground': {
+        background: '#3e4453',
+      },
+    },
+    '.cm-panels-top': {
+      color: theme.palette.text.secondary,
+    },
+    '.cm-panel': {
+      '&, & button, & input': {
+        fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
+      },
+      background: theme.palette.background.paper,
+      borderTop: `1px solid ${theme.palette.divider}`,
+      'button[name="close"]': {
+        background: 'transparent',
+        color: theme.palette.text.secondary,
+        cursor: 'pointer',
+      },
+    },
+    '.cm-panel.cm-panel-lint': {
+      'button[name="close"]': {
+        // Close button interferes with scrollbar, so we better hide it.
+        // The panel can still be closed from the toolbar.
+        display: 'none',
+      },
+      ul: {
+        li: {
+          borderBottom: `1px solid ${theme.palette.divider}`,
+          cursor: 'pointer',
+        },
+        '[aria-selected]': {
+          background: '#3e4453',
+          color: theme.palette.text.primary,
+        },
+        '&:focus [aria-selected]': {
+          background: theme.palette.primary.main,
+          color: theme.palette.primary.contrastText,
+        },
+      },
+    },
+    '.cm-foldPlaceholder': {
+      background: theme.palette.background.paper,
+      borderColor: theme.palette.text.disabled,
+      color: theme.palette.text.secondary,
+    },
+    '.cmt-comment': {
+      fontStyle: 'italic',
+      color: theme.palette.text.disabled,
+    },
+    '.cmt-number': {
+      color: '#6188a6',
+    },
+    '.cmt-string': {
+      color: theme.palette.secondary.dark,
+    },
+    '.cmt-keyword': {
+      color: theme.palette.primary.main,
+    },
+    '.cmt-typeName, .cmt-macroName, .cmt-atom': {
+      color: theme.palette.text.primary,
+    },
+    '.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%),
+        0px 4px 5px 0px rgb(0 0 0 / 14%),
+        0px 1px 10px 0px rgb(0 0 0 / 12%)`,
+      '.cm-completionIcon': {
+        color: theme.palette.text.secondary,
+      },
+      '.cm-completionLabel': {
+        color: theme.palette.text.primary,
+      },
+      '.cm-completionDetail': {
+        color: theme.palette.text.secondary,
+        fontStyle: 'normal',
+      },
+      '[aria-selected]': {
+        background: `${theme.palette.primary.main} !important`,
+        '.cm-completionIcon, .cm-completionLabel, .cm-completionDetail': {
+          color: theme.palette.primary.contrastText,
+        },
+      },
+    },
+    '.cm-completionIcon': {
+      width: 16,
+      padding: 0,
+      marginRight: '0.5em',
+      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 705020b9..ba31efcb 100644
--- a/language-web/src/main/js/editor/EditorStore.ts
+++ b/language-web/src/main/js/editor/EditorStore.ts
@@ -1,201 +1,283 @@
-import type { Editor, EditorConfiguration } from 'codemirror';
+import { autocompletion, completionKeymap } from '@codemirror/autocomplete';
+import { closeBrackets, closeBracketsKeymap } from '@codemirror/closebrackets';
+import { defaultKeymap, indentWithTab } from '@codemirror/commands';
+import { commentKeymap } from '@codemirror/comment';
+import { foldGutter, foldKeymap } from '@codemirror/fold';
+import { highlightActiveLineGutter, lineNumbers } from '@codemirror/gutter';
+import { classHighlightStyle } from '@codemirror/highlight';
+import {
+  history,
+  historyKeymap,
+  redo,
+  redoDepth,
+  undo,
+  undoDepth,
+} from '@codemirror/history';
+import { indentOnInput } from '@codemirror/language';
+import {
+  Diagnostic,
+  lintKeymap,
+  setDiagnostics,
+} from '@codemirror/lint';
+import { bracketMatching } from '@codemirror/matchbrackets';
+import { rectangularSelection } from '@codemirror/rectangular-selection';
+import { searchConfig, searchKeymap } from '@codemirror/search';
+import {
+  EditorState,
+  StateCommand,
+  StateEffect,
+  Transaction,
+  TransactionSpec,
+} from '@codemirror/state';
+import {
+  drawSelection,
+  EditorView,
+  highlightActiveLine,
+  highlightSpecialChars,
+  keymap,
+} from '@codemirror/view';
 import {
-  createAtom,
   makeAutoObservable,
   observable,
-  runInAction,
+  reaction,
 } from 'mobx';
-import type { IXtextOptions, IXtextServices } from 'xtext/xtext-codemirror';
 
-import type { IEditorChunk } from './editor';
-import { getLogger } from '../logging';
+import { findOccurrences, IOccurrence, setOccurrences } from './findOccurrences';
+import { problemLanguageSupport } from '../language/problemLanguageSupport';
+import {
+  IHighlightRange,
+  semanticHighlighting,
+  setSemanticHighlighting,
+} from './semanticHighlighting';
 import type { ThemeStore } from '../theme/ThemeStore';
+import { getLogger } from '../utils/logger';
+import { XtextClient } from '../xtext/XtextClient';
 
-const log = getLogger('EditorStore');
+const log = getLogger('editor.EditorStore');
 
-const xtextLang = 'problem';
+export class EditorStore {
+  private readonly themeStore;
 
-const xtextOptions: IXtextOptions = {
-  xtextLang,
-  enableFormattingAction: true,
-};
+  state: EditorState;
 
-const codeMirrorGlobalOptions: EditorConfiguration = {
-  mode: `xtext/${xtextLang}`,
-  indentUnit: 2,
-  styleActiveLine: true,
-  screenReaderLabel: 'Model source code',
-  inputStyle: 'contenteditable',
-};
+  private readonly client: XtextClient;
 
-export class EditorStore {
-  themeStore;
+  showLineNumbers = false;
 
-  atom;
+  showSearchPanel = false;
 
-  chunk?: IEditorChunk;
+  showLintPanel = false;
 
-  editor?: Editor;
+  errorCount = 0;
 
-  xtextServices?: IXtextServices;
+  warningCount = 0;
 
-  value = '';
+  infoCount = 0;
 
-  showLineNumbers = false;
+  private readonly defaultDispatcher = (tr: Transaction): void => {
+    this.onTransaction(tr);
+  };
 
-  initialSelection!: { start: number, end: number, focused: boolean };
+  private dispatcher = this.defaultDispatcher;
 
-  constructor(themeStore: ThemeStore) {
+  constructor(initialValue: string, themeStore: ThemeStore) {
     this.themeStore = themeStore;
-    this.atom = createAtom('EditorStore');
-    this.resetInitialSelection();
-    makeAutoObservable(this, {
-      themeStore: false,
-      atom: false,
-      chunk: observable.ref,
-      editor: observable.ref,
-      xtextServices: observable.ref,
-      initialSelection: false,
+    this.state = EditorState.create({
+      doc: initialValue,
+      extensions: [
+        autocompletion({
+          activateOnTyping: true,
+          override: [
+            (context) => this.client.contentAssist(context),
+          ],
+        }),
+        classHighlightStyle.extension,
+        closeBrackets(),
+        bracketMatching(),
+        drawSelection(),
+        EditorState.allowMultipleSelections.of(true),
+        EditorView.theme({}, {
+          dark: this.themeStore.darkMode,
+        }),
+        findOccurrences,
+        highlightActiveLine(),
+        highlightActiveLineGutter(),
+        highlightSpecialChars(),
+        history(),
+        indentOnInput(),
+        rectangularSelection(),
+        searchConfig({
+          top: true,
+          matchCase: true,
+        }),
+        semanticHighlighting,
+        // We add the gutters to `extensions` in the order we want them to appear.
+        foldGutter(),
+        lineNumbers(),
+        keymap.of([
+          ...closeBracketsKeymap,
+          ...commentKeymap,
+          ...completionKeymap,
+          ...foldKeymap,
+          ...historyKeymap,
+          indentWithTab,
+          // Override keys in `lintKeymap` to go through the `EditorStore`.
+          { key: 'Mod-Shift-m', run: () => this.setLintPanelOpen(true) },
+          ...lintKeymap,
+          // Override keys in `searchKeymap` to go through the `EditorStore`.
+          { key: 'Mod-f', run: () => this.setSearchPanelOpen(true), scope: 'editor search-panel' },
+          { key: 'Escape', run: () => this.setSearchPanelOpen(false), scope: 'editor search-panel' },
+          ...searchKeymap,
+          ...defaultKeymap,
+        ]),
+        problemLanguageSupport(),
+      ],
     });
-    this.loadChunk();
-  }
-
-  private loadChunk(): void {
-    const loadingStartMillis = Date.now();
-    log.info('Requesting editor chunk');
-    import('./editor').then(({ editorChunk }) => {
-      runInAction(() => {
-        this.chunk = editorChunk;
-      });
-      const loadingDurationMillis = Date.now() - loadingStartMillis;
-      log.info('Loaded editor chunk in', loadingDurationMillis, 'ms');
-    }).catch((error) => {
-      log.error('Error while loading editor', error);
+    this.client = new XtextClient(this);
+    reaction(
+      () => this.themeStore.darkMode,
+      (darkMode) => {
+        log.debug('Update editor dark mode', darkMode);
+        this.dispatch({
+          effects: [
+            StateEffect.appendConfig.of(EditorView.theme({}, {
+              dark: darkMode,
+            })),
+          ],
+        });
+      },
+    );
+    makeAutoObservable(this, {
+      state: observable.ref,
     });
   }
 
-  setInitialSelection(start: number, end: number, focused: boolean): void {
-    this.initialSelection = { start, end, focused };
-    this.applyInitialSelectionToEditor();
+  updateDispatcher(newDispatcher: ((tr: Transaction) => void) | null): void {
+    this.dispatcher = newDispatcher || this.defaultDispatcher;
+  }
+
+  onTransaction(tr: Transaction): void {
+    log.trace('Editor transaction', tr);
+    this.state = tr.state;
+    this.client.onTransaction(tr);
   }
 
-  private resetInitialSelection(): void {
-    this.initialSelection = {
-      start: 0,
-      end: 0,
-      focused: false,
-    };
+  dispatch(...specs: readonly TransactionSpec[]): void {
+    this.dispatcher(this.state.update(...specs));
   }
 
-  private applyInitialSelectionToEditor(): void {
-    if (this.editor) {
-      const { start, end, focused } = this.initialSelection;
-      const doc = this.editor.getDoc();
-      const startPos = doc.posFromIndex(start);
-      const endPos = doc.posFromIndex(end);
-      doc.setSelection(startPos, endPos, {
-        scroll: true,
-      });
-      if (focused) {
-        this.editor.focus();
+  doStateCommand(command: StateCommand): boolean {
+    return command({
+      state: this.state,
+      dispatch: this.dispatcher,
+    });
+  }
+
+  updateDiagnostics(diagnostics: Diagnostic[]): void {
+    this.dispatch(setDiagnostics(this.state, diagnostics));
+    this.errorCount = 0;
+    this.warningCount = 0;
+    this.infoCount = 0;
+    diagnostics.forEach(({ severity }) => {
+      switch (severity) {
+        case 'error':
+          this.errorCount += 1;
+          break;
+        case 'warning':
+          this.warningCount += 1;
+          break;
+        case 'info':
+          this.infoCount += 1;
+          break;
       }
-      this.resetInitialSelection();
-    }
+    });
   }
 
-  /**
-   * Attaches a new CodeMirror instance and creates Xtext services.
-   *
-   * The store will not subscribe to any CodeMirror events. Instead,
-   * the editor component should subscribe to them and relay them to the store.
-   *
-   * @param newEditor The new CodeMirror instance
-   */
-  editorDidMount(newEditor: Editor): void {
-    if (!this.chunk) {
-      throw new Error('Editor not loaded yet');
+  get highestDiagnosticLevel(): Diagnostic['severity'] | null {
+    if (this.errorCount > 0) {
+      return 'error';
+    }
+    if (this.warningCount > 0) {
+      return 'warning';
     }
-    if (this.editor) {
-      throw new Error('CoreMirror editor mounted before unmounting');
+    if (this.infoCount > 0) {
+      return 'info';
     }
-    this.editor = newEditor;
-    this.xtextServices = this.chunk.createServices(newEditor, xtextOptions);
-    this.applyInitialSelectionToEditor();
+    return null;
   }
 
-  editorWillUnmount(): void {
-    if (!this.chunk) {
-      throw new Error('Editor not loaded yet');
-    }
-    if (this.editor) {
-      this.chunk.removeServices(this.editor);
-    }
-    delete this.editor;
-    delete this.xtextServices;
+  updateSemanticHighlighting(ranges: IHighlightRange[]): void {
+    this.dispatch(setSemanticHighlighting(ranges));
+  }
+
+  updateOccurrences(write: IOccurrence[], read: IOccurrence[]): void {
+    this.dispatch(setOccurrences(write, read));
   }
 
   /**
-   * Updates the contents of the editor.
-   *
-   * @param newValue The new contents of the editor
+   * @returns `true` if there is history to undo
    */
-  updateValue(newValue: string): void {
-    this.value = newValue;
+  get canUndo(): boolean {
+    return undoDepth(this.state) > 0;
   }
 
-  reportChanged(): void {
-    this.atom.reportChanged();
+  // eslint-disable-next-line class-methods-use-this
+  undo(): void {
+    log.debug('Undo', this.doStateCommand(undo));
   }
 
-  protected observeEditorChanges(): void {
-    this.atom.reportObserved();
+  /**
+   * @returns `true` if there is history to redo
+   */
+  get canRedo(): boolean {
+    return redoDepth(this.state) > 0;
   }
 
-  get codeMirrorTheme(): string {
-    return `problem-${this.themeStore.className}`;
+  // eslint-disable-next-line class-methods-use-this
+  redo(): void {
+    log.debug('Redo', this.doStateCommand(redo));
   }
 
-  get codeMirrorOptions(): EditorConfiguration {
-    return {
-      ...codeMirrorGlobalOptions,
-      theme: this.codeMirrorTheme,
-      lineNumbers: this.showLineNumbers,
-    };
+  toggleLineNumbers(): void {
+    this.showLineNumbers = !this.showLineNumbers;
+    log.debug('Show line numbers', this.showLineNumbers);
   }
 
   /**
-   * @returns `true` if there is history to undo
+   * Sets whether the CodeMirror search panel should be open.
+   *
+   * This method can be used as a CodeMirror command,
+   * because it returns `false` if it didn't execute,
+   * allowing other commands for the same keybind to run instead.
+   * This matches the behavior of the `openSearchPanel` and `closeSearchPanel`
+   * commands from `'@codemirror/search'`.
+   *
+   * @param newShosSearchPanel whether we should show the search panel
+   * @returns `true` if the state was changed, `false` otherwise
    */
-  get canUndo(): boolean {
-    this.observeEditorChanges();
-    if (!this.editor) {
+  setSearchPanelOpen(newShowSearchPanel: boolean): boolean {
+    if (this.showSearchPanel === newShowSearchPanel) {
       return false;
     }
-    const { undo: undoSize } = this.editor.historySize();
-    return undoSize > 0;
+    this.showSearchPanel = newShowSearchPanel;
+    log.debug('Show search panel', this.showSearchPanel);
+    return true;
   }
 
-  undo(): void {
-    this.editor?.undo();
+  toggleSearchPanel(): void {
+    this.setSearchPanelOpen(!this.showSearchPanel);
   }
 
-  /**
-   * @returns `true` if there is history to redo
-   */
-  get canRedo(): boolean {
-    this.observeEditorChanges();
-    if (!this.editor) {
+  setLintPanelOpen(newShowLintPanel: boolean): boolean {
+    if (this.showLintPanel === newShowLintPanel) {
       return false;
     }
-    const { redo: redoSize } = this.editor.historySize();
-    return redoSize > 0;
-  }
-
-  redo(): void {
-    this.editor?.redo();
+    this.showLintPanel = newShowLintPanel;
+    log.debug('Show lint panel', this.showLintPanel);
+    return true;
   }
 
-  toggleLineNumbers(): void {
-    this.showLineNumbers = !this.showLineNumbers;
+  toggleLintPanel(): void {
+    this.setLintPanelOpen(!this.showLintPanel);
   }
 }
diff --git a/language-web/src/main/js/editor/GenerateButton.tsx b/language-web/src/main/js/editor/GenerateButton.tsx
new file mode 100644
index 00000000..3834cec4
--- /dev/null
+++ b/language-web/src/main/js/editor/GenerateButton.tsx
@@ -0,0 +1,44 @@
+import { observer } from 'mobx-react-lite';
+import Button from '@mui/material/Button';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import React from 'react';
+
+import { useRootStore } from '../RootStore';
+
+const GENERATE_LABEL = 'Generate';
+
+export const GenerateButton = observer(() => {
+  const { editorStore } = useRootStore();
+  const { errorCount, warningCount } = editorStore;
+
+  const diagnostics: string[] = [];
+  if (errorCount > 0) {
+    diagnostics.push(`${errorCount} error${errorCount === 1 ? '' : 's'}`);
+  }
+  if (warningCount > 0) {
+    diagnostics.push(`${warningCount} warning${warningCount === 1 ? '' : 's'}`);
+  }
+  const summary = diagnostics.join(' and ');
+
+  if (errorCount > 0) {
+    return (
+      <Button
+        variant="outlined"
+        color="error"
+        onClick={() => editorStore.toggleLintPanel()}
+      >
+        {summary}
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      variant="outlined"
+      color={warningCount > 0 ? 'warning' : 'primary'}
+      startIcon={<PlayArrowIcon />}
+    >
+      {summary === '' ? GENERATE_LABEL : `${GENERATE_LABEL} (${summary})`}
+    </Button>
+  );
+});
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/editor.ts b/language-web/src/main/js/editor/editor.ts
deleted file mode 100644
index fbf8796b..00000000
--- a/language-web/src/main/js/editor/editor.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import 'codemirror/addon/selection/active-line';
-import 'mode-problem';
-import { Controlled } from 'react-codemirror2';
-import { createServices, removeServices } from 'xtext/xtext-codemirror';
-
-export interface IEditorChunk {
-  CodeMirror: typeof Controlled;
-
-  createServices: typeof createServices;
-
-  removeServices: typeof removeServices;
-}
-
-export const editorChunk: IEditorChunk = {
-  CodeMirror: Controlled,
-  createServices,
-  removeServices,
-};
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
new file mode 100644
index 00000000..2aed421b
--- /dev/null
+++ b/language-web/src/main/js/editor/semanticHighlighting.ts
@@ -0,0 +1,24 @@
+import { RangeSet } from '@codemirror/rangeset';
+import type { TransactionSpec } from '@codemirror/state';
+import { Decoration } from '@codemirror/view';
+
+import { decorationSetExtension } from './decorationSetExtension';
+
+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 { semanticHighlighting };
diff --git a/language-web/src/main/js/index.tsx b/language-web/src/main/js/index.tsx
index 80c70f23..dfecde37 100644
--- a/language-web/src/main/js/index.tsx
+++ b/language-web/src/main/js/index.tsx
@@ -9,23 +9,34 @@ import { ThemeProvider } from './theme/ThemeProvider';
 import '../css/index.scss';
 
 const initialValue = `class Family {
-  contains Person[] members
+    contains Person[] members
 }
 
 class Person {
-  Person[] children opposite parent
-  Person[0..1] parent opposite children
-  int age
-  TaxStatus taxStatus
+    Person[] children opposite parent
+    Person[0..1] parent opposite children
+    int age
+    TaxStatus taxStatus
 }
 
 enum TaxStatus {
-  child, student, adult, retired
+    child, student, adult, retired
 }
 
 % A child cannot have any dependents.
-error invalidTaxStatus(Person p) <->
-  taxStatus(p, child), children(p, _q).
+pred invalidTaxStatus(Person p) <->
+    taxStatus(p, child),
+    children(p, _q)
+  ; taxStatus(p, retired),
+    parent(p, q),
+    !taxStatus(q, retired).
+
+direct rule createChild(p):
+    children(p, newPerson) = unknown,
+    equals(newPerson, newPerson) = unknown
+ ~> new q,
+    children(p, q) = true,
+    taxStatus(q, child) = true.
 
 unique family.
 Family(family).
@@ -44,8 +55,7 @@ age(bob, bobAge).
 scope Family = 1, Person += 5..10.
 `;
 
-const rootStore = new RootStore();
-rootStore.editorStore.updateValue(initialValue);
+const rootStore = new RootStore(initialValue);
 
 const app = (
   <RootStoreProvider rootStore={rootStore}>
diff --git a/language-web/src/main/js/language/folding.ts b/language-web/src/main/js/language/folding.ts
new file mode 100644
index 00000000..5d51f796
--- /dev/null
+++ b/language-web/src/main/js/language/folding.ts
@@ -0,0 +1,115 @@
+import { EditorState } from '@codemirror/state';
+import type { SyntaxNode } from '@lezer/common';
+
+export type FoldRange = { from: number, to: number };
+
+/**
+ * Folds a block comment between its delimiters.
+ *
+ * @param node the node to fold
+ * @returns the folding range or `null` is there is nothing to fold
+ */
+export function foldBlockComment(node: SyntaxNode): FoldRange {
+  return {
+    from: node.from + 2,
+    to: node.to - 2,
+  };
+}
+
+/**
+ * Folds a declaration after the first element if it appears on the opening line,
+ * otherwise folds after the opening keyword.
+ *
+ * @example
+ * First element on the opening line:
+ * ```
+ * scope Family = 1,
+ *       Person += 5..10.
+ * ```
+ * becomes
+ * ```
+ * scope Family = 1,[...].
+ * ```
+ *
+ * @example
+ * First element not on the opening line:
+ * ```
+ * scope Family
+ *       = 1,
+ *       Person += 5..10.
+ * ```
+ * becomes
+ * ```
+ * scope [...].
+ * ```
+ *
+ * @param node the node to fold
+ * @param state the editor state
+ * @returns the folding range or `null` is there is nothing to fold
+ */
+export function foldDeclaration(node: SyntaxNode, state: EditorState): FoldRange | null {
+  const { firstChild: open, lastChild: close } = node;
+  if (open === null || close === null) {
+    return null;
+  }
+  const { cursor } = open;
+  const lineEnd = state.doc.lineAt(open.from).to;
+  let foldFrom = open.to;
+  while (cursor.next() && cursor.from < lineEnd) {
+    if (cursor.type.name === ',') {
+      foldFrom = cursor.to;
+      break;
+    }
+  }
+  return {
+    from: foldFrom,
+    to: close.from,
+  };
+}
+
+/**
+ * Folds a node only if it has at least one sibling of the same type.
+ *
+ * The folding range will be the entire `node`.
+ *
+ * @param node the node to fold
+ * @returns the folding range or `null` is there is nothing to fold
+ */
+function foldWithSibling(node: SyntaxNode): FoldRange | null {
+  const { parent } = node;
+  if (parent === null) {
+    return null;
+  }
+  const { firstChild } = parent;
+  if (firstChild === null) {
+    return null;
+  }
+  const { cursor } = firstChild;
+  let nSiblings = 0;
+  while (cursor.nextSibling()) {
+    if (cursor.type === node.type) {
+      nSiblings += 1;
+    }
+    if (nSiblings >= 2) {
+      return {
+        from: node.from,
+        to: node.to,
+      };
+    }
+  }
+  return null;
+}
+
+export function foldWholeNode(node: SyntaxNode): FoldRange {
+  return {
+    from: node.from,
+    to: node.to,
+  };
+}
+
+export function foldConjunction(node: SyntaxNode): FoldRange | null {
+  if (node.parent?.type?.name === 'PredicateBody') {
+    return foldWithSibling(node);
+  }
+  return foldWholeNode(node);
+}
diff --git a/language-web/src/main/js/language/indentation.ts b/language-web/src/main/js/language/indentation.ts
new file mode 100644
index 00000000..78f0a750
--- /dev/null
+++ b/language-web/src/main/js/language/indentation.ts
@@ -0,0 +1,87 @@
+import { TreeIndentContext } from '@codemirror/language';
+
+/**
+ * Finds the `from` of first non-skipped token, if any,
+ * after the opening keyword in the first line of the declaration.
+ *
+ * Based on
+ * https://github.com/codemirror/language/blob/cd7f7e66fa51ddbce96cf9396b1b6127d0ca4c94/src/indent.ts#L246
+ *
+ * @param context the indentation context
+ * @returns the alignment or `null` if there is no token after the opening keyword
+ */
+function findAlignmentAfterOpening(context: TreeIndentContext): number | null {
+  const {
+    node: tree,
+    simulatedBreak,
+  } = context;
+  const openingToken = tree.childAfter(tree.from);
+  if (openingToken === null) {
+    return null;
+  }
+  const openingLine = context.state.doc.lineAt(openingToken.from);
+  const lineEnd = simulatedBreak == null || simulatedBreak <= openingLine.from
+    ? openingLine.to
+    : Math.min(openingLine.to, simulatedBreak);
+  const { cursor } = openingToken;
+  while (cursor.next() && cursor.from < lineEnd) {
+    if (!cursor.type.isSkipped) {
+      return cursor.from;
+    }
+  }
+  return null;
+}
+
+/**
+ * Indents text after declarations by a single unit if it begins on a new line,
+ * otherwise it aligns with the text after the declaration.
+ *
+ * Based on
+ * https://github.com/codemirror/language/blob/cd7f7e66fa51ddbce96cf9396b1b6127d0ca4c94/src/indent.ts#L275
+ *
+ * @example
+ * Result with no hanging indent (indent unit = 2 spaces, units = 1):
+ * ```
+ * scope
+ *   Family = 1,
+ *   Person += 5..10.
+ * ```
+ *
+ * @example
+ * Result with hanging indent:
+ * ```
+ * scope Family = 1,
+ *       Person += 5..10.
+ * ```
+ *
+ * @param context the indentation context
+ * @param units the number of units to indent
+ * @returns the desired indentation level
+ */
+function indentDeclarationStrategy(context: TreeIndentContext, units: number): number {
+  const alignment = findAlignmentAfterOpening(context);
+  if (alignment !== null) {
+    return context.column(alignment);
+  }
+  return context.baseIndent + units * context.unit;
+}
+
+export function indentBlockComment(): number {
+  // Do not indent.
+  return -1;
+}
+
+export function indentDeclaration(context: TreeIndentContext): number {
+  return indentDeclarationStrategy(context, 1);
+}
+
+export function indentPredicateOrRule(context: TreeIndentContext): number {
+  const clauseIndent = indentDeclarationStrategy(context, 1);
+  if (/^\s+(;|\.)/.exec(context.textAfter) !== null) {
+    return clauseIndent - 2;
+  }
+  if (/^\s+(~>)/.exec(context.textAfter) !== null) {
+    return clauseIndent - 3;
+  }
+  return clauseIndent;
+}
diff --git a/language-web/src/main/js/language/problem.grammar b/language-web/src/main/js/language/problem.grammar
new file mode 100644
index 00000000..c242a4ba
--- /dev/null
+++ b/language-web/src/main/js/language/problem.grammar
@@ -0,0 +1,145 @@
+@top Problem { statement* }
+
+statement {
+  ProblemDeclaration {
+    ckw<"problem"> QualifiedName "."
+  } |
+  ClassDefinition {
+    ckw<"abstract">? ckw<"class"> RelationName
+    (ckw<"extends"> sep<",", RelationName>)?
+    (ClassBody {  "{" ReferenceDeclaration* "}" } | ".")
+  } |
+  EnumDefinition {
+    ckw<"enum"> RelationName
+    (EnumBody { "{" sep<",", UniqueNodeName> "}" } | ".")
+  } |
+  PredicateDefinition {
+    (ckw<"error"> ckw<"pred">? | ckw<"direct">? ckw<"pred">)
+    RelationName ParameterList<Parameter>?
+    PredicateBody { ("<->" sep<OrOp, Conjunction>)?  "." }
+  } |
+  RuleDefinition {
+    ckw<"direct">? ckw<"rule">
+    RuleName ParameterList<Parameter>?
+    RuleBody { ":" sep<OrOp, Conjunction> "~>" sep<OrOp, Action> "." }
+  } |
+  Assertion {
+    ckw<"default">? (NotOp | UnknownOp)? RelationName
+    ParameterList<AssertionArgument> (":" LogicValue)? "."
+  } |
+  NodeValueAssertion {
+    UniqueNodeName ":" Constant "."
+  } |
+  UniqueDeclaration {
+    ckw<"unique"> sep<",", UniqueNodeName> "."
+  } |
+  ScopeDeclaration {
+    ckw<"scope"> sep<",", ScopeElement> "."
+  }
+}
+
+ReferenceDeclaration {
+  (kw<"refers"> | kw<"contains">)?
+  RelationName
+  RelationName
+  ( "[" Multiplicity? "]" )?
+  (kw<"opposite"> RelationName)?
+  ";"?
+}
+
+Parameter { RelationName? VariableName }
+
+Conjunction { ("," | Literal)+ }
+
+OrOp { ";" }
+
+Literal { NotOp? Atom (("=" | ":") sep1<"|", LogicValue>)? }
+
+Atom { RelationName "+"? ParameterList<Argument> }
+
+Action { ("," | ActionLiteral)+ }
+
+ActionLiteral {
+   ckw<"new"> VariableName |
+   ckw<"delete"> VariableName |
+   Literal
+}
+
+Argument { VariableName | Constant }
+
+AssertionArgument { NodeName | StarArgument | Constant }
+
+Constant { Real | String }
+
+LogicValue {
+  ckw<"true"> | ckw<"false"> | ckw<"unknown"> | ckw<"error">
+}
+
+ScopeElement { RelationName ("=" | "+=") Multiplicity }
+
+Multiplicity { (IntMult "..")? (IntMult | StarMult)}
+
+RelationName { QualifiedName }
+
+RuleName { QualifiedName }
+
+UniqueNodeName { QualifiedName }
+
+VariableName { QualifiedName }
+
+NodeName { QualifiedName }
+
+QualifiedName { identifier ("::" identifier)* }
+
+kw<term> { @specialize[@name={term}]<identifier, term> }
+
+ckw<term> { @extend[@name={term}]<identifier, term> }
+
+ParameterList<content> { "(" sep<",", content> ")" }
+
+sep<separator, content> { sep1<separator, content>? }
+
+sep1<separator, content> { content (separator content)* }
+
+@skip { LineComment | BlockComment | whitespace }
+
+@tokens {
+  whitespace { std.whitespace+ }
+
+  LineComment { ("//" | "%") ![\n]* }
+
+  BlockComment { "/*" blockCommentRest }
+
+  blockCommentRest { ![*] blockCommentRest | "*" blockCommentAfterStar }
+
+  blockCommentAfterStar { "/" | "*" blockCommentAfterStar | ![/*] blockCommentRest }
+
+  @precedence { BlockComment, LineComment }
+
+  identifier { $[A-Za-z_] $[a-zA-Z0-9_]* }
+
+  int { $[0-9]+ }
+
+  IntMult { int }
+
+  StarMult { "*" }
+
+  Real { "-"? (exponential | int ("." (int | exponential))?) }
+
+  exponential { int ("e" | "E") ("+" | "-")? int }
+
+  String {
+    "'" (![\\'\n] | "\\" ![\n] | "\\\n")+ "'" |
+    "\"" (![\\"\n] | "\\" (![\n] | "\n"))* "\""
+  }
+
+  NotOp { "!" }
+
+  UnknownOp { "?" }
+
+  StarArgument { "*" }
+
+  "{" "}" "(" ")" "[" "]" "." ".." "," ":" "<->" "~>"
+}
+
+@detectDelim
diff --git a/language-web/src/main/js/language/problemLanguageSupport.ts b/language-web/src/main/js/language/problemLanguageSupport.ts
new file mode 100644
index 00000000..ab1c55f9
--- /dev/null
+++ b/language-web/src/main/js/language/problemLanguageSupport.ts
@@ -0,0 +1,92 @@
+import { styleTags, tags as t } from '@codemirror/highlight';
+import {
+  foldInside,
+  foldNodeProp,
+  indentNodeProp,
+  indentUnit,
+  LanguageSupport,
+  LRLanguage,
+} from '@codemirror/language';
+import { LRParser } from '@lezer/lr';
+
+import { parser } from '../../../../build/generated/sources/lezer/problem';
+import {
+  foldBlockComment,
+  foldConjunction,
+  foldDeclaration,
+  foldWholeNode,
+} from './folding';
+import {
+  indentBlockComment,
+  indentDeclaration,
+  indentPredicateOrRule,
+} from './indentation';
+
+const parserWithMetadata = (parser as LRParser).configure({
+  props: [
+    styleTags({
+      LineComment: t.lineComment,
+      BlockComment: t.blockComment,
+      'problem class enum pred rule unique scope': t.definitionKeyword,
+      'abstract extends refers contains opposite error direct default': t.modifier,
+      'true false unknown error': t.keyword,
+      'new delete': t.operatorKeyword,
+      NotOp: t.keyword,
+      UnknownOp: t.keyword,
+      OrOp: t.keyword,
+      StarArgument: t.keyword,
+      'IntMult StarMult Real': t.number,
+      StarMult: t.number,
+      String: t.string,
+      'RelationName/QualifiedName': t.typeName,
+      'RuleName/QualifiedName': t.macroName,
+      'UniqueNodeName/QualifiedName': t.atom,
+      'VariableName/QualifiedName': t.variableName,
+      '{ }': t.brace,
+      '( )': t.paren,
+      '[ ]': t.squareBracket,
+      '. .. , :': t.separator,
+      '<-> ~>': t.definitionOperator,
+    }),
+    indentNodeProp.add({
+      ProblemDeclaration: indentDeclaration,
+      UniqueDeclaration: indentDeclaration,
+      ScopeDeclaration: indentDeclaration,
+      PredicateBody: indentPredicateOrRule,
+      RuleBody: indentPredicateOrRule,
+      BlockComment: indentBlockComment,
+    }),
+    foldNodeProp.add({
+      ClassBody: foldInside,
+      EnumBody: foldInside,
+      ParameterList: foldInside,
+      PredicateBody: foldInside,
+      RuleBody: foldInside,
+      Conjunction: foldConjunction,
+      Action: foldWholeNode,
+      UniqueDeclaration: foldDeclaration,
+      ScopeDeclaration: foldDeclaration,
+      BlockComment: foldBlockComment,
+    }),
+  ],
+});
+
+const problemLanguage = LRLanguage.define({
+  parser: parserWithMetadata,
+  languageData: {
+    commentTokens: {
+      block: {
+        open: '/*',
+        close: '*/',
+      },
+      line: '%',
+    },
+    indentOnInput: /^\s*(?:\{|\}|\(|\)|;|\.|~>)$/,
+  },
+});
+
+export function problemLanguageSupport(): LanguageSupport {
+  return new LanguageSupport(problemLanguage, [
+    indentUnit.of('    '),
+  ]);
+}
diff --git a/language-web/src/main/js/theme/ThemeStore.ts b/language-web/src/main/js/theme/ThemeStore.ts
index 3bbea3a1..ffaf6dde 100644
--- a/language-web/src/main/js/theme/ThemeStore.ts
+++ b/language-web/src/main/js/theme/ThemeStore.ts
@@ -42,6 +42,9 @@ export class ThemeStore {
         secondary: {
           main: themeData.secondary,
         },
+        error: {
+          main: themeData.secondary,
+        },
         text: {
           primary: themeData.foregroundHighlight,
           secondary: themeData.foreground,
@@ -51,6 +54,10 @@ export class ThemeStore {
     return responsiveFontSizes(materialUiTheme);
   }
 
+  get darkMode(): boolean {
+    return this.currentThemeData.paletteMode === 'dark';
+  }
+
   get className(): string {
     return this.currentThemeData.className;
   }
diff --git a/language-web/src/main/js/utils/ConditionVariable.ts b/language-web/src/main/js/utils/ConditionVariable.ts
new file mode 100644
index 00000000..0910dfa6
--- /dev/null
+++ b/language-web/src/main/js/utils/ConditionVariable.ts
@@ -0,0 +1,64 @@
+import { getLogger } from './logger';
+import { PendingTask } from './PendingTask';
+
+const log = getLogger('utils.ConditionVariable');
+
+export type Condition = () => boolean;
+
+export class ConditionVariable {
+  condition: Condition;
+
+  defaultTimeout: number;
+
+  listeners: PendingTask<void>[] = [];
+
+  constructor(condition: Condition, defaultTimeout = 0) {
+    this.condition = condition;
+    this.defaultTimeout = defaultTimeout;
+  }
+
+  async waitFor(timeoutMs: number | null = null): Promise<void> {
+    if (this.condition()) {
+      return;
+    }
+    const timeoutOrDefault = timeoutMs || this.defaultTimeout;
+    let nowMs = Date.now();
+    const endMs = nowMs + timeoutOrDefault;
+    while (!this.condition() && nowMs < endMs) {
+      const remainingMs = endMs - nowMs;
+      const promise = new Promise<void>((resolve, reject) => {
+        if (this.condition()) {
+          resolve();
+          return;
+        }
+        const task = new PendingTask(resolve, reject, remainingMs);
+        this.listeners.push(task);
+      });
+      // We must keep waiting until the update has completed,
+      // so the tasks can't be started in parallel.
+      // eslint-disable-next-line no-await-in-loop
+      await promise;
+      nowMs = Date.now();
+    }
+    if (!this.condition()) {
+      log.error('Condition still does not hold after', timeoutOrDefault, 'ms');
+      throw new Error('Failed to wait for condition');
+    }
+  }
+
+  notifyAll(): void {
+    this.clearListenersWith((listener) => listener.resolve());
+  }
+
+  rejectAll(error: unknown): void {
+    this.clearListenersWith((listener) => listener.reject(error));
+  }
+
+  private clearListenersWith(callback: (listener: PendingTask<void>) => void) {
+    // Copy `listeners` so that we don't get into a race condition
+    // if one of the listeners adds another listener.
+    const { listeners } = this;
+    this.listeners = [];
+    listeners.forEach(callback);
+  }
+}
diff --git a/language-web/src/main/js/utils/PendingTask.ts b/language-web/src/main/js/utils/PendingTask.ts
new file mode 100644
index 00000000..de59a99b
--- /dev/null
+++ b/language-web/src/main/js/utils/PendingTask.ts
@@ -0,0 +1,60 @@
+import { getLogger } from './logger';
+
+const log = getLogger('utils.PendingTask');
+
+export class PendingTask<T> {
+  private readonly resolveCallback: (value: T) => void;
+
+  private readonly rejectCallback: (reason?: unknown) => void;
+
+  private resolved = false;
+
+  private timeout: NodeJS.Timeout | null;
+
+  constructor(
+    resolveCallback: (value: T) => void,
+    rejectCallback: (reason?: unknown) => void,
+    timeoutMs?: number,
+    timeoutCallback?: () => void,
+  ) {
+    this.resolveCallback = resolveCallback;
+    this.rejectCallback = rejectCallback;
+    if (timeoutMs) {
+      this.timeout = setTimeout(() => {
+        if (!this.resolved) {
+          this.reject(new Error('Request timed out'));
+          if (timeoutCallback) {
+            timeoutCallback();
+          }
+        }
+      }, timeoutMs);
+    } else {
+      this.timeout = null;
+    }
+  }
+
+  resolve(value: T): void {
+    if (this.resolved) {
+      log.warn('Trying to resolve already resolved promise');
+      return;
+    }
+    this.markResolved();
+    this.resolveCallback(value);
+  }
+
+  reject(reason?: unknown): void {
+    if (this.resolved) {
+      log.warn('Trying to reject already resolved promise');
+      return;
+    }
+    this.markResolved();
+    this.rejectCallback(reason);
+  }
+
+  private markResolved() {
+    this.resolved = true;
+    if (this.timeout !== null) {
+      clearTimeout(this.timeout);
+    }
+  }
+}
diff --git a/language-web/src/main/js/utils/Timer.ts b/language-web/src/main/js/utils/Timer.ts
new file mode 100644
index 00000000..efde6633
--- /dev/null
+++ b/language-web/src/main/js/utils/Timer.ts
@@ -0,0 +1,33 @@
+export class Timer {
+  readonly callback: () => void;
+
+  readonly defaultTimeout: number;
+
+  timeout: NodeJS.Timeout | null = null;
+
+  constructor(callback: () => void, defaultTimeout = 0) {
+    this.callback = () => {
+      this.timeout = null;
+      callback();
+    };
+    this.defaultTimeout = defaultTimeout;
+  }
+
+  schedule(timeout: number | null = null): void {
+    if (this.timeout === null) {
+      this.timeout = setTimeout(this.callback, timeout || this.defaultTimeout);
+    }
+  }
+
+  reschedule(timeout: number | null = null): void {
+    this.cancel();
+    this.schedule(timeout);
+  }
+
+  cancel(): void {
+    if (this.timeout !== null) {
+      clearTimeout(this.timeout);
+      this.timeout = null;
+    }
+  }
+}
diff --git a/language-web/src/main/js/logging.tsx b/language-web/src/main/js/utils/logger.ts
index 25f50f19..306d122c 100644
--- a/language-web/src/main/js/logging.tsx
+++ b/language-web/src/main/js/utils/logger.ts
@@ -2,7 +2,7 @@ import styles, { CSPair } from 'ansi-styles';
 import log from 'loglevel';
 import * as prefix from 'loglevel-plugin-prefix';
 
-const colors: Record<string, CSPair> = {
+const colors: Partial<Record<string, CSPair>> = {
   TRACE: styles.magenta,
   DEBUG: styles.cyan,
   INFO: styles.blue,
diff --git a/language-web/src/main/js/xtext/CodeMirrorEditorContext.js b/language-web/src/main/js/xtext/CodeMirrorEditorContext.js
deleted file mode 100644
index b829c680..00000000
--- a/language-web/src/main/js/xtext/CodeMirrorEditorContext.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/*******************************************************************************
- * Copyright (c) 2015 itemis AG (http://www.itemis.eu) and others.
- * This program and the accompanying materials are made available under the
- * terms of the Eclipse Public License 2.0 which is available at
- * http://www.eclipse.org/legal/epl-2.0.
- *
- * SPDX-License-Identifier: EPL-2.0
- *******************************************************************************/
-
-define([], function() {
-        
-        /**
-         * An editor context mediates between the Xtext services and the CodeMirror editor framework.
-         */
-        function CodeMirrorEditorContext(editor) {
-                this._editor = editor;
-                this._serverState = {};
-                this._serverStateListeners = [];
-                this._dirty = false;
-                this._dirtyStateListeners = [];
-        };
-
-        CodeMirrorEditorContext.prototype = {
-                
-                getServerState: function() {
-                        return this._serverState;
-                },
-                
-                updateServerState: function(currentText, currentStateId) {
-                        this._serverState.text = currentText;
-                        this._serverState.stateId = currentStateId;
-                        return this._serverStateListeners;
-                },
-                
-                addServerStateListener: function(listener) {
-                        this._serverStateListeners.push(listener);
-                },
-                
-                getCaretOffset: function() {
-                        var editor = this._editor;
-                        return editor.indexFromPos(editor.getCursor());
-                },
-                
-                getLineStart: function(lineNumber) {
-                        var editor = this._editor;
-                        return editor.indexFromPos({line: lineNumber, ch: 0});
-                },
-                
-                getSelection: function() {
-                        var editor = this._editor;
-                return {
-                        start: editor.indexFromPos(editor.getCursor('from')),
-                        end: editor.indexFromPos(editor.getCursor('to'))
-                };
-                },
-                
-                getText: function(start, end) {
-                        var editor = this._editor;
-                        if (start && end) {
-                                return editor.getRange(editor.posFromIndex(start), editor.posFromIndex(end));
-                        } else {
-                                return editor.getValue();
-                        }
-                },
-                
-                isDirty: function() {
-                        return !this._clean;
-                },
-                
-                setDirty: function(dirty) {
-                        if (dirty != this._dirty) {
-                                for (var i = 0; i < this._dirtyStateListeners.length; i++) {
-                                        this._dirtyStateListeners[i](dirty);
-                                }
-                        }
-                        this._dirty = dirty;
-                },
-                
-                addDirtyStateListener: function(listener) {
-                        this._dirtyStateListeners.push(listener);
-                },
-                
-                clearUndoStack: function() {
-                        this._editor.clearHistory();
-                },
-                
-                setCaretOffset: function(offset) {
-                        var editor = this._editor;
-                        editor.setCursor(editor.posFromIndex(offset));
-                },
-                
-                setSelection: function(selection) {
-                        var editor = this._editor;
-                        editor.setSelection(editor.posFromIndex(selection.start), editor.posFromIndex(selection.end));
-                },
-                
-                setText: function(text, start, end) {
-                        var editor = this._editor;
-                        if (!start)
-                                start = 0;
-                        if (!end)
-                                end = editor.getValue().length;
-                        var cursor = editor.getCursor();
-                        editor.replaceRange(text, editor.posFromIndex(start), editor.posFromIndex(end));
-                        editor.setCursor(cursor);
-                }
-                
-        };
-        
-        return CodeMirrorEditorContext;
-});
\ No newline at end of file
diff --git a/language-web/src/main/js/xtext/ContentAssistService.ts b/language-web/src/main/js/xtext/ContentAssistService.ts
new file mode 100644
index 00000000..f085c5b1
--- /dev/null
+++ b/language-web/src/main/js/xtext/ContentAssistService.ts
@@ -0,0 +1,177 @@
+import type {
+  Completion,
+  CompletionContext,
+  CompletionResult,
+} from '@codemirror/autocomplete';
+import type { Transaction } from '@codemirror/state';
+import escapeStringRegexp from 'escape-string-regexp';
+
+import type { UpdateService } from './UpdateService';
+import { getLogger } from '../utils/logger';
+import type { IContentAssistEntry } from './xtextServiceResults';
+
+const PROPOSALS_LIMIT = 1000;
+
+const IDENTIFIER_REGEXP_STR = '[a-zA-Z0-9_]*';
+
+const HIGH_PRIORITY_KEYWORDS = ['<->'];
+
+const QUALIFIED_NAME_SEPARATOR_REGEXP = /::/g;
+
+const log = getLogger('xtext.ContentAssistService');
+
+function createCompletion(entry: IContentAssistEntry): Completion {
+  let boost;
+  switch (entry.kind) {
+    case 'KEYWORD':
+      // Some hard-to-type operators should be on top.
+      boost = HIGH_PRIORITY_KEYWORDS.includes(entry.proposal) ? 10 : -99;
+      break;
+    case 'TEXT':
+    case 'SNIPPET':
+      boost = -90;
+      break;
+    default: {
+      // Penalize qualified names (vs available unqualified names).
+      const extraSegments = entry.proposal.match(QUALIFIED_NAME_SEPARATOR_REGEXP)?.length || 0;
+      boost = Math.max(-5 * extraSegments, -50);
+    }
+      break;
+  }
+  return {
+    label: entry.proposal,
+    detail: entry.description,
+    info: entry.documentation,
+    type: entry.kind?.toLowerCase(),
+    boost,
+  };
+}
+
+function computeSpan(prefix: string, entryCount: number) {
+  const escapedPrefix = escapeStringRegexp(prefix);
+  if (entryCount < PROPOSALS_LIMIT) {
+    // Proposals with the current prefix fit the proposals limit.
+    // We can filter client side as long as the current prefix is preserved.
+    return new RegExp(`^${escapedPrefix}${IDENTIFIER_REGEXP_STR}$`);
+  }
+  // The current prefix overflows the proposals limits,
+  // so we have to fetch the completions again on the next keypress.
+  // Hopefully, it'll return a shorter list and we'll be able to filter client side.
+  return new RegExp(`^${escapedPrefix}$`);
+}
+
+export class ContentAssistService {
+  private readonly updateService: UpdateService;
+
+  private lastCompletion: CompletionResult | null = null;
+
+  constructor(updateService: UpdateService) {
+    this.updateService = updateService;
+  }
+
+  onTransaction(transaction: Transaction): void {
+    if (this.shouldInvalidateCachedCompletion(transaction)) {
+      this.lastCompletion = null;
+    }
+  }
+
+  async contentAssist(context: CompletionContext): Promise<CompletionResult> {
+    const tokenBefore = context.tokenBefore(['QualifiedName']);
+    let range: { from: number, to: number };
+    let prefix = '';
+    if (tokenBefore === null) {
+      if (!context.explicit) {
+        return {
+          from: context.pos,
+          options: [],
+        };
+      }
+      range = {
+        from: context.pos,
+        to: context.pos,
+      };
+      prefix = '';
+    } else {
+      range = {
+        from: tokenBefore.from,
+        to: tokenBefore.to,
+      };
+      const prefixLength = context.pos - tokenBefore.from;
+      if (prefixLength > 0) {
+        prefix = tokenBefore.text.substring(0, context.pos - tokenBefore.from);
+      }
+    }
+    if (!context.explicit && this.shouldReturnCachedCompletion(tokenBefore)) {
+      log.trace('Returning cached completion result');
+      // Postcondition of `shouldReturnCachedCompletion`: `lastCompletion !== null`
+      return {
+        ...this.lastCompletion as CompletionResult,
+        ...range,
+      };
+    }
+    this.lastCompletion = null;
+    const entries = await this.updateService.fetchContentAssist({
+      resource: this.updateService.resourceName,
+      serviceType: 'assist',
+      caretOffset: context.pos,
+      proposalsLimit: PROPOSALS_LIMIT,
+    }, context);
+    if (context.aborted) {
+      return {
+        ...range,
+        options: [],
+      };
+    }
+    const options: Completion[] = [];
+    entries.forEach((entry) => {
+      options.push(createCompletion(entry));
+    });
+    log.debug('Fetched', options.length, 'completions from server');
+    this.lastCompletion = {
+      ...range,
+      options,
+      span: computeSpan(prefix, entries.length),
+    };
+    return this.lastCompletion;
+  }
+
+  private shouldReturnCachedCompletion(
+    token: { from: number, to: number, text: string } | null,
+  ) {
+    if (token === null || this.lastCompletion === null) {
+      return false;
+    }
+    const { from, to, text } = token;
+    const { from: lastFrom, to: lastTo, span } = this.lastCompletion;
+    if (!lastTo) {
+      return true;
+    }
+    const [transformedFrom, transformedTo] = this.mapRangeInclusive(lastFrom, lastTo);
+    return from >= transformedFrom && to <= transformedTo && span && span.exec(text);
+  }
+
+  private shouldInvalidateCachedCompletion(transaction: Transaction) {
+    if (!transaction.docChanged || this.lastCompletion === null) {
+      return false;
+    }
+    const { from: lastFrom, to: lastTo } = this.lastCompletion;
+    if (!lastTo) {
+      return true;
+    }
+    const [transformedFrom, transformedTo] = this.mapRangeInclusive(lastFrom, lastTo);
+    let invalidate = false;
+    transaction.changes.iterChangedRanges((fromA, toA) => {
+      if (fromA < transformedFrom || toA > transformedTo) {
+        invalidate = true;
+      }
+    });
+    return invalidate;
+  }
+
+  private mapRangeInclusive(lastFrom: number, lastTo: number): [number, number] {
+    const changes = this.updateService.computeChangesSinceLastUpdate();
+    const transformedFrom = changes.mapPos(lastFrom);
+    const transformedTo = changes.mapPos(lastTo, 1);
+    return [transformedFrom, transformedTo];
+  }
+}
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..fc3e9e53
--- /dev/null
+++ b/language-web/src/main/js/xtext/HighlightingService.ts
@@ -0,0 +1,43 @@
+import type { EditorStore } from '../editor/EditorStore';
+import type { IHighlightRange } from '../editor/semanticHighlighting';
+import type { UpdateService } from './UpdateService';
+import { getLogger } from '../utils/logger';
+import { isHighlightingResult } from './xtextServiceResults';
+
+const log = getLogger('xtext.ValidationService');
+
+export class HighlightingService {
+  private readonly store: EditorStore;
+
+  private readonly 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 ranges: IHighlightRange[] = [];
+    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;
+      }
+      ranges.push({
+        from,
+        to,
+        classes: styleClasses,
+      });
+    });
+    this.store.updateSemanticHighlighting(ranges);
+  }
+}
diff --git a/language-web/src/main/js/xtext/OccurrencesService.ts b/language-web/src/main/js/xtext/OccurrencesService.ts
new file mode 100644
index 00000000..d1dec9e9
--- /dev/null
+++ b/language-web/src/main/js/xtext/OccurrencesService.ts
@@ -0,0 +1,116 @@
+import { Transaction } from '@codemirror/state';
+
+import type { EditorStore } from '../editor/EditorStore';
+import type { IOccurrence } from '../editor/findOccurrences';
+import type { UpdateService } from './UpdateService';
+import { getLogger } from '../utils/logger';
+import { Timer } from '../utils/Timer';
+import { XtextWebSocketClient } from './XtextWebSocketClient';
+import {
+  isOccurrencesResult,
+  isServiceConflictResult,
+  ITextRegion,
+} from './xtextServiceResults';
+
+const FIND_OCCURRENCES_TIMEOUT_MS = 1000;
+
+// Must clear occurrences asynchronously from `onTransaction`,
+// because we must not emit a conflicting transaction when handling the pending transaction.
+const CLEAR_OCCURRENCES_TIMEOUT_MS = 10;
+
+const log = getLogger('xtext.OccurrencesService');
+
+function transformOccurrences(regions: ITextRegion[]): IOccurrence[] {
+  const occurrences: IOccurrence[] = [];
+  regions.forEach(({ offset, length }) => {
+    if (length > 0) {
+      occurrences.push({
+        from: offset,
+        to: offset + length,
+      });
+    }
+  });
+  return occurrences;
+}
+
+export class OccurrencesService {
+  private readonly store: EditorStore;
+
+  private readonly webSocketClient: XtextWebSocketClient;
+
+  private readonly updateService: UpdateService;
+
+  private hasOccurrences = false;
+
+  private readonly findOccurrencesTimer = new Timer(() => {
+    this.handleFindOccurrences();
+  }, FIND_OCCURRENCES_TIMEOUT_MS);
+
+  private readonly clearOccurrencesTimer = new Timer(() => {
+    this.clearOccurrences();
+  }, CLEAR_OCCURRENCES_TIMEOUT_MS);
+
+  constructor(
+    store: EditorStore,
+    webSocketClient: XtextWebSocketClient,
+    updateService: UpdateService,
+  ) {
+    this.store = store;
+    this.webSocketClient = webSocketClient;
+    this.updateService = updateService;
+  }
+
+  onTransaction(transaction: Transaction): void {
+    if (transaction.docChanged) {
+      this.clearOccurrencesTimer.schedule();
+      this.findOccurrencesTimer.reschedule();
+    }
+    if (transaction.isUserEvent('select')) {
+      this.findOccurrencesTimer.reschedule();
+    }
+  }
+
+  private handleFindOccurrences() {
+    this.clearOccurrencesTimer.cancel();
+    this.updateOccurrences().catch((error) => {
+      log.error('Unexpected error while updating occurrences', error);
+      this.clearOccurrences();
+    });
+  }
+
+  private async updateOccurrences() {
+    await this.updateService.update();
+    const result = await this.webSocketClient.send({
+      resource: this.updateService.resourceName,
+      serviceType: 'occurrences',
+      expectedStateId: this.updateService.xtextStateId,
+      caretOffset: this.store.state.selection.main.head,
+    });
+    const allChanges = this.updateService.computeChangesSinceLastUpdate();
+    if (!allChanges.empty
+      || (isServiceConflictResult(result) && result.conflict === 'canceled')) {
+      // Stale occurrences result, the user already made some changes.
+      // We can safely ignore the occurrences and schedule a new find occurrences call.
+      this.clearOccurrences();
+      this.findOccurrencesTimer.schedule();
+      return;
+    }
+    if (!isOccurrencesResult(result) || result.stateId !== this.updateService.xtextStateId) {
+      log.error('Unexpected occurrences result', result);
+      this.clearOccurrences();
+      return;
+    }
+    const write = transformOccurrences(result.writeRegions);
+    const read = transformOccurrences(result.readRegions);
+    this.hasOccurrences = write.length > 0 || read.length > 0;
+    log.debug('Found', write.length, 'write and', read.length, 'read occurrences');
+    this.store.updateOccurrences(write, read);
+  }
+
+  private clearOccurrences() {
+    if (this.hasOccurrences) {
+      this.store.updateOccurrences([], []);
+      this.hasOccurrences = false;
+    }
+  }
+}
diff --git a/language-web/src/main/js/xtext/ServiceBuilder.js b/language-web/src/main/js/xtext/ServiceBuilder.js
deleted file mode 100644
index 57fcb310..00000000
--- a/language-web/src/main/js/xtext/ServiceBuilder.js
+++ /dev/null
@@ -1,285 +0,0 @@
-/*******************************************************************************
- * Copyright (c) 2015 itemis AG (http://www.itemis.eu) and others.
- * This program and the accompanying materials are made available under the
- * terms of the Eclipse Public License 2.0 which is available at
- * http://www.eclipse.org/legal/epl-2.0.
- *
- * SPDX-License-Identifier: EPL-2.0
- ******************************************************************************/
-
-define([
-    'jquery',
-    'xtext/services/XtextService',
-        'xtext/services/LoadResourceService',
-        'xtext/services/SaveResourceService',
-        'xtext/services/HighlightingService',
-        'xtext/services/ValidationService',
-        'xtext/services/UpdateService',
-        'xtext/services/ContentAssistService',
-        'xtext/services/HoverService',
-        'xtext/services/OccurrencesService',
-        'xtext/services/FormattingService',
-  '../logging',
-], function(jQuery, XtextService, LoadResourceService, SaveResourceService, HighlightingService,
-                ValidationService, UpdateService, ContentAssistService, HoverService, OccurrencesService,
-                FormattingService, logging) {
-        
-        /**
-         * Builder class for the Xtext services.
-         */
-        function ServiceBuilder(xtextServices) {
-                this.services = xtextServices;
-        };
-
-        /**
-         * Create all the available Xtext services depending on the configuration.
-         */
-        ServiceBuilder.prototype.createServices = function() {
-                var services = this.services;
-                var options = services.options;
-                var editorContext = services.editorContext;
-                editorContext.xtextServices = services;
-                var self = this;
-                if (!options.serviceUrl) {
-                        if (!options.baseUrl)
-                                options.baseUrl = '/';
-                        else if (options.baseUrl.charAt(0) != '/')
-                                options.baseUrl = '/' + options.baseUrl;
-                        options.serviceUrl = window.location.protocol + '//' + window.location.host + options.baseUrl + 'xtext-service';
-                }
-                if (options.resourceId) {
-                        if (!options.xtextLang)
-                                options.xtextLang = options.resourceId.split(/[?#]/)[0].split('.').pop();
-                        if (options.loadFromServer === undefined)
-                                options.loadFromServer = true;
-                        if (options.loadFromServer && this.setupPersistenceServices) {
-                                services.loadResourceService = new LoadResourceService(options.serviceUrl, options.resourceId, false);
-                                services.loadResource = function(addParams) {
-                                        return services.loadResourceService.invoke(editorContext, ServiceBuilder.mergeOptions(addParams, options));
-                                }
-                                services.saveResourceService = new SaveResourceService(options.serviceUrl, options.resourceId);
-                                services.saveResource = function(addParams) {
-                                        return services.saveResourceService.invoke(editorContext, ServiceBuilder.mergeOptions(addParams, options));
-                                }
-                                services.revertResourceService = new LoadResourceService(options.serviceUrl, options.resourceId, true);
-                                services.revertResource = function(addParams) {
-                                        return services.revertResourceService.invoke(editorContext, ServiceBuilder.mergeOptions(addParams, options));
-                                }
-                                this.setupPersistenceServices();
-                                services.loadResource();
-                        }
-                } else {
-                        if (options.loadFromServer === undefined)
-                                options.loadFromServer = false;
-                        if (options.xtextLang) {
-                                var randomId = Math.floor(Math.random() * 2147483648).toString(16);
-                                options.resourceId = randomId + '.' + options.xtextLang;
-                        }
-                }
-                
-                if (this.setupSyntaxHighlighting) {
-                        this.setupSyntaxHighlighting();
-                }
-                if (options.enableHighlightingService || options.enableHighlightingService === undefined) {
-                        services.highlightingService = new HighlightingService(options.serviceUrl, options.resourceId);
-                        services.computeHighlighting = function(addParams) {
-                                return services.highlightingService.invoke(editorContext, ServiceBuilder.mergeOptions(addParams, options));
-                        }
-                }
-                if (options.enableValidationService || options.enableValidationService === undefined) {
-                        services.validationService = new ValidationService(options.serviceUrl, options.resourceId);
-                        services.validate = function(addParams) {
-                                return services.validationService.invoke(editorContext, ServiceBuilder.mergeOptions(addParams, options));
-                        }
-                }
-                if (this.setupUpdateService) {
-                        function refreshDocument() {
-                                if (services.highlightingService && self.doHighlighting) {
-                                        services.highlightingService.setState(undefined);
-                                        self.doHighlighting();
-                                }
-                                if (services.validationService && self.doValidation) {
-                                        services.validationService.setState(undefined);
-                                        self.doValidation();
-                                }
-                        }
-                        if (!options.sendFullText) {
-                                services.updateService = new UpdateService(options.serviceUrl, options.resourceId);
-                                services.update = function(addParams) {
-                                        return services.updateService.invoke(editorContext, ServiceBuilder.mergeOptions(addParams, options));
-                                }
-                                if (services.saveResourceService)
-                                        services.saveResourceService._updateService = services.updateService;
-                                editorContext.addServerStateListener(refreshDocument);
-                        }
-                        this.setupUpdateService(refreshDocument);
-                }
-                if ((options.enableContentAssistService || options.enableContentAssistService === undefined)
-                                && this.setupContentAssistService) {
-                        services.contentAssistService = new ContentAssistService(options.serviceUrl, options.resourceId, services.updateService);
-                        services.getContentAssist = function(addParams) {
-                                return services.contentAssistService.invoke(editorContext, ServiceBuilder.mergeOptions(addParams, options));
-                        }
-                        this.setupContentAssistService();
-                }
-                if ((options.enableHoverService || options.enableHoverService === undefined)
-                                && this.setupHoverService) {
-                        services.hoverService = new HoverService(options.serviceUrl, options.resourceId, services.updateService);
-                        services.getHoverInfo = function(addParams) {
-                                return services.hoverService.invoke(editorContext, ServiceBuilder.mergeOptions(addParams, options));
-                        }
-                        this.setupHoverService();
-                }
-                if ((options.enableOccurrencesService || options.enableOccurrencesService === undefined)
-                                && this.setupOccurrencesService) {
-                        services.occurrencesService = new OccurrencesService(options.serviceUrl, options.resourceId, services.updateService);
-                        services.getOccurrences = function(addParams) {
-                                return services.occurrencesService.invoke(editorContext, ServiceBuilder.mergeOptions(addParams, options));
-                        }
-                        this.setupOccurrencesService();
-                }
-                if ((options.enableFormattingService || options.enableFormattingService === undefined)
-                                && this.setupFormattingService) {
-                        services.formattingService = new FormattingService(options.serviceUrl, options.resourceId, services.updateService);
-                        services.format = function(addParams) {
-                                return services.formattingService.invoke(editorContext, ServiceBuilder.mergeOptions(addParams, options));
-                        }
-                        this.setupFormattingService();
-                }
-                if (options.enableGeneratorService || options.enableGeneratorService === undefined) {
-                        services.generatorService = new XtextService();
-                        services.generatorService.initialize(services, 'generate');
-                        services.generatorService._initServerData = function(serverData, editorContext, params) {
-                                if (params.allArtifacts)
-                                        serverData.allArtifacts = params.allArtifacts;
-                                else if (params.artifactId)
-                                        serverData.artifact = params.artifactId;
-                                if (params.includeContent !== undefined)
-                                        serverData.includeContent = params.includeContent;
-                        }
-                        services.generate = function(addParams) {
-                                return services.generatorService.invoke(editorContext, ServiceBuilder.mergeOptions(addParams, options));
-                        }
-                }
-                
-                if (options.dirtyElement) {
-                        var doc = options.document || document;
-                        var dirtyElement;
-                        if (typeof(options.dirtyElement) === 'string')
-                                dirtyElement = jQuery('#' + options.dirtyElement, doc);
-                        else
-                                dirtyElement = jQuery(options.dirtyElement);
-                        var dirtyStatusClass = options.dirtyStatusClass;
-                        if (!dirtyStatusClass)
-                                dirtyStatusClass = 'dirty';
-                        editorContext.addDirtyStateListener(function(dirty) {
-                                if (dirty)
-                                        dirtyElement.addClass(dirtyStatusClass);
-                                else
-                                        dirtyElement.removeClass(dirtyStatusClass);
-                        });
-                }
-                
-    const log = logging.getLoggerFromRoot('xtext.XtextService');
-                services.successListeners = [function(serviceType, result) {
-      if (log.getLevel() <= log.levels.TRACE) {
-        log.trace('service', serviceType, 'request success', JSON.parse(JSON.stringify(result)));
-      }
-    }];
-                services.errorListeners = [function(serviceType, severity, message, requestData) {
-      const messageParts = ['service', serviceType, 'failed:', message || '(no message)'];
-      if (requestData) {
-        messageParts.push(JSON.parse(JSON.stringify(requestData)));
-      }
-      if (severity === 'warning') {
-                                log.warn(...messageParts);
-      } else {
-        log.error(...messageParts);
-      }
-                }];
-        }
-        
-        /**
-         * Change the resource associated with this service builder.
-         */
-        ServiceBuilder.prototype.changeResource = function(resourceId) {
-                var services = this.services;
-                var options = services.options;
-                options.resourceId = resourceId;
-                for (var p in services) {
-                        if (services.hasOwnProperty(p)) {
-                                var service = services[p];
-                                if (service._serviceType && jQuery.isFunction(service.initialize))
-                                        services[p].initialize(options.serviceUrl, service._serviceType, resourceId, services.updateService);
-                        }
-                }
-                var knownServerState = services.editorContext.getServerState();
-                delete knownServerState.stateId;
-                delete knownServerState.text;
-                if (options.loadFromServer && jQuery.isFunction(services.loadResource)) {
-                        services.loadResource();
-                }
-        }
-        
-        /**
-         * Create a copy of the given object.
-         */
-        ServiceBuilder.copy = function(obj) {
-                var copy = {};
-                for (var p in obj) {
-                        if (obj.hasOwnProperty(p))
-                                copy[p] = obj[p];
-                }
-                return copy;
-        }
-        
-        /**
-         * Translate an HTML attribute name to a JS option name.
-         */
-        ServiceBuilder.optionName = function(name) {
-                var prefix = 'data-editor-';
-                if (name.substring(0, prefix.length) === prefix) {
-                        var key = name.substring(prefix.length);
-                        key = key.replace(/-([a-z])/ig, function(all, character) {
-                                return character.toUpperCase();
-                        });
-                        return key;
-                }
-                return undefined;
-        }
-        
-        /**
-         * Copy all default options into the given set of additional options.
-         */
-        ServiceBuilder.mergeOptions = function(options, defaultOptions) {
-                if (options) {
-                        for (var p in defaultOptions) {
-                                if (defaultOptions.hasOwnProperty(p))
-                                        options[p] = defaultOptions[p];
-                        }
-                        return options;
-                } else {
-                        return ServiceBuilder.copy(defaultOptions);
-                }
-        }
-        
-        /**
-         * Merge all properties of the given parent element with the given default options.
-         */
-        ServiceBuilder.mergeParentOptions = function(parent, defaultOptions) {
-                var options = ServiceBuilder.copy(defaultOptions);
-                for (var attr, j = 0, attrs = parent.attributes, l = attrs.length; j < l; j++) {
-                        attr = attrs.item(j);
-                        var key = ServiceBuilder.optionName(attr.nodeName);
-                        if (key) {
-                                var value = attr.nodeValue;
-                                if (value === 'true' || value === 'false')
-                                        value = value === 'true';
-                                options[key] = value;
-                        }
-                }
-                return options;
-        }
-        
-        return ServiceBuilder;
-});
diff --git a/language-web/src/main/js/xtext/UpdateService.ts b/language-web/src/main/js/xtext/UpdateService.ts
new file mode 100644
index 00000000..9b672e79
--- /dev/null
+++ b/language-web/src/main/js/xtext/UpdateService.ts
@@ -0,0 +1,310 @@
+import {
+  ChangeDesc,
+  ChangeSet,
+  Transaction,
+} from '@codemirror/state';
+import { nanoid } from 'nanoid';
+
+import type { EditorStore } from '../editor/EditorStore';
+import type { XtextWebSocketClient } from './XtextWebSocketClient';
+import { ConditionVariable } from '../utils/ConditionVariable';
+import { getLogger } from '../utils/logger';
+import { Timer } from '../utils/Timer';
+import {
+  IContentAssistEntry,
+  isContentAssistResult,
+  isDocumentStateResult,
+  isInvalidStateIdConflictResult,
+} from './xtextServiceResults';
+
+const UPDATE_TIMEOUT_MS = 500;
+
+const WAIT_FOR_UPDATE_TIMEOUT_MS = 1000;
+
+const log = getLogger('xtext.UpdateService');
+
+export interface IAbortSignal {
+  aborted: boolean;
+}
+
+export class UpdateService {
+  resourceName: string;
+
+  xtextStateId: string | null = null;
+
+  private readonly store: EditorStore;
+
+  /**
+   * The changes being synchronized to the server if a full or delta text update is running,
+   * `null` otherwise.
+   */
+  private pendingUpdate: ChangeDesc | null = null;
+
+  /**
+   * Local changes not yet sychronized to the server and not part of the running update, if any.
+   */
+  private dirtyChanges: ChangeDesc;
+
+  private readonly webSocketClient: XtextWebSocketClient;
+
+  private readonly updatedCondition = new ConditionVariable(
+    () => this.pendingUpdate === null && this.xtextStateId !== null,
+    WAIT_FOR_UPDATE_TIMEOUT_MS,
+  );
+
+  private readonly idleUpdateTimer = new Timer(() => {
+    this.handleIdleUpdate();
+  }, UPDATE_TIMEOUT_MS);
+
+  constructor(store: EditorStore, webSocketClient: XtextWebSocketClient) {
+    this.resourceName = `${nanoid(7)}.problem`;
+    this.store = store;
+    this.dirtyChanges = this.newEmptyChangeDesc();
+    this.webSocketClient = webSocketClient;
+  }
+
+  onReconnect(): void {
+    this.xtextStateId = null;
+    this.updateFullText().catch((error) => {
+      log.error('Unexpected error during initial update', error);
+    });
+  }
+
+  onTransaction(transaction: Transaction): void {
+    if (transaction.docChanged) {
+      this.dirtyChanges = this.dirtyChanges.composeDesc(transaction.changes.desc);
+      this.idleUpdateTimer.reschedule();
+    }
+  }
+
+  /**
+   * Computes the summary of any changes happened since the last complete update.
+   *
+   * The result reflects any changes that happened since the `xtextStateId`
+   * version was uploaded to the server.
+   *
+   * @return the summary of changes since the last update
+   */
+  computeChangesSinceLastUpdate(): ChangeDesc {
+    return this.pendingUpdate?.composeDesc(this.dirtyChanges) || this.dirtyChanges;
+  }
+
+  private handleIdleUpdate() {
+    if (!this.webSocketClient.isOpen || this.dirtyChanges.empty) {
+      return;
+    }
+    if (this.pendingUpdate === null) {
+      this.update().catch((error) => {
+        log.error('Unexpected error during scheduled update', error);
+      });
+    }
+    this.idleUpdateTimer.reschedule();
+  }
+
+  private newEmptyChangeDesc() {
+    const changeSet = ChangeSet.of([], this.store.state.doc.length);
+    return changeSet.desc;
+  }
+
+  async updateFullText(): Promise<void> {
+    await this.withUpdate(() => this.doUpdateFullText());
+  }
+
+  private async doUpdateFullText(): Promise<[string, void]> {
+    const result = await this.webSocketClient.send({
+      resource: this.resourceName,
+      serviceType: 'update',
+      fullText: this.store.state.doc.sliceString(0),
+    });
+    if (isDocumentStateResult(result)) {
+      return [result.stateId, undefined];
+    }
+    log.error('Unexpected full text update result:', result);
+    throw new Error('Full text update failed');
+  }
+
+  /**
+   * Makes sure that the document state on the server reflects recent
+   * local changes.
+   *
+   * Performs either an update with delta text or a full text update if needed.
+   * If there are not local dirty changes, the promise resolves immediately.
+   *
+   * @return a promise resolving when the update is completed
+   */
+  async update(): Promise<void> {
+    await this.prepareForDeltaUpdate();
+    const delta = this.computeDelta();
+    if (delta === null) {
+      return;
+    }
+    log.trace('Editor delta', delta);
+    await this.withUpdate(async () => {
+      const result = await this.webSocketClient.send({
+        resource: this.resourceName,
+        serviceType: 'update',
+        requiredStateId: this.xtextStateId,
+        ...delta,
+      });
+      if (isDocumentStateResult(result)) {
+        return [result.stateId, undefined];
+      }
+      if (isInvalidStateIdConflictResult(result)) {
+        return this.doFallbackToUpdateFullText();
+      }
+      log.error('Unexpected delta text update result:', result);
+      throw new Error('Delta text update failed');
+    });
+  }
+
+  private doFallbackToUpdateFullText() {
+    if (this.pendingUpdate === null) {
+      throw new Error('Only a pending update can be extended');
+    }
+    log.warn('Delta update failed, performing full text update');
+    this.xtextStateId = null;
+    this.pendingUpdate = this.pendingUpdate.composeDesc(this.dirtyChanges);
+    this.dirtyChanges = this.newEmptyChangeDesc();
+    return this.doUpdateFullText();
+  }
+
+  async fetchContentAssist(
+    params: Record<string, unknown>,
+    signal: IAbortSignal,
+  ): Promise<IContentAssistEntry[]> {
+    await this.prepareForDeltaUpdate();
+    if (signal.aborted) {
+      return [];
+    }
+    const delta = this.computeDelta();
+    if (delta !== null) {
+      log.trace('Editor delta', delta);
+      const entries = await this.withUpdate(async () => {
+        const result = await this.webSocketClient.send({
+          ...params,
+          requiredStateId: this.xtextStateId,
+          ...delta,
+        });
+        if (isContentAssistResult(result)) {
+          return [result.stateId, result.entries];
+        }
+        if (isInvalidStateIdConflictResult(result)) {
+          const [newStateId] = await this.doFallbackToUpdateFullText();
+          // We must finish this state update transaction to prepare for any push events
+          // before querying for content assist, so we just return `null` and will query
+          // the content assist service later.
+          return [newStateId, null];
+        }
+        log.error('Unextpected content assist result with delta update', result);
+        throw new Error('Unexpexted content assist result with delta update');
+      });
+      if (entries !== null) {
+        return entries;
+      }
+      if (signal.aborted) {
+        return [];
+      }
+    }
+    // Poscondition of `prepareForDeltaUpdate`: `xtextStateId !== null`
+    return this.doFetchContentAssist(params, this.xtextStateId as string);
+  }
+
+  private async doFetchContentAssist(params: Record<string, unknown>, expectedStateId: string) {
+    const result = await this.webSocketClient.send({
+      ...params,
+      requiredStateId: expectedStateId,
+    });
+    if (isContentAssistResult(result) && result.stateId === expectedStateId) {
+      return result.entries;
+    }
+    log.error('Unexpected content assist result', result);
+    throw new Error('Unexpected content assist result');
+  }
+
+  private computeDelta() {
+    if (this.dirtyChanges.empty) {
+      return null;
+    }
+    let minFromA = Number.MAX_SAFE_INTEGER;
+    let maxToA = 0;
+    let minFromB = Number.MAX_SAFE_INTEGER;
+    let maxToB = 0;
+    this.dirtyChanges.iterChangedRanges((fromA, toA, fromB, toB) => {
+      minFromA = Math.min(minFromA, fromA);
+      maxToA = Math.max(maxToA, toA);
+      minFromB = Math.min(minFromB, fromB);
+      maxToB = Math.max(maxToB, toB);
+    });
+    return {
+      deltaOffset: minFromA,
+      deltaReplaceLength: maxToA - minFromA,
+      deltaText: this.store.state.doc.sliceString(minFromB, maxToB),
+    };
+  }
+
+  /**
+   * Executes an asynchronous callback that updates the state on the server.
+   *
+   * Ensures that updates happen sequentially and manages `pendingUpdate`
+   * and `dirtyChanges` to reflect changes being synchronized to the server
+   * and not yet synchronized to the server, respectively.
+   *
+   * Optionally, `callback` may return a second value that is retured by this function.
+   *
+   * Once the remote procedure call to update the server state finishes
+   * and returns the new `stateId`, `callback` must return _immediately_
+   * to ensure that the local `stateId` is updated likewise to be able to handle
+   * push messages referring to the new `stateId` from the server.
+   * If additional work is needed to compute the second value in some cases,
+   * use `T | null` instead of `T` as a return type and signal the need for additional
+   * computations by returning `null`. Thus additional computations can be performed
+   * outside of the critical section.
+   *
+   * @param callback the asynchronous callback that updates the server state
+   * @return a promise resolving to the second value returned by `callback`
+   */
+  private async withUpdate<T>(callback: () => Promise<[string, T]>): Promise<T> {
+    if (this.pendingUpdate !== null) {
+      throw new Error('Another update is pending, will not perform update');
+    }
+    this.pendingUpdate = this.dirtyChanges;
+    this.dirtyChanges = this.newEmptyChangeDesc();
+    let newStateId: string | null = null;
+    try {
+      let result: T;
+      [newStateId, result] = await callback();
+      this.xtextStateId = newStateId;
+      this.pendingUpdate = null;
+      this.updatedCondition.notifyAll();
+      return result;
+    } catch (e) {
+      log.error('Error while update', e);
+      if (this.pendingUpdate === null) {
+        log.error('pendingUpdate was cleared during update');
+      } else {
+        this.dirtyChanges = this.pendingUpdate.composeDesc(this.dirtyChanges);
+      }
+      this.pendingUpdate = null;
+      this.webSocketClient.forceReconnectOnError();
+      this.updatedCondition.rejectAll(e);
+      throw e;
+    }
+  }
+
+  /**
+   * Ensures that there is some state available on the server (`xtextStateId`)
+   * and that there is not pending update.
+   *
+   * After this function resolves, a delta text update is possible.
+   *
+   * @return a promise resolving when there is a valid state id but no pending update
+   */
+  private async prepareForDeltaUpdate() {
+    // If no update is pending, but the full text hasn't been uploaded to the server yet,
+    // we must start a full text upload.
+    if (this.pendingUpdate === null && this.xtextStateId === null) {
+      await this.updateFullText();
+    }
+    await this.updatedCondition.waitFor();
+  }
+}
diff --git a/language-web/src/main/js/xtext/ValidationService.ts b/language-web/src/main/js/xtext/ValidationService.ts
new file mode 100644
index 00000000..8e4934ac
--- /dev/null
+++ b/language-web/src/main/js/xtext/ValidationService.ts
@@ -0,0 +1,45 @@
+import type { Diagnostic } from '@codemirror/lint';
+
+import type { EditorStore } from '../editor/EditorStore';
+import type { UpdateService } from './UpdateService';
+import { getLogger } from '../utils/logger';
+import { isValidationResult } from './xtextServiceResults';
+
+const log = getLogger('xtext.ValidationService');
+
+export class ValidationService {
+  private readonly store: EditorStore;
+
+  private readonly updateService: UpdateService;
+
+  constructor(store: EditorStore, updateService: UpdateService) {
+    this.store = store;
+    this.updateService = updateService;
+  }
+
+  onPush(push: unknown): void {
+    if (!isValidationResult(push)) {
+      log.error('Invalid validation result', push);
+      return;
+    }
+    const allChanges = this.updateService.computeChangesSinceLastUpdate();
+    const diagnostics: Diagnostic[] = [];
+    push.issues.forEach(({
+      offset,
+      length,
+      severity,
+      description,
+    }) => {
+      if (severity === 'ignore') {
+        return;
+      }
+      diagnostics.push({
+        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
new file mode 100644
index 00000000..28f3d0cc
--- /dev/null
+++ b/language-web/src/main/js/xtext/XtextClient.ts
@@ -0,0 +1,83 @@
+import type {
+  CompletionContext,
+  CompletionResult,
+} from '@codemirror/autocomplete';
+import type { Transaction } from '@codemirror/state';
+
+import type { EditorStore } from '../editor/EditorStore';
+import { ContentAssistService } from './ContentAssistService';
+import { HighlightingService } from './HighlightingService';
+import { OccurrencesService } from './OccurrencesService';
+import { UpdateService } from './UpdateService';
+import { getLogger } from '../utils/logger';
+import { ValidationService } from './ValidationService';
+import { XtextWebSocketClient } from './XtextWebSocketClient';
+
+const log = getLogger('xtext.XtextClient');
+
+export class XtextClient {
+  private readonly webSocketClient: XtextWebSocketClient;
+
+  private readonly updateService: UpdateService;
+
+  private readonly contentAssistService: ContentAssistService;
+
+  private readonly highlightingService: HighlightingService;
+
+  private readonly validationService: ValidationService;
+
+  private readonly occurrencesService: OccurrencesService;
+
+  constructor(store: EditorStore) {
+    this.webSocketClient = new XtextWebSocketClient(
+      () => this.updateService.onReconnect(),
+      (resource, stateId, service, push) => this.onPush(resource, stateId, service, push),
+    );
+    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);
+    this.occurrencesService = new OccurrencesService(
+      store,
+      this.webSocketClient,
+      this.updateService,
+    );
+  }
+
+  onTransaction(transaction: Transaction): void {
+    // `ContentAssistService.prototype.onTransaction` needs the dirty change desc
+    // _before_ the current edit, so we call it before `updateService`.
+    this.contentAssistService.onTransaction(transaction);
+    this.updateService.onTransaction(transaction);
+    this.occurrencesService.onTransaction(transaction);
+  }
+
+  private onPush(resource: string, stateId: string, service: string, push: unknown) {
+    const { resourceName, xtextStateId } = this.updateService;
+    if (resource !== resourceName) {
+      log.error('Unknown resource name: expected:', resourceName, 'got:', resource);
+      return;
+    }
+    if (stateId !== xtextStateId) {
+      log.error('Unexpected xtext state id: expected:', xtextStateId, 'got:', stateId);
+      // The current push message might be stale (referring to a previous state),
+      // so this is not neccessarily an error and there is no need to force-reconnect.
+      return;
+    }
+    switch (service) {
+      case 'highlight':
+        this.highlightingService.onPush(push);
+        return;
+      case 'validate':
+        this.validationService.onPush(push);
+        return;
+      default:
+        log.error('Unknown push service:', service);
+        break;
+    }
+  }
+
+  contentAssist(context: CompletionContext): Promise<CompletionResult> {
+    return this.contentAssistService.contentAssist(context);
+  }
+}
diff --git a/language-web/src/main/js/xtext/XtextWebSocketClient.ts b/language-web/src/main/js/xtext/XtextWebSocketClient.ts
new file mode 100644
index 00000000..488e4b3b
--- /dev/null
+++ b/language-web/src/main/js/xtext/XtextWebSocketClient.ts
@@ -0,0 +1,341 @@
+import { nanoid } from 'nanoid';
+
+import { getLogger } from '../utils/logger';
+import { PendingTask } from '../utils/PendingTask';
+import { Timer } from '../utils/Timer';
+import {
+  isErrorResponse,
+  isOkResponse,
+  isPushMessage,
+  IXtextWebRequest,
+} from './xtextMessages';
+import { isPongResult } from './xtextServiceResults';
+
+const XTEXT_SUBPROTOCOL_V1 = 'tools.refinery.language.web.xtext.v1';
+
+const WEBSOCKET_CLOSE_OK = 1000;
+
+const RECONNECT_DELAY_MS = [200, 1000, 5000, 30_000];
+
+const MAX_RECONNECT_DELAY_MS = RECONNECT_DELAY_MS[RECONNECT_DELAY_MS.length - 1];
+
+const BACKGROUND_IDLE_TIMEOUT_MS = 5 * 60 * 1000;
+
+const PING_TIMEOUT_MS = 10 * 1000;
+
+const REQUEST_TIMEOUT_MS = 1000;
+
+const log = getLogger('xtext.XtextWebSocketClient');
+
+export type ReconnectHandler = () => void;
+
+export type PushHandler = (
+  resourceId: string,
+  stateId: string,
+  service: string,
+  data: unknown,
+) => void;
+
+enum State {
+  Initial,
+  Opening,
+  TabVisible,
+  TabHiddenIdle,
+  TabHiddenWaiting,
+  Error,
+  TimedOut,
+}
+
+export class XtextWebSocketClient {
+  private nextMessageId = 0;
+
+  private connection!: WebSocket;
+
+  private readonly pendingRequests = new Map<string, PendingTask<unknown>>();
+
+  private readonly onReconnect: ReconnectHandler;
+
+  private readonly onPush: PushHandler;
+
+  private state = State.Initial;
+
+  private reconnectTryCount = 0;
+
+  private readonly idleTimer = new Timer(() => {
+    this.handleIdleTimeout();
+  }, BACKGROUND_IDLE_TIMEOUT_MS);
+
+  private readonly pingTimer = new Timer(() => {
+    this.sendPing();
+  }, PING_TIMEOUT_MS);
+
+  private readonly reconnectTimer = new Timer(() => {
+    this.handleReconnect();
+  });
+
+  constructor(onReconnect: ReconnectHandler, onPush: PushHandler) {
+    this.onReconnect = onReconnect;
+    this.onPush = onPush;
+    document.addEventListener('visibilitychange', () => {
+      this.handleVisibilityChange();
+    });
+    this.reconnect();
+  }
+
+  private get isLogicallyClosed(): boolean {
+    return this.state === State.Error || this.state === State.TimedOut;
+  }
+
+  get isOpen(): boolean {
+    return this.state === State.TabVisible
+      || this.state === State.TabHiddenIdle
+      || this.state === State.TabHiddenWaiting;
+  }
+
+  private reconnect() {
+    if (this.isOpen || this.state === State.Opening) {
+      log.error('Trying to reconnect from', this.state);
+      return;
+    }
+    this.state = State.Opening;
+    const webSocketServer = window.origin.replace(/^http/, 'ws');
+    const webSocketUrl = `${webSocketServer}/xtext-service`;
+    this.connection = new WebSocket(webSocketUrl, XTEXT_SUBPROTOCOL_V1);
+    this.connection.addEventListener('open', () => {
+      if (this.connection.protocol !== XTEXT_SUBPROTOCOL_V1) {
+        log.error('Unknown subprotocol', this.connection.protocol, 'selected by server');
+        this.forceReconnectOnError();
+      }
+      if (document.visibilityState === 'hidden') {
+        this.handleTabHidden();
+      } else {
+        this.handleTabVisibleConnected();
+      }
+      log.info('Connected to websocket');
+      this.nextMessageId = 0;
+      this.reconnectTryCount = 0;
+      this.pingTimer.schedule();
+      this.onReconnect();
+    });
+    this.connection.addEventListener('error', (event) => {
+      log.error('Unexpected websocket error', event);
+      this.forceReconnectOnError();
+    });
+    this.connection.addEventListener('message', (event) => {
+      this.handleMessage(event.data);
+    });
+    this.connection.addEventListener('close', (event) => {
+      if (this.isLogicallyClosed && event.code === WEBSOCKET_CLOSE_OK
+        && this.pendingRequests.size === 0) {
+        log.info('Websocket closed');
+        return;
+      }
+      log.error('Websocket closed unexpectedly', event.code, event.reason);
+      this.forceReconnectOnError();
+    });
+  }
+
+  private handleVisibilityChange() {
+    if (document.visibilityState === 'hidden') {
+      if (this.state === State.TabVisible) {
+        this.handleTabHidden();
+      }
+      return;
+    }
+    this.idleTimer.cancel();
+    if (this.state === State.TabHiddenIdle || this.state === State.TabHiddenWaiting) {
+      this.handleTabVisibleConnected();
+      return;
+    }
+    if (this.state === State.TimedOut) {
+      this.reconnect();
+    }
+  }
+
+  private handleTabHidden() {
+    log.debug('Tab hidden while websocket is connected');
+    this.state = State.TabHiddenIdle;
+    this.idleTimer.schedule();
+  }
+
+  private handleTabVisibleConnected() {
+    log.debug('Tab visible while websocket is connected');
+    this.state = State.TabVisible;
+  }
+
+  private handleIdleTimeout() {
+    log.trace('Waiting for pending tasks before disconnect');
+    if (this.state === State.TabHiddenIdle) {
+      this.state = State.TabHiddenWaiting;
+      this.handleWaitingForDisconnect();
+    }
+  }
+
+  private handleWaitingForDisconnect() {
+    if (this.state !== State.TabHiddenWaiting) {
+      return;
+    }
+    const pending = this.pendingRequests.size;
+    if (pending === 0) {
+      log.info('Closing idle websocket');
+      this.state = State.TimedOut;
+      this.closeConnection(1000, 'idle timeout');
+      return;
+    }
+    log.info('Waiting for', pending, 'pending requests before closing websocket');
+  }
+
+  private sendPing() {
+    if (!this.isOpen) {
+      return;
+    }
+    const ping = nanoid();
+    log.trace('Ping', ping);
+    this.send({ ping }).then((result) => {
+      if (isPongResult(result) && result.pong === ping) {
+        log.trace('Pong', ping);
+        this.pingTimer.schedule();
+      } else {
+        log.error('Invalid pong');
+        this.forceReconnectOnError();
+      }
+    }).catch((error) => {
+      log.error('Error while waiting for ping', error);
+      this.forceReconnectOnError();
+    });
+  }
+
+  send(request: unknown): Promise<unknown> {
+    if (!this.isOpen) {
+      throw new Error('Not open');
+    }
+    const messageId = this.nextMessageId.toString(16);
+    if (messageId in this.pendingRequests) {
+      log.error('Message id wraparound still pending', messageId);
+      this.rejectRequest(messageId, new Error('Message id wraparound'));
+    }
+    if (this.nextMessageId >= Number.MAX_SAFE_INTEGER) {
+      this.nextMessageId = 0;
+    } else {
+      this.nextMessageId += 1;
+    }
+    const message = JSON.stringify({
+      id: messageId,
+      request,
+    } as IXtextWebRequest);
+    log.trace('Sending message', message);
+    return new Promise((resolve, reject) => {
+      const task = new PendingTask(resolve, reject, REQUEST_TIMEOUT_MS, () => {
+        this.removePendingRequest(messageId);
+      });
+      this.pendingRequests.set(messageId, task);
+      this.connection.send(message);
+    });
+  }
+
+  private handleMessage(messageStr: unknown) {
+    if (typeof messageStr !== 'string') {
+      log.error('Unexpected binary message', messageStr);
+      this.forceReconnectOnError();
+      return;
+    }
+    log.trace('Incoming websocket message', messageStr);
+    let message: unknown;
+    try {
+      message = JSON.parse(messageStr);
+    } catch (error) {
+      log.error('Json parse error', error);
+      this.forceReconnectOnError();
+      return;
+    }
+    if (isOkResponse(message)) {
+      this.resolveRequest(message.id, message.response);
+    } else if (isErrorResponse(message)) {
+      this.rejectRequest(message.id, new Error(`${message.error} error: ${message.message}`));
+      if (message.error === 'server') {
+        log.error('Reconnecting due to server error: ', message.message);
+        this.forceReconnectOnError();
+      }
+    } else if (isPushMessage(message)) {
+      this.onPush(
+        message.resource,
+        message.stateId,
+        message.service,
+        message.push,
+      );
+    } else {
+      log.error('Unexpected websocket message', message);
+      this.forceReconnectOnError();
+    }
+  }
+
+  private resolveRequest(messageId: string, value: unknown) {
+    const pendingRequest = this.pendingRequests.get(messageId);
+    if (pendingRequest) {
+      pendingRequest.resolve(value);
+      this.removePendingRequest(messageId);
+      return;
+    }
+    log.error('Trying to resolve unknown request', messageId, 'with', value);
+  }
+
+  private rejectRequest(messageId: string, reason?: unknown) {
+    const pendingRequest = this.pendingRequests.get(messageId);
+    if (pendingRequest) {
+      pendingRequest.reject(reason);
+      this.removePendingRequest(messageId);
+      return;
+    }
+    log.error('Trying to reject unknown request', messageId, 'with', reason);
+  }
+
+  private removePendingRequest(messageId: string) {
+    this.pendingRequests.delete(messageId);
+    this.handleWaitingForDisconnect();
+  }
+
+  forceReconnectOnError(): void {
+    if (this.isLogicallyClosed) {
+      return;
+    }
+    this.abortPendingRequests();
+    this.closeConnection(1000, 'reconnecting due to error');
+    log.error('Reconnecting after delay due to error');
+    this.handleErrorState();
+  }
+
+  private abortPendingRequests() {
+    this.pendingRequests.forEach((request) => {
+      request.reject(new Error('Websocket disconnect'));
+    });
+    this.pendingRequests.clear();
+  }
+
+  private closeConnection(code: number, reason: string) {
+    this.pingTimer.cancel();
+    const { readyState } = this.connection;
+    if (readyState !== WebSocket.CLOSING && readyState !== WebSocket.CLOSED) {
+      this.connection.close(code, reason);
+    }
+  }
+
+  private handleErrorState() {
+    this.state = State.Error;
+    this.reconnectTryCount += 1;
+    const delay = RECONNECT_DELAY_MS[this.reconnectTryCount - 1] || MAX_RECONNECT_DELAY_MS;
+    log.info('Reconnecting in', delay, 'ms');
+    this.reconnectTimer.schedule(delay);
+  }
+
+  private handleReconnect() {
+    if (this.state !== State.Error) {
+      log.error('Unexpected reconnect in', this.state);
+      return;
+    }
+    if (document.visibilityState === 'hidden') {
+      this.state = State.TimedOut;
+    } else {
+      this.reconnect();
+    }
+  }
+}
diff --git a/language-web/src/main/js/xtext/compatibility.js b/language-web/src/main/js/xtext/compatibility.js
deleted file mode 100644
index c877fc56..00000000
--- a/language-web/src/main/js/xtext/compatibility.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/*******************************************************************************
- * Copyright (c) 2015 itemis AG (http://www.itemis.eu) and others.
- * This program and the accompanying materials are made available under the
- * terms of the Eclipse Public License 2.0 which is available at
- * http://www.eclipse.org/legal/epl-2.0.
- *
- * SPDX-License-Identifier: EPL-2.0
- *******************************************************************************/
-
-define([], function() {
-        
-        if (!Function.prototype.bind) {
-                Function.prototype.bind = function(target) {
-                        if (typeof this !== 'function')
-                                throw new TypeError('bind target is not callable');
-                        var args = Array.prototype.slice.call(arguments, 1);
-                        var unboundFunc = this;
-                        var nopFunc = function() {};
-                        boundFunc = function() {
-                                var localArgs = Array.prototype.slice.call(arguments);
-                                return unboundFunc.apply(this instanceof nopFunc ? this : target,
-                                                args.concat(localArgs));
-                        };
-                        nopFunc.prototype = this.prototype;
-                        boundFunc.prototype = new nopFunc();
-                        return boundFunc;
-                }
-        }
-        
-        if (!Array.prototype.map) {
-                Array.prototype.map = function(callback, thisArg) {
-                        if (this == null)
-                                throw new TypeError('this is null');
-                        if (typeof callback !== 'function')
-                                throw new TypeError('callback is not callable');
-                        var srcArray = Object(this);
-                        var len = srcArray.length >>> 0;
-                        var tgtArray = new Array(len);
-                        for (var i = 0; i < len; i++) {
-                                if (i in srcArray)
-                                        tgtArray[i] = callback.call(thisArg, srcArray[i], i, srcArray);
-                        }
-                        return tgtArray;
-                }
-        }
-        
-        if (!Array.prototype.forEach) {
-                Array.prototype.forEach = function(callback, thisArg) {
-                        if (this == null)
-                                throw new TypeError('this is null');
-                        if (typeof callback !== 'function')
-                                throw new TypeError('callback is not callable');
-                        var srcArray = Object(this);
-                        var len = srcArray.length >>> 0;
-                        for (var i = 0; i < len; i++) {
-                                if (i in srcArray)
-                                        callback.call(thisArg, srcArray[i], i, srcArray);
-                        }
-                }
-        }
-        
-        return {};
-});
diff --git a/language-web/src/main/js/xtext/services/ContentAssistService.js b/language-web/src/main/js/xtext/services/ContentAssistService.js
deleted file mode 100644
index 1686570d..00000000
--- a/language-web/src/main/js/xtext/services/ContentAssistService.js
+++ /dev/null
@@ -1,132 +0,0 @@
-/*******************************************************************************
- * Copyright (c) 2015 itemis AG (http://www.itemis.eu) and others.
- * This program and the accompanying materials are made available under the
- * terms of the Eclipse Public License 2.0 which is available at
- * http://www.eclipse.org/legal/epl-2.0.
- *
- * SPDX-License-Identifier: EPL-2.0
- *******************************************************************************/
-
-define(['xtext/services/XtextService', 'jquery'], function(XtextService, jQuery) {
-
-        /**
-         * Service class for content assist proposals. The proposals are returned as promise of
-         * a Deferred object.
-         */
-        function ContentAssistService(serviceUrl, resourceId, updateService) {
-                this.initialize(serviceUrl, 'assist', resourceId, updateService);
-        }
-
-        ContentAssistService.prototype = new XtextService();
-        
-        ContentAssistService.prototype.invoke = function(editorContext, params, deferred) {
-                if (deferred === undefined) {
-                        deferred = jQuery.Deferred();
-                }
-                var serverData = {
-                        contentType: params.contentType
-                };
-                if (params.offset)
-                        serverData.caretOffset = params.offset;
-                else
-                        serverData.caretOffset = editorContext.getCaretOffset();
-                var selection = params.selection ? params.selection : editorContext.getSelection();
-                if (selection.start != serverData.caretOffset || selection.end != serverData.caretOffset) {
-                        serverData.selectionStart = selection.start;
-                        serverData.selectionEnd = selection.end;
-                }
-                var currentText;
-                var httpMethod = 'GET';
-                var onComplete = undefined;
-                var knownServerState = editorContext.getServerState();
-                if (params.sendFullText) {
-                        serverData.fullText = editorContext.getText();
-                        httpMethod = 'POST';
-                } else {
-                        serverData.requiredStateId = knownServerState.stateId;
-                        if (this._updateService) {
-                                if (knownServerState.text === undefined || knownServerState.updateInProgress) {
-                                        var self = this;
-                                        this._updateService.addCompletionCallback(function() {
-                                                self.invoke(editorContext, params, deferred);
-                                        });
-                                        return deferred.promise();
-                                }
-                                knownServerState.updateInProgress = true;
-                                onComplete = this._updateService.onComplete.bind(this._updateService);
-                                currentText = editorContext.getText();
-                                this._updateService.computeDelta(knownServerState.text, currentText, serverData);
-                                if (serverData.deltaText !== undefined) {
-                                        httpMethod = 'POST';
-                                }
-                        }
-                }
-                
-                var self = this;
-                self.sendRequest(editorContext, {
-                        type: httpMethod,
-                        data: serverData,
-                        
-                        success: function(result) {
-                                if (result.conflict) {
-                                        // The server has lost its session state and the resource is loaded from the server
-                                        if (self._increaseRecursionCount(editorContext)) {
-                                                if (onComplete) {
-                                                        delete knownServerState.updateInProgress;
-                                                        delete knownServerState.text;
-                                                        delete knownServerState.stateId;
-                                                        self._updateService.addCompletionCallback(function() {
-                                                                self.invoke(editorContext, params, deferred);
-                                                        });
-                                                        self._updateService.invoke(editorContext, params);
-                                                } else {
-                                                        var paramsCopy = {};
-                                                        for (var p in params) {
-                                                                if (params.hasOwnProperty(p))
-                                                                        paramsCopy[p] = params[p];
-                                                        }
-                                                        paramsCopy.sendFullText = true;
-                                                        self.invoke(editorContext, paramsCopy, deferred);
-                                                }
-                                        } else {
-                                                deferred.reject(result.conflict);
-                                        }
-                                        return false;
-                                }
-                                if (onComplete && result.stateId !== undefined && result.stateId != editorContext.getServerState().stateId) {
-                                        var listeners = editorContext.updateServerState(currentText, result.stateId);
-                                        for (var i = 0; i < listeners.length; i++) {
-                                                self._updateService.addCompletionCallback(listeners[i], params);
-                                        }
-                                }
-                                deferred.resolve(result.entries);
-                        },
-                        
-                        error: function(xhr, textStatus, errorThrown) {
-                                if (onComplete && xhr.status == 404 && !params.loadFromServer && knownServerState.text !== undefined) {
-                                        // The server has lost its session state and the resource is not loaded from the server
-                                        delete knownServerState.updateInProgress;
-                                        delete knownServerState.text;
-                                        delete knownServerState.stateId;
-                                        self._updateService.addCompletionCallback(function() {
-                                                self.invoke(editorContext, params, deferred);
-                                        });
-                                        self._updateService.invoke(editorContext, params);
-                                        return true;
-                                }
-                                deferred.reject(errorThrown);
-                        },
-                        
-                        complete: onComplete
-                }, !params.sendFullText);
-                var result = deferred.promise();
-                if (onComplete) {
-                        result.always(function() {
-                                knownServerState.updateInProgress = false;
-                        });
-                }
-                return result;
-        };
-
-        return ContentAssistService;
-});
diff --git a/language-web/src/main/js/xtext/services/FormattingService.js b/language-web/src/main/js/xtext/services/FormattingService.js
deleted file mode 100644
index f59099ee..00000000
--- a/language-web/src/main/js/xtext/services/FormattingService.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/*******************************************************************************
- * Copyright (c) 2015 itemis AG (http://www.itemis.eu) and others.
- * This program and the accompanying materials are made available under the
- * terms of the Eclipse Public License 2.0 which is available at
- * http://www.eclipse.org/legal/epl-2.0.
- *
- * SPDX-License-Identifier: EPL-2.0
- *******************************************************************************/
-
-define(['xtext/services/XtextService', 'jquery'], function(XtextService, jQuery) {
-        
-        /**
-         * Service class for formatting text.
-         */
-        function FormattingService(serviceUrl, resourceId, updateService) {
-                this.initialize(serviceUrl, 'format', resourceId, updateService);
-        };
-
-        FormattingService.prototype = new XtextService();
-
-        FormattingService.prototype._initServerData = function(serverData, editorContext, params) {
-                var selection = params.selection ? params.selection : editorContext.getSelection();
-                if (selection.end > selection.start) {
-                        serverData.selectionStart = selection.start;
-                        serverData.selectionEnd = selection.end;
-                }
-                return {
-                        httpMethod: 'POST'
-                };
-        };
-        
-        FormattingService.prototype._processResult = function(result, editorContext) {
-                // The text update may be asynchronous, so we have to compute the new text ourselves
-                var newText;
-                if (result.replaceRegion) {
-                        var fullText = editorContext.getText();
-                        var start = result.replaceRegion.offset;
-                        var end = result.replaceRegion.offset + result.replaceRegion.length;
-                        editorContext.setText(result.formattedText, start, end);
-                        newText = fullText.substring(0, start) + result.formattedText + fullText.substring(end);
-                } else {
-                        editorContext.setText(result.formattedText);
-                        newText = result.formattedText;
-                }
-                var listeners = editorContext.updateServerState(newText, result.stateId);
-                for (var i = 0; i < listeners.length; i++) {
-                        listeners[i]({});
-                }
-        };
-        
-        return FormattingService;
-});
\ No newline at end of file
diff --git a/language-web/src/main/js/xtext/services/HighlightingService.js b/language-web/src/main/js/xtext/services/HighlightingService.js
deleted file mode 100644
index 5a5ac8ba..00000000
--- a/language-web/src/main/js/xtext/services/HighlightingService.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/*******************************************************************************
- * Copyright (c) 2015 itemis AG (http://www.itemis.eu) and others.
- * This program and the accompanying materials are made available under the
- * terms of the Eclipse Public License 2.0 which is available at
- * http://www.eclipse.org/legal/epl-2.0.
- *
- * SPDX-License-Identifier: EPL-2.0
- *******************************************************************************/
-
-define(['xtext/services/XtextService', 'jquery'], function(XtextService, jQuery) {
-        
-        /**
-         * Service class for semantic highlighting.
-         */
-        function HighlightingService(serviceUrl, resourceId) {
-                this.initialize(serviceUrl, 'highlight', resourceId);
-        };
-
-        HighlightingService.prototype = new XtextService();
-        
-        HighlightingService.prototype._checkPreconditions = function(editorContext, params) {
-                return this._state === undefined;
-        }
-
-        HighlightingService.prototype._onConflict = function(editorContext, cause) {
-                this.setState(undefined);
-                return {
-                        suppressForcedUpdate: true
-                };
-        };
-        
-        return HighlightingService;
-});
\ No newline at end of file
diff --git a/language-web/src/main/js/xtext/services/HoverService.js b/language-web/src/main/js/xtext/services/HoverService.js
deleted file mode 100644
index 03c5a52b..00000000
--- a/language-web/src/main/js/xtext/services/HoverService.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/*******************************************************************************
- * Copyright (c) 2015 itemis AG (http://www.itemis.eu) and others.
- * This program and the accompanying materials are made available under the
- * terms of the Eclipse Public License 2.0 which is available at
- * http://www.eclipse.org/legal/epl-2.0.
- *
- * SPDX-License-Identifier: EPL-2.0
- *******************************************************************************/
-
-define(['xtext/services/XtextService', 'jquery'], function(XtextService, jQuery) {
-        
-        /**
-         * Service class for hover information.
-         */
-        function HoverService(serviceUrl, resourceId, updateService) {
-                this.initialize(serviceUrl, 'hover', resourceId, updateService);
-        };
-
-        HoverService.prototype = new XtextService();
-
-        HoverService.prototype._initServerData = function(serverData, editorContext, params) {
-                // In order to display hover info for a selected completion proposal while the content
-                // assist popup is shown, the selected proposal is passed as parameter
-                if (params.proposal && params.proposal.proposal)
-                        serverData.proposal = params.proposal.proposal;
-                if (params.offset)
-                        serverData.caretOffset = params.offset;
-                else
-                        serverData.caretOffset = editorContext.getCaretOffset();
-                var selection = params.selection ? params.selection : editorContext.getSelection();
-                if (selection.start != serverData.caretOffset || selection.end != serverData.caretOffset) {
-                        serverData.selectionStart = selection.start;
-                        serverData.selectionEnd = selection.end;
-                }
-        };
-        
-        HoverService.prototype._getSuccessCallback = function(editorContext, params, deferred) {
-                var delay = params.mouseHoverDelay;
-                if (!delay)
-                        delay = 500;
-                var showTime = new Date().getTime() + delay;
-                return function(result) {
-                        if (result.conflict || !result.title && !result.content) {
-                                deferred.reject();
-                        } else {
-                                var remainingTimeout = Math.max(0, showTime - new Date().getTime());
-                                setTimeout(function() {
-                                        if (!params.sendFullText && result.stateId !== undefined
-                                                        && result.stateId != editorContext.getServerState().stateId) 
-                                                deferred.reject();
-                                        else
-                                                deferred.resolve(result);
-                                }, remainingTimeout);
-                        }
-                };
-        };
-        
-        return HoverService;
-});
\ No newline at end of file
diff --git a/language-web/src/main/js/xtext/services/LoadResourceService.js b/language-web/src/main/js/xtext/services/LoadResourceService.js
deleted file mode 100644
index b5a315c3..00000000
--- a/language-web/src/main/js/xtext/services/LoadResourceService.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*******************************************************************************
- * Copyright (c) 2015 itemis AG (http://www.itemis.eu) and others.
- * This program and the accompanying materials are made available under the
- * terms of the Eclipse Public License 2.0 which is available at
- * http://www.eclipse.org/legal/epl-2.0.
- *
- * SPDX-License-Identifier: EPL-2.0
- *******************************************************************************/
-
-define(['xtext/services/XtextService', 'jquery'], function(XtextService, jQuery) {
-        
-        /**
-         * Service class for loading resources. The resulting text is passed to the editor context.
-         */
-        function LoadResourceService(serviceUrl, resourceId, revert) {
-                this.initialize(serviceUrl, revert ? 'revert' : 'load', resourceId);
-        };
-
-        LoadResourceService.prototype = new XtextService();
-        
-        LoadResourceService.prototype._initServerData = function(serverData, editorContext, params) {
-                return {
-                        suppressContent: true,
-                        httpMethod: this._serviceType == 'revert' ? 'POST' : 'GET'
-                };
-        };
-        
-        LoadResourceService.prototype._getSuccessCallback = function(editorContext, params, deferred) {
-                return function(result) {
-                        editorContext.setText(result.fullText);
-                        editorContext.clearUndoStack();
-                        editorContext.setDirty(result.dirty);
-                        var listeners = editorContext.updateServerState(result.fullText, result.stateId);
-                        for (var i = 0; i < listeners.length; i++) {
-                                listeners[i](params);
-                        }
-                        deferred.resolve(result);
-                }
-        }
-
-        return LoadResourceService;
-});
\ No newline at end of file
diff --git a/language-web/src/main/js/xtext/services/OccurrencesService.js b/language-web/src/main/js/xtext/services/OccurrencesService.js
deleted file mode 100644
index 2e2d0b1a..00000000
--- a/language-web/src/main/js/xtext/services/OccurrencesService.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/*******************************************************************************
- * Copyright (c) 2015 itemis AG (http://www.itemis.eu) and others.
- * This program and the accompanying materials are made available under the
- * terms of the Eclipse Public License 2.0 which is available at
- * http://www.eclipse.org/legal/epl-2.0.
- *
- * SPDX-License-Identifier: EPL-2.0
- *******************************************************************************/
-
-define(['xtext/services/XtextService', 'jquery'], function(XtextService, jQuery) {
-        
-        /**
-         * Service class for marking occurrences.
-         */
-        function OccurrencesService(serviceUrl, resourceId, updateService) {
-                this.initialize(serviceUrl, 'occurrences', resourceId, updateService);
-        };
-
-        OccurrencesService.prototype = new XtextService();
-
-        OccurrencesService.prototype._initServerData = function(serverData, editorContext, params) {
-                if (params.offset)
-                        serverData.caretOffset = params.offset;
-                else
-                        serverData.caretOffset = editorContext.getCaretOffset();
-        };
-        
-        OccurrencesService.prototype._getSuccessCallback = function(editorContext, params, deferred) {
-                return function(result) {
-                        if (result.conflict || !params.sendFullText && result.stateId !== undefined
-                                        && result.stateId != editorContext.getServerState().stateId) 
-                                deferred.reject();
-                        else 
-                                deferred.resolve(result);
-                }
-        }
-
-        return OccurrencesService;
-});
\ No newline at end of file
diff --git a/language-web/src/main/js/xtext/services/SaveResourceService.js b/language-web/src/main/js/xtext/services/SaveResourceService.js
deleted file mode 100644
index 66cdaff5..00000000
--- a/language-web/src/main/js/xtext/services/SaveResourceService.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/*******************************************************************************
- * Copyright (c) 2015 itemis AG (http://www.itemis.eu) and others.
- * This program and the accompanying materials are made available under the
- * terms of the Eclipse Public License 2.0 which is available at
- * http://www.eclipse.org/legal/epl-2.0.
- *
- * SPDX-License-Identifier: EPL-2.0
- *******************************************************************************/
-
-define(['xtext/services/XtextService', 'jquery'], function(XtextService, jQuery) {
-        
-        /**
-         * Service class for saving resources.
-         */
-        function SaveResourceService(serviceUrl, resourceId) {
-                this.initialize(serviceUrl, 'save', resourceId);
-        };
-
-        SaveResourceService.prototype = new XtextService();
-
-        SaveResourceService.prototype._initServerData = function(serverData, editorContext, params) {
-                return {
-                        httpMethod: 'POST'
-                };
-        };
-        
-        SaveResourceService.prototype._processResult = function(result, editorContext) {
-                editorContext.setDirty(false);
-        };
-        
-        return SaveResourceService;
-});
\ No newline at end of file
diff --git a/language-web/src/main/js/xtext/services/UpdateService.js b/language-web/src/main/js/xtext/services/UpdateService.js
deleted file mode 100644
index b78d846d..00000000
--- a/language-web/src/main/js/xtext/services/UpdateService.js
+++ /dev/null
@@ -1,159 +0,0 @@
-/*******************************************************************************
- * Copyright (c) 2015 itemis AG (http://www.itemis.eu) and others.
- * This program and the accompanying materials are made available under the
- * terms of the Eclipse Public License 2.0 which is available at
- * http://www.eclipse.org/legal/epl-2.0.
- *
- * SPDX-License-Identifier: EPL-2.0
- *******************************************************************************/
-
-define(['xtext/services/XtextService', 'jquery'], function(XtextService, jQuery) {
-        
-        /**
-         * Service class for updating the server-side representation of a resource.
-         * This service only makes sense with a stateful server, where an update request is sent
-         * after each modification. This can greatly improve response times compared to the
-         * stateless alternative, where the full text content is sent with each service request.
-         */
-        function UpdateService(serviceUrl, resourceId) {
-                this.initialize(serviceUrl, 'update', resourceId, this);
-                this._completionCallbacks = [];
-        };
-        
-        UpdateService.prototype = new XtextService();
-
-        /**
-         * Compute a delta between two versions of a text. If a difference is found, the result
-         * contains three properties:
-         *   deltaText - the text to insert into s1
-         *   deltaOffset - the text insertion offset
-         *   deltaReplaceLength - the number of characters that shall be replaced by the inserted text
-         */
-        UpdateService.prototype.computeDelta = function(s1, s2, result) {
-                var start = 0, s1length = s1.length, s2length = s2.length;
-                while (start < s1length && start < s2length && s1.charCodeAt(start) === s2.charCodeAt(start)) {
-                        start++;
-                }
-                if (start === s1length && start === s2length) {
-                        return;
-                }
-                result.deltaOffset = start;
-                if (start === s1length) {
-                        result.deltaText = s2.substring(start, s2length);
-                        result.deltaReplaceLength = 0;
-                        return;
-                } else if (start === s2length) {
-                        result.deltaText = '';
-                        result.deltaReplaceLength = s1length - start;
-                        return;
-                }
-                
-                var end1 = s1length - 1, end2 = s2length - 1;
-                while (end1 >= start && end2 >= start && s1.charCodeAt(end1) === s2.charCodeAt(end2)) {
-                        end1--;
-                        end2--;
-                }
-                result.deltaText = s2.substring(start, end2 + 1);
-                result.deltaReplaceLength = end1 - start + 1;
-        };
-        
-        /**
-         * Invoke all completion callbacks and clear the list afterwards.
-         */
-        UpdateService.prototype.onComplete = function(xhr, textStatus) {
-                var callbacks = this._completionCallbacks;
-                this._completionCallbacks = [];
-                for (var i = 0; i < callbacks.length; i++) {
-                        var callback = callbacks[i].callback;
-                        var params = callbacks[i].params;
-                        callback(params);
-                }
-        }
-        
-        /**
-         * Add a callback to be invoked when the service call has completed.
-         */
-        UpdateService.prototype.addCompletionCallback = function(callback, params) {
-                this._completionCallbacks.push({callback: callback, params: params});
-        }
-
-        UpdateService.prototype.invoke = function(editorContext, params, deferred) {
-                if (deferred === undefined) {
-                        deferred = jQuery.Deferred();
-                }
-                var knownServerState = editorContext.getServerState();
-                if (knownServerState.updateInProgress) {
-                        var self = this;
-                        this.addCompletionCallback(function() { self.invoke(editorContext, params, deferred) });
-                        return deferred.promise();
-                }
-                
-                var serverData = {
-                        contentType: params.contentType
-                };
-                var currentText = editorContext.getText();
-                if (params.sendFullText || knownServerState.text === undefined) {
-                        serverData.fullText = currentText;
-                } else {
-                        this.computeDelta(knownServerState.text, currentText, serverData);
-                        if (serverData.deltaText === undefined) {
-                                if (params.forceUpdate) {
-                                        serverData.deltaText = '';
-                                        serverData.deltaOffset = editorContext.getCaretOffset();
-                                        serverData.deltaReplaceLength = 0;
-                                } else {
-                                        deferred.resolve(knownServerState);
-                                        this.onComplete();
-                                        return deferred.promise();
-                                }
-                        }
-                        serverData.requiredStateId = knownServerState.stateId;
-                }
-
-                knownServerState.updateInProgress = true;
-                var self = this;
-                self.sendRequest(editorContext, {
-                        type: 'PUT',
-                        data: serverData,
-                        
-                        success: function(result) {
-                                if (result.conflict) {
-                                        // The server has lost its session state and the resource is loaded from the server
-                                        if (knownServerState.text !== undefined) {
-                                                delete knownServerState.updateInProgress;
-                                                delete knownServerState.text;
-                                                delete knownServerState.stateId;
-                                                self.invoke(editorContext, params, deferred);
-                                        } else {
-                                                deferred.reject(result.conflict);
-                                        }
-                                        return false;
-                                }
-                                var listeners = editorContext.updateServerState(currentText, result.stateId);
-                                for (var i = 0; i < listeners.length; i++) {
-                                        self.addCompletionCallback(listeners[i], params);
-                                }
-                                deferred.resolve(result);
-                        },
-                        
-                        error: function(xhr, textStatus, errorThrown) {
-                                if (xhr.status == 404 && !params.loadFromServer && knownServerState.text !== undefined) {
-                                        // The server has lost its session state and the resource is not loaded from the server
-                                        delete knownServerState.updateInProgress;
-                                        delete knownServerState.text;
-                                        delete knownServerState.stateId;
-                                        self.invoke(editorContext, params, deferred);
-                                        return true;
-                                }
-                                deferred.reject(errorThrown);
-                        },
-                        
-                        complete: self.onComplete.bind(self)
-                }, true);
-                return deferred.promise().always(function() {
-                        knownServerState.updateInProgress = false;
-                });
-        };
-        
-        return UpdateService;
-});
\ No newline at end of file
diff --git a/language-web/src/main/js/xtext/services/ValidationService.js b/language-web/src/main/js/xtext/services/ValidationService.js
deleted file mode 100644
index 85c9953d..00000000
--- a/language-web/src/main/js/xtext/services/ValidationService.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/*******************************************************************************
- * Copyright (c) 2015 itemis AG (http://www.itemis.eu) and others.
- * This program and the accompanying materials are made available under the
- * terms of the Eclipse Public License 2.0 which is available at
- * http://www.eclipse.org/legal/epl-2.0.
- *
- * SPDX-License-Identifier: EPL-2.0
- *******************************************************************************/
-
-define(['xtext/services/XtextService', 'jquery'], function(XtextService, jQuery) {
-        
-        /**
-         * Service class for validation.
-         */
-        function ValidationService(serviceUrl, resourceId) {
-                this.initialize(serviceUrl, 'validate', resourceId);
-        };
-        
-        ValidationService.prototype = new XtextService();
-        
-        ValidationService.prototype._checkPreconditions = function(editorContext, params) {
-                return this._state === undefined;
-        }
-
-        ValidationService.prototype._onConflict = function(editorContext, cause) {
-                this.setState(undefined);
-                return {
-                        suppressForcedUpdate: true
-                };
-        };
-        
-        return ValidationService;
-});
\ No newline at end of file
diff --git a/language-web/src/main/js/xtext/services/XtextService.js b/language-web/src/main/js/xtext/services/XtextService.js
deleted file mode 100644
index d3a4842f..00000000
--- a/language-web/src/main/js/xtext/services/XtextService.js
+++ /dev/null
@@ -1,280 +0,0 @@
-/*******************************************************************************
- * Copyright (c) 2015, 2017 itemis AG (http://www.itemis.eu) and others.
- * This program and the accompanying materials are made available under the
- * terms of the Eclipse Public License 2.0 which is available at
- * http://www.eclipse.org/legal/epl-2.0.
- *
- * SPDX-License-Identifier: EPL-2.0
- *******************************************************************************/
-
-define(['jquery'], function(jQuery) {
-        
-        var globalState = {};
-        
-        /**
-         * Generic service implementation that can serve as superclass for specialized services.
-         */
-        function XtextService() {};
-
-        /**
-         * Initialize the request metadata for this service class. Two variants:
-         *  - initialize(serviceUrl, serviceType, resourceId, updateService)
-         *  - initialize(xtextServices, serviceType)
-         */
-        XtextService.prototype.initialize = function() {
-                this._serviceType = arguments[1];
-                if (typeof(arguments[0]) === 'string') {
-                        this._requestUrl = arguments[0] + '/' + this._serviceType;
-                        var resourceId = arguments[2];
-                        if (resourceId)
-                                this._encodedResourceId = encodeURIComponent(resourceId);
-                        this._updateService = arguments[3];
-                } else {
-                        var xtextServices = arguments[0];
-                        if (xtextServices.options) {
-                                this._requestUrl = xtextServices.options.serviceUrl + '/' + this._serviceType;
-                                var resourceId = xtextServices.options.resourceId;
-                                if (resourceId)
-                                        this._encodedResourceId = encodeURIComponent(resourceId);
-                        }
-                        this._updateService = xtextServices.updateService;
-                }
-        }
-        
-        XtextService.prototype.setState = function(state) {
-                this._state = state;
-        }
-        
-        /**
-         * Invoke the service with default service behavior.
-         */
-        XtextService.prototype.invoke = function(editorContext, params, deferred, callbacks) {
-                if (deferred === undefined) {
-                        deferred = jQuery.Deferred();
-                }
-                if (jQuery.isFunction(this._checkPreconditions) && !this._checkPreconditions(editorContext, params)) {
-                        deferred.reject();
-                        return deferred.promise();
-                }
-                var serverData = {
-                        contentType: params.contentType
-                };
-                var initResult;
-                if (jQuery.isFunction(this._initServerData))
-                        initResult = this._initServerData(serverData, editorContext, params);
-                var httpMethod = 'GET';
-                if (initResult && initResult.httpMethod)
-                        httpMethod = initResult.httpMethod;
-                var self = this;
-                if (!(initResult && initResult.suppressContent)) {
-                        if (params.sendFullText) {
-                                serverData.fullText = editorContext.getText();
-                                httpMethod = 'POST';
-                        } else {
-                                var knownServerState = editorContext.getServerState();
-                                if (knownServerState.updateInProgress) {
-                                        if (self._updateService) {
-                                                self._updateService.addCompletionCallback(function() {
-                                                        self.invoke(editorContext, params, deferred);
-                                                });
-                                        } else {
-                                                deferred.reject();
-                                        }
-                                        return deferred.promise();
-                                }
-                                if (knownServerState.stateId !== undefined) {
-                                        serverData.requiredStateId = knownServerState.stateId;
-                                }
-                        }
-                }
-                
-                var onSuccess;
-                if (jQuery.isFunction(this._getSuccessCallback)) {
-                        onSuccess = this._getSuccessCallback(editorContext, params, deferred);
-                } else {
-                        onSuccess = function(result) {
-                                if (result.conflict) {
-                                        if (self._increaseRecursionCount(editorContext)) {
-                                                var onConflictResult;
-                                                if (jQuery.isFunction(self._onConflict)) {
-                                                        onConflictResult = self._onConflict(editorContext, result.conflict);
-                                                }
-                                                if (!(onConflictResult && onConflictResult.suppressForcedUpdate) && !params.sendFullText
-                                                                && result.conflict == 'invalidStateId' && self._updateService) {
-                                                        self._updateService.addCompletionCallback(function() {
-                                                                self.invoke(editorContext, params, deferred);
-                                                        });
-                                                        var knownServerState = editorContext.getServerState();
-                                                        delete knownServerState.stateId;
-                                                        delete knownServerState.text;
-                                                        self._updateService.invoke(editorContext, params);
-                                                } else {
-                                                        self.invoke(editorContext, params, deferred);
-                                                }
-                                        } else {
-                                                deferred.reject();
-                                        }
-                                        return false;
-                                }
-                                if (jQuery.isFunction(self._processResult)) {
-                                        var processedResult = self._processResult(result, editorContext);
-                                        if (processedResult) {
-                                                deferred.resolve(processedResult);
-                                                return true;
-                                        }
-                                }
-                                deferred.resolve(result);
-                        };
-                }
-                
-                var onError = function(xhr, textStatus, errorThrown) {
-                        if (xhr.status == 404 && !params.loadFromServer && self._increaseRecursionCount(editorContext)) {
-                                var onConflictResult;
-                                if (jQuery.isFunction(self._onConflict)) {
-                                        onConflictResult = self._onConflict(editorContext, errorThrown);
-                                }
-                                var knownServerState = editorContext.getServerState();
-                                if (!(onConflictResult && onConflictResult.suppressForcedUpdate)
-                                                && knownServerState.text !== undefined && self._updateService) {
-                                        self._updateService.addCompletionCallback(function() {
-                                                self.invoke(editorContext, params, deferred);
-                                        });
-                                        delete knownServerState.stateId;
-                                        delete knownServerState.text;
-                                        self._updateService.invoke(editorContext, params);
-                                        return true;
-                                }
-                        }
-                        deferred.reject(errorThrown);
-                }
-                
-                self.sendRequest(editorContext, {
-                        type: httpMethod,
-                        data: serverData,
-                        success: onSuccess,
-                        error: onError
-                }, !params.sendFullText);
-                return deferred.promise().always(function() {
-                        self._recursionCount = undefined;
-                });
-        }
-
-        /**
-         * Send an HTTP request to invoke the service.
-         */
-        XtextService.prototype.sendRequest = function(editorContext, settings, needsSession) {
-                var self = this;
-                self.setState('started');
-                var corsEnabled = editorContext.xtextServices.options['enableCors'];
-                if(corsEnabled) {
-                        settings.crossDomain = true;
-                        settings.xhrFields = {withCredentials: true};
-                } 
-                var onSuccess = settings.success;
-                settings.success = function(result) {
-                        var accepted = true;
-                        if (jQuery.isFunction(onSuccess)) {
-                                accepted = onSuccess(result);
-                        }
-                        if (accepted || accepted === undefined) {
-                                self.setState('finished');
-                                if (editorContext.xtextServices) {
-                                        var successListeners = editorContext.xtextServices.successListeners;
-                                        if (successListeners) {
-                                                for (var i = 0; i < successListeners.length; i++) {
-                                                        var listener = successListeners[i];
-                                                        if (jQuery.isFunction(listener)) {
-                                                                listener(self._serviceType, result);
-                                                        }
-                                                }
-                                        }
-                                }
-                        }
-                };
-                
-                var onError = settings.error;
-                settings.error = function(xhr, textStatus, errorThrown) {
-                        var resolved = false;
-                        if (jQuery.isFunction(onError)) {
-                                resolved = onError(xhr, textStatus, errorThrown);
-                        }
-                        if (!resolved) {
-                                self.setState(undefined);
-                                self._reportError(editorContext, textStatus, errorThrown, xhr);
-                        }
-                };
-                
-                settings.async = true;
-                var requestUrl = self._requestUrl;
-                if (!settings.data.resource && self._encodedResourceId) {
-                        if (requestUrl.indexOf('?') >= 0)
-                                requestUrl += '&resource=' + self._encodedResourceId;
-                        else
-                                requestUrl += '?resource=' + self._encodedResourceId;
-                }
-                
-                if (needsSession && globalState._initPending) {
-                        // We have to wait until the initial request has finished to make sure the client has
-                        // received a valid session id
-                        if (!globalState._waitingRequests)
-                                globalState._waitingRequests = [];
-                        globalState._waitingRequests.push({requestUrl: requestUrl, settings: settings});
-                } else {
-                        if (needsSession && !globalState._initDone) {
-                                globalState._initPending = true;
-                                var onComplete = settings.complete;
-                                settings.complete = function(xhr, textStatus) {
-                                        if (jQuery.isFunction(onComplete)) {
-                                                onComplete(xhr, textStatus);
-                                        }
-                                        delete globalState._initPending;
-                                        globalState._initDone = true;
-                                        if (globalState._waitingRequests) {
-                                                for (var i = 0; i < globalState._waitingRequests.length; i++) {
-                                                        var request = globalState._waitingRequests[i];
-                                                        jQuery.ajax(request.requestUrl, request.settings);
-                                                }
-                                                delete globalState._waitingRequests;
-                                        }
-                                }
-                        }
-                        jQuery.ajax(requestUrl, settings);
-                }
-        }
-        
-        /**
-         * Use this in case of a conflict before retrying the service invocation. If the number
-         * of retries exceeds the limit, an error is reported and the function returns false.
-         */
-        XtextService.prototype._increaseRecursionCount = function(editorContext) {
-                if (this._recursionCount === undefined)
-                        this._recursionCount = 1;
-                else
-                        this._recursionCount++;
-
-                if (this._recursionCount >= 10) {
-                        this._reportError(editorContext, 'warning', 'Xtext service request failed after 10 attempts.', {});
-                        return false;
-                }
-                return true;
-        },
-        
-        /**
-         * Report an error to the listeners.
-         */
-        XtextService.prototype._reportError = function(editorContext, severity, message, requestData) {
-                if (editorContext.xtextServices) {
-                        var errorListeners = editorContext.xtextServices.errorListeners;
-                        if (errorListeners) {
-                                for (var i = 0; i < errorListeners.length; i++) {
-                                        var listener = errorListeners[i];
-                                        if (jQuery.isFunction(listener)) {
-                                                listener(this._serviceType, severity, message, requestData);
-                                        }
-                                }
-                        }
-                }
-        }
-        
-        return XtextService;
-});
diff --git a/language-web/src/main/js/xtext/xtext-codemirror.d.ts b/language-web/src/main/js/xtext/xtext-codemirror.d.ts
deleted file mode 100644
index fff850b8..00000000
--- a/language-web/src/main/js/xtext/xtext-codemirror.d.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Editor } from 'codemirror';
-
-export function createEditor(options: IXtextOptions): IXtextCodeMirrorEditor;
-
-export function createServices(editor: Editor, options: IXtextOptions): IXtextServices;
-
-export function removeServices(editor: Editor): void;
-
-export interface IXtextOptions {
-  baseUrl?: string;
-  contentType?: string;
-  dirtyElement?: string | Element;
-  dirtyStatusClass?: string;
-  document?: Document;
-  enableContentAssistService?: boolean;
-  enableCors?: boolean;
-  enableFormattingAction?: boolean;
-  enableFormattingService?: boolean;
-  enableGeneratorService?: boolean;
-  enableHighlightingService?: boolean;
-  enableOccurrencesService?: boolean;
-  enableSaveAction?: boolean;
-  enableValidationService?: boolean;
-  loadFromServer?: boolean;
-  mode?: string;
-  parent?: string | Element;
-  parentClass?: string;
-  resourceId?: string;
-  selectionUpdateDelay?: number;
-  sendFullText?: boolean;
-  serviceUrl?: string;
-  showErrorDialogs?: boolean;
-  syntaxDefinition?: string;
-  textUpdateDelay?: number;
-  xtextLang?: string;
-}
-
-export interface IXtextCodeMirrorEditor extends Editor {
-  xtextServices: IXtextServices;
-}
-
-export interface IXtextServices {
-}
diff --git a/language-web/src/main/js/xtext/xtext-codemirror.js b/language-web/src/main/js/xtext/xtext-codemirror.js
deleted file mode 100644
index d246172a..00000000
--- a/language-web/src/main/js/xtext/xtext-codemirror.js
+++ /dev/null
@@ -1,473 +0,0 @@
-/*******************************************************************************
- * Copyright (c) 2015, 2017 itemis AG (http://www.itemis.eu) and others.
- * This program and the accompanying materials are made available under the
- * terms of the Eclipse Public License 2.0 which is available at
- * http://www.eclipse.org/legal/epl-2.0.
- *
- * SPDX-License-Identifier: EPL-2.0
- *******************************************************************************/
-
-/*
- * Use `createEditor(options)` to create an Xtext editor. You can specify options either
- * through the function parameter or through `data-editor-x` attributes, where x is an
- * option name with camelCase converted to hyphen-separated.
- * In addition to the options supported by CodeMirror (https://codemirror.net/doc/manual.html#config),
- * the following options are available:
- *
- * baseUrl = "/" {String}
- *     The path segment where the Xtext service is found; see serviceUrl option.
- * contentType {String}
- *     The content type included in requests to the Xtext server.
- * dirtyElement {String | DOMElement}
- *     An element into which the dirty status class is written when the editor is marked dirty;
- *     it can be either a DOM element or an ID for a DOM element.
- * dirtyStatusClass = 'dirty' {String}
- *     A CSS class name written into the dirtyElement when the editor is marked dirty.
- * document {Document}
- *     The document; if not specified, the global document is used.
- * enableContentAssistService = true {Boolean}
- *     Whether content assist should be enabled.
- * enableCors = true {Boolean}
- *     Whether CORS should be enabled for service request.
- * enableFormattingAction = false {Boolean}
- *     Whether the formatting action should be bound to the standard keystroke ctrl+shift+s / cmd+shift+f.
- * enableFormattingService = true {Boolean}
- *     Whether text formatting should be enabled.
- * enableGeneratorService = true {Boolean}
- *     Whether code generation should be enabled (must be triggered through JavaScript code).
- * enableHighlightingService = true {Boolean}
- *     Whether semantic highlighting (computed on the server) should be enabled.
- * enableOccurrencesService = true {Boolean}
- *     Whether marking occurrences should be enabled.
- * enableSaveAction = false {Boolean}
- *     Whether the save action should be bound to the standard keystroke ctrl+s / cmd+s.
- * enableValidationService = true {Boolean}
- *     Whether validation should be enabled.
- * loadFromServer = true {Boolean}
- *     Whether to load the editor content from the server.
- * mode {String}
- *     The name of the syntax highlighting mode to use; the mode has to be registered externally
- *     (see CodeMirror documentation).
- * parent = 'xtext-editor' {String | DOMElement}
- *     The parent element for the view; it can be either a DOM element or an ID for a DOM element.
- * parentClass = 'xtext-editor' {String}
- *     If the 'parent' option is not given, this option is used to find elements that match the given class name.
- * resourceId {String}
- *     The identifier of the resource displayed in the text editor; this option is sent to the server to
- *     communicate required information on the respective resource.
- * selectionUpdateDelay = 550 {Number}
- *     The number of milliseconds to wait after a selection change before Xtext services are invoked.
- * sendFullText = false {Boolean}
- *     Whether the full text shall be sent to the server with each request; use this if you want
- *     the server to run in stateless mode. If the option is inactive, the server state is updated regularly.
- * serviceUrl {String}
- *     The URL of the Xtext servlet; if no value is given, it is constructed using the baseUrl option in the form
- *     {location.protocol}//{location.host}{baseUrl}xtext-service
- * showErrorDialogs = false {Boolean}
- *     Whether errors should be displayed in popup dialogs.
- * syntaxDefinition {String}
- *     If the 'mode' option is not set, the default mode 'xtext/{xtextLang}' is used. Set this option to
- *     'none' to suppress this behavior and disable syntax highlighting.
- * textUpdateDelay = 500 {Number}
- *     The number of milliseconds to wait after a text change before Xtext services are invoked.
- * xtextLang {String}
- *     The language name (usually the file extension configured for the language).
- */
-define([
-    'jquery',
-    'codemirror',
-    'codemirror/addon/hint/show-hint',
-    'xtext/compatibility',
-    'xtext/ServiceBuilder',
-        'xtext/CodeMirrorEditorContext',
-        'codemirror/mode/javascript/javascript'
-], function(jQuery, CodeMirror, ShowHint, compatibility, ServiceBuilder, EditorContext) {
-        
-        var exports = {};
-        
-        /**
-         * Create one or more Xtext editor instances configured with the given options.
-         * The return value is either a CodeMirror editor or an array of CodeMirror editors.
-         */
-        exports.createEditor = function(options) {
-                if (!options)
-                        options = {};
-                
-                var query;
-                if (jQuery.type(options.parent) === 'string') {
-                        query = jQuery('#' + options.parent, options.document);
-                } else if (options.parent) {
-                        query = jQuery(options.parent);
-                } else if (jQuery.type(options.parentClass) === 'string') {
-                        query = jQuery('.' + options.parentClass, options.document);
-                } else {
-                        query = jQuery('#xtext-editor', options.document);
-                        if (query.length == 0)
-                                query = jQuery('.xtext-editor', options.document);
-                }
-                
-                var editors = [];
-                query.each(function(index, parent) {
-                        var editorOptions = ServiceBuilder.mergeParentOptions(parent, options);
-                        if (!editorOptions.value)
-                                editorOptions.value = jQuery(parent).text();
-                        var editor = CodeMirror(function(element) {
-                                jQuery(parent).empty().append(element);
-                        }, editorOptions);
-                        
-                        exports.createServices(editor, editorOptions);
-                        editors[index] = editor;
-                });
-                
-                if (editors.length == 1)
-                        return editors[0];
-                else
-                        return editors;
-        }
-        
-        function CodeMirrorServiceBuilder(editor, xtextServices) {
-                this.editor = editor;
-                xtextServices.editorContext._highlightingMarkers = [];
-                xtextServices.editorContext._validationMarkers = [];
-                xtextServices.editorContext._occurrenceMarkers = [];
-                ServiceBuilder.call(this, xtextServices);
-        }
-        CodeMirrorServiceBuilder.prototype = new ServiceBuilder();
-                
-        /**
-         * Configure Xtext services for the given editor. The editor does not have to be created
-         * with createEditor(options).
-         */
-        exports.createServices = function(editor, options) {
-                if (options.enableValidationService || options.enableValidationService === undefined) {
-                        editor.setOption('gutters', ['annotations-gutter']);
-                }
-                var xtextServices = {
-                        options: options,
-                        editorContext: new EditorContext(editor)
-                };
-                var serviceBuilder = new CodeMirrorServiceBuilder(editor, xtextServices);
-                serviceBuilder.createServices();
-                xtextServices.serviceBuilder = serviceBuilder;
-                editor.xtextServices = xtextServices;
-                return xtextServices;
-        }
-        
-        /**
-         * Remove all services and listeners that have been previously created with createServices(editor, options).
-         */
-        exports.removeServices = function(editor) {
-                if (!editor.xtextServices)
-                        return;
-                var services = editor.xtextServices;
-                if (services.modelChangeListener)
-                        editor.off('changes', services.modelChangeListener);
-                if (services.cursorActivityListener)
-                        editor.off('cursorActivity', services.cursorActivityListener);
-                if (services.saveKeyMap)
-                        editor.removeKeyMap(services.saveKeyMap);
-                if (services.contentAssistKeyMap)
-                        editor.removeKeyMap(services.contentAssistKeyMap);
-                if (services.formatKeyMap)
-                        editor.removeKeyMap(services.formatKeyMap);
-                var editorContext = services.editorContext;
-                var highlightingMarkers = editorContext._highlightingMarkers;
-                if (highlightingMarkers) {
-                        for (var i = 0; i < highlightingMarkers.length; i++) {
-                                highlightingMarkers[i].clear();
-                        }
-                }
-                if (editorContext._validationAnnotations)
-                        services.serviceBuilder._clearAnnotations(editorContext._validationAnnotations);
-                var validationMarkers = editorContext._validationMarkers;
-                if (validationMarkers) {
-                        for (var i = 0; i < validationMarkers.length; i++) {
-                                validationMarkers[i].clear();
-                        }
-                }
-                var occurrenceMarkers = editorContext._occurrenceMarkers;
-                if (occurrenceMarkers) {
-                        for (var i = 0; i < occurrenceMarkers.length; i++)  {
-                                occurrenceMarkers[i].clear();
-                        }
-                }
-                delete editor.xtextServices;
-        }
-        
-        /**
-         * Syntax highlighting (without semantic highlighting).
-         */
-        CodeMirrorServiceBuilder.prototype.setupSyntaxHighlighting = function() {
-                var options = this.services.options;
-                // If the mode option is set, syntax highlighting has already been configured by CM
-                if (!options.mode && options.syntaxDefinition != 'none' && options.xtextLang) {
-                        this.editor.setOption('mode', 'xtext/' + options.xtextLang);
-                }
-        }
-                
-        /**
-         * Document update service.
-         */
-        CodeMirrorServiceBuilder.prototype.setupUpdateService = function(refreshDocument) {
-                var services = this.services;
-                var editorContext = services.editorContext;
-                var textUpdateDelay = services.options.textUpdateDelay;
-                if (!textUpdateDelay)
-                        textUpdateDelay = 500;
-                services.modelChangeListener = function(event) {
-                        if (!event._xtext_init)
-                                editorContext.setDirty(true);
-                        if (editorContext._modelChangeTimeout)
-                                clearTimeout(editorContext._modelChangeTimeout);
-                        editorContext._modelChangeTimeout = setTimeout(function() {
-                                if (services.options.sendFullText)
-                                        refreshDocument();
-                                else
-                                        services.update();
-                        }, textUpdateDelay);
-                }
-                if (!services.options.resourceId || !services.options.loadFromServer)
-                        services.modelChangeListener({_xtext_init: true});
-                this.editor.on('changes', services.modelChangeListener);
-        }
-        
-        /**
-         * Persistence services: load, save, and revert.
-         */
-        CodeMirrorServiceBuilder.prototype.setupPersistenceServices = function() {
-                var services = this.services;
-                if (services.options.enableSaveAction) {
-                        var userAgent = navigator.userAgent.toLowerCase();
-                        var saveFunction = function(editor) {
-                                services.saveResource();
-                        };
-                        services.saveKeyMap = /mac os/.test(userAgent) ? {'Cmd-S': saveFunction}: {'Ctrl-S': saveFunction};
-                        this.editor.addKeyMap(services.saveKeyMap);
-                }
-        }
-                
-        /**
-         * Content assist service.
-         */
-        CodeMirrorServiceBuilder.prototype.setupContentAssistService = function() {
-                var services = this.services;
-                var editorContext = services.editorContext;
-                services.contentAssistKeyMap = {'Ctrl-Space': function(editor) {
-                        var params = ServiceBuilder.copy(services.options);
-                        var cursor = editor.getCursor();
-                        params.offset = editor.indexFromPos(cursor);
-                        services.contentAssistService.invoke(editorContext, params).done(function(entries) {
-                                editor.showHint({hint: function(editor, options) {
-                                        return {
-                                                list: entries.map(function(entry) {
-                                                        var displayText;
-                                                        if (entry.label)
-                                                                displayText = entry.label;
-                                                        else
-                                                                displayText = entry.proposal;
-                                                        if (entry.description)
-                                                                displayText += ' (' + entry.description + ')';
-                                                        var prefixLength = 0
-                                                        if (entry.prefix)
-                                                                prefixLength = entry.prefix.length
-                                                return {
-                                                        text: entry.proposal,
-                                                        displayText: displayText,
-                                                        from: {
-                                                                line: cursor.line,
-                                                                ch: cursor.ch - prefixLength
-                                                        }
-                                                };
-                                                }),
-            from: cursor,
-                                                to: cursor
-                                        };
-                                }});
-                        });
-                }};
-                this.editor.addKeyMap(services.contentAssistKeyMap);
-        }
-                
-        /**
-         * Semantic highlighting service.
-         */
-        CodeMirrorServiceBuilder.prototype.doHighlighting = function() {
-                var services = this.services;
-                var editorContext = services.editorContext;
-                var editor = this.editor;
-                services.computeHighlighting().always(function() {
-                        var highlightingMarkers = editorContext._highlightingMarkers;
-                        if (highlightingMarkers) {
-                                for (var i = 0; i < highlightingMarkers.length; i++) {
-                                        highlightingMarkers[i].clear();
-                                }
-                        }
-                        editorContext._highlightingMarkers = [];
-                }).done(function(result) {
-                        for (var i = 0; i < result.regions.length; ++i) {
-                                var region = result.regions[i];
-                                var from = editor.posFromIndex(region.offset);
-                                var to = editor.posFromIndex(region.offset + region.length);
-                                region.styleClasses.forEach(function(styleClass) {
-                                        var marker =  editor.markText(from, to, {className: styleClass});
-                                        editorContext._highlightingMarkers.push(marker);
-                                });
-                        }
-                });
-        }
-        
-        var annotationWeight = {
-                error: 30,
-                warning: 20,
-                info: 10
-        };
-        CodeMirrorServiceBuilder.prototype._getAnnotationWeight = function(annotation) {
-                if (annotationWeight[annotation] !== undefined)
-                        return annotationWeight[annotation];
-                else
-                        return 0;
-        }
-        
-        CodeMirrorServiceBuilder.prototype._clearAnnotations = function(annotations) {
-                var editor = this.editor;
-    editor.clearGutter('annotations-gutter');
-                for (var i = 0; i < annotations.length; i++) {
-                        var annotation = annotations[i];
-                        if (annotation) {
-                                annotations[i] = undefined;
-                        }
-                }
-        }
-        
-        CodeMirrorServiceBuilder.prototype._refreshAnnotations = function(annotations) {
-                var editor = this.editor;
-                for (var i = 0; i < annotations.length; i++) {
-                        var annotation = annotations[i];
-                        if (annotation) {
-                                var classProp = ' class="xtext-annotation_' + annotation.type + '"';
-                                var titleProp = annotation.description ? ' title="' + annotation.description.replace(/"/g, '&quot;') + '"' : '';
-                                var element = jQuery('<div' + classProp + titleProp + '></div>').get(0);
-                                editor.setGutterMarker(i, 'annotations-gutter', element);
-                        }
-                }
-        }
-        
-        /**
-         * Validation service.
-         */
-        CodeMirrorServiceBuilder.prototype.doValidation = function() {
-                var services = this.services;
-                var editorContext = services.editorContext;
-                var editor = this.editor;
-                var self = this;
-                services.validate().always(function() {
-                        if (editorContext._validationAnnotations)
-                                self._clearAnnotations(editorContext._validationAnnotations);
-                        else
-                                editorContext._validationAnnotations = [];
-                        var validationMarkers = editorContext._validationMarkers;
-                        if (validationMarkers) {
-                                for (var i = 0; i < validationMarkers.length; i++) {
-                                        validationMarkers[i].clear();
-                                }
-                        }
-                        editorContext._validationMarkers = [];
-                }).done(function(result) {
-                        var validationAnnotations = editorContext._validationAnnotations;
-                        for (var i = 0; i < result.issues.length; i++) {
-                                var entry = result.issues[i];
-                                var annotation = validationAnnotations[entry.line - 1];
-                                var weight = self._getAnnotationWeight(entry.severity);
-                                if (annotation) {
-                                        if (annotation.weight < weight) {
-                                                annotation.type = entry.severity;
-                                                annotation.weight = weight;
-                                        }
-                                        if (annotation.description)
-                                                annotation.description += '\n' + entry.description;
-                                        else
-                                                annotation.description = entry.description;
-                                } else {
-                                        validationAnnotations[entry.line - 1] = {
-                                                type: entry.severity,
-                                                weight: weight,
-                                                description: entry.description
-                                        };
-                                }
-                                var from = editor.posFromIndex(entry.offset);
-                                var to = editor.posFromIndex(entry.offset + entry.length);
-                                var marker =  editor.markText(from, to, {
-                                        className: 'xtext-marker_' + entry.severity,
-                                        title: entry.description
-                                });
-                                editorContext._validationMarkers.push(marker);
-                        }
-                        self._refreshAnnotations(validationAnnotations);
-                });
-        }
-                
-        /**
-         * Occurrences service.
-         */
-        CodeMirrorServiceBuilder.prototype.setupOccurrencesService = function() {
-                var services = this.services;
-                var editorContext = services.editorContext;
-                var selectionUpdateDelay = services.options.selectionUpdateDelay;
-                if (!selectionUpdateDelay)
-                        selectionUpdateDelay = 550;
-                var editor = this.editor;
-                var self = this;
-                services.cursorActivityListener = function() {
-                        if (editorContext._selectionChangeTimeout) {
-                                clearTimeout(editorContext._selectionChangeTimeout);
-                        }
-                        editorContext._selectionChangeTimeout = setTimeout(function() {
-                                var params = ServiceBuilder.copy(services.options);
-                                var cursor = editor.getCursor();
-                                params.offset = editor.indexFromPos(cursor);
-                                services.occurrencesService.invoke(editorContext, params).always(function() {
-                                        var occurrenceMarkers = editorContext._occurrenceMarkers;
-                                        if (occurrenceMarkers) {
-                                                for (var i = 0; i < occurrenceMarkers.length; i++)  {
-                                                        occurrenceMarkers[i].clear();
-                                                }
-                                        }
-                                        editorContext._occurrenceMarkers = [];
-                                }).done(function(occurrencesResult) {
-                                        for (var i = 0; i < occurrencesResult.readRegions.length; i++) {
-                                                var region = occurrencesResult.readRegions[i];
-                                                var from = editor.posFromIndex(region.offset);
-                                                var to = editor.posFromIndex(region.offset + region.length);
-                                                var marker =  editor.markText(from, to, {className: 'xtext-marker_read'});
-                                                editorContext._occurrenceMarkers.push(marker);
-                                        }
-                                        for (var i = 0; i < occurrencesResult.writeRegions.length; i++) {
-                                                var region = occurrencesResult.writeRegions[i];
-                                                var from = editor.posFromIndex(region.offset);
-                                                var to = editor.posFromIndex(region.offset + region.length);
-                                                var marker =  editor.markText(from, to, {className: 'xtext-marker_write'});
-                                                editorContext._occurrenceMarkers.push(marker);
-                                        }
-                                });
-                        }, selectionUpdateDelay);
-                }
-                editor.on('cursorActivity', services.cursorActivityListener);
-        }
-                
-        /**
-         * Formatting service.
-         */
-        CodeMirrorServiceBuilder.prototype.setupFormattingService = function() {
-                var services = this.services;
-                if (services.options.enableFormattingAction) {
-                        var userAgent = navigator.userAgent.toLowerCase();
-                        var formatFunction = function(editor) {
-                                services.format();
-                        };
-                        services.formatKeyMap = /mac os/.test(userAgent) ? {'Shift-Cmd-F': formatFunction}: {'Shift-Ctrl-S': formatFunction};
-                        this.editor.addKeyMap(services.formatKeyMap);
-                }
-        }
-        
-        return exports;
-});
diff --git a/language-web/src/main/js/xtext/xtextMessages.ts b/language-web/src/main/js/xtext/xtextMessages.ts
new file mode 100644
index 00000000..68737958
--- /dev/null
+++ b/language-web/src/main/js/xtext/xtextMessages.ts
@@ -0,0 +1,62 @@
+export interface IXtextWebRequest {
+  id: string;
+
+  request: unknown;
+}
+
+export interface IXtextWebOkResponse {
+  id: string;
+
+  response: unknown;
+}
+
+export function isOkResponse(response: unknown): response is IXtextWebOkResponse {
+  const okResponse = response as IXtextWebOkResponse;
+  return typeof okResponse === 'object'
+    && typeof okResponse.id === 'string'
+    && typeof okResponse.response !== 'undefined';
+}
+
+export const VALID_XTEXT_WEB_ERROR_KINDS = ['request', 'server'] as const;
+
+export type XtextWebErrorKind = typeof VALID_XTEXT_WEB_ERROR_KINDS[number];
+
+export function isXtextWebErrorKind(value: unknown): value is XtextWebErrorKind {
+  return typeof value === 'string'
+    && VALID_XTEXT_WEB_ERROR_KINDS.includes(value as XtextWebErrorKind);
+}
+
+export interface IXtextWebErrorResponse {
+  id: string;
+
+  error: XtextWebErrorKind;
+
+  message: string;
+}
+
+export function isErrorResponse(response: unknown): response is IXtextWebErrorResponse {
+  const errorResponse = response as IXtextWebErrorResponse;
+  return typeof errorResponse === 'object'
+    && typeof errorResponse.id === 'string'
+    && isXtextWebErrorKind(errorResponse.error)
+    && typeof errorResponse.message === 'string';
+}
+
+export interface IXtextWebPushMessage {
+  resource: string;
+
+  stateId: string;
+
+  service: string;
+
+  push: unknown;
+}
+
+export function isPushMessage(response: unknown): response is IXtextWebPushMessage {
+  const pushMessage = response as IXtextWebPushMessage;
+  return typeof pushMessage === 'object'
+    && typeof pushMessage.resource === 'string'
+    && typeof pushMessage.stateId === 'string'
+    && typeof pushMessage.service === 'string'
+    && typeof pushMessage.push !== 'undefined';
+}
diff --git a/language-web/src/main/js/xtext/xtextServiceResults.ts b/language-web/src/main/js/xtext/xtextServiceResults.ts
new file mode 100644
index 00000000..b2de1e4a
--- /dev/null
+++ b/language-web/src/main/js/xtext/xtextServiceResults.ts
@@ -0,0 +1,239 @@
+export interface IPongResult {
+  pong: string;
+}
+
+export function isPongResult(result: unknown): result is IPongResult {
+  const pongResult = result as IPongResult;
+  return typeof pongResult === 'object'
+    && typeof pongResult.pong === 'string';
+}
+
+export interface IDocumentStateResult {
+  stateId: string;
+}
+
+export function isDocumentStateResult(result: unknown): result is IDocumentStateResult {
+  const documentStateResult = result as IDocumentStateResult;
+  return typeof documentStateResult === 'object'
+    && typeof documentStateResult.stateId === 'string';
+}
+
+export const VALID_CONFLICTS = ['invalidStateId', 'canceled'] as const;
+
+export type Conflict = typeof VALID_CONFLICTS[number];
+
+export function isConflict(value: unknown): value is Conflict {
+  return typeof value === 'string' && VALID_CONFLICTS.includes(value as Conflict);
+}
+
+export interface IServiceConflictResult {
+  conflict: Conflict;
+}
+
+export function isServiceConflictResult(result: unknown): result is IServiceConflictResult {
+  const serviceConflictResult = result as IServiceConflictResult;
+  return typeof serviceConflictResult === 'object'
+    && isConflict(serviceConflictResult.conflict);
+}
+
+export function isInvalidStateIdConflictResult(result: unknown): boolean {
+  return isServiceConflictResult(result) && result.conflict === 'invalidStateId';
+}
+
+export const VALID_SEVERITIES = ['error', 'warning', 'info', 'ignore'] as const;
+
+export type Severity = typeof VALID_SEVERITIES[number];
+
+export function isSeverity(value: unknown): value is Severity {
+  return typeof value === 'string' && VALID_SEVERITIES.includes(value as Severity);
+}
+
+export interface IIssue {
+  description: string;
+
+  severity: Severity;
+
+  line: number;
+
+  column: number;
+
+  offset: number;
+
+  length: number;
+}
+
+export function isIssue(value: unknown): value is IIssue {
+  const issue = value as IIssue;
+  return typeof issue === 'object'
+    && typeof issue.description === 'string'
+    && isSeverity(issue.severity)
+    && typeof issue.line === 'number'
+    && typeof issue.column === 'number'
+    && typeof issue.offset === 'number'
+    && typeof issue.length === 'number';
+}
+
+export interface IValidationResult {
+  issues: IIssue[];
+}
+
+function isArrayOfType<T>(value: unknown, check: (entry: unknown) => entry is T): value is T[] {
+  return Array.isArray(value) && (value as T[]).every(check);
+}
+
+export function isValidationResult(result: unknown): result is IValidationResult {
+  const validationResult = result as IValidationResult;
+  return typeof validationResult === 'object'
+    && isArrayOfType(validationResult.issues, isIssue);
+}
+
+export interface IReplaceRegion {
+  offset: number;
+
+  length: number;
+
+  text: string;
+}
+
+export function isReplaceRegion(value: unknown): value is IReplaceRegion {
+  const replaceRegion = value as IReplaceRegion;
+  return typeof replaceRegion === 'object'
+    && typeof replaceRegion.offset === 'number'
+    && typeof replaceRegion.length === 'number'
+    && typeof replaceRegion.text === 'string';
+}
+
+export interface ITextRegion {
+  offset: number;
+
+  length: number;
+}
+
+export function isTextRegion(value: unknown): value is ITextRegion {
+  const textRegion = value as ITextRegion;
+  return typeof textRegion === 'object'
+    && typeof textRegion.offset === 'number'
+    && typeof textRegion.length === 'number';
+}
+
+export const VALID_XTEXT_CONTENT_ASSIST_ENTRY_KINDS = [
+  'TEXT',
+  'METHOD',
+  'FUNCTION',
+  'CONSTRUCTOR',
+  'FIELD',
+  'VARIABLE',
+  'CLASS',
+  'INTERFACE',
+  'MODULE',
+  'PROPERTY',
+  'UNIT',
+  'VALUE',
+  'ENUM',
+  'KEYWORD',
+  'SNIPPET',
+  'COLOR',
+  'FILE',
+  'REFERENCE',
+  'UNKNOWN',
+] as const;
+
+export type XtextContentAssistEntryKind = typeof VALID_XTEXT_CONTENT_ASSIST_ENTRY_KINDS[number];
+
+export function isXtextContentAssistEntryKind(
+  value: unknown,
+): value is XtextContentAssistEntryKind {
+  return typeof value === 'string'
+    && VALID_XTEXT_CONTENT_ASSIST_ENTRY_KINDS.includes(value as XtextContentAssistEntryKind);
+}
+
+export interface IContentAssistEntry {
+  prefix: string;
+
+  proposal: string;
+
+  label?: string;
+
+  description?: string;
+
+  documentation?: string;
+
+  escapePosition?: number;
+
+  textReplacements: IReplaceRegion[];
+
+  editPositions: ITextRegion[];
+
+  kind: XtextContentAssistEntryKind | string;
+}
+
+function isStringOrUndefined(value: unknown): value is string | undefined {
+  return typeof value === 'string' || typeof value === 'undefined';
+}
+
+function isNumberOrUndefined(value: unknown): value is number | undefined {
+  return typeof value === 'number' || typeof value === 'undefined';
+}
+
+export function isContentAssistEntry(value: unknown): value is IContentAssistEntry {
+  const entry = value as IContentAssistEntry;
+  return typeof entry === 'object'
+    && typeof entry.prefix === 'string'
+    && typeof entry.proposal === 'string'
+    && isStringOrUndefined(entry.label)
+    && isStringOrUndefined(entry.description)
+    && isStringOrUndefined(entry.documentation)
+    && isNumberOrUndefined(entry.escapePosition)
+    && isArrayOfType(entry.textReplacements, isReplaceRegion)
+    && isArrayOfType(entry.editPositions, isTextRegion)
+    && typeof entry.kind === 'string';
+}
+
+export interface IContentAssistResult extends IDocumentStateResult {
+  entries: IContentAssistEntry[];
+}
+
+export function isContentAssistResult(result: unknown): result is IContentAssistResult {
+  const contentAssistResult = result as IContentAssistResult;
+  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);
+}
+
+export interface IOccurrencesResult extends IDocumentStateResult {
+  writeRegions: ITextRegion[];
+
+  readRegions: ITextRegion[];
+}
+
+export function isOccurrencesResult(result: unknown): result is IOccurrencesResult {
+  const occurrencesResult = result as IOccurrencesResult;
+  return isDocumentStateResult(occurrencesResult)
+    && isArrayOfType(occurrencesResult.writeRegions, isTextRegion)
+    && isArrayOfType(occurrencesResult.readRegions, isTextRegion);
+}