Covert language-web to TypeScript

5 files changed, 148 insertions, 140 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 4cd9b3bd..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-react-17';
-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..f81c5c37
--- /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 default 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 a5a57f93..1a187635 100644
--- a/language-web/src/main/js/editor/EditorButtons.jsx
+++ b/language-web/src/main/js/editor/EditorButtons.tsx
@@ -29,7 +29,7 @@ const useStyles = makeStyles()(theme => ({
 }));
 
 export default observer(() => {
-  const editorStore = useRootStore().editorStore;
+  const { editorStore } = useRootStore();
   const { classes, cx } = useStyles();
   return (
     <>
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..167e1ade
--- /dev/null
+++ b/language-web/src/main/js/editor/EditorStore.ts
@@ -0,0 +1,127 @@
+import { Editor, EditorConfiguration } from 'codemirror';
+import {
+  createAtom,
+  makeAutoObservable,
+  observable,
+} from 'mobx';
+import 'mode-problem';
+import {
+  IXtextOptions,
+  IXtextServices,
+  createServices,
+  removeServices,
+} from 'xtext/xtext-codemirror';
+
+const xtextLang = 'problem';
+
+const xtextOptions: IXtextOptions = {
+  xtextLang,
+  enableFormattingAction: true,
+};
+
+const codeMirrorGlobalOptions: EditorConfiguration = {
+  mode: `xtext/${xtextLang}`,
+  indentUnit: 2,
+  theme: 'material-darker',
+};
+
+export default class EditorStore {
+  _atom;
+  editor?: Editor;
+  xtextServices?: IXtextServices;
+  value = '';
+  showLineNumbers = false;
+
+  constructor() {
+    this._atom = createAtom('EditorStore');
+    makeAutoObservable(this, {
+      _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) {
+    if (this.editor) {
+      throw new Error('CoreMirror editor mounted before unmounting');
+    }
+    this.editor = newEditor;
+    this.xtextServices = createServices(newEditor, xtextOptions);
+  }
+
+  editorWillUnmount() {
+    if (this.editor) {
+      removeServices(this.editor);
+    }
+    this.editor = undefined;
+    this.xtextServices = undefined;
+  }
+
+  /**
+   * Updates the contents of the editor.
+   *
+   * @param newValue The new contents of the editor
+   */
+  updateValue(newValue: string) {
+    this.value = newValue;
+  }
+
+  reportChanged() {
+    this._atom.reportChanged();
+  }
+
+  _observeEditorChanges() {
+    this._atom.reportObserved();
+  }
+
+  get codeMirrorOptions(): EditorConfiguration {
+    return {
+      ...codeMirrorGlobalOptions,
+      lineNumbers: this.showLineNumbers,
+    };
+  }
+
+  /**
+   * @returns `true` if there is history to undo
+   */
+  get canUndo() {
+    this._observeEditorChanges();
+    if (!this.editor) {
+      return false;
+    }
+    const { undo: undoSize } = this.editor.historySize();
+    return undoSize > 0;
+  }
+
+  undo() {
+    this.editor?.undo();
+  }
+
+  /**
+   * @returns `true` if there is history to redo
+   */
+  get canRedo() {
+    this._observeEditorChanges();
+    if (!this.editor) {
+      return false;
+    }
+    const { redo: redoSize } = this.editor.historySize();
+    return redoSize > 0;
+  }
+
+  redo() {
+    this.editor?.redo();
+  }
+
+  toggleLineNumbers() {
+    this.showLineNumbers = !this.showLineNumbers;
+  }
+}