diff --git a/examples/editor/src/index.css b/examples/editor/src/index.css deleted file mode 100644 index 06f062d46b..0000000000 --- a/examples/editor/src/index.css +++ /dev/null @@ -1,5 +0,0 @@ -html, -body, -#root { - height: 100%; -} diff --git a/examples/editor/src/main.tsx b/examples/editor/src/main.tsx index 0808f1a4d8..f87c123a2c 100644 --- a/examples/editor/src/main.tsx +++ b/examples/editor/src/main.tsx @@ -1,7 +1,6 @@ import React from "react"; import { createRoot } from "react-dom/client"; import App from "./App"; -import "./index.css"; window.React = React; diff --git a/packages/core/src/BlockNoteEditor.ts b/packages/core/src/BlockNoteEditor.ts index ee148c006b..7f42f1deec 100644 --- a/packages/core/src/BlockNoteEditor.ts +++ b/packages/core/src/BlockNoteEditor.ts @@ -216,28 +216,36 @@ export class BlockNoteEditor { 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