Merge pull request #160 from PSDTools/switch-to-svelte-codemirror-editor

Switch to `svelte-codemirror-editor`

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