fix: Error when custom blocks are in initialContent (#348)

* Fixed custom blocks being rendered before editor init

* Gave initial block a non-generated ID to not have to redo snapshots

* Updated playwright

* update package lock

* Small style update to fix tests

* Implemented PR feedback

---------

Co-authored-by: yousefed <[email protected]>

Author: matthewlipski

examples/editor/src/index.css

@@ -1,7 +1,6 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
-import "./index.css";
 
 window.React = React;
 

examples/editor/src/main.tsx

@@ -216,28 +216,36 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
     const tiptapOptions: EditorOptions = {
       ...blockNoteTipTapOptions,
       ...newOptions._tiptapOptions,
-      onCreate: () => {
-        newOptions.onEditorReady?.(this);
-        this.ready = true;
-      },
       onBeforeCreate(editor) {
         if (!initialContent) {
           // when using collaboration
           return;
         }
-        // we have to set the initial content here, because now we can use the editor schema
-        // which has been created at this point
-        const schema = editor.editor.schema;
-        const ic = initialContent.map((block) => blockToNode(block, schema));
 
+        // 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;
         const root = schema.node(
           "doc",
           undefined,
-          schema.node("blockGroup", undefined, ic)
+          schema.node("blockGroup", undefined, [
+            blockToNode({ id: "initialBlock", type: "paragraph" }, schema),
+          ])
         );
-        // override the initialcontent
         editor.editor.options.content = root.toJSON();
       },
+      onCreate: () => {
+        // We need to wait for the TipTap editor to init before we can set the
+        // initial content, as the schema may contain custom blocks which need
+        // it to render.
+        if (initialContent !== undefined) {
+          this.replaceBlocks(this.topLevelBlocks, initialContent);
+        }
+
+        newOptions.onEditorReady?.(this);
+        this.ready = true;
+      },
       onUpdate: () => {
         // This seems to be necessary due to a bug in TipTap:
         // https://github.com/ueberdosis/tiptap/issues/2583