@blocknote/core 0.14.5 → 0.15.2

package/src/api/exporters/markdown/markdownExporter.ts

@@ -4,7 +4,7 @@ import rehypeRemark from "rehype-remark";
 import remarkGfm from "remark-gfm";
 import remarkStringify from "remark-stringify";
 import { unified } from "unified";
-import { Block } from "../../../blocks/defaultBlocks";
+import { PartialBlock } from "../../../blocks/defaultBlocks";
 import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
 import { BlockSchema, InlineContentSchema, StyleSchema } from "../../../schema";
 import { createExternalHTMLExporter } from "../html/externalHTMLExporter";
@@ -29,12 +29,13 @@ export function blocksToMarkdown<
   I extends InlineContentSchema,
   S extends StyleSchema
 >(
-  blocks: Block<BSchema, I, S>[],
+  blocks: PartialBlock<BSchema, I, S>[],
   schema: Schema,
-  editor: BlockNoteEditor<BSchema, I, S>
+  editor: BlockNoteEditor<BSchema, I, S>,
+  options: { document?: Document }
 ): string {
   const exporter = createExternalHTMLExporter(schema, editor);
-  const externalHTML = exporter.exportBlocks(blocks);
+  const externalHTML = exporter.exportBlocks(blocks, options);
 
   return cleanHTMLToMarkdown(externalHTML);
 }

package/src/api/nodeConversions/nodeConversions.test.ts

@@ -3,10 +3,10 @@ import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 
 import { PartialBlock } from "../../blocks/defaultBlocks";
+import { customBlocksTestCases } from "../testUtil/cases/customBlocks";
 import { customInlineContentTestCases } from "../testUtil/cases/customInlineContent";
 import { customStylesTestCases } from "../testUtil/cases/customStyles";
 import { defaultSchemaTestCases } from "../testUtil/cases/defaultSchema";
