Merge pull request #161 from PSDTools/loro

Use Loro

Author: lishaduck

apps/petal-notes/package.json

@@ -34,7 +34,12 @@
     "@lezer/markdown": "catalog:",
     "codemirror": "catalog:",
     "hypermd": "catalog:",
-    "svelte-codemirror-editor": "catalog:"
+    "loro-codemirror": "catalog:",
+    "loro-crdt": "catalog:",
+    "svelte-codemirror-editor": "catalog:",
+    "uint8array-extras": "catalog:",
+    "vite-plugin-top-level-await": "catalog:",
+    "vite-plugin-wasm": "catalog:"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "catalog:",

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

@@ -5,39 +5,54 @@
     closeBracketsKeymap,
     completionKeymap,
   } from "@codemirror/autocomplete";
-  import { indentWithTab } from "@codemirror/commands";
+  import { defaultKeymap, indentWithTab } from "@codemirror/commands";
   import { markdown } from "@codemirror/lang-markdown";
   import {
     bracketMatching,
+    defaultHighlightStyle,
     foldKeymap,
     indentOnInput,
+    syntaxHighlighting,
     syntaxTree,
   } from "@codemirror/language";
   import { languages } from "@codemirror/language-data";
   import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
   import { EditorState } from "@codemirror/state";
   import {
     crosshairCursor,
+    drawSelection,
     dropCursor,
     EditorView,
     highlightActiveLine,
+    highlightSpecialChars,
     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 { LoroExtensions } from "loro-codemirror";
+  import { Awareness, type LoroDoc, UndoManager } from "loro-crdt";
   import CodeMirror from "svelte-codemirror-editor";
+  import { uint8ArrayToBase64 } from "uint8array-extras";
 
   export interface Props {
-    value: string;
+    doc: LoroDoc;
   }
 
-  let { value = $bindable() }: Props = $props();
+  let { doc }: Props = $props();
+
+  const awareness: Awareness = new Awareness(doc.peerIdStr);
+  const undoManager = new UndoManager(doc, {});
 
   const extensions = [
-    minimalSetup,
+    // minimalSetup,
+
+    highlightSpecialChars(),
+    drawSelection(),
+    syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+    keymap.of([...defaultKeymap]),
+
     dropCursor(),
     EditorState.allowMultipleSelections.of(true),
     indentOnInput(),
@@ -49,6 +64,15 @@
     highlightActiveLine(),
     highlightSelectionMatches(),
 
+    LoroExtensions(
+      doc,
+      {
+        awareness,
+        user: { colorClassName: "user1", name: "User 1" },
+      },
+      undoManager,
+    ),
+
     EditorView.lineWrapping,
     hypermdExtensions,
     keymap.of([
@@ -69,6 +93,16 @@
             printTree(syntaxTree(view.state), view.state.doc.toString()),
           );
 
+          return true;
+        },
+      },
+      {
+        key: "Cmd-Shift-s",
+        run: () => {
+          if (import.meta.env.PROD) return true;
+
+          console.debug(uint8ArrayToBase64(doc.export({ mode: "snapshot" })));
+
           return true;
         },
       },
@@ -83,5 +117,6 @@
     codeLanguages: languages,
     extensions: [GFM, hypermdMarkdownExtensions],
   })}
-  bind:value
+  value={/* This sets it initially, but Loro handles further updates. */
+  doc.getText("codemirror").toString()}
 />

apps/petal-notes/src/routes/(wrapper)/notes/[...path]/+page.svelte

@@ -1,10 +1,19 @@
 <script lang="ts">
   import HyperMDC from "$lib/hypermd.svelte";
+  import { LoroDoc } from "loro-crdt";
+  import { base64ToUint8Array } from "uint8array-extras";
 
   let { data } = $props();
+
+  const doc = new LoroDoc();
+  doc.import(
+    base64ToUint8Array(
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      data.note,
+    ),
+  );
 </script>
 
 <div class="overflow-hidden">
-  <!-- eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -->
-  <HyperMDC value={data.note} />
+  <HyperMDC {doc} />
 </div>

apps/petal-notes/src/routes/(wrapper)/notes/[...path]/+page.ts

@@ -9,34 +9,7 @@ interface Data {
 const notes = new Map<string, string>([
   [
     "1",
-    `---
-title: Hello, HyperMD!
----
-# Your ~~HyperMD editor~~ Logo is here :gift:
-
-Can’t figure out how to make it smaller, but it's here!
-
-![Logo](/PetalNotes-logo.svg)
-
--------------------
-
-All ~~builtin~~ features are ready to go 🤘
-Try out these methods!
-
-1. \`HyperMD.switchToNormal(cm)\`
-2. \`HyperMD.switchToHyperMD(cm)\`
-3. \`cm.getValue()\` returns the Markdown source text
-
-**Note**: This demo uses these powerpacks:
-
-1. **fold-math-with-katex** uses _$K^{a}T_{e}X$_, the math typesetting library.
-2. **hover-with-marked** uses _marked_ to render footnotes[^1].
-
-[^1]: Like this one!
-
-[hypermd-doc]: <https://laobubu.net/HyperMD/docs/> HyperMD documentation
-[cm-manual]: <https://codemirror.net/doc/manual.html> CodeMirror User manual
-`,
+    "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",
   ],
 ]);
 

apps/petal-notes/vite.config.ts

@@ -6,6 +6,8 @@ import browserslistToEsbuild from "browserslist-to-esbuild";
 import { browserslistToTargets } from "lightningcss";
 import * as path from "node:path";
 import process from "node:process";
+import topLevelAwait from "vite-plugin-top-level-await";
+import wasm from "vite-plugin-wasm";
 import {
   coverageConfigDefaults,
   defaultExclude,
@@ -16,7 +18,7 @@ const browsersList = browserslist();
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [sveltekit(), tailwindcss()],
+  plugins: [sveltekit(), tailwindcss(), wasm(), topLevelAwait()],
 
   build: {
     cssMinify: "lightningcss",