1 files changed, 20 insertions, 0 deletions

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()}
+    />
+  );
+});