5 files changed, 186 insertions, 160 deletions

diff --git a/language-web/src/main/js/editor/Editor.jsx b/language-web/src/main/js/editor/Editor.jsx
deleted file mode 100644
index 98cf2715..00000000
--- a/language-web/src/main/js/editor/Editor.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { observer } from 'mobx-react-lite';
-import 'mode-problem';
-import React, { useCallback } from 'react';
-import { Controlled as CodeMirror } from 'react-codemirror2';
-import { createServices, removeServices } from 'xtext/xtext-codemirror';
-
-import { useRootStore } from '../RootStore';
-
-export default observer(() => {
-  const editorStore = useRootStore().editorStore;
-
-  const codeMirrorOptions = {
-    mode: 'xtext/problem',
-    indentUnit: 2,
-    theme: 'material-darker',
-    lineNumbers: editorStore.showLineNumbers,
-  };
-
-  const xtextOptions = {
-    xtextLang: 'problem',
-    enableFormattingAction: true,
-  }
-
-  const editorDidMount = useCallback((editor) => {
-    createServices(editor, xtextOptions);
-    editorStore.updateEditor(editor);
-  }, [editorStore]);
-
-  const editorWillUnmount = useCallback((editor) => {
-    editorStore.editor = null;
-    removeServices(editor);
-  }, [editorStore]);
-
-  const onBeforeChange = useCallback((_editor, _data, value) => {
-    editorStore.updateValue(value);
-  }, [editorStore]);
-
-  const onChange = useCallback((_editor, _data, _value) => {
-    editorStore.reportChanged();
-  }, [editorStore]);
-
-  return (
-    <CodeMirror
-      value={editorStore.value}
-      options={codeMirrorOptions}
-      editorDidMount={editorDidMount}
-      editorWillUnmount={editorWillUnmount}
-      onBeforeChange={onBeforeChange}
-      onChange={onChange}
-    />
-  );
-});
diff --git a/language-web/src/main/js/editor/Editor.tsx b/language-web/src/main/js/editor/Editor.tsx
new file mode 100644
index 00000000..9badb6a3
--- /dev/null
+++ b/language-web/src/main/js/editor/Editor.tsx
@@ -0,0 +1,20 @@
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import { Controlled as CodeMirror } from 'react-codemirror2';
+
+import { useRootStore } from '../RootStore';
+
+export const Editor = observer(() => {
+  const { editorStore } = useRootStore();
+
+  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()}
+    />
+  );
+});
diff --git a/language-web/src/main/js/editor/EditorButtons.jsx b/language-web/src/main/js/editor/EditorButtons.tsx
index f67afdbf..d3825c07 100644
--- a/language-web/src/main/js/editor/EditorButtons.jsx
+++ b/language-web/src/main/js/editor/EditorButtons.tsx
@@ -1,69 +1,75 @@
 import { observer } from 'mobx-react-lite';
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import ButtonGroup from '@material-ui/core/ButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
 import Divider from '@material-ui/core/Divider';
 import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered';
 import RedoIcon from '@material-ui/icons/Redo';
 import UndoIcon from '@material-ui/icons/Undo';
-import ToggleButton from '@material-ui/lab/ToggleButton';
 
+import { makeStyles } from '../makeStyles';
 import { useRootStore } from '../RootStore';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()((theme) => ({
   iconButton: {
     padding: 7,
-    minWidth: 36,
     border: 0,
     color: theme.palette.text.primary,
-    '&.MuiButtonGroup-groupedTextHorizontal': {
+    '&, &.MuiButtonGroup-grouped': {
+      minWidth: 36,
+    },
+    '&.MuiButtonGroup-grouped:not(:last-of-type)': {
       borderRight: 0,
     },
   },
   divider: {
     margin: theme.spacing(0.5),
-  }
+  },
 }));
 
