feat: de-couple yjs from blocknote/core

Author: nperez0111

examples/07-collaboration/01-partykit/src/App.tsx

@@ -4,6 +4,7 @@ import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
 import YPartyKitProvider from "y-partykit/provider";
 import * as Y from "yjs";
+import { withCollaboration } from "@blocknote/core/yjs";
 
 // Sets up Yjs document and PartyKit Yjs provider.
 const doc = new Y.Doc();
@@ -15,19 +16,21 @@ const provider = new YPartyKitProvider(
 );
 
 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",
+  const editor = useCreateBlockNote(
+    withCollaboration({
+      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",
+        },
       },
-    },
-  });
+    }),
+  );
 
   // Renders the editor instance.
   return <BlockNoteView editor={editor} />;

examples/07-collaboration/03-y-sweet/src/App.tsx

@@ -3,6 +3,7 @@
 import { useYDoc, useYjsProvider, YDocProvider } from "@y-sweet/react";
 import { useCreateBlockNote } from "@blocknote/react";
 import { BlockNoteView } from "@blocknote/mantine";
+import { withCollaboration } from "@blocknote/core/yjs";
 
 import "@blocknote/mantine/style.css";
 
@@ -23,13 +24,15 @@ function Document() {
   const provider = useYjsProvider();
   const doc = useYDoc();
 
-  const editor = useCreateBlockNote({
-    collaboration: {
-      provider,
-      fragment: doc.getXmlFragment("blocknote"),
-      user: { color: "#ff0000", name: "My Username" },
-    },
-  });
+  const editor = useCreateBlockNote(
+    withCollaboration({
+      collaboration: {
+        provider,
+        fragment: doc.getXmlFragment("blocknote"),
+        user: { color: "#ff0000", name: "My Username" },
+      },
+    }),
+  );
 
   return <BlockNoteView editor={editor} />;
 }

examples/07-collaboration/05-comments/src/App.tsx

@@ -3,8 +3,9 @@
 import {
   CommentsExtension,
   DefaultThreadStoreAuth,
-  YjsThreadStore,
 } from "@blocknote/core/comments";
+import { withCollaboration, YjsThreadStore } from "@blocknote/core/yjs";
+
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
 import { useCreateBlockNote } from "@blocknote/react";
@@ -74,14 +75,14 @@ function Document() {
 
   // setup the editor with comments and collaboration
   const editor = useCreateBlockNote(
-    {
+    withCollaboration({
       collaboration: {
         provider,
         fragment: doc.getXmlFragment("blocknote"),
         user: { color: getRandomColor(), name: activeUser.username },
       },
       extensions: [CommentsExtension({ threadStore, resolveUsers })],
-    },
+    }),
     [activeUser, threadStore],
   );
 

examples/07-collaboration/06-comments-with-sidebar/src/App.tsx

@@ -2,9 +2,9 @@
 
 import {
   DefaultThreadStoreAuth,
-  YjsThreadStore,
   CommentsExtension,
 } from "@blocknote/core/comments";
+import { withCollaboration, YjsThreadStore } from "@blocknote/core/yjs";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
 import {
@@ -77,14 +77,14 @@ export default function App() {
 
   // setup the editor with comments and collaboration
   const editor = useCreateBlockNote(
-    {
+    withCollaboration({
       collaboration: {
         provider,
         fragment: doc.getXmlFragment("blocknote"),
         user: { color: getRandomColor(), name: activeUser.username },
       },
       extensions: [CommentsExtension({ threadStore, resolveUsers })],
-    },
+    }),
     [activeUser, threadStore],
   );
 

examples/07-collaboration/07-ghost-writer/src/App.tsx

@@ -2,6 +2,7 @@ import "@blocknote/core/fonts/inter.css";
 import "@blocknote/mantine/style.css";
 import { BlockNoteView } from "@blocknote/mantine";
 import { useCreateBlockNote } from "@blocknote/react";
+import { withCollaboration } from "@blocknote/core/yjs";
 
 import YPartyKitProvider from "y-partykit/provider";
 import * as Y from "yjs";
@@ -38,21 +39,23 @@ const ghostContent =
 export default function App() {
   const [numGhostWriters, setNumGhostWriters] = useState(1);
   const [isPaused, setIsPaused] = useState(false);
-  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: isGhostWriting
-          ? `Ghost Writer #${ghostWriterIndex}`
-          : "My Username",
-        color: isGhostWriting ? "#CCCCCC" : "#00ff00",
+  const editor = useCreateBlockNote(
+    withCollaboration({
+      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: isGhostWriting
+            ? `Ghost Writer #${ghostWriterIndex}`
+            : "My Username",
+          color: isGhostWriting ? "#CCCCCC" : "#00ff00",
+        },
       },
-    },
-  });
+    }),
+  );
 
   useEffect(() => {
     if (!isGhostWriting || isPaused) {
@@ -101,7 +104,8 @@ export default function App() {
                 `${window.location.origin}${window.location.pathname}?room=${roomName}&index=-1`,
                 "_blank",
               );
-            }}>
+            }}
+          >
             Ghost Writer in a new window
           </button>
         </>

examples/07-collaboration/08-forking/src/App.tsx

@@ -1,6 +1,5 @@
 import "@blocknote/core/fonts/inter.css";
-import {} from "@blocknote/core";
-import { ForkYDocExtension } from "@blocknote/core/extensions";
+import { ForkYDocExtension, withCollaboration } from "@blocknote/core/yjs";
 import {
   useCreateBlockNote,
   useExtension,
@@ -21,19 +20,21 @@ const provider = new YPartyKitProvider(
 );
 
 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",
+  const editor = useCreateBlockNote(
+    withCollaboration({
+      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",
+        },
       },
-    },
-  });
+    }),
+  );
   const forkYDocPlugin = useExtension(ForkYDocExtension, { editor });
   const isForked = useExtensionState(ForkYDocExtension, {
     editor,

examples/07-collaboration/09-comments-testing/src/App.tsx

@@ -3,8 +3,8 @@
 import {
   CommentsExtension,
   DefaultThreadStoreAuth,
-  YjsThreadStore,
 } from "@blocknote/core/comments";
+import { YjsThreadStore } from "@blocknote/core/yjs";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
 import { useCreateBlockNote } from "@blocknote/react";