11 files changed, 196 insertions, 182 deletions

diff --git a/language-web/src/main/js/App.jsx b/language-web/src/main/js/App.tsx
index 5bd46c09..5bd46c09 100644
--- a/language-web/src/main/js/App.jsx
+++ b/language-web/src/main/js/App.tsx
diff --git a/language-web/src/main/js/Navbar.jsx b/language-web/src/main/js/Navbar.jsx
deleted file mode 100644
index cf1bc54f..00000000
--- a/language-web/src/main/js/Navbar.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import { Button, Navbar, Nav } from 'react-bootstrap';
-import { FaGithub, FaPlayCircle } from 'react-icons/fa';
-
-export default () => (
-  <Navbar
-    variant='secondary'
-    className='px-2'
-  >
-    <Navbar.Brand>GraphSolver</Navbar.Brand>
-    <Navbar.Toggle aria-controls='basic-navbar-nav'/>
-    <Navbar.Collapse id='basic-navbar-nav'>
-      <Nav className="me-auto">
-        <Nav.Link
-          href="https://github.com/viatra/VIATRA-Generator#readme"
-        >
-          About
-        </Nav.Link>
-        <Nav.Link
-          href="https://github.com/viatra/VIATRA-Generator/wiki"
-        >
-          Getting started
-        </Nav.Link>
-        <Nav.Link
-          href="https://github.com/viatra/VIATRA-Generator"
-        >
-          <FaGithub/> Github
-        </Nav.Link>
-      </Nav>
-      <Button
-        variant='success'
-      >
-        <FaPlayCircle/> Generate
-      </Button>
-    </Navbar.Collapse>
-  </Navbar>
-);
diff --git a/language-web/src/main/js/RootStore.jsx b/language-web/src/main/js/RootStore.tsx
index a437fdd0..2159f440 100644
--- a/language-web/src/main/js/RootStore.jsx
+++ b/language-web/src/main/js/RootStore.tsx
@@ -1,3 +1,4 @@
+
 import React, { createContext, useContext } from 'react';
 
 import EditorStore from './editor/EditorStore';
@@ -10,15 +11,14 @@ export default class RootStore {
   }
 }
 
-const StoreContext = createContext(undefined);
+const StoreContext = createContext<RootStore | undefined>(undefined);
 
-export const RootStoreProvider = ({ children, rootStore }) => (
+export const RootStoreProvider: React.FC<{ rootStore: RootStore }> = ({ children, rootStore }) => (
   <StoreContext.Provider value={rootStore}>
     {children}
   </StoreContext.Provider>
 );
 
-/** @returns {RootStore} */
 export const useRootStore = () => {
   const rootStore = useContext(StoreContext);
   if (!rootStore) {
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;
+  }
+}
diff --git a/language-web/src/main/js/index.jsx b/language-web/src/main/js/index.tsx
index d73ffcdd..f59b40a9 100644
--- a/language-web/src/main/js/index.jsx
+++ b/language-web/src/main/js/index.tsx
@@ -1,11 +1,11 @@
 import { CacheProvider } from "@emotion/react";
 import React from 'react';
 import { render } from 'react-dom';
+import CssBaseline from '@material-ui/core/CssBaseline';
 import { ThemeProvider, createTheme } from '@material-ui/core/styles';
 import { getCache } from "tss-react/cache";
 
 import App from './App';
-import CssBaseline from '@material-ui/core/CssBaseline';
 import RootStore, { RootStoreProvider } from './RootStore';
 
 import '../css/index.scss';
@@ -74,6 +74,6 @@ const app = (
       </RootStoreProvider>
     </ThemeProvider>
   </CacheProvider>
-)
+);
 
 render(app, document.getElementById('app'));
diff --git a/language-web/src/main/js/makeStyles.js b/language-web/src/main/js/makeStyles.ts
index 1dee6c1f..1dee6c1f 100644
--- a/language-web/src/main/js/makeStyles.js
+++ b/language-web/src/main/js/makeStyles.ts
diff --git a/language-web/src/main/js/xtext/xtext-codemirror.d.ts b/language-web/src/main/js/xtext/xtext-codemirror.d.ts
new file mode 100644
index 00000000..fff850b8
--- /dev/null
+++ b/language-web/src/main/js/xtext/xtext-codemirror.d.ts
@@ -0,0 +1,43 @@
+import { Editor } from 'codemirror';
+
+export function createEditor(options: IXtextOptions): IXtextCodeMirrorEditor;
+
+export function createServices(editor: Editor, options: IXtextOptions): IXtextServices;
+
+export function removeServices(editor: Editor): void;
+
+export interface IXtextOptions {
+  baseUrl?: string;
+  contentType?: string;
+  dirtyElement?: string | Element;
+  dirtyStatusClass?: string;
+  document?: Document;
+  enableContentAssistService?: boolean;
+  enableCors?: boolean;
+  enableFormattingAction?: boolean;
+  enableFormattingService?: boolean;
+  enableGeneratorService?: boolean;
+  enableHighlightingService?: boolean;
+  enableOccurrencesService?: boolean;
+  enableSaveAction?: boolean;
+  enableValidationService?: boolean;
+  loadFromServer?: boolean;
+  mode?: string;
+  parent?: string | Element;
+  parentClass?: string;
+  resourceId?: string;
+  selectionUpdateDelay?: number;
+  sendFullText?: boolean;
+  serviceUrl?: string;
+  showErrorDialogs?: boolean;
+  syntaxDefinition?: string;
+  textUpdateDelay?: number;
+  xtextLang?: string;
+}
+
+export interface IXtextCodeMirrorEditor extends Editor {
+  xtextServices: IXtextServices;
+}
+
+export interface IXtextServices {
+}