wip: feat: comments

examples/01-basic/01-minimal/App.tsx

@@ -5,7 +5,7 @@ import { useCreateBlockNote } from "@blocknote/react";
 
 export default function App() {
   // Creates a new editor instance.
-  const editor = useCreateBlockNote();
+  const editor = useCreateBlockNote({});
 
   // Renders the editor instance using a React component.
   return <BlockNoteView editor={editor} />;

examples/01-basic/02-block-objects/App.tsx

@@ -1,8 +1,8 @@
 import { Block } from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
-import { useCreateBlockNote } from "@blocknote/react";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
+import { useCreateBlockNote } from "@blocknote/react";
 import { useState } from "react";
 
 import "./styles.css";

examples/07-collaboration/02-liveblocks/.bnexample.json

@@ -2,11 +2,11 @@
   "playground": true,
   "docs": true,
   "author": "yousefed",
-  "tags": ["Advanced", "Saving/Loading", "Collaboration"],
+  "tags": ["Advanced", "Liveblocks", "Collaboration"],
   "dependencies": {
-    "@liveblocks/client": "^1.10.0",
-    "@liveblocks/react": "^1.10.0",
-    "@liveblocks/yjs": "^1.10.0",
-    "yjs": "^13.6.15"
+    "@liveblocks/client": "^2.11.0",
+    "@liveblocks/react": "^2.11.0",
+    "@liveblocks/react-ui": "^2.11.0",
+    "@liveblocks/react-blocknote": "^2.11.0"
   }
 }

examples/07-collaboration/02-liveblocks/App.tsx

@@ -1,41 +1,22 @@
 import "@blocknote/core/fonts/inter.css";
-import { useCreateBlockNote } from "@blocknote/react";
-import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
-import { createClient } from "@liveblocks/client";
-import LiveblocksProvider from "@liveblocks/yjs";
-import * as Y from "yjs";
 
-// Sets up Liveblocks client.
-const client = createClient({
-  publicApiKey:
-    "pk_dev_lJAS4XHx3l1e0x_Gh9VMtrvo8PEB1vrNarC2YRtAOp4t6i9_QAcSX2U953GS6v7B",
-});
-// Enters a multiplayer room.
-// Use a unique name as a "room" for your application.
-const { room } = client.enterRoom("your-project-name", {
-  initialPresence: {},
-});
+// .. in imports are temporary for development (vite setup)
 
-// Sets up Yjs document and Liveblocks Yjs provider.
-const doc = new Y.Doc();
-const provider = new LiveblocksProvider(room, doc);
+// Need to be imported before @liveblocks/react-blocknote styles
+import "@liveblocks/react-ui/styles.css";
+// Need to be imported after @liveblocks/react-ui styles
+import "@liveblocks/react-blocknote/styles.css";
 
