Loading…
;
+ }
+
+ const document = root.get("document");
+
+ return (
+
+
+
+ // +++
+
+ {plainText}
; +} +``` + +#### Rendering formatted text + +Because `useStorage` returns plain data, you can map segments to React elements: + +```tsx +import { useStorage } from "@liveblocks/react/suspense"; + +function FormattedDocument() { + const document = useStorage((root) => root.document); + + if (document === null) { + return null; + } + + return ( ++ {document.map(([text, attributes], index) => ( + + {text} + + ))} +
+ ); +} +``` + +#### Listening for granular updates + +For custom editor integrations, subscribe to granular `LiveText` changes with +[`useRoom`][] and `room.subscribe` using the `isDeep` option. Each update +includes the change type (`insert`, `delete`, or `format`), index, and affected +text, as well as a +[`source`](/docs/api-reference/liveblocks-client#update-source) saying whether +the change was made by this client or by another one. Learn more about +[listening for nested changes](/docs/api-reference/liveblocks-client#listening-for-nested-changes). + +```tsx +import { LiveText } from "@liveblocks/client"; +import { useRoom } from "@liveblocks/react/suspense"; +import { useEffect } from "react"; + +function LiveTextSync({ document }: { document: LiveText }) { + const room = useRoom(); + + useEffect(() => { + let unsubscribe: (() => void) | undefined; + + void room.getStorage().then(({ root }) => { + unsubscribe = room.subscribe( + root, + (updates) => { + for (const update of updates) { + if (update.type !== "LiveText" || update.node !== document) { + continue; + } + + for (const change of update.updates) { + if (change.type === "insert") { + // Apply insertion to your local editor at change.index + console.log(`+ "${change.text}" at ${change.index}`); + } else if (change.type === "delete") { + // Apply deletion to your local editor + console.log(`- ${change.length} chars at ${change.index}`); + } + } + } + }, + { isDeep: true } + ); + }); + + return () => unsubscribe?.(); + }, [room, document]); + + return null; +} +``` + +For CodeMirror, use +[`@liveblocks/codemirror`](/docs/api-reference/liveblocks-codemirror) instead of +building a custom sync layer. See +[`createLiveblocksSyncPlugin`](/docs/api-reference/liveblocks-codemirror#createLiveblocksSyncPlugin) +and +[`createLiveblocksPresencePlugin`](/docs/api-reference/liveblocks-codemirror#createLiveblocksPresencePlugin). + +For Lexical with Storage, use +[`@liveblocks/lexical`](/docs/api-reference/liveblocks-lexical). + +For ProseMirror with Storage, use +[`@liveblocks/prosemirror`](/docs/api-reference/liveblocks-prosemirror). For +Tiptap, use +[`@liveblocks/react-tiptap`](/docs/api-reference/liveblocks-react-tiptap) with +[`collaborationMode: "liveblocks"`](/docs/api-reference/liveblocks-react-tiptap#Liveblocks-collaboration-mode). + +Learn more about the `LiveText` API in the +[`@liveblocks/client` reference](/docs/api-reference/liveblocks-client#LiveText). +Loading…
;
+ }
+
+ return Loading…
;
+ }
+
+ const document = root.get("document");
+
+ return (
+
+
+
+ // +++
+
+
+
+ );
+ }
+ ```
+
+
+
+ Loading…
;
+ }
+
+ return Loading…
;
+ }
+
+ const document = root.get("document");
+
+ return (
+
+
+
+ // +++
+
+
+
+ );
+ }
+ ```
+
+
+
+ Creating room...
;
+}
diff --git a/e2e/next-codemirror-liveblocks/app/providers.tsx b/e2e/next-codemirror-liveblocks/app/providers.tsx
new file mode 100644
index 00000000000..1524070e684
--- /dev/null
+++ b/e2e/next-codemirror-liveblocks/app/providers.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { LiveblocksProvider } from "@liveblocks/react";
+
+const USERS = [
+ {
+ id: "codemirror-user-0",
+ name: "Ada Lovelace",
+ color: "#e11d48",
+ avatar: "https://liveblocks.io/avatars/avatar-0.png",
+ },
+ {
+ id: "codemirror-user-1",
+ name: "Grace Hopper",
+ color: "#2563eb",
+ avatar: "https://liveblocks.io/avatars/avatar-1.png",
+ },
+ {
+ id: "codemirror-user-2",
+ name: "Katherine Johnson",
+ color: "#16a34a",
+ avatar: "https://liveblocks.io/avatars/avatar-2.png",
+ },
+];
+
+export function Providers({ children }: { children: React.ReactNode }) {
+ return (
+
+
+ Loading room data…
;
+ }
+
+ return
+
+
+ );
+}
+
+function useRoot(room: Room) {
+ const subscribe = room.events.storageDidLoad.subscribeOnce;
+ const getSnapshot = room.getStorageOrNull;
+ const getServerSnapshot = useCallback(() => {
+ return null;
+ }, []);
+ return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
diff --git a/e2e/next-codemirror-liveblocks/eslint.config.mjs b/e2e/next-codemirror-liveblocks/eslint.config.mjs
new file mode 100644
index 00000000000..348c45a2fd8
--- /dev/null
+++ b/e2e/next-codemirror-liveblocks/eslint.config.mjs
@@ -0,0 +1,14 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+ baseDirectory: __dirname,
+});
+
+const eslintConfig = [...compat.extends("next/core-web-vitals")];
+
+export default eslintConfig;
diff --git a/e2e/next-codemirror-liveblocks/liveblocks.config.ts b/e2e/next-codemirror-liveblocks/liveblocks.config.ts
new file mode 100644
index 00000000000..f7c4ce29f28
--- /dev/null
+++ b/e2e/next-codemirror-liveblocks/liveblocks.config.ts
@@ -0,0 +1,25 @@
+import type { LiveblocksCodemirrorSelection } from "@liveblocks/codemirror";
+import type { LiveText } from "@liveblocks/core";
+
+declare global {
+ interface Liveblocks {
+ Presence: {
+ selection: LiveblocksCodemirrorSelection | null;
+ };
+
+ Storage: {
+ document: LiveText;
+ };
+
+ UserMeta: {
+ id: string;
+ info: {
+ name: string;
+ color: string;
+ avatar: string;
+ };
+ };
+ }
+}
+
+export {};
diff --git a/e2e/next-codemirror-liveblocks/next-env.d.ts b/e2e/next-codemirror-liveblocks/next-env.d.ts
new file mode 100644
index 00000000000..9edff1c7cac
--- /dev/null
+++ b/e2e/next-codemirror-liveblocks/next-env.d.ts
@@ -0,0 +1,6 @@
+/// Creating room...
;
+}
diff --git a/e2e/next-lexical-liveblocks/app/providers.tsx b/e2e/next-lexical-liveblocks/app/providers.tsx
new file mode 100644
index 00000000000..7dd27b667b9
--- /dev/null
+++ b/e2e/next-lexical-liveblocks/app/providers.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { LiveblocksProvider } from "@liveblocks/react";
+
+const USERS = [
+ {
+ id: "lexical-user-0",
+ name: "Ada Lovelace",
+ color: "#e11d48",
+ avatar: "https://liveblocks.io/avatars/avatar-0.png",
+ },
+ {
+ id: "lexical-user-1",
+ name: "Grace Hopper",
+ color: "#2563eb",
+ avatar: "https://liveblocks.io/avatars/avatar-1.png",
+ },
+ {
+ id: "lexical-user-2",
+ name: "Katherine Johnson",
+ color: "#16a34a",
+ avatar: "https://liveblocks.io/avatars/avatar-2.png",
+ },
+];
+
+export function Providers({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+ Loading room data…
+
+ );
+ }
+
+ const document = root.get("document");
+
+ return (
+
+
+
+
+
+ formatHeading("h1")}
+ />
+ formatHeading("h2")}
+ />
+ formatHeading("h3")}
+ />
+ formatText("bold")}
+ />
+ formatText("italic")}
+ />
+ formatText("underline")}
+ />
+
+ );
+}
+
+function ToolbarButton({
+ label,
+ active,
+ onClick,
+}: {
+ label: string;
+ active: boolean;
+ onClick: () => void;
+}) {
+ return (
+
+ );
+}
diff --git a/e2e/next-lexical-liveblocks/eslint.config.mjs b/e2e/next-lexical-liveblocks/eslint.config.mjs
new file mode 100644
index 00000000000..348c45a2fd8
--- /dev/null
+++ b/e2e/next-lexical-liveblocks/eslint.config.mjs
@@ -0,0 +1,14 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+ baseDirectory: __dirname,
+});
+
+const eslintConfig = [...compat.extends("next/core-web-vitals")];
+
+export default eslintConfig;
diff --git a/e2e/next-lexical-liveblocks/liveblocks.config.ts b/e2e/next-lexical-liveblocks/liveblocks.config.ts
new file mode 100644
index 00000000000..8f4d7b8691b
--- /dev/null
+++ b/e2e/next-lexical-liveblocks/liveblocks.config.ts
@@ -0,0 +1,24 @@
+import type { LiveLexicalSelection, LiveRootNode } from "@liveblocks/lexical";
+
+declare global {
+ interface Liveblocks {
+ Presence: {
+ selection: LiveLexicalSelection | null;
+ };
+
+ Storage: {
+ document: LiveRootNode;
+ };
+
+ UserMeta: {
+ id: string;
+ info: {
+ name: string;
+ color: string;
+ avatar: string;
+ };
+ };
+ }
+}
+
+export {};
diff --git a/e2e/next-lexical-liveblocks/next-env.d.ts b/e2e/next-lexical-liveblocks/next-env.d.ts
new file mode 100644
index 00000000000..9edff1c7cac
--- /dev/null
+++ b/e2e/next-lexical-liveblocks/next-env.d.ts
@@ -0,0 +1,6 @@
+/// Loading...
;
+ }
+
+ const plainText = text.map(([segmentText]) => segmentText).join("");
+
+ return (
+
+ );
+}
diff --git a/e2e/next-sandbox/test/storage/text.test.ts b/e2e/next-sandbox/test/storage/text.test.ts
new file mode 100644
index 00000000000..ab1cf6c165e
--- /dev/null
+++ b/e2e/next-sandbox/test/storage/text.test.ts
@@ -0,0 +1,48 @@
+import type { Page } from "@playwright/test";
+import { test } from "@playwright/test";
+
+import {
+ genRoomId,
+ preparePages,
+ waitForJson,
+ waitUntilEqualOnAllPages,
+} from "../utils";
+
+test.describe.configure({ mode: "parallel" });
+
+const TEST_URL = "http://localhost:3007/storage/text";
+
+test.describe("Storage - LiveText", () => {
+ let pages: [Page, Page];
+
+ test.beforeEach(async ({}, testInfo) => {
+ const room = genRoomId(testInfo);
+ pages = await preparePages(`${TEST_URL}?room=${encodeURIComponent(room)}`);
+ });
+
+ test.afterEach(() => Promise.all(pages.map((page) => page.close())));
+
+ test("syncs text and range attributes", async () => {
+ const [page1, page2] = pages;
+
+ await waitForJson(pages, "#plainText", "Hello");
+ await waitForJson(pages, "#text", [["Hello"]]);
+
+ await page1.click("#insert");
+ await waitForJson(pages, "#plainText", "Hello world");
+ await waitUntilEqualOnAllPages(pages, "#text");
+
+ await page2.click("#format");
+ await waitForJson(pages, "#text", [
+ ["Hello", { bold: true }],
+ [" world"],
+ ]);
+
+ await page1.click("#unformat");
+ await waitForJson(pages, "#text", [["Hello world"]]);
+
+ await page2.click("#delete");
+ await waitForJson(pages, "#plainText", "ello world");
+ await waitForJson(pages, "#text", [["ello world"]]);
+ });
+});
diff --git a/e2e/next-tiptap-liveblocks/.gitignore b/e2e/next-tiptap-liveblocks/.gitignore
new file mode 100644
index 00000000000..57b5f978e7a
--- /dev/null
+++ b/e2e/next-tiptap-liveblocks/.gitignore
@@ -0,0 +1,4 @@
+.next/
+.turbo/
+next-env.d.ts
+node_modules/
diff --git a/e2e/next-tiptap-liveblocks/app/api/auth/liveblocks/route.ts b/e2e/next-tiptap-liveblocks/app/api/auth/liveblocks/route.ts
new file mode 100644
index 00000000000..2750a315005
--- /dev/null
+++ b/e2e/next-tiptap-liveblocks/app/api/auth/liveblocks/route.ts
@@ -0,0 +1,51 @@
+import { Liveblocks } from "@liveblocks/node";
+import { NextResponse } from "next/server";
+
+const USERS = [
+ {
+ id: "tiptap-user-0",
+ info: {
+ name: "Ada Lovelace",
+ color: "#e11d48",
+ avatar: "https://liveblocks.io/avatars/avatar-0.png",
+ },
+ },
+ {
+ id: "tiptap-user-1",
+ info: {
+ name: "Grace Hopper",
+ color: "#2563eb",
+ avatar: "https://liveblocks.io/avatars/avatar-1.png",
+ },
+ },
+ {
+ id: "tiptap-user-2",
+ info: {
+ name: "Katherine Johnson",
+ color: "#16a34a",
+ avatar: "https://liveblocks.io/avatars/avatar-2.png",
+ },
+ },
+];
+
+export async function POST() {
+ if (!process.env.LIVEBLOCKS_SECRET_KEY) {
+ return new NextResponse("Missing LIVEBLOCKS_SECRET_KEY", { status: 403 });
+ }
+
+ const liveblocks = new Liveblocks({
+ secret: process.env.LIVEBLOCKS_SECRET_KEY,
+ baseUrl: process.env.NEXT_PUBLIC_LIVEBLOCKS_BASE_URL,
+ });
+
+ const user = USERS[Math.floor(Math.random() * USERS.length)];
+ const session = liveblocks.prepareSession(user.id, {
+ userInfo: user.info,
+ });
+
+ session.allow("e2e-tiptap-*", session.FULL_ACCESS);
+ session.allow("liveblocks:e2e:tiptap:*", session.FULL_ACCESS);
+
+ const { status, body } = await session.authorize();
+ return new NextResponse(body, { status });
+}
diff --git a/e2e/next-tiptap-liveblocks/app/globals.css b/e2e/next-tiptap-liveblocks/app/globals.css
new file mode 100644
index 00000000000..0a853eda3c5
--- /dev/null
+++ b/e2e/next-tiptap-liveblocks/app/globals.css
@@ -0,0 +1,81 @@
+* {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ color: #111827;
+ background: #f9fafb;
+ font-family:
+ Inter,
+ ui-sans-serif,
+ system-ui,
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ sans-serif;
+}
+
+button {
+ border: 1px solid #d1d5db;
+ border-radius: 6px;
+ padding: 6px 10px;
+ background: white;
+ cursor: pointer;
+}
+
+button[data-active="true"] {
+ color: white;
+ border-color: #111827;
+ background: #111827;
+}
+
+main {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) 380px;
+ gap: 24px;
+ max-width: 1280px;
+ min-height: 100vh;
+ margin: 0 auto;
+ padding: 32px;
+}
+
+.editor-shell,
+.diagnostics {
+ border: 1px solid #e5e7eb;
+ border-radius: 12px;
+ background: white;
+ box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
+}
+
+.toolbar {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ padding: 12px;
+ border-bottom: 1px solid #e5e7eb;
+}
+
+.editor {
+ min-height: 460px;
+ padding: 24px;
+}
+
+.editor .ProseMirror {
+ min-height: 420px;
+ outline: none;
+}
+
+.diagnostics {
+ align-self: start;
+ padding: 16px;
+}
+
+.diagnostics pre {
+ max-height: 280px;
+ overflow: auto;
+ border-radius: 8px;
+ padding: 12px;
+ background: #f3f4f6;
+ font-size: 12px;
+}
diff --git a/e2e/next-tiptap-liveblocks/app/layout.tsx b/e2e/next-tiptap-liveblocks/app/layout.tsx
new file mode 100644
index 00000000000..92b231e52a2
--- /dev/null
+++ b/e2e/next-tiptap-liveblocks/app/layout.tsx
@@ -0,0 +1,19 @@
+import "@liveblocks/react-tiptap/styles.css";
+import "@liveblocks/react-ui/styles.css";
+import "./globals.css";
+
+import { Providers } from "./providers";
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return (
+
+
+ Creating room...
;
+}
diff --git a/e2e/next-tiptap-liveblocks/app/providers.tsx b/e2e/next-tiptap-liveblocks/app/providers.tsx
new file mode 100644
index 00000000000..25753e8afe3
--- /dev/null
+++ b/e2e/next-tiptap-liveblocks/app/providers.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { LiveblocksProvider } from "@liveblocks/react";
+
+const USERS = [
+ {
+ id: "tiptap-user-0",
+ name: "Ada Lovelace",
+ color: "#e11d48",
+ avatar: "https://liveblocks.io/avatars/avatar-0.png",
+ },
+ {
+ id: "tiptap-user-1",
+ name: "Grace Hopper",
+ color: "#2563eb",
+ avatar: "https://liveblocks.io/avatars/avatar-1.png",
+ },
+ {
+ id: "tiptap-user-2",
+ name: "Katherine Johnson",
+ color: "#16a34a",
+ avatar: "https://liveblocks.io/avatars/avatar-2.png",
+ },
+];
+
+export function Providers({ children }: { children: React.ReactNode }) {
+ return (
+ Editor JSON
+{editorJsonText}
+
+ Storage JSON
+{storageJsonText}
+
+ );
+}
+
+function Threads({
+ editor,
+ threads,
+}: {
+ editor: Editor | null;
+ threads: ReturnType
diff --git a/examples/nextjs-blocknote/app/providers.tsx b/examples/nextjs-blocknote/app/providers.tsx
index 9f24dbdd4d7..86c1aa0ad33 100644
--- a/examples/nextjs-blocknote/app/providers.tsx
+++ b/examples/nextjs-blocknote/app/providers.tsx
@@ -7,6 +7,7 @@ import { LiveblocksProvider } from "@liveblocks/react/suspense";
export function Providers({ children }: { children: ReactNode }) {
return (
{
const searchParams = new URLSearchParams(
diff --git a/examples/nextjs-livetext-custom/.env.example b/examples/nextjs-livetext-custom/.env.example
new file mode 100644
index 00000000000..48ac8d33600
--- /dev/null
+++ b/examples/nextjs-livetext-custom/.env.example
@@ -0,0 +1,2 @@
+# https://liveblocks.io/dashboard/apikeys
+LIVEBLOCKS_SECRET_KEY=
\ No newline at end of file
diff --git a/examples/nextjs-livetext-custom/.gitignore b/examples/nextjs-livetext-custom/.gitignore
new file mode 100644
index 00000000000..1dd1e7cb0cf
--- /dev/null
+++ b/examples/nextjs-livetext-custom/.gitignore
@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+.env
+.env.*
+!.env.example
+*.tsbuildinfo
+.vercel
+.next
+out
+next-env.d.ts
diff --git a/examples/nextjs-livetext-custom/.prettierrc b/examples/nextjs-livetext-custom/.prettierrc
new file mode 100644
index 00000000000..06998724304
--- /dev/null
+++ b/examples/nextjs-livetext-custom/.prettierrc
@@ -0,0 +1,11 @@
+{
+ "semi": true,
+ "tabWidth": 2,
+ "useTabs": false,
+ "singleQuote": false,
+ "jsxSingleQuote": false,
+ "arrowParens": "always",
+ "bracketSpacing": true,
+ "bracketSameLine": false,
+ "trailingComma": "es5"
+}
diff --git a/examples/nextjs-livetext-custom/README.md b/examples/nextjs-livetext-custom/README.md
new file mode 100644
index 00000000000..f3959f79a7e
--- /dev/null
+++ b/examples/nextjs-livetext-custom/README.md
@@ -0,0 +1,104 @@
+
+
+# Collaborative Text Editor (Custom)
+
+
+
+This example shows how to build a custom collaborative text editor with
+[Liveblocks](https://liveblocks.io), a plain `contenteditable`, and
+[Next.js](https://nextjs.org/), without using a rich-text editor framework.
+
+## Getting started
+
+Run the following command to try this example locally:
+
+```bash
+npx create-liveblocks-app@latest --example nextjs-livetext-custom --api-key
+```
+
+This will download the example and ask permission to open your browser, enabling
+you to automatically get your API key from your
+[liveblocks.io](https://liveblocks.io) account.
+
+### Manual setup
+
+
+
+### Dev server setup
+
+
+
+### Deploy on Vercel
+
+
+
+### Develop on CodeSandbox
+
+
diff --git a/examples/nextjs-livetext-custom/app/api/database.ts b/examples/nextjs-livetext-custom/app/api/database.ts
new file mode 100644
index 00000000000..09888d62223
--- /dev/null
+++ b/examples/nextjs-livetext-custom/app/api/database.ts
@@ -0,0 +1,83 @@
+// A mock database with example users
+const USER_INFO: Liveblocks["UserMeta"][] = [
+ {
+ id: "charlie.layne@example.com",
+ info: {
+ name: "Charlie Layne",
+ color: "#D583F0",
+ avatar: "https://liveblocks.io/avatars/avatar-1.png",
+ },
+ },
+ {
+ id: "mislav.abha@example.com",
+ info: {
+ name: "Mislav Abha",
+ color: "#F08385",
+ avatar: "https://liveblocks.io/avatars/avatar-2.png",
+ },
+ },
+ {
+ id: "tatum.paolo@example.com",
+ info: {
+ name: "Tatum Paolo",
+ color: "#F0D885",
+ avatar: "https://liveblocks.io/avatars/avatar-3.png",
+ },
+ },
+ {
+ id: "anjali.wanda@example.com",
+ info: {
+ name: "Anjali Wanda",
+ color: "#85EED6",
+ avatar: "https://liveblocks.io/avatars/avatar-4.png",
+ },
+ },
+ {
+ id: "jody.hekla@example.com",
+ info: {
+ name: "Jody Hekla",
+ color: "#85BBF0",
+ avatar: "https://liveblocks.io/avatars/avatar-5.png",
+ },
+ },
+ {
+ id: "emil.joyce@example.com",
+ info: {
+ name: "Emil Joyce",
+ color: "#8594F0",
+ avatar: "https://liveblocks.io/avatars/avatar-6.png",
+ },
+ },
+ {
+ id: "jory.quispe@example.com",
+ info: {
+ name: "Jory Quispe",
+ color: "#85DBF0",
+ avatar: "https://liveblocks.io/avatars/avatar-7.png",
+ },
+ },
+ {
+ id: "quinn.elton@example.com",
+ info: {
+ name: "Quinn Elton",
+ color: "#87EE85",
+ avatar: "https://liveblocks.io/avatars/avatar-8.png",
+ },
+ },
+];
+
+export function getRandomUser() {
+ return USER_INFO[Math.floor(Math.random() * 10) % USER_INFO.length];
+}
+
+export function getUser(id: string) {
+ return USER_INFO.find((u) => u.id === id) || undefined;
+}
+
+export async function getUsers(ids: string[]) {
+ return ids.map((id) => getUser(id));
+}
+
+export function getAllUsers() {
+ return USER_INFO;
+}
diff --git a/examples/nextjs-livetext-custom/app/api/liveblocks-auth/route.ts b/examples/nextjs-livetext-custom/app/api/liveblocks-auth/route.ts
new file mode 100644
index 00000000000..6d343f7719e
--- /dev/null
+++ b/examples/nextjs-livetext-custom/app/api/liveblocks-auth/route.ts
@@ -0,0 +1,35 @@
+import { Liveblocks } from "@liveblocks/node";
+import { NextRequest, NextResponse } from "next/server";
+import { getRandomUser } from "../database";
+
+/**
+ * Authenticating your Liveblocks application
+ * https://liveblocks.io/docs/authentication
+ */
+
+const liveblocks = new Liveblocks({
+ secret: process.env.LIVEBLOCKS_SECRET_KEY!,
+ baseUrl: process.env.NEXT_PUBLIC_LIVEBLOCKS_BASE_URL,
+});
+
+export async function POST(request: NextRequest) {
+ if (!process.env.LIVEBLOCKS_SECRET_KEY) {
+ return new NextResponse("Missing LIVEBLOCKS_SECRET_KEY", { status: 403 });
+ }
+
+ // Get the current user's unique id and info from your database
+ const user = getRandomUser();
+
+ // Create a session for the current user (access token auth)
+ const session = liveblocks.prepareSession(`${user.id}`, {
+ userInfo: user.info,
+ });
+
+ // Use a naming pattern to allow access to rooms with a wildcard
+ session.allow(`liveblocks:examples:*`, ["*:write"]);
+
+ // Authorize the user and return the result
+ const { status, body } = await session.authorize();
+
+ return new NextResponse(body, { status });
+}
diff --git a/examples/nextjs-livetext-custom/app/api/users/route.ts b/examples/nextjs-livetext-custom/app/api/users/route.ts
new file mode 100644
index 00000000000..c44713f6657
--- /dev/null
+++ b/examples/nextjs-livetext-custom/app/api/users/route.ts
@@ -0,0 +1,16 @@
+import { getUser } from "../database";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(request: NextRequest) {
+ const { searchParams } = new URL(request.url);
+ const userIds = searchParams.getAll("userIds");
+
+ if (!userIds || !Array.isArray(userIds)) {
+ return new NextResponse("Missing or invalid userIds", { status: 400 });
+ }
+
+ return NextResponse.json(
+ userIds.map((userId) => getUser(userId)?.info || null),
+ { status: 200 }
+ );
+}
diff --git a/examples/nextjs-livetext-custom/app/globals.css b/examples/nextjs-livetext-custom/app/globals.css
new file mode 100644
index 00000000000..b9b571beb2d
--- /dev/null
+++ b/examples/nextjs-livetext-custom/app/globals.css
@@ -0,0 +1,179 @@
+@import "@liveblocks/react-ui/styles.css";
+
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --background: #f3f3f3;
+ --surface: #ffffff;
+ --border: rgba(0, 0, 0, 0.08);
+ --text: #111827;
+ --text-subtle: #6b7280;
+ --accent: #8145ff;
+ --accent-soft: rgba(129, 69, 255, 0.12);
+}
+
+html,
+body,
+main {
+ height: 100%;
+}
+
+body {
+ background: var(--background);
+ color: var(--text);
+ -webkit-font-smoothing: antialiased;
+}
+
+main {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 24px;
+}
+
+.loading {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.loading img {
+ width: 64px;
+ height: 64px;
+ opacity: 0.2;
+}
+
+.editor-container {
+ width: 100%;
+ max-width: 640px;
+ background: var(--surface);
+ border-radius: 12px;
+ box-shadow:
+ 0 0 0 1px var(--border),
+ 0 2px 6px rgba(0, 0, 0, 0.04),
+ 0 8px 26px rgba(0, 0, 0, 0.06);
+ overflow: hidden;
+}
+
+.toolbar {
+ display: flex;
+ gap: 4px;
+ padding: 8px;
+ border-bottom: 1px solid var(--border);
+}
+
+.toolbar-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border: none;
+ border-radius: 6px;
+ background: transparent;
+ color: var(--text-subtle);
+ font-size: 14px;
+ font-family: inherit;
+ cursor: pointer;
+ transition:
+ background-color 0.1s ease,
+ color 0.1s ease;
+}
+
+.toolbar-button:hover {
+ background: rgba(0, 0, 0, 0.05);
+ color: var(--text);
+}
+
+.toolbar-button.active {
+ background: var(--accent-soft);
+ color: var(--accent);
+}
+
+.toolbar-button:disabled {
+ opacity: 0.4;
+ cursor: default;
+ pointer-events: none;
+}
+
+.toolbar-divider {
+ width: 1px;
+ align-self: stretch;
+ margin: 4px 4px;
+ background: var(--border);
+}
+
+.toolbar .avatars {
+ margin-left: auto;
+ align-self: center;
+}
+
+.editor-wrapper {
+ position: relative;
+}
+
+.remote-selections {
+ position: absolute;
+ inset: 0;
+ overflow: hidden;
+ pointer-events: none;
+}
+
+.remote-highlight {
+ position: absolute;
+ opacity: 0.2;
+ border-radius: 2px;
+}
+
+.remote-caret {
+ position: absolute;
+ border-radius: 1px;
+}
+
+.remote-caret-name {
+ position: absolute;
+ top: -17px;
+ left: 0;
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ padding: 1px 4px 1px 4px;
+ border-radius: 4px;
+ border-bottom-left-radius: 0;
+ color: #ffffff;
+ font-size: 11px;
+ font-weight: 500;
+ line-height: 16px;
+ white-space: nowrap;
+}
+
+.remote-caret-avatar {
+ width: 18px;
+ height: 18px;
+ border-radius: 9999;
+ position: absolute;
+ right: 100%;
+ margin-right: 4px;
+}
+
+.editor {
+ min-height: 280px;
+ padding: 24px 28px;
+ font-size: 16px;
+ line-height: 1.6;
+ white-space: pre-wrap;
+ overflow-wrap: break-word;
+ caret-color: var(--accent);
+ outline: none;
+}
+
+.editor::selection,
+.editor *::selection {
+ background: var(--accent-soft);
+}
diff --git a/examples/nextjs-livetext-custom/app/layout.tsx b/examples/nextjs-livetext-custom/app/layout.tsx
new file mode 100644
index 00000000000..14175b52885
--- /dev/null
+++ b/examples/nextjs-livetext-custom/app/layout.tsx
@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import { HelpButton } from "../components/help-button";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+ title: "Liveblocks",
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+
+
+
+ {children}
+ {
+ const searchParams = new URLSearchParams(
+ userIds.map((userId) => ["userIds", userId])
+ );
+ const response = await fetch(`/api/users?${searchParams}`);
+
+ if (!response.ok) {
+ throw new Error("Problem resolving users");
+ }
+
+ return await response.json();
+ }}
+ >
+
+
+
+ );
+}
+
+/**
+ * This function is used when deploying an example on liveblocks.io.
+ * You can ignore it completely if you run the example locally.
+ */
+function useExampleRoomId(roomId: string) {
+ const params = useSearchParams();
+ const exampleId = params?.get("exampleId");
+ return exampleId ? `${roomId}-${exampleId}` : roomId;
+}
diff --git a/examples/nextjs-livetext-custom/components/dom-selection.ts b/examples/nextjs-livetext-custom/components/dom-selection.ts
new file mode 100644
index 00000000000..bcd22aaf973
--- /dev/null
+++ b/examples/nextjs-livetext-custom/components/dom-selection.ts
@@ -0,0 +1,88 @@
+import type { SelectionRange } from "./live-text-formatting";
+
+// Converts a DOM position (node + offset) into a character offset into the editor
+export function getAbsoluteOffset(
+ element: HTMLElement,
+ node: Node,
+ offsetInNode: number
+): number {
+ const range = document.createRange();
+ range.selectNodeContents(element);
+ range.setEnd(node, offsetInNode);
+ return range.toString().length;
+}
+
+// Reads the DOM selection as character offsets, preserving direction (anchor → focus)
+export function getSelectionRange(
+ element: HTMLElement
+): SelectionRange | null {
+ const domSelection = window.getSelection();
+ if (
+ !domSelection ||
+ domSelection.anchorNode === null ||
+ domSelection.focusNode === null ||
+ !element.contains(domSelection.anchorNode) ||
+ !element.contains(domSelection.focusNode)
+ ) {
+ return null;
+ }
+
+ return {
+ anchor: getAbsoluteOffset(
+ element,
+ domSelection.anchorNode,
+ domSelection.anchorOffset
+ ),
+ focus: getAbsoluteOffset(
+ element,
+ domSelection.focusNode,
+ domSelection.focusOffset
+ ),
+ };
+}
+
+// Converts a character offset back into a DOM position inside the editor
+export function resolveDomPoint(
+ element: HTMLElement,
+ offset: number
+): { node: Node; offset: number } {
+ const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+ let remaining = offset;
+ let lastTextNode: Text | null = null;
+
+ let node = walker.nextNode();
+ while (node) {
+ const textNode = node as Text;
+ if (remaining <= textNode.length) {
+ return { node: textNode, offset: remaining };
+ }
+ remaining -= textNode.length;
+ lastTextNode = textNode;
+ node = walker.nextNode();
+ }
+
+ if (lastTextNode) {
+ return { node: lastTextNode, offset: lastTextNode.length };
+ }
+ return { node: element, offset: 0 };
+}
+
+// Applies character offsets as the DOM selection, preserving direction (anchor → focus)
+export function setSelectionRange(
+ element: HTMLElement,
+ range: SelectionRange
+): void {
+ const domSelection = window.getSelection();
+ if (!domSelection) {
+ return;
+ }
+
+ const anchor = resolveDomPoint(element, range.anchor);
+ const focus = resolveDomPoint(element, range.focus);
+ domSelection.setBaseAndExtent(
+ anchor.node,
+ anchor.offset,
+ focus.node,
+ focus.offset
+ );
+}
diff --git a/examples/nextjs-livetext-custom/components/editor.tsx b/examples/nextjs-livetext-custom/components/editor.tsx
new file mode 100644
index 00000000000..c89c57076e1
--- /dev/null
+++ b/examples/nextjs-livetext-custom/components/editor.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import type { LiveTextAttributes } from "@liveblocks/client";
+import type { CSSProperties } from "react";
+import { LiveCarets } from "./live-carets";
+import { Toolbar } from "./toolbar";
+import { useLiveTextEditor } from "./use-live-text-editor";
+
+// A collaborative text editor built on the LiveText primitive and a plain contenteditable
+// We generally recommend using a rich-text editor framework such aas Tiptap, BlockNote, Lexical, etc.
+// This is an example of a way you could construct your own using LiveText and presence.
+export function Editor() {
+ const {
+ editorRef,
+ text,
+ selection,
+ historyBatchActive,
+ endHistoryBatch,
+ toggleFormat,
+ } = useLiveTextEditor();
+
+ const plainText = text.map(([segmentText]) => segmentText).join("");
+
+ return (
+ = {
+ button: {
+ position: "fixed",
+ bottom: 16,
+ left: 16,
+ zIndex: 2147483000,
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ width: 36,
+ height: 36,
+ background: "#ffffff",
+ border: "1px solid #e5e5e5",
+ borderRadius: 9999,
+ boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+ color: "#737373",
+ cursor: "pointer",
+ },
+ backdrop: {
+ position: "fixed",
+ inset: 0,
+ zIndex: 2147483000,
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ padding: 16,
+ background: "rgba(23, 23, 23, 0.2)",
+ },
+ panel: {
+ background: "#ffffff",
+ border: "1px solid #e5e5e5",
+ borderRadius: 8,
+ boxShadow:
+ "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+ width: "100%",
+ maxWidth: 448,
+ maxHeight: "80vh",
+ overflowY: "auto",
+ },
+ header: {
+ display: "flex",
+ alignItems: "flex-start",
+ justifyContent: "space-between",
+ gap: 16,
+ padding: 20,
+ borderBottom: "1px solid #e5e5e5",
+ },
+ title: {
+ fontSize: 14,
+ fontWeight: 600,
+ color: "#171717",
+ margin: 0,
+ },
+ titleLink: {
+ color: "inherit",
+ textDecoration: "none",
+ },
+ desc: {
+ fontSize: 14,
+ color: "#737373",
+ marginTop: 4,
+ marginBottom: 0,
+ },
+ close: {
+ flexShrink: 0,
+ marginTop: -4,
+ marginRight: -4,
+ padding: 6,
+ borderRadius: 4,
+ border: "none",
+ background: "transparent",
+ color: "#737373",
+ cursor: "pointer",
+ lineHeight: 0,
+ },
+ list: {
+ listStyle: "none",
+ margin: 0,
+ padding: 20,
+ display: "flex",
+ flexDirection: "column",
+ gap: 16,
+ },
+ item: {
+ display: "flex",
+ alignItems: "flex-start",
+ gap: 16,
+ },
+ iconWrap: {
+ flexShrink: 0,
+ marginTop: 2,
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ width: 28,
+ height: 28,
+ borderRadius: 4,
+ background: "#f5f5f5",
+ color: "#404040",
+ },
+ featureTitle: {
+ fontSize: 14,
+ fontWeight: 500,
+ color: "#171717",
+ margin: 0,
+ },
+ featureDesc: {
+ fontSize: 14,
+ color: "#737373",
+ marginTop: 2,
+ marginBottom: 0,
+ },
+};
+
+const HOVER_CSS = `
+.lb-help-button:hover { background:#fafafa !important; color:#171717 !important; }
+.lb-help-title-link:hover { text-decoration: underline !important; }
+.lb-help-close:hover { background:#f5f5f5 !important; color:#171717 !important; }
+.lb-help, .lb-help * { box-sizing: border-box; }
+.lb-help h2 { font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; margin: 0 !important; }
+.lb-help h2 a { font-size: inherit !important; font-weight: inherit !important; }
+.lb-help h3 { font-size: 14px !important; font-weight: 500 !important; line-height: 1.4 !important; margin: 0 !important; }
+.lb-help p { font-size: 14px !important; line-height: 1.45 !important; }
+.lb-help ul { list-style: none !important; }
+`;
+
+export function HelpButton() {
+ const [isOpen, setIsOpen] = useState(false);
+
+ useEffect(() => {
+ if (!isOpen) {
+ return;
+ }
+
+ function onKeyDown(event: KeyboardEvent) {
+ if (event.key === "Escape") {
+ setIsOpen(false);
+ }
+ }
+
+ document.addEventListener("keydown", onKeyDown);
+ return () => document.removeEventListener("keydown", onKeyDown);
+ }, [isOpen]);
+
+ return (
+ <>
+
+
+
+ {isOpen && typeof document !== "undefined"
+ ? createPortal(
+
+
+ );
+}
+
+function BoldIcon() {
+ return (
+
+
+ );
+}
+
+function MergeIcon() {
+ return (
+
+
+ );
+}
+
+function UndoIcon() {
+ return (
+
+
+ );
+}
+
+function CodeIcon() {
+ return (
+
+
+ );
+}
diff --git a/examples/nextjs-livetext-custom/components/live-carets.tsx b/examples/nextjs-livetext-custom/components/live-carets.tsx
new file mode 100644
index 00000000000..35c9f26034a
--- /dev/null
+++ b/examples/nextjs-livetext-custom/components/live-carets.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import type { LiveTextData } from "@liveblocks/client";
+import { shallow, useOthersMapped } from "@liveblocks/react/suspense";
+import { Avatar } from "@liveblocks/react-ui";
+import type { CSSProperties, RefObject } from "react";
+import { useLayoutEffect, useState } from "react";
+import { resolveDomPoint } from "./dom-selection";
+
+type Rect = { left: number; top: number; width: number; height: number };
+
+type LiveCaret = {
+ connectionId: number;
+ userInfo: Liveblocks["UserMeta"]["info"];
+ caret: Rect;
+ highlights: Rect[];
+};
+
+// Renders every other user's caret and selection highlight, from presence
+export function LiveCarets({
+ editorRef,
+ text,
+}: {
+ editorRef: RefObject;
+ text: LiveTextData;
+}) {
+ const others = useOthersMapped(
+ (other) => ({
+ selection: other.presence.selection,
+ userInfo: other.info,
+ }),
+ shallow
+ );
+ const [liveCarets, setLiveCarets] = useState([]);
+
+ useLayoutEffect(() => {
+ const element = editorRef.current;
+ const container = element?.parentElement;
+ if (!element || !container) {
+ return;
+ }
+
+ const containerRect = container.getBoundingClientRect();
+ const documentLength = text.reduce(
+ (length, [segmentText]) => length + segmentText.length,
+ 0
+ );
+
+ function toLocalRect(rect: DOMRect): Rect {
+ return {
+ left: rect.left - containerRect.left,
+ top: rect.top - containerRect.top,
+ width: rect.width,
+ height: rect.height,
+ };
+ }
+
+ const next: LiveCaret[] = [];
+ for (const [connectionId, data] of others) {
+ const { selection, userInfo } = data;
+ if (!selection) {
+ continue;
+ }
+
+ const clamp = (offset: number) =>
+ Math.max(0, Math.min(offset, documentLength));
+ const anchor = clamp(selection.anchor);
+ const focus = clamp(selection.focus);
+ const start = Math.min(anchor, focus);
+ const end = Math.max(anchor, focus);
+
+ const startPoint = resolveDomPoint(element, start);
+ const endPoint = resolveDomPoint(element, end);
+ const range = document.createRange();
+ range.setStart(startPoint.node, startPoint.offset);
+ range.setEnd(endPoint.node, endPoint.offset);
+ const highlights =
+ start === end
+ ? []
+ : Array.from(range.getClientRects()).map(toLocalRect);
+
+ // The caret sits at the focus, which is before the anchor when selecting backwards
+ const focusPoint = resolveDomPoint(element, focus);
+ const caretRange = document.createRange();
+ caretRange.setStart(focusPoint.node, focusPoint.offset);
+ caretRange.collapse(true);
+ let caretRect: DOMRect | undefined = caretRange.getClientRects()[0];
+ if (!caretRect || caretRect.height === 0) {
+ // Collapsed ranges have no rect in some positions; fall back to the first line
+ const fallbackRange = document.createRange();
+ fallbackRange.selectNodeContents(element);
+ caretRect =
+ fallbackRange.getClientRects()[0] ??
+ fallbackRange.getBoundingClientRect();
+ }
+
+ next.push({
+ connectionId,
+ userInfo,
+ caret: {
+ ...toLocalRect(caretRect),
+ width: 2,
+ },
+ highlights,
+ });
+ }
+
+ setLiveCarets(next);
+ }, [others, text, editorRef]);
+
+ return (
+ ;
+ text: LiveTextData;
+ selection: SelectionRange | null;
+ historyBatchActive: boolean;
+ endHistoryBatch: () => void;
+ toggleFormat: (key: FormatKey) => void;
+} {
+ const text = useStorage((root) => root.text);
+ const room = useRoom();
+ const [root] = useStorageRoot();
+ const undo = useUndo();
+ const redo = useRedo();
+ const updateMyPresence = useUpdateMyPresence();
+
+ const editorRef = useRef(null);
+
+ // The ref is the source of truth; the state mirrors it for toolbar re-renders
+ const selectionRef = useRef(null);
+ const [selection, setSelection] = useState(null);
+ const historyBatchPausedRef = useRef(false);
+ const historyIdleTimerRef = useRef | null>(
+ null
+ );
+ const historyMaxTimerRef = useRef | null>(null);
+ const [historyBatchActive, setHistoryBatchActive] = useState(false);
+
+ // Latest document snapshot, readable from native event handlers
+ const textRef = useRef(text);
+ textRef.current = text;
+
+ const endHistoryBatch = useCallback(() => {
+ if (historyIdleTimerRef.current !== null) {
+ clearTimeout(historyIdleTimerRef.current);
+ historyIdleTimerRef.current = null;
+ }
+ if (historyMaxTimerRef.current !== null) {
+ clearTimeout(historyMaxTimerRef.current);
+ historyMaxTimerRef.current = null;
+ }
+ if (historyBatchPausedRef.current) {
+ room.history.resume();
+ historyBatchPausedRef.current = false;
+ setHistoryBatchActive(false);
+ }
+ }, [room]);
+
+ const continueHistoryBatch = useCallback(() => {
+ if (!historyBatchPausedRef.current) {
+ room.history.pause();
+ historyBatchPausedRef.current = true;
+ setHistoryBatchActive(true);
+ historyMaxTimerRef.current = setTimeout(endHistoryBatch, 2000);
+ }
+
+ if (historyIdleTimerRef.current !== null) {
+ clearTimeout(historyIdleTimerRef.current);
+ }
+ historyIdleTimerRef.current = setTimeout(endHistoryBatch, 1000);
+ }, [endHistoryBatch, room]);
+
+ useEffect(() => endHistoryBatch, [endHistoryBatch]);
+
+ const replaceText = useMutation(
+ ({ storage }, index: number, length: number, newText: string) => {
+ const liveText = storage.get("text");
+
+ // Inherit the preceding character's formatting, so typing inside bold text stays bold
+ const attributes =
+ newText.length > 0
+ ? attributesAt(liveText.toJSON(), index > 0 ? index - 1 : 0)
+ : undefined;
+
+ liveText.replace(index, length, newText, attributes);
+ },
+ []
+ );
+
+ const formatText = useMutation(
+ (
+ { storage },
+ index: number,
+ length: number,
+ attributes: LiveTextAttributesPatch
+ ) => {
+ storage.get("text").format(index, length, attributes);
+ },
+ []
+ );
+
+ function updateSelection(range: SelectionRange | null) {
+ const previous = selectionRef.current;
+ if (
+ previous !== null &&
+ range !== null &&
+ (previous.anchor !== range.anchor || previous.focus !== range.focus)
+ ) {
+ endHistoryBatch();
+ }
+ selectionRef.current = range;
+ setSelection(range);
+ updateMyPresence({ selection: range });
+ }
+
+ function toggleFormat(key: FormatKey) {
+ endHistoryBatch();
+ const data = textRef.current;
+ const range = selectionRef.current;
+ if (!range || range.anchor === range.focus) {
+ return;
+ }
+
+ const start = Math.min(range.anchor, range.focus);
+ const end = Math.max(range.anchor, range.focus);
+ const active = isFormatActive(data, range, key);
+ formatText(start, end - start, {
+ [key]: active ? null : true,
+ });
+ }
+
+ // Keep the selection offsets in sync with the DOM selection
+ useEffect(() => {
+ function handleSelectionChange() {
+ const element = editorRef.current;
+ if (!element) {
+ return;
+ }
+
+ const range = getSelectionRange(element);
+ if (range) {
+ updateSelection(range);
+ } else if (document.activeElement !== element) {
+ // Selection left the editor: hide our caret for others, keep local offsets for refocus
+ endHistoryBatch();
+ updateMyPresence({ selection: null });
+ }
+ }
+
+ document.addEventListener("selectionchange", handleSelectionChange);
+ return () =>
+ document.removeEventListener("selectionchange", handleSelectionChange);
+ }, []);
+
+ // Map the local selection through remote changes, so the caret stays in place
+ useEffect(() => {
+ if (root === null) {
+ return;
+ }
+
+ const liveText = root.get("text");
+ return room.subscribe(
+ liveText,
+ (updates) => {
+ for (const update of updates) {
+ if (update.type !== "LiveText") {
+ continue;
+ }
+
+ const current = selectionRef.current;
+ if (!current) {
+ continue;
+ }
+
+ let { anchor, focus } = current;
+ for (const change of update.updates) {
+ if (change.type === "insert") {
+ const length = change.text.length;
+ if (change.index < anchor) anchor += length;
+ if (change.index < focus) focus += length;
+ } else if (change.type === "delete") {
+ if (change.index < anchor) {
+ anchor = Math.max(change.index, anchor - change.length);
+ }
+ if (change.index < focus) {
+ focus = Math.max(change.index, focus - change.length);
+ }
+ }
+ }
+ selectionRef.current = { anchor, focus };
+ updateMyPresence({ selection: { anchor, focus } });
+ }
+ },
+ { isDeep: true }
+ );
+ }, [room, root, updateMyPresence]);
+
+ // Intercept every edit in the contenteditable and turn it into a LiveText operation
+ useEffect(() => {
+ const element = editorRef.current;
+ if (!element) {
+ return;
+ }
+
+ function setCaret(index: number) {
+ selectionRef.current = { anchor: index, focus: index };
+ setSelection({ anchor: index, focus: index });
+ updateMyPresence({ selection: { anchor: index, focus: index } });
+ }
+
+ function handleBeforeInput(event: InputEvent) {
+ event.preventDefault();
+ if (!element) {
+ return;
+ }
+
+ // Prefer the range the browser was about to modify (e.g. for word-deletion)
+ const targetRange = event.getTargetRanges?.()[0];
+ const range = targetRange
+ ? {
+ anchor: getAbsoluteOffset(
+ element,
+ targetRange.startContainer,
+ targetRange.startOffset
+ ),
+ focus: getAbsoluteOffset(
+ element,
+ targetRange.endContainer,
+ targetRange.endOffset
+ ),
+ }
+ : (getSelectionRange(element) ?? selectionRef.current);
+
+ if (!range) {
+ return;
+ }
+
+ const start = Math.min(range.anchor, range.focus);
+ const end = Math.max(range.anchor, range.focus);
+ const length = end - start;
+
+ switch (event.inputType) {
+ case "insertText":
+ case "insertReplacementText": {
+ const inserted =
+ event.data ?? event.dataTransfer?.getData("text/plain") ?? "";
+ if (inserted.length === 0 && length === 0) {
+ return;
+ }
+ continueHistoryBatch();
+ replaceText(start, length, inserted);
+ setCaret(start + inserted.length);
+ break;
+ }
+
+ case "insertFromPaste":
+ case "insertFromDrop": {
+ const inserted =
+ event.data ?? event.dataTransfer?.getData("text/plain") ?? "";
+ if (inserted.length === 0 && length === 0) {
+ return;
+ }
+ endHistoryBatch();
+ replaceText(start, length, inserted);
+ setCaret(start + inserted.length);
+ break;
+ }
+
+ case "insertParagraph":
+ case "insertLineBreak": {
+ endHistoryBatch();
+ replaceText(start, length, "\n");
+ setCaret(start + 1);
+ break;
+ }
+
+ case "deleteContentBackward":
+ case "deleteContentForward":
+ case "deleteWordBackward":
+ case "deleteWordForward":
+ case "deleteSoftLineBackward":
+ case "deleteHardLineBackward":
+ case "deleteContent": {
+ if (length === 0) {
+ return;
+ }
+ continueHistoryBatch();
+ replaceText(start, length, "");
+ setCaret(start);
+ break;
+ }
+
+ case "deleteByCut": {
+ if (length === 0) {
+ return;
+ }
+ endHistoryBatch();
+ replaceText(start, length, "");
+ setCaret(start);
+ break;
+ }
+
+ case "formatBold":
+ toggleFormat("bold");
+ break;
+ case "formatItalic":
+ toggleFormat("italic");
+ break;
+ case "formatStrikeThrough":
+ toggleFormat("strikethrough");
+ break;
+
+ case "historyUndo":
+ endHistoryBatch();
+ undo();
+ break;
+ case "historyRedo":
+ endHistoryBatch();
+ redo();
+ break;
+
+ default:
+ // Other input types (e.g. IME composition) are not supported
+ break;
+ }
+ }
+
+ function handleKeyDown(event: KeyboardEvent) {
+ if (!(event.metaKey || event.ctrlKey)) {
+ return;
+ }
+
+ const key = event.key.toLowerCase();
+ if (key === "b") {
+ event.preventDefault();
+ toggleFormat("bold");
+ } else if (key === "i") {
+ event.preventDefault();
+ toggleFormat("italic");
+ } else if (key === "x" && event.shiftKey) {
+ event.preventDefault();
+ toggleFormat("strikethrough");
+ } else if (key === "z") {
+ event.preventDefault();
+ endHistoryBatch();
+ if (event.shiftKey) {
+ redo();
+ } else {
+ undo();
+ }
+ }
+ }
+
+ element.addEventListener("beforeinput", handleBeforeInput);
+ element.addEventListener("keydown", handleKeyDown);
+ return () => {
+ element.removeEventListener("beforeinput", handleBeforeInput);
+ element.removeEventListener("keydown", handleKeyDown);
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [
+ replaceText,
+ formatText,
+ undo,
+ redo,
+ updateMyPresence,
+ continueHistoryBatch,
+ endHistoryBatch,
+ ]);
+
+ // Re-rendering resets the DOM selection, so restore it after every document change
+ useLayoutEffect(() => {
+ const element = editorRef.current;
+ if (!element || document.activeElement !== element) {
+ return;
+ }
+
+ const range = selectionRef.current;
+ if (range) {
+ setSelectionRange(element, range);
+ }
+ }, [text]);
+
+ return {
+ editorRef,
+ text,
+ selection,
+ historyBatchActive,
+ endHistoryBatch,
+ toggleFormat,
+ };
+}
diff --git a/examples/nextjs-livetext-custom/liveblocks.config.ts b/examples/nextjs-livetext-custom/liveblocks.config.ts
new file mode 100644
index 00000000000..e7dedcdaf9a
--- /dev/null
+++ b/examples/nextjs-livetext-custom/liveblocks.config.ts
@@ -0,0 +1,22 @@
+import type { LiveText } from "@liveblocks/client";
+
+declare global {
+ interface Liveblocks {
+ Presence: {
+ selection: { anchor: number; focus: number } | null;
+ };
+ Storage: {
+ text: LiveText;
+ };
+ UserMeta: {
+ id: string;
+ info: {
+ name: string;
+ avatar: string;
+ color: string;
+ };
+ };
+ }
+}
+
+export {};
diff --git a/examples/nextjs-livetext-custom/next.config.js b/examples/nextjs-livetext-custom/next.config.js
new file mode 100644
index 00000000000..037ab1a52bc
--- /dev/null
+++ b/examples/nextjs-livetext-custom/next.config.js
@@ -0,0 +1,7 @@
+/** @type {import("next").NextConfig} */
+const nextConfig = {
+ turbopack: { root: __dirname },
+ reactStrictMode: true,
+};
+
+module.exports = nextConfig;
diff --git a/examples/nextjs-livetext-custom/package-lock.json b/examples/nextjs-livetext-custom/package-lock.json
new file mode 100644
index 00000000000..4601f69ef70
--- /dev/null
+++ b/examples/nextjs-livetext-custom/package-lock.json
@@ -0,0 +1,3117 @@
+{
+ "name": "@liveblocks-examples/nextjs-livetext-custom",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "@liveblocks-examples/nextjs-livetext-custom",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@liveblocks/client": "3.23.0-exp2",
+ "@liveblocks/node": "3.23.0-exp2",
+ "@liveblocks/react": "3.23.0-exp2",
+ "@liveblocks/react-ui": "3.23.0-exp2",
+ "@types/node": "^18.11.19",
+ "@types/react": "^18.0.38",
+ "@types/react-dom": "^18.0.11",
+ "next": "^16.1.6",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
+ "typescript": "^5.2.2"
+ }
+ },
+ "node_modules/@emnapi/runtime": {
+ "version": "1.11.2",
+ "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.2.tgz",
+ "integrity": "sha512-kyOl3X0DuTiT1h2ft8r2fYO8JYtU9a9Xis/zBSiGArNaagCOWx90N1k2wxp18czFDH+OgcWGb5ZP/XMt3dcyPA==",
+ "license": "MIT",
+ "optional": true,
+ "dependencies": {
+ "tslib": "^2.4.0"
+ }
+ },
+ "node_modules/@floating-ui/core": {
+ "version": "1.8.0",
+ "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.8.0.tgz",
+ "integrity": "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@floating-ui/utils": "^0.2.12"
+ }
+ },
+ "node_modules/@floating-ui/dom": {
+ "version": "1.8.0",
+ "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.8.0.tgz",
+ "integrity": "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==",
+ "license": "MIT",
+ "dependencies": {
+ "@floating-ui/core": "^1.8.0",
+ "@floating-ui/utils": "^0.2.12"
+ }
+ },
+ "node_modules/@floating-ui/react-dom": {
+ "version": "2.1.9",
+ "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.9.tgz",
+ "integrity": "sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==",
+ "license": "MIT",
+ "dependencies": {
+ "@floating-ui/dom": "^1.8.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.8.0",
+ "react-dom": ">=16.8.0"
+ }
+ },
+ "node_modules/@floating-ui/utils": {
+ "version": "0.2.12",
+ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.12.tgz",
+ "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
+ "license": "MIT"
+ },
+ "node_modules/@img/colour": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
+ "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==",
+ "license": "MIT",
+ "optional": true,
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@img/sharp-darwin-arm64": {
+ "version": "0.34.5",
+ "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
+ "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+ "cpu": [
+ "arm64"
+ ],
+ "license": "Apache-2.0",
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "engines": {
+ "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+ },
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ },
+ "optionalDependencies": {
+ "@img/sharp-libvips-darwin-arm64": "1.2.4"
+ }
+ },
+ "node_modules/@img/sharp-darwin-x64": {
+ "version": "0.34.5",
+ "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
+ "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+ "cpu": [
+ "x64"
+ ],
+ "license": "Apache-2.0",
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "engines": {
+ "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+ },
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ },
+ "optionalDependencies": {
+ "@img/sharp-libvips-darwin-x64": "1.2.4"
+ }
+ },
+ "node_modules/@img/sharp-libvips-darwin-arm64": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
+ "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+ "cpu": [
+ "arm64"
+ ],
+ "license": "LGPL-3.0-or-later",
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ }
+ },
+ "node_modules/@img/sharp-libvips-darwin-x64": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
+ "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+ "cpu": [
+ "x64"
+ ],
+ "license": "LGPL-3.0-or-later",
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ }
+ },
+ "node_modules/@img/sharp-libvips-linux-arm": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
+ "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+ "cpu": [
+ "arm"
+ ],
+ "libc": [
+ "glibc"
+ ],
+ "license": "LGPL-3.0-or-later",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ }
+ },
+ "node_modules/@img/sharp-libvips-linux-arm64": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
+ "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+ "cpu": [
+ "arm64"
+ ],
+ "libc": [
+ "glibc"
+ ],
+ "license": "LGPL-3.0-or-later",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ }
+ },
+ "node_modules/@img/sharp-libvips-linux-ppc64": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
+ "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+ "cpu": [
+ "ppc64"
+ ],
+ "libc": [
+ "glibc"
+ ],
+ "license": "LGPL-3.0-or-later",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ }
+ },
+ "node_modules/@img/sharp-libvips-linux-riscv64": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
+ "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+ "cpu": [
+ "riscv64"
+ ],
+ "libc": [
+ "glibc"
+ ],
+ "license": "LGPL-3.0-or-later",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ }
+ },
+ "node_modules/@img/sharp-libvips-linux-s390x": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
+ "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+ "cpu": [
+ "s390x"
+ ],
+ "libc": [
+ "glibc"
+ ],
+ "license": "LGPL-3.0-or-later",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ }
+ },
+ "node_modules/@img/sharp-libvips-linux-x64": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
+ "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+ "cpu": [
+ "x64"
+ ],
+ "libc": [
+ "glibc"
+ ],
+ "license": "LGPL-3.0-or-later",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ }
+ },
+ "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
+ "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+ "cpu": [
+ "arm64"
+ ],
+ "libc": [
+ "musl"
+ ],
+ "license": "LGPL-3.0-or-later",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ }
+ },
+ "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
+ "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+ "cpu": [
+ "x64"
+ ],
+ "libc": [
+ "musl"
+ ],
+ "license": "LGPL-3.0-or-later",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ }
+ },
+ "node_modules/@img/sharp-linux-arm": {
+ "version": "0.34.5",
+ "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
+ "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+ "cpu": [
+ "arm"
+ ],
+ "libc": [
+ "glibc"
+ ],
+ "license": "Apache-2.0",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+ },
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ },
+ "optionalDependencies": {
+ "@img/sharp-libvips-linux-arm": "1.2.4"
+ }
+ },
+ "node_modules/@img/sharp-linux-arm64": {
+ "version": "0.34.5",
+ "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
+ "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+ "cpu": [
+ "arm64"
+ ],
+ "libc": [
+ "glibc"
+ ],
+ "license": "Apache-2.0",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+ },
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ },
+ "optionalDependencies": {
+ "@img/sharp-libvips-linux-arm64": "1.2.4"
+ }
+ },
+ "node_modules/@img/sharp-linux-ppc64": {
+ "version": "0.34.5",
+ "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
+ "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+ "cpu": [
+ "ppc64"
+ ],
+ "libc": [
+ "glibc"
+ ],
+ "license": "Apache-2.0",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+ },
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ },
+ "optionalDependencies": {
+ "@img/sharp-libvips-linux-ppc64": "1.2.4"
+ }
+ },
+ "node_modules/@img/sharp-linux-riscv64": {
+ "version": "0.34.5",
+ "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
+ "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+ "cpu": [
+ "riscv64"
+ ],
+ "libc": [
+ "glibc"
+ ],
+ "license": "Apache-2.0",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+ },
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ },
+ "optionalDependencies": {
+ "@img/sharp-libvips-linux-riscv64": "1.2.4"
+ }
+ },
+ "node_modules/@img/sharp-linux-s390x": {
+ "version": "0.34.5",
+ "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
+ "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+ "cpu": [
+ "s390x"
+ ],
+ "libc": [
+ "glibc"
+ ],
+ "license": "Apache-2.0",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+ },
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ },
+ "optionalDependencies": {
+ "@img/sharp-libvips-linux-s390x": "1.2.4"
+ }
+ },
+ "node_modules/@img/sharp-linux-x64": {
+ "version": "0.34.5",
+ "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
+ "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+ "cpu": [
+ "x64"
+ ],
+ "libc": [
+ "glibc"
+ ],
+ "license": "Apache-2.0",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+ },
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ },
+ "optionalDependencies": {
+ "@img/sharp-libvips-linux-x64": "1.2.4"
+ }
+ },
+ "node_modules/@img/sharp-linuxmusl-arm64": {
+ "version": "0.34.5",
+ "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
+ "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+ "cpu": [
+ "arm64"
+ ],
+ "libc": [
+ "musl"
+ ],
+ "license": "Apache-2.0",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+ },
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ },
+ "optionalDependencies": {
+ "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+ }
+ },
+ "node_modules/@img/sharp-linuxmusl-x64": {
+ "version": "0.34.5",
+ "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
+ "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+ "cpu": [
+ "x64"
+ ],
+ "libc": [
+ "musl"
+ ],
+ "license": "Apache-2.0",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+ },
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ },
+ "optionalDependencies": {
+ "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+ }
+ },
+ "node_modules/@img/sharp-wasm32": {
+ "version": "0.34.5",
+ "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
+ "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+ "cpu": [
+ "wasm32"
+ ],
+ "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+ "optional": true,
+ "dependencies": {
+ "@emnapi/runtime": "^1.7.0"
+ },
+ "engines": {
+ "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+ },
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ }
+ },
+ "node_modules/@img/sharp-win32-arm64": {
+ "version": "0.34.5",
+ "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
+ "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+ "cpu": [
+ "arm64"
+ ],
+ "license": "Apache-2.0 AND LGPL-3.0-or-later",
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "engines": {
+ "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+ },
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ }
+ },
+ "node_modules/@img/sharp-win32-ia32": {
+ "version": "0.34.5",
+ "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
+ "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+ "cpu": [
+ "ia32"
+ ],
+ "license": "Apache-2.0 AND LGPL-3.0-or-later",
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "engines": {
+ "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+ },
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ }
+ },
+ "node_modules/@img/sharp-win32-x64": {
+ "version": "0.34.5",
+ "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
+ "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+ "cpu": [
+ "x64"
+ ],
+ "license": "Apache-2.0 AND LGPL-3.0-or-later",
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "engines": {
+ "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+ },
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ }
+ },
+ "node_modules/@juggle/resize-observer": {
+ "version": "3.4.0",
+ "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+ "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==",
+ "license": "Apache-2.0"
+ },
+ "node_modules/@liveblocks/client": {
+ "version": "3.23.0-exp2",
+ "resolved": "https://registry.npmjs.org/@liveblocks/client/-/client-3.23.0-exp2.tgz",
+ "integrity": "sha512-iBNdhXFrg05uqGu6O1E53pgB1g6GWOOUOisACwMWDieRFPIK+lNRyal2wkC6b5OwKkZD5iCcseArDb2aVBAJVA==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@liveblocks/core": "3.23.0-exp2"
+ }
+ },
+ "node_modules/@liveblocks/core": {
+ "version": "3.23.0-exp2",
+ "resolved": "https://registry.npmjs.org/@liveblocks/core/-/core-3.23.0-exp2.tgz",
+ "integrity": "sha512-DGQR9EKKmBf8OZK4PPKNPYJkR+OAvMCrU8zqxOcej1N8pZ8nt0iFi9uty7AQC7f3h6l5qFDq9ediTk+KdUlNtg==",
+ "license": "Apache-2.0",
+ "peerDependencies": {
+ "@types/json-schema": "^7"
+ }
+ },
+ "node_modules/@liveblocks/node": {
+ "version": "3.23.0-exp2",
+ "resolved": "https://registry.npmjs.org/@liveblocks/node/-/node-3.23.0-exp2.tgz",
+ "integrity": "sha512-An43SblnfHBeb5RiwRJIiAfubZ18TNF6DzGkz/B0f5PXh6C9a6+BpF120jt3lNARePmDvJ63n8D6Le4RxadCFA==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@liveblocks/core": "3.23.0-exp2",
+ "@stablelib/base64": "^1.0.1",
+ "fast-sha256": "^1.3.0",
+ "marked": "^15.0.11",
+ "node-fetch": "^2.6.1"
+ }
+ },
+ "node_modules/@liveblocks/react": {
+ "version": "3.23.0-exp2",
+ "resolved": "https://registry.npmjs.org/@liveblocks/react/-/react-3.23.0-exp2.tgz",
+ "integrity": "sha512-TEVzOMTO2diDr/me3EmoMhg8QEXvrHJ2pRntb6g4j4Qlzor1/ELIJfWYwepQMge+TskbW1gvsf9sP0cpFlz1qw==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@liveblocks/client": "3.23.0-exp2",
+ "@liveblocks/core": "3.23.0-exp2"
+ },
+ "peerDependencies": {
+ "@types/react": "^18 || ^19",
+ "@types/react-dom": "^18 || ^19",
+ "react": "^18 || ^19 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@liveblocks/react-ui": {
+ "version": "3.23.0-exp2",
+ "resolved": "https://registry.npmjs.org/@liveblocks/react-ui/-/react-ui-3.23.0-exp2.tgz",
+ "integrity": "sha512-61Ahsfbh3LfSZN7wAVAvcN3ytOMGDUAB2P+R2VlVB/YQUvyekSpmCUiQrkFxDWCo4ihdLc/0wSA/F3XzfT1Jpg==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@floating-ui/react-dom": "^2.1.0",
+ "@liveblocks/client": "3.23.0-exp2",
+ "@liveblocks/core": "3.23.0-exp2",
+ "@liveblocks/react": "3.23.0-exp2",
+ "frimousse": "^0.2.0",
+ "marked": "^15.0.11",
+ "radix-ui": "^1.4.0",
+ "slate": "^0.110.2",
+ "slate-history": "^0.110.3",
+ "slate-hyperscript": "^0.100.0",
+ "slate-react": "^0.110.3"
+ },
+ "peerDependencies": {
+ "@types/react": "^18 || ^19",
+ "@types/react-dom": "^18 || ^19",
+ "react": "^18 || ^19 || ^19.0.0-rc",
+ "react-dom": "^18 || ^19 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@next/env": {
+ "version": "16.2.10",
+ "resolved": "https://registry.npmjs.org/@next/env/-/env-16.2.10.tgz",
+ "integrity": "sha512-zLPxg9M0MEHmygpj5OuxjQ+vHMiy/K7cSp74G8ecYolmgUWw0RwN02tF56npup/+qaI8JB97hQgS/r2Hb6QwVA==",
+ "license": "MIT"
+ },
+ "node_modules/@next/swc-darwin-arm64": {
+ "version": "16.2.10",
+ "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.2.10.tgz",
+ "integrity": "sha512-v9IdJCa0H0mbo+8z5zwUpOk1Vj7RjkcI5uNYf5Ws1y6szf/p3Mzl9hLaST8SCt6L9h8NGnruZcd2+o0NTNwDhA==",
+ "cpu": [
+ "arm64"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "engines": {
+ "node": ">= 10"
+ }
+ },
+ "node_modules/@next/swc-darwin-x64": {
+ "version": "16.2.10",
+ "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.2.10.tgz",
+ "integrity": "sha512-17IS0jJRViROGmA9uGdNR8VPJpfbnaVG7E9qhso5jDLkmyd0lSDORWxbcKINzcFqzZqGwGtMSnrFRxBpuUYjLQ==",
+ "cpu": [
+ "x64"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "engines": {
+ "node": ">= 10"
+ }
+ },
+ "node_modules/@next/swc-linux-arm64-gnu": {
+ "version": "16.2.10",
+ "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.2.10.tgz",
+ "integrity": "sha512-GRQRsRtuciNJvB54AvvuQTiq0oZtFwa1owQqtZD8wwnGpM2L39MV22kpI72YSXLKIyY40LC66EiLFv4PiicXxg==",
+ "cpu": [
+ "arm64"
+ ],
+ "libc": [
+ "glibc"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">= 10"
+ }
+ },
+ "node_modules/@next/swc-linux-arm64-musl": {
+ "version": "16.2.10",
+ "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.2.10.tgz",
+ "integrity": "sha512-zkN9MQYS7UQBro+FnISUq1itaQjXI9xqISzuQ+2bc921NcJ1x4yPCqrn77tVN6/dOOXaaWVX3k6/bR07pPwK+A==",
+ "cpu": [
+ "arm64"
+ ],
+ "libc": [
+ "musl"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">= 10"
+ }
+ },
+ "node_modules/@next/swc-linux-x64-gnu": {
+ "version": "16.2.10",
+ "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.2.10.tgz",
+ "integrity": "sha512-iCVJnwvrPYECvA6WM/7+oo+OiTvedIKLxtCLAZP4xZR3nXa1zmzZyLPbYCmWvpd4CvMYF1EMTafd0ii3DygLvA==",
+ "cpu": [
+ "x64"
+ ],
+ "libc": [
+ "glibc"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">= 10"
+ }
+ },
+ "node_modules/@next/swc-linux-x64-musl": {
+ "version": "16.2.10",
+ "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.2.10.tgz",
+ "integrity": "sha512-ov2g4H0dHY9bPoOU83m91hWT7Iq5qy13bUnyyshLU3HGR1Ownn0X9QpmDPc5iIUaahTp7f7LeGAhV4DSFtackw==",
+ "cpu": [
+ "x64"
+ ],
+ "libc": [
+ "musl"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">= 10"
+ }
+ },
+ "node_modules/@next/swc-win32-arm64-msvc": {
+ "version": "16.2.10",
+ "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.2.10.tgz",
+ "integrity": "sha512-DwAnhLX76HQiFFQNgWlcK+JzlnD1rZ+UK/WY0ZMI/deXpvgnesjNYrqcfo1JzBuz4Kf7o3brIBL0glI1junatA==",
+ "cpu": [
+ "arm64"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "engines": {
+ "node": ">= 10"
+ }
+ },
+ "node_modules/@next/swc-win32-x64-msvc": {
+ "version": "16.2.10",
+ "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.2.10.tgz",
+ "integrity": "sha512-0JXq3b85Jk9Jg4ntLUbXSPvoDw3gpZou7twuKdoFG2jOw635v7+IiXfTaa0TxVMyx78pUjnrVYwLgjKfX4e6/A==",
+ "cpu": [
+ "x64"
+ ],
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "engines": {
+ "node": ">= 10"
+ }
+ },
+ "node_modules/@radix-ui/number": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.2.tgz",
+ "integrity": "sha512-ceTwaxc4I5IOi97DgCotl3pqiyRGvffcc0oOsE2dQYaJOFIDsDt4VWG6xEbg1QePv9QWausCEIppud/tJ1wNig==",
+ "license": "MIT"
+ },
+ "node_modules/@radix-ui/primitive": {
+ "version": "1.1.5",
+ "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.5.tgz",
+ "integrity": "sha512-d86WIWFYNtGA0H/d8exstrTRTp7eWJYlYJbtNofxr/3ljupZYn6EFDG/Qgu/0Kc8v7yMUxySagqJsL1+PdYjWg==",
+ "license": "MIT"
+ },
+ "node_modules/@radix-ui/react-accessible-icon": {
+ "version": "1.1.11",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-accessible-icon/-/react-accessible-icon-1.1.11.tgz",
+ "integrity": "sha512-HQDOFTKwSnmUij6l54wYJJtxTAnxI71+YJLOrjm2ladFB8HAV5Jt7hwaZPhWTGBkYoW4+ZAOfNZrLDh/qvxSYA==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-visually-hidden": "1.2.7"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-accordion": {
+ "version": "1.2.16",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.16.tgz",
+ "integrity": "sha512-BpZJNmetujnGgUI6OX0jEhEmlA46WPqgub8Rv09Kyquwd0cc1ndMKpiPYCjmBU6KSSRPAMtgLpEoZSG/tdNIWQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-collapsible": "1.1.16",
+ "@radix-ui/react-collection": "1.1.12",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-direction": "1.1.2",
+ "@radix-ui/react-id": "1.1.2",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-use-controllable-state": "1.2.3"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-alert-dialog": {
+ "version": "1.1.19",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.19.tgz",
+ "integrity": "sha512-FA7n1f6D/DwGE0+AWxiY5LacNbbExQuEgMubeG06idEaH+mSLuf9dp/qBNqOnvbTQ+4gZ2ue1RATF1Ub91Mg5g==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-dialog": "1.1.19",
+ "@radix-ui/react-primitive": "2.1.7"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-arrow": {
+ "version": "1.1.11",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.11.tgz",
+ "integrity": "sha512-Kdil9BB1rIFC/khmf4hC35bn8701AJcizTU7G7cUbEbk5XqqbjDuHW60uUfKqO5WojjZcbAW51Q7P0hRmMLw8A==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-primitive": "2.1.7"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-aspect-ratio": {
+ "version": "1.1.11",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.11.tgz",
+ "integrity": "sha512-IUAhIVpBUvP5NNICjlaB1OFmtRLGqQqTF3ZOSGPoq3XeLXRFtHiWTRxSVEULgOd9GQR2c7tsYqDnhUennapZnw==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-primitive": "2.1.7"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-avatar": {
+ "version": "1.2.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.2.2.tgz",
+ "integrity": "sha512-sST0qh8GzOB7besQ3tMLWLyngnRuSk0gc/Hm+667KYKQFCt6Y6ZXv25WlqM7dIDK54ULCh5+CHmk4LIolzfz+A==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-use-callback-ref": "1.1.2",
+ "@radix-ui/react-use-is-hydrated": "0.1.1",
+ "@radix-ui/react-use-layout-effect": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-checkbox": {
+ "version": "1.3.7",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.7.tgz",
+ "integrity": "sha512-JroKHfQBfh+fDuzpPsBC+pESkhuq8ql4hljTguz8MWnS35cISr3d/Jhl9kYrB44FlDtxCArYdDvTx+BSsJ64rQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-presence": "1.1.7",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-use-controllable-state": "1.2.3",
+ "@radix-ui/react-use-previous": "1.1.2",
+ "@radix-ui/react-use-size": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-collapsible": {
+ "version": "1.1.16",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.16.tgz",
+ "integrity": "sha512-opfXRe6nnzyGmCDPx+l1Aqo/RbqWtQal2FnsBqF9hhePp6j0LsRoBaRxcMOlTv+uYTJVtWYZKg9t9wTe+BA/ZA==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-id": "1.1.2",
+ "@radix-ui/react-presence": "1.1.7",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-use-controllable-state": "1.2.3",
+ "@radix-ui/react-use-layout-effect": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-collection": {
+ "version": "1.1.12",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.12.tgz",
+ "integrity": "sha512-nb67INpE0IahJKN7EYPp9m9YGwYeKlnzxT3MwXVkgCskaSJia97kG4T0ywpjNUSSnoJk/uvk12V8vbrEHEj+/Q==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-slot": "1.3.0"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-compose-refs": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.3.tgz",
+ "integrity": "sha512-rYOP8OMnuuPMQF1uhPVlGNcCDlkokKqGFE3JcxFViIkAXP7EvFWUliJAstrapypaBLJNHbZL6jGhbVDGTwmVhA==",
+ "license": "MIT",
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-context": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.2.0.tgz",
+ "integrity": "sha512-fOE+JtN9rygNZkCnHRBEP0TAvLldlhyOxMsbwFvTP4nAs+nBmfnna+o/Zski2wkmY1YMrFC0aSzsHoLY47iLrg==",
+ "license": "MIT",
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-context-menu": {
+ "version": "2.3.3",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.3.3.tgz",
+ "integrity": "sha512-PS+gKE0z2prJ74Y0sM+brAGK4mYOHIR7TlcV5EJgUQ6E0xMvyswkK2X4yRqyganrzsRL+WCSKAPu0NQITICRWg==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-menu": "2.1.20",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-use-controllable-state": "1.2.3"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-dialog": {
+ "version": "1.1.19",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.19.tgz",
+ "integrity": "sha512-+HhbN2+YtkRgVirjZ2afMeutQRuGOrdkWR5+EFC58SJojGmtyNQwYzgi6tHBpOxvFHefMtPeHdgtjz0BOGxFQg==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-dismissable-layer": "1.1.15",
+ "@radix-ui/react-focus-guards": "1.1.4",
+ "@radix-ui/react-focus-scope": "1.1.12",
+ "@radix-ui/react-id": "1.1.2",
+ "@radix-ui/react-portal": "1.1.13",
+ "@radix-ui/react-presence": "1.1.7",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-slot": "1.3.0",
+ "@radix-ui/react-use-controllable-state": "1.2.3",
+ "aria-hidden": "^1.2.4",
+ "react-remove-scroll": "^2.7.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-direction": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.2.tgz",
+ "integrity": "sha512-C3vFhbyi4SW3PmbAi6Awpu4OzJtd0MxGurvSsYtr7p7nM8RNB3VAF3CUmnp2j50knpkrRcB7+ycVXzgLgF6yNA==",
+ "license": "MIT",
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-dismissable-layer": {
+ "version": "1.1.15",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.15.tgz",
+ "integrity": "sha512-b0XaRlzn2QKuo10XyNgi2DAJDf5XC9d1nD3FJcuvCjbR7+4Ad28zmZsLsqx+hvDEzMnRuZaZxZm9gYObV6RmRA==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-use-callback-ref": "1.1.2",
+ "@radix-ui/react-use-effect-event": "0.0.3"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-dropdown-menu": {
+ "version": "2.1.20",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.20.tgz",
+ "integrity": "sha512-slfm+rRaZRuQBvHq60lXvSVUPhid0IPtjSZzIuUlWZMUs01iYZNlGS3mJgRD3ChLQVBAYlKiL/tFyWGX+dz8Xw==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-id": "1.1.2",
+ "@radix-ui/react-menu": "2.1.20",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-use-controllable-state": "1.2.3"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-focus-guards": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.4.tgz",
+ "integrity": "sha512-cot/aB/mOm0IYVYTTmQcEEK1M48lZWi8FlYe5nDPQQ8NYZUlXEFgncJ9p2Kzer3RKSrY7cTTpEMLZKNo9QoP5Q==",
+ "license": "MIT",
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-focus-scope": {
+ "version": "1.1.12",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.12.tgz",
+ "integrity": "sha512-jjk/lqTeNL0azUx5ZYzVrl4NgaDIrdzTNE4mABV9yBFI7FQqN7pIgzV1bTleUezP2QiTGA1BFTqY8MegDgWX9A==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-use-callback-ref": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-form": {
+ "version": "0.1.12",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.1.12.tgz",
+ "integrity": "sha512-JTX94E4LDL91rzLg7X0mHPdxr0A8JEdVwZEmeOwZJSMDHCGW5DFtSlTSJozUyUs807IQmnvbfzKZFVCK5DmkqQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-id": "1.1.2",
+ "@radix-ui/react-label": "2.1.11",
+ "@radix-ui/react-primitive": "2.1.7"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-hover-card": {
+ "version": "1.1.19",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.19.tgz",
+ "integrity": "sha512-2KTgMLQtKvicznQgbindEI2RZ3QbDIwU5gabjUPwFJsormjGDz+rUvO4NANmYwzEEpTcTONUt33vBHIfTIVSfw==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-dismissable-layer": "1.1.15",
+ "@radix-ui/react-popper": "1.3.3",
+ "@radix-ui/react-portal": "1.1.13",
+ "@radix-ui/react-presence": "1.1.7",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-use-controllable-state": "1.2.3"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-id": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.2.tgz",
+ "integrity": "sha512-orBC88futVpqCmhX1p4cvquNHsELQ+w+vBJnuj3ftETI5bJb0bZn3Tqu3SWN2IOcPycTnMGnhwoermvISt72sA==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-use-layout-effect": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-label": {
+ "version": "2.1.11",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.11.tgz",
+ "integrity": "sha512-3PKvDDxOn62k0oV1n4QtNtD2vpu+zYjXR7ojLBPaO6SPvhy53yg0vAmgNeBQeJW5rV3dffoRG+HYfLBZuzw0CQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-primitive": "2.1.7"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-menu": {
+ "version": "2.1.20",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.20.tgz",
+ "integrity": "sha512-VsUrXxFe9d2ScbZF0fR/oPR1+qjyeLs5p0jzG8h90puMoA9bq4SirYlXbE+USRg9Q2qTeJSFNqjw2nts8jJe4w==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-collection": "1.1.12",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-direction": "1.1.2",
+ "@radix-ui/react-dismissable-layer": "1.1.15",
+ "@radix-ui/react-focus-guards": "1.1.4",
+ "@radix-ui/react-focus-scope": "1.1.12",
+ "@radix-ui/react-id": "1.1.2",
+ "@radix-ui/react-popper": "1.3.3",
+ "@radix-ui/react-portal": "1.1.13",
+ "@radix-ui/react-presence": "1.1.7",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-roving-focus": "1.1.15",
+ "@radix-ui/react-slot": "1.3.0",
+ "@radix-ui/react-use-callback-ref": "1.1.2",
+ "aria-hidden": "^1.2.4",
+ "react-remove-scroll": "^2.7.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-menubar": {
+ "version": "1.1.20",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.20.tgz",
+ "integrity": "sha512-gzFZvybgmwYsFBWDqanycIoEYnhyk8MMnuLamdFVHUZYGp4COM+sqXiwbnn0VMWqGLeeU7GV7jm+dXRa+Wufag==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-collection": "1.1.12",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-direction": "1.1.2",
+ "@radix-ui/react-id": "1.1.2",
+ "@radix-ui/react-menu": "2.1.20",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-roving-focus": "1.1.15",
+ "@radix-ui/react-use-controllable-state": "1.2.3"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-navigation-menu": {
+ "version": "1.2.18",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.18.tgz",
+ "integrity": "sha512-K9HiuxZ6xCwSaHcIuUpxyhy4w5gpwzWjh9dHTSbMN3Ix4qAyVObS9RlU3zMycb0PO3v9Tpk0BXMwWvXOUbVXew==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-collection": "1.1.12",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-direction": "1.1.2",
+ "@radix-ui/react-dismissable-layer": "1.1.15",
+ "@radix-ui/react-id": "1.1.2",
+ "@radix-ui/react-presence": "1.1.7",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-use-callback-ref": "1.1.2",
+ "@radix-ui/react-use-controllable-state": "1.2.3",
+ "@radix-ui/react-use-layout-effect": "1.1.2",
+ "@radix-ui/react-use-previous": "1.1.2",
+ "@radix-ui/react-visually-hidden": "1.2.7"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-one-time-password-field": {
+ "version": "0.1.12",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-one-time-password-field/-/react-one-time-password-field-0.1.12.tgz",
+ "integrity": "sha512-nQLu5OAcORDQp1EHAv6k3mJGV1hjMTw2NTGVAsGE1g/mWeNqAd1R5jyaAs3U+A8ZD/W8XNPY2yKT0ZdQnqo3NA==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/number": "1.1.2",
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-collection": "1.1.12",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-direction": "1.1.2",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-roving-focus": "1.1.15",
+ "@radix-ui/react-use-controllable-state": "1.2.3",
+ "@radix-ui/react-use-effect-event": "0.0.3",
+ "@radix-ui/react-use-is-hydrated": "0.1.1",
+ "@radix-ui/react-use-layout-effect": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-password-toggle-field": {
+ "version": "0.1.7",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-password-toggle-field/-/react-password-toggle-field-0.1.7.tgz",
+ "integrity": "sha512-gB1Mr8vzdv1XzDjrtJTXmL0JORRs1B4g7ngUs0F+H2VvMOwXTZMTmLCl0wZZ3m7ylX8TssI7NCvgiSHmLuTm/A==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-id": "1.1.2",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-use-controllable-state": "1.2.3",
+ "@radix-ui/react-use-effect-event": "0.0.3",
+ "@radix-ui/react-use-is-hydrated": "0.1.1"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-popover": {
+ "version": "1.1.19",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.19.tgz",
+ "integrity": "sha512-jkrTdQVxnIB8fpn0NyyxW9CTB5aCXZZelVz5z+Xmii6g5WxMqS3fInNslZ63puP39+Puu4jYohUK31y3dT87gQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-dismissable-layer": "1.1.15",
+ "@radix-ui/react-focus-guards": "1.1.4",
+ "@radix-ui/react-focus-scope": "1.1.12",
+ "@radix-ui/react-id": "1.1.2",
+ "@radix-ui/react-popper": "1.3.3",
+ "@radix-ui/react-portal": "1.1.13",
+ "@radix-ui/react-presence": "1.1.7",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-slot": "1.3.0",
+ "@radix-ui/react-use-controllable-state": "1.2.3",
+ "aria-hidden": "^1.2.4",
+ "react-remove-scroll": "^2.7.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-popper": {
+ "version": "1.3.3",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.3.3.tgz",
+ "integrity": "sha512-mS7dGpyjv6b+gsDjLF7e0ia1W4Im1B1hSCy2yuXlHuvnZxHKagfDaobt/KAKt27EpZMit2pss8eJBVyVjEWM+g==",
+ "license": "MIT",
+ "dependencies": {
+ "@floating-ui/react-dom": "^2.0.0",
+ "@radix-ui/react-arrow": "1.1.11",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-use-callback-ref": "1.1.2",
+ "@radix-ui/react-use-layout-effect": "1.1.2",
+ "@radix-ui/react-use-rect": "1.1.2",
+ "@radix-ui/react-use-size": "1.1.2",
+ "@radix-ui/rect": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-portal": {
+ "version": "1.1.13",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.13.tgz",
+ "integrity": "sha512-z3oXfmaHLJTF1wktbjgD6cn9jiEbq3WSondB10LIuIt2m2Ym4iJlrW04/euMwENDdWDdE7z+OuY7Qyp1YpRSwA==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-use-layout-effect": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-presence": {
+ "version": "1.1.7",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.7.tgz",
+ "integrity": "sha512-zBZ4QM5XG3JRanDmqXYf3MD6th4AFXFmgU6KNMFzUaV6F3uw9I5/zjMUvFriSEn5ewo1nxuibvyxJdmLlDcslA==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-use-layout-effect": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-primitive": {
+ "version": "2.1.7",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.7.tgz",
+ "integrity": "sha512-bC3NiwsprbxKjuon9l7X6BUTw7FPVzEYaL92MPEY5SCd/9hUTPXVFtVwRix7778wtRsVao+zE062gL79FZleeQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-slot": "1.3.0"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-progress": {
+ "version": "1.1.12",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.12.tgz",
+ "integrity": "sha512-ZPHyI0JyzoH/rP0tq2uRaIZTj/4s8+kAbqPz+e2N8+ejHvwPJ889dHhqn+vh7PNvNeq+boAoH9yzqeoShzwF2w==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-primitive": "2.1.7"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-radio-group": {
+ "version": "1.4.3",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.4.3.tgz",
+ "integrity": "sha512-WwZFjWV4s3aC1QtR3k04R+oANHtX2q6fgKlc7MCEiDNlnTxCZ3H8k3mHtEgVlOejystwk1WQgarQhNOQZ2bK1g==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-direction": "1.1.2",
+ "@radix-ui/react-presence": "1.1.7",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-roving-focus": "1.1.15",
+ "@radix-ui/react-use-controllable-state": "1.2.3",
+ "@radix-ui/react-use-previous": "1.1.2",
+ "@radix-ui/react-use-size": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-roving-focus": {
+ "version": "1.1.15",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.15.tgz",
+ "integrity": "sha512-40svmmugfM3mUN7VUDGVE1tQGOhyi8enlGD0CNJEcMM36C1f71PKM21DFgNHUfem0XnA+d8H8oN3Z9ZpJjSslg==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-collection": "1.1.12",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-direction": "1.1.2",
+ "@radix-ui/react-id": "1.1.2",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-use-callback-ref": "1.1.2",
+ "@radix-ui/react-use-controllable-state": "1.2.3",
+ "@radix-ui/react-use-is-hydrated": "0.1.1",
+ "@radix-ui/react-use-layout-effect": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-scroll-area": {
+ "version": "1.2.14",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.14.tgz",
+ "integrity": "sha512-bBODCWZK7JTbQLHs0uIP4f73wIWatakK4OS33UzkR1x897wu0PuO658a3f+6P2GEGyDzGYMuHRatMVoAk9WZTw==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/number": "1.1.2",
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-direction": "1.1.2",
+ "@radix-ui/react-presence": "1.1.7",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-use-callback-ref": "1.1.2",
+ "@radix-ui/react-use-layout-effect": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-select": {
+ "version": "2.3.3",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.3.3.tgz",
+ "integrity": "sha512-L5RQTXz6Anxsf9CCv+pTgiAsUpyVj7rJxsGtmhFaEOJ++cVfXucv4qWfsIO0AIB4NAhi3yovWGVMKKS1Xf1Wrg==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/number": "1.1.2",
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-collection": "1.1.12",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-direction": "1.1.2",
+ "@radix-ui/react-dismissable-layer": "1.1.15",
+ "@radix-ui/react-focus-guards": "1.1.4",
+ "@radix-ui/react-focus-scope": "1.1.12",
+ "@radix-ui/react-id": "1.1.2",
+ "@radix-ui/react-popper": "1.3.3",
+ "@radix-ui/react-portal": "1.1.13",
+ "@radix-ui/react-presence": "1.1.7",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-slot": "1.3.0",
+ "@radix-ui/react-use-callback-ref": "1.1.2",
+ "@radix-ui/react-use-controllable-state": "1.2.3",
+ "@radix-ui/react-use-layout-effect": "1.1.2",
+ "@radix-ui/react-use-previous": "1.1.2",
+ "@radix-ui/react-visually-hidden": "1.2.7",
+ "aria-hidden": "^1.2.4",
+ "react-remove-scroll": "^2.7.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-separator": {
+ "version": "1.1.11",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.11.tgz",
+ "integrity": "sha512-jRhe86+8PF7VZ1u14eOWVOuh2BuAhALg/FT1VcMC4OHedMTRUazDnDlKTt+yxo5cRNKHMfmvZ4sSQtWDeMV4CQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-primitive": "2.1.7"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-slider": {
+ "version": "1.4.3",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.4.3.tgz",
+ "integrity": "sha512-CWVVj+XaTom0SKCqw1EUgb0NuiLwS+N3OFG73mVEezKEjgNIvZiu0EevMelSSU+CbX3owbqJweG2gPU31WGC5A==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/number": "1.1.2",
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-collection": "1.1.12",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-direction": "1.1.2",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-use-controllable-state": "1.2.3",
+ "@radix-ui/react-use-layout-effect": "1.1.2",
+ "@radix-ui/react-use-previous": "1.1.2",
+ "@radix-ui/react-use-size": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-slot": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.3.0.tgz",
+ "integrity": "sha512-MojKku4U/miO8Av4Dkb+ctMAQx7JmY96LmtDQlAarCRtd7rN52QCSzBF+XAvr5S6coSVj9HEPBgHAHKEJVk/WA==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-compose-refs": "1.1.3"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-switch": {
+ "version": "1.3.3",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.3.3.tgz",
+ "integrity": "sha512-1+mlB4/lxJfk5tgJ4g+R5mUCbRpPE1T9+UsEyeLYbGgMtwiMgmuTnfKz4Mw1nHALHjuwyxw4MLd4cSHn6pNSlQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-use-controllable-state": "1.2.3",
+ "@radix-ui/react-use-previous": "1.1.2",
+ "@radix-ui/react-use-size": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-tabs": {
+ "version": "1.1.17",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.17.tgz",
+ "integrity": "sha512-nRyXnrAVCwjeXcHbvEbLS6ndbTeKHG1RqCP4A8Gw5L4cemDzPXdD8rAmr6wet0v57R69wGvuIIsFjHSVkZiMzQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-direction": "1.1.2",
+ "@radix-ui/react-id": "1.1.2",
+ "@radix-ui/react-presence": "1.1.7",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-roving-focus": "1.1.15",
+ "@radix-ui/react-use-controllable-state": "1.2.3"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-toast": {
+ "version": "1.2.19",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.19.tgz",
+ "integrity": "sha512-SxfVZfVOibWKWdkf0Xx1awW2d09fQu4V4PXDY1j5hi4MVf7MWdJZqTBJMa1KWtOr1S6GGtCk02nniZ0Iia+dHw==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-collection": "1.1.12",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-dismissable-layer": "1.1.15",
+ "@radix-ui/react-portal": "1.1.13",
+ "@radix-ui/react-presence": "1.1.7",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-use-callback-ref": "1.1.2",
+ "@radix-ui/react-use-controllable-state": "1.2.3",
+ "@radix-ui/react-use-layout-effect": "1.1.2",
+ "@radix-ui/react-visually-hidden": "1.2.7"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-toggle": {
+ "version": "1.1.14",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.14.tgz",
+ "integrity": "sha512-QI/hB65XKWACA66P64A+aHxtLUgHJeJLkaQa+awUNXT6T3swndtY5DojeHA+vldrTspMTtFBd7HfZ9QGbM1Qrw==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-use-controllable-state": "1.2.3"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-toggle-group": {
+ "version": "1.1.15",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.15.tgz",
+ "integrity": "sha512-gIC5Q+Xljg7lmUdzSuDoy0t97yZn1sZl00Ra37ZvKrYdWnQLU6sWLd09yG8cIB9jUAlQfHgJ2ACAG00MFwsqSQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-direction": "1.1.2",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-roving-focus": "1.1.15",
+ "@radix-ui/react-toggle": "1.1.14",
+ "@radix-ui/react-use-controllable-state": "1.2.3"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-toolbar": {
+ "version": "1.1.15",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-toolbar/-/react-toolbar-1.1.15.tgz",
+ "integrity": "sha512-t/iEuVjUnXXtrsGK40AA43uIx37sn3AqZ7oAVnPICK6lFJP6dzMzWR3U9b6eCfFjb6wtSEqkJ9Rn9xDjiOx20g==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-direction": "1.1.2",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-roving-focus": "1.1.15",
+ "@radix-ui/react-separator": "1.1.11",
+ "@radix-ui/react-toggle-group": "1.1.15"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-tooltip": {
+ "version": "1.2.12",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.12.tgz",
+ "integrity": "sha512-U3HoftgWnmla78vzQbLvKKb7bUYJxoiiqYFzp1wu/TBMyDqMZSuCl3aRICsD6EfVEwcJD2mumGDGUXLFVqQHKA==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-dismissable-layer": "1.1.15",
+ "@radix-ui/react-id": "1.1.2",
+ "@radix-ui/react-popper": "1.3.3",
+ "@radix-ui/react-portal": "1.1.13",
+ "@radix-ui/react-presence": "1.1.7",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-slot": "1.3.0",
+ "@radix-ui/react-use-controllable-state": "1.2.3",
+ "@radix-ui/react-visually-hidden": "1.2.7"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-use-callback-ref": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.2.tgz",
+ "integrity": "sha512-xCso9j1/u8sEgP1RNHjFrXJLApL8LiqOkI1R4ywuN00rxWdYg4oQXuwKLS3i0j5NWLromUD27/4nlxj2UFVvIw==",
+ "license": "MIT",
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-use-controllable-state": {
+ "version": "1.2.3",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.3.tgz",
+ "integrity": "sha512-PLzC90MS+ReootmjC597dvopoelpZ8Q61HJkDXZSExitIq7PL55vHNnesAHwguHK0aPfBnpdNzQtv1uliaqQrA==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-use-effect-event": "0.0.3",
+ "@radix-ui/react-use-layout-effect": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-use-effect-event": {
+ "version": "0.0.3",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.3.tgz",
+ "integrity": "sha512-6c8ZqvPTWILEKnyVkP53EGRCcpnJiKTC21sS/6R1GF5xKyHJJWQEPfkqlcgUkdRQivd6tb23abUwe4ngWmY0JA==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-use-layout-effect": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-use-escape-keydown": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.3.tgz",
+ "integrity": "sha512-3wEkMiPHXha/2VadZ68rYBcmYnPINVGl4Y3gtcM7fKRjANk0OscK+cdqBgUWdozb7YJxsh0vefM7vgAMHXOjqg==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-use-callback-ref": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-use-is-hydrated": {
+ "version": "0.1.1",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.1.tgz",
+ "integrity": "sha512-qwOiz4Tjo8CNnrOLAYUMXeZwDzXgXpvK4TKQPmWLECM9XoWvA6+0Z2/7Ag3A4ivjS4ovbLJPbskkxioFyBhr8A==",
+ "license": "MIT",
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-use-layout-effect": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.2.tgz",
+ "integrity": "sha512-jrBWOxZITuGcnjRCM2t2U5ZPkCLxD+Ym6DjfssS5haTj2iiak/DOb64JeN6OdLfLgptb6/e2kKR+ZuTrGoZTPA==",
+ "license": "MIT",
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-use-previous": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.2.tgz",
+ "integrity": "sha512-IGBQPtRFdhN6MQ8dbegVmBq1LVZluya3F1jWY+puIcQC3MHctRwTDSBWCkL/3ZcnMJLTMJ++Z+ktmvg0F89iCw==",
+ "license": "MIT",
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-use-rect": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.2.tgz",
+ "integrity": "sha512-d8a+bBY/FxikNPlgJJoaBHZX+zKVbWHYJGTLnLvveQgFSTntkGdEKv3JDtHrMS0DNYpllz2nRsTLGLKYttbpmw==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/rect": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-use-size": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.2.tgz",
+ "integrity": "sha512-giWQp+4mxjBPt4KZ0MmyuykFNWfbDxKt4x+fPkRYmgRFJSbCZFzUglvMb/Kjn38tm10YP4ufiQZDx3zna4LU6w==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-use-layout-effect": "1.1.2"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/react-visually-hidden": {
+ "version": "1.2.7",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.7.tgz",
+ "integrity": "sha512-1wNZBggTDK3GRuuQ6nP4k2yi7a6l7I5qbMPbZcRsrGsGVead/f/d5FhEzUvqFs0bcrDLx7n1zKQ3JvLR6whaaw==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/react-primitive": "2.1.7"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@radix-ui/rect": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.2.tgz",
+ "integrity": "sha512-xnXE7wG13PI+cxieVssYXlQJuYVRhH9NBoxt3KNwzghDIA69GMm7d4wXRouHIYjE+KvS6U/MsMO73NdS2MH9ZA==",
+ "license": "MIT"
+ },
+ "node_modules/@stablelib/base64": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/@stablelib/base64/-/base64-1.0.1.tgz",
+ "integrity": "sha512-1bnPQqSxSuc3Ii6MhBysoWCg58j97aUjuCSZrGSmDxNqtytIi0k8utUenAwTZN4V5mXXYGsVUI9zeBqy+jBOSQ==",
+ "license": "MIT"
+ },
+ "node_modules/@swc/helpers": {
+ "version": "0.5.15",
+ "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+ "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "tslib": "^2.8.0"
+ }
+ },
+ "node_modules/@types/json-schema": {
+ "version": "7.0.15",
+ "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+ "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+ "license": "MIT",
+ "peer": true
+ },
+ "node_modules/@types/node": {
+ "version": "18.19.130",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.130.tgz",
+ "integrity": "sha512-GRaXQx6jGfL8sKfaIDD6OupbIHBr9jv7Jnaml9tB7l4v068PAOXqfcujMMo5PhbIs6ggR1XODELqahT2R8v0fg==",
+ "license": "MIT",
+ "dependencies": {
+ "undici-types": "~5.26.4"
+ }
+ },
+ "node_modules/@types/prop-types": {
+ "version": "15.7.15",
+ "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+ "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+ "license": "MIT"
+ },
+ "node_modules/@types/react": {
+ "version": "18.3.31",
+ "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.31.tgz",
+ "integrity": "sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw==",
+ "license": "MIT",
+ "dependencies": {
+ "@types/prop-types": "*",
+ "csstype": "^3.2.2"
+ }
+ },
+ "node_modules/@types/react-dom": {
+ "version": "18.3.7",
+ "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
+ "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
+ "license": "MIT",
+ "peerDependencies": {
+ "@types/react": "^18.0.0"
+ }
+ },
+ "node_modules/aria-hidden": {
+ "version": "1.2.6",
+ "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+ "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+ "license": "MIT",
+ "dependencies": {
+ "tslib": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/baseline-browser-mapping": {
+ "version": "2.10.43",
+ "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.43.tgz",
+ "integrity": "sha512-AjYpR78kDWAY3Efj+cDTFH9t9SCoL7OoTp1BOb0mQV7S+6CiLwnWM3FyxhJtdPufDFKzmCSFoUncKjWgJEZTCQ==",
+ "license": "Apache-2.0",
+ "bin": {
+ "baseline-browser-mapping": "dist/cli.cjs"
+ },
+ "engines": {
+ "node": ">=6.0.0"
+ }
+ },
+ "node_modules/caniuse-lite": {
+ "version": "1.0.30001805",
+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001805.tgz",
+ "integrity": "sha512-52noaS3DubycKSXaU30TwPGIp+POyQSUVa5jBEq3vkRkY0kjyb3LQgvhU6WGyCcyXqVLWO0Cw0Q6BSdD0kUfVA==",
+ "funding": [
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/browserslist"
+ },
+ {
+ "type": "tidelift",
+ "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+ },
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
+ "license": "CC-BY-4.0"
+ },
+ "node_modules/client-only": {
+ "version": "0.0.1",
+ "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+ "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+ "license": "MIT"
+ },
+ "node_modules/compute-scroll-into-view": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.1.tgz",
+ "integrity": "sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==",
+ "license": "MIT"
+ },
+ "node_modules/csstype": {
+ "version": "3.2.3",
+ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+ "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+ "license": "MIT"
+ },
+ "node_modules/detect-libc": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+ "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+ "license": "Apache-2.0",
+ "optional": true,
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/detect-node-es": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+ "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+ "license": "MIT"
+ },
+ "node_modules/direction": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/direction/-/direction-1.0.4.tgz",
+ "integrity": "sha512-GYqKi1aH7PJXxdhTeZBFrg8vUBeKXi+cNprXsC1kpJcbcVnV9wBsrOu1cQEdG0WeQwlfHiy3XvnKfIrJ2R0NzQ==",
+ "license": "MIT",
+ "bin": {
+ "direction": "cli.js"
+ },
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/wooorm"
+ }
+ },
+ "node_modules/fast-sha256": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/fast-sha256/-/fast-sha256-1.3.0.tgz",
+ "integrity": "sha512-n11RGP/lrWEFI/bWdygLxhI+pVeo1ZYIVwvvPkW7azl/rOy+F3HYRZ2K5zeE9mmkhQppyv9sQFx0JM9UabnpPQ==",
+ "license": "Unlicense"
+ },
+ "node_modules/frimousse": {
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/frimousse/-/frimousse-0.2.0.tgz",
+ "integrity": "sha512-viSrsVQWKR4Q7xzC0lkx3Wu9i1+IHrth0QXn0nlIIJXpltwUnjkGXSTuoW7WHI5aJ4z49WR8E/pyQizFjlNtTA==",
+ "license": "MIT",
+ "workspaces": [
+ ".",
+ "site"
+ ],
+ "peerDependencies": {
+ "react": "^18 || ^19"
+ }
+ },
+ "node_modules/get-nonce": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+ "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/immer": {
+ "version": "10.2.0",
+ "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
+ "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
+ "license": "MIT",
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/immer"
+ }
+ },
+ "node_modules/is-hotkey": {
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/is-hotkey/-/is-hotkey-0.2.0.tgz",
+ "integrity": "sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw==",
+ "license": "MIT"
+ },
+ "node_modules/is-plain-object": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+ "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/js-tokens": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+ "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+ "license": "MIT"
+ },
+ "node_modules/lodash": {
+ "version": "4.18.1",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+ "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+ "license": "MIT"
+ },
+ "node_modules/loose-envify": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+ "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+ "license": "MIT",
+ "dependencies": {
+ "js-tokens": "^3.0.0 || ^4.0.0"
+ },
+ "bin": {
+ "loose-envify": "cli.js"
+ }
+ },
+ "node_modules/marked": {
+ "version": "15.0.12",
+ "resolved": "https://registry.npmjs.org/marked/-/marked-15.0.12.tgz",
+ "integrity": "sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==",
+ "license": "MIT",
+ "bin": {
+ "marked": "bin/marked.js"
+ },
+ "engines": {
+ "node": ">= 18"
+ }
+ },
+ "node_modules/nanoid": {
+ "version": "3.3.16",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.16.tgz",
+ "integrity": "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
+ "license": "MIT",
+ "bin": {
+ "nanoid": "bin/nanoid.cjs"
+ },
+ "engines": {
+ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+ }
+ },
+ "node_modules/next": {
+ "version": "16.2.10",
+ "resolved": "https://registry.npmjs.org/next/-/next-16.2.10.tgz",
+ "integrity": "sha512-2som5AVXb3kE6Yjine3/mNbBayYF58eguBWIVVUdr1y/L426xyVEgYxgBG+1QC34P2x5E+tcDup6XkuOAX3dCA==",
+ "license": "MIT",
+ "dependencies": {
+ "@next/env": "16.2.10",
+ "@swc/helpers": "0.5.15",
+ "baseline-browser-mapping": "^2.9.19",
+ "caniuse-lite": "^1.0.30001579",
+ "postcss": "8.4.31",
+ "styled-jsx": "5.1.6"
+ },
+ "bin": {
+ "next": "dist/bin/next"
+ },
+ "engines": {
+ "node": ">=20.9.0"
+ },
+ "optionalDependencies": {
+ "@next/swc-darwin-arm64": "16.2.10",
+ "@next/swc-darwin-x64": "16.2.10",
+ "@next/swc-linux-arm64-gnu": "16.2.10",
+ "@next/swc-linux-arm64-musl": "16.2.10",
+ "@next/swc-linux-x64-gnu": "16.2.10",
+ "@next/swc-linux-x64-musl": "16.2.10",
+ "@next/swc-win32-arm64-msvc": "16.2.10",
+ "@next/swc-win32-x64-msvc": "16.2.10",
+ "sharp": "^0.34.5"
+ },
+ "peerDependencies": {
+ "@opentelemetry/api": "^1.1.0",
+ "@playwright/test": "^1.51.1",
+ "babel-plugin-react-compiler": "*",
+ "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+ "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+ "sass": "^1.3.0"
+ },
+ "peerDependenciesMeta": {
+ "@opentelemetry/api": {
+ "optional": true
+ },
+ "@playwright/test": {
+ "optional": true
+ },
+ "babel-plugin-react-compiler": {
+ "optional": true
+ },
+ "sass": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/node-fetch": {
+ "version": "2.7.0",
+ "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+ "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+ "license": "MIT",
+ "dependencies": {
+ "whatwg-url": "^5.0.0"
+ },
+ "engines": {
+ "node": "4.x || >=6.0.0"
+ },
+ "peerDependencies": {
+ "encoding": "^0.1.0"
+ },
+ "peerDependenciesMeta": {
+ "encoding": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/picocolors": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+ "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+ "license": "ISC"
+ },
+ "node_modules/postcss": {
+ "version": "8.4.31",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+ "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+ "funding": [
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/postcss/"
+ },
+ {
+ "type": "tidelift",
+ "url": "https://tidelift.com/funding/github/npm/postcss"
+ },
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
+ "license": "MIT",
+ "dependencies": {
+ "nanoid": "^3.3.6",
+ "picocolors": "^1.0.0",
+ "source-map-js": "^1.0.2"
+ },
+ "engines": {
+ "node": "^10 || ^12 || >=14"
+ }
+ },
+ "node_modules/radix-ui": {
+ "version": "1.6.2",
+ "resolved": "https://registry.npmjs.org/radix-ui/-/radix-ui-1.6.2.tgz",
+ "integrity": "sha512-OwYUjzMwiInCUxgAWpPsavXC3Kh4iyi/49uU1/qZTG3RQDlvegyk1GOMiGvSkjua1RDb3JD3fo3eroL9FV4GQw==",
+ "license": "MIT",
+ "dependencies": {
+ "@radix-ui/primitive": "1.1.5",
+ "@radix-ui/react-accessible-icon": "1.1.11",
+ "@radix-ui/react-accordion": "1.2.16",
+ "@radix-ui/react-alert-dialog": "1.1.19",
+ "@radix-ui/react-arrow": "1.1.11",
+ "@radix-ui/react-aspect-ratio": "1.1.11",
+ "@radix-ui/react-avatar": "1.2.2",
+ "@radix-ui/react-checkbox": "1.3.7",
+ "@radix-ui/react-collapsible": "1.1.16",
+ "@radix-ui/react-collection": "1.1.12",
+ "@radix-ui/react-compose-refs": "1.1.3",
+ "@radix-ui/react-context": "1.2.0",
+ "@radix-ui/react-context-menu": "2.3.3",
+ "@radix-ui/react-dialog": "1.1.19",
+ "@radix-ui/react-direction": "1.1.2",
+ "@radix-ui/react-dismissable-layer": "1.1.15",
+ "@radix-ui/react-dropdown-menu": "2.1.20",
+ "@radix-ui/react-focus-guards": "1.1.4",
+ "@radix-ui/react-focus-scope": "1.1.12",
+ "@radix-ui/react-form": "0.1.12",
+ "@radix-ui/react-hover-card": "1.1.19",
+ "@radix-ui/react-label": "2.1.11",
+ "@radix-ui/react-menu": "2.1.20",
+ "@radix-ui/react-menubar": "1.1.20",
+ "@radix-ui/react-navigation-menu": "1.2.18",
+ "@radix-ui/react-one-time-password-field": "0.1.12",
+ "@radix-ui/react-password-toggle-field": "0.1.7",
+ "@radix-ui/react-popover": "1.1.19",
+ "@radix-ui/react-popper": "1.3.3",
+ "@radix-ui/react-portal": "1.1.13",
+ "@radix-ui/react-presence": "1.1.7",
+ "@radix-ui/react-primitive": "2.1.7",
+ "@radix-ui/react-progress": "1.1.12",
+ "@radix-ui/react-radio-group": "1.4.3",
+ "@radix-ui/react-roving-focus": "1.1.15",
+ "@radix-ui/react-scroll-area": "1.2.14",
+ "@radix-ui/react-select": "2.3.3",
+ "@radix-ui/react-separator": "1.1.11",
+ "@radix-ui/react-slider": "1.4.3",
+ "@radix-ui/react-slot": "1.3.0",
+ "@radix-ui/react-switch": "1.3.3",
+ "@radix-ui/react-tabs": "1.1.17",
+ "@radix-ui/react-toast": "1.2.19",
+ "@radix-ui/react-toggle": "1.1.14",
+ "@radix-ui/react-toggle-group": "1.1.15",
+ "@radix-ui/react-toolbar": "1.1.15",
+ "@radix-ui/react-tooltip": "1.2.12",
+ "@radix-ui/react-use-callback-ref": "1.1.2",
+ "@radix-ui/react-use-controllable-state": "1.2.3",
+ "@radix-ui/react-use-effect-event": "0.0.3",
+ "@radix-ui/react-use-escape-keydown": "1.1.3",
+ "@radix-ui/react-use-is-hydrated": "0.1.1",
+ "@radix-ui/react-use-layout-effect": "1.1.2",
+ "@radix-ui/react-use-size": "1.1.2",
+ "@radix-ui/react-visually-hidden": "1.2.7"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+ "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/react": {
+ "version": "18.3.1",
+ "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+ "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+ "license": "MIT",
+ "dependencies": {
+ "loose-envify": "^1.1.0"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/react-dom": {
+ "version": "18.3.1",
+ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+ "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+ "license": "MIT",
+ "dependencies": {
+ "loose-envify": "^1.1.0",
+ "scheduler": "^0.23.2"
+ },
+ "peerDependencies": {
+ "react": "^18.3.1"
+ }
+ },
+ "node_modules/react-remove-scroll": {
+ "version": "2.7.2",
+ "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
+ "integrity": "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==",
+ "license": "MIT",
+ "dependencies": {
+ "react-remove-scroll-bar": "^2.3.7",
+ "react-style-singleton": "^2.2.3",
+ "tslib": "^2.1.0",
+ "use-callback-ref": "^1.3.3",
+ "use-sidecar": "^1.1.3"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/react-remove-scroll-bar": {
+ "version": "2.3.8",
+ "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+ "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+ "license": "MIT",
+ "dependencies": {
+ "react-style-singleton": "^2.2.2",
+ "tslib": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/react-style-singleton": {
+ "version": "2.2.3",
+ "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+ "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+ "license": "MIT",
+ "dependencies": {
+ "get-nonce": "^1.0.0",
+ "tslib": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/scheduler": {
+ "version": "0.23.2",
+ "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+ "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+ "license": "MIT",
+ "dependencies": {
+ "loose-envify": "^1.1.0"
+ }
+ },
+ "node_modules/scroll-into-view-if-needed": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz",
+ "integrity": "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==",
+ "license": "MIT",
+ "dependencies": {
+ "compute-scroll-into-view": "^3.0.2"
+ }
+ },
+ "node_modules/semver": {
+ "version": "7.8.5",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
+ "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+ "license": "ISC",
+ "optional": true,
+ "bin": {
+ "semver": "bin/semver.js"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/sharp": {
+ "version": "0.34.5",
+ "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
+ "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
+ "hasInstallScript": true,
+ "license": "Apache-2.0",
+ "optional": true,
+ "dependencies": {
+ "@img/colour": "^1.0.0",
+ "detect-libc": "^2.1.2",
+ "semver": "^7.7.3"
+ },
+ "engines": {
+ "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+ },
+ "funding": {
+ "url": "https://opencollective.com/libvips"
+ },
+ "optionalDependencies": {
+ "@img/sharp-darwin-arm64": "0.34.5",
+ "@img/sharp-darwin-x64": "0.34.5",
+ "@img/sharp-libvips-darwin-arm64": "1.2.4",
+ "@img/sharp-libvips-darwin-x64": "1.2.4",
+ "@img/sharp-libvips-linux-arm": "1.2.4",
+ "@img/sharp-libvips-linux-arm64": "1.2.4",
+ "@img/sharp-libvips-linux-ppc64": "1.2.4",
+ "@img/sharp-libvips-linux-riscv64": "1.2.4",
+ "@img/sharp-libvips-linux-s390x": "1.2.4",
+ "@img/sharp-libvips-linux-x64": "1.2.4",
+ "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
+ "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
+ "@img/sharp-linux-arm": "0.34.5",
+ "@img/sharp-linux-arm64": "0.34.5",
+ "@img/sharp-linux-ppc64": "0.34.5",
+ "@img/sharp-linux-riscv64": "0.34.5",
+ "@img/sharp-linux-s390x": "0.34.5",
+ "@img/sharp-linux-x64": "0.34.5",
+ "@img/sharp-linuxmusl-arm64": "0.34.5",
+ "@img/sharp-linuxmusl-x64": "0.34.5",
+ "@img/sharp-wasm32": "0.34.5",
+ "@img/sharp-win32-arm64": "0.34.5",
+ "@img/sharp-win32-ia32": "0.34.5",
+ "@img/sharp-win32-x64": "0.34.5"
+ }
+ },
+ "node_modules/slate": {
+ "version": "0.110.2",
+ "resolved": "https://registry.npmjs.org/slate/-/slate-0.110.2.tgz",
+ "integrity": "sha512-4xGULnyMCiEQ0Ml7JAC1A6HVE6MNpPJU7Eq4cXh1LxlrR0dFXC3XC+rNfQtUJ7chHoPkws57x7DDiWiZAt+PBA==",
+ "license": "MIT",
+ "dependencies": {
+ "immer": "^10.0.3",
+ "is-plain-object": "^5.0.0",
+ "tiny-warning": "^1.0.3"
+ }
+ },
+ "node_modules/slate-history": {
+ "version": "0.110.3",
+ "resolved": "https://registry.npmjs.org/slate-history/-/slate-history-0.110.3.tgz",
+ "integrity": "sha512-sgdff4Usdflmw5ZUbhDkxFwCBQ2qlDKMMkF93w66KdV48vHOgN2BmLrf+2H8SdX8PYIpP/cTB0w8qWC2GwhDVA==",
+ "license": "MIT",
+ "dependencies": {
+ "is-plain-object": "^5.0.0"
+ },
+ "peerDependencies": {
+ "slate": ">=0.65.3"
+ }
+ },
+ "node_modules/slate-hyperscript": {
+ "version": "0.100.0",
+ "resolved": "https://registry.npmjs.org/slate-hyperscript/-/slate-hyperscript-0.100.0.tgz",
+ "integrity": "sha512-fb2KdAYg6RkrQGlqaIi4wdqz3oa0S4zKNBJlbnJbNOwa23+9FLD6oPVx9zUGqCSIpy+HIpOeqXrg0Kzwh/Ii4A==",
+ "license": "MIT",
+ "dependencies": {
+ "is-plain-object": "^5.0.0"
+ },
+ "peerDependencies": {
+ "slate": ">=0.65.3"
+ }
+ },
+ "node_modules/slate-react": {
+ "version": "0.110.3",
+ "resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.110.3.tgz",
+ "integrity": "sha512-AS8PPjwmsFS3Lq0MOEegLVlFoxhyos68G6zz2nW4sh3WeTXV7pX0exnwtY1a/docn+J3LGQO11aZXTenPXA/kg==",
+ "license": "MIT",
+ "dependencies": {
+ "@juggle/resize-observer": "^3.4.0",
+ "direction": "^1.0.4",
+ "is-hotkey": "^0.2.0",
+ "is-plain-object": "^5.0.0",
+ "lodash": "^4.17.21",
+ "scroll-into-view-if-needed": "^3.1.0",
+ "tiny-invariant": "1.3.1"
+ },
+ "peerDependencies": {
+ "react": ">=18.2.0",
+ "react-dom": ">=18.2.0",
+ "slate": ">=0.99.0"
+ }
+ },
+ "node_modules/source-map-js": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+ "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+ "license": "BSD-3-Clause",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/styled-jsx": {
+ "version": "5.1.6",
+ "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
+ "integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==",
+ "license": "MIT",
+ "dependencies": {
+ "client-only": "0.0.1"
+ },
+ "engines": {
+ "node": ">= 12.0.0"
+ },
+ "peerDependencies": {
+ "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
+ },
+ "peerDependenciesMeta": {
+ "@babel/core": {
+ "optional": true
+ },
+ "babel-plugin-macros": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/tiny-invariant": {
+ "version": "1.3.1",
+ "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
+ "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==",
+ "license": "MIT"
+ },
+ "node_modules/tiny-warning": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+ "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
+ "license": "MIT"
+ },
+ "node_modules/tr46": {
+ "version": "0.0.3",
+ "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+ "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+ "license": "MIT"
+ },
+ "node_modules/tslib": {
+ "version": "2.8.1",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+ "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+ "license": "0BSD"
+ },
+ "node_modules/typescript": {
+ "version": "5.9.3",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+ "license": "Apache-2.0",
+ "bin": {
+ "tsc": "bin/tsc",
+ "tsserver": "bin/tsserver"
+ },
+ "engines": {
+ "node": ">=14.17"
+ }
+ },
+ "node_modules/undici-types": {
+ "version": "5.26.5",
+ "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+ "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+ "license": "MIT"
+ },
+ "node_modules/use-callback-ref": {
+ "version": "1.3.3",
+ "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+ "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+ "license": "MIT",
+ "dependencies": {
+ "tslib": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/use-sidecar": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+ "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+ "license": "MIT",
+ "dependencies": {
+ "detect-node-es": "^1.1.0",
+ "tslib": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/webidl-conversions": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+ "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+ "license": "BSD-2-Clause"
+ },
+ "node_modules/whatwg-url": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+ "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+ "license": "MIT",
+ "dependencies": {
+ "tr46": "~0.0.3",
+ "webidl-conversions": "^3.0.0"
+ }
+ }
+ }
+}
diff --git a/examples/nextjs-livetext-custom/package.json b/examples/nextjs-livetext-custom/package.json
new file mode 100644
index 00000000000..496a8fc8d13
--- /dev/null
+++ b/examples/nextjs-livetext-custom/package.json
@@ -0,0 +1,25 @@
+{
+ "name": "@liveblocks-examples/nextjs-livetext-custom",
+ "description": "This example shows how to build a collaborative text editor with the Liveblocks LiveText primitive, a contenteditable div, and Next.js.",
+ "license": "Apache-2.0",
+ "private": true,
+ "scripts": {
+ "dev": "next dev",
+ "build": "next build",
+ "start": "next start",
+ "lint": "next lint"
+ },
+ "dependencies": {
+ "@liveblocks/client": "3.23.0-exp2",
+ "@liveblocks/node": "3.23.0-exp2",
+ "@liveblocks/react": "3.23.0-exp2",
+ "@liveblocks/react-ui": "3.23.0-exp2",
+ "@types/node": "^18.11.19",
+ "@types/react": "^18.0.38",
+ "@types/react-dom": "^18.0.11",
+ "next": "^16.1.6",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
+ "typescript": "^5.2.2"
+ }
+}
diff --git a/examples/nextjs-livetext-custom/tsconfig.json b/examples/nextjs-livetext-custom/tsconfig.json
new file mode 100644
index 00000000000..cf00ad7e976
--- /dev/null
+++ b/examples/nextjs-livetext-custom/tsconfig.json
@@ -0,0 +1,31 @@
+{
+ "compilerOptions": {
+ "target": "es2018",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "react-jsx",
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ]
+ },
+ "include": [
+ "next-env.d.ts",
+ ".next/types/**/*.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ ".next/dev/types/**/*.ts"
+ ],
+ "exclude": ["node_modules"]
+}
diff --git a/examples/nextjs-livetext-custom/vercel.json b/examples/nextjs-livetext-custom/vercel.json
new file mode 100644
index 00000000000..5d7edc91130
--- /dev/null
+++ b/examples/nextjs-livetext-custom/vercel.json
@@ -0,0 +1,4 @@
+{
+ "installCommand": "npm install",
+ "buildCommand": "npm run build"
+}
diff --git a/guides/pages/modifying-storage-via-rest-api-with-json-patch.mdx b/guides/pages/modifying-storage-via-rest-api-with-json-patch.mdx
index 1d77aed80b6..5e98fc69cb9 100644
--- a/guides/pages/modifying-storage-via-rest-api-with-json-patch.mdx
+++ b/guides/pages/modifying-storage-via-rest-api-with-json-patch.mdx
@@ -41,6 +41,7 @@ Storage is a tree of Liveblocks types:
[LiveObject](/docs/api-reference/liveblocks-client#LiveObject),
[LiveList](/docs/api-reference/liveblocks-client#LiveList), and
[LiveMap](/docs/api-reference/liveblocks-client#LiveMap). It can also contain
+[LiveText](/docs/api-reference/liveblocks-client#LiveText) and
[LiveFile](/docs/api-reference/liveblocks-client#LiveFile) nodes. When building
your patch:
@@ -51,6 +52,12 @@ your patch:
- **Nested values in `add` and `replace`:** If you pass a complex nested object
or array as the `value` for an `add` or `replace` operation, it is
automatically converted into LiveObjects and LiveLists on the server.
+- **LiveText values:** LiveText is a leaf node: only the LiveText node itself is
+ addressable, not fields under its serialized `data`. To replace its contents,
+ use `replace` with a string or a `LiveTextData` array, for example
+ `{ "op": "replace", "path": "/text", "value": [["Hello"]] }`. To remove a
+ LiveText, remove the whole node (for example, `/text`). LiveText versioning is
+ an internal detail and is not part of this API.
- **LiveFile values:** Create or replace a LiveFile by passing its Plain LSON
shape as the whole operation value:
`{ "liveblocksType": "LiveFile", "data": LiveFileData }`. Use the
@@ -134,6 +141,39 @@ fails and no changes are applied. Use `test` to guard against concurrent updates
]
```
+## LiveText examples
+
+LiveText contents can currently only be replaced as a whole. Use a string for
+plain text, or an array of segments where each segment is `[text]` or
+`[text, attributes]`.
+
+```json
+[
+ { "op": "replace", "path": "/text", "value": "Hello" },
+ {
+ "op": "replace",
+ "path": "/text",
+ "value": [["Hello", { "bold": true }], [" world"]]
+ }
+]
+```
+
+Paths below a LiveText node, such as `/text/data/0/0`, are not supported. A
+whole LiveText node can still be removed:
+
+```json
+[{ "op": "remove", "path": "/text" }]
+```
+
+Use `test` against the whole LiveText node for optimistic checks.
+
+```json
+[
+ { "op": "test", "path": "/text", "value": [["Original"]] },
+ { "op": "replace", "path": "/text", "value": "Updated" }
+]
+```
+
## LiveFile example
After uploading a Storage file, use the returned metadata to create an immutable
diff --git a/package.json b/package.json
index c130684077d..3ce2ac1a7ea 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
"test:ci": "turbo run test:ci",
"test:types": "turbo run test:types",
"test:deps": "turbo run test:deps",
+ "typecheck": "turbo run typecheck",
"lint": "turbo run lint",
"lint:package": "turbo run lint:package",
"format": "turbo run format",
diff --git a/packages/liveblocks-chat-sdk-adapter/package.json b/packages/liveblocks-chat-sdk-adapter/package.json
index e4b817a4143..0bdf7e2fff1 100644
--- a/packages/liveblocks-chat-sdk-adapter/package.json
+++ b/packages/liveblocks-chat-sdk-adapter/package.json
@@ -1,6 +1,6 @@
{
"name": "@liveblocks/chat-sdk-adapter",
- "version": "3.23.1",
+ "version": "3.24.0",
"description": "Liveblocks adapter for the Chat SDK.",
"license": "Apache-2.0",
"author": "Liveblocks Inc.",
@@ -30,6 +30,7 @@
"format": "(eslint --fix src/ || true) && prettier --write src/",
"lint": "eslint src/",
"lint:package": "publint --strict && attw --pack",
+ "typecheck": "tsc --noEmit",
"test": "vitest run",
"test:ci": "vitest run --coverage",
"test:watch": "vitest"
diff --git a/packages/liveblocks-client/package.json b/packages/liveblocks-client/package.json
index 7f8cc327ed7..e200da81925 100644
--- a/packages/liveblocks-client/package.json
+++ b/packages/liveblocks-client/package.json
@@ -1,6 +1,6 @@
{
"name": "@liveblocks/client",
- "version": "3.23.1",
+ "version": "3.24.0",
"description": "A client that lets you interact with Liveblocks servers. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.",
"license": "Apache-2.0",
"author": "Liveblocks Inc.",
@@ -30,6 +30,7 @@
"format": "(eslint --fix src/ || true) && prettier --write src/",
"lint": "eslint src/",
"lint:package": "publint --strict && attw --pack",
+ "typecheck": "tsc --noEmit",
"test": "vitest run --passWithNoTests",
"test:ci": "vitest run --passWithNoTests --coverage",
"test:types": "vitest run --config ./vitest.config.typecheck.ts",
diff --git a/packages/liveblocks-client/src/index.ts b/packages/liveblocks-client/src/index.ts
index bd2559e9755..cbe6af38a7b 100644
--- a/packages/liveblocks-client/src/index.ts
+++ b/packages/liveblocks-client/src/index.ts
@@ -51,6 +51,10 @@ export type {
LiveMapUpdate,
LiveObjectUpdate,
LiveStructure,
+ LiveTextAttributes,
+ LiveTextAttributesPatch,
+ LiveTextData,
+ LiveTextUpdate,
LostConnectionEvent,
Lson,
LsonObject,
@@ -91,6 +95,7 @@ export {
LiveList,
LiveMap,
LiveObject,
+ LiveText,
nanoid,
shallow,
stringifyCommentBody,
diff --git a/packages/liveblocks-codemirror/README.md b/packages/liveblocks-codemirror/README.md
new file mode 100644
index 00000000000..5352d2e977c
--- /dev/null
+++ b/packages/liveblocks-codemirror/README.md
@@ -0,0 +1,56 @@
+;
+ root: LiveObject<{ document: LiveText }>;
+ };
+
+ const parent = document.createElement("div");
+ document.body.appendChild(parent);
+
+ const updatePresence = vi.spyOn(room, "updatePresence");
+ const view = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(room, root.get("document")),
+ ...createLiveblocksPresencePlugin(room, root.get("document")),
+ ],
+ }),
+ parent,
+ });
+
+ onTestFinished(() => {
+ view.destroy();
+ parent.remove();
+ });
+
+ view.dispatch({
+ selection: EditorSelection.cursor(2),
+ changes: { from: 2, to: 2, insert: "!" },
+ });
+
+ const text = root.get("document");
+ expect(updatePresence).toHaveBeenCalledWith({
+ selection: {
+ anchor: text[kInternal].encodeIndex(3),
+ head: text[kInternal].encodeIndex(3),
+ version: text.version,
+ },
+ });
+ });
+
+ test("remote transactions do not broadcast selection", async () => {
+ const initialDoc = "abc";
+
+ const { room, root } = (await prepareIsolatedStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ root: LiveObject<{ document: LiveText }>;
+ };
+
+ const parent = document.createElement("div");
+ document.body.appendChild(parent);
+
+ const updatePresence = vi.spyOn(room, "updatePresence");
+ const view = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(room, root.get("document")),
+ ...createLiveblocksPresencePlugin(room, root.get("document")),
+ ],
+ }),
+ parent,
+ });
+
+ onTestFinished(() => {
+ view.destroy();
+ parent.remove();
+ });
+
+ updatePresence.mockClear();
+
+ view.dispatch({
+ changes: { from: 0, to: 0, insert: "Y" },
+ annotations: [Transaction.remote.of(true)],
+ });
+
+ expect(updatePresence).not.toHaveBeenCalled();
+ });
+
+ test("destroy clears presence", async () => {
+ const initialDoc = "abc";
+
+ const { room, root } = (await prepareIsolatedStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ root: LiveObject<{ document: LiveText }>;
+ };
+
+ const parent = document.createElement("div");
+ document.body.appendChild(parent);
+
+ const updatePresence = vi.spyOn(room, "updatePresence");
+ const view = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: createLiveblocksPresencePlugin(
+ room,
+ root.get("document")
+ ),
+ }),
+ parent,
+ });
+
+ updatePresence.mockClear();
+ view.destroy();
+ parent.remove();
+
+ expect(updatePresence).toHaveBeenCalledWith({ selection: null });
+ });
+ });
+
+ describe("remote → layers", () => {
+ test("displays existing remote cursors on mount", async () => {
+ const initialDoc = "a\nb";
+
+ const { room, refRoom, storage, refStorage } = (await prepareStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ refRoom: Room;
+ storage: { root: LiveObject<{ document: LiveText }> };
+ refStorage: { root: LiveObject<{ document: LiveText }> };
+ };
+
+ const text = storage.root.get("document");
+ room.updatePresence({
+ selection: {
+ anchor: text[kInternal].encodeIndex(1),
+ head: text[kInternal].encodeIndex(1),
+ version: text.version,
+ },
+ });
+
+ await vi.waitFor(() => {
+ expect(refRoom.getOthers()).toHaveLength(1);
+ });
+
+ const parentB = document.createElement("div");
+ parentB.style.width = "800px";
+ parentB.style.height = "400px";
+ document.body.appendChild(parentB);
+
+ const viewB = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(
+ refRoom,
+ refStorage.root.get("document")
+ ),
+ ...createLiveblocksPresencePlugin(
+ refRoom,
+ refStorage.root.get("document")
+ ),
+ ],
+ }),
+ parent: parentB,
+ });
+
+ onTestFinished(() => {
+ viewB.destroy();
+ parentB.remove();
+ });
+
+ const layoutRect = {
+ left: 0,
+ top: 0,
+ right: 800,
+ bottom: 400,
+ width: 800,
+ height: 400,
+ x: 0,
+ y: 0,
+ toJSON: () => ({}),
+ } as DOMRect;
+ vi.spyOn(viewB.scrollDOM, "getBoundingClientRect").mockReturnValue(
+ layoutRect
+ );
+ vi.spyOn(viewB.contentDOM, "getBoundingClientRect").mockReturnValue(
+ layoutRect
+ );
+ vi.spyOn(viewB, "coordsAtPos").mockImplementation((pos: number) => ({
+ left: 8 + pos * 8,
+ right: 9 + pos * 8,
+ top: 20,
+ bottom: 36,
+ }));
+
+ await new Promise((resolve) => {
+ viewB.requestMeasure({ read: () => null, write: () => resolve() });
+ });
+
+ expect(
+ viewB.scrollDOM.querySelector(".lb-remote-caretLayer .lb-remote-caret")
+ ).not.toBeNull();
+ });
+
+ test("remote presence renders carets in a layer, not inline widgets", async () => {
+ const initialDoc = "a\nb";
+
+ const { room, refRoom, storage, refStorage } = (await prepareStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ refRoom: Room;
+ storage: { root: LiveObject<{ document: LiveText }> };
+ refStorage: { root: LiveObject<{ document: LiveText }> };
+ };
+
+ const parentB = document.createElement("div");
+ parentB.style.width = "800px";
+ parentB.style.height = "400px";
+ document.body.appendChild(parentB);
+
+ const viewB = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(
+ refRoom,
+ refStorage.root.get("document")
+ ),
+ ...createLiveblocksPresencePlugin(
+ refRoom,
+ refStorage.root.get("document")
+ ),
+ ],
+ }),
+ parent: parentB,
+ });
+
+ onTestFinished(() => {
+ viewB.destroy();
+ parentB.remove();
+ });
+
+ const layoutRect = {
+ left: 0,
+ top: 0,
+ right: 800,
+ bottom: 400,
+ width: 800,
+ height: 400,
+ x: 0,
+ y: 0,
+ toJSON: () => ({}),
+ } as DOMRect;
+ vi.spyOn(viewB.scrollDOM, "getBoundingClientRect").mockReturnValue(
+ layoutRect
+ );
+ vi.spyOn(viewB.contentDOM, "getBoundingClientRect").mockReturnValue(
+ layoutRect
+ );
+ vi.spyOn(viewB, "coordsAtPos").mockImplementation((pos: number) => ({
+ left: 8 + pos * 8,
+ right: 9 + pos * 8,
+ top: 20,
+ bottom: 36,
+ }));
+
+ const text = storage.root.get("document");
+ room.updatePresence({
+ selection: {
+ anchor: text[kInternal].encodeIndex(1),
+ head: text[kInternal].encodeIndex(1),
+ version: text.version,
+ },
+ });
+
+ await vi.waitFor(() => {
+ expect(refRoom.getOthers()).toHaveLength(1);
+ });
+
+ await new Promise((resolve) => {
+ viewB.requestMeasure({ read: () => null, write: () => resolve() });
+ });
+
+ expect(viewB.contentDOM.querySelector(".lb-remote-caret")).toBeNull();
+ expect(viewB.contentDOM.querySelector(".cm-widgetBuffer")).toBeNull();
+ expect(
+ viewB.scrollDOM.querySelector(".lb-remote-caretLayer .lb-remote-caret")
+ ).not.toBeNull();
+ });
+
+ test("remote range selection renders in the selection layer", async () => {
+ const initialDoc = "Hello, world";
+
+ const { room, refRoom, storage, refStorage } = (await prepareStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ refRoom: Room;
+ storage: { root: LiveObject<{ document: LiveText }> };
+ refStorage: { root: LiveObject<{ document: LiveText }> };
+ };
+
+ const parentB = document.createElement("div");
+ parentB.style.width = "800px";
+ parentB.style.height = "400px";
+ document.body.appendChild(parentB);
+
+ const viewB = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(
+ refRoom,
+ refStorage.root.get("document")
+ ),
+ ...createLiveblocksPresencePlugin(
+ refRoom,
+ refStorage.root.get("document")
+ ),
+ ],
+ }),
+ parent: parentB,
+ });
+
+ onTestFinished(() => {
+ viewB.destroy();
+ parentB.remove();
+ });
+
+ const layoutRect = {
+ left: 0,
+ top: 0,
+ right: 800,
+ bottom: 400,
+ width: 800,
+ height: 400,
+ x: 0,
+ y: 0,
+ toJSON: () => ({}),
+ } as DOMRect;
+ vi.spyOn(viewB.scrollDOM, "getBoundingClientRect").mockReturnValue(
+ layoutRect
+ );
+ vi.spyOn(viewB.contentDOM, "getBoundingClientRect").mockReturnValue(
+ layoutRect
+ );
+ vi.spyOn(viewB, "coordsAtPos").mockImplementation((pos: number) => ({
+ left: 8 + pos * 8,
+ right: 9 + pos * 8,
+ top: 20,
+ bottom: 36,
+ }));
+
+ const text = storage.root.get("document");
+ room.updatePresence({
+ selection: {
+ anchor: text[kInternal].encodeIndex(0),
+ head: text[kInternal].encodeIndex(5),
+ version: text.version,
+ },
+ });
+
+ await vi.waitFor(() => {
+ expect(refRoom.getOthers()).toHaveLength(1);
+ });
+
+ await new Promise((resolve) => {
+ viewB.requestMeasure({ read: () => null, write: () => resolve() });
+ });
+
+ expect(viewB.contentDOM.querySelector(".lb-remote-selection")).toBeNull();
+ expect(
+ viewB.scrollDOM.querySelector(
+ ".lb-remote-selectionLayer .lb-remote-selection"
+ )
+ ).not.toBeNull();
+ });
+
+ test("cleared remote presence removes layer carets", async () => {
+ const initialDoc = "abc";
+
+ const { room, refRoom, storage, refStorage } = (await prepareStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ refRoom: Room;
+ storage: { root: LiveObject<{ document: LiveText }> };
+ refStorage: { root: LiveObject<{ document: LiveText }> };
+ };
+
+ const parentB = document.createElement("div");
+ document.body.appendChild(parentB);
+
+ const viewB = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(
+ refRoom,
+ refStorage.root.get("document")
+ ),
+ ...createLiveblocksPresencePlugin(
+ refRoom,
+ refStorage.root.get("document")
+ ),
+ ],
+ }),
+ parent: parentB,
+ });
+
+ onTestFinished(() => {
+ viewB.destroy();
+ parentB.remove();
+ });
+
+ const text = storage.root.get("document");
+ room.updatePresence({
+ selection: {
+ anchor: text[kInternal].encodeIndex(1),
+ head: text[kInternal].encodeIndex(1),
+ version: text.version,
+ },
+ });
+
+ await vi.waitFor(() => {
+ expect(refRoom.getOthers()[0]?.presence.selection).not.toBeNull();
+ });
+
+ room.updatePresence({ selection: null });
+
+ await vi.waitFor(() => {
+ expect(refRoom.getOthers()[0]?.presence.selection).toBeNull();
+ });
+
+ await new Promise((resolve) => {
+ viewB.requestMeasure({ read: () => null, write: () => resolve() });
+ });
+
+ expect(
+ viewB.scrollDOM.querySelector(".lb-remote-caretLayer .lb-remote-caret")
+ ).toBeNull();
+ });
+
+ test("undecodable presence is rebased after storage catches up", async () => {
+ const initialDoc = "abc";
+
+ const { room, refRoom, storage, refStorage } = (await prepareStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ refRoom: Room;
+ storage: { root: LiveObject<{ document: LiveText }> };
+ refStorage: { root: LiveObject<{ document: LiveText }> };
+ };
+
+ const parentA = document.createElement("div");
+ const parentB = document.createElement("div");
+ document.body.appendChild(parentA);
+ document.body.appendChild(parentB);
+
+ const viewA = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(room, storage.root.get("document")),
+ ...createLiveblocksPresencePlugin(
+ room,
+ storage.root.get("document")
+ ),
+ ],
+ }),
+ parent: parentA,
+ });
+
+ const viewB = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(
+ refRoom,
+ refStorage.root.get("document")
+ ),
+ ...createLiveblocksPresencePlugin(
+ refRoom,
+ refStorage.root.get("document")
+ ),
+ ],
+ }),
+ parent: parentB,
+ });
+
+ onTestFinished(() => {
+ viewA.destroy();
+ viewB.destroy();
+ parentA.remove();
+ parentB.remove();
+ });
+
+ const text = refStorage.root.get("document");
+ const decodeIndex = vi
+ .spyOn(text[kInternal], "decodeIndex")
+ .mockReturnValueOnce(null)
+ .mockReturnValueOnce(null);
+
+ room.updatePresence({
+ selection: {
+ anchor: storage.root.get("document")[kInternal].encodeIndex(2),
+ head: storage.root.get("document")[kInternal].encodeIndex(2),
+ version: storage.root.get("document").version + 1,
+ },
+ });
+
+ await vi.waitFor(() => {
+ expect(decodeIndex).toHaveBeenCalled();
+ });
+
+ decodeIndex.mockRestore();
+
+ viewA.dispatch({ changes: { from: 0, to: 0, insert: "Z" } });
+
+ await vi.waitFor(() => {
+ expect(refStorage.root.get("document").toString()).toBe("Zabc");
+ });
+
+ expect(viewA).toBeDefined();
+ expect(viewB).toBeDefined();
+ });
+ });
+
+ describe("multi-client", () => {
+ test("deleting a newline adjacent to a remote caret succeeds", async () => {
+ const initialDoc = "a\nb";
+
+ const { room, refRoom, storage, refStorage } = (await prepareStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ refRoom: Room;
+ storage: { root: LiveObject<{ document: LiveText }> };
+ refStorage: { root: LiveObject<{ document: LiveText }> };
+ };
+
+ const parentA = document.createElement("div");
+ const parentB = document.createElement("div");
+ document.body.appendChild(parentA);
+ document.body.appendChild(parentB);
+
+ const viewA = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(room, storage.root.get("document")),
+ ...createLiveblocksPresencePlugin(
+ room,
+ storage.root.get("document")
+ ),
+ ],
+ }),
+ parent: parentA,
+ });
+
+ const viewB = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(
+ refRoom,
+ refStorage.root.get("document")
+ ),
+ ...createLiveblocksPresencePlugin(
+ refRoom,
+ refStorage.root.get("document")
+ ),
+ ],
+ }),
+ parent: parentB,
+ });
+
+ onTestFinished(() => {
+ viewA.destroy();
+ viewB.destroy();
+ parentA.remove();
+ parentB.remove();
+ });
+
+ const text = storage.root.get("document");
+ room.updatePresence({
+ selection: {
+ anchor: text[kInternal].encodeIndex(1),
+ head: text[kInternal].encodeIndex(1),
+ version: text.version,
+ },
+ });
+
+ await vi.waitFor(() => {
+ expect(refRoom.getOthers()).toHaveLength(1);
+ });
+
+ viewB.dispatch({
+ selection: EditorSelection.cursor(2),
+ changes: { from: 1, to: 2 },
+ });
+
+ const editorTextB = viewB.state.doc.toString();
+
+ expect(editorTextB).toBe("ab");
+ expect(viewB.contentDOM.querySelector(".cm-widgetBuffer")).toBeNull();
+
+ expect(viewA).toBeDefined();
+ });
+ });
+});
diff --git a/packages/liveblocks-codemirror/src/__tests__/sync-plugin.test.ts b/packages/liveblocks-codemirror/src/__tests__/sync-plugin.test.ts
new file mode 100644
index 00000000000..4ab68caad1e
--- /dev/null
+++ b/packages/liveblocks-codemirror/src/__tests__/sync-plugin.test.ts
@@ -0,0 +1,1650 @@
+import {
+ ChangeSet,
+ EditorSelection,
+ EditorState,
+ Transaction,
+} from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import type { LiveObject, Room } from "@liveblocks/client";
+import type { LiveText } from "@liveblocks/core";
+import { CrdtType, kInternal, OpCode } from "@liveblocks/core";
+import { describe, expect, onTestFinished, test, vi } from "vitest";
+
+import {
+ createSerializedRoot,
+ prepareIsolatedStorageTest,
+ prepareStorageTest,
+} from "../../../liveblocks-core/src/__tests__/_MockWebSocketServer.setup";
+import { createLiveblocksSyncPlugin, isAdjacent } from "../sync-plugin";
+
+describe("createLiveblocksSyncPlugin", () => {
+ describe("local → storage", () => {
+ test("local edit updates LiveText storage", async () => {
+ const initialDoc = "Hello, world";
+
+ // Connect a real room to the mock WebSocket server with a LiveText node.
+ const { room, root } = (await prepareIsolatedStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ root: LiveObject<{ document: LiveText }>;
+ };
+
+ const parent = document.createElement("div");
+ document.body.appendChild(parent);
+
+ const view = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [createLiveblocksSyncPlugin(room, root.get("document"))],
+ }),
+ parent,
+ });
+
+ onTestFinished(() => {
+ view.destroy();
+ parent.remove();
+ });
+
+ // Simulate the user typing "!" at the end of the document.
+ view.dispatch({
+ changes: { from: initialDoc.length, insert: "!" },
+ });
+
+ const storageText = root.get("document").toString();
+ const editorText = view.state.doc.toString();
+
+ expect(storageText).toBe("Hello, world!");
+ expect(editorText).toBe("Hello, world!");
+ expect(editorText).toBe(storageText);
+ });
+
+ test("local storage mutations are not echoed back into the editor", async () => {
+ const initialDoc = "Hello, world";
+
+ const { room, root } = (await prepareIsolatedStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ root: LiveObject<{ document: LiveText }>;
+ };
+
+ const parent = document.createElement("div");
+ document.body.appendChild(parent);
+
+ const view = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [createLiveblocksSyncPlugin(room, root.get("document"))],
+ }),
+ parent,
+ });
+
+ onTestFinished(() => {
+ view.destroy();
+ parent.remove();
+ });
+
+ // Mutate storage directly on this client. The plugin should ignore it —
+ // the editor already owns local changes.
+ root.get("document").insert(0, "X");
+
+ expect(root.get("document").toString()).toBe("XHello, world");
+ expect(view.state.doc.toString()).toBe("Hello, world");
+ });
+
+ test("multi-change local edit updates LiveText storage", async () => {
+ const initialDoc = "Hello, world";
+
+ const { room, root } = (await prepareIsolatedStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ root: LiveObject<{ document: LiveText }>;
+ };
+
+ const parent = document.createElement("div");
+ document.body.appendChild(parent);
+
+ const view = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [createLiveblocksSyncPlugin(room, root.get("document"))],
+ }),
+ parent,
+ });
+
+ onTestFinished(() => {
+ view.destroy();
+ parent.remove();
+ });
+
+ // One transaction, two changes — exercises offset tracking in the plugin.
+ view.dispatch({
+ changes: [
+ { from: 0, to: 5, insert: "Hi" },
+ { from: 7, to: 12, insert: "everyone" },
+ ],
+ });
+
+ const storageText = root.get("document").toString();
+ const editorText = view.state.doc.toString();
+
+ expect(storageText).toBe("Hi, everyone");
+ expect(editorText).toBe("Hi, everyone");
+ expect(editorText).toBe(storageText);
+ });
+ });
+
+ describe("remote → editor", () => {
+ test("remote insert updates the editor document", async () => {
+ const initialDoc = "Hello, world";
+
+ const { room, root, applyRemoteOperations } =
+ (await prepareIsolatedStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ root: LiveObject<{ document: LiveText }>;
+ applyRemoteOperations: (
+ ops: Array<{
+ type: typeof OpCode.UPDATE_TEXT;
+ id: string;
+ baseVersion: number;
+ version: number;
+ ops: Array<{ type: "insert"; index: number; text: string }>;
+ }>
+ ) => void;
+ };
+
+ const parent = document.createElement("div");
+ document.body.appendChild(parent);
+
+ const view = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [createLiveblocksSyncPlugin(room, root.get("document"))],
+ }),
+ parent,
+ });
+
+ onTestFinished(() => {
+ view.destroy();
+ parent.remove();
+ });
+
+ applyRemoteOperations([
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "0:1",
+ baseVersion: 0,
+ version: 1,
+ ops: [{ type: "insert", index: initialDoc.length, text: "!" }],
+ },
+ ]);
+
+ const storageText = root.get("document").toString();
+ const editorText = view.state.doc.toString();
+
+ expect(storageText).toBe("Hello, world!");
+ expect(editorText).toBe("Hello, world!");
+ expect(editorText).toBe(storageText);
+ });
+
+ test("remote delete updates the editor document", async () => {
+ const initialDoc = "Hello, world";
+
+ const { room, root, applyRemoteOperations } =
+ (await prepareIsolatedStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ root: LiveObject<{ document: LiveText }>;
+ applyRemoteOperations: (
+ ops: Array<{
+ type: typeof OpCode.UPDATE_TEXT;
+ id: string;
+ baseVersion: number;
+ version: number;
+ ops: Array<{ type: "delete"; index: number; length: number }>;
+ }>
+ ) => void;
+ };
+
+ const parent = document.createElement("div");
+ document.body.appendChild(parent);
+
+ const view = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [createLiveblocksSyncPlugin(room, root.get("document"))],
+ }),
+ parent,
+ });
+
+ onTestFinished(() => {
+ view.destroy();
+ parent.remove();
+ });
+
+ applyRemoteOperations([
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "0:1",
+ baseVersion: 0,
+ version: 1,
+ ops: [{ type: "delete", index: 0, length: 1 }],
+ },
+ ]);
+
+ const storageText = root.get("document").toString();
+ const editorText = view.state.doc.toString();
+
+ expect(storageText).toBe("ello, world");
+ expect(editorText).toBe("ello, world");
+ expect(editorText).toBe(storageText);
+ });
+
+ test("remote multi-op update updates the editor document", async () => {
+ const initialDoc = "Hello, world";
+
+ const { room, root, applyRemoteOperations } =
+ (await prepareIsolatedStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ root: LiveObject<{ document: LiveText }>;
+ applyRemoteOperations: (
+ ops: Array<{
+ type: typeof OpCode.UPDATE_TEXT;
+ id: string;
+ baseVersion: number;
+ version: number;
+ ops: Array<
+ | { type: "insert"; index: number; text: string }
+ | { type: "delete"; index: number; length: number }
+ >;
+ }>
+ ) => void;
+ };
+
+ const parent = document.createElement("div");
+ document.body.appendChild(parent);
+
+ const view = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [createLiveblocksSyncPlugin(room, root.get("document"))],
+ }),
+ parent,
+ });
+
+ onTestFinished(() => {
+ view.destroy();
+ parent.remove();
+ });
+
+ // One remote update with delete + insert (replace "Hello" with "Hi").
+ applyRemoteOperations([
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "0:1",
+ baseVersion: 0,
+ version: 1,
+ ops: [
+ { type: "delete", index: 0, length: 5 },
+ { type: "insert", index: 0, text: "Hi" },
+ ],
+ },
+ ]);
+
+ const storageText = root.get("document").toString();
+ const editorText = view.state.doc.toString();
+
+ expect(storageText).toBe("Hi, world");
+ expect(editorText).toBe("Hi, world");
+ expect(editorText).toBe(storageText);
+ });
+
+ test("remote editor updates do not write back to storage", async () => {
+ const initialDoc = "Hello, world";
+
+ const { room, root, applyRemoteOperations } =
+ (await prepareIsolatedStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ root: LiveObject<{ document: LiveText }>;
+ applyRemoteOperations: (
+ ops: Array<{
+ type: typeof OpCode.UPDATE_TEXT;
+ id: string;
+ baseVersion: number;
+ version: number;
+ ops: Array<{ type: "insert"; index: number; text: string }>;
+ }>
+ ) => void;
+ };
+
+ const parent = document.createElement("div");
+ document.body.appendChild(parent);
+
+ const text = root.get("document");
+ const replaceSpy = vi.spyOn(text, "replace");
+
+ const view = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [createLiveblocksSyncPlugin(room, root.get("document"))],
+ }),
+ parent,
+ });
+
+ onTestFinished(() => {
+ replaceSpy.mockRestore();
+ view.destroy();
+ parent.remove();
+ });
+
+ applyRemoteOperations([
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "0:1",
+ baseVersion: 0,
+ version: 1,
+ ops: [{ type: "insert", index: initialDoc.length, text: "!" }],
+ },
+ ]);
+
+ // Remote ops update storage without going through LiveText.replace.
+ // The plugin must not write the editor change back through replace either.
+ expect(replaceSpy.mock.calls.length).toBe(0);
+ expect(text.toString()).toBe("Hello, world!");
+ expect(view.state.doc.toString()).toBe("Hello, world!");
+ });
+ });
+
+ describe("multi-client", () => {
+ test("edits on client A appear in client B's editor", async () => {
+ const initialDoc = "Hello, world";
+
+ const { room, refRoom, storage, refStorage } = (await prepareStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ refRoom: Room;
+ storage: { root: LiveObject<{ document: LiveText }> };
+ refStorage: { root: LiveObject<{ document: LiveText }> };
+ };
+
+ const parentA = document.createElement("div");
+ const parentB = document.createElement("div");
+ document.body.appendChild(parentA);
+ document.body.appendChild(parentB);
+
+ const viewA = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(room, storage.root.get("document")),
+ ],
+ }),
+ parent: parentA,
+ });
+
+ const viewB = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(
+ refRoom,
+ refStorage.root.get("document")
+ ),
+ ],
+ }),
+ parent: parentB,
+ });
+
+ onTestFinished(() => {
+ viewA.destroy();
+ viewB.destroy();
+ parentA.remove();
+ parentB.remove();
+ });
+
+ viewA.dispatch({
+ changes: { from: initialDoc.length, insert: "!" },
+ });
+
+ const storageText = storage.root.get("document").toString();
+ const refStorageText = refStorage.root.get("document").toString();
+ const editorTextA = viewA.state.doc.toString();
+ const editorTextB = viewB.state.doc.toString();
+
+ expect(storageText).toBe("Hello, world!");
+ expect(refStorageText).toBe("Hello, world!");
+ expect(editorTextA).toBe("Hello, world!");
+ expect(editorTextB).toBe("Hello, world!");
+ expect(editorTextA).toBe(editorTextB);
+ });
+
+ test("concurrent edits on both clients converge", async () => {
+ const initialDoc = "Hello, world";
+
+ const { room, refRoom, storage, refStorage, applyRemoteOperations } =
+ (await prepareStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ refRoom: Room;
+ storage: { root: LiveObject<{ document: LiveText }> };
+ refStorage: { root: LiveObject<{ document: LiveText }> };
+ applyRemoteOperations: (
+ ops: Array<{
+ type: typeof OpCode.UPDATE_TEXT;
+ id: string;
+ baseVersion: number;
+ version: number;
+ ops: Array<{ type: "insert"; index: number; text: string }>;
+ }>
+ ) => void;
+ };
+
+ const parentA = document.createElement("div");
+ const parentB = document.createElement("div");
+ document.body.appendChild(parentA);
+ document.body.appendChild(parentB);
+
+ const viewA = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(room, storage.root.get("document")),
+ ],
+ }),
+ parent: parentA,
+ });
+
+ const viewB = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(
+ refRoom,
+ refStorage.root.get("document")
+ ),
+ ],
+ }),
+ parent: parentB,
+ });
+
+ onTestFinished(() => {
+ viewA.destroy();
+ viewB.destroy();
+ parentA.remove();
+ parentB.remove();
+ });
+
+ // Client A inserts at the end. prepareStorageTest relays subject ops to refRoom.
+ viewA.dispatch({
+ changes: { from: initialDoc.length, insert: "!" },
+ });
+
+ // Client B inserts at the start on its own connection.
+ viewB.dispatch({
+ changes: { from: 0, insert: "X" },
+ });
+
+ // Mock server only relays subject → ref, not ref → subject. Apply B's op on A.
+ const baseVersion = storage.root.get("document").version;
+ applyRemoteOperations([
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "0:1",
+ baseVersion,
+ version: baseVersion + 1,
+ ops: [{ type: "insert", index: 0, text: "X" }],
+ },
+ ]);
+
+ const storageTextA = storage.root.get("document").toString();
+ const storageTextB = refStorage.root.get("document").toString();
+ const editorTextA = viewA.state.doc.toString();
+ const editorTextB = viewB.state.doc.toString();
+
+ expect(storageTextA).toBe("XHello, world!");
+ expect(storageTextB).toBe("XHello, world!");
+ expect(editorTextA).toBe("XHello, world!");
+ expect(editorTextB).toBe("XHello, world!");
+ expect(editorTextA).toBe(editorTextB);
+ });
+ });
+
+ describe("undo / redo", () => {
+ describe("document", () => {
+ test("undo reverts the editor and storage", async () => {
+ const initialDoc = "Hello, world";
+
+ const { room, root } = (await prepareIsolatedStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ root: LiveObject<{ document: LiveText }>;
+ };
+
+ const parent = document.createElement("div");
+ document.body.appendChild(parent);
+
+ const view = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(room, root.get("document")),
+ ],
+ }),
+ parent,
+ });
+
+ onTestFinished(() => {
+ view.destroy();
+ parent.remove();
+ });
+
+ view.dispatch({
+ changes: { from: initialDoc.length, insert: "!" },
+ });
+
+ expect(root.get("document").toString()).toBe("Hello, world!");
+ expect(view.state.doc.toString()).toBe("Hello, world!");
+
+ room.history.resume();
+ room.history.undo();
+
+ const storageText = root.get("document").toString();
+ const editorText = view.state.doc.toString();
+
+ expect(storageText).toBe(initialDoc);
+ expect(editorText).toBe(initialDoc);
+ expect(editorText).toBe(storageText);
+ });
+
+ test("redo restores the editor and storage", async () => {
+ const initialDoc = "Hello, world";
+
+ const { room, root } = (await prepareIsolatedStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ root: LiveObject<{ document: LiveText }>;
+ };
+
+ const parent = document.createElement("div");
+ document.body.appendChild(parent);
+
+ const view = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(room, root.get("document")),
+ ],
+ }),
+ parent,
+ });
+
+ onTestFinished(() => {
+ view.destroy();
+ parent.remove();
+ });
+
+ view.dispatch({
+ changes: { from: initialDoc.length, insert: "!" },
+ });
+
+ expect(root.get("document").toString()).toBe("Hello, world!");
+ expect(view.state.doc.toString()).toBe("Hello, world!");
+
+ room.history.resume();
+ room.history.undo();
+
+ expect(root.get("document").toString()).toBe(initialDoc);
+ expect(view.state.doc.toString()).toBe(initialDoc);
+
+ room.history.resume();
+ room.history.redo();
+
+ const storageText = root.get("document").toString();
+ const editorText = view.state.doc.toString();
+
+ expect(storageText).toBe("Hello, world!");
+ expect(editorText).toBe("Hello, world!");
+ expect(editorText).toBe(storageText);
+ });
+ });
+
+ describe("grouping", () => {
+ test("consecutive typing is undone in one step", async () => {
+ const initialDoc = "Hello, world";
+
+ const { room, root } = (await prepareIsolatedStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ root: LiveObject<{ document: LiveText }>;
+ };
+
+ const parent = document.createElement("div");
+ document.body.appendChild(parent);
+
+ const view = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(room, root.get("document")),
+ ],
+ }),
+ parent,
+ });
+
+ onTestFinished(() => {
+ view.destroy();
+ parent.remove();
+ });
+
+ for (const char of "!!") {
+ view.dispatch({
+ changes: {
+ from: view.state.doc.length,
+ insert: char,
+ },
+ selection: EditorSelection.single(view.state.doc.length + 1),
+ annotations: [
+ Transaction.userEvent.of("input.type"),
+ Transaction.time.of(Date.now()),
+ ],
+ });
+ }
+
+ expect(view.state.doc.toString()).toBe("Hello, world!!");
+
+ room.history.resume();
+ room.history.undo();
+
+ expect(view.state.doc.toString()).toBe(initialDoc);
+ expect(root.get("document").toString()).toBe(initialDoc);
+ });
+
+ test("non-adjacent edits undo separately", async () => {
+ const initialDoc = "012345678901234567890";
+
+ const { room, root } = (await prepareIsolatedStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ root: LiveObject<{ document: LiveText }>;
+ };
+
+ const parent = document.createElement("div");
+ document.body.appendChild(parent);
+
+ const view = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(room, root.get("document")),
+ ],
+ }),
+ parent,
+ });
+
+ onTestFinished(() => {
+ view.destroy();
+ parent.remove();
+ });
+
+ const time = Date.now();
+ view.dispatch({
+ changes: { from: 0, insert: "A" },
+ selection: EditorSelection.single(1),
+ annotations: [
+ Transaction.userEvent.of("input.type"),
+ Transaction.time.of(time),
+ ],
+ });
+ view.dispatch({
+ changes: { from: view.state.doc.length, insert: "B" },
+ selection: EditorSelection.single(view.state.doc.length + 1),
+ annotations: [
+ Transaction.userEvent.of("input.type"),
+ Transaction.time.of(time + 1),
+ ],
+ });
+
+ expect(view.state.doc.toString()).toBe("A012345678901234567890B");
+
+ room.history.resume();
+ room.history.undo();
+ expect(view.state.doc.toString()).toBe("A012345678901234567890");
+
+ room.history.undo();
+ expect(view.state.doc.toString()).toBe(initialDoc);
+ });
+
+ test("selection change starts a new undo group", async () => {
+ const initialDoc = "Hello, world";
+
+ const { room, root } = (await prepareIsolatedStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ root: LiveObject<{ document: LiveText }>;
+ };
+
+ const parent = document.createElement("div");
+ document.body.appendChild(parent);
+
+ const view = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(room, root.get("document")),
+ ],
+ }),
+ parent,
+ });
+
+ onTestFinished(() => {
+ view.destroy();
+ parent.remove();
+ });
+
+ const time = Date.now();
+ view.dispatch({
+ changes: { from: initialDoc.length, insert: "!" },
+ selection: EditorSelection.single(initialDoc.length + 1),
+ annotations: [
+ Transaction.userEvent.of("input.type"),
+ Transaction.time.of(time),
+ ],
+ });
+ view.dispatch({
+ selection: EditorSelection.single(0),
+ annotations: [
+ Transaction.userEvent.of("select.pointer"),
+ Transaction.time.of(time + 1),
+ ],
+ });
+ view.dispatch({
+ changes: { from: 0, insert: "X" },
+ selection: EditorSelection.single(1),
+ annotations: [
+ Transaction.userEvent.of("input.type"),
+ Transaction.time.of(time + 2),
+ ],
+ });
+
+ expect(view.state.doc.toString()).toBe("XHello, world!");
+
+ room.history.resume();
+ room.history.undo();
+ expect(view.state.doc.toString()).toBe("Hello, world!");
+
+ room.history.undo();
+ expect(view.state.doc.toString()).toBe(initialDoc);
+ });
+
+ test("paste starts a new undo group", async () => {
+ const initialDoc = "Hello, world";
+
+ const { room, root } = (await prepareIsolatedStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ root: LiveObject<{ document: LiveText }>;
+ };
+
+ const parent = document.createElement("div");
+ document.body.appendChild(parent);
+
+ const view = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(room, root.get("document")),
+ ],
+ }),
+ parent,
+ });
+
+ onTestFinished(() => {
+ view.destroy();
+ parent.remove();
+ });
+
+ const cursor = initialDoc.length;
+ const time = Date.now();
+ view.dispatch({
+ changes: { from: cursor, insert: "!" },
+ selection: EditorSelection.single(cursor + 1),
+ annotations: [
+ Transaction.userEvent.of("input.type"),
+ Transaction.time.of(time),
+ ],
+ });
+ view.dispatch({
+ changes: { from: cursor + 1, insert: "?" },
+ selection: EditorSelection.single(cursor + 2),
+ annotations: [
+ Transaction.userEvent.of("input.paste"),
+ Transaction.time.of(time + 1),
+ ],
+ });
+
+ expect(view.state.doc.toString()).toBe("Hello, world!?");
+
+ room.history.resume();
+ room.history.undo();
+ expect(view.state.doc.toString()).toBe("Hello, world!");
+
+ room.history.undo();
+ expect(view.state.doc.toString()).toBe(initialDoc);
+ });
+
+ test("a 500ms gap between edits starts a new undo group", async () => {
+ const initialDoc = "Hello, world";
+
+ const { room, root } = (await prepareIsolatedStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ root: LiveObject<{ document: LiveText }>;
+ };
+
+ const parent = document.createElement("div");
+ document.body.appendChild(parent);
+
+ const view = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(room, root.get("document")),
+ ],
+ }),
+ parent,
+ });
+
+ vi.useFakeTimers();
+ onTestFinished(() => {
+ vi.useRealTimers();
+ view.destroy();
+ parent.remove();
+ });
+
+ const cursor = initialDoc.length;
+ view.dispatch({
+ changes: { from: cursor, insert: "!" },
+ selection: EditorSelection.single(cursor + 1),
+ annotations: [
+ Transaction.userEvent.of("input.type"),
+ Transaction.time.of(0),
+ ],
+ });
+ view.dispatch({
+ changes: {
+ from: view.state.doc.length,
+ insert: "?",
+ },
+ selection: EditorSelection.single(view.state.doc.length + 1),
+ annotations: [
+ Transaction.userEvent.of("input.type"),
+ Transaction.time.of(600),
+ ],
+ });
+
+ expect(view.state.doc.toString()).toBe("Hello, world!?");
+
+ room.history.resume();
+ room.history.undo();
+ expect(view.state.doc.toString()).toBe("Hello, world!");
+
+ room.history.undo();
+ expect(view.state.doc.toString()).toBe(initialDoc);
+ });
+
+ test("IME compose merges into the previous group", async () => {
+ const initialDoc = "Hello, world";
+
+ const { room, root } = (await prepareIsolatedStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ root: LiveObject<{ document: LiveText }>;
+ };
+
+ const parent = document.createElement("div");
+ document.body.appendChild(parent);
+
+ const view = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(room, root.get("document")),
+ ],
+ }),
+ parent,
+ });
+
+ onTestFinished(() => {
+ view.destroy();
+ parent.remove();
+ });
+
+ const cursor = initialDoc.length;
+ view.dispatch({
+ changes: { from: cursor, insert: "!" },
+ selection: EditorSelection.single(cursor + 1),
+ annotations: [
+ Transaction.userEvent.of("input.type"),
+ Transaction.time.of(0),
+ ],
+ });
+ view.dispatch({
+ changes: { from: cursor + 1, insert: "?" },
+ selection: EditorSelection.single(cursor + 2),
+ annotations: [
+ Transaction.userEvent.of("input.type.compose"),
+ Transaction.time.of(600),
+ ],
+ });
+
+ expect(view.state.doc.toString()).toBe("Hello, world!?");
+
+ room.history.resume();
+ room.history.undo();
+
+ expect(view.state.doc.toString()).toBe(initialDoc);
+ expect(root.get("document").toString()).toBe(initialDoc);
+ });
+ });
+
+ describe("selection", () => {
+ test("undo restores the selection from before the edit", async () => {
+ const initialDoc = "Hello, world";
+ const cursor = initialDoc.length;
+
+ const { room, root } = (await prepareIsolatedStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ root: LiveObject<{ document: LiveText }>;
+ };
+
+ const parent = document.createElement("div");
+ document.body.appendChild(parent);
+
+ const view = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(room, root.get("document")),
+ ],
+ }),
+ parent,
+ });
+
+ onTestFinished(() => {
+ view.destroy();
+ parent.remove();
+ });
+
+ view.dispatch({ selection: EditorSelection.single(cursor) });
+ view.dispatch({
+ changes: { from: cursor, insert: "!" },
+ selection: EditorSelection.single(cursor + 1),
+ });
+
+ room.history.resume();
+ room.history.undo();
+
+ expect(view.state.doc.toString()).toBe(initialDoc);
+ expect(view.state.selection.main.anchor).toBe(cursor);
+ expect(view.state.selection.main.head).toBe(cursor);
+ });
+
+ test("redo restores the selection from after the edit", async () => {
+ const initialDoc = "Hello, world";
+ const cursor = initialDoc.length;
+
+ const { room, root } = (await prepareIsolatedStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ root: LiveObject<{ document: LiveText }>;
+ };
+
+ const parent = document.createElement("div");
+ document.body.appendChild(parent);
+
+ const view = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(room, root.get("document")),
+ ],
+ }),
+ parent,
+ });
+
+ onTestFinished(() => {
+ view.destroy();
+ parent.remove();
+ });
+
+ view.dispatch({ selection: EditorSelection.single(cursor) });
+ view.dispatch({
+ changes: { from: cursor, insert: "!" },
+ selection: EditorSelection.single(cursor + 1),
+ });
+
+ const afterCursor = cursor + 1;
+
+ room.history.resume();
+ room.history.undo();
+ room.history.resume();
+ room.history.redo();
+
+ expect(view.state.doc.toString()).toBe("Hello, world!");
+ expect(view.state.selection.main.anchor).toBe(afterCursor);
+ expect(view.state.selection.main.head).toBe(afterCursor);
+ });
+
+ test("undo clamps the selection when the document shrinks", async () => {
+ const initialDoc = "Hello, world";
+ const cursor = initialDoc.length;
+ const deleteFrom = 5;
+
+ const { room, root } = (await prepareIsolatedStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ root: LiveObject<{ document: LiveText }>;
+ };
+
+ const parent = document.createElement("div");
+ document.body.appendChild(parent);
+
+ const view = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(room, root.get("document")),
+ ],
+ }),
+ parent,
+ });
+
+ onTestFinished(() => {
+ view.destroy();
+ parent.remove();
+ });
+
+ // Cursor at end, then delete ", world". Undo restores the pre-delete
+ // selection (past the shorter doc) and must clamp it.
+ view.dispatch({ selection: EditorSelection.single(cursor) });
+ view.dispatch({
+ changes: { from: deleteFrom, to: cursor, insert: "" },
+ selection: EditorSelection.single(deleteFrom),
+ });
+
+ expect(view.state.doc.toString()).toBe("Hello");
+ expect(view.state.selection.main.head).toBe(deleteFrom);
+
+ room.history.resume();
+ room.history.undo();
+
+ expect(view.state.doc.toString()).toBe(initialDoc);
+ expect(view.state.selection.main.anchor).toBe(cursor);
+ expect(view.state.selection.main.head).toBe(cursor);
+ expect(view.state.selection.main.head).toBeLessThanOrEqual(
+ view.state.doc.length
+ );
+ });
+
+ test("peer remote edit rebases stored history selections before undo", async () => {
+ const initialDoc = "Hello, world";
+ const cursor = initialDoc.length;
+
+ const { room, root, applyRemoteOperations } =
+ (await prepareIsolatedStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ root: LiveObject<{ document: LiveText }>;
+ applyRemoteOperations: (
+ ops: Array<{
+ type: typeof OpCode.UPDATE_TEXT;
+ id: string;
+ baseVersion: number;
+ version: number;
+ ops: Array<{ type: "insert"; index: number; text: string }>;
+ }>
+ ) => void;
+ };
+
+ const parent = document.createElement("div");
+ document.body.appendChild(parent);
+
+ const view = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(room, root.get("document")),
+ ],
+ }),
+ parent,
+ });
+
+ onTestFinished(() => {
+ view.destroy();
+ parent.remove();
+ });
+
+ view.dispatch({ selection: EditorSelection.single(cursor) });
+ view.dispatch({
+ changes: { from: cursor, insert: "!" },
+ selection: EditorSelection.single(cursor + 1),
+ });
+
+ expect(view.state.doc.toString()).toBe("Hello, world!");
+
+ const baseVersion = root.get("document").version;
+ applyRemoteOperations([
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "0:1",
+ baseVersion,
+ version: baseVersion + 1,
+ ops: [{ type: "insert", index: 0, text: "X" }],
+ },
+ ]);
+
+ expect(view.state.doc.toString()).toBe("XHello, world!");
+
+ room.history.resume();
+ room.history.undo();
+
+ // Local "!" undone; peer "X" remains. Cursor was at 12 before the local
+ // edit, rebased to 13 after the peer insert at 0.
+ expect(view.state.doc.toString()).toBe("XHello, world");
+ expect(view.state.selection.main.anchor).toBe(13);
+ expect(view.state.selection.main.head).toBe(13);
+ });
+
+ test("replace edit restores selection on undo and redo", async () => {
+ const initialDoc = "Hello, world";
+
+ const { room, root } = (await prepareIsolatedStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ root: LiveObject<{ document: LiveText }>;
+ };
+
+ const parent = document.createElement("div");
+ document.body.appendChild(parent);
+
+ const view = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(room, root.get("document")),
+ ],
+ }),
+ parent,
+ });
+
+ onTestFinished(() => {
+ view.destroy();
+ parent.remove();
+ });
+
+ view.dispatch({ selection: EditorSelection.single(0, 5) });
+ view.dispatch({
+ changes: { from: 0, to: 5, insert: "Hi" },
+ selection: EditorSelection.single(2),
+ });
+
+ expect(view.state.doc.toString()).toBe("Hi, world");
+ expect(view.state.selection.main.anchor).toBe(2);
+ expect(view.state.selection.main.head).toBe(2);
+
+ room.history.resume();
+ room.history.undo();
+
+ expect(view.state.doc.toString()).toBe(initialDoc);
+ expect(view.state.selection.main.anchor).toBe(0);
+ expect(view.state.selection.main.head).toBe(5);
+
+ room.history.resume();
+ room.history.redo();
+
+ expect(view.state.doc.toString()).toBe("Hi, world");
+ expect(view.state.selection.main.anchor).toBe(2);
+ expect(view.state.selection.main.head).toBe(2);
+ });
+
+ test("range undo cannot restore selection via decodeIndex or selection.map", async () => {
+ const initialDoc = "Hello, world";
+
+ const { room, root } = (await prepareIsolatedStorageTest(
+ [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "document",
+ data: [[initialDoc]],
+ version: 0,
+ },
+ ],
+ ],
+ 0
+ )) as unknown as {
+ room: Room;
+ root: LiveObject<{ document: LiveText }>;
+ };
+
+ const liveText = root.get("document");
+ const parent = document.createElement("div");
+ document.body.appendChild(parent);
+
+ const view = new EditorView({
+ state: EditorState.create({
+ doc: initialDoc,
+ extensions: [
+ createLiveblocksSyncPlugin(room, root.get("document")),
+ ],
+ }),
+ parent,
+ });
+
+ onTestFinished(() => {
+ view.destroy();
+ parent.remove();
+ });
+
+ view.dispatch({ selection: EditorSelection.single(0, 5) });
+ view.dispatch({
+ changes: { from: 0, to: 5, insert: "Hi" },
+ selection: EditorSelection.single(2),
+ });
+
+ let undoChanges = ChangeSet.empty(0);
+
+ const sub = room.subscribe(
+ root,
+ (updates) => {
+ for (const update of updates) {
+ if (update.type !== "LiveText" || update.node !== liveText) {
+ continue;
+ }
+ const source = update.source;
+ if (source.origin !== "local" || source.via !== "undo") {
+ continue;
+ }
+
+ let changes = ChangeSet.empty(view.state.doc.length);
+ let currentLength = view.state.doc.length;
+ for (const change of update.updates) {
+ const step =
+ change.type === "insert"
+ ? ChangeSet.of(
+ [{ from: change.index, insert: change.text }],
+ currentLength
+ )
+ : ChangeSet.of(
+ [
+ {
+ from: change.index,
+ to: change.index + change.length,
+ },
+ ],
+ currentLength
+ );
+ changes = changes.compose(step);
+ currentLength = changes.newLength;
+ }
+ undoChanges = changes;
+ }
+ },
+ { isDeep: true }
+ );
+
+ room.history.resume();
+ room.history.undo();
+ sub();
+
+ const mappedCurrent = view.state.selection.map(undoChanges, 1);
+
+ expect(view.state.doc.toString()).toBe(initialDoc);
+ expect(view.state.selection.main.anchor).toBe(0);
+ expect(view.state.selection.main.head).toBe(5);
+ expect({
+ decodeAnchor: liveText[kInternal].decodeIndex(0, 0),
+ decodeHead: liveText[kInternal].decodeIndex(5, 0),
+ mapCurrentSelection: {
+ anchor: mappedCurrent.main.anchor,
+ head: mappedCurrent.main.head,
+ },
+ }).toEqual({
+ decodeAnchor: 5,
+ decodeHead: 5,
+ mapCurrentSelection: { anchor: 0, head: 8 },
+ });
+ });
+ });
+ });
+
+ describe("isAdjacent", () => {
+ test("returns true when change ranges overlap", () => {
+ const prev = ChangeSet.of([{ from: 2, to: 4, insert: "x" }], 10);
+ const next = ChangeSet.of([{ from: 3, insert: "y" }], 11);
+
+ expect(isAdjacent(prev, next)).toBe(true);
+ });
+
+ test("returns false when change ranges are separate", () => {
+ const prev = ChangeSet.of([{ from: 1, insert: "x" }], 10);
+ const next = ChangeSet.of([{ from: 8, insert: "y" }], 11);
+
+ expect(isAdjacent(prev, next)).toBe(false);
+ });
+ });
+});
diff --git a/packages/liveblocks-codemirror/src/index.ts b/packages/liveblocks-codemirror/src/index.ts
new file mode 100644
index 00000000000..ce100052c4c
--- /dev/null
+++ b/packages/liveblocks-codemirror/src/index.ts
@@ -0,0 +1,10 @@
+import { detectDupes } from "@liveblocks/core";
+
+import { createLiveblocksPresencePlugin } from "./presence-plugin";
+import { createLiveblocksSyncPlugin } from "./sync-plugin";
+import { PKG_FORMAT, PKG_NAME, PKG_VERSION } from "./version";
+
+detectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);
+
+export { createLiveblocksPresencePlugin, createLiveblocksSyncPlugin };
+export type { LiveblocksCodemirrorSelection } from "./presence-plugin";
diff --git a/packages/liveblocks-codemirror/src/presence-plugin.ts b/packages/liveblocks-codemirror/src/presence-plugin.ts
new file mode 100644
index 00000000000..a6ca9fac55f
--- /dev/null
+++ b/packages/liveblocks-codemirror/src/presence-plugin.ts
@@ -0,0 +1,482 @@
+import {
+ EditorSelection,
+ type Extension,
+ StateEffect,
+ StateField,
+ Transaction,
+} from "@codemirror/state";
+import {
+ Direction,
+ type EditorView,
+ layer,
+ type LayerMarker,
+ RectangleMarker,
+ ViewPlugin,
+ type ViewUpdate,
+} from "@codemirror/view";
+import type { LsonObject, Room } from "@liveblocks/client";
+import { kInternal, type LiveText } from "@liveblocks/core";
+
+import { clamp } from "./utils";
+
+type RemoteSelection = {
+ connectionId: number;
+ anchor: number;
+ head: number;
+ name?: string;
+ color?: string;
+};
+
+export type LiveblocksCodemirrorSelection = {
+ anchor: number;
+ head: number;
+ version: number;
+};
+
+type LiveblocksCodemirrorPresence = {
+ selection: LiveblocksCodemirrorSelection | null;
+};
+
+type LiveblocksCodemirrorUserMeta = {
+ id?: string;
+ info?: {
+ name?: string;
+ color?: string;
+ };
+};
+
+class RemoteSelectionMarker implements LayerMarker {
+ constructor(
+ readonly left: number,
+ readonly top: number,
+ readonly width: number,
+ readonly height: number,
+ readonly color: string
+ ) {}
+
+ eq(other: LayerMarker): boolean {
+ return (
+ other instanceof RemoteSelectionMarker &&
+ other.left === this.left &&
+ other.top === this.top &&
+ other.width === this.width &&
+ other.height === this.height &&
+ other.color === this.color
+ );
+ }
+
+ draw(): HTMLElement {
+ const element = document.createElement("div");
+ element.className = "lb-remote-selection";
+ element.style.setProperty("--lb-remote-color", this.color);
+ element.style.left = `${this.left}px`;
+ element.style.top = `${this.top}px`;
+ element.style.width = `${this.width}px`;
+ element.style.height = `${this.height}px`;
+ return element;
+ }
+
+ update(element: HTMLElement, prev: LayerMarker): boolean {
+ if (!(prev instanceof RemoteSelectionMarker)) return false;
+ if (prev.color !== this.color) return false;
+ element.style.left = `${this.left}px`;
+ element.style.top = `${this.top}px`;
+ element.style.width = `${this.width}px`;
+ element.style.height = `${this.height}px`;
+ return true;
+ }
+}
+
+class RemoteCaretMarker implements LayerMarker {
+ constructor(
+ readonly left: number,
+ readonly top: number,
+ readonly height: number,
+ readonly selection: RemoteSelection
+ ) {}
+
+ eq(other: LayerMarker): boolean {
+ return (
+ other instanceof RemoteCaretMarker &&
+ other.selection.connectionId === this.selection.connectionId &&
+ other.left === this.left &&
+ other.top === this.top &&
+ other.height === this.height &&
+ other.selection.color === this.selection.color
+ );
+ }
+
+ draw(): HTMLElement {
+ const element = document.createElement("div");
+ element.className = "lb-remote-caret";
+ element.style.setProperty(
+ "--lb-remote-color",
+ this.selection.color ?? "#888888"
+ );
+ element.style.left = `${this.left}px`;
+ element.style.top = `${this.top}px`;
+ element.style.height = `${this.height}px`;
+ element.setAttribute("aria-hidden", "true");
+
+ return element;
+ }
+
+ update(element: HTMLElement, prev: LayerMarker): boolean {
+ if (!(prev instanceof RemoteCaretMarker)) return false;
+ if (prev.selection.connectionId !== this.selection.connectionId)
+ return false;
+ element.style.setProperty(
+ "--lb-remote-color",
+ this.selection.color ?? "#888888"
+ );
+ element.style.left = `${this.left}px`;
+ element.style.top = `${this.top}px`;
+ element.style.height = `${this.height}px`;
+ return true;
+ }
+}
+
+export function createLiveblocksPresencePlugin(
+ room: Room<
+ LiveblocksCodemirrorPresence,
+ LsonObject,
+ LiveblocksCodemirrorUserMeta
+ >,
+ text: LiveText
+): Extension[] {
+ const upsertRemoteSelections = StateEffect.define>();
+ const removeRemoteSelections = StateEffect.define>();
+
+ const remoteSelectionsState = StateField.define>({
+ create(state) {
+ const selections: RemoteSelection[] = [];
+
+ for (const user of room.getOthers()) {
+ const presenceSelection = user.presence.selection;
+ if (presenceSelection === null || presenceSelection === undefined) {
+ continue;
+ }
+
+ const anchor = text[kInternal].decodeIndex(
+ presenceSelection.anchor,
+ presenceSelection.version
+ );
+ const head = text[kInternal].decodeIndex(
+ presenceSelection.head,
+ presenceSelection.version
+ );
+ if (head === null || anchor === null) continue;
+
+ selections.push({
+ connectionId: user.connectionId,
+ anchor: clamp(anchor, { min: 0, max: state.doc.length }),
+ head: clamp(head, { min: 0, max: state.doc.length }),
+ name: user.info?.name,
+ color: user.info?.color,
+ });
+ }
+
+ return selections;
+ },
+ update(selections, tr) {
+ let nextSelections = selections;
+
+ if (tr.docChanged) {
+ nextSelections = nextSelections.map((selection) => ({
+ ...selection,
+ anchor: clamp(tr.changes.mapPos(selection.anchor, 1), {
+ min: 0,
+ max: tr.newDoc.length,
+ }),
+ head: clamp(tr.changes.mapPos(selection.head, 1), {
+ min: 0,
+ max: tr.newDoc.length,
+ }),
+ }));
+ }
+
+ for (const effect of tr.effects) {
+ if (effect.is(upsertRemoteSelections)) {
+ nextSelections = [
+ ...new Map(
+ [...nextSelections, ...effect.value].map((sel) => [
+ sel.connectionId,
+ {
+ ...sel,
+ anchor: clamp(sel.anchor, {
+ min: 0,
+ max: tr.newDoc.length,
+ }),
+ head: clamp(sel.head, { min: 0, max: tr.newDoc.length }),
+ },
+ ])
+ ).values(),
+ ];
+ } else if (effect.is(removeRemoteSelections)) {
+ nextSelections = nextSelections.filter(
+ (selection) => !effect.value.has(selection.connectionId)
+ );
+ }
+ }
+
+ return nextSelections;
+ },
+ });
+
+ function createRemoteSelectionMarkers(view: EditorView): LayerMarker[] {
+ const selections = view.state.field(remoteSelectionsState);
+ const markers: LayerMarker[] = [];
+
+ for (const selection of selections) {
+ const from = clamp(Math.min(selection.anchor, selection.head), {
+ min: 0,
+ max: view.state.doc.length,
+ });
+ const to = clamp(Math.max(selection.anchor, selection.head), {
+ min: 0,
+ max: view.state.doc.length,
+ });
+ if (from === to) continue;
+
+ const color = selection.color ?? "#888888";
+ for (const rect of RectangleMarker.forRange(
+ view,
+ "lb-remote-selection",
+ EditorSelection.range(from, to)
+ )) {
+ if (rect.width === null) continue;
+ markers.push(
+ new RemoteSelectionMarker(
+ rect.left,
+ rect.top,
+ rect.width,
+ rect.height,
+ color
+ )
+ );
+ }
+ }
+
+ return markers;
+ }
+
+ function createRemoteCaretMarkers(view: EditorView): LayerMarker[] {
+ const selections = view.state.field(remoteSelectionsState);
+ const markers: LayerMarker[] = [];
+ const scrollRect = view.scrollDOM.getBoundingClientRect();
+ const originLeft =
+ (view.textDirection === Direction.LTR
+ ? scrollRect.left
+ : scrollRect.right - view.scrollDOM.clientWidth * view.scaleX) -
+ view.scrollDOM.scrollLeft * view.scaleX;
+ const originTop = scrollRect.top - view.scrollDOM.scrollTop * view.scaleY;
+
+ for (const selection of selections) {
+ const head = clamp(selection.head, {
+ min: 0,
+ max: view.state.doc.length,
+ });
+ const coords = view.coordsAtPos(head, head <= selection.anchor ? -1 : 1);
+ if (coords === null) continue;
+
+ markers.push(
+ new RemoteCaretMarker(
+ coords.left - originLeft,
+ coords.top - originTop,
+ coords.bottom - coords.top,
+ selection
+ )
+ );
+ }
+
+ return markers;
+ }
+
+ const shouldRedrawRemotePresence = (update: ViewUpdate) =>
+ update.docChanged ||
+ update.viewportChanged ||
+ update.geometryChanged ||
+ update.transactions.some((tr) =>
+ tr.effects.some(
+ (effect) =>
+ effect.is(upsertRemoteSelections) || effect.is(removeRemoteSelections)
+ )
+ );
+
+ return [
+ remoteSelectionsState,
+ layer({
+ above: false,
+ class: "lb-remote-selectionLayer",
+ markers: createRemoteSelectionMarkers,
+ update: shouldRedrawRemotePresence,
+ }),
+ layer({
+ above: true,
+ class: "lb-remote-caretLayer",
+ markers: createRemoteCaretMarkers,
+ update: shouldRedrawRemotePresence,
+ }),
+ ViewPlugin.fromClass(
+ class {
+ private pendingSelectionsByConnectionId = new Map<
+ number,
+ {
+ anchor: number;
+ head: number;
+ version: number;
+ name?: string;
+ color?: string;
+ }
+ >();
+ private unsubscribeFromPresenceUpdates: () => void;
+ private unsubscribeFromStorageUpdates: () => void;
+
+ constructor(private view: EditorView) {
+ this.unsubscribeFromStorageUpdates = room.subscribe(
+ text,
+ () => {
+ if (this.pendingSelectionsByConnectionId.size === 0) {
+ return;
+ }
+ const rebasedSelection: Array = [];
+ for (const [
+ connectionId,
+ selection,
+ ] of this.pendingSelectionsByConnectionId.entries()) {
+ const anchor = text[kInternal].decodeIndex(
+ selection.anchor,
+ selection.version
+ );
+ const head = text[kInternal].decodeIndex(
+ selection.head,
+ selection.version
+ );
+ if (anchor === null || head === null) continue;
+
+ this.pendingSelectionsByConnectionId.delete(connectionId);
+ rebasedSelection.push({
+ connectionId,
+ anchor,
+ head,
+ name: selection.name,
+ color: selection.color,
+ });
+ }
+ if (rebasedSelection.length > 0) {
+ this.view.dispatch({
+ effects: upsertRemoteSelections.of(rebasedSelection),
+ });
+ }
+ },
+ { isDeep: true }
+ );
+
+ this.unsubscribeFromPresenceUpdates = room.subscribe(
+ "others",
+ (others) => {
+ const rebasedSelection: Array = [];
+ const connections = new Set();
+ const connectionIdsToRemove = new Set();
+
+ for (const user of others) {
+ connections.add(user.connectionId);
+ if (user.presence.selection === null) {
+ this.pendingSelectionsByConnectionId.delete(
+ user.connectionId
+ );
+ connectionIdsToRemove.add(user.connectionId);
+ continue;
+ }
+
+ const anchor = text[kInternal].decodeIndex(
+ user.presence.selection.anchor,
+ user.presence.selection.version
+ );
+ const head = text[kInternal].decodeIndex(
+ user.presence.selection.head,
+ user.presence.selection.version
+ );
+ if (head === null || anchor === null) {
+ this.pendingSelectionsByConnectionId.set(user.connectionId, {
+ anchor: user.presence.selection.anchor,
+ head: user.presence.selection.head,
+ version: user.presence.selection.version,
+ name: user.info?.name,
+ color: user.info?.color,
+ });
+ continue;
+ }
+
+ this.pendingSelectionsByConnectionId.delete(user.connectionId);
+ rebasedSelection.push({
+ connectionId: user.connectionId,
+ anchor,
+ head,
+ name: user.info?.name,
+ color: user.info?.color,
+ });
+ }
+
+ for (const selection of this.view.state.field(
+ remoteSelectionsState
+ )) {
+ if (!connections.has(selection.connectionId)) {
+ connectionIdsToRemove.add(selection.connectionId);
+ }
+ }
+ for (const connectionId of this.pendingSelectionsByConnectionId.keys()) {
+ if (!connections.has(connectionId)) {
+ this.pendingSelectionsByConnectionId.delete(connectionId);
+ connectionIdsToRemove.add(connectionId);
+ }
+ }
+
+ const effects: Array<
+ StateEffect | Set>
+ > = [];
+
+ if (rebasedSelection.length > 0) {
+ effects.push(upsertRemoteSelections.of(rebasedSelection));
+ }
+ if (connectionIdsToRemove.size > 0) {
+ effects.push(removeRemoteSelections.of(connectionIdsToRemove));
+ }
+ if (effects.length > 0) {
+ this.view.dispatch({ effects });
+ }
+ }
+ );
+ }
+
+ update(update: ViewUpdate) {
+ if (!update.selectionSet && !update.docChanged) return;
+ if (
+ update.transactions.some((tr) => tr.annotation(Transaction.remote))
+ ) {
+ return;
+ }
+ const selection = this.view.state.selection.main;
+ const encodedAnchor = text[kInternal].encodeIndex(selection.anchor);
+ const encodedHead =
+ selection.head === selection.anchor
+ ? encodedAnchor
+ : text[kInternal].encodeIndex(selection.head);
+ room.updatePresence({
+ selection: {
+ anchor: encodedAnchor,
+ head: encodedHead,
+ version: text.version,
+ },
+ });
+ }
+
+ destroy() {
+ this.unsubscribeFromPresenceUpdates();
+ this.unsubscribeFromStorageUpdates();
+ room.updatePresence({ selection: null });
+ }
+ }
+ ),
+ ];
+}
diff --git a/packages/liveblocks-codemirror/src/sync-plugin.ts b/packages/liveblocks-codemirror/src/sync-plugin.ts
new file mode 100644
index 00000000000..80e7e182077
--- /dev/null
+++ b/packages/liveblocks-codemirror/src/sync-plugin.ts
@@ -0,0 +1,323 @@
+import {
+ ChangeSet,
+ EditorSelection,
+ type Extension,
+ Transaction,
+} from "@codemirror/state";
+import type { EditorView, ViewUpdate } from "@codemirror/view";
+import { keymap, ViewPlugin } from "@codemirror/view";
+import type { LiveText, Room } from "@liveblocks/client";
+import { kInternal } from "@liveblocks/core";
+
+import { clamp } from "./utils";
+
+export function createLiveblocksSyncPlugin(
+ room: Room,
+ text: LiveText
+): Extension {
+ return [
+ ViewPlugin.fromClass(
+ class {
+ private selectionByHistoryId = new Map<
+ number,
+ {
+ before: { anchor: number; head: number; version: number };
+ after: { anchor: number; head: number; version: number };
+ }
+ >();
+ private unsubscribeFromStorageUpdates: () => void;
+ private unsubscribeFromPrivateHistory: () => void;
+ private groupingTimer: ReturnType | null = null;
+ private prevLocalChanges: ChangeSet | null = null;
+ private prevTime: number | null = null;
+ private pendingSelectionBefore: {
+ anchor: number;
+ head: number;
+ version: number;
+ } | null = null;
+
+ constructor(private view: EditorView) {
+ this.unsubscribeFromStorageUpdates = room.subscribe(
+ text,
+ (updates) => {
+ for (const update of updates) {
+ if (update.type !== "LiveText" || update.node !== text) {
+ continue;
+ }
+
+ const source = update.source;
+ if (source.origin === "local" && source.via === "edit") {
+ continue;
+ }
+
+ let changes = ChangeSet.empty(view.state.doc.length);
+ let currentLength = view.state.doc.length;
+
+ for (const change of update.updates) {
+ let step: ChangeSet | null = null;
+ if (change.type === "insert") {
+ step = ChangeSet.of(
+ [{ from: change.index, insert: change.text }],
+ currentLength
+ );
+ } else if (change.type === "delete") {
+ step = ChangeSet.of(
+ [
+ {
+ from: change.index,
+ to: change.index + change.length,
+ },
+ ],
+ currentLength
+ );
+ } else if (change.type === "format") {
+ continue;
+ }
+
+ if (step === null) continue;
+ changes = changes.compose(step);
+ currentLength = changes.newLength;
+ }
+
+ if (changes.empty) continue;
+
+ let selection: EditorSelection | undefined;
+ if (
+ source.origin === "local" &&
+ (source.via === "undo" || source.via === "redo")
+ ) {
+ const id =
+ source.via === "undo"
+ ? room[kInternal].redoStack.at(-1)?.id
+ : room[kInternal].undoStack.at(-1)?.id;
+ const meta =
+ id === undefined
+ ? undefined
+ : this.selectionByHistoryId.get(id);
+ if (meta !== undefined) {
+ if (source.via === "undo") {
+ if (meta.before.anchor !== meta.before.head) {
+ selection = EditorSelection.single(
+ clamp(meta.before.anchor, {
+ min: 0,
+ max: changes.newLength,
+ }),
+ clamp(meta.before.head, {
+ min: 0,
+ max: changes.newLength,
+ })
+ );
+ } else {
+ const anchor = text[kInternal].decodeIndex(
+ meta.before.anchor,
+ meta.before.version
+ );
+ if (anchor !== null) {
+ selection = EditorSelection.single(anchor);
+ } else {
+ selection = EditorSelection.single(
+ clamp(meta.before.anchor, {
+ min: 0,
+ max: changes.newLength,
+ })
+ );
+ }
+ }
+ } else {
+ const anchor = text[kInternal].decodeIndex(
+ meta.after.anchor,
+ meta.after.version
+ );
+ const head = text[kInternal].decodeIndex(
+ meta.after.head,
+ meta.after.version
+ );
+ if (anchor !== null && head !== null) {
+ selection = EditorSelection.single(anchor, head);
+ }
+ }
+ }
+ }
+
+ this.view.dispatch({
+ changes,
+ annotations: [
+ Transaction.addToHistory.of(false),
+ Transaction.remote.of(true),
+ ],
+ ...(selection !== undefined ? { selection } : {}),
+ });
+ }
+ },
+ { isDeep: true }
+ );
+
+ this.unsubscribeFromPrivateHistory = room[
+ kInternal
+ ].history.subscribe((event) => {
+ if (event.action === "push") {
+ if (this.pendingSelectionBefore !== null) {
+ const afterMain = this.view.state.selection.main;
+ const afterAnchor = text[kInternal].encodeIndex(
+ afterMain.anchor
+ );
+ this.selectionByHistoryId.set(event.id, {
+ before: this.pendingSelectionBefore,
+ after: {
+ anchor: afterAnchor,
+ head:
+ afterMain.head === afterMain.anchor
+ ? afterAnchor
+ : text[kInternal].encodeIndex(afterMain.head),
+ version: text.version,
+ },
+ });
+ this.pendingSelectionBefore = null;
+ this.prevLocalChanges = null;
+ this.prevTime = null;
+ }
+ } else if (event.action === "discard") {
+ for (const id of event.ids) this.selectionByHistoryId.delete(id);
+ } else if (event.action === "clear") {
+ this.selectionByHistoryId.clear();
+ }
+ });
+ }
+
+ update(update: ViewUpdate) {
+ if (
+ update.transactions.some((tr) => tr.annotation(Transaction.remote))
+ ) {
+ return;
+ }
+
+ if (!update.docChanged) {
+ if (update.selectionSet && this.prevLocalChanges !== null) {
+ if (this.groupingTimer !== null) {
+ clearTimeout(this.groupingTimer);
+ this.groupingTimer = null;
+ }
+ room.history.resume();
+ }
+ return;
+ }
+
+ let userEvent: string | undefined;
+ let time = Date.now();
+ for (const tr of update.transactions) {
+ const e = tr.annotation(Transaction.userEvent);
+ if (e !== undefined) userEvent = e;
+ const t = tr.annotation(Transaction.time);
+ if (t !== undefined) time = t;
+ }
+ const isCompose = userEvent === "input.type.compose";
+
+ if (this.prevLocalChanges !== null && !isCompose) {
+ const joinable =
+ userEvent === undefined || JOINABLE_USER_EVENT.test(userEvent);
+ if (
+ !joinable ||
+ (this.prevTime !== null && time - this.prevTime >= 500) ||
+ !isAdjacent(this.prevLocalChanges, update.changes)
+ ) {
+ if (this.groupingTimer !== null) {
+ clearTimeout(this.groupingTimer);
+ this.groupingTimer = null;
+ }
+ room.history.resume();
+ }
+ }
+
+ if (this.pendingSelectionBefore === null) {
+ const beforeMain = update.startState.selection.main;
+ const beforeAnchor = text[kInternal].encodeIndex(beforeMain.anchor);
+ this.pendingSelectionBefore = {
+ anchor: beforeAnchor,
+ head:
+ beforeMain.head === beforeMain.anchor
+ ? beforeAnchor
+ : text[kInternal].encodeIndex(beforeMain.head),
+ version: text.version,
+ };
+ }
+
+ room.history.pause();
+ room.batch(() => {
+ let offset = 0;
+ update.changes.iterChanges((fromA, toA, _fromB, _toB, inserted) => {
+ const deleteLength = toA - fromA;
+ const insertText = inserted.toString();
+ const index = fromA + offset;
+
+ text.replace(index, deleteLength, insertText);
+
+ offset += insertText.length - deleteLength;
+ });
+ });
+
+ this.prevLocalChanges = this.prevLocalChanges
+ ? this.prevLocalChanges.compose(update.changes)
+ : update.changes;
+ this.prevTime = time;
+
+ if (this.groupingTimer !== null) {
+ clearTimeout(this.groupingTimer);
+ }
+ this.groupingTimer = setTimeout(() => {
+ room.history.resume();
+ this.groupingTimer = null;
+ }, 500);
+ }
+
+ destroy() {
+ if (this.groupingTimer !== null) {
+ clearTimeout(this.groupingTimer);
+ this.groupingTimer = null;
+ }
+ room.history.resume();
+ this.unsubscribeFromStorageUpdates();
+ this.unsubscribeFromPrivateHistory();
+ }
+ }
+ ),
+ keymap.of([
+ {
+ key: "Mod-z",
+ run: () => {
+ room.history.resume();
+ if (!room.history.canUndo()) return false;
+ room.history.undo();
+ return true;
+ },
+ preventDefault: true,
+ },
+ {
+ key: "Mod-y",
+ mac: "Shift-Mod-z",
+ run: () => {
+ room.history.resume();
+ if (!room.history.canRedo()) return false;
+ room.history.redo();
+ return true;
+ },
+ preventDefault: true,
+ },
+ ]),
+ ];
+}
+
+const JOINABLE_USER_EVENT = /^(input\.type|delete)($|\.)/;
+
+export function isAdjacent(prev: ChangeSet, next: ChangeSet): boolean {
+ const ranges: number[] = [];
+ let adjacent = false;
+ prev.iterChangedRanges((_f, _t, f, t) => ranges.push(f, t));
+ next.iterChangedRanges((f, t) => {
+ for (let i = 0; i < ranges.length; ) {
+ const from = ranges[i++];
+ const to = ranges[i++];
+ if (t >= from && f <= to) adjacent = true;
+ }
+ });
+ return adjacent;
+}
diff --git a/packages/liveblocks-codemirror/src/utils.ts b/packages/liveblocks-codemirror/src/utils.ts
new file mode 100644
index 00000000000..dbb886657e6
--- /dev/null
+++ b/packages/liveblocks-codemirror/src/utils.ts
@@ -0,0 +1,6 @@
+export function clamp(
+ value: number,
+ { min, max }: { min: number; max: number }
+): number {
+ return Math.max(min, Math.min(value, max));
+}
diff --git a/packages/liveblocks-codemirror/src/version.ts b/packages/liveblocks-codemirror/src/version.ts
new file mode 100644
index 00000000000..41da4666511
--- /dev/null
+++ b/packages/liveblocks-codemirror/src/version.ts
@@ -0,0 +1,6 @@
+declare const __VERSION__: string;
+declare const TSUP_FORMAT: string;
+
+export const PKG_NAME = "@liveblocks/codemirror";
+export const PKG_VERSION = typeof __VERSION__ === "string" && __VERSION__;
+export const PKG_FORMAT = typeof TSUP_FORMAT === "string" && TSUP_FORMAT;
diff --git a/packages/liveblocks-codemirror/tsconfig.json b/packages/liveblocks-codemirror/tsconfig.json
new file mode 100644
index 00000000000..5fa21b678eb
--- /dev/null
+++ b/packages/liveblocks-codemirror/tsconfig.json
@@ -0,0 +1,9 @@
+{
+ "extends": "../../shared/tsconfig.common.json",
+
+ "compilerOptions": {
+ "lib": ["dom", "es2022"],
+ "noUncheckedIndexedAccess": false
+ },
+ "include": ["src"]
+}
diff --git a/packages/liveblocks-codemirror/tsup.config.ts b/packages/liveblocks-codemirror/tsup.config.ts
new file mode 100644
index 00000000000..1309d0178df
--- /dev/null
+++ b/packages/liveblocks-codemirror/tsup.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+ entry: ["src/index.ts"],
+ dts: true,
+ splitting: true,
+ clean: true,
+ format: ["esm", "cjs"],
+ sourcemap: true,
+
+ esbuildOptions(options, _context) {
+ // Replace __VERSION__ globals with concrete version
+ const pkg = require("./package.json");
+ options.define.__VERSION__ = JSON.stringify(pkg.version);
+ },
+});
diff --git a/packages/liveblocks-codemirror/vitest.config.ts b/packages/liveblocks-codemirror/vitest.config.ts
new file mode 100644
index 00000000000..25ed75d3a21
--- /dev/null
+++ b/packages/liveblocks-codemirror/vitest.config.ts
@@ -0,0 +1,8 @@
+import { defaultLiveblocksVitestConfig } from "@liveblocks/vitest-config";
+
+export default defaultLiveblocksVitestConfig({
+ test: {
+ environment: "happy-dom",
+ include: ["src/**/*.test.[jt]s?(x)"],
+ },
+});
diff --git a/packages/liveblocks-core/.dependency-cruiser.js b/packages/liveblocks-core/.dependency-cruiser.js
index 7688ad91268..6fb05c27098 100644
--- a/packages/liveblocks-core/.dependency-cruiser.js
+++ b/packages/liveblocks-core/.dependency-cruiser.js
@@ -145,6 +145,15 @@ export default {
to: { pathNot: "^src/(globals|lib)/" },
},
+ {
+ name: "illegal-import-from-internal",
+ comment:
+ "internal.ts contains shared foundational constants and must not depend on Liveblocks-specific modules.",
+ severity: "error",
+ from: { path: "^src/internal\\.ts$" },
+ to: { pathNot: "^src/(globals|lib)/" },
+ },
+
// "Swimlane 1" - protocol/
{
name: "illegal-import-from-protocol",
@@ -179,10 +188,13 @@ export default {
{
name: "illegal-import-from-crdts",
comment:
- "All modules in crdts/ must have no other dependencies apart from refs/, types/, protocol/ or lib/.",
+ "All modules in crdts/ must have no other dependencies apart from internal.ts, refs/, types/, protocol/ or lib/.",
severity: "error",
from: { path: "^src/crdts/" },
- to: { pathNot: "^src/(globals|crdts|refs|types|protocol|lib)/" },
+ to: {
+ pathNot:
+ "(^src/(globals|crdts|refs|types|protocol|lib)/|^src/internal\\.ts$)",
+ },
},
],
diff --git a/packages/liveblocks-core/package.json b/packages/liveblocks-core/package.json
index ecefa725184..1a0d797985d 100644
--- a/packages/liveblocks-core/package.json
+++ b/packages/liveblocks-core/package.json
@@ -1,6 +1,6 @@
{
"name": "@liveblocks/core",
- "version": "3.23.1",
+ "version": "3.24.0",
"description": "Private internals for Liveblocks. DO NOT import directly from this package!",
"type": "module",
"main": "./dist/index.cjs",
@@ -37,11 +37,12 @@
"format": "(eslint --fix src/ e2e/ || true) && prettier --write src/ e2e/",
"lint": "eslint src/",
"lint:package": "publint --strict && attw --pack",
- "test": "pnpm dlx liveblocks dev -P -c 'vitest run --coverage'",
- "test:ci": "pnpm dlx liveblocks dev -P -c 'vitest run --coverage'",
+ "typecheck": "tsc --noEmit",
+ "test": "pnpm dlx liveblocks@pre dev -P -c 'vitest run --coverage'",
+ "test:ci": "pnpm dlx liveblocks@pre dev -P -c 'vitest run --coverage'",
"test:types": "vitest run --config ./vitest.config.typecheck.ts",
"test:watch": "vitest",
- "test:e2e": "pnpm dlx liveblocks dev -P -c 'vitest run --config=./vitest.config.e2e.ts'",
+ "test:e2e": "pnpm dlx liveblocks@pre dev -P -c 'vitest run --config=./vitest.config.e2e.ts'",
"test:deps": "depcruise src --exclude __tests__",
"showdeps": "depcruise src --include-only '^src' --exclude='__tests__' --output-type dot | dot -T svg > /tmp/dependency-graph.svg && open /tmp/dependency-graph.svg",
"showdeps:high-level": "depcruise src --include-only '^src' --exclude='(^src/index.ts|shallow.ts|__tests__)' --collapse='^src/(refs|lib|compat|types|crdts|protocol)' --output-type dot | dot -T svg > /tmp/dependency-graph.svg && open /tmp/dependency-graph.svg"
diff --git a/packages/liveblocks-core/src/__tests__/_MockWebSocketServer.setup.ts b/packages/liveblocks-core/src/__tests__/_MockWebSocketServer.setup.ts
index 626b54801fa..8f2a99a90e4 100644
--- a/packages/liveblocks-core/src/__tests__/_MockWebSocketServer.setup.ts
+++ b/packages/liveblocks-core/src/__tests__/_MockWebSocketServer.setup.ts
@@ -307,7 +307,7 @@ export async function prepareStorageTest<
ref.wss.last.send(
serverMessage({
type: ServerMsgCode.UPDATE_STORAGE,
- ops: message.ops,
+ ops: message.ops.map(({ opId: _, ...op }) => op),
})
);
subject.wss.last.send(
@@ -376,9 +376,7 @@ export async function prepareStorageTest<
// this is what the last undo item looked like before we undo
const before = deepCloneWithoutOpId(
- subject.room[kInternal].undoStack[
- subject.room[kInternal].undoStack.length - 1
- ]
+ subject.room[kInternal].undoStack.at(-1)!.frames
);
// this will undo the whole stack
@@ -395,9 +393,7 @@ export async function prepareStorageTest<
// this is what the last undo item looks like after redoing everything
const after = deepCloneWithoutOpId(
- subject.room[kInternal].undoStack[
- subject.room[kInternal].undoStack.length - 1
- ]
+ subject.room[kInternal].undoStack.at(-1)!.frames
);
// It should be identical before/after
@@ -505,7 +501,7 @@ export async function prepareStorageUpdateTest<
ref.wss.last.send(
serverMessage({
type: ServerMsgCode.UPDATE_STORAGE,
- ops: message.ops,
+ ops: message.ops.map(({ opId: _, ...op }) => op),
})
);
subject.wss.last.send(
diff --git a/packages/liveblocks-core/src/__tests__/_devserver.ts b/packages/liveblocks-core/src/__tests__/_devserver.ts
index 80c8c86460c..ba84fe3edda 100644
--- a/packages/liveblocks-core/src/__tests__/_devserver.ts
+++ b/packages/liveblocks-core/src/__tests__/_devserver.ts
@@ -207,9 +207,7 @@ export async function prepareStorageTest(
async function assertUndoRedo() {
const before = deepCloneWithoutOpId(
- clientA.room[kInternal].undoStack[
- clientA.room[kInternal].undoStack.length - 1
- ]
+ clientA.room[kInternal].undoStack.at(-1)!.frames
);
// Undo the whole stack
@@ -225,9 +223,7 @@ export async function prepareStorageTest(
}
const after = deepCloneWithoutOpId(
- clientA.room[kInternal].undoStack[
- clientA.room[kInternal].undoStack.length - 1
- ]
+ clientA.room[kInternal].undoStack.at(-1)!.frames
);
// It should be identical before/after
diff --git a/packages/liveblocks-core/src/__tests__/_updatesUtils.ts b/packages/liveblocks-core/src/__tests__/_updatesUtils.ts
index fdc05b13a1d..887d68aef07 100644
--- a/packages/liveblocks-core/src/__tests__/_updatesUtils.ts
+++ b/packages/liveblocks-core/src/__tests__/_updatesUtils.ts
@@ -1,6 +1,7 @@
import type { Json, LiveMap, Lson, LsonObject, StorageUpdate } from "..";
import type { LiveListUpdates } from "../crdts/LiveList";
import type { LiveObjectUpdateDelta } from "../crdts/LiveObject";
+import type { LiveTextUpdates } from "../crdts/LiveText";
import type { ToJson } from "../crdts/Lson";
import type { UpdateDelta } from "../crdts/UpdateDelta";
import { lsonToJson } from "../immutable";
@@ -9,7 +10,8 @@ import { assertNever } from "../lib/assert";
export type JsonStorageUpdate =
| JsonLiveListUpdate
| JsonLiveObjectUpdate
- | JsonLiveMapUpdate;
+ | JsonLiveMapUpdate
+ | JsonLiveTextUpdate;
export type JsonLiveListUpdate = {
type: "LiveList";
@@ -52,6 +54,13 @@ export type JsonLiveMapUpdate = {
updates: { [key: string]: UpdateDelta };
};
+export type JsonLiveTextUpdate = {
+ type: "LiveText";
+ node: ReturnType;
+ version: number;
+ updates: LiveTextUpdates["updates"];
+};
+
export function liveListUpdateToJson(
update: LiveListUpdates
): JsonLiveListUpdate {
@@ -117,6 +126,15 @@ export function serializeUpdateToJson(
};
}
+ if (update.type === "LiveText") {
+ return {
+ type: update.type,
+ node: update.node.toJSON(),
+ version: update.version,
+ updates: update.updates,
+ };
+ }
+
return assertNever(update, "Unsupported LiveStructure type");
}
diff --git a/packages/liveblocks-core/src/__tests__/room.devserver.test.ts b/packages/liveblocks-core/src/__tests__/room.devserver.test.ts
index 24c02cb6958..d3622d02963 100644
--- a/packages/liveblocks-core/src/__tests__/room.devserver.test.ts
+++ b/packages/liveblocks-core/src/__tests__/room.devserver.test.ts
@@ -8,9 +8,12 @@
import { describe, expect, onTestFinished, test, vi } from "vitest";
import { LiveList } from "../crdts/LiveList";
+import type { LiveMap } from "../crdts/LiveMap";
import { LiveObject } from "../crdts/LiveObject";
+import type { LiveText } from "../crdts/LiveText";
+import type { StorageUpdate, UpdateSource } from "../crdts/StorageUpdates";
import { nn } from "../lib/assert";
-import { prepareIsolatedStorageTest } from "./_devserver";
+import { prepareIsolatedStorageTest, prepareStorageTest } from "./_devserver";
import type { JsonStorageUpdate } from "./_updatesUtils";
import {
listUpdate,
@@ -640,4 +643,235 @@ describe("room (dev server)", () => {
expect(callback).not.toHaveBeenCalled();
});
+
+ describe("storage update source", () => {
+ function readSources(updates: StorageUpdate[]): UpdateSource[] {
+ return updates.map((update) => update.source);
+ }
+
+ test("local LiveObject mutations are tagged local", async () => {
+ const { room, root } = await prepareIsolatedStorageTest<{ a: number }>({
+ liveblocksType: "LiveObject",
+ data: { a: 0 },
+ });
+
+ const sources: UpdateSource[] = [];
+ onTestFinished(
+ room.events.storageBatch.subscribe((updates) => {
+ sources.push(...readSources(updates));
+ })
+ );
+
+ root.set("a", 1);
+
+ expect(sources).toEqual([{ origin: "local", via: "edit" }]);
+ });
+
+ test("local LiveText mutations are tagged local on the envelope only", async () => {
+ const { room, root } = await prepareIsolatedStorageTest<{
+ text: LiveText;
+ }>({
+ liveblocksType: "LiveObject",
+ data: {
+ text: { liveblocksType: "LiveText", data: [["hello"]] },
+ },
+ });
+
+ const updates: Array<{
+ source: UpdateSource;
+ changeHasSource: boolean;
+ }> = [];
+ onTestFinished(
+ room.events.storageBatch.subscribe((batch) => {
+ for (const update of batch) {
+ if (update.type !== "LiveText") {
+ continue;
+ }
+ updates.push({
+ source: update.source,
+ changeHasSource: update.updates.some(
+ (change) => "source" in change
+ ),
+ });
+ }
+ })
+ );
+
+ root.get("text").insert(5, " world");
+
+ expect(updates).toEqual([
+ {
+ source: { origin: "local", via: "edit" },
+ changeHasSource: false,
+ },
+ ]);
+ });
+
+ test("remote mutations are tagged remote on the receiving client", async () => {
+ const { storageA, roomB } = await prepareStorageTest<{ a: number }>({
+ liveblocksType: "LiveObject",
+ data: { a: 0 },
+ });
+
+ const sources: UpdateSource[] = [];
+ onTestFinished(
+ roomB.events.storageBatch.subscribe((updates) => {
+ sources.push(...readSources(updates));
+ })
+ );
+
+ storageA.root.set("a", 1);
+
+ await vi.waitFor(() => {
+ expect(sources.length).toBeGreaterThan(0);
+ });
+
+ expect(sources).toEqual([{ origin: "remote" }]);
+ });
+
+ test("remote LiveText mutations are tagged remote on the receiving client", async () => {
+ const { storageA, roomB } = await prepareStorageTest<{
+ text: LiveText;
+ }>({
+ liveblocksType: "LiveObject",
+ data: {
+ text: { liveblocksType: "LiveText", data: [["hello"]] },
+ },
+ });
+
+ const sources: UpdateSource[] = [];
+ onTestFinished(
+ roomB.events.storageBatch.subscribe((updates) => {
+ sources.push(...readSources(updates));
+ })
+ );
+
+ storageA.root.get("text").insert(5, " world");
+
+ await vi.waitFor(() => {
+ expect(sources.length).toBeGreaterThan(0);
+ });
+
+ expect(sources).toEqual([{ origin: "remote" }]);
+ });
+
+ test("local LiveList and LiveMap mutations are tagged local", async () => {
+ const { room, root } = await prepareIsolatedStorageTest<{
+ items: LiveList;
+ map: LiveMap;
+ }>({
+ liveblocksType: "LiveObject",
+ data: {
+ items: { liveblocksType: "LiveList", data: ["a"] },
+ map: { liveblocksType: "LiveMap", data: { k: "old" } },
+ },
+ });
+
+ const sources: UpdateSource[] = [];
+ onTestFinished(
+ room.events.storageBatch.subscribe((updates) => {
+ sources.push(...readSources(updates));
+ })
+ );
+
+ root.get("items").insert("b", 1);
+ root.get("map").set("k", "new");
+
+ expect(sources).toEqual([
+ { origin: "local", via: "edit" },
+ { origin: "local", via: "edit" },
+ ]);
+ });
+
+ test("remote LiveList and LiveMap mutations are tagged remote on the receiving client", async () => {
+ const { storageA, roomB } = await prepareStorageTest<{
+ items: LiveList;
+ map: LiveMap;
+ }>({
+ liveblocksType: "LiveObject",
+ data: {
+ items: { liveblocksType: "LiveList", data: ["a"] },
+ map: { liveblocksType: "LiveMap", data: { k: "old" } },
+ },
+ });
+
+ const sources: UpdateSource[] = [];
+ onTestFinished(
+ roomB.events.storageBatch.subscribe((updates) => {
+ sources.push(...readSources(updates));
+ })
+ );
+
+ storageA.root.get("items").insert("b", 1);
+ storageA.root.get("map").set("k", "new");
+
+ await vi.waitFor(() => {
+ expect(sources.length).toBe(2);
+ });
+
+ expect(sources).toEqual([{ origin: "remote" }, { origin: "remote" }]);
+ });
+
+ test("undo and redo produce undo/redo-tagged storage updates", async () => {
+ const { room, root } = await prepareIsolatedStorageTest<{ a: number }>({
+ liveblocksType: "LiveObject",
+ data: { a: 0 },
+ });
+
+ const sources: UpdateSource[] = [];
+ onTestFinished(
+ room.events.storageBatch.subscribe((updates) => {
+ sources.push(...readSources(updates));
+ })
+ );
+
+ root.set("a", 1);
+ expect(sources).toEqual([{ origin: "local", via: "edit" }]);
+
+ sources.length = 0;
+ room.history.undo();
+
+ expect(sources).toEqual([{ origin: "local", via: "undo" }]);
+
+ sources.length = 0;
+ room.history.redo();
+
+ expect(sources).toEqual([{ origin: "local", via: "redo" }]);
+ });
+
+ test("the internal optimistic flag never reaches subscribers", async () => {
+ const { storageA, roomA, storageB, roomB } = await prepareStorageTest<{
+ a: number;
+ }>({
+ liveblocksType: "LiveObject",
+ data: { a: 0 },
+ });
+
+ const sources: UpdateSource[] = [];
+ onTestFinished(
+ roomA.events.storageBatch.subscribe((updates) => {
+ sources.push(...readSources(updates));
+ })
+ );
+ onTestFinished(
+ roomB.events.storageBatch.subscribe((updates) => {
+ sources.push(...readSources(updates));
+ })
+ );
+
+ // A local mutation is optimistic internally; its ack is not; an undo
+ // replays an unacknowledged op; and B sees all of it as remote.
+ storageA.root.set("a", 1);
+ roomA.history.undo();
+ storageB.root.set("a", 9);
+
+ await vi.waitFor(() => {
+ expect(sources.length).toBeGreaterThan(3);
+ });
+
+ for (const source of sources) {
+ expect(source).not.toHaveProperty("optimistic");
+ }
+ });
+ });
});
diff --git a/packages/liveblocks-core/src/__tests__/room.mockserver.test.ts b/packages/liveblocks-core/src/__tests__/room.mockserver.test.ts
index bac9b6a9374..1da765d7a52 100644
--- a/packages/liveblocks-core/src/__tests__/room.mockserver.test.ts
+++ b/packages/liveblocks-core/src/__tests__/room.mockserver.test.ts
@@ -23,7 +23,9 @@ import { DEFAULT_BASE_URL } from "../constants";
import { LiveList } from "../crdts/LiveList";
import { LiveMap } from "../crdts/LiveMap";
import { LiveObject } from "../crdts/LiveObject";
+import type { LiveText } from "../crdts/LiveText";
import type { LsonObject } from "../crdts/Lson";
+import type { StorageUpdate, UpdateSource } from "../crdts/StorageUpdates";
import { kInternal } from "../internal";
import { makeEventSource } from "../lib/EventSource";
import * as console from "../lib/fancy-console";
@@ -36,7 +38,7 @@ import { OpCode } from "../protocol/Op";
import { ServerMsgCode } from "../protocol/ServerMsg";
import type { StorageNode } from "../protocol/StorageNode";
import { CrdtType, nodeStreamToCompactNodes } from "../protocol/StorageNode";
-import type { RoomConfig, RoomDelegates } from "../room";
+import type { PrivateHistoryEvent, RoomConfig, RoomDelegates } from "../room";
import { createRoom } from "../room";
import { WebsocketCloseCodes } from "../types/IWebSocket";
import type { LiveblocksError } from "../types/LiveblocksError";
@@ -53,6 +55,7 @@ import {
} from "./_MockWebSocketServer.behaviors";
import {
createSerializedList,
+ createSerializedMap,
createSerializedObject,
createSerializedRegister,
createSerializedRoot,
@@ -2497,6 +2500,70 @@ describe("room", () => {
});
});
+ describe("version history restore", () => {
+ test("restores an existing LiveText through a forward UPDATE_TEXT op", async () => {
+ const { root, room, wss } = await prepareIsolatedStorageTest<{
+ text: LiveText;
+ }>(
+ [
+ createSerializedRoot(),
+ [
+ "text",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "text",
+ data: [["Current"]],
+ version: 7,
+ },
+ ],
+ ],
+ 1
+ );
+
+ room[kInternal].reconcileStorageWithNodes([
+ createSerializedRoot(),
+ [
+ "text",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "text",
+ data: [["Historic", { bold: true }]],
+ version: 2,
+ },
+ ],
+ ]);
+
+ expect(root.get("text").toJSON()).toEqual([["Historic", { bold: true }]]);
+ expect(wss.receivedMessages.at(-1)).toEqual([
+ {
+ type: ClientMsgCode.UPDATE_STORAGE,
+ ops: [
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "text",
+ opId: "1:0",
+ baseVersion: 7,
+ ops: [
+ { type: "delete", index: 0, length: 7 },
+ {
+ type: "insert",
+ index: 0,
+ text: "Historic",
+ attributes: { bold: true },
+ },
+ ],
+ },
+ ],
+ },
+ ]);
+
+ room.history.undo();
+ expect(root.get("text").toString()).toBe("Current");
+ });
+ });
+
describe("room load promises", () => {
test("presence-ready promise", async () => {
const { room } = createTestableRoom({
@@ -2759,4 +2826,319 @@ describe("room", () => {
room.destroy();
});
});
+
+ describe("storage update source", () => {
+ function readSources(updates: StorageUpdate[]): UpdateSource[] {
+ return updates.map((update) => update.source);
+ }
+
+ test("local mutations are tagged local", async () => {
+ const { room, root } = await prepareIsolatedStorageTest<{ a: number }>(
+ [createSerializedRoot({ a: 0 })],
+ 0,
+ { a: 0 }
+ );
+
+ const sources: UpdateSource[] = [];
+ onTestFinished(
+ room.events.storageBatch.subscribe((updates) => {
+ sources.push(...readSources(updates));
+ })
+ );
+
+ root.set("a", 1);
+
+ expect(sources).toEqual([{ origin: "local", via: "edit" }]);
+ });
+
+ test("remote ops without opId are tagged remote", async () => {
+ const { room, root, applyRemoteOperations } =
+ await prepareIsolatedStorageTest<{ a: number }>(
+ [createSerializedRoot({ a: 0 })],
+ 0,
+ { a: 0 }
+ );
+
+ const sources: UpdateSource[] = [];
+ onTestFinished(
+ room.events.storageBatch.subscribe((updates) => {
+ sources.push(...readSources(updates));
+ })
+ );
+
+ applyRemoteOperations([
+ {
+ type: OpCode.UPDATE_OBJECT,
+ id: "root",
+ data: { a: 2 },
+ },
+ ]);
+
+ expect(sources).toEqual([{ origin: "remote" }]);
+ expect(root.get("a")).toBe(2);
+ });
+
+ test("peer client receives remote-tagged updates via prepareStorageTest", async () => {
+ const { refRoom, storage } = await prepareStorageTest<{ a: number }>(
+ [createSerializedRoot({ a: 0 })],
+ 0
+ );
+
+ const sources: UpdateSource[] = [];
+ onTestFinished(
+ refRoom.events.storageBatch.subscribe((updates) => {
+ sources.push(...readSources(updates));
+ })
+ );
+
+ storage.root.set("a", 1);
+
+ expect(sources).toEqual([{ origin: "remote" }]);
+ });
+
+ test("undo and redo produce undo/redo-tagged storage updates", async () => {
+ const { room, root } = await prepareIsolatedStorageTest<{ a: number }>(
+ [createSerializedRoot({ a: 0 })],
+ 0,
+ { a: 0 }
+ );
+
+ const sources: UpdateSource[] = [];
+ onTestFinished(
+ room.events.storageBatch.subscribe((updates) => {
+ sources.push(...readSources(updates));
+ })
+ );
+
+ root.set("a", 1);
+ expect(sources).toEqual([{ origin: "local", via: "edit" }]);
+
+ sources.length = 0;
+ room.history.undo();
+
+ expect(sources).toEqual([{ origin: "local", via: "undo" }]);
+
+ sources.length = 0;
+ room.history.redo();
+
+ expect(sources).toEqual([{ origin: "local", via: "redo" }]);
+ });
+
+ test("an acknowledgement keeps the via of the change it confirms", async () => {
+ const { room, root, applyRemoteOperations } =
+ await prepareIsolatedStorageTest<{ map: LiveMap }>(
+ [
+ createSerializedRoot(),
+ createSerializedMap("0:1", "root", "map"),
+ createSerializedRegister("0:2", "0:1", "k", "old"),
+ ],
+ 1
+ );
+
+ const sources: UpdateSource[] = [];
+ onTestFinished(
+ room.events.storageBatch.subscribe((updates) => {
+ sources.push(...readSources(updates));
+ })
+ );
+
+ root.get("map").set("k", "new");
+ room.history.undo(); // Restores "old" under a fresh opId
+
+ // Another client overwrites the same key before our undo is acked, which
+ // clears the pending-set bookkeeping for that key...
+ applyRemoteOperations([
+ {
+ type: OpCode.CREATE_REGISTER,
+ id: "2:0",
+ parentId: "0:1",
+ parentKey: "k",
+ data: "remote",
+ },
+ ]);
+
+ // ...so when the server acks the undo (by echoing it back verbatim), it
+ // lands as a real change instead of a no-op
+ applyRemoteOperations([
+ {
+ type: OpCode.CREATE_REGISTER,
+ id: "0:2",
+ parentId: "0:1",
+ parentKey: "k",
+ data: "old",
+ opId: "1:1",
+ },
+ ]);
+
+ expect(root.get("map").get("k")).toBe("old");
+ expect(sources).toEqual([
+ { origin: "local", via: "edit" },
+ { origin: "local", via: "undo" },
+ { origin: "remote" },
+ { origin: "local", via: "undo" }, // The ack, not a fresh "edit"
+ ]);
+ });
+ });
+
+ describe("private history events", () => {
+ test("undo and redo notify history before storage", async () => {
+ const { room, root } = await prepareIsolatedStorageTest<{ a: number }>(
+ [createSerializedRoot({ a: 1 })],
+ 0,
+ { a: 1 }
+ );
+
+ const order: string[] = [];
+ onTestFinished(
+ room[kInternal].history.subscribe((event) => {
+ if (event.action === "undo" || event.action === "redo") {
+ order.push(`history:${event.action}`);
+ }
+ })
+ );
+ onTestFinished(
+ room.events.storageBatch.subscribe(() => {
+ order.push("storage");
+ })
+ );
+
+ root.set("a", 2);
+
+ order.length = 0;
+ room.history.undo();
+ expect(order).toEqual(["history:undo", "storage"]);
+
+ order.length = 0;
+ room.history.redo();
+ expect(order).toEqual(["history:redo", "storage"]);
+ });
+
+ test("push, undo, and redo emit stable ids", async () => {
+ const { room, root } = await prepareIsolatedStorageTest<{ a: number }>(
+ [createSerializedRoot({ a: 1 })],
+ 0,
+ { a: 1 }
+ );
+
+ const events: PrivateHistoryEvent[] = [];
+ onTestFinished(
+ room[kInternal].history.subscribe((event) => events.push(event))
+ );
+
+ root.set("a", 2);
+ expect(events).toEqual([{ action: "push", id: 0 }]);
+
+ events.length = 0;
+ room.history.undo();
+ expect(events).toEqual([{ action: "undo", id: 0 }]);
+
+ events.length = 0;
+ room.history.redo();
+ expect(events).toEqual([{ action: "redo", id: 0 }]);
+ });
+
+ test("new edit after undo discards redo ids", async () => {
+ const { room, root } = await prepareIsolatedStorageTest<{ a: number }>(
+ [createSerializedRoot({ a: 1 })],
+ 0,
+ { a: 1 }
+ );
+
+ const events: PrivateHistoryEvent[] = [];
+ onTestFinished(
+ room[kInternal].history.subscribe((event) => events.push(event))
+ );
+
+ root.set("a", 2);
+ room.history.undo();
+
+ events.length = 0;
+ root.set("a", 3);
+
+ expect(events).toEqual([
+ { action: "push", id: 1 },
+ { action: "discard", ids: [0] },
+ ]);
+ });
+
+ test("clear emits a clear event", async () => {
+ const { room, root } = await prepareIsolatedStorageTest<{ a: number }>(
+ [createSerializedRoot({ a: 1 })],
+ 0,
+ { a: 1 }
+ );
+
+ const events: PrivateHistoryEvent[] = [];
+ onTestFinished(
+ room[kInternal].history.subscribe((event) => events.push(event))
+ );
+
+ root.set("a", 2);
+ room.history.undo();
+
+ events.length = 0;
+ room.history.clear();
+
+ expect(events).toEqual([{ action: "clear" }]);
+ });
+
+ test("batch coalesces to one push", async () => {
+ const { room, root } = await prepareIsolatedStorageTest<{ a: number }>(
+ [createSerializedRoot({ a: 1 })],
+ 0,
+ { a: 1 }
+ );
+
+ const events: PrivateHistoryEvent[] = [];
+ onTestFinished(
+ room[kInternal].history.subscribe((event) => events.push(event))
+ );
+
+ room.batch(() => {
+ root.set("a", 2);
+ root.set("a", 3);
+ });
+
+ expect(events).toEqual([{ action: "push", id: 0 }]);
+ });
+
+ test("history.disable suppresses private history events", async () => {
+ const { room, root } = await prepareIsolatedStorageTest<{ a: number }>(
+ [createSerializedRoot({ a: 1 })],
+ 0,
+ { a: 1 }
+ );
+
+ const events: PrivateHistoryEvent[] = [];
+ onTestFinished(
+ room[kInternal].history.subscribe((event) => events.push(event))
+ );
+
+ room.history.disable(() => {
+ root.set("a", 2);
+ });
+
+ expect(events).toEqual([]);
+ });
+
+ test("evicting the oldest undo item emits discard", async () => {
+ const { room, root } = await prepareIsolatedStorageTest<{ a: number }>(
+ [createSerializedRoot({ a: 0 })],
+ 0,
+ { a: 0 }
+ );
+
+ const events: PrivateHistoryEvent[] = [];
+ onTestFinished(
+ room[kInternal].history.subscribe((event) => events.push(event))
+ );
+
+ for (let i = 1; i <= 51; i++) {
+ root.set("a", i);
+ }
+
+ expect(events.at(-2)).toEqual({ action: "discard", ids: [0] });
+ expect(events.at(-1)).toEqual({ action: "push", id: 50 });
+ });
+ });
});
diff --git a/packages/liveblocks-core/src/crdts/AbstractCrdt.ts b/packages/liveblocks-core/src/crdts/AbstractCrdt.ts
index 43a79a8e611..de4c532f94b 100644
--- a/packages/liveblocks-core/src/crdts/AbstractCrdt.ts
+++ b/packages/liveblocks-core/src/crdts/AbstractCrdt.ts
@@ -1,4 +1,6 @@
+import { kInternal } from "../internal";
import { assertNever } from "../lib/assert";
+import * as console from "../lib/fancy-console";
import type { ReadonlyJson } from "../lib/Json";
import type { Pos } from "../lib/position";
import { asPos } from "../lib/position";
@@ -12,14 +14,43 @@ import { OpCode } from "../protocol/Op";
import type { SerializedCrdt } from "../protocol/StorageNode";
import type * as DevTools from "../types/DevToolsTreeNode";
import type { LiveNode, Lson } from "./Lson";
-import type { StorageUpdate } from "./StorageUpdates";
+import type { OpSource, StorageUpdate, UpdateSource } from "./StorageUpdates";
+import { toUpdateSource } from "./StorageUpdates";
import type { ReadonlyUnacknowledgedOps } from "./UnacknowledgedOps";
import { UnacknowledgedOps } from "./UnacknowledgedOps";
+const warnedOrphanedNodes = new WeakSet();
+
+const ORPHANED_NODE_WARNING =
+ "Cannot sync changes made to this Live structure because it is no longer part of Storage. Retrieve the current value from its parent before mutating it.";
+
export type ApplyResult =
| { reverse: Op[]; modified: StorageUpdate }
| { modified: false };
+export type DispatchOptions = {
+ /**
+ * Whether this dispatch should clear the redo stack. Defaults to true when
+ * any forward ops are included (a fresh local mutation), false otherwise.
+ * LiveText uses this to dispatch queued ops after an acknowledgement
+ * (which should not clear redo), and to register fresh local edits that
+ * don't carry wire ops yet (which should).
+ */
+ clearRedoStack?: boolean;
+};
+
+/**
+ * Private methods on any Liveblocks CRDT node. As a user of Liveblocks, NEVER
+ * USE ANY OF THESE DIRECTLY, because bad things will probably happen if you do.
+ */
+export type PrivateLiveNodeApi = {
+ /**
+ * Returns the CRDT node id once attached to the room pool. Detached nodes
+ * that have not entered storage yet return `undefined`.
+ */
+ getId(): string | undefined;
+};
+
/**
* The managed pool is a namespace registry (i.e. a context) that "owns" all
* the individual live nodes, ensuring each one has a unique ID, and holding on
@@ -43,7 +74,8 @@ export interface ManagedPool {
dispatch: (
ops: ClientWireOp[],
reverseOps: Op[],
- storageUpdates: Map
+ storageUpdates: Map,
+ options?: DispatchOptions
) => void;
/**
@@ -76,7 +108,8 @@ export type CreateManagedPoolOptions = {
onDispatch?: (
ops: ClientWireOp[],
reverse: Op[],
- storageUpdates: Map
+ storageUpdates: Map,
+ options?: DispatchOptions
) => void;
/**
@@ -126,9 +159,10 @@ export function createManagedPool(
dispatch(
ops: ClientWireOp[],
reverse: Op[],
- storageUpdates: Map
+ storageUpdates: Map,
+ options?: DispatchOptions
) {
- onDispatch?.(ops, reverse, storageUpdates);
+ onDispatch?.(ops, reverse, storageUpdates, options);
},
assertStorageIsWritable: () => {
@@ -143,36 +177,6 @@ export function createManagedPool(
};
}
-/**
- * When applying an op to a CRDT, we need to know where it came from to apply
- * it correctly.
- */
-export enum OpSource {
- /**
- * Optimistic update applied locally (from an undo, redo, or reconnect). Not
- * yet acknowledged by the server. Will be sent to server and needs to be
- * tracked for conflict resolution.
- */
- LOCAL,
-
- /**
- * Op received from server, originated from another client. Apply it, unless
- * there's a pending local op for the same key (local ops take precedence
- * until acknowledged).
- *
- * Note that a "fix Op" sent by the server in response to a local mutation
- * that caused a conflict will also be classified as a THEIRS-like mutation.
- * (As if another client resolved the conflict.)
- */
- THEIRS,
-
- /**
- * Op received from server, originated from THIS client. Server echoed it
- * back to confirm.
- */
- OURS,
-}
-
// TODO Temporary helper to help convert from AbstractCrdt -> LiveNode, only
// needed for within this module. The reason is that AbstractCrdt is an
// _abstract_ type, and in our LiveNode union we exhaustively include all
@@ -245,11 +249,22 @@ type ParentInfo =
export abstract class AbstractCrdt {
// ^^^^^^^^^^^^ TODO: Make this an interface
+ declare readonly [kInternal]: PrivateLiveNodeApi;
+
#pool?: ManagedPool;
#id?: string;
#parent: ParentInfo = NoParent;
+ constructor() {
+ Object.defineProperty(this, kInternal, {
+ value: {
+ getId: (): string | undefined => this.#id,
+ },
+ enumerable: false,
+ });
+ }
+
/** @internal */
_getParentKeyOrThrow(): string {
switch (this.parent.type) {
@@ -299,6 +314,18 @@ export abstract class AbstractCrdt {
return this.#parent;
}
+ /** @internal */
+ protected _warnIfOrphaned(): void {
+ const node = crdtAsLiveNode(this);
+ if (this.parent.type === "Orphaned" && !warnedOrphanedNodes.has(node)) {
+ warnedOrphanedNodes.add(node);
+ console.warn(ORPHANED_NODE_WARNING, {
+ type: node.constructor.name,
+ formerParentKey: this.parent.oldKey,
+ });
+ }
+ }
+
/** @internal */
get _parentKey(): string | null {
switch (this.parent.type) {
@@ -317,11 +344,14 @@ export abstract class AbstractCrdt {
}
/** @internal */
- _apply(op: Op, _isLocal: boolean): ApplyResult {
+ _apply(op: Op, source: OpSource): ApplyResult {
switch (op.type) {
case OpCode.DELETE_CRDT: {
if (this.parent.type === "HasParent") {
- return this.parent.node._detachChild(crdtAsLiveNode(this));
+ return this.parent.node._detachChild(
+ crdtAsLiveNode(this),
+ toUpdateSource(source)
+ );
}
return { modified: false };
@@ -399,7 +429,7 @@ export abstract class AbstractCrdt {
}
/** @internal */
- abstract _detachChild(crdt: LiveNode): ApplyResult;
+ abstract _detachChild(crdt: LiveNode, source: UpdateSource): ApplyResult;
/**
* Serializes this CRDT and all its children into a list of creation ops
diff --git a/packages/liveblocks-core/src/crdts/LiveFile.ts b/packages/liveblocks-core/src/crdts/LiveFile.ts
index 713c2acc638..db4b5e25d43 100644
--- a/packages/liveblocks-core/src/crdts/LiveFile.ts
+++ b/packages/liveblocks-core/src/crdts/LiveFile.ts
@@ -14,6 +14,7 @@ import type * as DevTools from "../types/DevToolsTreeNode";
import type { ParentToChildNodeMap } from "../types/NodeMap";
import type { ApplyResult, ManagedPool } from "./AbstractCrdt";
import { AbstractCrdt } from "./AbstractCrdt";
+import type { OpSource } from "./StorageUpdates";
export type { LiveFileData } from "../protocol/StorageNode";
@@ -108,8 +109,8 @@ export class LiveFile extends AbstractCrdt {
}
/** @internal */
- _apply(op: Op, isLocal: boolean): ApplyResult {
- return super._apply(op, isLocal);
+ _apply(op: Op, source: OpSource): ApplyResult {
+ return super._apply(op, source);
}
/** @internal */
diff --git a/packages/liveblocks-core/src/crdts/LiveList.ts b/packages/liveblocks-core/src/crdts/LiveList.ts
index 064f25be88c..745c02527fd 100644
--- a/packages/liveblocks-core/src/crdts/LiveList.ts
+++ b/packages/liveblocks-core/src/crdts/LiveList.ts
@@ -11,7 +11,7 @@ import { CrdtType } from "../protocol/StorageNode";
import type * as DevTools from "../types/DevToolsTreeNode";
import type { ParentToChildNodeMap } from "../types/NodeMap";
import type { ApplyResult, ManagedPool } from "./AbstractCrdt";
-import { AbstractCrdt, OpSource } from "./AbstractCrdt";
+import { AbstractCrdt } from "./AbstractCrdt";
import {
creationOpToLiveNode,
deserialize,
@@ -20,6 +20,8 @@ import {
} from "./liveblocks-helpers";
import { LiveRegister } from "./LiveRegister";
import type { LiveNode, Lson, ToJson } from "./Lson";
+import type { OpSource, UpdateSource } from "./StorageUpdates";
+import { LOCAL_EDIT, REMOTE, toUpdateSource } from "./StorageUpdates";
export type LiveListUpdateDelta =
| { type: "insert"; index: number; item: Lson }
@@ -35,6 +37,7 @@ export type LiveListUpdates = {
type: "LiveList";
node: LiveList;
updates: LiveListUpdateDelta[];
+ source: UpdateSource;
};
function childNodeLt(a: LiveNode, b: LiveNode): boolean {
@@ -212,7 +215,7 @@ export class LiveList extends AbstractCrdt {
}
}
- #applySetRemote(op: CreateOp): ApplyResult {
+ #applyRemoteSet(op: CreateOp): ApplyResult {
if (this._pool === undefined) {
throw new Error("Can't attach child if managed pool is not present");
}
@@ -240,9 +243,11 @@ export class LiveList extends AbstractCrdt {
this.#items.add(child);
return {
- modified: makeUpdate(this, [
- setDelta(indexOfItemWithSamePosition, child),
- ]),
+ modified: makeUpdate(
+ this,
+ [setDelta(indexOfItemWithSamePosition, child)],
+ REMOTE
+ ),
reverse: [],
};
} else {
@@ -263,7 +268,8 @@ export class LiveList extends AbstractCrdt {
// Even if we implicitly delete the item at the set position
// We still need to delete the item that was orginaly deleted by the set
const deleteDelta = this.#detachItemAssociatedToSetOperation(
- op.deletedId
+ op.deletedId,
+ REMOTE
);
if (deleteDelta) {
@@ -271,7 +277,7 @@ export class LiveList extends AbstractCrdt {
}
return {
- modified: makeUpdate(this, delta),
+ modified: makeUpdate(this, delta, REMOTE),
reverse: [],
};
}
@@ -279,7 +285,8 @@ export class LiveList extends AbstractCrdt {
// Item at position to be replaced doesn't exist
const updates: LiveListUpdateDelta[] = [];
const deleteDelta = this.#detachItemAssociatedToSetOperation(
- op.deletedId
+ op.deletedId,
+ REMOTE
);
if (deleteDelta) {
updates.push(deleteDelta);
@@ -291,12 +298,12 @@ export class LiveList extends AbstractCrdt {
return {
reverse: [],
- modified: makeUpdate(this, updates),
+ modified: makeUpdate(this, updates, REMOTE),
};
}
}
- #applySetAck(op: CreateOp): ApplyResult {
+ #applySetAck(op: CreateOp, source: UpdateSource): ApplyResult {
if (this._pool === undefined) {
throw new Error("Can't attach child if managed pool is not present");
}
@@ -304,7 +311,10 @@ export class LiveList extends AbstractCrdt {
const delta: LiveListUpdateDelta[] = [];
// Deleted item can be re-inserted by remote undo/redo
- const deletedDelta = this.#detachItemAssociatedToSetOperation(op.deletedId);
+ const deletedDelta = this.#detachItemAssociatedToSetOperation(
+ op.deletedId,
+ source
+ );
if (deletedDelta) {
delta.push(deletedDelta);
}
@@ -321,7 +331,7 @@ export class LiveList extends AbstractCrdt {
if (unacknowledgedOpId !== undefined && unacknowledgedOpId !== op.opId) {
return delta.length === 0
? { modified: false }
- : { modified: makeUpdate(this, delta), reverse: [] };
+ : { modified: makeUpdate(this, delta, source), reverse: [] };
}
const indexOfItemWithSamePosition = this._indexOfPosition(op.parentKey);
@@ -334,7 +344,7 @@ export class LiveList extends AbstractCrdt {
if (existingItem._parentKey === op.parentKey) {
// ... do nothing
return {
- modified: delta.length > 0 ? makeUpdate(this, delta) : false,
+ modified: delta.length > 0 ? makeUpdate(this, delta, source) : false,
reverse: [],
};
}
@@ -356,7 +366,7 @@ export class LiveList extends AbstractCrdt {
}
return {
- modified: delta.length > 0 ? makeUpdate(this, delta) : false,
+ modified: delta.length > 0 ? makeUpdate(this, delta, source) : false,
reverse: [],
};
} else {
@@ -370,13 +380,17 @@ export class LiveList extends AbstractCrdt {
const recreatedItemIndex = this.#insert(orphan);
return {
- modified: makeUpdate(this, [
- // If there is an item at this position, update is a set, else it's an insert
- indexOfItemWithSamePosition === -1
- ? insertDelta(recreatedItemIndex, orphan)
- : setDelta(recreatedItemIndex, orphan),
- ...delta,
- ]),
+ modified: makeUpdate(
+ this,
+ [
+ // If there is an item at this position, update is a set, else it's an insert
+ indexOfItemWithSamePosition === -1
+ ? insertDelta(recreatedItemIndex, orphan)
+ : setDelta(recreatedItemIndex, orphan),
+ ...delta,
+ ],
+ source
+ ),
reverse: [],
};
} else {
@@ -393,13 +407,17 @@ export class LiveList extends AbstractCrdt {
);
return {
- modified: makeUpdate(this, [
- // If there is an item at this position, update is a set, else it's an insert
- indexOfItemWithSamePosition === -1
- ? insertDelta(newIndex, newItem)
- : setDelta(newIndex, newItem),
- ...delta,
- ]),
+ modified: makeUpdate(
+ this,
+ [
+ // If there is an item at this position, update is a set, else it's an insert
+ indexOfItemWithSamePosition === -1
+ ? insertDelta(newIndex, newItem)
+ : setDelta(newIndex, newItem),
+ ...delta,
+ ],
+ source
+ ),
reverse: [],
};
}
@@ -410,7 +428,8 @@ export class LiveList extends AbstractCrdt {
* Returns the update delta of the deletion or null
*/
#detachItemAssociatedToSetOperation(
- deletedId?: string
+ deletedId: string | undefined,
+ source: UpdateSource
): LiveListUpdateDelta | null {
if (deletedId === undefined || this._pool === undefined) {
return null;
@@ -421,7 +440,7 @@ export class LiveList extends AbstractCrdt {
return null;
}
- const result = this._detachChild(deletedItem);
+ const result = this._detachChild(deletedItem, source);
if (result.modified === false) {
return null;
}
@@ -459,10 +478,11 @@ export class LiveList extends AbstractCrdt {
const bumpDeltas = this.#bumpUnackedPushesAbove(key);
return {
- modified: makeUpdate(this, [
- insertDelta(newIndex, newItem),
- ...bumpDeltas,
- ]),
+ modified: makeUpdate(
+ this,
+ [insertDelta(newIndex, newItem), ...bumpDeltas],
+ REMOTE
+ ),
reverse: [],
};
}
@@ -554,7 +574,7 @@ export class LiveList extends AbstractCrdt {
return deltas;
}
- #applyInsertAck(op: CreateOp): ApplyResult {
+ #applyInsertAck(op: CreateOp, source: UpdateSource): ApplyResult {
const existingItem = this.#items.find((item) => item._id === op.id);
const key = asPos(op.parentKey);
@@ -583,9 +603,11 @@ export class LiveList extends AbstractCrdt {
}
return {
- modified: makeUpdate(this, [
- moveDelta(oldPositionIndex, newIndex, existingItem),
- ]),
+ modified: makeUpdate(
+ this,
+ [moveDelta(oldPositionIndex, newIndex, existingItem)],
+ source
+ ),
reverse: [],
};
}
@@ -601,7 +623,7 @@ export class LiveList extends AbstractCrdt {
const newIndex = this._indexOfPosition(key);
return {
- modified: makeUpdate(this, [insertDelta(newIndex, orphan)]),
+ modified: makeUpdate(this, [insertDelta(newIndex, orphan)], source),
reverse: [],
};
} else {
@@ -612,14 +634,14 @@ export class LiveList extends AbstractCrdt {
const { newItem, newIndex } = this.#createAttachItemAndSort(op, key);
return {
- modified: makeUpdate(this, [insertDelta(newIndex, newItem)]),
+ modified: makeUpdate(this, [insertDelta(newIndex, newItem)], source),
reverse: [],
};
}
}
}
- #applyInsertUndoRedo(op: CreateOp): ApplyResult {
+ #applyLocalInsert(op: CreateOp, source: UpdateSource): ApplyResult {
const { id, parentKey: key } = op;
const child = creationOpToLiveNode(op);
@@ -647,12 +669,12 @@ export class LiveList extends AbstractCrdt {
const newIndex = this._indexOfPosition(newKey);
return {
- modified: makeUpdate(this, [insertDelta(newIndex, child)]),
+ modified: makeUpdate(this, [insertDelta(newIndex, child)], source),
reverse: [{ type: OpCode.DELETE_CRDT, id }],
};
}
- #applySetUndoRedo(op: CreateOp): ApplyResult {
+ #applyLocalSet(op: CreateOp, source: UpdateSource): ApplyResult {
const { id, parentKey: key } = op;
const child = creationOpToLiveNode(op);
@@ -684,33 +706,35 @@ export class LiveList extends AbstractCrdt {
const delta = [setDelta(indexOfItemWithSameKey, child)];
const deletedDelta = this.#detachItemAssociatedToSetOperation(
- op.deletedId
+ op.deletedId,
+ source
);
if (deletedDelta) {
delta.push(deletedDelta);
}
return {
- modified: makeUpdate(this, delta),
+ modified: makeUpdate(this, delta, source),
reverse,
};
} else {
this.#insert(child);
// TODO: Use delta
- this.#detachItemAssociatedToSetOperation(op.deletedId);
+ this.#detachItemAssociatedToSetOperation(op.deletedId, source);
const newIndex = this._indexOfPosition(newKey);
return {
reverse: [{ type: OpCode.DELETE_CRDT, id }],
- modified: makeUpdate(this, [insertDelta(newIndex, child)]),
+ modified: makeUpdate(this, [insertDelta(newIndex, child)], source),
};
}
}
/** @internal */
- _attachChild(op: CreateOp, source: OpSource): ApplyResult {
+ _attachChild(op: CreateOp, opSource: OpSource): ApplyResult {
+ const source = toUpdateSource(opSource);
if (this._pool === undefined) {
throw new Error("Can't attach child if managed pool is not present");
}
@@ -718,20 +742,20 @@ export class LiveList extends AbstractCrdt {
let result: ApplyResult;
if (op.intent === "set") {
- if (source === OpSource.THEIRS) {
- result = this.#applySetRemote(op);
- } else if (source === OpSource.OURS) {
- result = this.#applySetAck(op);
+ if (opSource.origin === "remote") {
+ result = this.#applyRemoteSet(op);
+ } else if (!opSource.optimistic) {
+ result = this.#applySetAck(op, source);
} else {
- result = this.#applySetUndoRedo(op);
+ result = this.#applyLocalSet(op, source);
}
} else {
- if (source === OpSource.THEIRS) {
+ if (opSource.origin === "remote") {
result = this.#applyRemoteInsert(op);
- } else if (source === OpSource.OURS) {
- result = this.#applyInsertAck(op);
+ } else if (!opSource.optimistic) {
+ result = this.#applyInsertAck(op, source);
} else {
- result = this.#applyInsertUndoRedo(op);
+ result = this.#applyLocalInsert(op, source);
}
}
@@ -744,7 +768,8 @@ export class LiveList extends AbstractCrdt {
/** @internal */
_detachChild(
- child: LiveNode
+ child: LiveNode,
+ source: UpdateSource
): { reverse: Op[]; modified: LiveListUpdates } | { modified: false } {
if (child) {
const parentKey = nn(child._parentKey);
@@ -765,7 +790,11 @@ export class LiveList extends AbstractCrdt {
child._detach();
return {
- modified: makeUpdate(this, [deleteDelta(indexToDelete, previousNode)]),
+ modified: makeUpdate(
+ this,
+ [deleteDelta(indexToDelete, previousNode)],
+ source
+ ),
reverse,
};
}
@@ -773,7 +802,7 @@ export class LiveList extends AbstractCrdt {
return { modified: false };
}
- #applySetChildKeyRemote(newKey: Pos, child: LiveNode): ApplyResult {
+ #applyRemoteSetChildKey(newKey: Pos, child: LiveNode): ApplyResult {
if (this.#implicitlyDeletedItems.has(child)) {
this.#implicitlyDeletedItems.delete(child);
@@ -782,7 +811,7 @@ export class LiveList extends AbstractCrdt {
// TODO: Shift existing item?
return {
- modified: makeUpdate(this, [insertDelta(newIndex, child)]),
+ modified: makeUpdate(this, [insertDelta(newIndex, child)], REMOTE),
reverse: [],
};
}
@@ -811,7 +840,11 @@ export class LiveList extends AbstractCrdt {
}
return {
- modified: makeUpdate(this, [moveDelta(previousIndex, newIndex, child)]),
+ modified: makeUpdate(
+ this,
+ [moveDelta(previousIndex, newIndex, child)],
+ REMOTE
+ ),
reverse: [],
};
} else {
@@ -831,13 +864,21 @@ export class LiveList extends AbstractCrdt {
}
return {
- modified: makeUpdate(this, [moveDelta(previousIndex, newIndex, child)]),
+ modified: makeUpdate(
+ this,
+ [moveDelta(previousIndex, newIndex, child)],
+ REMOTE
+ ),
reverse: [],
};
}
}
- #applySetChildKeyAck(newKey: Pos, child: LiveNode): ApplyResult {
+ #applySetChildKeyAck(
+ newKey: Pos,
+ child: LiveNode,
+ source: UpdateSource
+ ): ApplyResult {
const previousKey = nn(child._parentKey);
if (this.#implicitlyDeletedItems.has(child)) {
@@ -860,7 +901,7 @@ export class LiveList extends AbstractCrdt {
child._setParentLink(this, newKey);
const newIndex = this.#insert(child);
return {
- modified: makeUpdate(this, [insertDelta(newIndex, child)]),
+ modified: makeUpdate(this, [insertDelta(newIndex, child)], source),
reverse: [],
};
} else {
@@ -898,16 +939,22 @@ export class LiveList extends AbstractCrdt {
};
} else {
return {
- modified: makeUpdate(this, [
- moveDelta(previousIndex, newIndex, child),
- ]),
+ modified: makeUpdate(
+ this,
+ [moveDelta(previousIndex, newIndex, child)],
+ source
+ ),
reverse: [],
};
}
}
}
- #applySetChildKeyUndoRedo(newKey: Pos, child: LiveNode): ApplyResult {
+ #applyLocalSetChildKey(
+ newKey: Pos,
+ child: LiveNode,
+ source: UpdateSource
+ ): ApplyResult {
const previousKey = nn(child._parentKey);
const previousIndex = this.#items.findIndex((item) => item === child);
@@ -934,7 +981,11 @@ export class LiveList extends AbstractCrdt {
}
return {
- modified: makeUpdate(this, [moveDelta(previousIndex, newIndex, child)]),
+ modified: makeUpdate(
+ this,
+ [moveDelta(previousIndex, newIndex, child)],
+ source
+ ),
reverse: [
{
type: OpCode.SET_PARENT_KEY,
@@ -946,19 +997,20 @@ export class LiveList extends AbstractCrdt {
}
/** @internal */
- _setChildKey(newKey: Pos, child: LiveNode, source: OpSource): ApplyResult {
- if (source === OpSource.THEIRS) {
- return this.#applySetChildKeyRemote(newKey, child);
- } else if (source === OpSource.OURS) {
- return this.#applySetChildKeyAck(newKey, child);
+ _setChildKey(newKey: Pos, child: LiveNode, opSource: OpSource): ApplyResult {
+ const source = toUpdateSource(opSource);
+ if (opSource.origin === "remote") {
+ return this.#applyRemoteSetChildKey(newKey, child);
+ } else if (!opSource.optimistic) {
+ return this.#applySetChildKeyAck(newKey, child, source);
} else {
- return this.#applySetChildKeyUndoRedo(newKey, child);
+ return this.#applyLocalSetChildKey(newKey, child, source);
}
}
/** @internal */
- _apply(op: Op, isLocal: boolean): ApplyResult {
- return super._apply(op, isLocal);
+ _apply(op: Op, source: OpSource): ApplyResult {
+ return super._apply(op, source);
}
/** @internal */
@@ -1005,6 +1057,7 @@ export class LiveList extends AbstractCrdt {
* instead of resolving its position against the client's stale view.
*/
#injectAt(element: TItem, index: number, intent: "insert" | "push"): void {
+ this._warnIfOrphaned();
this._pool?.assertStorageIsWritable();
if (index < 0 || index > this.#items.length) {
throw new Error(
@@ -1031,7 +1084,7 @@ export class LiveList extends AbstractCrdt {
intent === "push" ? addIntentToRootOp(ops, "push") : ops,
[{ type: OpCode.DELETE_CRDT, id }],
new Map>([
- [this._id, makeUpdate(this, [insertDelta(index, value)])],
+ [this._id, makeUpdate(this, [insertDelta(index, value)], LOCAL_EDIT)],
])
);
}
@@ -1043,6 +1096,7 @@ export class LiveList extends AbstractCrdt {
* @param targetIndex The index where the element should be after moving.
*/
move(index: number, targetIndex: number): void {
+ this._warnIfOrphaned();
this._pool?.assertStorageIsWritable();
if (targetIndex < 0) {
throw new Error("targetIndex cannot be less than 0");
@@ -1087,7 +1141,10 @@ export class LiveList extends AbstractCrdt {
if (this._pool && this._id) {
const storageUpdates = new Map>([
- [this._id, makeUpdate(this, [moveDelta(index, targetIndex, item)])],
+ [
+ this._id,
+ makeUpdate(this, [moveDelta(index, targetIndex, item)], LOCAL_EDIT),
+ ],
]);
this._pool.dispatch(
@@ -1116,6 +1173,7 @@ export class LiveList extends AbstractCrdt {
* @param index The index of the element to delete
*/
delete(index: number): void {
+ this._warnIfOrphaned();
this._pool?.assertStorageIsWritable();
if (index < 0 || index >= this.#items.length) {
throw new Error(
@@ -1136,7 +1194,7 @@ export class LiveList extends AbstractCrdt {
const storageUpdates = new Map>();
storageUpdates.set(
nn(this._id),
- makeUpdate(this, [deleteDelta(index, item)])
+ makeUpdate(this, [deleteDelta(index, item)], LOCAL_EDIT)
);
this._pool.dispatch(
@@ -1155,6 +1213,7 @@ export class LiveList extends AbstractCrdt {
}
clear(): void {
+ this._warnIfOrphaned();
this._pool?.assertStorageIsWritable();
if (this._pool) {
const ops: ClientWireOp[] = [];
@@ -1185,7 +1244,10 @@ export class LiveList extends AbstractCrdt {
this.invalidate();
const storageUpdates = new Map>();
- storageUpdates.set(nn(this._id), makeUpdate(this, updateDelta));
+ storageUpdates.set(
+ nn(this._id),
+ makeUpdate(this, updateDelta, LOCAL_EDIT)
+ );
this._pool.dispatch(ops, reverseOps, storageUpdates);
} else {
@@ -1198,6 +1260,7 @@ export class LiveList extends AbstractCrdt {
}
set(index: number, item: TItem): void {
+ this._warnIfOrphaned();
this._pool?.assertStorageIsWritable();
if (index < 0 || index >= this.#items.length) {
throw new Error(
@@ -1224,7 +1287,10 @@ export class LiveList extends AbstractCrdt {
value._attach(id, this._pool);
const storageUpdates = new Map>();
- storageUpdates.set(this._id, makeUpdate(this, [setDelta(index, value)]));
+ storageUpdates.set(
+ this._id,
+ makeUpdate(this, [setDelta(index, value)], LOCAL_EDIT)
+ );
const ops = addIntentToRootOp(
value._toOpsWithOpId(this._id, position, this._pool),
@@ -1436,12 +1502,14 @@ export class LiveList extends AbstractCrdt {
function makeUpdate(
liveList: LiveList,
- deltaUpdates: LiveListUpdateDelta[]
+ deltaUpdates: LiveListUpdateDelta[],
+ source: UpdateSource
): LiveListUpdates {
return {
node: liveList,
type: "LiveList",
updates: deltaUpdates,
+ source,
};
}
diff --git a/packages/liveblocks-core/src/crdts/LiveMap.ts b/packages/liveblocks-core/src/crdts/LiveMap.ts
index 747023ab79c..cd66239d5f6 100644
--- a/packages/liveblocks-core/src/crdts/LiveMap.ts
+++ b/packages/liveblocks-core/src/crdts/LiveMap.ts
@@ -8,7 +8,7 @@ import { CrdtType } from "../protocol/StorageNode";
import type * as DevTools from "../types/DevToolsTreeNode";
import type { ParentToChildNodeMap } from "../types/NodeMap";
import type { ApplyResult, ManagedPool } from "./AbstractCrdt";
-import { AbstractCrdt, OpSource } from "./AbstractCrdt";
+import { AbstractCrdt } from "./AbstractCrdt";
import {
creationOpToLiveNode,
deserialize,
@@ -17,6 +17,8 @@ import {
lsonToLiveNode,
} from "./liveblocks-helpers";
import type { LiveNode, Lson, ToJson } from "./Lson";
+import type { OpSource, UpdateSource } from "./StorageUpdates";
+import { LOCAL_EDIT, toUpdateSource } from "./StorageUpdates";
import type { UpdateDelta } from "./UpdateDelta";
/**
@@ -30,6 +32,7 @@ export type LiveMapUpdates = {
// ^^^^^^
// FIXME: `string` is not specific enough here. See if we can
// improve this type to match TKey!
+ source: UpdateSource;
};
/**
@@ -139,7 +142,12 @@ export class LiveMap<
return { modified: false };
}
- if (source === OpSource.OURS) {
+ if (source.origin === "remote") {
+ // If a remote operation set an item,
+ // delete the unacknowledgedSet associated to the key
+ // to make sure any future ack can override it
+ this.#unacknowledgedSet.delete(key);
+ } else if (!source.optimistic) {
const lastUpdateOpId = this.#unacknowledgedSet.get(key);
if (lastUpdateOpId === opId) {
// Acknowlegment from local operation
@@ -149,11 +157,6 @@ export class LiveMap<
// Another local set has overriden the value, so we do nothing
return { modified: false };
}
- } else if (source === OpSource.THEIRS) {
- // If a remote operation set an item,
- // delete the unacknowledgedSet associated to the key
- // to make sure any future ack can override it
- this.#unacknowledgedSet.delete(key);
}
const previousValue = this.#map.get(key);
@@ -176,6 +179,7 @@ export class LiveMap<
node: this,
type: "LiveMap",
updates: { [key]: { type: "update" } },
+ source: toUpdateSource(source),
},
reverse,
};
@@ -191,7 +195,7 @@ export class LiveMap<
}
/** @internal */
- _detachChild(child: LiveNode): ApplyResult {
+ _detachChild(child: LiveNode, source: UpdateSource): ApplyResult {
const id = nn(this._id);
const parentKey = nn(child._parentKey);
const reverse = child._toOps(id, parentKey);
@@ -214,6 +218,7 @@ export class LiveMap<
deletedItem: liveNodeToLson(child),
},
},
+ source,
};
return { modified: storageUpdate, reverse };
@@ -253,6 +258,7 @@ export class LiveMap<
* @param value The value of the element to add. Should be serializable to JSON.
*/
set(key: TKey, value: TValue): void {
+ this._warnIfOrphaned();
this._pool?.assertStorageIsWritable();
const oldValue = this.#map.get(key);
@@ -275,6 +281,7 @@ export class LiveMap<
node: this,
type: "LiveMap",
updates: { [key]: { type: "update" } },
+ source: LOCAL_EDIT,
});
const ops = item._toOpsWithOpId(this._id, key, this._pool);
@@ -312,6 +319,7 @@ export class LiveMap<
* @returns true if an element existed and has been removed, or false if the element does not exist.
*/
delete(key: TKey): boolean {
+ this._warnIfOrphaned();
this._pool?.assertStorageIsWritable();
const item = this.#map.get(key);
@@ -335,6 +343,7 @@ export class LiveMap<
deletedItem: liveNodeToLson(item),
},
},
+ source: LOCAL_EDIT,
});
this._pool.dispatch(
[
diff --git a/packages/liveblocks-core/src/crdts/LiveObject.ts b/packages/liveblocks-core/src/crdts/LiveObject.ts
index df7cba3a2ca..86225cd4134 100644
--- a/packages/liveblocks-core/src/crdts/LiveObject.ts
+++ b/packages/liveblocks-core/src/crdts/LiveObject.ts
@@ -27,7 +27,7 @@ import type * as DevTools from "../types/DevToolsTreeNode";
import type { KnownKeys } from "../types/KnownKeys";
import type { ParentToChildNodeMap } from "../types/NodeMap";
import type { ApplyResult, ManagedPool } from "./AbstractCrdt";
-import { AbstractCrdt, OpSource } from "./AbstractCrdt";
+import { AbstractCrdt } from "./AbstractCrdt";
import {
creationOpToLson,
deserializeToLson,
@@ -37,6 +37,8 @@ import {
} from "./liveblocks-helpers";
import type { SyncConfig } from "./reconcile";
import { reconcileLiveObject } from "./reconcile";
+import type { OpSource, UpdateSource } from "./StorageUpdates";
+import { LOCAL_EDIT, toUpdateSource } from "./StorageUpdates";
import type { UpdateDelta } from "./UpdateDelta";
/**
@@ -70,6 +72,7 @@ export type LiveObjectUpdates = {
type: "LiveObject";
node: LiveObject;
updates: LiveObjectUpdateDelta;
+ source: UpdateSource;
};
/**
@@ -258,7 +261,7 @@ export class LiveObject extends AbstractCrdt {
return { modified: false };
}
- if (source === OpSource.LOCAL) {
+ if (source.origin === "local" && source.optimistic) {
// Track locally-generated opId to preserve optimistic update
this.#unackedOpsByKey.set(key, nn(opId));
} else if (this.#unackedOpsByKey.get(key) === undefined) {
@@ -305,12 +308,13 @@ export class LiveObject extends AbstractCrdt {
node: this,
type: "LiveObject",
updates: { [key]: { type: "update" } },
+ source: toUpdateSource(source),
},
};
}
/** @internal */
- _detachChild(child: LiveNode): ApplyResult {
+ _detachChild(child: LiveNode, source: UpdateSource): ApplyResult {
if (child) {
const id = nn(this._id);
const parentKey = nn(child._parentKey);
@@ -332,6 +336,7 @@ export class LiveObject extends AbstractCrdt {
updates: {
[parentKey]: { type: "delete", deletedItem },
} as { [K in keyof O]: UpdateDelta },
+ source,
};
return { modified: storageUpdate, reverse };
@@ -352,14 +357,14 @@ export class LiveObject extends AbstractCrdt {
}
/** @internal */
- _apply(op: Op, isLocal: boolean): ApplyResult {
+ _apply(op: Op, source: OpSource): ApplyResult {
if (op.type === OpCode.UPDATE_OBJECT) {
- return this.#applyUpdate(op, isLocal);
+ return this.#applyUpdate(op, source);
} else if (op.type === OpCode.DELETE_OBJECT_KEY) {
- return this.#applyDeleteObjectKey(op, isLocal);
+ return this.#applyDeleteObjectKey(op, source);
}
- return super._apply(op, isLocal);
+ return super._apply(op, source);
}
/** @internal */
@@ -389,7 +394,7 @@ export class LiveObject extends AbstractCrdt {
}
}
- #applyUpdate(op: UpdateObjectOp, isLocal: boolean): ApplyResult {
+ #applyUpdate(op: UpdateObjectOp, source: OpSource): ApplyResult {
let isModified = false;
const id = nn(this._id);
const reverse: Op[] = [];
@@ -420,7 +425,7 @@ export class LiveObject extends AbstractCrdt {
continue;
}
- if (isLocal) {
+ if (source.origin === "local" && source.optimistic) {
// Track locally-generated opId to preserve optimistic update
this.#unackedOpsByKey.set(key, nn(op.opId));
} else if (this.#unackedOpsByKey.get(key) === undefined) {
@@ -458,13 +463,14 @@ export class LiveObject extends AbstractCrdt {
node: this,
type: "LiveObject",
updates: updateDelta,
+ source: toUpdateSource(source),
},
reverse,
}
: { modified: false };
}
- #applyDeleteObjectKey(op: DeleteObjectKeyOp, isLocal: boolean): ApplyResult {
+ #applyDeleteObjectKey(op: DeleteObjectKeyOp, source: OpSource): ApplyResult {
const key = op.key;
// If property does not exist, exit without notifying
@@ -475,7 +481,10 @@ export class LiveObject extends AbstractCrdt {
// If a local operation exists on the same key and we receive a remote
// one prevent flickering by not applying delete op.
- if (!isLocal && this.#unackedOpsByKey.get(key) !== undefined) {
+ if (
+ !(source.origin === "local" && source.optimistic) &&
+ this.#unackedOpsByKey.get(key) !== undefined
+ ) {
return { modified: false };
}
@@ -504,6 +513,7 @@ export class LiveObject extends AbstractCrdt {
updates: {
[op.key]: { type: "delete", deletedItem: oldValue satisfies Lson },
},
+ source: toUpdateSource(source),
},
reverse,
};
@@ -540,6 +550,7 @@ export class LiveObject extends AbstractCrdt {
key: TKey,
value: Extract, Json>
): void {
+ this._warnIfOrphaned();
this._pool?.assertStorageIsWritable();
// Prepare synced-key deletion (if applicable) — does NOT dispatch yet
@@ -565,6 +576,7 @@ export class LiveObject extends AbstractCrdt {
...existing?.updates,
[key]: { type: "update" } satisfies UpdateDelta,
} as { [K in keyof O]: UpdateDelta },
+ source: LOCAL_EDIT,
});
this._pool.dispatch(ops, reverse, storageUpdates);
@@ -597,6 +609,7 @@ export class LiveObject extends AbstractCrdt {
storageUpdates: Map>,
]
| null {
+ this._warnIfOrphaned();
this._pool?.assertStorageIsWritable();
const k = key as string;
@@ -619,6 +632,7 @@ export class LiveObject extends AbstractCrdt {
deletedItem: oldValue,
} satisfies UpdateDelta,
} as { [K in keyof O]: UpdateDelta },
+ source: LOCAL_EDIT,
});
return [[], [], storageUpdates];
}
@@ -677,6 +691,7 @@ export class LiveObject extends AbstractCrdt {
} as {
[K in keyof O]: UpdateDelta;
},
+ source: LOCAL_EDIT,
});
return [ops, reverse, storageUpdates];
@@ -699,6 +714,7 @@ export class LiveObject extends AbstractCrdt {
* @param patch The object used to overrides properties
*/
update(patch: Partial): void {
+ this._warnIfOrphaned();
this._pool?.assertStorageIsWritable();
// If detectLargeObjects is enabled, perform a runtime size check now so we
@@ -854,6 +870,7 @@ export class LiveObject extends AbstractCrdt {
node: this,
type: "LiveObject",
updates: updateDelta,
+ source: LOCAL_EDIT,
});
this._pool.dispatch(ops, reverseOps, storageUpdates);
}
diff --git a/packages/liveblocks-core/src/crdts/LiveRegister.ts b/packages/liveblocks-core/src/crdts/LiveRegister.ts
index 3d4a904e7a7..eb078fa706a 100644
--- a/packages/liveblocks-core/src/crdts/LiveRegister.ts
+++ b/packages/liveblocks-core/src/crdts/LiveRegister.ts
@@ -14,6 +14,7 @@ import type * as DevTools from "../types/DevToolsTreeNode";
import type { ParentToChildNodeMap } from "../types/NodeMap";
import type { ApplyResult, ManagedPool } from "./AbstractCrdt";
import { AbstractCrdt } from "./AbstractCrdt";
+import type { OpSource } from "./StorageUpdates";
/**
* INTERNAL
@@ -85,8 +86,8 @@ export class LiveRegister extends AbstractCrdt {
}
/** @internal */
- _apply(op: Op, isLocal: boolean): ApplyResult {
- return super._apply(op, isLocal);
+ _apply(op: Op, source: OpSource): ApplyResult {
+ return super._apply(op, source);
}
/** @internal */
diff --git a/packages/liveblocks-core/src/crdts/LiveText.ts b/packages/liveblocks-core/src/crdts/LiveText.ts
new file mode 100644
index 00000000000..70b245c8a24
--- /dev/null
+++ b/packages/liveblocks-core/src/crdts/LiveText.ts
@@ -0,0 +1,969 @@
+import { kInternal } from "../internal";
+import { nn } from "../lib/assert";
+import * as console from "../lib/fancy-console";
+import type { JsonObject, ReadonlyJson } from "../lib/Json";
+import { nanoid } from "../lib/nanoid";
+import { stableStringify } from "../lib/stringify";
+import type {
+ CreateOp,
+ CreateTextOp,
+ LiveTextData,
+ Op,
+ TextAttributes,
+ TextOperation,
+ UpdateTextOp,
+} from "../protocol/Op";
+import { OpCode } from "../protocol/Op";
+import type { SerializedText, TextStorageNode } from "../protocol/StorageNode";
+import { CrdtType } from "../protocol/StorageNode";
+import type * as DevTools from "../types/DevToolsTreeNode";
+import type { ParentToChildNodeMap } from "../types/NodeMap";
+import type {
+ ApplyResult,
+ ManagedPool,
+ PrivateLiveNodeApi,
+} from "./AbstractCrdt";
+import { AbstractCrdt } from "./AbstractCrdt";
+import {
+ applyDelete,
+ applyFormat,
+ applyInsert,
+ applyTextOperationsToSegments,
+ clipIndexToCodePointBoundary,
+ clipRangeToCodePointBoundaries,
+ dataToSegments,
+ inverseMapTextIndexThroughOperations,
+ invertTextOperations,
+ mapTextIndexThroughOperations,
+ segmentsToData,
+ textLength,
+ textOperationsEqual,
+ type TextSegment,
+ transformTextOperations,
+ transformTextOperationsX,
+} from "./liveTextOps";
+import type { LiveNode } from "./Lson";
+import type { OpSource, StorageUpdate, UpdateSource } from "./StorageUpdates";
+import { LOCAL_EDIT, toUpdateSource } from "./StorageUpdates";
+
+export type LiveTextAttributes = TextAttributes;
+export type LiveTextAttributesPatch = JsonObject;
+export type {
+ LiveTextData,
+ TextOperation as LiveTextOperation,
+ LiveTextSegment,
+} from "../protocol/Op";
+
+export type LiveTextChange =
+ | {
+ /** Text was inserted at {@link LiveTextChange.index}. */
+ readonly type: "insert";
+ readonly index: number;
+ readonly text: string;
+ readonly attributes?: TextAttributes;
+ }
+ | {
+ /** Text was deleted starting at {@link LiveTextChange.index}. */
+ readonly type: "delete";
+ readonly index: number;
+ readonly length: number;
+ readonly deletedText: string;
+ }
+ | {
+ /** Inline attributes were updated on a range of text. */
+ readonly type: "format";
+ readonly index: number;
+ readonly length: number;
+ readonly attributes: LiveTextAttributesPatch;
+ };
+
+/** Notification payload when a {@link LiveText} node changes. */
+export type LiveTextUpdates = {
+ type: "LiveText";
+ node: LiveText;
+ version: number;
+ updates: LiveTextChange[];
+ source: UpdateSource;
+};
+
+/**
+ * An accepted (server-ordered) update, recorded in *locally-applied* form:
+ * the ops as they were actually applied to this client's document (i.e.
+ * after transformation over the local pending ops). Acknowledgements of our
+ * own ops apply nothing locally, so they are recorded with empty ops. This
+ * makes the entries directly usable for bringing replayed (undo/redo) ops
+ * up to date: chaining transforms through these entries moves an op from
+ * the local document state at `baseVersion` to the current local state.
+ */
+type AcceptedTextOperations = {
+ version: number;
+ opId?: string;
+ ops: readonly TextOperation[];
+};
+
+/**
+ * @private
+ *
+ * Private methods on a LiveText node. As a user of Liveblocks, NEVER USE ANY
+ * OF THESE DIRECTLY, because bad things will probably happen if you do.
+ */
+export type PrivateLiveTextApi = PrivateLiveNodeApi & {
+ /**
+ * Encode a local-document index into server-confirmed coordinates suitable
+ * for broadcasting to peers via presence or any other side channel. Pair
+ * the result with {@link LiveText.version} at the same instant when
+ * sending.
+ */
+ encodeIndex(localIndex: number): number;
+
+ /**
+ * Decode an `(index, fromVersion)` pair from a peer into an offset in this
+ * LiveText's current local document.
+ */
+ decodeIndex(index: number, fromVersion: number): number | null;
+};
+
+const ACCEPTED_OPS_HISTORY_LIMIT = 1000;
+
+export {
+ applyLiveTextOperations,
+ mapTextIndexThroughOperations,
+ transformTextOperations,
+} from "./liveTextOps";
+
+/**
+ * LiveText is a collaborative rich-text primitive built on server-ordered
+ * operational transformation.
+ *
+ * Use it to store plain text with optional inline formatting attributes in
+ * Liveblocks Storage. Each document is a flat sequence of text segments; it
+ * cannot contain child Storage structures.
+ *
+ * Outbound model (one-in-flight): at most one UpdateTextOp per node is
+ * awaiting server acknowledgement at any time. Local edits made while an op
+ * is in flight are queued and sent (composed into a single op) once the ack
+ * arrives. This guarantees every wire op is expressed against server-state
+ * coordinates, so the server can transform it over exactly the (foreign)
+ * ops the client hadn't seen — never over the client's own pending ops.
+ *
+ * Inbound model: accepted remote ops are transformed over the local pending
+ * ops before being applied ("before" order: the accepted op wins ties), and
+ * the pending ops are re-expressed over the remote op in turn ("after"
+ * order), keeping them in server coordinates at all times.
+ *
+ * @example
+ * const text = new LiveText("Hello");
+ * text.insert(5, " world");
+ * text.format(0, 5, { bold: true });
+ *
+ * // [["Hello", { bold: true }], [" world"]]
+ * text.toJSON();
+ *
+ * @example
+ * // Use in Storage
+ * declare global {
+ * interface Liveblocks {
+ * Storage: { document: LiveText };
+ * }
+ * }
+ *
+ * const { root } = await room.getStorage();
+ * root.get("document").replace(0, root.get("document").length, "Updated");
+ */
+export class LiveText extends AbstractCrdt {
+ /**
+ * @private
+ *
+ * Private methods and variables used in the core internals, but as a user
+ * of Liveblocks, NEVER USE ANY OF THESE DIRECTLY, because bad things
+ * will probably happen if you do.
+ */
+ declare readonly [kInternal]: PrivateLiveTextApi;
+
+ /** The local document: #confirmed ⊕ #inFlightOps ⊕ #queuedOps. */
+ #segments: TextSegment[];
+ /** The server-confirmed document (only authoritative ops applied). */
+ #confirmed: TextSegment[];
+ #version: number;
+
+ /** The op currently awaiting server acknowledgement (at most one). */
+ #inFlightOpId?: string;
+ /** Its ops, continuously re-expressed against current server state. */
+ #inFlightOps: TextOperation[] = [];
+ /** Local edits made while an op is in flight; sent after the ack. */
+ #queuedOps: TextOperation[] = [];
+
+ #acceptedOps: AcceptedTextOperations[] = [];
+
+ /**
+ * Creates a new LiveText document.
+ *
+ * @param textOrData Initial plain text, or an array of `[text]` /
+ * `[text, attributes]` segments. Defaults to an empty document.
+ *
+ * @example
+ * new LiveText();
+ * new LiveText("Hello world");
+ * new LiveText([["Hello ", { bold: true }], ["world"]]);
+ */
+ constructor(textOrData: string | LiveTextData = "", version = 0) {
+ super();
+ this.#segments =
+ typeof textOrData === "string"
+ ? textOrData.length === 0
+ ? []
+ : [{ text: textOrData }]
+ : dataToSegments(textOrData);
+ this.#confirmed = [...this.#segments];
+ this.#version = version;
+
+ Object.assign(this[kInternal], {
+ encodeIndex: (localIndex: number) => this.#encodeIndex(localIndex),
+ decodeIndex: (index: number, fromVersion: number) =>
+ this.#decodeIndex(index, fromVersion),
+ });
+ }
+
+ get version(): number {
+ return this.#version;
+ }
+
+ get length(): number {
+ return textLength(this.#segments);
+ }
+
+ /** @internal */
+ static _deserialize(
+ [id, item]: TextStorageNode,
+ _parentToChildren: ParentToChildNodeMap,
+ pool: ManagedPool
+ ): LiveText {
+ const text = new LiveText(item.data, item.version);
+ text._attach(id, pool);
+ return text;
+ }
+
+ /** @internal */
+ _toOps(parentId: string, parentKey: string): CreateTextOp[] {
+ if (this._id === undefined) {
+ throw new Error("Cannot serialize LiveText if it is not attached");
+ }
+
+ return [
+ {
+ type: OpCode.CREATE_TEXT,
+ id: this._id,
+ parentId,
+ parentKey,
+ data: this.toJSON(),
+ version: this.#version,
+ },
+ ];
+ }
+
+ /** @internal */
+ _serialize(): SerializedText {
+ if (this.parent.type !== "HasParent") {
+ throw new Error("Cannot serialize LiveText if parent is missing");
+ }
+
+ return {
+ type: CrdtType.TEXT,
+ parentId: nn(this.parent.node._id, "Parent node expected to have ID"),
+ parentKey: this.parent.key,
+ data: this.toJSON(),
+ version: this.#version,
+ };
+ }
+
+ /** @internal */
+ _attachChild(_op: CreateOp): ApplyResult {
+ throw new Error("LiveText cannot contain child nodes");
+ }
+
+ /** @internal */
+ _detachChild(_crdt: LiveNode): ApplyResult {
+ throw new Error("LiveText cannot contain child nodes");
+ }
+
+ /** @internal */
+ _apply(op: Op, source: OpSource): ApplyResult {
+ if (op.type !== OpCode.UPDATE_TEXT) {
+ return super._apply(op, source);
+ }
+
+ if (source.origin === "local" && source.optimistic) {
+ return this.#applyLocal(op, toUpdateSource(source));
+ }
+
+ if (op.opId !== undefined && op.opId === this.#inFlightOpId) {
+ return this.#applyAck(op, toUpdateSource(source));
+ }
+
+ if (
+ op.opId !== undefined &&
+ this.#acceptedOps.some((entry) => entry.opId === op.opId)
+ ) {
+ // Duplicate acknowledgement of an op we already integrated.
+ this.#version = Math.max(this.#version, op.version ?? op.baseVersion + 1);
+ return { modified: false };
+ }
+
+ return this.#applyRemote(op, toUpdateSource(source));
+ }
+
+ /**
+ * Inserts text at the given index.
+ *
+ * @param index Character index at which to insert. Values outside the
+ * document range are clipped.
+ * @param text Text to insert.
+ * @param attributes Optional inline attributes for the inserted text.
+ *
+ * @example
+ * const text = new LiveText("Hello");
+ * text.insert(5, " world");
+ * text.insert(0, "Say: ", { italic: true });
+ */
+ insert(index: number, text: string, attributes?: TextAttributes): void {
+ const clippedIndex = clipIndexToCodePointBoundary(this.toString(), index);
+ this.#dispatch([{ type: "insert", index: clippedIndex, text, attributes }]);
+ }
+
+ /**
+ * Deletes `length` characters starting at `index`.
+ *
+ * @example
+ * const text = new LiveText("Hello world");
+ * text.delete(5, 6); // "Hello"
+ */
+ delete(index: number, length: number): void {
+ const clipped = clipRangeToCodePointBoundaries(
+ this.toString(),
+ index,
+ length
+ );
+ if (clipped.length === 0) {
+ return;
+ }
+ this.#dispatch([
+ { type: "delete", index: clipped.index, length: clipped.length },
+ ]);
+ }
+
+ /**
+ * Replaces a range of text with new text.
+ *
+ * @example
+ * const text = new LiveText("Hello world");
+ * text.replace(0, 5, "Hi"); // "Hi world"
+ */
+ replace(
+ index: number,
+ length: number,
+ text: string,
+ attributes?: TextAttributes
+ ): void {
+ const clipped = clipRangeToCodePointBoundaries(
+ this.toString(),
+ index,
+ length
+ );
+ const ops: TextOperation[] = [];
+ if (clipped.length > 0) {
+ ops.push({
+ type: "delete",
+ index: clipped.index,
+ length: clipped.length,
+ });
+ }
+ if (text.length > 0) {
+ ops.push({ type: "insert", index: clipped.index, text, attributes });
+ }
+ this.#dispatch(ops);
+ }
+
+ /**
+ * Encode a local-document index (an offset into this LiveText's current
+ * #segments, which CodeMirror or any consumer mirrors as its document)
+ * into server-confirmed coordinates suitable for broadcasting to peers via
+ * presence or any other side channel.
+ *
+ * The returned index is in this LiveText's current #confirmed coordinates
+ * — that is, with this client's local pending ops inverse-mapped out.
+ * Pair it with the current {@link LiveText.version} when sending so the
+ * receiver can call {@link PrivateLiveTextApi.decodeIndex} to land the
+ * position in their own local document coordinates regardless of their
+ * private pending ops.
+ *
+ * Index ambiguity at boundaries is resolved by an inverse-of-forward
+ * convention: a position at or before a local insertion is reported as
+ * the position right before the insertion in #confirmed; a position past
+ * the insertion shifts left by the insertion's length. Positions inside
+ * an own-pending insertion collapse to the insertion point.
+ */
+ #encodeIndex(localIndex: number): number {
+ let mapped = Math.max(0, Math.min(localIndex, this.length));
+ mapped = inverseMapTextIndexThroughOperations(mapped, this.#queuedOps);
+ mapped = inverseMapTextIndexThroughOperations(mapped, this.#inFlightOps);
+ return mapped;
+ }
+
+ /**
+ * Decode an `(index, fromVersion)` pair produced by
+ * {@link PrivateLiveTextApi.encodeIndex} — typically on a peer — into an
+ * offset in this LiveText's current local document (an index suitable for
+ * placing a CodeMirror marker, an annotation anchor, or anything else that
+ * lives over #segments).
+ *
+ * Composes the accepted ops applied since `fromVersion` (drawn from
+ * #acceptedOps in locally-applied form) with this client's own local
+ * pending ops, in that order. The result is in current #segments
+ * coordinates.
+ *
+ * Returns `null` when the position cannot be decoded against the current
+ * state:
+ * - `fromVersion` is greater than this LiveText's current version: the
+ * peer is ahead of us. The caller should park the message and retry
+ * after more accepted ops arrive.
+ * - `fromVersion` falls outside the retained accepted-ops history. This
+ * only happens after very long-lived disconnections; the caller can
+ * fall back to using the raw index and letting subsequent local
+ * transactions map it (with bounded drift).
+ */
+ #decodeIndex(index: number, fromVersion: number): number | null {
+ if (fromVersion > this.#version) {
+ return null;
+ }
+ if (fromVersion < this.#version) {
+ const oldest = this.#acceptedOps[0]?.version;
+ if (oldest === undefined || oldest > fromVersion + 1) {
+ return null;
+ }
+ }
+
+ let mapped = index;
+ for (const entry of this.#acceptedOps) {
+ if (entry.version <= fromVersion) continue;
+ if (entry.version > this.#version) break;
+ if (entry.ops.length === 0) continue;
+ mapped = mapTextIndexThroughOperations(mapped, entry.ops);
+ }
+ mapped = mapTextIndexThroughOperations(mapped, this.#inFlightOps);
+ mapped = mapTextIndexThroughOperations(mapped, this.#queuedOps);
+ return Math.max(0, Math.min(mapped, this.length));
+ }
+
+ /**
+ * Applies or removes inline attributes on a range of text.
+ *
+ * Set an attribute to `null` to remove it from the range.
+ *
+ * @example
+ * const text = new LiveText("Hello world");
+ * text.format(0, 5, { bold: true });
+ * text.format(0, 5, { bold: null });
+ */
+ format(
+ index: number,
+ length: number,
+ attributes: LiveTextAttributesPatch
+ ): void {
+ const clipped = clipRangeToCodePointBoundaries(
+ this.toString(),
+ index,
+ length
+ );
+ if (clipped.length === 0) {
+ return;
+ }
+ this.#dispatch([
+ {
+ type: "format",
+ index: clipped.index,
+ length: clipped.length,
+ attributes,
+ },
+ ]);
+ }
+
+ /** Local edits made through the public API. */
+ #dispatch(ops: readonly TextOperation[]): void {
+ if (ops.length === 0) {
+ return;
+ }
+
+ this._warnIfOrphaned();
+ this._pool?.assertStorageIsWritable();
+ const attached = this._pool !== undefined && this._id !== undefined;
+ const reverse = attached ? this.#invertOperations(ops) : [];
+ const changes = this.#applyOperationsLocally(ops);
+
+ if (!attached) {
+ return;
+ }
+
+ const pool = nn(this._pool);
+ const id = nn(this._id);
+ const updates = new Map([
+ [
+ id,
+ {
+ type: "LiveText",
+ node: this,
+ version: this.#version,
+ updates: changes,
+ source: LOCAL_EDIT,
+ },
+ ],
+ ]);
+
+ if (this.#inFlightOpId === undefined) {
+ const opId = pool.generateOpId();
+ this.#inFlightOpId = opId;
+ this.#inFlightOps = [...ops];
+ pool.dispatch(
+ [
+ {
+ type: OpCode.UPDATE_TEXT,
+ id,
+ opId,
+ baseVersion: this.#version,
+ ops: [...ops],
+ },
+ ],
+ reverse,
+ updates
+ );
+ } else {
+ // An op is awaiting acknowledgement: queue these edits. They will be
+ // sent (as a single composed op) when the ack arrives. The dispatch
+ // still needs to register the reverse ops and clear the redo stack,
+ // like any fresh local mutation.
+ this.#queuedOps.push(...ops);
+ pool.dispatch([], reverse, updates, { clearRedoStack: true });
+ }
+ }
+
+ /**
+ * A local replay of an existing wire op: an undo/redo frame, or an
+ * unacknowledged op re-sent after a reconnect.
+ */
+ #applyLocal(op: UpdateTextOp, source: UpdateSource): ApplyResult {
+ const mutableOp = op as { baseVersion: number; ops: TextOperation[] };
+
+ // Re-sent offline op (reconnect): its content is already applied
+ // locally. Compose any queued ops into it and refresh its authoritative
+ // fields so the server sees current server-state coordinates.
+ if (op.opId !== undefined && op.opId === this.#inFlightOpId) {
+ this.#inFlightOps = [...this.#inFlightOps, ...this.#queuedOps];
+ this.#queuedOps = [];
+ mutableOp.baseVersion = this.#version;
+ mutableOp.ops = [...this.#inFlightOps];
+ return { modified: false };
+ }
+
+ // Replayed undo/redo frame: transform it over everything accepted since
+ // it was created. Accepted entries are recorded in locally-applied form,
+ // so this moves the op into current local-document coordinates. (Our own
+ // acknowledgements record empty ops — applying nothing locally — so the
+ // frame is never transformed over the very op it inverts.)
+ let ops: readonly TextOperation[] = op.ops;
+ for (const entry of this.#acceptedOps) {
+ if (entry.version > op.baseVersion && entry.ops.length > 0) {
+ ops = transformTextOperations(ops, entry.ops, "after");
+ }
+ }
+
+ const reverse = this.#invertOperations(ops);
+ const changes = this.#applyOperationsLocally(ops);
+
+ if (this.#inFlightOpId === undefined && ops.length > 0) {
+ this.#inFlightOpId = nn(op.opId, "Local ops must have an opId");
+ this.#inFlightOps = [...ops];
+ mutableOp.baseVersion = this.#version;
+ mutableOp.ops = [...ops];
+ } else {
+ // Another op is in flight (or the ops transformed away entirely):
+ // queue the content and turn the wire op into an empty vehicle. The
+ // server ignores empty updates (acks without applying), and the
+ // queued content rides along after the in-flight ack.
+ this.#queuedOps.push(...ops);
+ mutableOp.baseVersion = this.#version;
+ mutableOp.ops = [];
+ }
+
+ if (changes.length === 0) {
+ return { modified: false };
+ }
+
+ return {
+ reverse,
+ modified: {
+ type: "LiveText",
+ node: this,
+ version: this.#version,
+ updates: changes,
+ source,
+ },
+ };
+ }
+
+ /** Server acknowledgement of our in-flight op. */
+ #applyAck(op: UpdateTextOp, source: UpdateSource): ApplyResult {
+ const ackedVersion =
+ op.version ?? Math.max(this.#version, op.baseVersion + 1);
+ const predicted = this.#inFlightOps;
+ const opId = this.#inFlightOpId;
+
+ this.#confirmed = applyTextOperationsToSegments(this.#confirmed, op.ops);
+ this.#inFlightOpId = undefined;
+ this.#inFlightOps = [];
+
+ let appliedOps: TextOperation[] = [];
+ let result: ApplyResult = { modified: false };
+
+ if (!textOperationsEqual(op.ops, predicted)) {
+ // The authoritative ops differ from our continuously re-expressed
+ // prediction. This should not happen as long as client and server run
+ // the same transform; recover by rebuilding the local document from
+ // the confirmed state.
+ console.error(
+ "LiveText: acknowledgement did not match the local prediction; resynchronizing"
+ );
+ const rebuilt = this.#rebuildLocalFromConfirmed();
+ appliedOps = rebuilt.appliedOps;
+ if (rebuilt.changes.length > 0) {
+ result = {
+ reverse: [],
+ modified: {
+ type: "LiveText",
+ node: this,
+ version: ackedVersion,
+ updates: rebuilt.changes,
+ source,
+ },
+ };
+ }
+ }
+
+ this.#version = Math.max(this.#version, ackedVersion);
+ this.#recordAccepted(ackedVersion, appliedOps, opId);
+ this.#flushQueued();
+ return result;
+ }
+
+ /** An accepted op from another client (or a server-fabricated fix op). */
+ #applyRemote(op: UpdateTextOp, source: UpdateSource): ApplyResult {
+ const version = op.version ?? this.#version + 1;
+
+ // Advance the confirmed state with the authoritative ops as-is.
+ this.#confirmed = applyTextOperationsToSegments(this.#confirmed, op.ops);
+
+ // Transform the remote op over our pending ops (the remote op is ordered
+ // before them), and re-express the pending ops over the remote op.
+ const [overInFlight, inFlight] = transformTextOperationsX(
+ op.ops,
+ this.#inFlightOps,
+ "before"
+ );
+ const [applied, queued] = transformTextOperationsX(
+ overInFlight,
+ this.#queuedOps,
+ "before"
+ );
+ this.#inFlightOps = inFlight;
+ this.#queuedOps = queued;
+
+ this.#recordAccepted(version, applied, op.opId);
+
+ if (applied.length === 0) {
+ this.#version = Math.max(this.#version, version);
+ return { modified: false };
+ }
+
+ const reverse = this.#invertOperations(applied);
+ const changes = this.#applyOperationsLocally(applied);
+ this.#version = Math.max(this.#version, version);
+
+ return {
+ reverse,
+ modified: {
+ type: "LiveText",
+ node: this,
+ version: this.#version,
+ updates: changes,
+ source,
+ },
+ };
+ }
+
+ /** Send the queued ops as the next in-flight op (after an ack). */
+ #flushQueued(): void {
+ if (
+ this.#queuedOps.length === 0 ||
+ this._pool === undefined ||
+ this._id === undefined
+ ) {
+ return;
+ }
+
+ const opId = this._pool.generateOpId();
+ this.#inFlightOpId = opId;
+ this.#inFlightOps = this.#queuedOps;
+ this.#queuedOps = [];
+ this._pool.dispatch(
+ [
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: this._id,
+ opId,
+ baseVersion: this.#version,
+ ops: [...this.#inFlightOps],
+ },
+ ],
+ [],
+ new Map(),
+ // The local content was already applied (and made undoable) when the
+ // edits happened; this is purely an outbound flush.
+ { clearRedoStack: false }
+ );
+ }
+
+ /**
+ * Rebuild the local document as confirmed ⊕ queued ops, returning the
+ * coarse delta that was applied. Only used by defensive recovery paths.
+ */
+ #rebuildLocalFromConfirmed(): {
+ appliedOps: TextOperation[];
+ changes: LiveTextChange[];
+ } {
+ const before = this.#segments;
+ const after = applyTextOperationsToSegments(this.#confirmed, [
+ ...this.#inFlightOps,
+ ...this.#queuedOps,
+ ]);
+
+ if (
+ stableStringify(segmentsToData(before)) ===
+ stableStringify(segmentsToData(after))
+ ) {
+ this.#segments = after;
+ return { appliedOps: [], changes: [] };
+ }
+
+ const beforeText = before.map((segment) => segment.text).join("");
+ this.#segments = after;
+ this.invalidate();
+
+ const appliedOps: TextOperation[] = [];
+ const changes: LiveTextChange[] = [];
+ if (beforeText.length > 0) {
+ appliedOps.push({ type: "delete", index: 0, length: beforeText.length });
+ changes.push({
+ type: "delete",
+ index: 0,
+ length: beforeText.length,
+ deletedText: beforeText,
+ });
+ }
+ let index = 0;
+ for (const segment of after) {
+ appliedOps.push({
+ type: "insert",
+ index,
+ text: segment.text,
+ attributes: segment.attributes,
+ });
+ changes.push({
+ type: "insert",
+ index,
+ text: segment.text,
+ attributes: segment.attributes,
+ });
+ index += segment.text.length;
+ }
+ return { appliedOps, changes };
+ }
+
+ /**
+ * Reconcile this node against an authoritative storage snapshot (e.g.
+ * after a reconnect). The confirmed state and version are replaced by the
+ * snapshot's; pending (in-flight + queued) ops are preserved on top and
+ * will be re-sent by the offline-ops replay.
+ *
+ * @internal
+ */
+ _resyncText(
+ data: LiveTextData,
+ version: number,
+ source: UpdateSource
+ ): LiveTextUpdates | undefined {
+ this.#confirmed = dataToSegments(data);
+ this.#version = version;
+ // Accepted-op history is expressed against the pre-snapshot timeline and
+ // is no longer meaningful.
+ this.#acceptedOps = [];
+
+ const rebuilt = this.#rebuildLocalFromConfirmed();
+ if (rebuilt.changes.length === 0) {
+ return undefined;
+ }
+
+ return {
+ type: "LiveText",
+ node: this,
+ version: this.#version,
+ updates: rebuilt.changes,
+ source,
+ };
+ }
+
+ /**
+ * Called when the server rejected one of our ops. Drops all pending state
+ * for this node (edits queued behind a rejected op cannot be trusted
+ * either); the room follows up with a storage resync.
+ *
+ * @internal
+ */
+ _rejectPendingOp(opId: string): void {
+ if (opId !== this.#inFlightOpId) {
+ return;
+ }
+ this.#inFlightOpId = undefined;
+ this.#inFlightOps = [];
+ this.#queuedOps = [];
+ }
+
+ #recordAccepted(
+ version: number,
+ ops: readonly TextOperation[],
+ opId: string | undefined
+ ): void {
+ if (this.#acceptedOps.some((entry) => entry.version === version)) {
+ return;
+ }
+
+ this.#acceptedOps.push({ version, opId, ops: [...ops] });
+ this.#acceptedOps.sort((left, right) => left.version - right.version);
+ if (this.#acceptedOps.length > ACCEPTED_OPS_HISTORY_LIMIT) {
+ this.#acceptedOps.splice(
+ 0,
+ this.#acceptedOps.length - ACCEPTED_OPS_HISTORY_LIMIT
+ );
+ }
+ }
+
+ #applyOperationsLocally(ops: readonly TextOperation[]): LiveTextChange[] {
+ const changes: LiveTextChange[] = [];
+ for (const op of ops) {
+ if (op.type === "insert") {
+ this.#segments = applyInsert(
+ this.#segments,
+ op.index,
+ op.text,
+ op.attributes
+ );
+ changes.push({
+ type: "insert",
+ index: op.index,
+ text: op.text,
+ attributes: op.attributes,
+ });
+ } else if (op.type === "delete") {
+ const result = applyDelete(this.#segments, op.index, op.length);
+ this.#segments = result.segments;
+ changes.push({
+ type: "delete",
+ index: op.index,
+ length: op.length,
+ deletedText: result.deletedText,
+ });
+ } else {
+ this.#segments = applyFormat(
+ this.#segments,
+ op.index,
+ op.length,
+ op.attributes
+ );
+ changes.push({
+ type: "format",
+ index: op.index,
+ length: op.length,
+ attributes: op.attributes,
+ });
+ }
+ }
+ this.invalidate();
+ return changes;
+ }
+
+ #invertOperations(ops: readonly TextOperation[]): UpdateTextOp[] {
+ return [
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: nn(this._id),
+ baseVersion: this.#version,
+ ops: invertTextOperations(this.#segments, ops),
+ },
+ ];
+ }
+
+ /** Returns the plain text content without attributes. Equivalent to joining the text from each segment in {@link LiveText.toJSON}. */
+ toString(): string {
+ return this.#segments.map((segment) => segment.text).join("");
+ }
+
+ /**
+ * Returns a JSON-compatible snapshot of the document as a {@link LiveTextData}
+ * array.
+ *
+ * @example
+ * new LiveText([["Hello ", { bold: true }], ["world"]]).toJSON();
+ * // [["Hello ", { bold: true }], ["world"]]
+ */
+ toJSON(): LiveTextData {
+ return super.toJSON() as LiveTextData;
+ }
+
+ /** @internal */
+ _toJSON(): ReadonlyJson {
+ return segmentsToData(this.#segments) as ReadonlyJson;
+ }
+
+ /** @internal */
+ toTreeNode(key: string): DevTools.LiveTreeNode<"LiveText"> {
+ return super.toTreeNode(key) as DevTools.LiveTreeNode<"LiveText">;
+ }
+
+ /** @internal */
+ _toTreeNode(key: string): DevTools.LsonTreeNode {
+ const nodeId = this._id ?? nanoid();
+ const payload: DevTools.LsonTreeNode[] = this.toJSON().map(
+ (segment, index) => ({
+ type: "Json",
+ id: `${nodeId}:${index}`,
+ key: String(index),
+ payload: segment,
+ })
+ );
+
+ payload.push({
+ type: "Json",
+ id: `${nodeId}:version`,
+ key: "version",
+ payload: this.version,
+ });
+
+ return {
+ type: "LiveText",
+ id: nodeId,
+ key,
+ payload,
+ };
+ }
+
+ clone(): LiveText {
+ return new LiveText(this.toJSON(), this.#version);
+ }
+}
diff --git a/packages/liveblocks-core/src/crdts/Lson.ts b/packages/liveblocks-core/src/crdts/Lson.ts
index eae6642dc37..fe108903a2f 100644
--- a/packages/liveblocks-core/src/crdts/Lson.ts
+++ b/packages/liveblocks-core/src/crdts/Lson.ts
@@ -3,12 +3,14 @@ import type { LiveList } from "../crdts/LiveList";
import type { LiveMap } from "../crdts/LiveMap";
import type { LiveObject } from "../crdts/LiveObject";
import type { LiveRegister } from "../crdts/LiveRegister";
+import type { LiveText, LiveTextData } from "../crdts/LiveText";
import type { Json, ReadonlyJson, ReadonlyJsonObject } from "../lib/Json";
export type LiveStructure =
| LiveObject
| LiveList
| LiveMap
+ | LiveText
| LiveFile;
/**
@@ -72,6 +74,10 @@ export type ToJson =
Lson extends V ? ReadonlyJsonObject :
{ readonly [K in KS]: ToJson } :
+ // A LiveText serializes to a delta so inline attributes are preserved
+ L extends LiveText ?
+ LiveTextData :
+
// A LiveFile serializes to its immutable metadata
L extends LiveFile ?
LiveFileData :
diff --git a/packages/liveblocks-core/src/crdts/StorageUpdates.ts b/packages/liveblocks-core/src/crdts/StorageUpdates.ts
index 282ba1e1a0a..e25f5991ade 100644
--- a/packages/liveblocks-core/src/crdts/StorageUpdates.ts
+++ b/packages/liveblocks-core/src/crdts/StorageUpdates.ts
@@ -1,17 +1,85 @@
import type { LiveListUpdates } from "../crdts/LiveList";
import type { LiveMapUpdates } from "../crdts/LiveMap";
import type { LiveObjectUpdates } from "../crdts/LiveObject";
+import type { LiveTextUpdates } from "../crdts/LiveText";
import type { Lson, LsonObject } from "../crdts/Lson";
+import { freeze } from "../lib/freeze";
export type StorageCallback = (updates: StorageUpdate[]) => void;
export type LiveMapUpdate = LiveMapUpdates;
export type LiveObjectUpdate = LiveObjectUpdates;
export type LiveListUpdate = LiveListUpdates;
+export type LiveTextUpdate = LiveTextUpdates;
+
+export type Via = "edit" | "undo" | "redo";
+
+/**
+ * type OpSource:
+ * Internal type for the source of an Op. Has an extra `optimistic` field
+ * that is not exposed publicly.
+ *
+ * type UpdateSource:
+ * Public type for the source of an Op.
+ *
+ * When applying an op to a CRDT, we need to know where it came from to apply
+ * it correctly. The three cases are:
+ *
+ * - `{ origin: "local", optimistic: true }`: applied locally (an undo, redo, or
+ * reconnect replay), not yet acknowledged by the server. Will be sent to the
+ * server and needs to be tracked for conflict resolution.
+ *
+ * - `{ origin: "local", optimistic: false }`: received from the server, but
+ * originated from THIS client. The server echoed it back to confirm.
+ *
+ * - `{ origin: "remote" }`: received from the server, originated from another
+ * client. Apply it, unless there's a pending local op for the same key (local
+ * ops take precedence until acknowledged). Note that a "fix Op" sent by the
+ * server in response to a local mutation that caused a conflict is also
+ * classified this way, as if another client resolved the conflict.
+ *
+ * @internal
+ */
+export type OpSource =
+ | { origin: "remote" }
+ | { origin: "local"; via: Via; optimistic: boolean };
+
+/**
+ * Where a Storage update came from.
+ *
+ * Updates with `origin: "remote"` were made by another client, and reached
+ * this client over the network. Updates with `origin: "local"` were made by
+ * this client, and `via` says how: a regular edit, or a replay from the
+ * undo/redo history.
+ */
+// prettier-ignore
+export type UpdateSource =
+ | { origin: "remote" }
+ | { origin: "local"; via: Via };
+
+export const REMOTE = freeze({ origin: "remote" }) satisfies UpdateSource;
+export const LOCAL_EDIT = freeze({ origin: "local", via: "edit" }) satisfies UpdateSource; // prettier-ignore
+export const LOCAL_UNDO = freeze({ origin: "local", via: "undo" }) satisfies UpdateSource; // prettier-ignore
+export const LOCAL_REDO = freeze({ origin: "local", via: "redo" }) satisfies UpdateSource; // prettier-ignore
+
+/** Narrows an {@link OpSource} down to what subscribers may see. */
+export function toUpdateSource(source: OpSource | UpdateSource): UpdateSource {
+ return source.origin === "remote"
+ ? source
+ : // Removes `optimistic` field, which is not public
+ { origin: "local", via: source.via };
+}
/**
* The payload of notifications sent (in-client) when LiveStructures change.
* Messages of this kind are not originating from the network, but are 100%
* in-client.
+ *
+ * Every update carries a `source`, saying where the change came from. See
+ * {@link UpdateSource}.
*/
-export type StorageUpdate = LiveMapUpdate | LiveObjectUpdate | LiveListUpdate;
+export type StorageUpdate =
+ | LiveMapUpdate
+ | LiveObjectUpdate
+ | LiveListUpdate
+ | LiveTextUpdate;
diff --git a/packages/liveblocks-core/src/crdts/UnacknowledgedOps.ts b/packages/liveblocks-core/src/crdts/UnacknowledgedOps.ts
index 1346e21847a..42d079a0571 100644
--- a/packages/liveblocks-core/src/crdts/UnacknowledgedOps.ts
+++ b/packages/liveblocks-core/src/crdts/UnacknowledgedOps.ts
@@ -76,6 +76,11 @@ export class UnacknowledgedOps implements ReadonlyUnacknowledgedOps {
return this.#byOpId.size;
}
+ /** The still-unacknowledged op with the given opId, if any. */
+ get(opId: string): ClientWireOp | undefined {
+ return this.#byOpId.get(opId);
+ }
+
/**
* Mark the given Op as still unacknowledged.
*/
diff --git a/packages/liveblocks-core/src/crdts/__tests__/LiveFile.devserver.test.ts b/packages/liveblocks-core/src/crdts/__tests__/LiveFile.devserver.test.ts
index 8f7c2b15ca6..52644a6c09e 100644
--- a/packages/liveblocks-core/src/crdts/__tests__/LiveFile.devserver.test.ts
+++ b/packages/liveblocks-core/src/crdts/__tests__/LiveFile.devserver.test.ts
@@ -9,7 +9,6 @@ import { describe, expect, test, vi } from "vitest";
import { enterAndConnect, enterConnectAndGetStorage, initRoom } from "../../__tests__/_devserver"; // prettier-ignore
import { createStorageFileId } from "../../lib/createIds";
import { LiveFile } from "../LiveFile";
-import type { LiveObject } from "../LiveObject";
const CONTENTS = "hello world";
@@ -19,6 +18,10 @@ type ServerStorage = {
data: Record;
};
+type Storage = {
+ file?: LiveFile;
+};
+
/**
* Read a room's Storage straight from the server, bypassing the client's own
* (optimistic) copy.
@@ -50,10 +53,10 @@ describe("LiveFile", () => {
test("an uploaded file can be referenced from Storage and read back", async () => {
const roomId = await initRoom({ liveblocksType: "LiveObject", data: {} });
- const { room, storage } = await enterConnectAndGetStorage(roomId);
+ const { room, storage } = await enterConnectAndGetStorage(roomId);
const liveFile = await room.uploadFile(makeFile());
- (storage.root as LiveObject>).set("file", liveFile);
+ storage.root.set("file", liveFile);
await vi.waitFor(() =>
expect(storage.root.toJSON()).toEqual({
@@ -69,10 +72,10 @@ describe("LiveFile", () => {
test("getFileUrl returns a URL the bytes can actually be fetched from", async () => {
const roomId = await initRoom({ liveblocksType: "LiveObject", data: {} });
- const { room, storage } = await enterConnectAndGetStorage(roomId);
+ const { room, storage } = await enterConnectAndGetStorage(roomId);
const liveFile = await room.uploadFile(makeFile());
- (storage.root as LiveObject>).set("file", liveFile);
+ storage.root.set("file", liveFile);
await vi.waitFor(() =>
expect(storage.root.toJSON()).toHaveProperty("file")
);
@@ -87,13 +90,13 @@ describe("LiveFile", () => {
test("the server's size wins over whatever the client claims", async () => {
const roomId = await initRoom({ liveblocksType: "LiveObject", data: {} });
- const { room, storage } = await enterConnectAndGetStorage(roomId);
+ const { room, storage } = await enterConnectAndGetStorage(roomId);
const uploaded = await room.uploadFile(makeFile());
// Same file id, but lying about its size
const liar = new LiveFile({ ...uploaded.data, size: 1 });
- (storage.root as LiveObject>).set("file", liar);
+ storage.root.set("file", liar);
// The claim is corrected where it counts. Note this asserts the *server's*
// view: the lying client keeps its own optimistic value locally, since the
diff --git a/packages/liveblocks-core/src/crdts/__tests__/LiveList.devserver.test.ts b/packages/liveblocks-core/src/crdts/__tests__/LiveList.devserver.test.ts
index 6ee2b0ba7db..e5cde891149 100644
--- a/packages/liveblocks-core/src/crdts/__tests__/LiveList.devserver.test.ts
+++ b/packages/liveblocks-core/src/crdts/__tests__/LiveList.devserver.test.ts
@@ -807,6 +807,7 @@ describe("LiveList", () => {
{ index: 1, item: "b", type: "insert" },
{ index: 2, item: "c", type: "insert" },
],
+ source: { origin: "local", via: "edit" },
},
]);
});
diff --git a/packages/liveblocks-core/src/crdts/__tests__/LiveList.mockserver.test.ts b/packages/liveblocks-core/src/crdts/__tests__/LiveList.mockserver.test.ts
index 4acb79aac7f..278afe7ea70 100644
--- a/packages/liveblocks-core/src/crdts/__tests__/LiveList.mockserver.test.ts
+++ b/packages/liveblocks-core/src/crdts/__tests__/LiveList.mockserver.test.ts
@@ -598,6 +598,7 @@ describe("LiveList edge cases", () => {
type: "LiveList",
node: listItems,
updates: [{ index: 1, item: "b", type: "insert" }],
+ source: { origin: "remote" },
},
]);
expect(rootDeepCallback).toHaveBeenCalledWith([
@@ -605,6 +606,7 @@ describe("LiveList edge cases", () => {
type: "LiveList",
node: listItems,
updates: [{ index: 2, item: "c", type: "insert" }],
+ source: { origin: "local", via: "edit" },
},
]);
expect(listCallback).toHaveBeenCalledTimes(2);
@@ -673,6 +675,7 @@ describe("LiveList edge cases", () => {
type: "LiveList",
node: listItems,
updates: [{ index: 0, previousIndex: 1, item: "b", type: "move" }],
+ source: { origin: "remote" },
},
]);
@@ -733,6 +736,7 @@ describe("LiveList edge cases", () => {
type: "LiveList",
node: listItems,
updates: [{ index: 1, type: "delete", deletedItem: "b" }],
+ source: { origin: "remote" },
},
]);
@@ -757,13 +761,14 @@ describe("LiveList edge cases", () => {
const items = root.get("items");
const secondItem = items.get(1);
- const applyResult = items._detachChild(secondItem!);
+ const applyResult = items._detachChild(secondItem!, { origin: "remote" });
expect(applyResult).toEqual({
modified: {
type: "LiveList",
node: items,
updates: [{ index: 1, type: "delete", deletedItem: secondItem }],
+ source: { origin: "remote" },
},
reverse: [
{
@@ -845,6 +850,7 @@ describe("LiveList edge cases", () => {
node: items,
type: "LiveList",
updates: [{ type: "set", index: 0, item: "B" }],
+ source: { origin: "remote" },
},
]);
});
@@ -925,6 +931,7 @@ describe("LiveList edge cases", () => {
node: items,
type: "LiveList",
updates: [{ type: "insert", index: 0, item: "B" }],
+ source: { origin: "remote" },
},
]);
});
@@ -971,6 +978,7 @@ describe("LiveList edge cases", () => {
node: items,
type: "LiveList",
updates: [{ type: "insert", index: 0, item: "1" }],
+ source: { origin: "remote" },
},
]);
});
diff --git a/packages/liveblocks-core/src/crdts/__tests__/LiveMap.devserver.test.ts b/packages/liveblocks-core/src/crdts/__tests__/LiveMap.devserver.test.ts
index 6ee3d004e1b..a711d45769a 100644
--- a/packages/liveblocks-core/src/crdts/__tests__/LiveMap.devserver.test.ts
+++ b/packages/liveblocks-core/src/crdts/__tests__/LiveMap.devserver.test.ts
@@ -637,6 +637,7 @@ describe("LiveMap", () => {
type: "LiveObject",
node: mapElement,
updates: { a: { type: "update" } },
+ source: { origin: "local", via: "edit" },
},
]);
});
diff --git a/packages/liveblocks-core/src/crdts/__tests__/LiveMap.mockserver.test.ts b/packages/liveblocks-core/src/crdts/__tests__/LiveMap.mockserver.test.ts
index a61189a94b2..a727ed89e06 100644
--- a/packages/liveblocks-core/src/crdts/__tests__/LiveMap.mockserver.test.ts
+++ b/packages/liveblocks-core/src/crdts/__tests__/LiveMap.mockserver.test.ts
@@ -35,13 +35,14 @@ describe("LiveMap edge cases", () => {
const map = root.get("map");
const secondItem = map.get("el2");
- const applyResult = map._detachChild(secondItem!);
+ const applyResult = map._detachChild(secondItem!, { origin: "remote" });
expect(applyResult).toEqual({
modified: {
node: map,
type: "LiveMap",
updates: { el2: { type: "delete", deletedItem: secondItem } },
+ source: { origin: "remote" },
},
reverse: [
{
diff --git a/packages/liveblocks-core/src/crdts/__tests__/LiveObject.devserver.test.ts b/packages/liveblocks-core/src/crdts/__tests__/LiveObject.devserver.test.ts
index d1ae96ff1e0..dc072be5cf2 100644
--- a/packages/liveblocks-core/src/crdts/__tests__/LiveObject.devserver.test.ts
+++ b/packages/liveblocks-core/src/crdts/__tests__/LiveObject.devserver.test.ts
@@ -767,6 +767,7 @@ describe("LiveObject", () => {
type: "LiveObject",
node: root.get("child"),
updates: { a: { type: "update" } },
+ source: { origin: "local", via: "edit" },
},
]);
expect(callback).toHaveBeenCalledWith([
@@ -774,6 +775,7 @@ describe("LiveObject", () => {
type: "LiveObject",
node: root.get("child").get("subchild"),
updates: { b: { type: "update" } },
+ source: { origin: "local", via: "edit" },
},
]);
});
@@ -821,6 +823,7 @@ describe("LiveObject", () => {
type: "LiveObject",
node: rootA.get("child"),
updates: { a: { type: "update" } },
+ source: { origin: "local", via: "edit" },
},
]);
expect(callback).toHaveBeenCalledWith([
@@ -828,6 +831,7 @@ describe("LiveObject", () => {
type: "LiveObject",
node: rootA.get("child").get("subchild"),
updates: { b: { type: "update" } },
+ source: { origin: "remote" },
},
]);
});
@@ -908,6 +912,7 @@ describe("LiveObject", () => {
type: "LiveObject",
node: rootA.get("child"),
updates: { a: { type: "delete", deletedItem: -1 } },
+ source: { origin: "remote" },
},
]);
expect(callback).toHaveBeenNthCalledWith(2, [
@@ -915,6 +920,7 @@ describe("LiveObject", () => {
type: "LiveObject",
node: rootA.get("child"),
updates: { b: { type: "delete", deletedItem: -2 } },
+ source: { origin: "local", via: "edit" },
},
]);
});
@@ -1042,7 +1048,15 @@ describe("LiveObject", () => {
expectStorage({ a: 0 });
expect(callback).toHaveBeenCalledWith([
- { type: "LiveObject", node: root, updates: { a: { type: "update" } } },
+ {
+ type: "LiveObject",
+ node: root,
+ updates: { a: { type: "update" } },
+ source: {
+ origin: "local",
+ via: "undo",
+ },
+ },
]);
});
});
diff --git a/packages/liveblocks-core/src/crdts/__tests__/LiveObject.mockserver.test.ts b/packages/liveblocks-core/src/crdts/__tests__/LiveObject.mockserver.test.ts
index 647f26d722c..1d1b309ed64 100644
--- a/packages/liveblocks-core/src/crdts/__tests__/LiveObject.mockserver.test.ts
+++ b/packages/liveblocks-core/src/crdts/__tests__/LiveObject.mockserver.test.ts
@@ -138,13 +138,14 @@ describe("LiveObject edge cases", () => {
const obj = root.get("obj");
const secondItem = obj.get("b");
- const applyResult = obj._detachChild(secondItem);
+ const applyResult = obj._detachChild(secondItem, { origin: "remote" });
expect(applyResult).toEqual({
modified: {
node: obj,
type: "LiveObject",
updates: { b: { type: "delete", deletedItem: secondItem } },
+ source: { origin: "remote" },
},
reverse: [
{
diff --git a/packages/liveblocks-core/src/crdts/__tests__/LiveText.concurrency.test.ts b/packages/liveblocks-core/src/crdts/__tests__/LiveText.concurrency.test.ts
new file mode 100644
index 00000000000..15f90807978
--- /dev/null
+++ b/packages/liveblocks-core/src/crdts/__tests__/LiveText.concurrency.test.ts
@@ -0,0 +1,371 @@
+import { describe, expect, test } from "vitest";
+
+import {
+ createSerializedRoot,
+ prepareIsolatedStorageTest,
+} from "../../__tests__/_MockWebSocketServer.setup";
+import { nn } from "../../lib/assert";
+import type { UpdateTextOp } from "../../protocol/Op";
+import { OpCode } from "../../protocol/Op";
+import type { StorageNode } from "../../protocol/StorageNode";
+import { CrdtType } from "../../protocol/StorageNode";
+import { createManagedPool } from "../AbstractCrdt";
+import { LiveText } from "../LiveText";
+import {
+ applyTextOperationsToSegments,
+ transformTextOperations,
+} from "../liveTextOps";
+
+const initialNodes: StorageNode[] = [
+ createSerializedRoot(),
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "text",
+ data: [["Hello"]],
+ version: 0,
+ },
+ ] as const,
+];
+
+describe("LiveText concurrency", () => {
+ test("local client rebases remote insert over pending local insert", async () => {
+ const { root, applyRemoteOperations } = await prepareIsolatedStorageTest<{
+ text: LiveText;
+ }>(initialNodes, 0);
+
+ const text = root.get("text");
+ text.insert(0, "A");
+
+ applyRemoteOperations([
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "0:1",
+ baseVersion: 0,
+ version: 1,
+ ops: [{ type: "insert", index: 0, text: "B" }],
+ },
+ ]);
+
+ // The remote insert was accepted by the server first, so on a same-index
+ // tie it stays left of our still-pending local insert. This matches the
+ // outcome on the server (and on every other client).
+ expect(text.toString()).toBe("BAHello");
+ expect(text.toJSON()).toEqual([["BAHello"]]);
+ });
+
+ test("local client rebases remote delete over pending local insert", async () => {
+ const { root, applyRemoteOperations } = await prepareIsolatedStorageTest<{
+ text: LiveText;
+ }>(initialNodes, 0);
+
+ const text = root.get("text");
+ text.insert(0, "Hi");
+
+ applyRemoteOperations([
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "0:1",
+ baseVersion: 0,
+ version: 1,
+ ops: [{ type: "delete", index: 0, length: 2 }],
+ },
+ ]);
+
+ expect(text.toString()).toBe("Hillo");
+ });
+
+ test("transform and apply converge for overlapping delete operations", () => {
+ const segments = [{ text: "Hello" }];
+ const accepted = [{ type: "delete" as const, index: 0, length: 2 }];
+ const transformed = transformTextOperations(
+ [{ type: "delete", index: 0, length: 2 }],
+ accepted,
+ "after"
+ );
+
+ expect(
+ applyTextOperationsToSegments(
+ applyTextOperationsToSegments(segments, accepted),
+ transformed
+ )
+ ).toEqual(applyTextOperationsToSegments(segments, accepted));
+ });
+
+ test("transform shifts format ranges over accepted inserts", () => {
+ expect(
+ transformTextOperations(
+ [{ type: "format", index: 1, length: 2, attributes: { bold: true } }],
+ [{ type: "insert", index: 0, text: "A" }],
+ "after"
+ )
+ ).toEqual([
+ { type: "format", index: 2, length: 2, attributes: { bold: true } },
+ ]);
+ });
+});
+
+describe("LiveText acknowledgement", () => {
+ test("undo of an acknowledged insert emits current-version operations", () => {
+ let insertOpId = "";
+ let undoOps: UpdateTextOp[] = [];
+ const pool = createManagedPool({
+ getCurrentConnectionId: () => 0,
+ onDispatch: (ops, reverse) => {
+ insertOpId = ops[0]?.opId ?? insertOpId;
+ undoOps = reverse as UpdateTextOp[];
+ },
+ });
+ const text = new LiveText("Hello");
+ text._attach("0:1", pool);
+
+ text.insert(5, " world");
+ expect(text.toString()).toBe("Hello world");
+
+ text._apply(
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "0:1",
+ opId: insertOpId,
+ baseVersion: 0,
+ version: 1,
+ ops: [{ type: "insert", index: 5, text: " world" }],
+ },
+ { origin: "local", via: "edit", optimistic: false }
+ );
+
+ const undoOp = undoOps[0];
+ if (undoOp === undefined) {
+ throw new Error("Expected undo operation");
+ }
+
+ const outgoingUndoOp = { ...undoOp, opId: "undo" };
+ text._apply(outgoingUndoOp, {
+ origin: "local",
+ via: "edit",
+ optimistic: true,
+ });
+
+ expect(outgoingUndoOp).toMatchObject({
+ baseVersion: 1,
+ ops: [{ type: "delete", index: 5, length: 6 }],
+ });
+ expect(text.toString()).toBe("Hello");
+ });
+
+ test("acknowledgement preserves state after concurrent remote edits", () => {
+ let acknowledgedOpId = "";
+ const pool = createManagedPool({
+ getCurrentConnectionId: () => 0,
+ onDispatch: (ops) => {
+ acknowledgedOpId = ops[0]?.opId ?? "";
+ },
+ });
+ const text = new LiveText("Hello");
+ text._attach("0:1", pool);
+
+ text.insert(0, "A");
+ expect(text.toString()).toBe("AHello");
+ expect(acknowledgedOpId).not.toBe("");
+
+ text._apply(
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "0:1",
+ baseVersion: 0,
+ version: 1,
+ ops: [{ type: "insert", index: 0, text: "B" }],
+ },
+ { origin: "remote" }
+ );
+
+ // The remote insert was accepted first, so it wins the same-index tie.
+ expect(text.toString()).toBe("BAHello");
+
+ // The server acknowledges our op with its authoritative (rebased) form:
+ // our insert was shifted right over the accepted remote insert.
+ text._apply(
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "0:1",
+ opId: acknowledgedOpId,
+ baseVersion: 1,
+ version: 2,
+ ops: [{ type: "insert", index: 1, text: "A" }],
+ },
+ { origin: "local", via: "edit", optimistic: false }
+ );
+
+ expect(text.toString()).toBe("BAHello");
+ expect(text.toJSON()).toEqual([["BAHello"]]);
+ expect(text.version).toBe(2);
+ });
+
+ test("acknowledgement applies server-rebased operations", () => {
+ let acknowledgedOpId = "";
+ let undoOps: UpdateTextOp[] = [];
+ const pool = createManagedPool({
+ getCurrentConnectionId: () => 0,
+ onDispatch: (ops, reverse) => {
+ acknowledgedOpId = ops[0]?.opId ?? "";
+ undoOps = reverse as UpdateTextOp[];
+ },
+ });
+ const text = new LiveText("Hello");
+ text._attach("0:1", pool);
+
+ text.delete(0, 2);
+ expect(text.toString()).toBe("llo");
+ expect(acknowledgedOpId).not.toBe("");
+
+ text._apply(
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "0:1",
+ baseVersion: 0,
+ version: 1,
+ ops: [{ type: "insert", index: 0, text: "A" }],
+ },
+ { origin: "remote" }
+ );
+
+ expect(text.toString()).toBe("Allo");
+
+ text._apply(
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "0:1",
+ opId: acknowledgedOpId,
+ baseVersion: 1,
+ version: 2,
+ ops: [{ type: "delete", index: 1, length: 2 }],
+ },
+ { origin: "local", via: "edit", optimistic: false }
+ );
+
+ expect(text.toString()).toBe("Allo");
+ expect(text.toJSON()).toEqual([["Allo"]]);
+
+ const undoOp = undoOps[0];
+ if (undoOp === undefined) {
+ throw new Error("Expected undo operation");
+ }
+
+ const outgoingUndoOp = { ...undoOp, opId: "undo" };
+ text._apply(outgoingUndoOp, {
+ origin: "local",
+ via: "edit",
+ optimistic: true,
+ });
+
+ expect(outgoingUndoOp).toMatchObject({
+ baseVersion: 2,
+ ops: [{ type: "insert", index: 1, text: "He" }],
+ });
+ expect(text.toString()).toBe("AHello");
+ });
+
+ test("queues local edits behind the in-flight op and flushes them on ack", () => {
+ const dispatched: UpdateTextOp[] = [];
+ const pool = createManagedPool({
+ getCurrentConnectionId: () => 0,
+ onDispatch: (ops) => {
+ for (const op of ops) {
+ if (op.type === OpCode.UPDATE_TEXT) {
+ dispatched.push(op);
+ }
+ }
+ },
+ });
+ const text = new LiveText("Hello");
+ text._attach("0:1", pool);
+
+ text.insert(0, "A");
+ text.insert(6, "!");
+ expect(text.toString()).toBe("AHello!");
+
+ // Only the first edit goes on the wire; the second is queued behind it
+ // (one in-flight op at a time keeps wire ops in server coordinates).
+ expect(dispatched).toHaveLength(1);
+ expect(dispatched[0]).toMatchObject({
+ baseVersion: 0,
+ ops: [{ type: "insert", index: 0, text: "A" }],
+ });
+
+ text._apply(
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "0:1",
+ opId: nn(dispatched[0]?.opId),
+ baseVersion: 0,
+ version: 1,
+ ops: [{ type: "insert", index: 0, text: "A" }],
+ },
+ { origin: "local", via: "edit", optimistic: false }
+ );
+
+ expect(text.toString()).toBe("AHello!");
+ expect(text.version).toBe(1);
+
+ // The ack flushed the queued edit as the next in-flight op.
+ expect(dispatched).toHaveLength(2);
+ expect(dispatched[1]).toMatchObject({
+ baseVersion: 1,
+ ops: [{ type: "insert", index: 6, text: "!" }],
+ });
+
+ text._apply(
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "0:1",
+ opId: nn(dispatched[1]?.opId),
+ baseVersion: 1,
+ version: 2,
+ ops: [{ type: "insert", index: 6, text: "!" }],
+ },
+ { origin: "local", via: "edit", optimistic: false }
+ );
+
+ expect(text.toString()).toBe("AHello!");
+ expect(text.version).toBe(2);
+ });
+
+ test("batched queued LiveText edit clears the redo stack", async () => {
+ const { room, root } = await prepareIsolatedStorageTest<{
+ text: LiveText;
+ }>(initialNodes, 0);
+
+ const text = root.get("text");
+
+ // First insert sends UPDATE_TEXT (in-flight).
+ room.batch(() => {
+ text.insert(5, "!");
+ });
+ expect(text.toString()).toBe("Hello!");
+
+ room.history.undo();
+ expect(text.toString()).toBe("Hello");
+ expect(room.history.canRedo()).toBe(true);
+
+ room.history.pause();
+ // Second insert while the first UPDATE_TEXT is still in-flight queues
+ // with empty ops + clearRedoStack: true inside the batch.
+ room.batch(() => {
+ text.insert(5, "?");
+ });
+ expect(text.toString()).toBe("Hello?");
+ expect(room.history.canRedo()).toBe(false);
+
+ room.history.resume();
+ expect(room.history.canUndo()).toBe(true);
+
+ room.history.undo();
+ expect(text.toString()).toBe("Hello");
+
+ room.history.redo();
+ expect(text.toString()).toBe("Hello?");
+ expect(room.history.canRedo()).toBe(false);
+ });
+});
diff --git a/packages/liveblocks-core/src/crdts/__tests__/LiveText.convergence.fuzz.test.ts b/packages/liveblocks-core/src/crdts/__tests__/LiveText.convergence.fuzz.test.ts
new file mode 100644
index 00000000000..0b9464515d5
--- /dev/null
+++ b/packages/liveblocks-core/src/crdts/__tests__/LiveText.convergence.fuzz.test.ts
@@ -0,0 +1,849 @@
+import * as fc from "fast-check";
+import { describe, expect, test } from "vitest";
+
+import type { JsonObject } from "../../lib/Json";
+import type {
+ LiveTextData,
+ LiveTextSegment,
+ TextOperation,
+ UpdateTextOp,
+} from "../../protocol/Op";
+import { OpCode } from "../../protocol/Op";
+import { createManagedPool } from "../AbstractCrdt";
+import { LiveText } from "../LiveText";
+import {
+ applyLiveTextOperations,
+ dataToSegments,
+ segmentsToData,
+ textLength,
+ transformTextOperations,
+ transformTextOperationsX,
+} from "../liveTextOps";
+
+// -----------------------------------------------------------------------------
+// Arbitraries
+// -----------------------------------------------------------------------------
+
+/**
+ * Includes characters wider than one UTF-16 code unit, so that generated
+ * indices regularly land inside a character rather than between two.
+ */
+const ALPHABET = [
+ "a",
+ "b",
+ "c",
+ "d",
+ "e",
+ "f",
+ "😀", // surrogate pair: two code units
+ "é", // "e" + combining acute accent: two code points
+];
+
+/** Short runs of text: the bread and butter of character-level editing. */
+const shortTextArb = fc
+ .array(fc.integer({ min: 0, max: ALPHABET.length - 1 }), {
+ minLength: 1,
+ maxLength: 4,
+ })
+ .map((indexes) => indexes.map((i) => ALPHABET[i]).join(""));
+
+/**
+ * Bulk text, built by repeating a short run, so that generating (and
+ * shrinking) multi-kilobyte documents stays cheap.
+ */
+function bulkTextArb(
+ minRepeats: number,
+ maxRepeats: number
+): fc.Arbitrary {
+ return fc
+ .tuple(shortTextArb, fc.integer({ min: minRepeats, max: maxRepeats }))
+ .map(([chunk, repeats]) => chunk.repeat(repeats));
+}
+
+/** Tens of characters. */
+const mediumTextArb = bulkTextArb(2, 20);
+
+/** Hundreds to a few thousand characters. */
+const largeTextArb = bulkTextArb(200, 1000);
+
+const keyArb = fc.oneof(
+ { withCrossShrink: true },
+ fc.constant("bold"),
+ fc.constant("italic"),
+ fc.constant("color"),
+ fc.string()
+);
+
+const jsonScalarArb = fc.oneof(
+ { withCrossShrink: true },
+ fc.boolean(),
+ fc.nat(),
+ fc.string(),
+ fc.constant(null)
+);
+
+const attributesArb = fc.dictionary(keyArb, jsonScalarArb);
+
+/**
+ * Positions and spans are generated as fractions of the document instead of
+ * absolute character counts, so one seed means "a quarter of the way in"
+ * whether the document holds 10 characters or 10 kilobytes. Keeping the seeds
+ * independent of the document also keeps shrinking effective.
+ */
+const fractionArb = fc.double({ min: 0, max: 1, noNaN: true });
+
+type PosSeed =
+ | { kind: "fraction"; of: number }
+ | { kind: "index"; index: number };
+
+type SpanSeed =
+ | { kind: "chars"; n: number }
+ | { kind: "fraction"; of: number }
+ | { kind: "toEnd" };
+
+/**
+ * Generated seeds always use fractions. The `index` and `chars` variants exist
+ * so hand-written scenarios below can name an exact spot in a known document.
+ */
+const atIndex = (index: number): PosSeed => ({ kind: "index", index });
+const spanChars = (n: number): SpanSeed => ({ kind: "chars", n });
+
+const posSeedArb: fc.Arbitrary = fc.record({
+ kind: fc.constant("fraction" as const),
+ of: fractionArb,
+});
+
+const spanSeedArb: fc.Arbitrary = fc.oneof(
+ {
+ weight: 6,
+ arbitrary: fc.record({
+ kind: fc.constant("chars" as const),
+ n: fc.integer({ min: 1, max: 8 }),
+ }),
+ },
+ {
+ weight: 3,
+ arbitrary: fc.record({
+ kind: fc.constant("fraction" as const),
+ of: fractionArb,
+ }),
+ },
+ { weight: 1, arbitrary: fc.record({ kind: fc.constant("toEnd" as const) }) }
+);
+
+/** Seeds that get concretized against the current document length. */
+type EditSeed =
+ | { type: "insert"; at: PosSeed; text: string; attrs: JsonObject | undefined }
+ | { type: "delete"; at: PosSeed; span: SpanSeed }
+ | { type: "format"; at: PosSeed; span: SpanSeed; attrs: JsonObject };
+
+function editSeedArbOf(textArb: fc.Arbitrary): fc.Arbitrary {
+ return fc.oneof(
+ fc.record({
+ type: fc.constant("insert" as const),
+ at: posSeedArb,
+ text: textArb,
+ attrs: fc.option(attributesArb, { nil: undefined }),
+ }),
+ fc.record({
+ type: fc.constant("delete" as const),
+ at: posSeedArb,
+ span: spanSeedArb,
+ }),
+ fc.record({
+ type: fc.constant("format" as const),
+ at: posSeedArb,
+ span: spanSeedArb,
+ attrs: attributesArb,
+ })
+ );
+}
+
+/** Resolves a position seed onto an index in [0, max]. */
+function indexAt(pos: PosSeed, max: number): number {
+ return pos.kind === "index"
+ ? Math.min(pos.index, max)
+ : Math.min(max, Math.floor(pos.of * (max + 1)));
+}
+
+/** Resolves a span seed against the characters left after the index. */
+function spanLength(span: SpanSeed, remaining: number): number {
+ switch (span.kind) {
+ case "chars":
+ return Math.min(span.n, remaining);
+ case "fraction":
+ return Math.min(remaining, Math.max(1, Math.ceil(span.of * remaining)));
+ case "toEnd":
+ return remaining;
+ }
+}
+
+function concretize(seed: EditSeed, length: number): TextOperation | undefined {
+ if (seed.type === "insert") {
+ return {
+ type: "insert",
+ index: indexAt(seed.at, length),
+ text: seed.text,
+ ...(seed.attrs !== undefined ? { attributes: seed.attrs } : {}),
+ };
+ }
+ if (length === 0) {
+ return undefined;
+ }
+ const index = indexAt(seed.at, length - 1);
+ const len = spanLength(seed.span, length - index);
+ if (len <= 0) {
+ return undefined;
+ }
+ if (seed.type === "delete") {
+ return { type: "delete", index, length: len };
+ }
+ return { type: "format", index, length: len, attributes: seed.attrs };
+}
+
+/** Generate a sequential op list valid against a doc of the given length. */
+function concretizeSequence(
+ seeds: readonly EditSeed[],
+ initialLength: number
+): TextOperation[] {
+ const ops: TextOperation[] = [];
+ let length = initialLength;
+ for (const seed of seeds) {
+ const op = concretize(seed, length);
+ if (op === undefined) {
+ continue;
+ }
+ ops.push(op);
+ if (op.type === "insert") {
+ length += op.text.length;
+ } else if (op.type === "delete") {
+ length -= op.length;
+ }
+ }
+ return ops;
+}
+
+function docArbOf(
+ textArb: fc.Arbitrary,
+ minSegments: number,
+ maxSegments: number
+): fc.Arbitrary {
+ return fc
+ .array(
+ fc.record({
+ text: textArb,
+ attrs: fc.option(attributesArb, { nil: undefined }),
+ }),
+ { minLength: minSegments, maxLength: maxSegments }
+ )
+ .map((segments) =>
+ segments.map(
+ ({ text, attrs }): LiveTextSegment =>
+ attrs === undefined ? [text] : [text, attrs]
+ )
+ );
+}
+
+const smallDocArb = docArbOf(shortTextArb, 0, 3); // a dozen characters
+const mediumDocArb = docArbOf(mediumTextArb, 1, 20); // up to ~1.5 KB
+const largeDocArb = docArbOf(largeTextArb, 1, 4); // multiple KBs
+
+/**
+ * The everyday mix. Small documents dominate: they are fast to run and shrink
+ * to failures a human can read.
+ */
+const docArb = fc.oneof(
+ { weight: 8, arbitrary: smallDocArb },
+ { weight: 3, arbitrary: mediumDocArb }
+);
+
+/** The heavyweight mix, for the properties that run few but large rounds. */
+const bulkDocArb = fc.oneof(
+ { weight: 1, arbitrary: mediumDocArb },
+ { weight: 3, arbitrary: largeDocArb }
+);
+
+/** Edits sized for {@link docArb}: mostly typing, the occasional paste. */
+const editSeedArb = editSeedArbOf(
+ fc.oneof(
+ { weight: 9, arbitrary: shortTextArb },
+ { weight: 1, arbitrary: mediumTextArb }
+ )
+);
+
+/** Edits sized for {@link bulkDocArb}, including multi-KB pastes. */
+const bulkEditSeedArb = editSeedArbOf(
+ fc.oneof(
+ { weight: 6, arbitrary: shortTextArb },
+ { weight: 3, arbitrary: mediumTextArb },
+ { weight: 1, arbitrary: largeTextArb }
+ )
+);
+
+// -----------------------------------------------------------------------------
+// TP1: transform correctness for concurrent op sequences
+// -----------------------------------------------------------------------------
+
+describe("transformTextOperations TP1 property", () => {
+ test("doc ⊕ A ⊕ B' === doc ⊕ B ⊕ A' for concurrent sequences", () => {
+ fc.assert(
+ fc.property(
+ docArb,
+ fc.array(editSeedArb, { minLength: 1, maxLength: 3 }),
+ fc.array(editSeedArb, { minLength: 1, maxLength: 3 }),
+ fc.constantFrom("before" as const, "after" as const),
+
+ (doc, seedsA, seedsB, order) => {
+ const length = textLength(dataToSegments(doc));
+ const a = concretizeSequence(seedsA, length);
+ const b = concretizeSequence(seedsB, length);
+
+ const [a1, b1] = transformTextOperationsX(a, b, order);
+
+ // Path 1: apply A, then B-transformed-over-A
+ const path1 = applyLiveTextOperations(
+ applyLiveTextOperations(doc, a),
+ b1
+ );
+ // Path 2: apply B, then A-transformed-over-B
+ const path2 = applyLiveTextOperations(
+ applyLiveTextOperations(doc, b),
+ a1
+ );
+
+ expect(path1).toEqual(path2);
+ }
+ ),
+ { numRuns: 2000 }
+ );
+ });
+
+ test("TP1 holds on multi-kilobyte documents", () => {
+ fc.assert(
+ fc.property(
+ bulkDocArb,
+ fc.array(bulkEditSeedArb, { minLength: 1, maxLength: 6 }),
+ fc.array(bulkEditSeedArb, { minLength: 1, maxLength: 6 }),
+ fc.constantFrom("before" as const, "after" as const),
+
+ (doc, seedsA, seedsB, order) => {
+ const length = textLength(dataToSegments(doc));
+ const a = concretizeSequence(seedsA, length);
+ const b = concretizeSequence(seedsB, length);
+
+ const [a1, b1] = transformTextOperationsX(a, b, order);
+
+ const path1 = applyLiveTextOperations(
+ applyLiveTextOperations(doc, a),
+ b1
+ );
+ const path2 = applyLiveTextOperations(
+ applyLiveTextOperations(doc, b),
+ a1
+ );
+
+ expect(path1).toEqual(path2);
+ }
+ ),
+ { numRuns: 300 }
+ );
+ });
+
+ test("delete spanning a concurrent insert preserves the inserted text", () => {
+ // doc "abcdef": A deletes [1, 5), B inserts "XY" at 3 (inside the range)
+ const a: TextOperation[] = [{ type: "delete", index: 1, length: 4 }];
+ const b: TextOperation[] = [{ type: "insert", index: 3, text: "XY" }];
+
+ const [a1, b1] = transformTextOperationsX(a, b, "after");
+
+ const path1 = applyLiveTextOperations(
+ applyLiveTextOperations([["abcdef"]], a),
+ b1
+ );
+ const path2 = applyLiveTextOperations(
+ applyLiveTextOperations([["abcdef"]], b),
+ a1
+ );
+
+ expect(path1).toEqual(path2);
+ // The concurrent insert must survive the delete.
+ expect(path1).toEqual([["aXYf"]]);
+ });
+
+ test("same-index inserts: earlier op stays left under both orders", () => {
+ const a: TextOperation[] = [{ type: "insert", index: 0, text: "A" }];
+ const b: TextOperation[] = [{ type: "insert", index: 0, text: "B" }];
+
+ // A ordered before B
+ const aBeforeB_b1 = transformTextOperations(b, a, "after");
+ const aBeforeB_a1 = transformTextOperations(a, b, "before");
+
+ const path1 = applyLiveTextOperations(
+ applyLiveTextOperations([["x"]], a),
+ aBeforeB_b1
+ );
+ const path2 = applyLiveTextOperations(
+ applyLiveTextOperations([["x"]], b),
+ aBeforeB_a1
+ );
+
+ expect(path1).toEqual([["ABx"]]);
+ expect(path2).toEqual([["ABx"]]);
+ });
+
+ test("overlapping concurrent formats: later op wins conflicting keys", () => {
+ const a: TextOperation[] = [
+ { type: "format", index: 0, length: 4, attributes: { bold: true } },
+ ];
+ const b: TextOperation[] = [
+ { type: "format", index: 2, length: 4, attributes: { bold: null } },
+ ];
+
+ // A ordered before B in the final timeline
+ const [a1, b1] = transformTextOperationsX(a, b, "before");
+
+ const path1 = applyLiveTextOperations(
+ applyLiveTextOperations([["abcdef"]], a),
+ b1
+ );
+ const path2 = applyLiveTextOperations(
+ applyLiveTextOperations([["abcdef"]], b),
+ a1
+ );
+
+ expect(path1).toEqual(path2);
+ expect(path1).toEqual([["ab", { bold: true }], ["cdef"]]);
+ });
+
+ test("regression: attribute names off Object.prototype are not treated as conflicts", () => {
+ // "toString" is an inherited key on any plain object, so a naive `key in
+ // over.attributes` check sees a conflict with an op that never set it.
+ const a: TextOperation[] = [
+ { type: "format", index: 0, length: 1, attributes: {} },
+ ];
+ const b: TextOperation[] = [
+ { type: "format", index: 0, length: 1, attributes: { toString: false } },
+ ];
+
+ const [a1, b1] = transformTextOperationsX(a, b, "after");
+
+ const path1 = applyLiveTextOperations(
+ applyLiveTextOperations([["a"]], a),
+ b1
+ );
+ const path2 = applyLiveTextOperations(
+ applyLiveTextOperations([["a"]], b),
+ a1
+ );
+
+ expect(path1).toEqual(path2);
+ expect(path1).toEqual([["a", { toString: false }]]);
+ });
+});
+
+// -----------------------------------------------------------------------------
+// Multi-client convergence simulation
+// -----------------------------------------------------------------------------
+
+type ServerHistoryEntry = {
+ version: number;
+ opId: string;
+ ops: TextOperation[];
+};
+
+type ServerResult = {
+ /** Echo back to the sender (with opId), or undefined if ignored. */
+ ack?: UpdateTextOp;
+ /** Forward to all other clients (no opId), or undefined. */
+ forward?: UpdateTextOp;
+};
+
+/**
+ * Minimal re-implementation of the server-side `applyUpdateTextOp` semantics
+ * (see liveblocks-server Storage.ts), using the same shared transform.
+ */
+class MiniServer {
+ data: LiveTextData;
+ version = 0;
+ history: ServerHistoryEntry[] = [];
+
+ constructor(data: LiveTextData) {
+ this.data = data;
+ }
+
+ receive(op: UpdateTextOp & { opId: string }): ServerResult {
+ const duplicate = this.history.find((entry) => entry.opId === op.opId);
+ if (duplicate !== undefined) {
+ return {
+ ack: {
+ ...op,
+ baseVersion: duplicate.version - 1,
+ version: duplicate.version,
+ ops: [...duplicate.ops],
+ },
+ };
+ }
+
+ if (op.ops.length === 0) {
+ // Empty update: pure ack vehicle, ignored.
+ return {};
+ }
+
+ if (op.baseVersion > this.version) {
+ throw new Error("Client base version ahead of server");
+ }
+
+ const acceptedOps = this.history
+ .filter((entry) => entry.version > op.baseVersion)
+ .flatMap((entry) => entry.ops);
+ const ops =
+ acceptedOps.length > 0
+ ? transformTextOperations(op.ops, acceptedOps, "after")
+ : [...op.ops];
+
+ const baseVersion = this.version;
+ const version = this.version + 1;
+ this.data = applyLiveTextOperations(this.data, ops);
+ this.version = version;
+ this.history.push({ version, opId: op.opId, ops });
+
+ return {
+ ack: { ...op, baseVersion, version, ops: [...ops] },
+ forward: {
+ type: OpCode.UPDATE_TEXT,
+ id: op.id,
+ baseVersion,
+ version,
+ ops: [...ops],
+ },
+ };
+ }
+}
+
+type SimEvent =
+ | { kind: "edit"; client: number; seed: EditSeed }
+ | { kind: "undo"; client: number }
+ | { kind: "toServer"; client: number }
+ | { kind: "toClient"; client: number };
+
+function simEventArb(
+ numClients: number,
+ seedArb: fc.Arbitrary = editSeedArb
+): fc.Arbitrary {
+ const client = fc.nat(numClients - 1);
+ return fc.oneof(
+ {
+ weight: 4,
+ arbitrary: fc.record({
+ kind: fc.constant("edit" as const),
+ client,
+ seed: seedArb,
+ }),
+ },
+ {
+ weight: 1,
+ arbitrary: fc.record({ kind: fc.constant("undo" as const), client }),
+ },
+ {
+ weight: 3,
+ arbitrary: fc.record({ kind: fc.constant("toServer" as const), client }),
+ },
+ {
+ weight: 3,
+ arbitrary: fc.record({ kind: fc.constant("toClient" as const), client }),
+ }
+ );
+}
+
+class SimClient {
+ text: LiveText;
+ outbox: (UpdateTextOp & { opId: string })[] = [];
+ inbox: UpdateTextOp[] = [];
+ undoStack: UpdateTextOp[][] = [];
+ #opClock = 0;
+ readonly id: number;
+
+ constructor(id: number, data: LiveTextData, version: number) {
+ this.id = id;
+ this.text = new LiveText(data, version);
+ const pool = createManagedPool({
+ getCurrentConnectionId: () => id,
+ onDispatch: (ops, reverse) => {
+ for (const op of ops) {
+ if (op.type === OpCode.UPDATE_TEXT) {
+ this.outbox.push(op);
+ }
+ }
+ const reverseTextOps = reverse.filter(
+ (op): op is UpdateTextOp => op.type === OpCode.UPDATE_TEXT
+ );
+ if (reverseTextOps.length > 0) {
+ this.undoStack.push(reverseTextOps);
+ }
+ },
+ });
+ this.text._attach("0:1", pool);
+ }
+
+ edit(seed: EditSeed): void {
+ const op = concretize(seed, this.text.length);
+ if (op === undefined) {
+ return;
+ }
+ if (op.type === "insert") {
+ this.text.insert(op.index, op.text, op.attributes);
+ } else if (op.type === "delete") {
+ this.text.delete(op.index, op.length);
+ } else {
+ this.text.format(op.index, op.length, op.attributes);
+ }
+ }
+
+ undo(): void {
+ const frame = this.undoStack.pop();
+ if (frame === undefined) {
+ return;
+ }
+ // Mimic room.applyLocalOps(): assign opIds, apply locally, send.
+ for (const op of frame) {
+ const wireOp = { ...op, opId: `${this.id}:u${this.#opClock++}` };
+ this.text._apply(wireOp, {
+ origin: "local",
+ via: "edit",
+ optimistic: true,
+ });
+ this.outbox.push(wireOp);
+ }
+ }
+
+ receive(): void {
+ const message = this.inbox.shift();
+ if (message === undefined) {
+ return;
+ }
+ // Acks carry our own opId; forwards from other clients don't.
+ this.text._apply(
+ message,
+ message.opId !== undefined
+ ? { origin: "local", via: "edit", optimistic: false }
+ : { origin: "remote" }
+ );
+ }
+}
+
+function runSimulation(
+ initialData: LiveTextData,
+ events: readonly SimEvent[],
+ numClients: number
+): { server: MiniServer; clients: SimClient[] } {
+ const server = new MiniServer(initialData);
+ const clients = Array.from(
+ { length: numClients },
+ (_, i) => new SimClient(i, initialData, 0)
+ );
+
+ const pumpToServer = (client: SimClient) => {
+ const op = client.outbox.shift();
+ if (op === undefined) {
+ return;
+ }
+ const { ack, forward } = server.receive(op);
+ if (ack !== undefined) {
+ client.inbox.push(ack);
+ }
+ if (forward !== undefined) {
+ for (const other of clients) {
+ if (other !== client) {
+ other.inbox.push(forward);
+ }
+ }
+ }
+ };
+
+ for (const event of events) {
+ const client =
+ clients[
+ event.kind === "edit" ||
+ event.kind === "undo" ||
+ event.kind === "toServer" ||
+ event.kind === "toClient"
+ ? event.client
+ : 0
+ ];
+ switch (event.kind) {
+ case "edit":
+ client.edit(event.seed);
+ break;
+ case "undo":
+ client.undo();
+ break;
+ case "toServer":
+ pumpToServer(client);
+ break;
+ case "toClient":
+ client.receive();
+ break;
+ }
+ }
+
+ // Drain: deliver everything until the system is quiescent. Acks can cause
+ // clients to flush queued ops, so keep pumping.
+ for (let i = 0; i < 10_000; i++) {
+ const busy = clients.some((c) => c.outbox.length > 0 || c.inbox.length > 0);
+ if (!busy) {
+ break;
+ }
+ for (const client of clients) {
+ while (client.outbox.length > 0) {
+ pumpToServer(client);
+ }
+ }
+ for (const client of clients) {
+ while (client.inbox.length > 0) {
+ client.receive();
+ }
+ }
+ }
+
+ for (const client of clients) {
+ if (client.outbox.length > 0 || client.inbox.length > 0) {
+ throw new Error("Simulation did not quiesce");
+ }
+ }
+
+ return { server, clients };
+}
+
+describe("LiveText multi-client convergence (fuzz)", () => {
+ test("all clients converge to the server document", () => {
+ fc.assert(
+ fc.property(
+ docArb,
+ fc.array(simEventArb(3), { minLength: 1, maxLength: 60 }),
+ (doc, events) => {
+ const { server, clients } = runSimulation(doc, events, 3);
+
+ const serverText = dataToSegments(server.data)
+ .map((s) => s.text)
+ .join("");
+
+ for (const client of clients) {
+ expect(client.text.toString()).toBe(serverText);
+ expect(client.text.toJSON()).toEqual(
+ segmentsToData(dataToSegments(server.data))
+ );
+ expect(client.text.version).toBe(server.version);
+ }
+ }
+ ),
+ { numRuns: 300 }
+ );
+ });
+
+ test("all clients converge on multi-kilobyte documents", () => {
+ fc.assert(
+ fc.property(
+ bulkDocArb,
+ fc.array(simEventArb(3, bulkEditSeedArb), {
+ minLength: 1,
+ maxLength: 30,
+ }),
+ (doc, events) => {
+ const { server, clients } = runSimulation(doc, events, 3);
+
+ const serverText = dataToSegments(server.data)
+ .map((s) => s.text)
+ .join("");
+
+ for (const client of clients) {
+ expect(client.text.toString()).toBe(serverText);
+ expect(client.text.version).toBe(server.version);
+ }
+ }
+ ),
+ { numRuns: 150 }
+ );
+ });
+
+ test("regression: same-index concurrent inserts converge", () => {
+ const events: SimEvent[] = [
+ {
+ kind: "edit",
+ client: 0,
+ seed: { type: "insert", at: atIndex(0), text: "aa", attrs: undefined },
+ },
+ {
+ kind: "edit",
+ client: 1,
+ seed: { type: "insert", at: atIndex(0), text: "bb", attrs: undefined },
+ },
+ // Client 0's op reaches the server first
+ { kind: "toServer", client: 0 },
+ { kind: "toServer", client: 1 },
+ ];
+
+ const { server, clients } = runSimulation([["x"]], events, 2);
+ const serverText = dataToSegments(server.data)
+ .map((s) => s.text)
+ .join("");
+
+ expect(serverText).toBe("aabbx");
+ for (const client of clients) {
+ expect(client.text.toString()).toBe(serverText);
+ }
+ });
+
+ test("regression: delete spanning a concurrent insert keeps the insert", () => {
+ const events: SimEvent[] = [
+ // Client 0 deletes "bcde" out of "abcdef"
+ {
+ kind: "edit",
+ client: 0,
+ seed: { type: "delete", at: atIndex(1), span: spanChars(4) },
+ },
+ // Client 1 types "ZZ" in the middle of that range
+ {
+ kind: "edit",
+ client: 1,
+ seed: { type: "insert", at: atIndex(3), text: "zz", attrs: undefined },
+ },
+ { kind: "toServer", client: 1 },
+ { kind: "toServer", client: 0 },
+ ];
+
+ const { server, clients } = runSimulation([["abcdef"]], events, 2);
+ const serverText = dataToSegments(server.data)
+ .map((s) => s.text)
+ .join("");
+
+ // The concurrently inserted text must survive
+ expect(serverText).toContain("zz");
+ for (const client of clients) {
+ expect(client.text.toString()).toBe(serverText);
+ }
+ });
+
+ test("regression: sequential local edits are not double-transformed by the server", () => {
+ const events: SimEvent[] = [
+ // Client 0, on "AB": insert "x" at 1 ("AxB"), then delete "B" (now at index 2)
+ {
+ kind: "edit",
+ client: 0,
+ seed: { type: "insert", at: atIndex(1), text: "x", attrs: undefined },
+ },
+ {
+ kind: "edit",
+ client: 0,
+ seed: { type: "delete", at: atIndex(2), span: spanChars(1) },
+ },
+ ];
+
+ const { server, clients } = runSimulation([["AB"]], events, 1);
+ const serverText = dataToSegments(server.data)
+ .map((s) => s.text)
+ .join("");
+
+ expect(serverText).toBe("Ax");
+ expect(clients[0].text.toString()).toBe("Ax");
+ });
+});
diff --git a/packages/liveblocks-core/src/crdts/__tests__/LiveText.encode.test.ts b/packages/liveblocks-core/src/crdts/__tests__/LiveText.encode.test.ts
new file mode 100644
index 00000000000..a3966b6d51a
--- /dev/null
+++ b/packages/liveblocks-core/src/crdts/__tests__/LiveText.encode.test.ts
@@ -0,0 +1,424 @@
+import { describe, expect, test } from "vitest";
+
+import { kInternal } from "../../internal";
+import { nn } from "../../lib/assert";
+import type { UpdateTextOp } from "../../protocol/Op";
+import { OpCode } from "../../protocol/Op";
+import { createManagedPool } from "../AbstractCrdt";
+import { LiveText } from "../LiveText";
+
+/**
+ * Helper: build a LiveText attached to a pool that captures the wire ops it
+ * dispatches, so tests can fabricate matching acks via
+ * `_apply(_, { origin: "local", via: "edit", optimistic: false })`.
+ */
+function attachedLiveText(initial: string): {
+ text: LiveText;
+ dispatched: UpdateTextOp[];
+} {
+ const dispatched: UpdateTextOp[] = [];
+ const pool = createManagedPool({
+ getCurrentConnectionId: () => 0,
+ onDispatch: (ops) => {
+ for (const op of ops) {
+ if (op.type === OpCode.UPDATE_TEXT) {
+ dispatched.push(op);
+ }
+ }
+ },
+ });
+ const text = new LiveText(initial);
+ text._attach("0:1", pool);
+ return { text, dispatched };
+}
+
+/** Build the server-side ack matching the latest dispatched local op. */
+function ackOp(dispatched: UpdateTextOp[], ackedVersion: number): UpdateTextOp {
+ const last = nn(dispatched.at(-1), "Expected a dispatched local op");
+ return {
+ type: OpCode.UPDATE_TEXT,
+ id: last.id,
+ opId: nn(last.opId, "Local ops must carry an opId"),
+ baseVersion: last.baseVersion,
+ version: ackedVersion,
+ ops: [...last.ops],
+ };
+}
+
+// ============================================================================
+// _encodeIndex
+// ============================================================================
+
+describe("LiveText[kInternal].encodeIndex", () => {
+ test("returns the index unchanged at version 0 when there are no pending ops", () => {
+ const text = new LiveText("Hello");
+ expect(text[kInternal].encodeIndex(3)).toBe(3);
+ });
+
+ test("clamps the index into [0, length]", () => {
+ const text = new LiveText("Hi");
+ expect(text[kInternal].encodeIndex(-10)).toBe(0);
+ expect(text[kInternal].encodeIndex(999)).toBe(2);
+ });
+
+ test("inverse-maps a cursor placed after an in-flight insert", () => {
+ const { text } = attachedLiveText("Hello");
+ text.insert(5, " world"); // in-flight: insert " world" at 5 (len 6)
+ expect(text.toString()).toBe("Hello world");
+
+ // CM cursor at offset 11 (end, just past " world") should encode to
+ // offset 5 in #confirmed coords (just past "Hello").
+ expect(text[kInternal].encodeIndex(11)).toBe(5);
+ });
+
+ test("a cursor positioned before an in-flight insert encodes unchanged", () => {
+ const { text } = attachedLiveText("Hello");
+ text.insert(5, " world");
+
+ expect(text[kInternal].encodeIndex(3)).toBe(3);
+ });
+
+ test("a cursor inside an in-flight insert collapses to the insertion point", () => {
+ const { text } = attachedLiveText("Hello");
+ text.insert(2, "XYZ");
+ // #segments = "HeXYZllo"; positions 2..5 are inside the insertion.
+ expect(text[kInternal].encodeIndex(2)).toBe(2);
+ expect(text[kInternal].encodeIndex(3)).toBe(2);
+ expect(text[kInternal].encodeIndex(4)).toBe(2);
+ expect(text[kInternal].encodeIndex(5)).toBe(2);
+ });
+
+ test("inverse-maps through both in-flight and queued ops", () => {
+ const { text } = attachedLiveText("Hello");
+ text.insert(5, "!"); // in-flight: insert "!" at 5
+ text.insert(0, "X"); // queued: insert "X" at 0 (applied on top of "Hello!")
+ expect(text.toString()).toBe("XHello!");
+
+ // CM cursor at 7 ("XHello!|") should encode to 5 in #confirmed coords.
+ // Undo queued first (insert "X" at 0): 7 → 6 (shift left by 1).
+ // Undo in-flight (insert "!" at 5): 6 → max(5, 6-1) = 5.
+ expect(text[kInternal].encodeIndex(7)).toBe(5);
+
+ // CM cursor at 1 ("X|Hello!") should encode to 0 in #confirmed coords.
+ // Undo queued first: 1 → max(0, 1-1) = 0. Undo in-flight: 0 ≤ 5 → 0.
+ expect(text[kInternal].encodeIndex(1)).toBe(0);
+ });
+
+ test("does not change the reported version on the LiveText node", () => {
+ const { text, dispatched } = attachedLiveText("Hello");
+ text.insert(5, "!");
+ text._apply(ackOp(dispatched, 1), {
+ origin: "local",
+ via: "edit",
+ optimistic: false,
+ });
+
+ expect(text.version).toBe(1);
+ expect(text[kInternal].encodeIndex(6)).toBe(6);
+ });
+});
+
+// ============================================================================
+// _decodeIndex
+// ============================================================================
+
+describe("LiveText[kInternal].decodeIndex", () => {
+ test("returns the index unchanged when fromVersion equals current and no pending", () => {
+ const text = new LiveText("Hello");
+ expect(text[kInternal].decodeIndex(3, 0)).toBe(3);
+ });
+
+ test("returns null when fromVersion is ahead of the current version", () => {
+ const text = new LiveText("Hello");
+ expect(text[kInternal].decodeIndex(3, 5)).toBeNull();
+ });
+
+ test("returns null when fromVersion is older than retained accepted-ops history", () => {
+ const { text } = attachedLiveText("Hello");
+ // Apply two remote ops to advance the version to 2.
+ text._apply(
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "0:1",
+ baseVersion: 0,
+ version: 1,
+ ops: [{ type: "insert", index: 5, text: "!" }],
+ },
+ { origin: "remote" }
+ );
+ text._apply(
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "0:1",
+ baseVersion: 1,
+ version: 2,
+ ops: [{ type: "insert", index: 6, text: "?" }],
+ },
+ { origin: "remote" }
+ );
+ expect(text.version).toBe(2);
+ // fromVersion = 5 is in the future → null (covered by the ahead branch).
+ expect(text[kInternal].decodeIndex(0, 5)).toBeNull();
+ // fromVersion = 0 should still be reachable: oldest entry is at version 1
+ // which is ≤ fromVersion + 1.
+ expect(text[kInternal].decodeIndex(0, 0)).not.toBeNull();
+ });
+
+ test("clamps the result into [0, length]", () => {
+ const text = new LiveText("Hi");
+ expect(text[kInternal].decodeIndex(-5, 0)).toBe(0);
+ expect(text[kInternal].decodeIndex(999, 0)).toBe(2);
+ });
+
+ test("forwards an index from an older confirmed version through accepted ops", () => {
+ const { text } = attachedLiveText("Hello");
+ text._apply(
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "0:1",
+ baseVersion: 0,
+ version: 1,
+ ops: [{ type: "insert", index: 0, text: "Z" }],
+ },
+ { origin: "remote" }
+ );
+ // A peer broadcast at version 0 with index 3 ("Hel|lo"). After our
+ // accepted insert of "Z" at 0, the same logical position is at offset 4
+ // in "ZHello".
+ expect(text[kInternal].decodeIndex(3, 0)).toBe(4);
+ });
+
+ test("forwards an index through local pending ops on top of the cross-version pass", () => {
+ const { text, dispatched } = attachedLiveText("Hello");
+ text._apply(
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "0:1",
+ baseVersion: 0,
+ version: 1,
+ ops: [{ type: "insert", index: 0, text: "Z" }],
+ },
+ { origin: "remote" }
+ );
+ expect(text.toString()).toBe("ZHello");
+
+ text.insert(0, "Q"); // in-flight: "QZHello"
+ text.insert(7, "!"); // queued: "QZHello!"
+ expect(text.toString()).toBe("QZHello!");
+
+ // Peer broadcast at version 0, index 3 ("Hel|lo").
+ // - Cross-version pass (accepted insert Z at 0): 3 → 4.
+ // - Local in-flight (insert Q at 0): 4 → 5.
+ // - Local queued (insert ! at 7): 5 (5 < 7, unchanged).
+ expect(text[kInternal].decodeIndex(3, 0)).toBe(5);
+
+ // Acknowledge the in-flight Q insert and verify decoding behaviour is
+ // stable across the ack (Q moved from in-flight into #confirmed; the
+ // queued ! becomes the next in-flight).
+ text._apply(ackOp(dispatched, 2), {
+ origin: "local",
+ via: "edit",
+ optimistic: false,
+ });
+ expect(text.version).toBe(2);
+ // Now: cross-version (versions 1 and 2): version 1 has insert Z at 0 → 3
+ // becomes 4. Version 2 records the local Q ack as empty ops (own ack), so
+ // no shift there. Then local pending = [insert ! at 7] → 4 stays at 4.
+ expect(text[kInternal].decodeIndex(3, 0)).toBe(4);
+ });
+
+ test("own acks are recorded as empty ops and do not shift decoded positions", () => {
+ const { text, dispatched } = attachedLiveText("Hello");
+ text.insert(0, "A");
+ text._apply(ackOp(dispatched, 1), {
+ origin: "local",
+ via: "edit",
+ optimistic: false,
+ });
+
+ expect(text.version).toBe(1);
+ // A peer at version 0 broadcasts index 3 ("Hel|lo"). On our side, the
+ // local insert of "A" was acked as a server-ordered op with no remote
+ // ops happening — #acceptedOps records empty ops for this ack. The peer
+ // simply hasn't seen our edit yet, so their index is in the old
+ // confirmed coords; we should NOT shift it. (When the peer eventually
+ // receives our edit, their CM transaction will do the local mapping.)
+ expect(text[kInternal].decodeIndex(3, 0)).toBe(3);
+ });
+
+ test("decoding the peer's broadcast version returns the result through local pending only", () => {
+ const { text } = attachedLiveText("Hello");
+ text.insert(2, "_");
+ expect(text.toString()).toBe("He_llo");
+
+ // Peer at the same version 0 broadcasts index 4 ("Hell|o"). We have an
+ // in-flight insert of "_" at 2, which shifts everything past 2 to the
+ // right by one in our local view.
+ expect(text[kInternal].decodeIndex(4, 0)).toBe(5);
+ });
+});
+
+// ============================================================================
+// Round-trip + end-to-end
+// ============================================================================
+
+describe("LiveText encode/decode pair", () => {
+ test("encode then decode on the same instance round-trips outside pending insertion boundaries", () => {
+ const { text } = attachedLiveText("Hello world");
+ text.insert(5, "!");
+ // CM doc is "Hello! world" (length 12). The insert occupies CM range
+ // [5, 6]; positions inside or exactly on either edge are subject to the
+ // OT assoc ambiguity (encode collapses leftward, decode shifts rightward).
+ // Positions strictly outside [5, 6] round-trip exactly.
+ for (const index of [0, 1, 4, 7, 8, 11, 12]) {
+ const encoded = text[kInternal].encodeIndex(index);
+ const decoded = text[kInternal].decodeIndex(encoded, text.version);
+ expect(decoded).toBe(index);
+ }
+ });
+
+ test("encoded position lands at the same logical location on a peer with identical state", () => {
+ // Two LiveTexts at the same version with no pending: any encoded index
+ // should decode to itself on the peer.
+ const sender = new LiveText("Hello world");
+ const receiver = new LiveText("Hello world");
+ const encoded = sender[kInternal].encodeIndex(6);
+ expect(receiver[kInternal].decodeIndex(encoded, sender.version)).toBe(6);
+ });
+
+ test("end-to-end convergence: sender's pending insert + receiver's pending insert", () => {
+ // Both clients start synced. Each types something locally before any ack.
+ // The sender broadcasts an encoded cursor positioned after their typing;
+ // the receiver decodes through their own pending state. Then both ops
+ // ack in some server order. After both clients have integrated each
+ // other's ops, the receiver's stored cursor for the sender (after
+ // running through subsequent local mappings) should match where the
+ // sender's CM cursor logically is.
+
+ const { text: sender, dispatched: senderDispatched } =
+ attachedLiveText("ABCDE");
+ const { text: receiver, dispatched: receiverDispatched } =
+ attachedLiveText("ABCDE");
+
+ // Sender types "1" at position 0; their cursor sits at position 4
+ // (between C and D) in "1ABCDE".
+ sender.insert(0, "1");
+ expect(sender.toString()).toBe("1ABCDE");
+ const senderCursorCm = 4;
+
+ // Receiver types "9" at position 5; their cursor sits at 0.
+ receiver.insert(5, "9");
+ expect(receiver.toString()).toBe("ABCDE9");
+
+ // Sender encodes and broadcasts.
+ const broadcastIndex = sender[kInternal].encodeIndex(senderCursorCm);
+ const broadcastVersion = sender.version;
+ expect(broadcastIndex).toBe(3);
+ expect(broadcastVersion).toBe(0);
+
+ // Receiver decodes against their current state (pending insert of "9").
+ // index 3 is below 5, so the receiver's pending insert of "9" at 5
+ // leaves it unchanged.
+ const decodedNow = receiver[kInternal].decodeIndex(
+ broadcastIndex,
+ broadcastVersion
+ );
+ expect(decodedNow).toBe(3);
+ // Position 3 in "ABCDE9" is between C and D — matches the sender's
+ // logical position.
+
+ // Now sync ops. Server orders sender's first (version 1), then
+ // receiver's (version 2, server-rebased to insert "9" at position 6 in
+ // the version-1 doc "1ABCDE").
+ receiver._apply(
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "0:1",
+ baseVersion: 0,
+ version: 1,
+ ops: [{ type: "insert", index: 0, text: "1" }],
+ },
+ { origin: "remote" }
+ );
+ expect(receiver.toString()).toBe("1ABCDE9");
+ // The server delivers the receiver's own ack in server-rebased form:
+ // their original insert "9" at 5 was shifted to "9" at 6 after the
+ // server applied the sender's insert "1" at 0 first.
+ receiver._apply(
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "0:1",
+ opId: nn(receiverDispatched.at(-1)?.opId),
+ baseVersion: 1,
+ version: 2,
+ ops: [{ type: "insert", index: 6, text: "9" }],
+ },
+ { origin: "local", via: "edit", optimistic: false }
+ );
+ expect(receiver.toString()).toBe("1ABCDE9");
+ expect(receiver.version).toBe(2);
+
+ // The receiver now decodes the same broadcast (still anchored at
+ // version 0). The decode should put the sender's cursor at position 4
+ // in "1ABCDE9" — between C and D. That's the same logical place.
+ const decodedAfterSync = receiver[kInternal].decodeIndex(
+ broadcastIndex,
+ broadcastVersion
+ );
+ expect(decodedAfterSync).toBe(4);
+
+ // Sender acks their own op and applies the receiver's accepted op.
+ sender._apply(ackOp(senderDispatched, 1), {
+ origin: "local",
+ via: "edit",
+ optimistic: false,
+ });
+ sender._apply(
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "0:1",
+ baseVersion: 1,
+ version: 2,
+ ops: [{ type: "insert", index: 6, text: "9" }],
+ },
+ { origin: "remote" }
+ );
+ expect(sender.toString()).toBe("1ABCDE9");
+ expect(sender.version).toBe(2);
+
+ // Sender re-encodes their (unchanged) CM cursor: still between C and D
+ // in "1ABCDE9", which is position 4.
+ const senderCursorAfterSync = 4;
+ const reBroadcastIndex = sender[kInternal].encodeIndex(
+ senderCursorAfterSync
+ );
+ expect(reBroadcastIndex).toBe(4);
+ expect(sender.version).toBe(2);
+
+ // Receiver decodes the fresh broadcast → position 4.
+ expect(
+ receiver[kInternal].decodeIndex(reBroadcastIndex, sender.version)
+ ).toBe(4);
+ });
+
+ test("peer ahead of us: decode returns null and succeeds after we catch up", () => {
+ // The peer is one ack ahead of us. They broadcast a cursor at their
+ // version. We can't rebase it yet.
+ const { text } = attachedLiveText("Hello");
+ expect(text[kInternal].decodeIndex(3, 1)).toBeNull();
+
+ // Once we receive the catching-up accepted op, decode works.
+ text._apply(
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "0:1",
+ baseVersion: 0,
+ version: 1,
+ ops: [{ type: "insert", index: 0, text: "Z" }],
+ },
+ { origin: "remote" }
+ );
+ expect(text.version).toBe(1);
+ expect(text[kInternal].decodeIndex(3, 1)).toBe(3);
+ });
+});
diff --git a/packages/liveblocks-core/src/crdts/__tests__/LiveText.history.devserver.test.ts b/packages/liveblocks-core/src/crdts/__tests__/LiveText.history.devserver.test.ts
new file mode 100644
index 00000000000..4e84bcc3d5b
--- /dev/null
+++ b/packages/liveblocks-core/src/crdts/__tests__/LiveText.history.devserver.test.ts
@@ -0,0 +1,43 @@
+import { describe, expect, test, vi } from "vitest";
+
+import { prepareStorageTest } from "../../__tests__/_devserver";
+import type { LiveText } from "../LiveText";
+
+describe("LiveText history convergence", () => {
+ test("an offline update from a deleted lifetime cannot desynchronize two clients", async () => {
+ const { roomA, roomB, storageA, storageB } = await prepareStorageTest<{
+ text: LiveText;
+ }>({
+ liveblocksType: "LiveObject",
+ data: {
+ text: {
+ liveblocksType: "LiveText",
+ data: [["Hello"]],
+ },
+ },
+ });
+
+ roomB.disconnect();
+ storageB.root.get("text").insert(5, "?");
+
+ storageA.root.delete("text");
+ roomA.history.undo();
+
+ await vi.waitFor(() => {
+ expect(roomA.getStorageStatus()).toBe("synchronized");
+ });
+
+ roomB.connect();
+ await vi.waitFor(() => {
+ expect(roomB.getStatus()).toBe("connected");
+ expect(storageB.root.toJSON()).toEqual(storageA.root.toJSON());
+ expect(roomB.getStorageStatus()).toBe("synchronized");
+ });
+
+ storageA.root.get("text").insert(5, "!");
+ await vi.waitFor(() => {
+ expect(storageA.root.toJSON()).toEqual({ text: [["Hello!"]] });
+ expect(storageB.root.toJSON()).toEqual({ text: [["Hello!"]] });
+ });
+ });
+});
diff --git a/packages/liveblocks-core/src/crdts/__tests__/LiveText.history.mockserver.test.ts b/packages/liveblocks-core/src/crdts/__tests__/LiveText.history.mockserver.test.ts
new file mode 100644
index 00000000000..d9435fcdbb1
--- /dev/null
+++ b/packages/liveblocks-core/src/crdts/__tests__/LiveText.history.mockserver.test.ts
@@ -0,0 +1,162 @@
+import { describe, expect, test, vi } from "vitest";
+
+import type { MockWebSocketServer } from "../../__tests__/_MockWebSocketServer";
+import {
+ createSerializedRoot,
+ parseAsClientMsgs,
+ prepareIsolatedStorageTest,
+ replaceRemoteStorageAndReconnect,
+} from "../../__tests__/_MockWebSocketServer.setup";
+import { waitUntilStatus } from "../../__tests__/_waitUtils";
+import { ClientMsgCode } from "../../protocol/ClientMsg";
+import type { ClientWireOp, CreateTextOp } from "../../protocol/Op";
+import { OpCode } from "../../protocol/Op";
+import type { StorageNode } from "../../protocol/StorageNode";
+import { CrdtType } from "../../protocol/StorageNode";
+import type { LiveText } from "../LiveText";
+
+const OLD_TEXT_ID = "0:1";
+const initialNodes: StorageNode[] = [
+ createSerializedRoot(),
+ [
+ OLD_TEXT_ID,
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "text",
+ data: [["Hello"]],
+ version: 7,
+ },
+ ],
+];
+
+function getStorageOps(wss: MockWebSocketServer): ClientWireOp[] {
+ return wss.receivedMessagesRaw.flatMap((raw) =>
+ parseAsClientMsgs(raw).flatMap((message) =>
+ message.type === ClientMsgCode.UPDATE_STORAGE ? message.ops : []
+ )
+ );
+}
+
+function getCreateTextOps(wss: MockWebSocketServer): CreateTextOp[] {
+ return getStorageOps(wss).filter(
+ (op): op is ClientWireOp & CreateTextOp => op.type === OpCode.CREATE_TEXT
+ );
+}
+
+describe("LiveText history lifetimes", () => {
+ test("delete then undo creates a fresh text ID at version 0", async () => {
+ const { root, room, wss } = await prepareIsolatedStorageTest<{
+ text?: LiveText;
+ }>(initialNodes, 1);
+
+ root.delete("text");
+ room.history.undo();
+
+ const createOp = getCreateTextOps(wss).at(-1);
+ expect(createOp).toMatchObject({
+ type: OpCode.CREATE_TEXT,
+ parentId: "root",
+ parentKey: "text",
+ data: [["Hello"]],
+ version: 0,
+ });
+ expect(createOp?.id).not.toBe(OLD_TEXT_ID);
+
+ room.history.redo();
+ expect(root.get("text")).toBeUndefined();
+ });
+
+ test("every undo after a redo creates a new text lifetime", async () => {
+ const { root, room, wss } = await prepareIsolatedStorageTest<{
+ text?: LiveText;
+ }>(initialNodes, 1);
+
+ root.delete("text");
+
+ for (let i = 0; i < 3; i++) {
+ room.history.undo();
+ room.history.redo();
+ }
+
+ const createOps = getCreateTextOps(wss);
+ expect(createOps).toHaveLength(3);
+ expect(createOps.every((op) => op.version === 0)).toBe(true);
+ expect(new Set(createOps.map((op) => op.id)).size).toBe(3);
+ expect(createOps.map((op) => op.id)).not.toContain(OLD_TEXT_ID);
+ });
+
+ test("a pending update for the deleted ID cannot affect the restored text", async () => {
+ const { root, room, wss, applyRemoteOperations } =
+ await prepareIsolatedStorageTest<{ text?: LiveText }>(initialNodes, 1);
+
+ root.get("text")?.insert(5, "!");
+ const pendingUpdate = getStorageOps(wss).find(
+ (op) => op.type === OpCode.UPDATE_TEXT && op.id === OLD_TEXT_ID
+ );
+ if (pendingUpdate?.type !== OpCode.UPDATE_TEXT) {
+ throw new Error("Expected a pending UPDATE_TEXT operation");
+ }
+
+ root.delete("text");
+ room.history.undo();
+
+ const restoredText = root.get("text");
+ const restoredId = getCreateTextOps(wss).at(-1)?.id;
+ expect(restoredText?.toString()).toBe("Hello!");
+ expect(restoredId).toBeDefined();
+ expect(restoredId).not.toBe(OLD_TEXT_ID);
+
+ applyRemoteOperations([{ ...pendingUpdate, version: 8 }]);
+ applyRemoteOperations([
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: OLD_TEXT_ID,
+ baseVersion: 0,
+ version: 1,
+ ops: [{ type: "insert", index: 0, text: "stale" }],
+ },
+ ]);
+
+ expect(root.get("text")).toBe(restoredText);
+ expect(restoredText?.toString()).toBe("Hello!");
+ });
+
+ test("reconnect replay preserves the restored text ID", async () => {
+ const { root, room, wss } = await prepareIsolatedStorageTest<{
+ text?: LiveText;
+ }>(initialNodes, 1);
+
+ root.delete("text");
+ room.history.undo();
+ const restoredCreate = getCreateTextOps(wss).at(-1);
+ if (restoredCreate === undefined) {
+ throw new Error("Expected a restored CREATE_TEXT operation");
+ }
+
+ // Detach the restored node again so replay sees a CREATE_TEXT whose ID is
+ // absent from the pool. Its existing opId is what distinguishes replay
+ // from a new restoration.
+ room.history.redo();
+ const messagesBeforeReconnect = wss.receivedMessagesRaw.length;
+
+ replaceRemoteStorageAndReconnect(wss, [createSerializedRoot()]);
+ await waitUntilStatus(room, "connected");
+
+ await vi.waitFor(() => {
+ const replayedCreate = wss.receivedMessagesRaw
+ .slice(messagesBeforeReconnect)
+ .flatMap(parseAsClientMsgs)
+ .flatMap((message) =>
+ message.type === ClientMsgCode.UPDATE_STORAGE ? message.ops : []
+ )
+ .find((op) => op.type === OpCode.CREATE_TEXT);
+
+ expect(replayedCreate).toMatchObject({
+ id: restoredCreate.id,
+ opId: restoredCreate.opId,
+ version: 0,
+ });
+ });
+ });
+});
diff --git a/packages/liveblocks-core/src/crdts/__tests__/LiveText.test.ts b/packages/liveblocks-core/src/crdts/__tests__/LiveText.test.ts
new file mode 100644
index 00000000000..252ccd0994f
--- /dev/null
+++ b/packages/liveblocks-core/src/crdts/__tests__/LiveText.test.ts
@@ -0,0 +1,211 @@
+import { describe, expect, test } from "vitest";
+
+import {
+ compactNodesToNodeStream,
+ CrdtType,
+ nodeStreamToCompactNodes,
+ type StorageNode,
+} from "../../protocol/StorageNode";
+import { LiveText } from "../LiveText";
+import { invertTextOperations, transformTextOperations } from "../liveTextOps";
+import { toPlainLson } from "../utils";
+
+describe("LiveText", () => {
+ test("stores plain text and serializes to JSON", () => {
+ const text = new LiveText("Hello");
+
+ expect(text.toString()).toBe("Hello");
+ expect(text.length).toBe(5);
+ expect(text.toJSON()).toEqual([["Hello"]]);
+ expect(text.toJSON()).toEqual([["Hello"]]);
+ });
+
+ test("inserts, deletes, and replaces text", () => {
+ const text = new LiveText("Hello");
+
+ text.insert(5, " world");
+ text.delete(0, 1);
+ text.replace(0, 4, "Hi");
+
+ expect(text.toString()).toBe("Hi world");
+ expect(text.toJSON()).toEqual([["Hi world"]]);
+ });
+
+ test("formats ranges and normalizes adjacent segments", () => {
+ const text = new LiveText("Hello world");
+
+ text.format(0, 5, { bold: true });
+ text.insert(5, "!", { bold: true });
+ text.format(0, 6, { bold: null });
+
+ expect(text.toJSON()).toEqual([["Hello! world"]]);
+ });
+
+ test("clones without sharing mutable state", () => {
+ const text = new LiveText([["Hello", { bold: true }]]);
+ const clone = text.clone();
+
+ clone.insert(5, "!");
+
+ expect(text.toJSON()).toEqual([["Hello", { bold: true }]]);
+ expect(clone.toJSON()).toEqual([["Hello", { bold: true }], ["!"]]);
+ });
+
+ test("serializes to Plain LSON", () => {
+ const text = new LiveText([["Hello", { bold: true }]]);
+
+ expect(toPlainLson(text)).toEqual({
+ liveblocksType: "LiveText",
+ data: [["Hello", { bold: true }]],
+ version: 0,
+ });
+ });
+
+ test("serializes to a DevTools tree node", () => {
+ const text = new LiveText(
+ [["Hello "], ["world", { "lb-comment": "thread-1" }]],
+ 3
+ );
+
+ expect(text.toTreeNode("document")).toEqual({
+ type: "LiveText",
+ id: expect.any(String),
+ key: "document",
+ payload: [
+ {
+ type: "Json",
+ id: expect.stringMatching(/:0$/),
+ key: "0",
+ payload: ["Hello "],
+ },
+ {
+ type: "Json",
+ id: expect.stringMatching(/:1$/),
+ key: "1",
+ payload: ["world", { "lb-comment": "thread-1" }],
+ },
+ {
+ type: "Json",
+ id: expect.stringMatching(/:version$/),
+ key: "version",
+ payload: 3,
+ },
+ ],
+ });
+ });
+
+ test("transforms text operations over accepted operations", () => {
+ expect(
+ transformTextOperations(
+ [{ type: "insert", index: 1, text: "!" }],
+ [{ type: "insert", index: 0, text: "A" }],
+ "after"
+ )
+ ).toEqual([{ type: "insert", index: 2, text: "!" }]);
+ });
+
+ test("invertTextOperations preserves attributes for multi-segment deletes", () => {
+ expect(
+ invertTextOperations(
+ [{ text: "He", attributes: { bold: true } }, { text: "llo" }],
+ [{ type: "delete", index: 0, length: 5 }]
+ )
+ ).toEqual([
+ { type: "insert", index: 0, text: "He", attributes: { bold: true } },
+ { type: "insert", index: 2, text: "llo" },
+ ]);
+ });
+
+ test("round-trips compact storage nodes", () => {
+ const nodes: StorageNode[] = [
+ ["root", { type: CrdtType.OBJECT, data: {} }],
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "text",
+ data: [["Hello"]],
+ version: 2,
+ },
+ ],
+ ];
+
+ const compact = Array.from(nodeStreamToCompactNodes(nodes));
+
+ expect(compact).toEqual([
+ ["root", {}],
+ ["0:1", CrdtType.TEXT, "root", "text", [["Hello"]], 2],
+ ]);
+ expect(Array.from(compactNodesToNodeStream(compact))).toEqual(nodes);
+ });
+
+ describe("multi-byte characters", () => {
+ // U+1F600, stored as a surrogate pair: one code point, two code units
+ const GRINNING = "😀";
+ // "e" followed by U+0301 (combining acute accent): one grapheme, two code
+ // points
+ const COMBINED_E = "é";
+
+ test("indices count UTF-16 code units, like String.prototype", () => {
+ const text = new LiveText(`${GRINNING}${COMBINED_E}`);
+
+ expect(text.length).toBe(4);
+ expect([...text.toString()]).toHaveLength(3); // code points
+ });
+
+ test("an insertion index inside a surrogate pair moves to the boundary", () => {
+ const text = new LiveText(GRINNING);
+
+ // Index 1 sits between the surrogates; it snaps back to the start of
+ // the character rather than splitting it.
+ text.insert(1, "X");
+
+ expect(text.toString()).toBe(`X${GRINNING}`);
+ expect(text.length).toBe(3);
+ });
+
+ test("deleting part of a surrogate pair deletes the whole character", () => {
+ const text = new LiveText(`a${GRINNING}b`);
+
+ text.delete(1, 1);
+
+ expect(text.toString()).toBe("ab");
+ });
+
+ test("deleting from the middle of a character covers it entirely", () => {
+ const text = new LiveText(`a${GRINNING}b`);
+
+ // Starts between the surrogates and ends before "b"
+ text.delete(2, 1);
+
+ expect(text.toString()).toBe("ab");
+ });
+
+ test("replacing part of a surrogate pair replaces the whole character", () => {
+ const text = new LiveText(`a${GRINNING}b`);
+
+ text.replace(2, 1, "X");
+
+ expect(text.toString()).toBe("aXb");
+ });
+
+ test("formatting part of a surrogate pair formats the whole character", () => {
+ const text = new LiveText(GRINNING);
+
+ text.format(0, 1, { bold: true });
+
+ expect(text.toJSON()).toEqual([[GRINNING, { bold: true }]]);
+ });
+
+ test("a combining mark is still separable from the letter it modifies", () => {
+ // The guarantee covers code points, not grapheme clusters: "é" here is
+ // two code points, and the accent can be edited on its own.
+ const text = new LiveText(COMBINED_E);
+
+ text.delete(0, 1);
+
+ expect(text.toString()).toBe("́");
+ });
+ });
+});
diff --git a/packages/liveblocks-core/src/crdts/__tests__/Orphaned.test.ts b/packages/liveblocks-core/src/crdts/__tests__/Orphaned.test.ts
new file mode 100644
index 00000000000..331baeb39eb
--- /dev/null
+++ b/packages/liveblocks-core/src/crdts/__tests__/Orphaned.test.ts
@@ -0,0 +1,131 @@
+import { afterEach, describe, expect, test, vi } from "vitest";
+
+import * as console from "../../lib/fancy-console";
+import { OpCode } from "../../protocol/Op";
+import { createManagedPool } from "../AbstractCrdt";
+import { LiveList } from "../LiveList";
+import { LiveMap } from "../LiveMap";
+import { LiveObject } from "../LiveObject";
+import { LiveText } from "../LiveText";
+import type { LiveStructure } from "../Lson";
+import { REMOTE } from "../StorageUpdates";
+
+const ORPHANED_NODE_WARNING =
+ "Cannot sync changes made to this Live structure because it is no longer part of Storage. Retrieve the current value from its parent before mutating it.";
+
+function orphan(node: T): T {
+ const pool = createManagedPool({ getCurrentConnectionId: () => 0 });
+ const root = new LiveObject<{ child?: T }>({ child: node });
+ root._attach("root", pool);
+ root.delete("child");
+ return node;
+}
+
+describe("orphaned Live structures", () => {
+ afterEach(() => {
+ vi.restoreAllMocks();
+ });
+
+ test("a replaced LiveText warns when mutated", () => {
+ const pool = createManagedPool({ getCurrentConnectionId: () => 0 });
+ const text = new LiveText();
+ const root = new LiveObject({ text });
+ root._attach("root", pool);
+
+ root._attachChild(
+ {
+ type: OpCode.CREATE_TEXT,
+ id: "1:0",
+ parentId: "root",
+ parentKey: "text",
+ data: [],
+ version: 0,
+ },
+ REMOTE
+ );
+
+ expect(root.get("text")).not.toBe(text);
+ const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+ text.insert(0, "lost");
+ expect(warn).toHaveBeenCalledOnce();
+ expect(warn).toHaveBeenCalledWith(ORPHANED_NODE_WARNING, {
+ type: "LiveText",
+ formerParentKey: "text",
+ });
+ expect(text.toString()).toBe("lost");
+ });
+
+ test("LiveText mutations warn once", () => {
+ const text = orphan(new LiveText("abc"));
+ const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+ text.insert(1, "x");
+ text.delete(1, 1);
+ text.replace(1, 1, "x");
+ text.format(1, 1, { bold: true });
+
+ expect(warn).toHaveBeenCalledOnce();
+ expect(warn).toHaveBeenCalledWith(ORPHANED_NODE_WARNING, {
+ type: "LiveText",
+ formerParentKey: "child",
+ });
+ expect(text.toString()).toBe("axc");
+ });
+
+ test("LiveObject mutations warn once", () => {
+ const object = orphan(
+ new LiveObject<{ local?: number; value: number }>({ value: 0 })
+ );
+ const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+ object.set("value", 1);
+ object.setLocal("local", 1);
+ object.update({ value: 1 });
+ object.delete("value");
+ object.reconcile({ value: 1 });
+ object.reconcilePartially({ value: 1 });
+
+ expect(warn).toHaveBeenCalledOnce();
+ expect(warn).toHaveBeenCalledWith(ORPHANED_NODE_WARNING, {
+ type: "LiveObject",
+ formerParentKey: "child",
+ });
+ expect(object.toJSON()).toEqual({ value: 1 });
+ });
+
+ test("LiveMap mutations warn once", () => {
+ const map = orphan(new LiveMap([["value", 0]]));
+ const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+ map.set("value", 1);
+ map.delete("value");
+
+ expect(warn).toHaveBeenCalledOnce();
+ expect(warn).toHaveBeenCalledWith(ORPHANED_NODE_WARNING, {
+ type: "LiveMap",
+ formerParentKey: "child",
+ });
+ expect(map.toJSON()).toEqual({});
+ });
+
+ test("LiveList mutations warn once", () => {
+ const list = orphan(new LiveList([0, 1]));
+ const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+ list.push(2);
+ list.insert(2, 1);
+ list.move(0, 1);
+ list.delete(0);
+ list.clear();
+ list.push(1);
+ list.set(0, 2);
+
+ expect(warn).toHaveBeenCalledOnce();
+ expect(warn).toHaveBeenCalledWith(ORPHANED_NODE_WARNING, {
+ type: "LiveList",
+ formerParentKey: "child",
+ });
+ expect(list.toJSON()).toEqual([2]);
+ });
+
+});
diff --git a/packages/liveblocks-core/src/crdts/__tests__/UnacknowledgedOps.test.ts b/packages/liveblocks-core/src/crdts/__tests__/UnacknowledgedOps.test.ts
new file mode 100644
index 00000000000..64255246389
--- /dev/null
+++ b/packages/liveblocks-core/src/crdts/__tests__/UnacknowledgedOps.test.ts
@@ -0,0 +1,53 @@
+import { describe, expect, test } from "vitest";
+
+import type { ClientWireOp } from "../../protocol/Op";
+import { OpCode } from "../../protocol/Op";
+import { UnacknowledgedOps } from "../UnacknowledgedOps";
+
+describe("UnacknowledgedOps", () => {
+ test("indexes pending CreateTextOps by parent and position", () => {
+ const unacked = new UnacknowledgedOps();
+
+ const createTextOp: ClientWireOp = {
+ type: OpCode.CREATE_TEXT,
+ opId: "1:0",
+ id: "1:1",
+ parentId: "0:0",
+ parentKey: "!",
+ data: [["Hello"]],
+ version: 0,
+ };
+ unacked.add(createTextOp);
+
+ expect(unacked.get("1:0")).toBe(createTextOp);
+ expect(Array.from(unacked.getByParentId("0:0"))).toEqual([createTextOp]);
+ expect(Array.from(unacked.getByParentIdAndKey("0:0", "!"))).toEqual([
+ createTextOp,
+ ]);
+
+ unacked.delete("1:0");
+
+ expect(unacked.get("1:0")).toBeUndefined();
+ expect(Array.from(unacked.getByParentId("0:0"))).toEqual([]);
+ expect(Array.from(unacked.getByParentIdAndKey("0:0", "!"))).toEqual([]);
+ });
+
+ test("does not index non-create ops by position", () => {
+ const unacked = new UnacknowledgedOps();
+
+ const updateTextOp: ClientWireOp = {
+ type: OpCode.UPDATE_TEXT,
+ opId: "1:0",
+ id: "1:1",
+ baseVersion: 0,
+ ops: [{ type: "insert", index: 0, text: "x" }],
+ };
+ unacked.add(updateTextOp);
+
+ expect(unacked.get("1:0")).toBe(updateTextOp);
+ expect(Array.from(unacked.getByParentId("0:0"))).toEqual([]);
+
+ unacked.delete("1:0");
+ expect(unacked.size).toBe(0);
+ });
+});
diff --git a/packages/liveblocks-core/src/crdts/__tests__/_arbitraries.ts b/packages/liveblocks-core/src/crdts/__tests__/_arbitraries.ts
index 14ade3e6508..8b1fbac4286 100644
--- a/packages/liveblocks-core/src/crdts/__tests__/_arbitraries.ts
+++ b/packages/liveblocks-core/src/crdts/__tests__/_arbitraries.ts
@@ -5,6 +5,7 @@ import { LiveFile } from "../LiveFile";
import { LiveList } from "../LiveList";
import { LiveMap } from "../LiveMap";
import { LiveObject } from "../LiveObject";
+import { LiveText } from "../LiveText";
import type { LiveStructure, Lson } from "../Lson";
export const key = fc.string().filter((s) => s !== "__proto__");
@@ -53,6 +54,7 @@ function makeLsonArbitraries(options?: LsonArbitraryOptions) {
tie("liveFile"),
tie("liveList"),
tie("liveObject"),
+ tie("liveText"),
...(withLiveMap ? [tie("liveMap")] : []),
]
)
@@ -61,6 +63,7 @@ function makeLsonArbitraries(options?: LsonArbitraryOptions) {
liveMap: fc
.array(fc.tuple(key, tie("lson")))
.map((pairs) => new LiveMap(pairs as [string, Lson][])),
+ liveText: fc.string().map((text) => new LiveText(text)),
liveObject: fc
.array(fc.tuple(key, tie("lson")))
.map(
diff --git a/packages/liveblocks-core/src/crdts/__tests__/doc.test.ts b/packages/liveblocks-core/src/crdts/__tests__/doc.test.ts
index bfcaf55cf06..50221925901 100644
--- a/packages/liveblocks-core/src/crdts/__tests__/doc.test.ts
+++ b/packages/liveblocks-core/src/crdts/__tests__/doc.test.ts
@@ -31,6 +31,7 @@ describe("Storage", () => {
type: "LiveObject",
node: storage.root,
updates: { a: { type: "update" } },
+ source: { origin: "local", via: "edit" },
},
]);
});
@@ -61,6 +62,7 @@ describe("Storage", () => {
type: "LiveObject",
node: storageA.root,
updates: { a: { type: "update" } },
+ source: { origin: "remote" },
},
]);
});
@@ -95,6 +97,7 @@ describe("Storage", () => {
type: "LiveObject",
node: storageA.root,
updates: { a: { type: "update" }, b: { type: "update" } },
+ source: { origin: "remote" },
},
]);
});
@@ -136,6 +139,7 @@ describe("Storage", () => {
type: "LiveObject",
node: storage.root,
updates: { a: { type: "update" }, b: { type: "update" } },
+ source: { origin: "local", via: "edit" },
},
]);
@@ -171,11 +175,13 @@ describe("Storage", () => {
type: "LiveObject",
node: storage.root,
updates: { a: { type: "update" } },
+ source: { origin: "local", via: "edit" },
},
{
type: "LiveObject",
node: root.get("child"),
updates: { b: { type: "update" } },
+ source: { origin: "local", via: "edit" },
},
]);
});
@@ -215,21 +221,25 @@ describe("Storage", () => {
type: "LiveObject",
node: storage.root,
updates: { a: { type: "update" } },
+ source: { origin: "local", via: "edit" },
},
{
type: "LiveObject",
node: root.get("childObj"),
updates: { b: { type: "update" } },
+ source: { origin: "local", via: "edit" },
},
{
type: "LiveList",
node: root.get("childList"),
updates: [{ index: 0, item: "item1", type: "insert" }],
+ source: { origin: "local", via: "edit" },
},
{
type: "LiveMap",
node: root.get("childMap"),
updates: { el1: { type: "update" } },
+ source: { origin: "local", via: "edit" },
},
]);
});
diff --git a/packages/liveblocks-core/src/crdts/__tests__/liveTextOps.test.ts b/packages/liveblocks-core/src/crdts/__tests__/liveTextOps.test.ts
new file mode 100644
index 00000000000..77d5f4b78f5
--- /dev/null
+++ b/packages/liveblocks-core/src/crdts/__tests__/liveTextOps.test.ts
@@ -0,0 +1,242 @@
+import { describe, expect, test } from "vitest";
+
+import type { LiveTextData } from "../../protocol/Op";
+import {
+ applyLiveTextOperations,
+ attributesEqual,
+ dataToSegments,
+ inverseMapTextIndexThroughOperations,
+ invertTextOperations,
+ mapTextIndexThroughOperations,
+ normalizeLiveTextOperations,
+ normalizeSegments,
+ transformTextOperations,
+} from "../liveTextOps";
+
+describe("liveTextOps", () => {
+ test("attributesEqual is order-independent", () => {
+ expect(attributesEqual({ a: 1, b: 2 }, { b: 2, a: 1 })).toBe(true);
+ expect(attributesEqual({ a: 1 }, { a: 2 })).toBe(false);
+ });
+
+ test("inverting a format clears attribute names inherited from Object.prototype", () => {
+ // Attribute names are arbitrary strings, so they can collide with members
+ // every plain object inherits from Object.prototype ("toString",
+ // "constructor", "valueOf", ...). Undoing a format on a key the segment
+ // never had must restore "no such attribute" (null) -- the inherited
+ // member is not an attribute value.
+ //
+ // The segment carries an unrelated attribute here so its attribute bag
+ // exists: that is what makes the inherited "toString" reachable.
+ const doc: LiveTextData = [["a", { bold: true }]];
+ const ops = [
+ {
+ type: "format" as const,
+ index: 0,
+ length: 1,
+ attributes: { toString: false },
+ },
+ ];
+
+ const reverse = invertTextOperations(dataToSegments(doc), ops);
+
+ expect(reverse).toEqual([
+ { type: "format", index: 0, length: 1, attributes: { toString: null } },
+ ]);
+ expect(
+ applyLiveTextOperations(applyLiveTextOperations(doc, ops), reverse)
+ ).toEqual(doc);
+ });
+
+ test("normalizeSegments merges adjacent segments with equivalent attributes", () => {
+ expect(
+ normalizeSegments([
+ { text: "He", attributes: { bold: true } },
+ { text: "llo", attributes: { bold: true } },
+ ])
+ ).toEqual([{ text: "Hello", attributes: { bold: true } }]);
+ });
+
+ test("applyLiveTextOperations inserts, deletes, and formats", () => {
+ const data = applyLiveTextOperations(
+ [["Hello"]],
+ [
+ { type: "insert", index: 5, text: "!" },
+ { type: "format", index: 0, length: 5, attributes: { bold: true } },
+ ]
+ );
+
+ expect(data).toEqual([["Hello", { bold: true }], ["!"]]);
+ });
+
+ test("normalizes operation boundaries around surrogate pairs", () => {
+ const data: LiveTextData = [["a😀b"]];
+
+ expect(
+ normalizeLiveTextOperations(data, [
+ { type: "insert", index: 2, text: "X" },
+ ])
+ ).toEqual([{ type: "insert", index: 1, text: "X" }]);
+
+ expect(
+ normalizeLiveTextOperations(data, [
+ { type: "delete", index: 2, length: 1 },
+ ])
+ ).toEqual([{ type: "delete", index: 1, length: 2 }]);
+
+ expect(
+ normalizeLiveTextOperations(data, [
+ { type: "delete", index: 0, length: 2 },
+ ])
+ ).toEqual([{ type: "delete", index: 0, length: 3 }]);
+
+ expect(
+ normalizeLiveTextOperations(data, [
+ { type: "delete", index: 2, length: 0 },
+ ])
+ ).toEqual([{ type: "delete", index: 1, length: 0 }]);
+
+ expect(
+ normalizeLiveTextOperations(data, [
+ {
+ type: "format",
+ index: 2,
+ length: 1,
+ attributes: { bold: true },
+ },
+ ])
+ ).toEqual([
+ {
+ type: "format",
+ index: 1,
+ length: 2,
+ attributes: { bold: true },
+ },
+ ]);
+ });
+
+ test("normalizes each operation against the preceding operations", () => {
+ expect(
+ normalizeLiveTextOperations(
+ [["ab"]],
+ [
+ { type: "insert", index: 1, text: "😀" },
+ { type: "insert", index: 2, text: "X" },
+ ]
+ )
+ ).toEqual([
+ { type: "insert", index: 1, text: "😀" },
+ { type: "insert", index: 1, text: "X" },
+ ]);
+ });
+
+ test("detects surrogate pairs across segment boundaries", () => {
+ expect(
+ normalizeLiveTextOperations(
+ [["a\ud83d"], ["\ude00b", { bold: true }]],
+ [{ type: "insert", index: 2, text: "X" }]
+ )
+ ).toEqual([{ type: "insert", index: 1, text: "X" }]);
+ });
+
+ test("invertTextOperations preserves attributes for deleted segments", () => {
+ const segments = dataToSegments([["He", { bold: true }], ["llo"]]);
+
+ expect(
+ invertTextOperations(segments, [{ type: "delete", index: 0, length: 5 }])
+ ).toEqual([
+ { type: "insert", index: 0, text: "He", attributes: { bold: true } },
+ { type: "insert", index: 2, text: "llo" },
+ ]);
+ });
+
+ test("transformTextOperations shifts indices over accepted inserts", () => {
+ expect(
+ transformTextOperations(
+ [{ type: "insert", index: 1, text: "!" }],
+ [{ type: "insert", index: 0, text: "A" }],
+ "after"
+ )
+ ).toEqual([{ type: "insert", index: 2, text: "!" }]);
+ });
+
+ describe("inverseMapTextIndexThroughOperations", () => {
+ test("identity when there are no ops", () => {
+ expect(inverseMapTextIndexThroughOperations(7, [])).toBe(7);
+ });
+
+ test("undoes a single insert: positions past insertion shift left", () => {
+ const op = { type: "insert" as const, index: 5, text: "ab" };
+ expect(inverseMapTextIndexThroughOperations(8, [op])).toBe(6);
+ });
+
+ test("undoes a single insert: positions before insertion are unchanged", () => {
+ const op = { type: "insert" as const, index: 5, text: "ab" };
+ expect(inverseMapTextIndexThroughOperations(3, [op])).toBe(3);
+ });
+
+ test("undoes a single insert: positions inside insertion collapse to insertion point", () => {
+ const op = { type: "insert" as const, index: 5, text: "abc" };
+ expect(inverseMapTextIndexThroughOperations(5, [op])).toBe(5);
+ expect(inverseMapTextIndexThroughOperations(6, [op])).toBe(5);
+ expect(inverseMapTextIndexThroughOperations(7, [op])).toBe(5);
+ expect(inverseMapTextIndexThroughOperations(8, [op])).toBe(5);
+ expect(inverseMapTextIndexThroughOperations(9, [op])).toBe(6);
+ });
+
+ test("undoes a single delete: positions before deletion are unchanged", () => {
+ const op = { type: "delete" as const, index: 5, length: 2 };
+ expect(inverseMapTextIndexThroughOperations(3, [op])).toBe(3);
+ expect(inverseMapTextIndexThroughOperations(4, [op])).toBe(4);
+ });
+
+ test("undoes a single delete: positions past deletion shift right", () => {
+ const op = { type: "delete" as const, index: 5, length: 2 };
+ expect(inverseMapTextIndexThroughOperations(6, [op])).toBe(8);
+ expect(inverseMapTextIndexThroughOperations(10, [op])).toBe(12);
+ });
+
+ test("undoes a single delete: position at the deletion point lands on the right edge", () => {
+ const op = { type: "delete" as const, index: 5, length: 3 };
+ expect(inverseMapTextIndexThroughOperations(5, [op])).toBe(8);
+ });
+
+ test("format ops are positionally neutral", () => {
+ const op = {
+ type: "format" as const,
+ index: 1,
+ length: 4,
+ attributes: { bold: true },
+ };
+ expect(inverseMapTextIndexThroughOperations(3, [op])).toBe(3);
+ });
+
+ test("ops are inverted in reverse order", () => {
+ const ops = [
+ { type: "insert" as const, index: 0, text: "Hi " },
+ { type: "delete" as const, index: 6, length: 1 },
+ ];
+ // Forward: from "World" → "Hi World" → "Hi Wold" (delete the "r" at index 6).
+ // Position 4 in the final string ("Wo|ld") should inverse-map back to
+ // position 1 in the original "World" ("W|orld"), which the forward map
+ // confirms: forward(1, ops) = 4.
+ expect(mapTextIndexThroughOperations(1, ops)).toBe(4);
+ expect(inverseMapTextIndexThroughOperations(4, ops)).toBe(1);
+ });
+
+ test("forward then inverse is identity on positions clearly outside any op range", () => {
+ const ops = [
+ { type: "insert" as const, index: 2, text: "XY" },
+ { type: "delete" as const, index: 10, length: 3 },
+ ];
+ for (const index of [0, 1, 15, 20, 100]) {
+ expect(
+ inverseMapTextIndexThroughOperations(
+ mapTextIndexThroughOperations(index, ops),
+ ops
+ )
+ ).toBe(index);
+ }
+ });
+ });
+});
diff --git a/packages/liveblocks-core/src/crdts/__tests__/liveblocks-helpers.test.ts b/packages/liveblocks-core/src/crdts/__tests__/liveblocks-helpers.test.ts
index 7af6a6fea37..da6c3622163 100644
--- a/packages/liveblocks-core/src/crdts/__tests__/liveblocks-helpers.test.ts
+++ b/packages/liveblocks-core/src/crdts/__tests__/liveblocks-helpers.test.ts
@@ -20,6 +20,7 @@ import {
import { LiveList } from "../LiveList";
import { LiveMap } from "../LiveMap";
import { LiveObject } from "../LiveObject";
+import { LiveText } from "../LiveText";
import { toPlainLson } from "../utils";
test("Common first positions", () => {
@@ -318,6 +319,71 @@ describe("diffNodeMap", () => {
]);
});
+ test("liveText create and update", () => {
+ const currentItems: NodeMap = new Map([
+ ["root", { type: CrdtType.OBJECT, data: {} }],
+ ]);
+
+ const newItems: NodeMap = new Map([
+ ["root", { type: CrdtType.OBJECT, data: {} }],
+ [
+ "0:1",
+ {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "text",
+ data: [["Hello"]],
+ version: 0,
+ },
+ ],
+ ]);
+
+ expect(diffNodeMap(currentItems, newItems)).toEqual([
+ {
+ type: OpCode.CREATE_TEXT,
+ id: "0:1",
+ parentId: "root",
+ parentKey: "text",
+ data: [["Hello"]],
+ version: 0,
+ },
+ ]);
+
+ const updatedItems: NodeMap = new Map(newItems);
+ updatedItems.set("0:1", {
+ type: CrdtType.TEXT,
+ parentId: "root",
+ parentKey: "text",
+ data: [["Hello!"]],
+ version: 1,
+ });
+
+ // Content changes of existing LiveText nodes are deliberately NOT part
+ // of the op diff: snapshots are reconciled via LiveText._resyncText
+ // (driven by the room), not via UPDATE_TEXT ops.
+ expect(diffNodeMap(newItems, updatedItems)).toEqual([]);
+
+ // A user-initiated restore is different from an authoritative snapshot
+ // load: it is a new edit in the current timeline. Use the current node's
+ // version as the base and treat the target's older version as content-only
+ // snapshot metadata.
+ expect(
+ diffNodeMap(updatedItems, newItems, {
+ includeLiveTextUpdates: true,
+ })
+ ).toEqual([
+ {
+ type: OpCode.UPDATE_TEXT,
+ id: "0:1",
+ baseVersion: 1,
+ ops: [
+ { type: "delete", index: 0, length: 6 },
+ { type: "insert", index: 0, text: "Hello", attributes: undefined },
+ ],
+ },
+ ]);
+ });
+
test("liveObject replacing a non-object node of the same id", () => {
const currentItems: NodeMap = new Map([
["root", { type: CrdtType.OBJECT, data: {} }],
@@ -603,6 +669,7 @@ describe("toPlainLson", () => {
["broccoli", "delicious"],
["spinach", "also tasty"],
]),
+ text: new LiveText("Hello"),
});
// What the Plain Lson should look like if the util works
@@ -617,6 +684,11 @@ describe("toPlainLson", () => {
liveblocksType: "LiveMap",
data: { broccoli: "delicious", spinach: "also tasty" },
},
+ text: {
+ liveblocksType: "LiveText",
+ data: [["Hello"]],
+ version: 0,
+ },
},
};
diff --git a/packages/liveblocks-core/src/crdts/__tests__/storageUpdateSource.test.ts b/packages/liveblocks-core/src/crdts/__tests__/storageUpdateSource.test.ts
new file mode 100644
index 00000000000..d0460411fb9
--- /dev/null
+++ b/packages/liveblocks-core/src/crdts/__tests__/storageUpdateSource.test.ts
@@ -0,0 +1,121 @@
+import { describe, expect, test } from "vitest";
+
+import { mergeStorageUpdates } from "../liveblocks-helpers";
+import { LiveObject } from "../LiveObject";
+import { LiveText } from "../LiveText";
+import type { StorageUpdate, UpdateSource } from "../StorageUpdates";
+import { toUpdateSource } from "../StorageUpdates";
+
+function liveObjectUpdate(source: UpdateSource): StorageUpdate {
+ return {
+ type: "LiveObject",
+ node: new LiveObject({ a: 1 }),
+ updates: { a: { type: "update" } },
+ source,
+ };
+}
+
+function liveTextUpdate(source: UpdateSource): StorageUpdate {
+ return {
+ type: "LiveText",
+ node: new LiveText("hello"),
+ version: 1,
+ updates: [{ type: "insert", index: 5, text: "!" }],
+ source,
+ };
+}
+
+describe("mergeStorageUpdates source propagation", () => {
+ test("both local mutation -> merged is local mutation", () => {
+ const merged = mergeStorageUpdates(
+ liveObjectUpdate({ origin: "local", via: "edit" }),
+ liveObjectUpdate({ origin: "local", via: "edit" })
+ );
+ expect(merged.source).toEqual({
+ origin: "local",
+ via: "edit",
+ });
+ });
+
+ test("both remote -> merged is remote", () => {
+ const merged = mergeStorageUpdates(
+ liveTextUpdate({ origin: "remote" }),
+ liveTextUpdate({ origin: "remote" })
+ );
+ expect(merged.source).toEqual({ origin: "remote" });
+ });
+
+ test("mixed local and remote -> merged is remote", () => {
+ const merged = mergeStorageUpdates(
+ liveObjectUpdate({ origin: "local", via: "edit" }),
+ liveObjectUpdate({ origin: "remote" })
+ );
+ expect(merged.source).toEqual({ origin: "remote" });
+ });
+
+ test("mixed remote and local -> merged is remote", () => {
+ const merged = mergeStorageUpdates(
+ liveObjectUpdate({ origin: "remote" }),
+ liveObjectUpdate({ origin: "local", via: "edit" })
+ );
+ expect(merged.source).toEqual({ origin: "remote" });
+ });
+
+ test("mixed local edit and undo -> merged is undo", () => {
+ const merged = mergeStorageUpdates(
+ liveObjectUpdate({ origin: "local", via: "edit" }),
+ liveObjectUpdate({ origin: "local", via: "undo" })
+ );
+ expect(merged.source).toEqual({
+ origin: "local",
+ via: "undo",
+ });
+ });
+
+ test("mixed undo and local edit -> merged is undo", () => {
+ const merged = mergeStorageUpdates(
+ liveObjectUpdate({ origin: "local", via: "undo" }),
+ liveObjectUpdate({ origin: "local", via: "edit" })
+ );
+ expect(merged.source).toEqual({
+ origin: "local",
+ via: "undo",
+ });
+ });
+
+ test("mixed undo and redo -> merged keeps second one", () => {
+ const merged = mergeStorageUpdates(
+ liveObjectUpdate({ origin: "local", via: "undo" }),
+ liveObjectUpdate({ origin: "local", via: "redo" })
+ );
+ expect(merged.source).toEqual({
+ origin: "local",
+ via: "redo",
+ });
+ });
+
+ test("undefined first preserves second source", () => {
+ const merged = mergeStorageUpdates(
+ undefined,
+ liveTextUpdate({ origin: "remote" })
+ );
+ expect(merged.source).toEqual({ origin: "remote" });
+ });
+});
+
+describe("toUpdateSource", () => {
+ test("drops the internal optimistic flag from local sources", () => {
+ for (const via of ["edit", "undo", "redo"] as const) {
+ for (const optimistic of [true, false]) {
+ expect(toUpdateSource({ origin: "local", via, optimistic })).toEqual({
+ origin: "local",
+ via,
+ });
+ }
+ }
+ });
+
+ test("leaves remote sources alone", () => {
+ expect(toUpdateSource({ origin: "remote" })).toEqual({ origin: "remote" });
+ });
+});
diff --git a/packages/liveblocks-core/src/crdts/liveTextOps.ts b/packages/liveblocks-core/src/crdts/liveTextOps.ts
new file mode 100644
index 00000000000..ed0ac481e31
--- /dev/null
+++ b/packages/liveblocks-core/src/crdts/liveTextOps.ts
@@ -0,0 +1,829 @@
+import { freeze } from "../lib/freeze";
+import type { Json, JsonObject } from "../lib/Json";
+import { stableStringify } from "../lib/stringify";
+import type {
+ LiveTextData,
+ TextAttributes,
+ TextOperation,
+} from "../protocol/Op";
+
+export type TextSegment = {
+ text: string;
+ attributes?: TextAttributes;
+};
+
+export function attributesEqual(
+ left: TextAttributes | undefined,
+ right: TextAttributes | undefined
+): boolean {
+ if (left === right) {
+ return true;
+ }
+ if (left === undefined || right === undefined) {
+ return false;
+ }
+
+ const leftKeys = Object.keys(left);
+ const rightKeys = Object.keys(right);
+ if (leftKeys.length !== rightKeys.length) {
+ return false;
+ }
+
+ for (const key of leftKeys) {
+ if (left[key] !== right[key]) {
+ return false;
+ }
+ }
+ return true;
+}
+
+function cloneAttributes(
+ attributes: TextAttributes | undefined
+): TextAttributes | undefined {
+ return attributes === undefined ? undefined : freeze({ ...attributes });
+}
+
+export function normalizeSegments(
+ segments: readonly TextSegment[]
+): TextSegment[] {
+ const normalized: TextSegment[] = [];
+ for (const segment of segments) {
+ if (segment.text.length === 0) {
+ continue;
+ }
+
+ const last = normalized.at(-1);
+ const attributes = cloneAttributes(segment.attributes);
+ if (last !== undefined && attributesEqual(last.attributes, attributes)) {
+ last.text += segment.text;
+ } else {
+ normalized.push({ text: segment.text, attributes });
+ }
+ }
+ return normalized;
+}
+
+export function dataToSegments(data: LiveTextData): TextSegment[] {
+ return normalizeSegments(
+ data.map(([text, attributes]) => ({
+ text,
+ attributes,
+ }))
+ );
+}
+
+export function segmentsToData(segments: readonly TextSegment[]): LiveTextData {
+ return segments.map((segment) =>
+ segment.attributes === undefined
+ ? [segment.text]
+ : [segment.text, { ...segment.attributes }]
+ );
+}
+
+export function textLength(segments: readonly TextSegment[]): number {
+ return segments.reduce((sum, segment) => sum + segment.text.length, 0);
+}
+
+export function splitSegmentsAt(
+ segments: readonly TextSegment[],
+ index: number
+): TextSegment[] {
+ const result: TextSegment[] = [];
+ let offset = 0;
+
+ for (const segment of segments) {
+ const end = offset + segment.text.length;
+ if (index > offset && index < end) {
+ const before = segment.text.slice(0, index - offset);
+ const after = segment.text.slice(index - offset);
+ result.push({ text: before, attributes: segment.attributes });
+ result.push({ text: after, attributes: segment.attributes });
+ } else {
+ result.push({ text: segment.text, attributes: segment.attributes });
+ }
+ offset = end;
+ }
+
+ return result;
+}
+
+export function clipRange(
+ index: number,
+ length: number,
+ contentLength: number
+): { index: number; length: number } {
+ const clippedIndex = Math.max(0, Math.min(index, contentLength));
+ const clippedEnd = Math.max(
+ clippedIndex,
+ Math.min(index + length, contentLength)
+ );
+ return { index: clippedIndex, length: clippedEnd - clippedIndex };
+}
+
+// Some characters (like emojis) are represented by surrogate pairs
+// The first part of the pair is always between 0xD800-0xDBFF
+// The second part is always between 0xDC00 and 0XDFFF
+function isInSurrogatePair(text: string, index: number): boolean {
+ const previous = text.charCodeAt(index - 1);
+ const next = text.charCodeAt(index);
+
+ return (
+ previous >= 0xd800 && previous <= 0xdbff && next >= 0xdc00 && next <= 0xdfff
+ );
+}
+
+/**
+ * Clips an index to the text and, if it falls inside a UTF-16 surrogate pair,
+ * moves it to the start of that code point.
+ */
+export function clipIndexToCodePointBoundary(
+ text: string,
+ index: number
+): number {
+ const clippedIndex = Math.max(0, Math.min(index, text.length));
+ return isInSurrogatePair(text, clippedIndex)
+ ? clippedIndex - 1
+ : clippedIndex;
+}
+
+/**
+ * Clips a range to the text and expands its boundaries when necessary so it
+ * never covers only part of a UTF-16 surrogate pair.
+ */
+export function clipRangeToCodePointBoundaries(
+ text: string,
+ index: number,
+ length: number
+): { index: number; length: number } {
+ const clipped = clipRange(index, length, text.length);
+
+ if (clipped.length === 0) {
+ return {
+ index: clipIndexToCodePointBoundary(text, clipped.index),
+ length: 0,
+ };
+ }
+
+ const clippedEnd = clipped.index + clipped.length;
+ const normalizedIndex = isInSurrogatePair(text, clipped.index)
+ ? clipped.index - 1
+ : clipped.index;
+ const normalizedEnd = isInSurrogatePair(text, clippedEnd)
+ ? clippedEnd + 1
+ : clippedEnd;
+
+ return {
+ index: normalizedIndex,
+ length: normalizedEnd - normalizedIndex,
+ };
+}
+
+export function applyInsert(
+ segments: readonly TextSegment[],
+ index: number,
+ text: string,
+ attributes?: TextAttributes
+): TextSegment[] {
+ if (text.length === 0) {
+ return normalizeSegments(segments);
+ }
+
+ const split = splitSegmentsAt(segments, index);
+ const result: TextSegment[] = [];
+ let offset = 0;
+ let inserted = false;
+
+ for (const segment of split) {
+ if (!inserted && offset === index) {
+ result.push({ text, attributes });
+ inserted = true;
+ }
+ result.push(segment);
+ offset += segment.text.length;
+ }
+
+ if (!inserted) {
+ result.push({ text, attributes });
+ }
+
+ return normalizeSegments(result);
+}
+
+export function extractDeletedSegments(
+ segments: readonly TextSegment[],
+ index: number,
+ length: number
+): TextSegment[] {
+ const split = splitSegmentsAt(
+ splitSegmentsAt(segments, index),
+ index + length
+ );
+ const deleted: TextSegment[] = [];
+ let offset = 0;
+
+ for (const segment of split) {
+ const end = offset + segment.text.length;
+ if (offset >= index && end <= index + length) {
+ deleted.push({
+ text: segment.text,
+ attributes: segment.attributes,
+ });
+ }
+ offset = end;
+ }
+
+ return normalizeSegments(deleted);
+}
+
+export function applyDelete(
+ segments: readonly TextSegment[],
+ index: number,
+ length: number
+): {
+ segments: TextSegment[];
+ deletedText: string;
+ deletedSegments: TextSegment[];
+} {
+ const deletedSegments = extractDeletedSegments(segments, index, length);
+ const split = splitSegmentsAt(
+ splitSegmentsAt(segments, index),
+ index + length
+ );
+ const result: TextSegment[] = [];
+ let offset = 0;
+ let deletedText = "";
+
+ for (const segment of split) {
+ const end = offset + segment.text.length;
+ if (offset >= index && end <= index + length) {
+ deletedText += segment.text;
+ } else {
+ result.push(segment);
+ }
+ offset = end;
+ }
+
+ return {
+ segments: normalizeSegments(result),
+ deletedText,
+ deletedSegments,
+ };
+}
+
+export function applyFormat(
+ segments: readonly TextSegment[],
+ index: number,
+ length: number,
+ attributes: JsonObject
+): TextSegment[] {
+ const split = splitSegmentsAt(
+ splitSegmentsAt(segments, index),
+ index + length
+ );
+ const result: TextSegment[] = [];
+ let offset = 0;
+
+ for (const segment of split) {
+ const end = offset + segment.text.length;
+ if (offset >= index && end <= index + length) {
+ const nextAttributes: JsonObject = {
+ ...(segment.attributes ?? {}),
+ };
+ for (const [key, value] of Object.entries(attributes)) {
+ if (value === null) {
+ delete nextAttributes[key];
+ } else {
+ nextAttributes[key] = value;
+ }
+ }
+ result.push({
+ text: segment.text,
+ attributes:
+ Object.keys(nextAttributes).length === 0
+ ? undefined
+ : freeze(nextAttributes),
+ });
+ } else {
+ result.push(segment);
+ }
+ offset = end;
+ }
+
+ return normalizeSegments(result);
+}
+
+export function formatReverseOperations(
+ segments: readonly TextSegment[],
+ index: number,
+ length: number,
+ patch: JsonObject
+): TextOperation[] {
+ const split = splitSegmentsAt(
+ splitSegmentsAt(segments, index),
+ index + length
+ );
+ const result: TextOperation[] = [];
+ let offset = 0;
+
+ for (const segment of split) {
+ const end = offset + segment.text.length;
+ if (offset >= index && end <= index + length) {
+ const attributes: Record = {};
+ const current = segment.attributes ?? {};
+ for (const key of Object.keys(patch)) {
+ // Own keys only: attribute names can collide with Object.prototype
+ // members like "toString"
+ const value = Object.hasOwn(current, key) ? current[key] : undefined;
+ attributes[key] = value ?? null;
+ }
+ result.push({
+ type: "format",
+ index: offset,
+ length: segment.text.length,
+ attributes,
+ });
+ }
+ offset = end;
+ }
+
+ return result;
+}
+
+function mapIndexThroughOperation(index: number, op: TextOperation): number {
+ if (op.type === "insert") {
+ return op.index <= index ? index + op.text.length : index;
+ } else if (op.type === "delete") {
+ if (op.index >= index) {
+ return index;
+ }
+ return Math.max(op.index, index - op.length);
+ } else {
+ return index;
+ }
+}
+
+export function mapTextIndexThroughOperations(
+ index: number,
+ ops: readonly TextOperation[]
+): number {
+ let mapped = index;
+ for (const op of ops) {
+ mapped = mapIndexThroughOperation(mapped, op);
+ }
+ return mapped;
+}
+
+/**
+ * Inverse of {@link mapIndexThroughOperation}: given an index in the
+ * document *after* `op` was applied, return an equivalent index in the
+ * document *before* it was applied.
+ *
+ * At ambiguous boundaries this picks the conventional inverse of
+ * {@link mapIndexThroughOperation}:
+ * - For an insert, positions inside the inserted range collapse to the
+ * left edge (the original insertion point).
+ * - For a delete, a position at the deletion site is mapped to the right
+ * edge of where the deleted range used to be.
+ */
+function inverseMapIndexThroughOperation(
+ index: number,
+ op: TextOperation
+): number {
+ if (op.type === "insert") {
+ if (index <= op.index) {
+ return index;
+ }
+ return Math.max(op.index, index - op.text.length);
+ } else if (op.type === "delete") {
+ return op.index <= index ? index + op.length : index;
+ } else {
+ return index;
+ }
+}
+
+/**
+ * Inverse of {@link mapTextIndexThroughOperations}: given an index in the
+ * document *after* `ops` were applied in order, return an equivalent index
+ * in the document *before* any of them were applied. Inverts the ops in
+ * reverse order.
+ */
+export function inverseMapTextIndexThroughOperations(
+ index: number,
+ ops: readonly TextOperation[]
+): number {
+ let mapped = index;
+ for (let i = ops.length - 1; i >= 0; i--) {
+ mapped = inverseMapIndexThroughOperation(mapped, ops[i]);
+ }
+ return mapped;
+}
+
+// -----------------------------------------------------------------------------
+// Operational transform
+// -----------------------------------------------------------------------------
+
+/**
+ * The position of the ops being transformed relative to the ops they are
+ * transformed over, in the final (server-serialized) timeline:
+ *
+ * - "after": the transformed ops will be ordered after the `over` ops. Used
+ * when rebasing a not-yet-accepted op over already-accepted ops. On
+ * same-index insert ties, the transformed op shifts right (the earlier op
+ * stays left), and conflicting format attributes are kept (they will
+ * overwrite, since the op applies later).
+ * - "before": the transformed ops were ordered before the `over` ops. Used
+ * when applying an accepted remote op on top of locally-pending ops. On
+ * same-index insert ties, the transformed op stays left, and conflicting
+ * format attributes are dropped on overlapping ranges (the later `over` op
+ * wins).
+ */
+export type TransformOrder = "before" | "after";
+
+function oppositeOrder(order: TransformOrder): TransformOrder {
+ return order === "before" ? "after" : "before";
+}
+
+function mapIndexOverDelete(
+ index: number,
+ deleteIndex: number,
+ deleteLength: number
+): number {
+ if (deleteIndex >= index) {
+ return index;
+ }
+ return Math.max(deleteIndex, index - deleteLength);
+}
+
+/**
+ * Transform a single insert op over a single op. Both ops must be expressed
+ * against the same document state.
+ */
+function transformInsert(
+ op: TextOperation & { type: "insert" },
+ over: TextOperation,
+ order: TransformOrder
+): TextOperation[] {
+ if (over.type === "insert") {
+ const shifts =
+ over.index < op.index || (over.index === op.index && order === "after");
+ return [shifts ? { ...op, index: op.index + over.text.length } : { ...op }];
+ } else if (over.type === "delete") {
+ return [
+ { ...op, index: mapIndexOverDelete(op.index, over.index, over.length) },
+ ];
+ } else {
+ return [{ ...op }];
+ }
+}
+
+/**
+ * Transform a single delete op over a single op. A delete spanning a
+ * concurrent insert is split into two deletes so the inserted text survives.
+ * The returned ops use sequential application semantics (each op applies to
+ * the result of the previous one).
+ */
+function transformDelete(
+ op: TextOperation & { type: "delete" },
+ over: TextOperation
+): TextOperation[] {
+ const start = op.index;
+ const end = op.index + op.length;
+
+ if (over.type === "insert") {
+ const at = over.index;
+ const len = over.text.length;
+ if (at <= start) {
+ return [{ ...op, index: start + len }];
+ }
+ if (at >= end) {
+ return [{ ...op }];
+ }
+ // The insert lands strictly inside the deleted range: split the delete so
+ // the concurrently inserted text is preserved. After the first piece is
+ // applied, the inserted text sits at `start`, and the remainder of the
+ // original range sits right after it.
+ return [
+ { type: "delete", index: start, length: at - start },
+ { type: "delete", index: start + len, length: end - at },
+ ];
+ } else if (over.type === "delete") {
+ const newStart = mapIndexOverDelete(start, over.index, over.length);
+ const newEnd = mapIndexOverDelete(end, over.index, over.length);
+ return newEnd - newStart > 0
+ ? [{ type: "delete", index: newStart, length: newEnd - newStart }]
+ : [];
+ } else {
+ return [{ ...op }];
+ }
+}
+
+/**
+ * Transform a single format op over a single op. Like deletes, a format
+ * spanning a concurrent insert is split so the inserted text is not formatted.
+ * For overlapping concurrent formats, the op that is ordered later in the
+ * final timeline wins conflicting attribute keys: when `order` is "before",
+ * the transformed op drops the keys that `over` also sets on the overlapping
+ * range.
+ */
+function transformFormat(
+ op: TextOperation & { type: "format" },
+ over: TextOperation,
+ order: TransformOrder
+): TextOperation[] {
+ const start = op.index;
+ const end = op.index + op.length;
+
+ if (over.type === "insert") {
+ const at = over.index;
+ const len = over.text.length;
+ if (at <= start) {
+ return [{ ...op, index: start + len }];
+ }
+ if (at >= end) {
+ return [{ ...op }];
+ }
+ return [
+ {
+ type: "format",
+ index: start,
+ length: at - start,
+ attributes: op.attributes,
+ },
+ {
+ type: "format",
+ index: at + len,
+ length: end - at,
+ attributes: op.attributes,
+ },
+ ];
+ } else if (over.type === "delete") {
+ const newStart = mapIndexOverDelete(start, over.index, over.length);
+ const newEnd = mapIndexOverDelete(end, over.index, over.length);
+ return newEnd - newStart > 0
+ ? [
+ {
+ type: "format",
+ index: newStart,
+ length: newEnd - newStart,
+ attributes: op.attributes,
+ },
+ ]
+ : [];
+ } else {
+ if (order === "after") {
+ // This op applies later and naturally overwrites; nothing to do.
+ return [{ ...op }];
+ }
+
+ const overlapStart = Math.max(start, over.index);
+ const overlapEnd = Math.min(end, over.index + over.length);
+ if (overlapStart >= overlapEnd) {
+ return [{ ...op }];
+ }
+
+ const hasConflict = Object.keys(op.attributes).some((key) =>
+ Object.hasOwn(over.attributes, key)
+ );
+ if (!hasConflict) {
+ return [{ ...op }];
+ }
+
+ const reduced: JsonObject = {};
+ for (const [key, value] of Object.entries(op.attributes)) {
+ if (!Object.hasOwn(over.attributes, key)) {
+ reduced[key] = value;
+ }
+ }
+
+ const pieces: TextOperation[] = [];
+ if (start < overlapStart) {
+ pieces.push({
+ type: "format",
+ index: start,
+ length: overlapStart - start,
+ attributes: op.attributes,
+ });
+ }
+ if (Object.keys(reduced).length > 0) {
+ pieces.push({
+ type: "format",
+ index: overlapStart,
+ length: overlapEnd - overlapStart,
+ attributes: reduced,
+ });
+ }
+ if (overlapEnd < end) {
+ pieces.push({
+ type: "format",
+ index: overlapEnd,
+ length: end - overlapEnd,
+ attributes: op.attributes,
+ });
+ }
+ return pieces;
+ }
+}
+
+function transformSingle(
+ op: TextOperation,
+ over: TextOperation,
+ order: TransformOrder
+): TextOperation[] {
+ switch (op.type) {
+ case "insert":
+ return transformInsert(op, over, order);
+ case "delete":
+ return transformDelete(op, over);
+ case "format":
+ return transformFormat(op, over, order);
+ }
+}
+
+/**
+ * Transform op sequence A against op sequence B, where both sequences are
+ * expressed against the same base document state and each sequence uses
+ * sequential application semantics internally.
+ *
+ * Returns [A', B'] such that:
+ * - A' is A transformed to apply after B (i.e. against base ⊕ B), and
+ * - B' is B transformed to apply after A (i.e. against base ⊕ A),
+ * and base ⊕ A ⊕ B' === base ⊕ B ⊕ A' (TP1).
+ *
+ * `order` is A's position relative to B in the final timeline.
+ */
+export function transformTextOperationsX(
+ a: readonly TextOperation[],
+ b: readonly TextOperation[],
+ order: TransformOrder
+): [TextOperation[], TextOperation[]] {
+ if (a.length === 0 || b.length === 0) {
+ return [[...a], [...b]];
+ }
+
+ if (a.length === 1 && b.length === 1) {
+ return [
+ transformSingle(a[0], b[0], order),
+ transformSingle(b[0], a[0], oppositeOrder(order)),
+ ];
+ }
+
+ if (a.length > 1) {
+ const [headA1, b1] = transformTextOperationsX([a[0]], b, order);
+ const [restA1, b2] = transformTextOperationsX(a.slice(1), b1, order);
+ return [[...headA1, ...restA1], b2];
+ }
+
+ const [a1, headB1] = transformTextOperationsX(a, [b[0]], order);
+ const [a2, restB1] = transformTextOperationsX(a1, b.slice(1), order);
+ return [a2, [...headB1, ...restB1]];
+}
+
+/**
+ * Transform `ops` over `over` (see {@link transformTextOperationsX}),
+ * returning only the transformed `ops`.
+ */
+export function transformTextOperations(
+ ops: readonly TextOperation[],
+ over: readonly TextOperation[],
+ order: TransformOrder
+): TextOperation[] {
+ return transformTextOperationsX(ops, over, order)[0];
+}
+
+/**
+ * Structural equality of two operation sequences (order-insensitive for
+ * attribute keys).
+ */
+export function textOperationsEqual(
+ a: readonly TextOperation[],
+ b: readonly TextOperation[]
+): boolean {
+ return a === b || stableStringify(a) === stableStringify(b);
+}
+
+export function applyTextOperationsToSegments(
+ segments: readonly TextSegment[],
+ ops: readonly TextOperation[]
+): TextSegment[] {
+ let next = [...segments];
+
+ for (const op of ops) {
+ if (op.type === "insert") {
+ const index = Math.max(0, Math.min(op.index, textLength(next)));
+ next = applyInsert(next, index, op.text, op.attributes);
+ } else if (op.type === "delete") {
+ const index = Math.max(0, Math.min(op.index, textLength(next)));
+ const clipped = clipRange(index, op.length, textLength(next));
+ next = applyDelete(next, clipped.index, clipped.length).segments;
+ } else {
+ const index = Math.max(0, Math.min(op.index, textLength(next)));
+ const clipped = clipRange(index, op.length, textLength(next));
+ next = applyFormat(next, clipped.index, clipped.length, op.attributes);
+ }
+ }
+
+ return next;
+}
+
+export function applyLiveTextOperations(
+ data: LiveTextData,
+ ops: readonly TextOperation[]
+): LiveTextData {
+ return segmentsToData(
+ applyTextOperationsToSegments(dataToSegments(data), ops)
+ );
+}
+
+/**
+ * Canonicalizes operations against the document state they are applied to so
+ * no operation boundary can split a UTF-16 surrogate pair.
+ *
+ * Operations are normalized sequentially because each one can change the
+ * document seen by the operations that follow it.
+ */
+export function normalizeLiveTextOperations(
+ data: LiveTextData,
+ operations: readonly TextOperation[]
+): TextOperation[] {
+ let shadow = dataToSegments(data);
+ const normalized: TextOperation[] = [];
+
+ for (const operation of operations) {
+ const text = shadow.map((segment) => segment.text).join("");
+ let normalizedOperation: TextOperation;
+
+ if (operation.type === "insert") {
+ normalizedOperation = {
+ ...operation,
+ index: clipIndexToCodePointBoundary(text, operation.index),
+ };
+ } else {
+ const range = clipRangeToCodePointBoundaries(
+ text,
+ operation.index,
+ operation.length
+ );
+ normalizedOperation = {
+ ...operation,
+ index: range.index,
+ length: range.length,
+ };
+ }
+
+ normalized.push(normalizedOperation);
+ shadow = applyTextOperationsToSegments(shadow, [normalizedOperation]);
+ }
+
+ return normalized;
+}
+
+export function invertTextOperations(
+ segments: readonly TextSegment[],
+ ops: readonly TextOperation[]
+): TextOperation[] {
+ let shadow = [...segments];
+ const reverse: TextOperation[] = [];
+
+ for (const op of ops) {
+ if (op.type === "insert") {
+ shadow = applyInsert(shadow, op.index, op.text, op.attributes);
+ reverse.unshift({
+ type: "delete",
+ index: op.index,
+ length: op.text.length,
+ });
+ } else if (op.type === "delete") {
+ const deletedSegments = extractDeletedSegments(
+ shadow,
+ op.index,
+ op.length
+ );
+ shadow = applyDelete(shadow, op.index, op.length).segments;
+ const inserts: TextOperation[] = [];
+ let insertIndex = op.index;
+ for (const segment of deletedSegments) {
+ inserts.push({
+ type: "insert",
+ index: insertIndex,
+ text: segment.text,
+ attributes: segment.attributes,
+ });
+ insertIndex += segment.text.length;
+ }
+ for (let index = inserts.length - 1; index >= 0; index--) {
+ reverse.unshift(inserts[index]);
+ }
+ } else {
+ const inverse = formatReverseOperations(
+ shadow,
+ op.index,
+ op.length,
+ op.attributes
+ );
+ shadow = applyFormat(shadow, op.index, op.length, op.attributes);
+ reverse.unshift(...inverse.reverse());
+ }
+ }
+
+ return reverse;
+}
diff --git a/packages/liveblocks-core/src/crdts/liveblocks-helpers.ts b/packages/liveblocks-core/src/crdts/liveblocks-helpers.ts
index 43be9f4a4a5..1cc5f763972 100644
--- a/packages/liveblocks-core/src/crdts/liveblocks-helpers.ts
+++ b/packages/liveblocks-core/src/crdts/liveblocks-helpers.ts
@@ -2,7 +2,7 @@ import { assertNever, nn } from "../lib/assert";
import type { Json } from "../lib/Json";
import { stringifyOrLog as stringify } from "../lib/stringify";
import { deepClone, entries } from "../lib/utils";
-import type { CreateOp, Op } from "../protocol/Op";
+import type { CreateOp, LiveTextData, Op, TextOperation } from "../protocol/Op";
import { OpCode } from "../protocol/Op";
import type {
NodeMap,
@@ -17,6 +17,7 @@ import {
isMapStorageNode,
isObjectStorageNode,
isRegisterStorageNode,
+ isTextStorageNode,
} from "../protocol/StorageNode";
import type { ParentToChildNodeMap } from "../types/NodeMap";
import { createManagedPool, type ManagedPool } from "./AbstractCrdt";
@@ -25,8 +26,10 @@ import { LiveList, type LiveListUpdates } from "./LiveList";
import { LiveMap, type LiveMapUpdates } from "./LiveMap";
import { LiveObject, type LiveObjectUpdates } from "./LiveObject";
import { LiveRegister } from "./LiveRegister";
+import { LiveText, type LiveTextUpdates } from "./LiveText";
import type { LiveNode, LiveStructure, Lson, LsonObject } from "./Lson";
-import type { StorageUpdate } from "./StorageUpdates";
+import type { StorageUpdate, UpdateSource } from "./StorageUpdates";
+import { LOCAL_EDIT, REMOTE } from "./StorageUpdates";
export function creationOpToLiveNode(op: CreateOp): LiveNode {
return lsonToLiveNode(creationOpToLson(op));
@@ -44,6 +47,8 @@ export function creationOpToLson(op: CreateOp): Lson {
return new LiveMap();
case OpCode.CREATE_LIST:
return new LiveList([]);
+ case OpCode.CREATE_TEXT:
+ return new LiveText(op.data, op.version);
default:
return assertNever(op, "Unknown creation Op");
}
@@ -99,6 +104,8 @@ export function deserialize(
return LiveMap._deserialize(node, parentToChildren, pool);
} else if (isRegisterStorageNode(node)) {
return LiveRegister._deserialize(node, parentToChildren, pool);
+ } else if (isTextStorageNode(node)) {
+ return LiveText._deserialize(node, parentToChildren, pool);
} else if (isFileStorageNode(node)) {
return LiveFile._deserialize(node, parentToChildren, pool);
} else {
@@ -119,6 +126,8 @@ export function deserializeToLson(
return LiveMap._deserialize(node, parentToChildren, pool);
} else if (isRegisterStorageNode(node)) {
return node[1].data;
+ } else if (isTextStorageNode(node)) {
+ return LiveText._deserialize(node, parentToChildren, pool);
} else if (isFileStorageNode(node)) {
return LiveFile._deserialize(node, parentToChildren, pool);
} else {
@@ -131,6 +140,7 @@ export function isLiveStructure(value: unknown): value is LiveStructure {
isLiveList(value) ||
isLiveMap(value) ||
isLiveObject(value) ||
+ isLiveText(value) ||
isLiveFile(value)
);
}
@@ -151,6 +161,10 @@ export function isLiveObject(value: unknown): value is LiveObject {
return value instanceof LiveObject;
}
+export function isLiveText(value: unknown): value is LiveText {
+ return value instanceof LiveText;
+}
+
export function isLiveFile(value: unknown): value is LiveFile {
return value instanceof LiveFile;
}
@@ -174,6 +188,7 @@ export function liveNodeToLson(obj: LiveNode): Lson {
obj instanceof LiveList ||
obj instanceof LiveMap ||
obj instanceof LiveObject ||
+ obj instanceof LiveText ||
obj instanceof LiveFile
) {
return obj;
@@ -187,6 +202,7 @@ export function lsonToLiveNode(value: Lson): LiveNode {
value instanceof LiveObject ||
value instanceof LiveMap ||
value instanceof LiveList ||
+ value instanceof LiveText ||
value instanceof LiveFile
) {
return value;
@@ -315,7 +331,47 @@ export function isJsonEq(a: Json | undefined, b: Json | undefined): boolean {
* - UPDATE_OBJECT for "root" (data changed: a: 1 → 99)
* - CREATE_OBJECT for "node2" (added)
*/
-export function diffNodeMap(prev: NodeMap, next: NodeMap): Op[] {
+export type DiffNodeMapOptions = {
+ /**
+ * Whether existing LiveText nodes should be reconciled through UPDATE_TEXT
+ * operations. Authoritative storage loads leave this disabled and resync the
+ * nodes directly; user-initiated restores enable it so the change advances
+ * the current LiveText timeline.
+ */
+ includeLiveTextUpdates?: boolean;
+};
+
+function liveTextDataToReplaceOps(
+ before: LiveTextData,
+ after: LiveTextData
+): TextOperation[] {
+ const ops: TextOperation[] = [];
+ const beforeLength = before.reduce(
+ (length, [text]) => length + text.length,
+ 0
+ );
+
+ if (beforeLength > 0) {
+ ops.push({ type: "delete", index: 0, length: beforeLength });
+ }
+
+ let index = 0;
+ for (const [text, attributes] of after) {
+ if (text.length === 0) {
+ continue;
+ }
+ ops.push({ type: "insert", index, text, attributes });
+ index += text.length;
+ }
+
+ return ops;
+}
+
+export function diffNodeMap(
+ prev: NodeMap,
+ next: NodeMap,
+ options?: DiffNodeMapOptions
+): Op[] {
const ops: Op[] = [];
const idsToRecreate = new Set();
@@ -438,6 +494,16 @@ export function diffNodeMap(prev: NodeMap, next: NodeMap): Op[] {
parentKey: crdt.parentKey,
});
break;
+ case CrdtType.TEXT:
+ ops.push({
+ type: OpCode.CREATE_TEXT,
+ id,
+ parentId: crdt.parentId,
+ parentKey: crdt.parentKey,
+ data: crdt.data,
+ version: crdt.version,
+ });
+ break;
}
}
@@ -473,6 +539,27 @@ export function diffNodeMap(prev: NodeMap, next: NodeMap): Op[] {
}
}
}
+ // NOTE: CrdtType.TEXT nodes that exist on both sides are deliberately
+ // NOT diffed into UPDATE_TEXT ops here. The UPDATE_TEXT op path
+ // carries pending-op transformation semantics that don't apply to
+ // authoritative snapshots; LiveText nodes are reconciled against the
+ // snapshot directly (see LiveText._resyncText, called from the room).
+ if (
+ options?.includeLiveTextUpdates === true &&
+ crdt.type === CrdtType.TEXT &&
+ currentCrdt.type === CrdtType.TEXT &&
+ !isJsonEq(crdt.data, currentCrdt.data)
+ ) {
+ ops.push({
+ type: OpCode.UPDATE_TEXT,
+ id,
+ // A restore is a new edit in the current timeline. The version from
+ // the historic snapshot describes its old timeline and must not move
+ // this node's current version backwards.
+ baseVersion: currentCrdt.version,
+ ops: liveTextDataToReplaceOps(currentCrdt.data, crdt.data),
+ });
+ }
if (crdt.parentKey !== currentCrdt.parentKey) {
ops.push({
type: OpCode.SET_PARENT_KEY,
@@ -481,6 +568,7 @@ export function diffNodeMap(prev: NodeMap, next: NodeMap): Op[] {
});
}
} else {
+ // new Crdt
emitCreate(id, crdt);
}
});
@@ -527,6 +615,33 @@ function mergeListStorageUpdates(
};
}
+function mergeTextStorageUpdates(
+ first: LiveTextUpdates,
+ second: LiveTextUpdates
+): LiveTextUpdates {
+ return {
+ ...second,
+ updates: first.updates.concat(second.updates),
+ };
+}
+
+function mergeUpdateSources(
+ first: UpdateSource,
+ second: UpdateSource
+): UpdateSource {
+ // Any remote change in the mix makes the merged update remote: it no longer
+ // describes a change this client made on its own.
+ if (first.origin === "remote" || second.origin === "remote") {
+ return REMOTE;
+ }
+
+ // Undo/redo replays are more specific than plain edits, so they win. When
+ // both are replays, the later one describes the merged update best.
+ if (second.via !== "edit") return second;
+ if (first.via !== "edit") return first;
+ return LOCAL_EDIT;
+}
+
export function mergeStorageUpdates(
first: StorageUpdate | undefined,
second: StorageUpdate
@@ -535,15 +650,18 @@ export function mergeStorageUpdates(
return second;
}
+ const source = mergeUpdateSources(first.source, second.source);
+
if (first.type === "LiveObject" && second.type === "LiveObject") {
- return mergeObjectStorageUpdates(first, second);
+ return { ...mergeObjectStorageUpdates(first, second), source };
} else if (first.type === "LiveMap" && second.type === "LiveMap") {
- return mergeMapStorageUpdates(first, second);
+ return { ...mergeMapStorageUpdates(first, second), source };
} else if (first.type === "LiveList" && second.type === "LiveList") {
- return mergeListStorageUpdates(first, second);
+ return { ...mergeListStorageUpdates(first, second), source };
+ } else if (first.type === "LiveText" && second.type === "LiveText") {
+ return { ...mergeTextStorageUpdates(first, second), source };
} else {
/* Mismatching merge types. Throw an error here? */
+ return { ...second, source };
}
-
- return second;
}
diff --git a/packages/liveblocks-core/src/crdts/utils.ts b/packages/liveblocks-core/src/crdts/utils.ts
index e08916d4de6..0b5bc159d4c 100644
--- a/packages/liveblocks-core/src/crdts/utils.ts
+++ b/packages/liveblocks-core/src/crdts/utils.ts
@@ -3,6 +3,7 @@ import { LiveFile } from "./LiveFile";
import { LiveList } from "./LiveList";
import { LiveMap } from "./LiveMap";
import { LiveObject } from "./LiveObject";
+import { LiveText } from "./LiveText";
import type { Lson } from "./Lson";
/**
@@ -30,6 +31,12 @@ export function toPlainLson(lson: Lson): PlainLson {
liveblocksType: "LiveList",
data: [...lson].map((item) => toPlainLson(item)),
};
+ } else if (lson instanceof LiveText) {
+ return {
+ liveblocksType: "LiveText",
+ data: lson.toJSON(),
+ version: lson.version,
+ };
} else if (lson instanceof LiveFile) {
return {
liveblocksType: "LiveFile",
diff --git a/packages/liveblocks-core/src/index.ts b/packages/liveblocks-core/src/index.ts
index 02e736659e5..ce3c54d449e 100644
--- a/packages/liveblocks-core/src/index.ts
+++ b/packages/liveblocks-core/src/index.ts
@@ -75,6 +75,7 @@ export {
export type {
CreateManagedPoolOptions,
ManagedPool,
+ PrivateLiveNodeApi,
} from "./crdts/AbstractCrdt";
export { createManagedPool } from "./crdts/AbstractCrdt";
export { cloneLson, isLiveNode } from "./crdts/liveblocks-helpers";
@@ -87,6 +88,22 @@ export {
export { LiveList } from "./crdts/LiveList";
export { LiveMap } from "./crdts/LiveMap";
export { LiveObject } from "./crdts/LiveObject";
+export type {
+ LiveTextAttributes,
+ LiveTextAttributesPatch,
+ LiveTextChange,
+ LiveTextData,
+ LiveTextOperation,
+ LiveTextSegment,
+ LiveTextUpdates,
+ PrivateLiveTextApi,
+} from "./crdts/LiveText";
+export { LiveText } from "./crdts/LiveText";
+export {
+ applyLiveTextOperations,
+ normalizeLiveTextOperations,
+ transformTextOperations,
+} from "./crdts/liveTextOps";
export type {
LiveNode,
LiveStructure,
@@ -99,7 +116,9 @@ export type {
LiveListUpdate,
LiveMapUpdate,
LiveObjectUpdate,
+ LiveTextUpdate,
StorageUpdate,
+ UpdateSource,
} from "./crdts/StorageUpdates";
export { toPlainLson } from "./crdts/utils";
export type {
@@ -315,6 +334,7 @@ export type {
CreateObjectOp,
CreateOp,
CreateRegisterOp,
+ CreateTextOp,
DeleteCrdtOp,
DeleteObjectKeyOp,
HasOpId,
@@ -322,7 +342,10 @@ export type {
Op,
ServerWireOp,
SetParentKeyOp,
+ TextAttributes,
+ TextOperation,
UpdateObjectOp,
+ UpdateTextOp,
} from "./protocol/Op";
export { OpCode } from "./protocol/Op";
export type {
@@ -364,6 +387,7 @@ export type {
CompactObjectNode,
CompactRegisterNode,
CompactRootNode,
+ CompactTextNode,
FileStorageNode,
ListStorageNode,
MapStorageNode,
@@ -380,7 +404,9 @@ export type {
SerializedObject,
SerializedRegister,
SerializedRootObject,
+ SerializedText,
StorageNode,
+ TextStorageNode,
} from "./protocol/StorageNode";
export {
compactNodesToNodeStream,
@@ -391,6 +417,7 @@ export {
isObjectStorageNode,
isRegisterStorageNode,
isRootStorageNode,
+ isTextStorageNode,
nodeStreamToCompactNodes,
} from "./protocol/StorageNode";
export type {
@@ -468,6 +495,7 @@ export type {
PlainLsonList,
PlainLsonMap,
PlainLsonObject,
+ PlainLsonText,
} from "./types/PlainLson";
export type { User } from "./types/User";
export { detectDupes };
diff --git a/packages/liveblocks-core/src/protocol/Op.ts b/packages/liveblocks-core/src/protocol/Op.ts
index 5547ecc262e..fe8c7425ba9 100644
--- a/packages/liveblocks-core/src/protocol/Op.ts
+++ b/packages/liveblocks-core/src/protocol/Op.ts
@@ -13,7 +13,8 @@ export const OpCode = Object.freeze({
DELETE_OBJECT_KEY: 6,
CREATE_MAP: 7,
CREATE_REGISTER: 8,
- // TODO: 9 and 10 are used by LiveText, wait until it's merged.
+ CREATE_TEXT: 9,
+ UPDATE_TEXT: 10,
CREATE_FILE: 11,
});
@@ -27,9 +28,53 @@ export namespace OpCode {
export type DELETE_OBJECT_KEY = typeof OpCode.DELETE_OBJECT_KEY;
export type CREATE_MAP = typeof OpCode.CREATE_MAP;
export type CREATE_REGISTER = typeof OpCode.CREATE_REGISTER;
+ export type CREATE_TEXT = typeof OpCode.CREATE_TEXT;
+ export type UPDATE_TEXT = typeof OpCode.UPDATE_TEXT;
export type CREATE_FILE = typeof OpCode.CREATE_FILE;
}
+export type TextAttributes = JsonObject;
+
+/**
+ * A single segment in a {@link LiveTextData} document.
+ *
+ * @example
+ * ["Hello world"]
+ * ["Hello ", { bold: true }]
+ */
+export type LiveTextSegment =
+ | [text: string]
+ | [text: string, attributes: TextAttributes];
+
+/**
+ * Serialized form of a {@link LiveText} document: an ordered list of text
+ * segments with optional inline attributes.
+ *
+ * @example
+ * [["Hello world"]]
+ * [["Hello ", { bold: true }], ["world"]]
+ */
+export type LiveTextData = LiveTextSegment[];
+
+export type TextOperation =
+ | {
+ type: "insert";
+ index: number;
+ text: string;
+ attributes?: TextAttributes;
+ }
+ | {
+ type: "delete";
+ index: number;
+ length: number;
+ }
+ | {
+ type: "format";
+ index: number;
+ length: number;
+ attributes: JsonObject;
+ };
+
/**
* These operations are the payload for {@link UpdateStorageServerMsg} messages
* only.
@@ -37,6 +82,7 @@ export namespace OpCode {
export type Op =
| CreateOp
| UpdateObjectOp
+ | UpdateTextOp
| DeleteCrdtOp
| SetParentKeyOp // Only for lists!
| DeleteObjectKeyOp;
@@ -46,6 +92,7 @@ export type CreateOp =
| CreateRegisterOp
| CreateMapOp
| CreateListOp
+ | CreateTextOp
| CreateFileOp;
export type UpdateObjectOp = {
@@ -97,6 +144,18 @@ export type CreateRegisterOp = {
readonly deletedId?: string;
};
+export type CreateTextOp = {
+ readonly opId?: string;
+ readonly id: string;
+ readonly type: OpCode.CREATE_TEXT;
+ readonly parentId: string;
+ readonly parentKey: string;
+ readonly data: LiveTextData;
+ readonly version: number;
+ readonly intent?: "set" | "push";
+ readonly deletedId?: string;
+};
+
export type CreateFileOp = {
readonly opId?: string;
readonly id: string;
@@ -108,6 +167,15 @@ export type CreateFileOp = {
readonly deletedId?: string;
};
+export type UpdateTextOp = {
+ readonly opId?: string;
+ readonly id: string;
+ readonly type: OpCode.UPDATE_TEXT;
+ readonly baseVersion: number;
+ readonly version?: number;
+ readonly ops: TextOperation[];
+};
+
export type DeleteCrdtOp = {
readonly opId?: string;
readonly id: string;
@@ -137,7 +205,8 @@ export function isCreateOp(op: O): op is O & CreateOp {
op.type === OpCode.CREATE_REGISTER ||
op.type === OpCode.CREATE_FILE ||
op.type === OpCode.CREATE_MAP ||
- op.type === OpCode.CREATE_LIST
+ op.type === OpCode.CREATE_LIST ||
+ op.type === OpCode.CREATE_TEXT
);
}
diff --git a/packages/liveblocks-core/src/protocol/StorageNode.ts b/packages/liveblocks-core/src/protocol/StorageNode.ts
index 0b9c6bfaaca..f3dd48e5d58 100644
--- a/packages/liveblocks-core/src/protocol/StorageNode.ts
+++ b/packages/liveblocks-core/src/protocol/StorageNode.ts
@@ -1,4 +1,5 @@
import type { Json, JsonObject } from "../lib/Json";
+import type { LiveTextData } from "./Op";
export type IdTuple = [id: string, value: T];
@@ -8,7 +9,7 @@ export const CrdtType = Object.freeze({
LIST: 1,
MAP: 2,
REGISTER: 3,
- // TODO: 4 is used by LiveText, wait until it's merged.
+ TEXT: 4,
FILE: 5,
});
@@ -17,6 +18,7 @@ export namespace CrdtType {
export type LIST = typeof CrdtType.LIST;
export type MAP = typeof CrdtType.MAP;
export type REGISTER = typeof CrdtType.REGISTER;
+ export type TEXT = typeof CrdtType.TEXT;
export type FILE = typeof CrdtType.FILE;
}
@@ -27,6 +29,7 @@ export type SerializedChild =
| SerializedList
| SerializedMap
| SerializedRegister
+ | SerializedText
| SerializedFile;
export type LiveFileData = {
@@ -71,6 +74,14 @@ export type SerializedRegister = {
readonly data: Json;
};
+export type SerializedText = {
+ readonly type: CrdtType.TEXT;
+ readonly parentId: string;
+ readonly parentKey: string;
+ readonly data: LiveTextData;
+ readonly version: number;
+};
+
export type SerializedFile = {
readonly type: CrdtType.FILE;
readonly parentId: string;
@@ -85,6 +96,7 @@ export type ChildStorageNode =
| ListStorageNode
| MapStorageNode
| RegisterStorageNode
+ | TextStorageNode
| FileStorageNode;
export type RootStorageNode = [id: "root", value: SerializedRootObject];
@@ -92,6 +104,7 @@ export type ObjectStorageNode = [id: string, value: SerializedObject];
export type ListStorageNode = [id: string, value: SerializedList];
export type MapStorageNode = [id: string, value: SerializedMap];
export type RegisterStorageNode = [id: string, value: SerializedRegister];
+export type TextStorageNode = [id: string, value: SerializedText];
export type FileStorageNode = [id: string, value: SerializedFile];
export type NodeMap = Map;
@@ -121,6 +134,10 @@ export function isRegisterStorageNode(
return node[1].type === CrdtType.REGISTER;
}
+export function isTextStorageNode(node: StorageNode): node is TextStorageNode {
+ return node[1].type === CrdtType.TEXT;
+}
+
export function isFileStorageNode(node: StorageNode): node is FileStorageNode {
return node[1].type === CrdtType.FILE;
}
@@ -132,6 +149,7 @@ export type CompactChildNode =
| CompactListNode
| CompactMapNode
| CompactRegisterNode
+ | CompactTextNode
| CompactFileNode;
export type CompactRootNode = readonly [id: "root", data: JsonObject];
@@ -166,6 +184,15 @@ export type CompactRegisterNode = readonly [
data: Json,
];
+export type CompactTextNode = readonly [
+ id: string,
+ type: CrdtType.TEXT,
+ parentId: string,
+ parentKey: string,
+ data: LiveTextData,
+ version: number,
+];
+
export type CompactFileNode = readonly [
id: string,
type: CrdtType.FILE,
@@ -205,6 +232,10 @@ export function* compactNodesToNodeStream(
// prettier-ignore
yield [cnode[0], {type: CrdtType.REGISTER, parentId: cnode[2], parentKey: cnode[3], data: cnode[4], }];
break;
+ case CrdtType.TEXT:
+ // prettier-ignore
+ yield [cnode[0], { type: CrdtType.TEXT, parentId: cnode[2], parentKey: cnode[3], data: cnode[4], version: cnode[5] }];
+ break;
case CrdtType.FILE:
// prettier-ignore
yield [cnode[0], {type: CrdtType.FILE, parentId: cnode[2], parentKey: cnode[3], data: cnode[4], }];
@@ -241,6 +272,17 @@ export function* nodeStreamToCompactNodes(
const id = node[0];
const crdt = node[1];
yield [id, CrdtType.REGISTER, crdt.parentId, crdt.parentKey, crdt.data];
+ } else if (isTextStorageNode(node)) {
+ const id = node[0];
+ const crdt = node[1];
+ yield [
+ id,
+ CrdtType.TEXT,
+ crdt.parentId,
+ crdt.parentKey,
+ crdt.data,
+ crdt.version,
+ ];
} else if (isFileStorageNode(node)) {
const id = node[0];
const crdt = node[1];
diff --git a/packages/liveblocks-core/src/room.ts b/packages/liveblocks-core/src/room.ts
index 3005391fb95..4e2916f55f6 100644
--- a/packages/liveblocks-core/src/room.ts
+++ b/packages/liveblocks-core/src/room.ts
@@ -5,14 +5,19 @@ import { injectBrandBadge } from "./brand";
import type { InternalSyncStatus } from "./client";
import type { Delegates, LostConnectionEvent, Status } from "./connection";
import { ManagedSocket, StopRetrying } from "./connection";
-import type { ApplyResult, ManagedPool } from "./crdts/AbstractCrdt";
-import { createManagedPool, OpSource } from "./crdts/AbstractCrdt";
+import type {
+ ApplyResult,
+ DispatchOptions,
+ ManagedPool,
+} from "./crdts/AbstractCrdt";
+import { createManagedPool } from "./crdts/AbstractCrdt";
import {
cloneLson,
diffNodeMap,
dumpPool,
isLiveList,
isLiveNode,
+ isLiveText,
isSameNodeOrChildOf,
liveObjectFromNodeStream,
mergeStorageUpdates,
@@ -21,7 +26,20 @@ import type { LiveFile, LiveFileReference } from "./crdts/LiveFile";
import { getLiveFileId } from "./crdts/LiveFile";
import { LiveObject } from "./crdts/LiveObject";
import type { LiveStructure, LsonObject } from "./crdts/Lson";
-import type { StorageCallback, StorageUpdate } from "./crdts/StorageUpdates";
+import type {
+ OpSource,
+ StorageCallback,
+ StorageUpdate,
+ UpdateSource,
+ Via,
+} from "./crdts/StorageUpdates";
+import {
+ LOCAL_EDIT,
+ LOCAL_REDO,
+ LOCAL_UNDO,
+ REMOTE,
+ toUpdateSource,
+} from "./crdts/StorageUpdates";
import { UnacknowledgedOps } from "./crdts/UnacknowledgedOps";
import type {
DCM,
@@ -102,7 +120,7 @@ import type {
} from "./protocol/InboxNotifications";
import type { MentionData } from "./protocol/MentionData";
import type { ClientWireOp, Op, ServerWireOp } from "./protocol/Op";
-import { isIgnoredOp, OpCode } from "./protocol/Op";
+import { isCreateOp, isIgnoredOp, OpCode } from "./protocol/Op";
import type { RoomSubscriptionSettings } from "./protocol/RoomSubscriptionSettings";
import type {
CommentsEventServerMsg,
@@ -128,7 +146,7 @@ import type {
SerializedCrdt,
SerializedRootObject,
} from "./protocol/StorageNode";
-import { compactNodesToNodeStream } from "./protocol/StorageNode";
+import { compactNodesToNodeStream, CrdtType } from "./protocol/StorageNode";
import type {
SubscriptionData,
SubscriptionDeleteInfo,
@@ -344,6 +362,14 @@ export type HistoryEvent = {
canRedo: boolean;
};
+/** @internal */
+export type PrivateHistoryEvent =
+ | { action: "push"; id: number }
+ | { action: "undo"; id: number }
+ | { action: "redo"; id: number }
+ | { action: "clear" }
+ | { action: "discard"; ids: number[] };
+
export type RoomEventName = Extract<
keyof RoomEventCallbackMap,
string
@@ -1263,7 +1289,14 @@ export interface SyncSource {
export type PrivateRoomApi = {
// For introspection in unit tests only
presenceBuffer: Json | undefined;
- undoStack: readonly (readonly Readonly>[])[];
+ undoStack: readonly {
+ readonly id: number;
+ readonly frames: readonly Readonly>[];
+ }[];
+ redoStack: readonly {
+ readonly id: number;
+ readonly frames: readonly Readonly>[];
+ }[];
nodeCount: number;
// Get/set the associated Yjs provider on this room
@@ -1322,6 +1355,13 @@ export type PrivateRoomApi = {
attachmentUrlsStore: BatchStore;
fileUrlsStore: BatchStore;
+ readonly history: Observable<
+ | { action: "push"; id: number }
+ | { action: "undo"; id: number }
+ | { action: "redo"; id: number }
+ | { action: "clear" }
+ | { action: "discard"; ids: number[] }
+ >;
};
function connectionAccessFromScopes(scopes: string[]): {
@@ -1348,6 +1388,11 @@ type PresenceStackframe
+ 
+ 
+ 
+Read more
+ + + +Alternatively, you can set up your project manually: + +- Install all dependencies with `npm install` +- Create an account on [liveblocks.io](https://liveblocks.io/dashboard) +- Copy your **secret** key from the + [dashboard](https://liveblocks.io/dashboard/apikeys) +- Create an `.env.local` file and add your **secret** key as the + `LIVEBLOCKS_SECRET_KEY` environment variable +- Run `npm run dev` and go to [http://localhost:3000](http://localhost:3000) + +Read more
+ + + +You can optionally run this example locally using the +[Liveblocks dev server](https://liveblocks.io/docs/tools/dev-server). + +- Install the example as detailed above +- Run `npx liveblocks dev` to start the server +- Add `baseUrl: "http://localhost:1153"` to `LiveblocksProvider` and + `new Liveblocks` +- Replace `secret` in `new Liveblocks` with `"sk_localdev"` +- Run `npm run dev` and go to [http://localhost:3000](http://localhost:3000) + +Read more
+ + + +To both deploy on [Vercel](https://vercel.com), and run the example locally, use +the following command: + +```bash +npx create-liveblocks-app@latest --example nextjs-livetext-custom --vercel +``` + +This will download the example and ask permission to open your browser, enabling +you to deploy to Vercel. + +Read more
+ + + +After forking +[this example](https://codesandbox.io/s/github/liveblocks/liveblocks/tree/main/examples/nextjs-livetext-custom) +on CodeSandbox, create the `LIVEBLOCKS_SECRET_KEY` environment variable as a +[secret](https://codesandbox.io/docs/secrets). + +
+ 
+
+ );
+}
diff --git a/examples/nextjs-livetext-custom/app/page.tsx b/examples/nextjs-livetext-custom/app/page.tsx
new file mode 100644
index 00000000000..78cd4d12c71
--- /dev/null
+++ b/examples/nextjs-livetext-custom/app/page.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { LiveText } from "@liveblocks/client";
+import {
+ ClientSideSuspense,
+ LiveblocksProvider,
+ RoomProvider,
+} from "@liveblocks/react/suspense";
+import { useSearchParams } from "next/navigation";
+import { Editor } from "../components/editor";
+import Loading from "./loading";
+
+// Learn how to structure your collaborative Next.js app
+// https://liveblocks.io/docs/guides/how-to-use-liveblocks-with-nextjs-app-directory
+
+export default function Page() {
+ const roomId = useExampleRoomId(
+ "liveblocks:examples:nextjs-livetext-custom"
+ );
+
+ return (
+
+
+
+ );
+}
+
+function getSegmentStyle(
+ attributes: LiveTextAttributes | undefined
+): CSSProperties | undefined {
+ if (!attributes) {
+ return undefined;
+ }
+
+ return {
+ fontWeight: attributes.bold ? 700 : undefined,
+ fontStyle: attributes.italic ? "italic" : undefined,
+ textDecoration: attributes.strikethrough ? "line-through" : undefined,
+ };
+}
diff --git a/examples/nextjs-livetext-custom/components/help-button.tsx b/examples/nextjs-livetext-custom/components/help-button.tsx
new file mode 100644
index 00000000000..77fc091e35c
--- /dev/null
+++ b/examples/nextjs-livetext-custom/components/help-button.tsx
@@ -0,0 +1,367 @@
+"use client";
+
+import { CSSProperties, ReactNode, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+const EXAMPLE_NAME = "Collaborative Text Editor (LiveText primitive)";
+
+const EXAMPLE_URL =
+ "https://github.com/liveblocks/liveblocks/tree/main/examples/nextjs-livetext-custom";
+
+type Feature = {
+ icon: ReactNode;
+ title: string;
+ description: string;
+};
+
+const FEATURES: Feature[] = [
+ {
+ icon:
+
+
+ {text.length === 0 ? (
+
+ ) : ( + text.map(([segmentText, attributes], index) => ( + + {segmentText} + + )) + )} + {/* A trailing newline needs an extra
to render as a line */} + {plainText.endsWith("\n") ?
: null} +
+ + ) : ( + text.map(([segmentText, attributes], index) => ( + + {segmentText} + + )) + )} + {/* A trailing newline needs an extra
to render as a line */} + {plainText.endsWith("\n") ?
: null} +
setIsOpen(false)}
+ >
+
,
+ document.body
+ )
+ : null}
+
+ );
+}
+
+function HelpIcon() {
+ return (
+
+ );
+}
+
+function CloseIcon() {
+ return (
+
+ );
+}
+
+function FeatureIconBase({ children }: { children: ReactNode }) {
+ return (
+
+ );
+}
+
+function TypeIcon() {
+ return (
+ event.stopPropagation()}
+ >
+
+
+
+
+
+
+
+ + + {EXAMPLE_NAME} + +
+How to use this example
+-
+ {FEATURES.map((feature) => (
+
-
+ {feature.icon}
+ ++
{feature.title}
+{feature.description}
+
+ ))}
+
+ {liveCarets.map(({ connectionId, userInfo, caret, highlights }) => (
+
+ );
+}
+
+function rectStyle(rect: Rect): CSSProperties {
+ return {
+ left: rect.left,
+ top: rect.top,
+ width: rect.width,
+ height: rect.height,
+ };
+}
diff --git a/examples/nextjs-livetext-custom/components/live-text-formatting.ts b/examples/nextjs-livetext-custom/components/live-text-formatting.ts
new file mode 100644
index 00000000000..d00cdb50cf5
--- /dev/null
+++ b/examples/nextjs-livetext-custom/components/live-text-formatting.ts
@@ -0,0 +1,62 @@
+import type { LiveTextAttributes, LiveTextData } from "@liveblocks/client";
+
+// A selection as character offsets. `focus` is the caret and may be before
+// `anchor` when selecting backwards
+export type SelectionRange = { anchor: number; focus: number };
+
+export type FormatKey = "bold" | "italic" | "strikethrough";
+
+// Returns the attributes of the character at `index`
+export function attributesAt(
+ data: LiveTextData,
+ index: number
+): LiveTextAttributes | undefined {
+ let offset = 0;
+ for (const [segmentText, attributes] of data) {
+ if (index < offset + segmentText.length) {
+ return attributes;
+ }
+ offset += segmentText.length;
+ }
+ return undefined;
+}
+
+// Whether every character in the range has the attribute
+export function isFormatActive(
+ data: LiveTextData,
+ range: SelectionRange,
+ key: FormatKey
+): boolean {
+ const start = Math.min(range.anchor, range.focus);
+ const end = Math.max(range.anchor, range.focus);
+
+ if (start === end) {
+ const attributes = attributesAt(data, start > 0 ? start - 1 : 0);
+ return Boolean(attributes?.[key]);
+ }
+
+ let offset = 0;
+ let overlaps = false;
+ for (const [segmentText, attributes] of data) {
+ const segmentStart = offset;
+ const segmentEnd = offset + segmentText.length;
+ offset = segmentEnd;
+
+ if (segmentEnd <= start || segmentStart >= end) {
+ continue;
+ }
+ if (!attributes?.[key]) {
+ return false;
+ }
+ overlaps = true;
+ }
+ return overlaps;
+}
+
+export function isSelectionFormatted(
+ data: LiveTextData,
+ range: SelectionRange | null,
+ key: FormatKey
+): boolean {
+ return range !== null && isFormatActive(data, range, key);
+}
diff --git a/examples/nextjs-livetext-custom/components/toolbar.tsx b/examples/nextjs-livetext-custom/components/toolbar.tsx
new file mode 100644
index 00000000000..678e8ff80cf
--- /dev/null
+++ b/examples/nextjs-livetext-custom/components/toolbar.tsx
@@ -0,0 +1,228 @@
+"use client";
+
+import type { LiveTextData } from "@liveblocks/client";
+import {
+ useCanRedo,
+ useCanUndo,
+ useRedo,
+ useUndo,
+} from "@liveblocks/react/suspense";
+import { AvatarStack } from "@liveblocks/react-ui";
+import type { FormatKey, SelectionRange } from "./live-text-formatting";
+import { isSelectionFormatted } from "./live-text-formatting";
+
+// Undo/redo, inline formatting toggles, and an avatar stack showing who is in the room
+export function Toolbar({
+ text,
+ selection,
+ historyBatchActive,
+ onHistoryAction,
+ onToggleFormat,
+}: {
+ text: LiveTextData;
+ selection: SelectionRange | null;
+ historyBatchActive: boolean;
+ onHistoryAction: () => void;
+ onToggleFormat: (key: FormatKey) => void;
+}) {
+ const undo = useUndo();
+ const redo = useRedo();
+ const canUndo = useCanUndo();
+ const canRedo = useCanRedo();
+
+ return (
+
+ {highlights.map((rect, index) => (
+
+ ))}
+
+ ))}
+
+
+
+
+ {
+ onHistoryAction();
+ undo();
+ }}
+ >
+
+ {
+ onHistoryAction();
+ redo();
+ }}
+ >
+
+
+ onToggleFormat("bold")}
+ >
+
+ onToggleFormat("italic")}
+ >
+
+ onToggleFormat("strikethrough")}
+ >
+
+
+ );
+}
+
+function FormatButton({
+ label,
+ active,
+ onToggle,
+ children,
+}: {
+ label: string;
+ active: boolean;
+ onToggle: () => void;
+ children: React.ReactNode;
+}) {
+ return (
+
+ );
+}
+
+function ToolbarButton({
+ label,
+ disabled,
+ onPress,
+ children,
+}: {
+ label: string;
+ disabled: boolean;
+ onPress: () => void;
+ children: React.ReactNode;
+}) {
+ return (
+
+ );
+}
+
+function UndoIcon() {
+ return (
+
+ );
+}
+
+function RedoIcon() {
+ return (
+
+ );
+}
+
+function ItalicIcon() {
+ return (
+
+ );
+}
+
+function BoldIcon() {
+ return (
+
+ );
+}
+
+function StrikethroughIcon() {
+ return (
+
+ );
+}
diff --git a/examples/nextjs-livetext-custom/components/use-live-text-editor.ts b/examples/nextjs-livetext-custom/components/use-live-text-editor.ts
new file mode 100644
index 00000000000..d329c3ebb61
--- /dev/null
+++ b/examples/nextjs-livetext-custom/components/use-live-text-editor.ts
@@ -0,0 +1,411 @@
+import type {
+ LiveTextAttributesPatch,
+ LiveTextData,
+} from "@liveblocks/client";
+import {
+ useMutation,
+ useRedo,
+ useRoom,
+ useStorage,
+ useStorageRoot,
+ useUndo,
+ useUpdateMyPresence,
+} from "@liveblocks/react/suspense";
+import type { RefObject } from "react";
+import {
+ useCallback,
+ useEffect,
+ useLayoutEffect,
+ useRef,
+ useState,
+} from "react";
+import {
+ getAbsoluteOffset,
+ getSelectionRange,
+ setSelectionRange,
+} from "./dom-selection";
+import type { FormatKey, SelectionRange } from "./live-text-formatting";
+import { attributesAt, isFormatActive } from "./live-text-formatting";
+
+// Binds a contenteditable to the LiveText in Storage: edits become LiveText operations, the DOM is always rendered from Storage, and the selection is tracked and shared through presence
+export function useLiveTextEditor(): {
+ editorRef: RefObject
+ 
+ 
+
+ 
= { readonly data: P; }; +type HistoryStackItem
= { + id: number; + frames: Stackframe
[];
+};
+
type IdFactory = () => string;
export type StaticSessionInfo = {
@@ -1409,8 +1454,8 @@ type RoomState<
pool: ManagedPool;
root: LiveObject | undefined;
- undoStack: Stackframe
[][]; - redoStack: Stackframe
[][]; + undoStack: HistoryStackItem
[]; + redoStack: HistoryStackItem
[];
/**
* When history is paused, all operations will get queued up here. When
@@ -1435,6 +1480,10 @@ type RoomState<
// history must wait until after the batch’s `reverseOps` are merged
// otherwise those ops become a second undo step.
scheduleHistoryResume: boolean;
+
+ // LiveText can dispatch with empty `ops` while UPDATE_TEXT is in-flight
+ // (queued edits) but still request redo clearing via DispatchOptions.
+ clearRedoStack?: boolean;
} | null;
// A registry of yet-unacknowledged Ops. These Ops have already been
@@ -1699,6 +1748,10 @@ export function createRoom<
unacknowledgedOps,
};
+ let nextHistoryItemId = 0;
+ // Depth counter for nested history.disable() calls, 0 means history is not disabled
+ let historyDisabled = 0;
+
// Accumulates nodes as initial storage arrives in chunks via
// STORAGE_CHUNK messages. Once the final chunk arrives (with
// done: true), the complete map is passed to processInitialStorage().
@@ -1826,7 +1879,8 @@ export function createRoom<
function onDispatch(
ops: ClientWireOp[],
reverse: Op[],
- storageUpdates: Map []) {
// If undo stack is too large, we remove the older item
if (context.undoStack.length >= 50) {
- context.undoStack.shift();
+ const evicted = context.undoStack.shift();
+ if (evicted !== undefined) {
+ notifyPrivateHistory({ action: "discard", ids: [evicted.id] });
+ }
}
- context.undoStack.push(frames);
+ const id = nextHistoryItemId++;
+ context.undoStack.push({ id, frames });
+ notifyPrivateHistory({ action: "push", id });
onHistoryChange();
}
@@ -2110,7 +2220,12 @@ export function createRoom<
}
if (storageUpdates !== undefined && storageUpdates.size > 0) {
- const updates = Array.from(storageUpdates.values());
+ // This is the only place Storage updates reach subscribers, so it's
+ // where the internal `optimistic` flag gets dropped. See OpSource.
+ const updates = Array.from(storageUpdates.values(), (update) => ({
+ ...update,
+ source: toUpdateSource(update.source),
+ }));
eventHub.storageBatch.notify(updates);
}
notifyStorageStatus();
@@ -2127,7 +2242,26 @@ export function createRoom<
);
}
- function applyLocalOps(frames: readonly Stackframe []): {
+ /**
+ * How each still-unacknowledged op was made, for the ops where that isn't a
+ * plain edit. Lets an ack be reported with the same `via` as the change it
+ * confirms, instead of every ack looking like a fresh edit.
+ */
+ const viaByOpId = new Map [],
+ localSource: Extract []; // Reverse ops to add to the undo stack aftwards
// Updates to notify about afterwards
@@ -2141,17 +2275,89 @@ export function createRoom<
(f): f is PresenceStackframe => f.type === "presence"
);
+ // Restoring a detached LiveText starts a new server-side text timeline.
+ // Reusing the old ID could let operations from the deleted timeline apply
+ // to this new lifetime without being rebased. Ops replayed after reconnect
+ // already have opIds and must keep their original IDs.
+ const restoredTextIds = new Map [],
ops: readonly Op[],
- isLocal: boolean
+ isLocal: boolean,
+ localSource: Extract [];
updates: {
@@ -2214,14 +2421,20 @@ export function createRoom<
let source: OpSource;
if (isLocal) {
- source = OpSource.LOCAL;
+ source = { ...localSource, optimistic: true };
} else if (op.opId !== undefined) {
context.unacknowledgedOps.delete(op.opId);
- source = OpSource.OURS;
+ // The server echoing back our own op. It describes a change this
+ // client made, now confirmed, so it keeps the `via` it was made with.
+ source = {
+ origin: "local",
+ via: viaOfAckedOp(op.opId),
+ optimistic: false,
+ };
} else {
// Remotely generated Ops (and fix Ops as a special case of that)
// don't have opId anymore.
- source = OpSource.THEIRS;
+ source = REMOTE;
}
const applyOpResult = applyOp(op, source);
@@ -2246,6 +2459,7 @@ export function createRoom<
op.type === OpCode.CREATE_LIST ||
op.type === OpCode.CREATE_MAP ||
op.type === OpCode.CREATE_OBJECT ||
+ op.type === OpCode.CREATE_TEXT ||
op.type === OpCode.CREATE_FILE
) {
createdNodeIds.add(op.id);
@@ -2271,13 +2485,14 @@ export function createRoom<
switch (op.type) {
case OpCode.DELETE_OBJECT_KEY:
case OpCode.UPDATE_OBJECT:
+ case OpCode.UPDATE_TEXT:
case OpCode.DELETE_CRDT: {
const node = context.pool.nodes.get(op.id);
if (node === undefined) {
return { modified: false };
}
- return node._apply(op, source === OpSource.LOCAL);
+ return node._apply(op, source);
}
case OpCode.SET_PARENT_KEY: {
@@ -2298,6 +2513,7 @@ export function createRoom<
case OpCode.CREATE_OBJECT:
case OpCode.CREATE_LIST:
case OpCode.CREATE_MAP:
+ case OpCode.CREATE_TEXT:
case OpCode.CREATE_FILE:
case OpCode.CREATE_REGISTER: {
if (op.parentId === undefined) {
@@ -2635,17 +2851,45 @@ export function createRoom<
break;
}
- // Receiving a RejectedOps message in the client means that the server is no
- // longer in sync with the client. Trying to synchronize the client again by
- // rolling back particular Ops may be hard/impossible. It's fine to not try and
- // accept the out-of-sync reality and throw an error.
+ // Receiving a RejectedOps message means the server refused some of
+ // our ops, so our optimistic local state is out of sync with the
+ // server. For LiveText ops this is a normal (if rare) situation —
+ // e.g. a client that was offline long enough to fall outside the
+ // server's retained history window — and we can recover: drop the
+ // rejected pending state and re-fetch the authoritative storage
+ // snapshot. For other ops (e.g. permission rejections), rolling back
+ // particular Ops is hard/impossible, so we keep the old behavior of
+ // accepting the out-of-sync reality and surfacing an error.
case ServerMsgCode.REJECT_STORAGE_OP: {
console.errorWithTitle(
"Storage mutation rejection error",
message.reason
);
- if (process.env.NODE_ENV !== "production") {
+ let needsStorageResync = false;
+ for (const opId of message.opIds) {
+ const rejectedOp = context.unacknowledgedOps.get(opId);
+ context.unacknowledgedOps.delete(opId);
+ context.buffer.storageOperations =
+ context.buffer.storageOperations.filter((op) => op.opId !== opId);
+ viaByOpId.delete(opId);
+
+ if (
+ rejectedOp !== undefined &&
+ rejectedOp.type === OpCode.UPDATE_TEXT
+ ) {
+ const node = context.pool.nodes.get(rejectedOp.id);
+ if (node !== undefined && isLiveText(node)) {
+ node._rejectPendingOp(opId);
+ needsStorageResync = true;
+ }
+ }
+ }
+
+ if (needsStorageResync) {
+ refreshStorage();
+ flushNowOrSoon();
+ } else if (process.env.NODE_ENV !== "production") {
throw new Error(
`Storage mutations rejected by server: ${message.reason}`
);
@@ -3396,16 +3640,17 @@ export function createRoom<
if (context.activeBatch) {
throw new Error("undo is not allowed during a batch");
}
- const frames = context.undoStack.pop();
- if (frames === undefined) {
+ const item = context.undoStack.pop();
+ if (item === undefined) {
return;
}
context.pausedHistory = null;
- const result = applyLocalOps(frames);
+ const result = applyLocalOps(item.frames, LOCAL_UNDO);
+ context.redoStack.push({ id: item.id, frames: result.reverse });
+ notifyPrivateHistory({ action: "undo", id: item.id });
notify(result.updates);
- context.redoStack.push(result.reverse);
onHistoryChange();
for (const op of result.opsToEmit) {
@@ -3419,16 +3664,17 @@ export function createRoom<
throw new Error("redo is not allowed during a batch");
}
- const frames = context.redoStack.pop();
- if (frames === undefined) {
+ const item = context.redoStack.pop();
+ if (item === undefined) {
return;
}
context.pausedHistory = null;
- const result = applyLocalOps(frames);
+ const result = applyLocalOps(item.frames, LOCAL_REDO);
+ context.undoStack.push({ id: item.id, frames: result.reverse });
+ notifyPrivateHistory({ action: "redo", id: item.id });
notify(result.updates);
- context.undoStack.push(result.reverse);
onHistoryChange();
for (const op of result.opsToEmit) {
@@ -3440,6 +3686,8 @@ export function createRoom<
function clear() {
context.undoStack.length = 0;
context.redoStack.length = 0;
+ notifyPrivateHistory({ action: "clear" });
+ onHistoryChange();
}
function batch [][] = [];
- const tempRedo: Stackframe [][] = [];
+ const tempUndo: HistoryStackItem [] = [];
+ const tempRedo: HistoryStackItem [] = [];
context.undoStack = tempUndo;
context.redoStack = tempRedo;
historyDisabled++;
@@ -3890,9 +4136,26 @@ export function createRoom<
{
[kInternal]: {
get presenceBuffer() { return deepClone(context.buffer.presenceUpdates?.data ?? null) }, // prettier-ignore
- get undoStack() { return deepClone(context.undoStack) }, // prettier-ignore
+ get undoStack() {
+ return structuredClone(
+ context.undoStack.map((item) => ({
+ id: item.id,
+ frames: item.frames,
+ }))
+ );
+ }, // prettier-ignore
+ get redoStack() {
+ return structuredClone(
+ context.redoStack.map((item) => ({
+ id: item.id,
+ frames: item.frames,
+ }))
+ );
+ }, // prettier-ignore
get nodeCount() { return context.pool.nodes.size }, // prettier-ignore
+ history: eventHub.privateHistory.observable,
+
getYjsProvider() {
return context.yjsProvider;
},
diff --git a/packages/liveblocks-core/src/types/PlainLson.ts b/packages/liveblocks-core/src/types/PlainLson.ts
index 565916034ba..2d7d06f8888 100644
--- a/packages/liveblocks-core/src/types/PlainLson.ts
+++ b/packages/liveblocks-core/src/types/PlainLson.ts
@@ -41,6 +41,7 @@
*/
import type { Json } from "../lib/Json";
+import type { LiveTextData } from "../protocol/Op";
import type { LiveFileData } from "../protocol/StorageNode";
export type PlainLsonFields = Record
+
+ (
@@ -2032,6 +2124,18 @@ export function createRoom<
});
}
+ function notifyPrivateHistory(event: PrivateHistoryEvent) {
+ if (historyDisabled > 0) return;
+ eventHub.privateHistory.notify(event);
+ }
+
+ function clearRedoStack() {
+ if (context.redoStack.length === 0) return;
+ const ids = context.redoStack.map((item) => item.id);
+ context.redoStack.length = 0;
+ notifyPrivateHistory({ action: "discard", ids });
+ }
+
/**
* Reconciles the live Storage so it matches the given target nodes (e.g. a
* historic version snapshot): diffs them against the current state and applies
@@ -2048,7 +2152,8 @@ export function createRoom<
}
const ops = diffCurrentStorageAgainst(
- new Map
+
+
