language-web/src/main/js/components/XtextCodeMirror.jsx


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

import React, { useCallback, useState } from 'react';
import { Controlled as CodeMirror } from 'react-codemirror2';
import 'mode-problem';
import { createServices, removeServices } from 'xtext/xtext-codemirror';

export default function XtextCodeMirror({ initialValue }) {
  const [value, setValue] = useState(initialValue);

  const codeMirrorOptions = {
    mode: 'xtext/problem',
    indentUnit: 2,
  };

  const xtextOptions = {
    xtextLang: 'problem',
    enableFormattingAction: true,
  };

  const onBeforeChange = useCallback((_editor, _data, newValue) => {
    setValue(newValue);
  }, [setValue]);

  return (
    <CodeMirror
      value={value}
      options={codeMirrorOptions}
      editorDidMount={editor => createServices(editor, xtextOptions)}
      editorWillUnmount={removeServices}
      onBeforeChange={onBeforeChange}
    />
  );
};