-export default function App() {
-  const editor = useCreateBlockNote({
-    collaboration: {
-      // The Yjs Provider responsible for transporting updates:
-      provider,
-      // Where to store BlockNote data in the Y.Doc:
-      fragment: doc.getXmlFragment("document-store"),
-      // Information (name and color) for this user:
-      user: {
-        name: "My Username",
-        color: "#ff0000",
-      },
-    },
-  });
+import { Editor } from "./Editor.jsx";
+import { Room } from "./Room.jsx";
+import "./globals.css";
 
-  // Renders the editor instance.
-  return <BlockNoteView editor={editor} />;
+export default function App() {
+  // Renders the editor instance using a React component.
+  return (
+    <Room>
+      <Editor />
+    </Room>
+  );
 }

examples/07-collaboration/02-liveblocks/Editor.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { BlockNoteView } from "@blocknote/mantine";
+import { useCreateBlockNoteWithLiveblocks } from "@liveblocks/react-blocknote";
+import { Threads } from "./Threads";
+export function Editor() {
+  const editor = useCreateBlockNoteWithLiveblocks({});
+
+  return (
+    <BlockNoteView editor={editor}>
+      <Threads editor={editor} />
+    </BlockNoteView>
+  );
+}

examples/07-collaboration/02-liveblocks/Room.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import {
+  ClientSideSuspense,
+  LiveblocksProvider,
+  RoomProvider,
+} from "@liveblocks/react/suspense";
+import { ReactNode } from "react";
+
+const users = [
+  {
+    id: "1",
+    name: "John Doe",
+    avatar: "https://liveblocks.io/avatars/avatar-1.png",
+  },
+  {
+    id: "2",
+    name: "Alice Smith",
+    avatar: "https://liveblocks.io/avatars/avatar-2.png",
+  },
+  {
+    id: "3",
+    name: "Bob Johnson",
+    avatar: "https://liveblocks.io/avatars/avatar-3.png",
+  },
+];
+
+export function Room({ children }: { children: ReactNode }) {
+  return (
+    <LiveblocksProvider
+      publicApiKey={
+        "pk_dev_KuhEOKuRRciDDFTpS7qThHZmqzx7D9dKjDs7xIP21ojB2AnZ8whd9ZrV5u97zuMG"
+      }
+      resolveMentionSuggestions={async (args) => {
+        return users
+          .filter((user) =>
+            user.name.toLowerCase().startsWith(args.text.toLowerCase())
+          )
+          .map((user) => user.id);
+      }}
+      resolveUsers={async (args) => {
+        return args.userIds.map((id) => users.find((user) => user.id === id));
+      }}>
+      <RoomProvider id="my-room">
+        <ClientSideSuspense fallback={<div>Loading…</div>}>
+          {children}
+        </ClientSideSuspense>
+      </RoomProvider>
+    </LiveblocksProvider>
+  );
+}

examples/07-collaboration/02-liveblocks/Threads.tsx

@@ -0,0 +1,29 @@
+import { BlockNoteEditor } from "@blocknote/core";
+import {
+  AnchoredThreads,
+  FloatingComposer,
+  FloatingThreads,
+} from "@liveblocks/react-blocknote";
+import { useThreads } from "@liveblocks/react/suspense";
+
+export function Threads({
+  editor,
+}: {
+  editor: BlockNoteEditor<any, any, any>;
+}) {
+  const { threads } = useThreads({ query: { resolved: false } });
+
+  return (
+    <>
+      <div className="anchored-threads">
+        <AnchoredThreads editor={editor} threads={threads} />
+      </div>
+      <FloatingThreads
+        editor={editor}
+        threads={threads}
+        className="floating-threads"
+      />
+      <FloatingComposer editor={editor} className="floating-composer" />
+    </>
+  );
+}

examples/07-collaboration/02-liveblocks/globals.css

@@ -0,0 +1,27 @@
+/* For mobile */
+.floating-threads {
+  display: none;
+}
+
+/* For desktop */
+.anchored-threads {
+  display: block;
+  max-width: 300px;
+  width: 100%;
+  position: absolute;
+  right: 12px;
+}
+
+@media (max-width: 640px) {
+  .floating-threads {
+    display: block;
+  }
+
+  .anchored-threads {
+    display: none;
+  }
+}
+
+.lb-portal {
+  z-index: 3000;
+}

examples/07-collaboration/02-liveblocks/package.json

@@ -18,10 +18,10 @@
     "@blocknote/shadcn": "latest",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "@liveblocks/client": "^1.10.0",
-    "@liveblocks/react": "^1.10.0",
-    "@liveblocks/yjs": "^1.10.0",
-    "yjs": "^13.6.15"
+    "@liveblocks/client": "^2.11.0",
+    "@liveblocks/react": "^2.11.0",
+    "@liveblocks/react-ui": "^2.11.0",
+    "@liveblocks/react-blocknote": "^2.11.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.25",

examples/07-collaboration/02-liveblocks/tsconfig.json

@@ -3,11 +3,7 @@
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
-    "lib": [
-      "DOM",
-      "DOM.Iterable",
-      "ESNext"
-    ],
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": false,
@@ -22,15 +18,13 @@
     "jsx": "react-jsx",
     "composite": true
   },
-  "include": [
-    "."
-  ],
-  "__ADD_FOR_LOCAL_DEV_references": [
+  "include": ["."],
+  "references": [
     {
       "path": "../../../packages/core/"
     },
     {
       "path": "../../../packages/react/"
     }
   ]
-}
+}