Loro CRDTs

bun add @pylonsync/loro

import { entity, field } from "@pylonsync/sdk";

const Document = entity("Document", {
  title:    field.string(),               // normal LWW field
  body:     field.string().crdt("text"),  // LoroText  (or field.richtext())
  views:    field.int().crdt("counter"),  // LoroCounter
  authorId: field.id("User"),
});

import { useLoroDoc } from "@pylonsync/loro";
import { LoroDoc } from "loro-crdt";

function DocumentEditor({ docId }: { docId: string }) {
  const doc = useLoroDoc("Document", docId);
  const text = doc.getText("body");

  return (
    <textarea
      value={text.toString()}
      onChange={(e) => {
        text.delete(0, text.length);
        text.insert(0, e.target.value);
      }}
    />
  );
}

const state = useLoroSendState("Doc", docId);
{state === "rejected" && <Notice>The server did not accept your changes.</Notice>}

const text = doc.getText("body");

text.insert(0, "Hello, ");
text.insert(7, "world!");
text.delete(0, 5); // remove "Hello"
text.toString();   // "world!"

text.mark({ start: 0, end: 5 }, "bold", true);
text.unmark({ start: 0, end: 5 }, "bold");

const list = doc.getList("tags");

list.push("urgent");
list.insert(0, "draft");
list.delete(1, 1);

list.toArray(); // ["draft"]

const list = doc.getMovableList("items");
const id = list.push({ name: "First" });
list.move(id, 5); // move to position 5

const map = doc.getMap("metadata");

map.set("status", "draft");
map.set("priority", 3);
map.get("status");  // "draft"
map.delete("priority");

const counter = doc.getCounter("views");

counter.increment(1);
counter.decrement(2);
counter.value;  // -1

const tree = doc.getTree("outline");

const root = tree.createNode();
root.data.set("text", "Top-level");

const child = root.createNode();
child.data.set("text", "Nested");
child.move(root, 0); // make child the first child of root

import { Cursor } from "loro-crdt";

const text = doc.getText("body");
const myCursor = text.getCursor(42); // anchor at position 42

// Other clients can read the cursor's current resolved position
// even after concurrent edits shift everything around:
const resolved = doc.getCursorPos(myCursor);
// → { offset, side, origin, ... }

const Doc = entity("Doc", {
  title: field.string(),
  body:  field.richtext().crdt("prosemirror").optional(),  // or field.json().crdt("prosemirror")
});

await ctx.db.insert("Doc", { title: "Untitled", body: { type: "doc", content: [{ type: "paragraph" }] } });

await ctx.db.insert("Doc", { title: "Untitled" });  // body reads as null until an editor writes

bun add loro-prosemirror prosemirror-model prosemirror-state prosemirror-view

import { useProseMirrorDoc } from "@pylonsync/loro/prosemirror/react";
import { ProseMirrorSyncPlugin, ProseMirrorUndoPlugin } from "@pylonsync/loro/prosemirror/sync";

function Body({ docId }: { docId: string }) {
  const { doc, containerId } = useProseMirrorDoc("Doc", docId, "body", schema);
  if (!containerId) return <Loading />;
  return <Editor plugins={[ProseMirrorSyncPlugin({ doc, containerId }), ProseMirrorUndoPlugin({ doc })]} />;
}

import { action, v } from "@pylonsync/functions";
import { openLiveDoc } from "@pylonsync/loro/server";
import { editProseMirror } from "@pylonsync/loro/prosemirror";

export default action({
  args: { docId: v.id("Doc") },
  async handler(ctx, args) {
    const live = await openLiveDoc(ctx, "Doc", args.docId);
    await editProseMirror(live, "body", schema, (state) =>
      state.tr.insertText("Summary: ", 1),
    );
  },
});

import { readProseMirror, writeProseMirror } from "@pylonsync/loro/prosemirror";

