fix: block id null when using collaboration (#419)

* temp fix for error

* proper fix

* clone node before mutating

Author: YousefED

examples/editor/src/main.tsx

@@ -6,7 +6,8 @@ window.React = React;
 
 const root = createRoot(document.getElementById("root")!);
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  // TODO: StrictMode is causing duplicate mounts and conflicts with collaboration
+  // <React.StrictMode>
+  <App />
+  // </React.StrictMode>
 );

packages/core/src/BlockNoteEditor.ts

@@ -29,7 +29,6 @@ import {
   BlockSchema,
   PartialBlock,
 } from "./extensions/Blocks/api/blockTypes";
-import { TextCursorPosition } from "./extensions/Blocks/api/cursorPositionTypes";
 import {
   DefaultBlockSchema,
   defaultBlockSchema,
@@ -42,6 +41,7 @@ import {
 import { Selection } from "./extensions/Blocks/api/selectionTypes";
 import { getBlockInfoFromPos } from "./extensions/Blocks/helpers/getBlockInfoFromPos";
 
+import { TextCursorPosition } from "./extensions/Blocks/api/cursorPositionTypes";
 import { FormattingToolbarProsemirrorPlugin } from "./extensions/FormattingToolbar/FormattingToolbarPlugin";
 import { HyperlinkToolbarProsemirrorPlugin } from "./extensions/HyperlinkToolbar/HyperlinkToolbarPlugin";
 import { ImageToolbarProsemirrorPlugin } from "./extensions/ImageToolbar/ImageToolbarPlugin";
@@ -217,6 +217,12 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
 
     this.uploadFile = newOptions.uploadFile;
 
+    if (newOptions.collaboration && newOptions.initialContent) {
+      console.warn(
+        "When using Collaboration, initialContent might cause conflicts, because changes should come from the collaboration provider"
+      );
+    }
+
     const initialContent =
       newOptions.initialContent ||
       (options.collaboration
@@ -233,20 +239,35 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
       ...newOptions._tiptapOptions,
       onBeforeCreate(editor) {
         newOptions._tiptapOptions?.onBeforeCreate?.(editor);
-        if (!initialContent) {
-          // when using collaboration
-          return;
-        }
-
         // We always set the initial content to a single paragraph block. This
         // allows us to easily replace it with the actual initial content once
         // the TipTap editor is initialized.
         const schema = editor.editor.schema;
+
+        // This is a hack to make "initial content detection" by y-prosemirror (and also tiptap isEmpty)
+        // properly detect whether or not the document has changed.
+        // We change the doc.createAndFill function to make sure the initial block id is set, instead of null
+        let cache: any;
+        const oldCreateAndFill = schema.nodes.doc.createAndFill;
+        (schema.nodes.doc as any).createAndFill = (...args: any) => {
+          if (cache) {
+            return cache;
+          }
+          const ret = oldCreateAndFill.apply(schema.nodes.doc, args);
+
+          // create a copy that we can mutate (otherwise, assigning attrs is not safe and corrupts the pm state)
+          const jsonNode = JSON.parse(JSON.stringify(ret!.toJSON()));
+          jsonNode.content[0].content[0].attrs.id = "initialBlockId";
+
+          cache = Node.fromJSON(schema, jsonNode);
+          return ret;
+        };
+
         const root = schema.node(
           "doc",
           undefined,
           schema.node("blockGroup", undefined, [
-            blockToNode({ id: "initialBlock", type: "paragraph" }, schema),
+            blockToNode({ id: "initialBlockId", type: "paragraph" }, schema),
           ])
         );
         editor.editor.options.content = root.toJSON();