-import { customBlocksTestCases } from "../testUtil/cases/customBlocks";
 import {
   addIdsToBlock,
   partialBlockToBlockForTesting,
@@ -18,11 +18,7 @@ function validateConversion(
   editor: BlockNoteEditor<any, any, any>
 ) {
   addIdsToBlock(block);
-  const node = blockToNode(
-    block,
-    editor._tiptapEditor.schema,
-    editor.schema.styleSchema
-  );
+  const node = blockToNode(block, editor.pmSchema, editor.schema.styleSchema);
 
   expect(node).toMatchSnapshot();
 
@@ -56,6 +52,13 @@ describe("Test BlockNote-Prosemirror conversion", () => {
 
       beforeEach(() => {
         editor = testCase.createEditor();
+        // Note that we don't necessarily need to mount a root
+        // Currently, we do mount to a root so that it reflects the "production" use-case more closely.
+
+        // However, it would be nice to increased converage and share the same set of tests for these cases:
+        // - does render to a root
+        // - does not render to a root
+        // - runs in server (jsdom) environment using server-util
         editor.mount(div);
       });
 

package/src/api/parsers/html/parseHTML.test.ts

@@ -33,16 +33,15 @@ async function parseHTMLAndCompareSnapshots(
 
   (window as any).__TEST_OPTIONS.mockID = 0; // reset id counter
   const htmlNode = nestedListsToBlockNoteStructure(html);
-  const tt = editor._tiptapEditor;
 
   const slice = view.__parseFromClipboard(
-    tt.view,
+    editor.prosemirrorView,
     "",
     htmlNode.innerHTML,
     false,
-    tt.view.state.selection.$from
+    editor._tiptapEditor.state.selection.$from
   );
-  tt.view.dispatch(tt.view.state.tr.replaceSelection(slice));
+  editor.dispatch(editor._tiptapEditor.state.tr.replaceSelection(slice));
 
   // alternative paste simulation doesn't work in a non-browser vitest env
   //   editor._tiptapEditor.view.pasteHTML(html, {

package/src/api/parsers/html/util/__snapshots__/nestedLists.test.ts.snap

@@ -5,7 +5,7 @@ exports[`Lift nested lists > Lifts multiple bullet lists 1`] = `
 <ul>
   <div>
     <li>Bullet List Item 1</li>
-    <div data-node-type=\\"blockGroup\\">
+    <div data-node-type="blockGroup">
       <ul>
         <li>Nested Bullet List Item 1</li>
         <li>Nested Bullet List Item 2</li>
@@ -26,7 +26,7 @@ exports[`Lift nested lists > Lifts multiple bullet lists with content in between
 <ul>
   <div>
     <li>Bullet List Item 1</li>
-    <div data-node-type=\\"blockGroup\\">
+    <div data-node-type="blockGroup">
       <ul>
         <li>Nested Bullet List Item 1</li>
         <li>Nested Bullet List Item 2</li>
@@ -35,7 +35,7 @@ exports[`Lift nested lists > Lifts multiple bullet lists with content in between
   </div>
   <div>
     <li>In between content</li>
-    <div data-node-type=\\"blockGroup\\">
+    <div data-node-type="blockGroup">
       <ul>
         <li>Nested Bullet List Item 3</li>
         <li>Nested Bullet List Item 4</li>
@@ -52,7 +52,7 @@ exports[`Lift nested lists > Lifts nested bullet lists 1`] = `
 <ul>
   <div>
     <li>Bullet List Item 1</li>
-    <div data-node-type=\\"blockGroup\\">
+    <div data-node-type="blockGroup">
       <ul>
         <li>Nested Bullet List Item 1</li>
         <li>Nested Bullet List Item 2</li>
@@ -69,7 +69,7 @@ exports[`Lift nested lists > Lifts nested bullet lists with content after nested
 <ul>
   <div>
     <li>Bullet List Item 1</li>
-    <div data-node-type=\\"blockGroup\\">
+    <div data-node-type="blockGroup">
       <ul>
         <li>Nested Bullet List Item 1</li>
         <li>Nested Bullet List Item 2</li>
@@ -99,7 +99,7 @@ exports[`Lift nested lists > Lifts nested mixed lists 1`] = `
 <ol>
   <div>
     <li>Numbered List Item 1</li>
-    <div data-node-type=\\"blockGroup\\">
+    <div data-node-type="blockGroup">
       <ul>
         <li>Bullet List Item 1</li>
         <li>Bullet List Item 2</li>
@@ -116,7 +116,7 @@ exports[`Lift nested lists > Lifts nested numbered lists 1`] = `
 <ol>
   <div>
     <li>Numbered List Item 1</li>
-    <div data-node-type=\\"blockGroup\\">
+    <div data-node-type="blockGroup">
       <ol>
         <li>Nested Numbered List Item 1</li>
         <li>Nested Numbered List Item 2</li>

package/src/blocks/FileBlockContent/fileBlockHelpers.ts

@@ -75,7 +75,7 @@ export const createAddFileButton = (
   };
   // Opens the file toolbar.
   const addFileButtonClickHandler = () => {
-    editor._tiptapEditor.view.dispatch(
+    editor.dispatch(
       editor._tiptapEditor.state.tr.setMeta(editor.filePanel!.plugin, {
         block: block,
       })

package/src/blocks/defaultBlockHelpers.ts

@@ -67,12 +67,9 @@ export const defaultBlockToHTML = <
   dom: HTMLElement;
   contentDOM?: HTMLElement;
 } => {
-  const node = blockToNode(
-    block,
-    editor._tiptapEditor.schema,
-    editor.schema.styleSchema
-  ).firstChild!;
-  const toDOM = editor._tiptapEditor.schema.nodes[node.type.name].spec.toDOM;
+  const node = blockToNode(block, editor.pmSchema, editor.schema.styleSchema)
+    .firstChild!;
+  const toDOM = editor.pmSchema.nodes[node.type.name].spec.toDOM;
 
   if (toDOM === undefined) {
     throw new Error(

package/src/blocks/defaultBlockTypeGuards.ts

@@ -6,7 +6,13 @@ import {
   InlineContentSchema,
   StyleSchema,
 } from "../schema";
-import { Block, DefaultBlockSchema, defaultBlockSchema } from "./defaultBlocks";
+import {
+  Block,
+  DefaultBlockSchema,
+  defaultBlockSchema,
+  defaultInlineContentSchema,
+  DefaultInlineContentSchema,
+} from "./defaultBlocks";
 import { defaultProps } from "./defaultProps";
 
 export function checkDefaultBlockTypeInSchema<
@@ -23,6 +29,25 @@ export function checkDefaultBlockTypeInSchema<
   );
 }
 
+export function checkDefaultInlineContentTypeInSchema<
+  InlineContentType extends keyof DefaultInlineContentSchema,
+  B extends BlockSchema,
+  S extends StyleSchema
+>(
+  inlineContentType: InlineContentType,
+  editor: BlockNoteEditor<B, any, S>
+): editor is BlockNoteEditor<
+  B,
+  { Type: DefaultInlineContentSchema[InlineContentType] },
+  S
+> {
+  return (
+    inlineContentType in editor.schema.inlineContentSchema &&
+    editor.schema.inlineContentSchema[inlineContentType] ===
+      defaultInlineContentSchema[inlineContentType]
+  );
+}
+
 export function checkBlockIsDefaultType<
   BlockType extends keyof DefaultBlockSchema,
   I extends InlineContentSchema,

package/src/editor/BlockNoteEditor.test.ts

@@ -1,6 +1,6 @@
 import { expect, it } from "vitest";
-import { BlockNoteEditor } from "./BlockNoteEditor";
 import { getBlockInfoFromPos } from "../api/getBlockInfoFromPos";
+import { BlockNoteEditor } from "./BlockNoteEditor";
 
 /**
  * @vitest-environment jsdom
@@ -10,3 +10,50 @@ it("creates an editor", () => {
   const blockInfo = getBlockInfoFromPos(editor._tiptapEditor.state.doc, 2);
   expect(blockInfo?.contentNode.type.name).toEqual("paragraph");
 });
+
+it("immediately replaces doc", async () => {
+  const editor = BlockNoteEditor.create();
+  const blocks = await editor.tryParseMarkdownToBlocks(
+    "This is a normal text\n\n# And this is a large heading"
+  );
+  editor.replaceBlocks(editor.document, blocks);
+  expect(editor.document).toMatchInlineSnapshot(`
+    [
+      {
+        "children": [],
+        "content": [
+          {
+            "styles": {},
+            "text": "This is a normal text",
+            "type": "text",
+          },
+        ],
+        "id": "1",
+        "props": {
+          "backgroundColor": "default",
+          "textAlignment": "left",
+          "textColor": "default",
+        },
+        "type": "paragraph",
+      },
+      {
+        "children": [],
+        "content": [
+          {
+            "styles": {},
+            "text": "And this is a large heading",
+            "type": "text",
+          },
+        ],
+        "id": "2",
+        "props": {
+          "backgroundColor": "default",
+          "level": 1,
+          "textAlignment": "left",
+          "textColor": "default",
+        },
+        "type": "heading",
+      },
+    ]
+  `);
+});

package/src/editor/BlockNoteEditor.ts

@@ -1,5 +1,5 @@
-import { EditorOptions, Extension } from "@tiptap/core";
-import { Node } from "prosemirror-model";
+import { EditorOptions, Extension, getSchema } from "@tiptap/core";
+import { Node, Schema } from "prosemirror-model";
 // import "./blocknote.css";
 import * as Y from "yjs";
 import {
@@ -61,12 +61,13 @@ import {
   BlockNoteTipTapEditorOptions,
 } from "./BlockNoteTipTapEditor";
 
-// CSS
 import { PlaceholderPlugin } from "../extensions/Placeholder/PlaceholderPlugin";
 import { Dictionary } from "../i18n/dictionary";
 import { en } from "../i18n/locales";
-import "./Block.css";
-import "./editor.css";
+
+import { Transaction } from "@tiptap/pm/state";
+import { createInternalHTMLSerializer } from "../api/exporters/html/internalHTMLSerializer";
+import "../style.css";
 
 export type BlockNoteEditorOptions<
   BSchema extends BlockSchema,
@@ -109,7 +110,11 @@ export type BlockNoteEditorOptions<
   schema: BlockNoteSchema<BSchema, ISchema, SSchema>;
 
   /**
-   * A custom function to handle file uploads.
+   * The `uploadFile` method is what the editor uses when files need to be uploaded (for example when selecting an image to upload).
+   * This method should set when creating the editor as this is application-specific.
+   *
+   * `undefined` means the application doesn't support file uploads.
+   *
    * @param file The file that should be uploaded.
    * @returns The URL of the uploaded file OR an object containing props that should be set on the file block (such as an id)
    */
@@ -151,6 +156,15 @@ export type BlockNoteEditorOptions<
   _tiptapOptions: Partial<EditorOptions>;
 
   trailingBlock?: boolean;
+
+  /**
+   * Boolean indicating whether the editor is in headless mode.
+   * Headless mode means we can use features like importing / exporting blocks,
+   * but there's no underlying editor (UI) instantiated.
+   *
+   * You probably don't need to set this manually, but use the `server-util` package instead that uses this option internally
+   */
+  _headless: boolean;
 };
 
 const blockNoteTipTapOptions = {
@@ -164,12 +178,44 @@ export class BlockNoteEditor<
   ISchema extends InlineContentSchema = DefaultInlineContentSchema,
   SSchema extends StyleSchema = DefaultStyleSchema
 > {
-  public readonly _tiptapEditor: BlockNoteTipTapEditor & {
-    contentComponent: any;
-  };
+  private readonly _pmSchema: Schema;
+
+  /**
+   * Boolean indicating whether the editor is in headless mode.
+   * Headless mode means we can use features like importing / exporting blocks,
+   * but there's no underlying editor (UI) instantiated.
+   *
+   * You probably don't need to set this manually, but use the `server-util` package instead that uses this option internally
+   */
+  public readonly headless: boolean = false;
+
+  public readonly _tiptapEditor:
+    | BlockNoteTipTapEditor & {
+        contentComponent: any;
+      } = undefined as any; // TODO: Type should actually reflect that it can be `undefined` in headless mode
+
+  /**
+   * Used by React to store a reference to an `ElementRenderer` helper utility to make sure we can render React elements
+   * in the correct context (used by `ReactRenderUtil`)
+   */
+  public elementRenderer: ((node: any, container: HTMLElement) => void) | null =
+    null;
+
+  /**
+   * Cache of all blocks. This makes sure we don't have to "recompute" blocks if underlying Prosemirror Nodes haven't changed.
+   * This is especially useful when we want to keep track of the same block across multiple operations,
+   * with this cache, blocks stay the same object reference (referential equality with ===).
+   */
   public blockCache = new WeakMap<Node, Block<any, any, any>>();
+
+  /**
+   * The dictionary contains translations for the editor.
+   */
   public readonly dictionary: Dictionary;
 
+  /**
+   * The schema of the editor. The schema defines which Blocks, InlineContent, and Styles are available in the editor.
+   */
   public readonly schema: BlockNoteSchema<BSchema, ISchema, SSchema>;
 
   public readonly blockImplementations: BlockSpecs;
@@ -198,12 +244,25 @@ export class BlockNoteEditor<
     SSchema
   >;
 
+  /**
+   * The `uploadFile` method is what the editor uses when files need to be uploaded (for example when selecting an image to upload).
+   * This method should set when creating the editor as this is application-specific.
+   *
+   * `undefined` means the application doesn't support file uploads.
+   *
+   * @param file The file that should be uploaded.
+   * @returns The URL of the uploaded file OR an object containing props that should be set on the file block (such as an id)
+   */
   public readonly uploadFile:
     | ((file: File) => Promise<string | Record<string, any>>)
     | undefined;
 
   public readonly resolveFileUrl: (url: string) => Promise<string>;
 
+  public get pmSchema() {
+    return this._pmSchema;
+  }
+
   public static create<
     BSchema extends BlockSchema = DefaultBlockSchema,
     ISchema extends InlineContentSchema = DefaultInlineContentSchema,
@@ -246,6 +305,7 @@ export class BlockNoteEditor<
     const newOptions = {
       defaultStyles: true,
       schema: options.schema || BlockNoteSchema.create(),
+      _headless: false,
       ...options,
       placeholders: {
         ...this.dictionary.placeholders,
@@ -272,7 +332,6 @@ export class BlockNoteEditor<
     const extensions = getBlockNoteExtensions({
       editor: this,
       domAttributes: newOptions.domAttributes || {},
-      blockSchema: this.schema.blockSchema,
       blockSpecs: this.schema.blockSpecs,
       styleSpecs: this.schema.styleSpecs,
       inlineContentSpecs: this.schema.inlineContentSpecs,
@@ -300,6 +359,7 @@ export class BlockNoteEditor<
 
     this.uploadFile = newOptions.uploadFile;
     this.resolveFileUrl = newOptions.resolveFileUrl || (async (url) => url);
+    this.headless = newOptions._headless;
 
     if (newOptions.collaboration && newOptions.initialContent) {
       // eslint-disable-next-line no-console
@@ -354,22 +414,33 @@ export class BlockNoteEditor<
       },
     };
 
-    this._tiptapEditor = new BlockNoteTipTapEditor(
-      tiptapOptions,
-      this.schema.styleSchema
-    ) as BlockNoteTipTapEditor & {
-      contentComponent: any;
-    };
+    if (!this.headless) {
+      this._tiptapEditor = new BlockNoteTipTapEditor(
+        tiptapOptions,
+        this.schema.styleSchema
+      ) as BlockNoteTipTapEditor & {
+        contentComponent: any;
+      };
+      this._pmSchema = this._tiptapEditor.schema;
+    } else {
+      // In headless mode, we don't instantiate an underlying TipTap editor,
+      // but we still need the schema
+      this._pmSchema = getSchema(tiptapOptions.extensions!);
+    }
+  }
+
+  dispatch(tr: Transaction) {
+    this._tiptapEditor.dispatch(tr);
   }
 
   /**
    * Mount the editor to a parent DOM element. Call mount(undefined) to clean up
    *
-   * @warning Not needed for React, use BlockNoteView to take care of this
+   * @warning Not needed to call manually when using React, use BlockNoteView to take care of mounting
    */
-  public mount(parentElement?: HTMLElement | null) {
+  public mount = (parentElement?: HTMLElement | null) => {
     this._tiptapEditor.mount(parentElement);
-  }
+  };
 
   public get prosemirrorView() {
     return this._tiptapEditor.view;
@@ -391,7 +462,7 @@ export class BlockNoteEditor<
    * @deprecated, use `editor.document` instead
    */
   public get topLevelBlocks(): Block<BSchema, ISchema, SSchema>[] {
-    return this.topLevelBlocks;
+    return this.document;
   }
 
   /**
@@ -676,6 +747,12 @@ export class BlockNoteEditor<
    * @returns True if the editor is editable, false otherwise.
    */
   public get isEditable(): boolean {
+    if (!this._tiptapEditor) {
+      if (!this.headless) {
+        throw new Error("no editor, but also not headless?");
+      }
+      return false;
+    }
     return this._tiptapEditor.isEditable;
   }
 
@@ -684,6 +761,13 @@ export class BlockNoteEditor<
    * @param editable True to make the editor editable, or false to lock it.
    */
   public set isEditable(editable: boolean) {
+    if (!this._tiptapEditor) {
+      if (!this.headless) {
+        throw new Error("no editor, but also not headless?");
+      }
+      // not relevant on headless
+      return;
+    }
     if (this._tiptapEditor.options.editable !== editable) {
       this._tiptapEditor.setEditable(editable);
     }
@@ -749,7 +833,7 @@ export class BlockNoteEditor<
   public insertInlineContent(content: PartialInlineContent<ISchema, SSchema>) {
     const nodes = inlineContentToNodes(
       content,
-      this._tiptapEditor.schema,
+      this.pmSchema,
       this.schema.styleSchema
     );
 
@@ -873,10 +957,10 @@ export class BlockNoteEditor<
       text = this._tiptapEditor.state.doc.textBetween(from, to);
     }
 
-    const mark = this._tiptapEditor.schema.mark("link", { href: url });
+    const mark = this.pmSchema.mark("link", { href: url });
 
-    this._tiptapEditor.view.dispatch(
-      this._tiptapEditor.view.state.tr
+    this.dispatch(
+      this._tiptapEditor.state.tr
         .insertText(text, from, to)
         .addMark(from, from + text.length, mark)
     );
@@ -920,23 +1004,35 @@ export class BlockNoteEditor<
     this._tiptapEditor.commands.liftListItem("blockContainer");
   }
 
-  // TODO: Fix when implementing HTML/Markdown import & export
   /**
-   * Serializes blocks into an HTML string. To better conform to HTML standards, children of blocks which aren't list
+   * Exports blocks into a simplified HTML string. To better conform to HTML standards, children of blocks which aren't list
    * items are un-nested in the output HTML.
+   *
    * @param blocks An array of blocks that should be serialized into HTML.
    * @returns The blocks, serialized as an HTML string.
    */
   public async blocksToHTMLLossy(
-    blocks: Block<BSchema, ISchema, SSchema>[] = this.document
+    blocks: PartialBlock<BSchema, ISchema, SSchema>[] = this.document
   ): Promise<string> {
-    const exporter = createExternalHTMLExporter(
-      this._tiptapEditor.schema,
-      this
-    );
-    return exporter.exportBlocks(blocks);
+    const exporter = createExternalHTMLExporter(this.pmSchema, this);
+    return exporter.exportBlocks(blocks, {});
   }
 
+  /**
+   * Serializes blocks into an HTML string in the format that would normally be rendered by the editor.
+   *
+   * Use this method if you want to server-side render HTML (for example, a blog post that has been edited in BlockNote)
+   * and serve it to users without loading the editor on the client (i.e.: displaying the blog post)
+   *
+   * @param blocks An array of blocks that should be serialized into HTML.
+   * @returns The blocks, serialized as an HTML string.
+   */
+  public async blocksToFullHTML(
+    blocks: PartialBlock<BSchema, ISchema, SSchema>[]
+  ): Promise<string> {
+    const exporter = createInternalHTMLSerializer(this.pmSchema, this);
+    return exporter.serializeBlocks(blocks, {});
+  }
   /**
    * Parses blocks from an HTML string. Tries to create `Block` objects out of any HTML block-level elements, and
    * `InlineNode` objects from any HTML inline elements, though not all element types are recognized. If BlockNote
@@ -952,7 +1048,7 @@ export class BlockNoteEditor<
       this.schema.blockSchema,
       this.schema.inlineContentSchema,
       this.schema.styleSchema,
-      this._tiptapEditor.schema
+      this.pmSchema
     );
   }
 
@@ -963,9 +1059,9 @@ export class BlockNoteEditor<
    * @returns The blocks, serialized as a Markdown string.
    */
   public async blocksToMarkdownLossy(
-    blocks: Block<BSchema, ISchema, SSchema>[] = this.document
+    blocks: PartialBlock<BSchema, ISchema, SSchema>[] = this.document
   ): Promise<string> {
-    return blocksToMarkdown(blocks, this._tiptapEditor.schema, this);
+    return blocksToMarkdown(blocks, this.pmSchema, this, {});
   }
 
   /**
@@ -983,7 +1079,7 @@ export class BlockNoteEditor<
       this.schema.blockSchema,
       this.schema.inlineContentSchema,
       this.schema.styleSchema,
-      this._tiptapEditor.schema
+      this.pmSchema
     );
   }
 
@@ -1008,6 +1104,11 @@ export class BlockNoteEditor<
   public onChange(
     callback: (editor: BlockNoteEditor<BSchema, ISchema, SSchema>) => void
   ) {
+    if (this.headless) {
+      // Note: would be nice if this is possible in headless mode as well
+      return;
+    }
+
     const cb = () => {
       callback(this);
     };
@@ -1028,6 +1129,10 @@ export class BlockNoteEditor<
   public onSelectionChange(
     callback: (editor: BlockNoteEditor<BSchema, ISchema, SSchema>) => void
   ) {
+    if (this.headless) {
+      return;
+    }
+
     const cb = () => {
       callback(this);
     };
@@ -1038,4 +1143,16 @@ export class BlockNoteEditor<
       this._tiptapEditor.off("selectionUpdate", cb);
     };
   }
+
+  public openSelectionMenu(triggerCharacter: string) {
+    this.prosemirrorView.focus();
+    this.prosemirrorView.dispatch(
+      this.prosemirrorView.state.tr
+        .scrollIntoView()
+        .setMeta(this.suggestionMenus.plugin, {
+          triggerCharacter: triggerCharacter,
+          fromUserInput: false,
+        })
+    );
+  }
 }

package/src/editor/BlockNoteExtensions.ts

@@ -40,7 +40,6 @@ export const getBlockNoteExtensions = <
 >(opts: {
   editor: BlockNoteEditor<BSchema, I, S>;
   domAttributes: Partial<BlockNoteDOMAttributes>;
-  blockSchema: BSchema;
   blockSpecs: BlockSpecs;
   inlineContentSpecs: InlineContentSpecs;
   styleSpecs: StyleSpecs;

package/src/editor/BlockNoteTipTapEditor.ts

@@ -3,8 +3,8 @@ import { EditorOptions, createDocument } from "@tiptap/core";
 import { Editor as TiptapEditor } from "@tiptap/core";
 import { Node } from "@tiptap/pm/model";
 import { EditorView } from "@tiptap/pm/view";
-import { EditorState } from "prosemirror-state";
 
+import { EditorState, Transaction } from "@tiptap/pm/state";
 import { blockToNode } from "../api/nodeConversions/nodeConversions";
 import { PartialBlock } from "../blocks/defaultBlocks";
 import { StyleSchema } from "../schema";
@@ -115,10 +115,13 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
     return this._state;
   }
 
-  createView() {
-    // no-op
-    // Disable default call to `createView` in the Editor constructor.
-    // We should call `createView` manually only when a DOM element is available
+  dispatch(tr: Transaction) {
+    if (this.view) {
+      this.view.dispatch(tr);
+    } else {
+      // before view has been initialized
+      this._state = this.state.apply(tr);
+    }
   }
 
   /**
@@ -164,3 +167,9 @@ export class BlockNoteTipTapEditor extends TiptapEditor {
     }
   };
 }
+
+(BlockNoteTipTapEditor.prototype as any).createView = () => {
+  // no-op
+  // Disable default call to `createView` in the Editor constructor.
+  // We should call `createView` manually only when a DOM element is available
+};