refactor: switch to svelte-codemirror-editor

Also drop the dependency on codemirror, which just provides presets.

This restores the ability to programmatically set the value from Svelte.
You could only set the initial value before, but that's not very Svelte.

Author: lishaduck

apps/petal-notes/package.json

@@ -33,7 +33,8 @@
     "@lezer/highlight": "catalog:",
     "@lezer/markdown": "catalog:",
     "codemirror": "catalog:",
-    "hypermd": "catalog:"
+    "hypermd": "catalog:",
+    "svelte-codemirror-editor": "catalog:"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "catalog:",

apps/petal-notes/src/lib/hypermd.svelte

@@ -21,74 +21,67 @@
     dropCursor,
     EditorView,
     highlightActiveLine,
-    highlightActiveLineGutter,
     keymap,
     rectangularSelection,
   } from "@codemirror/view";
   import { printTree } from "@lezer-unofficial/printer";
   import { GFM } from "@lezer/markdown";
   import { minimalSetup } from "codemirror";
   import { hypermdExtensions, hypermdMarkdownExtensions } from "hypermd";
-  import { onMount } from "svelte";
+  import CodeMirror from "svelte-codemirror-editor";
 
   export interface Props {
     value: string;
   }
 
   let { value = $bindable() }: Props = $props();
 
-  let container: HTMLDivElement;
+  const extensions = [
+    minimalSetup,
+    dropCursor(),
+    EditorState.allowMultipleSelections.of(true),
+    indentOnInput(),
+    bracketMatching(),
+    closeBrackets(),
+    autocompletion(),
+    rectangularSelection(),
+    crosshairCursor(),
+    highlightActiveLine(),
+    highlightSelectionMatches(),
 
-  onMount(() => {
-    new EditorView({
-      doc: value,
-      extensions: [
-        minimalSetup,
+    EditorView.lineWrapping,
+    hypermdExtensions,
+    keymap.of([
+      ...closeBracketsKeymap,
+      ...searchKeymap,
+      ...foldKeymap,
+      ...completionKeymap,
 
-        highlightActiveLineGutter(),
-        dropCursor(),
-        EditorState.allowMultipleSelections.of(true),
-        indentOnInput(),
-        bracketMatching(),
-        closeBrackets(),
-        autocompletion(),
-        rectangularSelection(),
-        crosshairCursor(),
-        highlightActiveLine(),
-        highlightSelectionMatches(),
+      indentWithTab,
 
-        markdown({
-          codeLanguages: languages,
-          extensions: [GFM, hypermdMarkdownExtensions],
-        }),
-        EditorView.lineWrapping,
-        hypermdExtensions,
-        keymap.of([
-          ...closeBracketsKeymap,
-          ...searchKeymap,
-          ...foldKeymap,
-          ...completionKeymap,
+      // Debugging
+      {
+        key: "Alt-p",
+        run: (view) => {
+          if (import.meta.env.PROD) return true;
 
-          indentWithTab,
+          console.debug(
+            printTree(syntaxTree(view.state), view.state.doc.toString()),
+          );
 
-          // Debugging
-          {
-            key: "Alt-p",
-            run: (view) => {
-              if (import.meta.env.PROD) return true;
-
-              console.debug(
-                printTree(syntaxTree(view.state), view.state.doc.toString()),
-              );
-
-              return true;
-            },
-          },
-        ]),
-      ],
-      parent: container,
-    });
-  });
+          return true;
+        },
+      },
+    ]),
+  ];
 </script>
 
-<div bind:this={container}></div>
+<CodeMirror
+  basic={false}
+  {extensions}
+  lang={markdown({
+    codeLanguages: languages,
+    extensions: [GFM, hypermdMarkdownExtensions],
+  })}
+  bind:value
+/>

pnpm-lock.yaml

@@ -58,6 +58,7 @@ catalog:
   storybook: ^8.5.6
   svelte: ^5.20.1
   svelte-check: ^4.1.4
+  svelte-codemirror-editor: ^1.4.1
   svelte2tsx: ^0.7.34
   tailwindcss: ^4.0.6
   typed-query-selector: ^2.12.0