1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
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}
/>
);
});
|
