language-web/src/main/js/editor/Editor.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

import { observer } from 'mobx-react-lite';
import React from 'react';
import { Controlled as CodeMirror } from 'react-codemirror2';

import { useRootStore } from '../RootStore';

export const Editor = 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()}
    />
  );
});