refactor: use the latest loro-crdt as demo (#8)

Author: zxch3n

components/TwinEditors/EditorManager.ts

@@ -1,10 +1,9 @@
 import { bytesToBase64DataUrl, dataUrlToBytes } from "@/lib/utils/data";
 import { showVersion } from "@/lib/utils/loro";
-import { Change, Loro, LoroEvent, OpId, setDebug } from "loro-crdt";
+import { Change, LoroDoc, LoroEventBatch, OpId, Subscription } from "loro-crdt";
 import Quill from "quill";
 import { QuillBinding } from "./QuillBinding";
 
-setDebug("*");
 type PeerProfile = { name: string; peerId: string };
 
 type Frontiers = OpId[];
@@ -39,14 +38,14 @@ const QUILL_TOOLBAR_MAP: WeakMap<HTMLElement, Quill> = new WeakMap();
 class EditorInstance {
   #index: number;
   #profile: PeerProfile; // Exportable (JSON)
-  #text: Loro; // Exportable (binary data)
+  #text: LoroDoc; // Exportable (binary data)
   #quill: Quill;
   #binding: QuillBinding;
   #connected: boolean = true; // Exportable (JSON)
   #manager: EditorManager;
 
   public async export(): Promise<EditorInstanceExportData> {
-    const rawData = this.#text.exportSnapshot();
+    const rawData = this.#text.export({mode: "snapshot"});
     return {
       profile: {
         name: this.#profile.name,
@@ -86,7 +85,7 @@ class EditorInstance {
     this.#index = index;
     this.#profile = profile;
     this.#manager = manager;
-    this.#text = new Loro();
+    this.#text = new LoroDoc();
     this.#text.configTextStyle({
       bold: { expand: "after" },
       italic: { expand: "after" },
@@ -114,12 +113,12 @@ class EditorInstance {
     this.#text.subscribe((e) => {
       // Synchronize the change to the sum text.
       const sumVersion = this.#manager.sumText.version();
-      const updateData = this.#text.exportFrom(sumVersion);
+      const updateData = this.#text.export({mode: "update", from: sumVersion});
       this.#manager.sumText.import(updateData);
       // If this is a local change (i.e., not a change synchronized from
       // other peers), we synchronize to other connected peers if we're
       // connected.
-      if (e.local) {
+      if (e.by === "local") {
         this.synchronize();
       }
     });
@@ -133,7 +132,7 @@ class EditorInstance {
     return this.#profile.name;
   }
 
-  public get text(): Loro {
+  public get text(): LoroDoc {
     return this.#text;
   }
 
@@ -166,8 +165,8 @@ class EditorInstance {
       await Promise.resolve();
       for (const that of this.#otherPeers()) {
         if (!that.connected) return;
-        this.#text.import(that.#text.exportFrom(this.#text.version()));
-        that.#text.import(this.#text.exportFrom(that.#text.version()));
+        this.#text.import(that.#text.export({mode: "update", from: this.#text.version()}));
+        that.#text.import(this.#text.export({mode: "update", from: that.#text.version()}));
       }
     }
   }
@@ -220,10 +219,10 @@ export async function decodeExport(
 }
 
 export class EditorManager {
-  #sumText: Loro;
+  #sumText: LoroDoc;
   #numberOfOperations: number = 0;
   #peers: EditorInstance[];
-  #subscriptions: Map<number, number[]> = new Map();
+  #subscriptions: Map<number, Subscription[]> = new Map();
 
   static import(
     data: EditorManagerImportData,
@@ -253,9 +252,9 @@ export class EditorManager {
     ) {
       throw new RangeError("insufficient HTML elements for creating editors");
     }
-    this.#sumText = new Loro();
+    this.#sumText = new LoroDoc();
     this.#sumText.subscribe((e) => {
-      if (!e.fromCheckout) {
+      if (e.by === "local") {
         this.#numberOfOperations += 1;
       }
     });
@@ -277,7 +276,7 @@ export class EditorManager {
     };
   }
 
-  public get sumText(): Loro {
+  public get sumText(): LoroDoc {
     return this.#sumText;
   }
 
@@ -314,7 +313,7 @@ export class EditorManager {
   }
 
   public subscribeAll(
-    listener: (instance: EditorInstance, e: LoroEvent) => void
+    listener: (instance: EditorInstance, e: LoroEventBatch) => void
   ): number {
     this.#subscriptions.set(
       this.#subscriptions.size,
@@ -329,7 +328,7 @@ export class EditorManager {
     if (!this.#subscriptions.has(subscription)) return;
     this.#subscriptions
       .get(subscription)
-      ?.forEach((n, index) => this.#peers[index].text.unsubscribe(n));
+      ?.forEach((unsubscribe, index) => unsubscribe());
     this.#subscriptions.set(subscription, []);
   }
 

components/TwinEditors/QuillBinding.ts

@@ -1,62 +1,65 @@
-import { Delta, Loro, LoroText, setDebug } from "loro-crdt";
+import { Delta, LoroDoc, LoroText, PeerID } from "loro-crdt";
 import Quill, { DeltaOperation, Sources } from "quill";
 import isEqual from "is-equal";
 import QuillDelta from "quill-delta";
 
-type Frontiers = { peer: string; counter: number }[];
+type Frontiers = { peer: PeerID; counter: number }[];
 
 function showFrontiers(frontiers: Frontiers): string {
   return frontiers.map((x) => `${x.peer}@${x.counter}`).join(";");
 }
 
 export class QuillBinding {
   private richtext: LoroText;
-  constructor(public doc: Loro, public quill: Quill) {
+  constructor(public doc: LoroDoc, public quill: Quill) {
     this.quill = quill;
-    this.richtext = doc.getText("text");
-    this.richtext.subscribe(doc, (event) => {
-      Promise.resolve().then(() => {
-        if ((!event.local || event.fromCheckout) && event.diff.type == "text" && event.origin !== "ignore") {
-          const eventDelta = event.diff.diff;
-          const delta: Delta<string>[] = [];
-          let index = 0;
-          for (let i = 0; i < eventDelta.length; i++) {
-            const d = eventDelta[i];
-            const length = d.delete || d.retain || d.insert!.length;
-            // skip the last newline that quill automatically appends
-            if (
-              d.insert &&
-              d.insert === "\n" &&
-              index === quill.getLength() - 1 &&
-              i === eventDelta.length - 1 &&
-              d.attributes != null &&
-              Object.keys(d.attributes).length > 0
-            ) {
-              delta.push({
-                retain: 1,
-                attributes: d.attributes,
-              });
+    const richtext = doc.getText("text");
+    this.richtext = richtext;
+    richtext.subscribe(async (event) => {
+      if (event.by !== "local" && event.origin !== "ignore") {
+        for (const e of event.events) {
+          if (e.diff.type === "text") {
+            const eventDelta = e.diff.diff;
+            const delta: Delta<string>[] = [];
+            let index = 0;
+            for (let i = 0; i < eventDelta.length; i++) {
+              const d = eventDelta[i];
+              const length = d.delete || d.retain || d.insert!.length;
+              // skip the last newline that quill automatically appends
+              if (
+                d.insert &&
+                d.insert === "\n" &&
+                index === quill.getLength() - 1 &&
+                i === eventDelta.length - 1 &&
+                d.attributes != null &&
+                Object.keys(d.attributes).length > 0
+              ) {
+                delta.push({
+                  retain: 1,
+                  attributes: d.attributes,
+                });
+                index += length;
+                continue;
+              }
+
+              delta.push(d);
               index += length;
-              continue;
             }
 
-            delta.push(d);
-            index += length;
-          }
-
-          quill.updateContents(new QuillDelta(delta), "this" as any);
-          const a = this.richtext.toDelta();
-          const b = this.quill.getContents().ops;
-          if (!assertEqual(a, b as any, true)) {
-            console.log(this.doc.peerId, "COMPARE AFTER CRDT_EVENT", event.diff);
-            this.resetQuillContent(a)
+            quill.updateContents(new QuillDelta(delta), "this" as any);
+            const a = doc.getText("text").toDelta();
+            const b = this.quill.getContents().ops;
+            if (!assertEqual(a, b as any, true)) {
+              console.log(this.doc.peerId, "COMPARE AFTER CRDT_EVENT", e.diff);
+              this.resetQuillContent(a)
+            }
           }
         }
-      });
+      }
     });
     quill.setContents(
       new QuillDelta(
-        this.richtext.toDelta().map((x) => ({
+        richtext.toDelta().map((x) => ({
           insert: x.insert,
           attributions: x.attributes,
         }))
@@ -116,7 +119,7 @@ export class QuillBinding {
       if (origin !== ("this" as any)) {
         if (this.richtext.toString().slice(-1) !== '\n') {
           this.richtext.applyDelta([{ retain: this.richtext.length }, { insert: "\n" }]);
-          this.doc.commit("ignore");
+          this.doc.commit({ origin: "ignore" });
         }
         this.applyDelta(ops as DeltaOperation[]);
         const a = this.richtext.toDelta();

components/landing/Demonstration/index.tsx

@@ -116,7 +116,7 @@ export default function DemoSection() {
     const n = manager.sumText.subscribe((): void => {
       updateTimelineHistory(manager.sumText.getAllChanges());
     });
-    return manager.sumText.unsubscribe.bind(manager.sumText, n);
+    return n;
   }, [resetCounter, updateTimelineHistory]);
 
   useEffect(() => {

components/landing/data/demo.json

@@ -1,21 +1,21 @@
 {
-  "numberOfOperations": 58,
-  "peers": [
-    {
-      "profile": {
-        "name": "Alice",
-        "peerId": "0"
-      },
-      "encodedLoroText": "data:application/octet-stream;base64,bG9yb9bWgiV3xUZN3pQcD4Fn8FkAAgcFAjQAHQsACgAaEgAEAgQACTkAOBgVBAARDAYASwBMAEsAGAQABwIBAAIQAAMBAgQAAQEEAAECBgABARkBDgwAEQoACQ0ADgoACQQADwoJDQAYCQ0AHQsACgkYHCcEGgsHDxoHKy4EERMHDBQBBAwbAQQIBgkEAAsCAQIBAAIJDwoEAQYCDxIOEAXA4MnaDAAQBBYFEKaIHwwJBAABAgYAAwECBwEBAQECAQECEAADAgEAAwGIAQIBFAIAAAIAQgFCXgVIZWxsbwcgSmVubnkhBiBMYW5lIQkKCiMgVG9kYXkIJ3MgVGFza3MBCgEKhAkAAYQIAQEILSBUYXNrIDABCoQJAQGECAABAi0gBFRhc2sCIDGEAQAAAQqEAQAAAQpIEQIAAAAAAAAAAAAAAAAAAAABBgEEAQMABBIDBGJvbGQGaXRhbGljBHRleHQQAQIGCQABAAEABgkIAh4JDgoBAQcLYgcEHwYA",
-      "connected": true
-    },
-    {
-      "profile": {
-        "name": "Bob",
-        "peerId": "1"
-      },
-      "encodedLoroText": "data:application/octet-stream;base64,bG9yb9bWgiV3xUZN3pQcD4Fn8FkAAgcFAjQAHQsACgAaEgAEAgQACTkAOBgVBAARDAYASwBMAEsAGAQABwIBAAIQAAMBAgQAAQEEAAECBgABARkBDgwAEQoACQ0ADgoACQQADwoJDQAYCQ0AHQsACgkYHCcEGgsHDxoHKy4EERMHDBQBBAwbAQQIBgkEAAsCAQIBAAIJDwoEAQYCDxIOEAXA4MnaDAAQBBYFEKaIHwwJBAABAgYAAwECBwEBAQECAQECEAADAgEAAwGIAQIBFAIAAAIAQgFCXgVIZWxsbwcgSmVubnkhBiBMYW5lIQkKCiMgVG9kYXkIJ3MgVGFza3MBCgEKhAkAAYQIAQEILSBUYXNrIDABCoQJAQGECAABAi0gBFRhc2sCIDGEAQAAAQqEAQAAAQpIEQIAAAAAAAAAAAAAAAAAAAABBgEEAQMABBIDBGJvbGQGaXRhbGljBHRleHQQAQIGCQABAAEABgkIAh4JDgoBAQcLYgcEHwYA",
-      "connected": true
-    }
-  ]
+    "numberOfOperations": 58,
+    "peers": [
+        {
+            "profile": {
+                "name": "Alice",
+                "peerId": "0"
+            },
+            "encodedLoroText": "data:application/octet-stream;base64,bG9ybwAAAAAAAAAAAAAAAM00amcAA5MBAABMT1JPAAQiTRhgQIJYAQAAgwAxAEAEKgIAAQATAQgAQA0JCgEBAPOjAAYBBgEBCgKk0IABAAKmUUAGAQADAAgABgEEAQIABBEEYm9sZAZpdGFsaWMEdGV4dAA5AQQCIgATBAAdJBo9Nj4Ac3RzegB5enmAARIGBQMMAAQFEwwADAAFDAAMAAUMBQEMCQQBAQgUAQEHAEIBCgxIZWxsbyBKZW5ueSEJCgojIFRvZGF5hAYAAQgncyBUYXNrcwEKhAEBAIQCAAABLYQBAQGEAgABByBUYXNrIDIHBcMAZB0GKQMjAs8ABAIAMwYKA9EA46fMQAEMAaeABgEAAgAG0AApAgzLAPAGIQEEAhIAChEKLgQCBQI5UE8HCgUHuADxCggJBgMBBgkIAQAmBiBMYW5lIQMKLQoBIAaFAFExCQotIAoAgDCECAABhAkAZADwCmZyAQBgAAIAdnYCAGIBOgAAzwBmAW4BBAAAAAAAR9mA5QEAAAAFAAAADAAAAAAAAAAAAAAAAAABAgB2dmlBwfBwAQAAIQEAAExPUk8ABCJNGGBAgugAAADxJAIBAEBIZWxsbyBKZW5ueSEgTGFuZSEKCiMgVG9kYXkncyBUYXNrcwoKLSBUYXNrIDAKLRIAJCAxCQBDMgoCAAEAEwEIAPM+AwQXBQACAQQAAQIOAAMBAgoAAQEUAAUCAQIhHQIBGhYvIBIPEicqJwQaFwoCGygDARADAQoBAwUDCwkdGgsADAsUEyQGAAsDBAMACww9APADBg8MHx0YCwYBDQABEBEEAQIAWADyEQ8BAAIBAAIMDwoAAQQCBml0YWxpYwRib2xkBwMAAQGEBQAQAQoAYwEAhAMAAA0AgAABAYQAAAEAAAAAAOD6K7EBAAAABQAAAAYAggR0ZXh0AQYAggR0ZXh0sFTxRgABAAAAAAAA",
+            "connected": true
+        },
+        {
+            "profile": {
+                "name": "Bob",
+                "peerId": "1"
+            },
+            "encodedLoroText": "data:application/octet-stream;base64,bG9ybwAAAAAAAAAAAAAAANBwYasAA5UBAABMT1JPAAQiTRhgQIJaAQAAgwAxAEAEKgIAAQATAQgAQA0JCgEBAPGeAAYBBgEBCgKk0IABAAKmUUAGAQADAAgABgEEAQIABBEEYm9sZAZpdGFsaWMEdGV4dAA8AQQCJAAVBAABCgQaGT02PgBzdHN6AHl6eYABEggFAwwABAUTDAAMAAUMAAwABQ0HAQUHCQQBAQgUAQEHAEMBCgVIZWxsbwcgSmVubnkhCQoKIyBUb2RheYQGAAEIJ3MgVGFza3MBCoQBAQCEAgAAAS2EAQEBhAIAAQcbAEMgMgcFxwBiHQYpAyMCDAAGAgAzBgoD1QDjp8xAAQwBp4AGAQACAAbUACkCDM8A8AYhAQQCEgAKEQouBAIFAjlQTwcKBQe6APEKCAkGAwEGCQgBACYGIExhbmUhAwotCgEgBoUAUTEJCi0gCgCAMIQIAAGECQBkAPAKZnIBAGAAAgB2dgIAYgE6AADTAGoBcgEEAAAAAAAY3WWsAQAAAAUAAAAMAAAAAAAAAAAAAAAAAAECAHZ2aUHB8HIBAAAyAQAATE9STwACAQBASGVsbG8gSmVubnkhIExhbmUhCgojIFRvZGF5J3MgVGFza3MKCi0gVGFzayAwCi0gVGFzayAxCi0gVGFzayAyCgIAAAAAAAAAAAEAAAAAAAAAAwQVDAADAgEUAAECDgAFAQIBIAAFAgECJQwCAwsaEAIlBi8gEg8SJyonBBoXMgMBEAMBCgwCDQ0DBQMLCR0bDAADDAsQAAUUEyQGAA0DBAMACwwBIAAFBg8MJQECCAAFDAEJEAAjDg0AARARBAECAAEMCwACAQACDgABAwoAAQQCBml0YWxpYwRib2xkBwMAAQGEAwABAYQDAQEBhAMBAIQDAACEAwEBAYQDAAEBhAAAAQDoMqJAAQAAAAUAAAAGAIIEdGV4dAAGAIIEdGV4dGU0Pm8RAQAAAAAAAA==",
+            "connected": true
+        }
+    ]
 }

deno.lock

@@ -38,7 +38,7 @@
     "highlight.js": "^11.9.0",
     "is-equal": "^1.7.0",
     "jotai": "^2.6.0",
-    "loro-crdt": "^0.10.0",
+    "loro-crdt": "^1.5.2",
     "lucide-react": "^0.294.0",
     "next": "^13.3.4",
     "next-seo": "^5.15.0",