Add material-ui and mobx integration

3 files changed, 152 insertions, 0 deletions

diff --git a/language-web/src/main/js/editor/Editor.jsx b/language-web/src/main/js/editor/Editor.jsx
new file mode 100644
index 00000000..c4b2e183
--- /dev/null
+++ b/language-web/src/main/js/editor/Editor.jsx
@@ -0,0 +1,50 @@
+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,
+  };
+
+  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/EditorButtons.jsx b/language-web/src/main/js/editor/EditorButtons.jsx
new file mode 100644
index 00000000..b9f0d076
--- /dev/null
+++ b/language-web/src/main/js/editor/EditorButtons.jsx
@@ -0,0 +1,27 @@
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import IconButton from '@material-ui/core/IconButton';
+import RedoIcon from '@material-ui/icons/Redo';
+import UndoIcon from '@material-ui/icons/Undo';
+
+import { useRootStore } from '../RootStore';
+
+export default observer(() => {
+  const editorStore = useRootStore().editorStore;
+  return (
+    <>
+      <IconButton
+        disabled={!editorStore.canUndo}
+        onClick={() => editorStore.undo()}
+      >
+        <UndoIcon fontSize='small'/>
+      </IconButton>
+      <IconButton
+        disabled={!editorStore.canRedo}
+        onClick={() => editorStore.redo()}
+      >
+        <RedoIcon fontSize='small'/>
+      </IconButton>
+    </>
+  );
+});
diff --git a/language-web/src/main/js/editor/EditorStore.jsx b/language-web/src/main/js/editor/EditorStore.jsx
new file mode 100644
index 00000000..9c286c28
--- /dev/null
+++ b/language-web/src/main/js/editor/EditorStore.jsx
@@ -0,0 +1,75 @@
+import CodeMirror from 'codemirror';
+import { createAtom, makeAutoObservable, observable } from 'mobx';
+
+export default class EditorStore {
+  atom;
+  /** @type {CodeMirror} */
+  editor = null;
+  /** @type {string} */
+  value = '';
+
+  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();
+  }
+}