A bunch more small things

src-web/components/Editor/Editor.tsx

@@ -1,14 +1,42 @@
-import useCodeMirror from '../../hooks/useCodemirror';
 import './Editor.css';
+import { useEffect, useMemo, useRef } from 'react';
+import { EditorView } from 'codemirror';
+import { baseExtensions, syntaxExtension } from './extensions';
+import { EditorState } from '@codemirror/state';
 
 interface Props {
   contentType: string;
-  initialValue?: string;
-  value?: string;
+  defaultValue?: string | null;
   onChange?: (value: string) => void;
 }
 
-export default function Editor(props: Props) {
-  const { ref } = useCodeMirror(props);
+export default function Editor({ contentType, defaultValue, onChange }: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+  const extensions = useMemo(() => {
+    const ext = syntaxExtension(contentType);
+    return [
+      ...baseExtensions,
+      ...(ext ? [ext] : []),
+      EditorView.updateListener.of((update) => {
+        if (typeof onChange === 'function') {
+          onChange(update.state.doc.toString());
+        }
+      }),
+    ];
+  }, [contentType]);
+
+  useEffect(() => {
+    if (ref.current === null) return;
+
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: defaultValue ?? '',
+        extensions: extensions,
+      }),
+      parent: ref.current,
+    });
+    return () => view?.destroy();
+  }, [ref.current]);
+
   return <div ref={ref} className="cm-wrapper" />;
 }