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


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

import { observer } from 'mobx-react-lite';
import React, { useRef } from 'react';

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

export const EditorArea = observer(() => {
  const { editorStore } = useRootStore();
  const { CodeMirror } = editorStore.chunk || {};
  const fallbackTextarea = useRef<HTMLTextAreaElement>(null);

  if (!CodeMirror) {
    return (
      <textarea
        value={editorStore.value}
        onChange={(e) => editorStore.updateValue(e.target.value)}
        ref={fallbackTextarea}
        className={`problem-fallback-editor cm-s-${editorStore.codeMirrorTheme}`}
      >
      </textarea>
    );
  }

  const textarea = fallbackTextarea.current;
  if (textarea) {
    editorStore.setInitialSelection(
      textarea.selectionStart,
      textarea.selectionEnd,
      document.activeElement === textarea,
    );
  }

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