perf(web): split off CodeMirror chunks

Also optimizes statis asset caching.

1 files changed, 42 insertions, 0 deletions

diff --git a/language-web/src/main/js/editor/EditorArea.tsx b/language-web/src/main/js/editor/EditorArea.tsx
new file mode 100644
index 00000000..f07a0ad8
--- /dev/null
+++ b/language-web/src/main/js/editor/EditorArea.tsx
@@ -0,0 +1,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()}
+    />
+  );
+});