feat(web): add CodeMirror 6 editor

8 files changed, 363 insertions, 198 deletions

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..58d65184 100644
--- a/language-web/src/main/js/editor/EditorArea.tsx
+++ b/language-web/src/main/js/editor/EditorArea.tsx
@@ -1,41 +1,123 @@
+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, { useEffect, useRef, useState } from 'react';
 
+import { EditorParent } from './EditorParent';
+import { getLogger } from '../logging';
 import { useRootStore } from '../RootStore';
 
+const log = getLogger('EditorArea');
+
+function usePanel(
+  label: string,
+  stateToSet: boolean,
+  editorView: EditorView | null,
+  openCommand: Command,
+  closeCommand: Command,
+) {
+  const [cachedViewState, setCachedViewState] = useState<boolean>(false);
+  useEffect(() => {
+    if (editorView === null || cachedViewState === stateToSet) {
+      return;
+    }
+    const success = stateToSet ? openCommand(editorView) : closeCommand(editorView);
+    if (!success) {
+      log.error(
+        'Failed to synchronize',
+        label,
+        'panel state - store state:',
+        cachedViewState,
+        'view state:',
+        stateToSet,
+      );
+    }
+    setCachedViewState(stateToSet);
+  }, [
+    stateToSet,
+    editorView,
+    cachedViewState,
+    label,
+    openCommand,
+    closeCommand,
+  ]);
+  return setCachedViewState;
+}
+
 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,
+  );
+
+  const setLintPanelOpen = usePanel(
+    'lint',
+    editorStore.showLintPanel,
+    editorViewState,
+    openLintPanel,
+    closeLintPanel,
+  );
+
+  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,
+          );
+        }
+      },
+    });
+    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..9622475c 100644
--- a/language-web/src/main/js/editor/EditorButtons.tsx
+++ b/language-web/src/main/js/editor/EditorButtons.tsx
@@ -2,8 +2,10 @@ import { observer } from 'mobx-react-lite';
 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 FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
 import RedoIcon from '@mui/icons-material/Redo';
+import SearchIcon from '@mui/icons-material/Search';
 import UndoIcon from '@mui/icons-material/Undo';
 import React from 'react';
 
@@ -37,15 +39,34 @@ export const EditorButtons = observer(() => {
           <RedoIcon fontSize="small" />
         </ToggleButton>
       </ToggleButtonGroup>
-      <ToggleButton
-        selected={editorStore.showLineNumbers}
-        onChange={() => editorStore.toggleLineNumbers()}
+      <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 errors and warnings"
+          value="show-lint-panel"
+        >
+          <CheckIcon fontSize="small" />
+        </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..bf67522b
--- /dev/null
+++ b/language-web/src/main/js/editor/EditorParent.ts
@@ -0,0 +1,61 @@
+import { styled } from '@mui/material/styles';
+
+export const EditorParent = styled('div')(({ theme }) => ({
+  background: theme.palette.background.default,
+  '&, .cm-editor': {
+    height: '100%',
+  },
+  '.cm-scroller': {
+    fontSize: 16,
+    fontFamily: '"JetBrains MonoVariable", "JetBrains Mono", monospace',
+    fontFeatureSettings: '"liga", "calt"',
+    fontWeight: 400,
+    letterSpacing: 0,
+    textRendering: 'optimizeLegibility',
+    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': {
+    background: theme.palette.background.paper,
+    borderTop: `1px solid ${theme.palette.divider}`,
+    'button[name="close"]': {
+      // HACK We can't hook the panel close button to go through `EditorStore`,
+      // so we hide it altogether.
+      display: 'none',
+    },
+  },
+  '.cmt-comment': {
+    fontVariant: 'italic',
+    color: theme.palette.text.disabled,
+  },
+}));
diff --git a/language-web/src/main/js/editor/EditorStore.ts b/language-web/src/main/js/editor/EditorStore.ts
index 705020b9..326c02a1 100644
--- a/language-web/src/main/js/editor/EditorStore.ts
+++ b/language-web/src/main/js/editor/EditorStore.ts
@@ -1,201 +1,217 @@
-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 { lintKeymap } 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 type { ThemeStore } from '../theme/ThemeStore';
 
 const log = getLogger('EditorStore');
 
-const xtextLang = 'problem';
-
-const xtextOptions: IXtextOptions = {
-  xtextLang,
-  enableFormattingAction: true,
-};
-
-const codeMirrorGlobalOptions: EditorConfiguration = {
-  mode: `xtext/${xtextLang}`,
-  indentUnit: 2,
-  styleActiveLine: true,
-  screenReaderLabel: 'Model source code',
-  inputStyle: 'contenteditable',
-};
-
 export class EditorStore {
   themeStore;
 
-  atom;
+  state: EditorState;
 
-  chunk?: IEditorChunk;
+  emptyHistory: unknown;
 
-  editor?: Editor;
+  showLineNumbers = false;
 
-  xtextServices?: IXtextServices;
+  showSearchPanel = false;
 
-  value = '';
+  showLintPanel = false;
 
-  showLineNumbers = false;
+  readonly defaultDispatcher = (tr: Transaction): void => {
+    this.onTransaction(tr);
+  };
 
-  initialSelection!: { start: number, end: number, focused: boolean };
+  dispatcher = this.defaultDispatcher;
 
-  constructor(themeStore: ThemeStore) {
+  constructor(initialValue: string, themeStore: ThemeStore) {
     this.themeStore = themeStore;
-    this.atom = createAtom('EditorStore');
-    this.resetInitialSelection();
+    this.state = EditorState.create({
+      doc: initialValue,
+      extensions: [
+        autocompletion(),
+        classHighlightStyle.extension,
+        closeBrackets(),
+        bracketMatching(),
+        drawSelection(),
+        EditorState.allowMultipleSelections.of(true),
+        EditorView.theme({}, {
+          dark: this.themeStore.darkMode,
+        }),
+        highlightActiveLine(),
+        highlightActiveLineGutter(),
+        highlightSpecialChars(),
+        history(),
+        indentOnInput(),
+        rectangularSelection(),
+        searchConfig({
+          top: true,
+          matchCase: true,
+        }),
+        // 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,
+        ]),
+      ],
+    });
+    reaction(
+      () => this.themeStore.darkMode,
+      (darkMode) => {
+        log.debug('Update editor dark mode', darkMode);
+        this.dispatch({
+          effects: [
+            StateEffect.appendConfig.of(EditorView.theme({}, {
+              dark: darkMode,
+            })),
+          ],
+        });
+      },
+    );
     makeAutoObservable(this, {
       themeStore: false,
-      atom: false,
-      chunk: observable.ref,
-      editor: observable.ref,
-      xtextServices: observable.ref,
-      initialSelection: false,
+      state: observable.ref,
+      defaultDispatcher: false,
+      dispatcher: false,
     });
-    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);
-    });
+  updateDispatcher(newDispatcher: ((tr: Transaction) => void) | null): void {
+    this.dispatcher = newDispatcher || this.defaultDispatcher;
   }
 
