wip

Author: lishaduck

package.json

@@ -90,8 +90,8 @@
     "daisyui": "5.5.5",
     "dotenv": "^17.2.3",
     "effect": "^3.19.6",
-    "fast-diff": "^1.3.0",
     "katex": "^0.16.25",
+    "loro-codemirror": "^0.3.3",
     "loro-crdt": "^1.10.0",
     "svelte": "^5.44.0",
     "tiptap-markdown": "^0.9.0",

pnpm-lock.yaml

@@ -1,30 +1,23 @@
 <script lang="ts">
   import { browser } from "$app/environment";
-  import type { Extension, Text } from "@codemirror/state";
+  import type { Extension } from "@codemirror/state";
   import { EditorView } from "@codemirror/view";
   import { onMount, onDestroy } from "svelte";
   import type { ClassValue } from "svelte/elements";
 
   interface Props {
-    doc: string | Text;
     extensions: Extension | undefined;
     class?: ClassValue;
     editorView: EditorView;
   }
 
-  let {
-    doc,
-    extensions = [],
-    editorView = $bindable(),
-    ...props
-  }: Props = $props();
+  let { extensions = [], editorView = $bindable(), ...props }: Props = $props();
 
   let editorElement: HTMLElement;
 
   onMount(() => {
     // Initialize CodeMirror
     editorView = new EditorView({
-      doc,
       parent: editorElement,
       extensions: extensions,
     });

src/lib/components/codemirror/Codemirror.svelte

@@ -14,6 +14,7 @@
     ListOrdered,
     Strikethrough,
   } from "@lucide/svelte";
+  import { LoroExtensions } from "loro-codemirror";
   import Codemirror from "./Codemirror.svelte";
   import {
     coreExtensions,
@@ -31,14 +32,14 @@
   import Toolbar from "./Toolbar.svelte";
   import { wikilinksExtension } from "$lib/editor/wikilinks.ts";
   import type { NoteOrFolder } from "$lib/schema.ts";
+  import type { LoroNoteManager } from "$lib/loro.ts";
 
   interface Props {
-    content: string;
-    onchange: (newContent: string) => void;
+    manager: LoroNoteManager | undefined;
     notesList?: NoteOrFolder[];
   }
 
-  let { content, onchange, notesList = [] }: Props = $props();
+  let { manager, notesList = [] }: Props = $props();
 
   // svelte-ignore non_reactive_update
   let editorView: EditorView;
@@ -101,34 +102,10 @@
   const extensions = [
     coreExtensions,
     wikilinksExtension(notesList),
-    // Update listener
-    EditorView.updateListener.of((update) => {
-      if (update.docChanged) {
-        const newContent = update.state.doc.toString();
-        console.debug(
-          "[Prosemark] Content updated. Preview:",
-          newContent.slice(0, 50),
-        );
-        onchange(newContent);
-      }
-    }),
+    manager !== undefined ? LoroExtensions(manager.doc) : [],
     editorTheme,
   ];
 
-  // Update content if it changes externally (from Loro)
-  $effect(() => {
-    if (content !== editorView.state.doc.toString()) {
-      console.debug("[Prosemark] External content update");
-      editorView.dispatch({
-        changes: {
-          from: 0,
-          to: editorView.state.doc.length,
-          insert: content,
-        },
-      });
-    }
-  });
-
   const tools = [
     [
       {
@@ -196,10 +173,5 @@
 <div class="flex h-full flex-col">
   <Toolbar {tools} />
 
-  <Codemirror
-    bind:editorView
-    doc={content}
-    {extensions}
-    class="flex-1 overflow-y-auto"
-  />
+  <Codemirror bind:editorView {extensions} class="flex-1 overflow-y-auto" />
 </div>

src/lib/components/codemirror/Editor.svelte

@@ -12,7 +12,6 @@ import {
   Schema,
   Stream,
 } from "effect";
-import diff from "fast-diff";
 import { LoroDoc, LoroText, type Frontiers } from "loro-crdt";
 
 export type Doc = LoroDoc<{
@@ -22,7 +21,7 @@ export type Doc = LoroDoc<{
 export class LoroNoteManager {
   #noteId: string;
   #noteKey: string;
-  #doc: Doc;
+  doc: Doc;
   #text: LoroText;
   #onUpdate: (snapshot: string) => void | Promise<void>;
   #eventSource: EventSource | null = null;
@@ -42,12 +41,12 @@ export class LoroNoteManager {
   ) {
     this.#noteId = noteId;
     this.#noteKey = noteKey;
-    this.#doc = new LoroDoc();
-    this.#text = this.#doc.getText("content");
+    this.doc = new LoroDoc();
+    this.#text = this.doc.getText("content");
     this.#onUpdate = onUpdate ?? Function.constVoid;
 
     // Initialize frontiers
-    this.#lastFrontiers = this.#doc.frontiers();
+    this.#lastFrontiers = this.doc.frontiers();
 
     // 1. Init Hubs
     this.#outgoingHub = Effect.runSync(PubSub.unbounded<Uint8Array>());
@@ -66,7 +65,7 @@ export class LoroNoteManager {
     this.#persistenceFiber = Effect.runFork(persistenceStream);
 
     // Subscribe to changes
-    this.#doc.subscribe((event) => {
+    this.doc.subscribe((event) => {
       // Notify content listeners
       const content = this.getContent();
       this.#contentListeners.forEach((listener) => {
@@ -78,9 +77,9 @@ export class LoroNoteManager {
 
       // Publish local ops for sync
       if (event.by === "local") {
-        const frontiers = this.#doc.frontiers();
+        const frontiers = this.doc.frontiers();
         try {
-          const update = this.#doc.export({
+          const update = this.doc.export({
             mode: "shallow-snapshot",
             frontiers: this.#lastFrontiers,
           });
@@ -121,7 +120,7 @@ export class LoroNoteManager {
   async init(encryptedSnapshot?: string) {
     if (encryptedSnapshot) {
       await this.loadEncryptedSnapshot(encryptedSnapshot);
-      this.#lastFrontiers = this.#doc.frontiers();
+      this.#lastFrontiers = this.doc.frontiers();
     }
   }
 
@@ -163,7 +162,7 @@ export class LoroNoteManager {
     }).pipe(
       Stream.runForEach((update) =>
         Effect.sync(() => {
-          this.#doc.import(update);
+          this.doc.import(update);
         }),
       ),
     );
@@ -222,50 +221,11 @@ export class LoroNoteManager {
     return this.#text.toString();
   }
 
-  /**
-   * Update text content using diffs
-   */
-  updateContent(newContent: string) {
-    const currentContent = this.#text.toString();
-    if (currentContent === newContent) return;
-
-    console.debug("[Loro] Updating content with diff...");
-
-    // Calculate diff
-    const diffs = diff(currentContent, newContent);
-
-    let index = 0;
-    for (const [type, text] of diffs) {
-      switch (type) {
-        // DELETE
-        case -1: {
-          this.#text.delete(index, text.length);
-          break;
-        }
-
-        // EQUAL
-        case 0: {
-          index += text.length;
-          break;
-        }
-
-        // INSERT
-        case 1: {
-          this.#text.insert(index, text);
-          index += text.length;
-          break;
-        }
-      }
-    }
-
-    this.commit();
-  }
-
   /**
    * Get encrypted snapshot for storage
    */
   async getEncryptedSnapshot(): Promise<string> {
-    const snapshot = this.#doc.export({
+    const snapshot = this.doc.export({
       mode: "snapshot",
     }) as Uint8Array<ArrayBuffer>;
     const encrypted = await encryptData(snapshot, this.#noteKey);
@@ -281,7 +241,7 @@ export class LoroNoteManager {
         Either.getOrThrow,
       ) as Uint8Array<ArrayBuffer>;
       const decrypted = await decryptData(encryptedBytes, this.#noteKey);
-      this.#doc.import(decrypted);
+      this.doc.import(decrypted);
     } catch (error) {
       console.error("Failed to load encrypted snapshot:", error);
       throw error;
@@ -292,13 +252,13 @@ export class LoroNoteManager {
    * Apply update from another peer
    */
   applyUpdate(update: Uint8Array) {
-    this.#doc.import(update);
+    this.doc.import(update);
   }
 
   /**
    * Commit current changes
    */
   commit() {
-    this.#doc.commit();
+    this.doc.commit();
   }
 }

src/lib/loro.ts

@@ -98,14 +98,7 @@
 
 <div class="relative h-full flex-1 overflow-hidden">
   {#if !(note?.isFolder ?? true)}
-    <Editor
-      content={editorContent}
-      {notesList}
-      onchange={(newContent: string) => {
-        // Hook in Loro
-        loroManager?.updateContent(newContent);
-      }}
-    />
+    <Editor manager={loroManager} {notesList} />
   {:else if note?.isFolder}
     <div class="flex h-full items-center justify-center text-slate-400">
       <div class="text-center">