feat: Libraries v2: Advanced Component Info & OLX Editor (#1346)

src/generic/CodeEditor.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { basicSetup, EditorView } from 'codemirror';
+import { EditorState, Compartment } from '@codemirror/state';
+import { xml } from '@codemirror/lang-xml';
+
+export type EditorAccessor = EditorView;
+
+interface Props {
+  readOnly?: boolean;
+  children?: string;
+  editorRef?: React.MutableRefObject<EditorAccessor | undefined>;
+}
+
+export const CodeEditor: React.FC<Props> = ({
+  readOnly = false,
+  children = '',
+  editorRef,
+}) => {
+  const divRef = React.useRef<HTMLDivElement>(null);
+  const language = React.useMemo(() => new Compartment(), []);
+  const tabSize = React.useMemo(() => new Compartment(), []);
+
+  React.useEffect(() => {
+    if (!divRef.current) { return; }
+    const state = EditorState.create({
+      doc: children,
+      extensions: [
+        basicSetup,
+        language.of(xml()),
+        tabSize.of(EditorState.tabSize.of(2)),
+        EditorState.readOnly.of(readOnly),
+      ],
+    });
+
+    const view = new EditorView({
+      state,
+      parent: divRef.current,
+    });
+    if (editorRef) {
+      // eslint-disable-next-line no-param-reassign
+      editorRef.current = view;
+    }
+    // eslint-disable-next-line consistent-return
+    return () => {
+      if (editorRef) {
+        // eslint-disable-next-line no-param-reassign
+        editorRef.current = undefined;
+      }
+      view.destroy(); // Clean up
+    };
+  }, [divRef.current, readOnly, editorRef]);
+
+  return <div ref={divRef} />;
+};