-  setInitialSelection(start: number, end: number, focused: boolean): void {
-    this.initialSelection = { start, end, focused };
-    this.applyInitialSelectionToEditor();
+  onTransaction(tr: Transaction): void {
+    log.trace('Editor transaction', tr);
+    this.state = tr.state;
   }
 
-  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();
-      }
-      this.resetInitialSelection();
-    }
+  doStateCommand(command: StateCommand): boolean {
+    return command({
+      state: this.state,
+      dispatch: this.dispatcher,
+    });
   }
 
   /**
-   * 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
+   * @returns `true` if there is history to undo
    */
-  editorDidMount(newEditor: Editor): void {
-    if (!this.chunk) {
-      throw new Error('Editor not loaded yet');
-    }
-    if (this.editor) {
-      throw new Error('CoreMirror editor mounted before unmounting');
-    }
-    this.editor = newEditor;
-    this.xtextServices = this.chunk.createServices(newEditor, xtextOptions);
-    this.applyInitialSelectionToEditor();
+  get canUndo(): boolean {
+    return undoDepth(this.state) > 0;
   }
 
-  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;
+  // eslint-disable-next-line class-methods-use-this
+  undo(): void {
+    log.debug('Undo', this.doStateCommand(undo));
   }
 
   /**
-   * Updates the contents of the editor.
-   *
-   * @param newValue The new contents of the editor
+   * @returns `true` if there is history to redo
    */
-  updateValue(newValue: string): void {
-    this.value = newValue;
-  }
-
-  reportChanged(): void {
-    this.atom.reportChanged();
-  }
-
-  protected observeEditorChanges(): void {
-    this.atom.reportObserved();
+  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;
+    this.showLintPanel = newShowLintPanel;
+    log.debug('Show lint panel', this.showLintPanel);
+    return true;
   }
 
-  redo(): void {
-    this.editor?.redo();
-  }
-
-  toggleLineNumbers(): void {
-    this.showLineNumbers = !this.showLineNumbers;
+  toggleLintPanel(): void {
+    this.setLintPanelOpen(!this.showLintPanel);
   }
 }
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/index.tsx b/language-web/src/main/js/index.tsx
index 80c70f23..66ad1f28 100644
--- a/language-web/src/main/js/index.tsx
+++ b/language-web/src/main/js/index.tsx
@@ -44,8 +44,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/theme/ThemeStore.ts b/language-web/src/main/js/theme/ThemeStore.ts
index 3bbea3a1..db94d9f7 100644
--- a/language-web/src/main/js/theme/ThemeStore.ts
+++ b/language-web/src/main/js/theme/ThemeStore.ts
@@ -51,6 +51,10 @@ export class ThemeStore {
     return responsiveFontSizes(materialUiTheme);
   }
 
+  get darkMode(): boolean {
+    return this.currentThemeData.paletteMode === 'dark';
+  }
+
   get className(): string {
     return this.currentThemeData.className;
   }