-export default observer(() => {
-  const editorStore = useRootStore().editorStore;
-  const classes = useStyles();
+export const EditorButtons = observer(() => {
+  const { editorStore } = useRootStore();
+  const { classes, cx } = useStyles();
+
   return (
     <>
       <ButtonGroup
-        variant='text'
+        variant="text"
       >
         <Button
           disabled={!editorStore.canUndo}
           onClick={() => editorStore.undo()}
-          className={classes.iconButton}
-          aria-label='Undo'
+          className={cx(classes.iconButton)}
+          color="inherit"
+          aria-label="Undo"
         >
-          <UndoIcon fontSize='small'/>
+          <UndoIcon fontSize="small" />
         </Button>
         <Button
           disabled={!editorStore.canRedo}
           onClick={() => editorStore.redo()}
-          className={classes.iconButton}
-          aria-label='Redo'
+          className={cx(classes.iconButton)}
+          color="inherit"
+          aria-label="Redo"
         >
-          <RedoIcon fontSize='small'/>
+          <RedoIcon fontSize="small" />
         </Button>
       </ButtonGroup>
       <Divider
         flexItem
-        orientation='vertical'
+        orientation="vertical"
         className={classes.divider}
       />
       <ToggleButton
         selected={editorStore.showLineNumbers}
         onChange={() => editorStore.toggleLineNumbers()}
-        size='small'
-        className={classes.iconButton}
-        aria-label='Show line numbers'
+        size="small"
+        className={cx(classes.iconButton)}
+        aria-label="Show line numbers"
+        value="show-line-numbers"
       >
-        <FormatListNumberedIcon fontSize='small'/>
+        <FormatListNumberedIcon fontSize="small" />
       </ToggleButton>
     </>
   );
diff --git a/language-web/src/main/js/editor/EditorStore.jsx b/language-web/src/main/js/editor/EditorStore.jsx
deleted file mode 100644
index b6f9bc0a..00000000
--- a/language-web/src/main/js/editor/EditorStore.jsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import CodeMirror from 'codemirror';
-import { createAtom, makeAutoObservable, observable } from 'mobx';
-
-export default class EditorStore {
-  atom;
-  /** @type {CodeMirror} */
-  editor = null;
-  /** @type {string} */
-  value = '';
-  /** @type {boolean} */
-  showLineNumbers = false;
-  /** @type {boolean} */
-  showLigatures = true;
-
-  constructor() {
-    this.atom = createAtom('EditorStore');
-    makeAutoObservable(this, {
-      atom: false,
-      editor: observable.ref,
-    });
-  }
-
-  /**
-   * Attaches a new CodeMirror instance.
-   *
-   * The store will node subscribe to any CodeMirror events. Instead,
-   * the editor component should subscribe to them and relay them to the store.
-   *
-   * @param {CodeMirror} newEditor The new CodeMirror instance
-   */
-  updateEditor(newEditor) {
-    this.editor = newEditor;
-  }
-
-  /**
-   * Updates the contents of the editor.
-   *
-   * @param {string} newValue The new contents of the editor
-   */
-  updateValue(newValue) {
-    this.value = newValue;
-  }
-
-  reportChanged() {
-    this.atom.reportChanged();
-  }
-
-  /**
-   * @returns {boolean} `true` if there is history to undo
-   */
-  get canUndo() {
-    this.atom.reportObserved();
-    if (!this.editor) {
-      return false;
-    }
-    const { undo: undoSize } = this.editor.historySize();
-    return undoSize > 0;
-  }
-
-  undo() {
-    this.editor.undo();
-  }
-
-  /**
-   * @returns {boolean} `true` if there is history to redo
-   */
-  get canRedo() {
-    this.atom.reportObserved();
-    if (!this.editor) {
-      return false;
-    }
-    const { redo: redoSize } = this.editor.historySize();
-    return redoSize > 0;
-  }
-
-  redo() {
-    this.editor.redo();
-  }
-
-  toggleLineNumbers() {
-    this.showLineNumbers = !this.showLineNumbers;
-  }
-
-  toggleLigatures() {
-    this.showLigatures = !this.showLigatures;
-  }
-}
diff --git a/language-web/src/main/js/editor/EditorStore.ts b/language-web/src/main/js/editor/EditorStore.ts
new file mode 100644
index 00000000..5da45ac1
--- /dev/null
+++ b/language-web/src/main/js/editor/EditorStore.ts
@@ -0,0 +1,139 @@
+import { Editor, EditorConfiguration } from 'codemirror';
+import 'codemirror/addon/selection/active-line';
+import {
+  createAtom,
+  makeAutoObservable,
+  observable,
+} from 'mobx';
+import 'mode-problem';
+import {
+  IXtextOptions,
+  IXtextServices,
+  createServices,
+  removeServices,
+} from 'xtext/xtext-codemirror';
+
+import { ThemeStore } from '../theme/ThemeStore';
+
+const xtextLang = 'problem';
+
+const xtextOptions: IXtextOptions = {
+  xtextLang,
+  enableFormattingAction: true,
+};
+
+const codeMirrorGlobalOptions: EditorConfiguration = {
+  mode: `xtext/${xtextLang}`,
+  indentUnit: 2,
+  styleActiveLine: true,
+};
+
+export class EditorStore {
+  themeStore;
+
+  atom;
+
+  editor?: Editor;
+
+  xtextServices?: IXtextServices;
+
+  value = '';
+
+  showLineNumbers = false;
+
+  constructor(themeStore: ThemeStore) {
+    this.themeStore = themeStore;
+    this.atom = createAtom('EditorStore');
+    makeAutoObservable(this, {
+      themeStore: false,
+      atom: false,
+      editor: observable.ref,
+      xtextServices: observable.ref,
+    });
+  }
+
+  /**
+   * 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.editor) {
+      throw new Error('CoreMirror editor mounted before unmounting');
+    }
+    this.editor = newEditor;
+    this.xtextServices = createServices(newEditor, xtextOptions);
+  }
+
+  editorWillUnmount(): void {
+    if (this.editor) {
+      removeServices(this.editor);
+    }
+    delete this.editor;
+    delete this.xtextServices;
+  }
+
+  /**
+   * Updates the contents of the editor.
+   *
+   * @param newValue The new contents of the editor
+   */
+  updateValue(newValue: string): void {
+    this.value = newValue;
+  }
+
+  reportChanged(): void {
+    this.atom.reportChanged();
+  }
+
+  protected observeEditorChanges(): void {
+    this.atom.reportObserved();
+  }
+
+  get codeMirrorOptions(): EditorConfiguration {
+    return {
+      ...codeMirrorGlobalOptions,
+      theme: this.themeStore.codeMirrorTheme,
+      lineNumbers: this.showLineNumbers,
+    };
+  }
+
+  /**
+   * @returns `true` if there is history to undo
+   */
+  get canUndo(): boolean {
+    this.observeEditorChanges();
+    if (!this.editor) {
+      return false;
+    }
+    const { undo: undoSize } = this.editor.historySize();
+    return undoSize > 0;
+  }
+
+  undo(): void {
+    this.editor?.undo();
+  }
+
+  /**
+   * @returns `true` if there is history to redo
+   */
+  get canRedo(): boolean {
+    this.observeEditorChanges();
+    if (!this.editor) {
+      return false;
+    }
+    const { redo: redoSize } = this.editor.historySize();
+    return redoSize > 0;
+  }
+
+  redo(): void {
+    this.editor?.redo();
+  }
+
+  toggleLineNumbers(): void {
+    this.showLineNumbers = !this.showLineNumbers;
+  }
+}