Covert language-web to TypeScript

1 files changed, 127 insertions, 0 deletions

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