const current = readProseMirror(loroDoc, "body", schema);  // a ProseMirror Node, or null
const tr = EditorState.create({ schema, doc: current }).tr;
// ...change the document with the transaction...
writeProseMirror(loroDoc, "body", schema, tr.doc);         // a diff, so concurrent edits still merge

import { encodeRange, ProseMirrorRangesPlugin, resolveRanges, setAnchoredRanges } from "@pylonsync/loro/prosemirror/ranges";

// When someone comments on the selection, store both cursors with the thread.
const { from, to } = view.state.selection;
const anchor = encodeRange(view.state, doc, containerId, from, to); // { from: string | null, to: string | null }

// In the editor. onReanchor gives new cursors to store (see below).
plugins: [
  ProseMirrorSyncPlugin({ doc, containerId }),
  ProseMirrorRangesPlugin({ doc, containerId, onReanchor: (id, anchor) => saveAnchor(id, anchor) }),
];

// Whenever the threads change.
setAnchoredRanges(view, threads.map((t) => ({ id: t.id, from: t.anchorFrom, to: t.anchorTo, className: "thread" })));

// For a margin: where each range is now. `gone` is true when its text was deleted.
const places = resolveRanges(view.state, doc, containerId, threads.map((t) => ({ id: t.id, from: t.anchorFrom, to: t.anchorTo })));

import { editProseMirror } from "@pylonsync/loro/prosemirror";
import { resolveRangesInDoc } from "@pylonsync/loro/prosemirror/ranges";

await editProseMirror(live, "body", schema, (state) => {
  const [range] = resolveRangesInDoc(live.doc, "body", schema, [{ id: thread.id, from: thread.anchorFrom, to: thread.anchorTo }]);
  if (!range || range.gone) return null; // its text was deleted
  return state.tr.insertText("(checked) ", range.from);
});

import { useRoom } from "@pylonsync/react";

function PresenceLayer({ docId, me }: { docId: string; me: User }) {
  const room = useRoom({ entity: "Doc", id: docId }, me.id);

  return (
    <>
      {room.peers.map((peer) => (
        <RemoteCursor key={peer.id} presence={peer.presence} />
      ))}
      <textarea
        onSelect={(e) =>
          room.setPresence({ color: "#ff7700", cursor: e.currentTarget.selectionStart })
        }
      />
    </>
  );
}

const room = useRoom({ entity: "Doc", id: docId }, me.id);
const cursors = ProseMirrorCursorsPlugin({
  doc,
  containerId,
  onSelection: (selection) => room.setPresence({ name: me.name, color: me.color, selection }),
});
// whenever room.peers changes:
setRemoteCursors(view, room.peers.map((p) => ({ id: p.user_id, ...p.data })));

const snapshot = doc.export({ mode: "snapshot" });
// snapshot is a Uint8Array — store it, ship it elsewhere

// Restore on another client
const newDoc = new LoroDoc();
newDoc.import(snapshot);

const update = doc.export({ mode: "update", from: previousVersion });
otherDoc.import(update);

import { UndoManager } from "loro-crdt";

const undo = new UndoManager(doc, {
  mergeInterval: 1000, // group edits within 1s as one undoable step
});

undo.undo();
undo.redo();
undo.canUndo();
undo.canRedo();

[type: u8] [entity_len: u16 BE] [entity utf8]
[row_id_len: u16 BE] [row_id utf8] [payload bytes]

import { decodeCrdtFrame } from "@pylonsync/loro/wire";

engine.onBinaryFrame((bytes) => {
  const frame = decodeCrdtFrame(bytes);
  console.log(`${frame.type === 0x10 ? "snapshot" : "update"} for ${frame.entity}/${frame.rowId}: ${frame.payload.length} bytes`);
});

import PylonSync
import Loro

let crdtDoc = PylonLoroDoc(entity: "Document", rowId: "doc_42")
await crdtDoc.attach(to: engine)

let text = crdtDoc.doc.getText(id: "body")
try text.insert(pos: 0, s: "Hello, world!")