1 files changed, 220 insertions, 138 deletions

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