@blocknote/core 0.27.2 → 0.29.0

package/src/api/blockManipulation/commands/insertBlocks/insertBlocks.test.ts

@@ -1,137 +1,170 @@
 import { describe, expect, it } from "vitest";
 
 import { setupTestEnv } from "../../setupTestEnv.js";
-import { insertBlocks } from "./insertBlocks.js";
+import { insertBlocks as insertBlocksTr } from "./insertBlocks.js";
+import { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
+import { PartialBlock } from "../../../../blocks/defaultBlocks.js";
+import { BlockIdentifier } from "../../../../schema/index.js";
 
 const getEditor = setupTestEnv();
 
+function insertBlocks(
+  editor: BlockNoteEditor,
+  blocksToInsert: PartialBlock<any, any, any>[],
+  referenceBlock: BlockIdentifier,
+  placement: "before" | "after" = "before"
+) {
+  return editor.transact((tr) =>
+    insertBlocksTr(tr, blocksToInsert, referenceBlock, placement)
+  );
+}
+
 describe("Test insertBlocks", () => {
   it("Insert single basic block before (without type)", () => {
-    insertBlocks(getEditor(), [{ content: "test" }], "paragraph-0", "before");
+    expect(
+      insertBlocks(getEditor(), [{ content: "test" }], "paragraph-0", "before")
+    ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();
   });
 
   it("Insert single basic block before", () => {
-    insertBlocks(getEditor(), [{ type: "paragraph" }], "paragraph-0", "before");
+    expect(
+      insertBlocks(
+        getEditor(),
+        [{ type: "paragraph" }],
+        "paragraph-0",
+        "before"
+      )
+    ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();
   });
 
   it("Insert single basic block after", () => {
-    insertBlocks(getEditor(), [{ type: "paragraph" }], "paragraph-0", "after");
+    expect(
+      insertBlocks(getEditor(), [{ type: "paragraph" }], "paragraph-0", "after")
+    ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();
   });
 
   it("Insert multiple blocks before", () => {
-    insertBlocks(
-      getEditor(),
-      [
-        { type: "paragraph", content: "Inserted paragraph 1" },
-        { type: "paragraph", content: "Inserted paragraph 2" },
-        { type: "paragraph", content: "Inserted paragraph 3" },
-      ],
-      "paragraph-0",
-      "before"
-    );
+    expect(
+      insertBlocks(
+        getEditor(),
+        [
+          { type: "paragraph", content: "Inserted paragraph 1" },
+          { type: "paragraph", content: "Inserted paragraph 2" },
+          { type: "paragraph", content: "Inserted paragraph 3" },
+        ],
+        "paragraph-0",
+        "before"
+      )
+    ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();
   });
 
   it("Insert multiple blocks after", () => {
-    insertBlocks(
-      getEditor(),
-      [
-        { type: "paragraph", content: "Inserted paragraph 1" },
-        { type: "paragraph", content: "Inserted paragraph 2" },
-        { type: "paragraph", content: "Inserted paragraph 3" },
-      ],
-      "paragraph-0",
-      "after"
-    );
+    expect(
+      insertBlocks(
+        getEditor(),
+        [
+          { type: "paragraph", content: "Inserted paragraph 1" },
+          { type: "paragraph", content: "Inserted paragraph 2" },
+          { type: "paragraph", content: "Inserted paragraph 3" },
+        ],
+        "paragraph-0",
+        "after"
+      )
+    ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();
   });
 
   it("Insert single complex block before", () => {
-    insertBlocks(
-      getEditor(),
-      [
-        {
-          id: "inserted-heading-with-everything",
-          type: "heading",
-          props: {
-            backgroundColor: "red",
-            level: 2,
-            textAlignment: "center",
-            textColor: "red",
-          },
-          content: [
-            { type: "text", text: "Heading", styles: { bold: true } },
-            { type: "text", text: " with styled ", styles: {} },
-            { type: "text", text: "content", styles: { italic: true } },
-          ],
-          children: [
-            {
-              id: "inserted-nested-paragraph-2",
-              type: "paragraph",
-              content: "Nested Paragraph 2",
-              children: [
-                {
-                  id: "inserted-double-nested-paragraph-2",
-                  type: "paragraph",
-                  content: "Double Nested Paragraph 2",
-                },
-              ],
+    expect(
+      insertBlocks(
+        getEditor(),
+        [
+          {
+            id: "inserted-heading-with-everything",
+            type: "heading",
+            props: {
+              backgroundColor: "red",
+              level: 2,
+              textAlignment: "center",
+              textColor: "red",
             },
-          ],
-        },
-      ],
-      "paragraph-0",
-      "before"
-    );
+            content: [
+              { type: "text", text: "Heading", styles: { bold: true } },
+              { type: "text", text: " with styled ", styles: {} },
+              { type: "text", text: "content", styles: { italic: true } },
+            ],
+            children: [
+              {
+                id: "inserted-nested-paragraph-2",
+                type: "paragraph",
+                content: "Nested Paragraph 2",
+                children: [
+                  {
+                    id: "inserted-double-nested-paragraph-2",
+                    type: "paragraph",
+                    content: "Double Nested Paragraph 2",
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+        "paragraph-0",
+        "before"
+      )
+    ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();
   });
 
   it("Insert single complex block after", () => {
-    insertBlocks(
-      getEditor(),
-      [
-        {
-          id: "inserted-heading-with-everything",
-          type: "heading",
-          props: {
-            backgroundColor: "red",
-            level: 2,
-            textAlignment: "center",
-            textColor: "red",
-          },
-          content: [
-            { type: "text", text: "Heading", styles: { bold: true } },
-            { type: "text", text: " with styled ", styles: {} },
-            { type: "text", text: "content", styles: { italic: true } },
-          ],
-          children: [
-            {
-              id: "inserted-nested-paragraph-2",
-              type: "paragraph",
-              content: "Nested Paragraph 2",
-              children: [
-                {
-                  id: "inserted-double-nested-paragraph-2",
-                  type: "paragraph",
-                  content: "Double Nested Paragraph 2",
-                },
-              ],
+    expect(
+      insertBlocks(
+        getEditor(),
+        [
+          {
+            id: "inserted-heading-with-everything",
+            type: "heading",
+            props: {
+              backgroundColor: "red",
+              level: 2,
+              textAlignment: "center",
+              textColor: "red",
             },
-          ],
-        },
-      ],
-      "paragraph-0",
-      "after"
-    );
+            content: [
+              { type: "text", text: "Heading", styles: { bold: true } },
+              { type: "text", text: " with styled ", styles: {} },
+              { type: "text", text: "content", styles: { italic: true } },
+            ],
+            children: [
+              {
+                id: "inserted-nested-paragraph-2",
+                type: "paragraph",
+                content: "Nested Paragraph 2",
+                children: [
+                  {
+                    id: "inserted-double-nested-paragraph-2",
+                    type: "paragraph",
+                    content: "Double Nested Paragraph 2",
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+        "paragraph-0",
+        "after"
+      )
+    ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();
   });

package/src/api/blockManipulation/commands/insertBlocks/insertBlocks.ts

@@ -1,7 +1,6 @@
-import { Node } from "prosemirror-model";
+import { Fragment, Slice } from "prosemirror-model";
 
 import { Block, PartialBlock } from "../../../../blocks/defaultBlocks.js";
-import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor";
 import {
   BlockIdentifier,
   BlockSchema,
@@ -11,63 +10,46 @@ import {
 import { blockToNode } from "../../../nodeConversions/blockToNode.js";
 import { nodeToBlock } from "../../../nodeConversions/nodeToBlock.js";
 import { getNodeById } from "../../../nodeUtil.js";
+import { ReplaceStep } from "prosemirror-transform";
+import type { Transaction } from "prosemirror-state";
+import { getPmSchema } from "../../../pmUtil.js";
 
 export function insertBlocks<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema
 >(
-  editor: BlockNoteEditor<BSchema, I, S>,
+  tr: Transaction,
   blocksToInsert: PartialBlock<BSchema, I, S>[],
   referenceBlock: BlockIdentifier,
   placement: "before" | "after" = "before"
 ): Block<BSchema, I, S>[] {
   const id =
     typeof referenceBlock === "string" ? referenceBlock : referenceBlock.id;
+  const pmSchema = getPmSchema(tr);
+  const nodesToInsert = blocksToInsert.map((block) =>
+    blockToNode(block, pmSchema)
+  );
 
-  const nodesToInsert: Node[] = [];
-  for (const blockSpec of blocksToInsert) {
-    nodesToInsert.push(
-      blockToNode(blockSpec, editor.pmSchema, editor.schema.styleSchema)
-    );
-  }
-
-  const posInfo = getNodeById(id, editor._tiptapEditor.state.doc);
+  const posInfo = getNodeById(id, tr.doc);
   if (!posInfo) {
     throw new Error(`Block with ID ${id} not found`);
   }
 
-  // TODO: we might want to use the ReplaceStep directly here instead of insert,
-  // because the fitting algorithm should not be necessary and might even cause unexpected behavior
-  if (placement === "before") {
-    editor.dispatch(
-      editor._tiptapEditor.state.tr.insert(posInfo.posBeforeNode, nodesToInsert)
-    );
-  }
-
+  let pos = posInfo.posBeforeNode;
   if (placement === "after") {
-    editor.dispatch(
-      editor._tiptapEditor.state.tr.insert(
-        posInfo.posBeforeNode + posInfo.node.nodeSize,
-        nodesToInsert
-      )
-    );
+    pos += posInfo.node.nodeSize;
   }
 
+  tr.step(
+    new ReplaceStep(pos, pos, new Slice(Fragment.from(nodesToInsert), 0, 0))
+  );
+
   // Now that the `PartialBlock`s have been converted to nodes, we can
   // re-convert them into full `Block`s.
-  const insertedBlocks: Block<BSchema, I, S>[] = [];
-  for (const node of nodesToInsert) {
-    insertedBlocks.push(
-      nodeToBlock(
-        node,
-        editor.schema.blockSchema,
-        editor.schema.inlineContentSchema,
-        editor.schema.styleSchema,
-        editor.blockCache
-      )
-    );
-  }
+  const insertedBlocks = nodesToInsert.map((node) =>
+    nodeToBlock(node, pmSchema)
+  );
 
   return insertedBlocks;
 }

package/src/api/blockManipulation/commands/mergeBlocks/mergeBlocks.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { getBlockInfoFromSelection } from "../../../getBlockInfoFromPos.js";
+import { getBlockInfoFromTransaction } from "../../../getBlockInfoFromPos.js";
 import { setupTestEnv } from "../../setupTestEnv.js";
 import { mergeBlocksCommand } from "./mergeBlocks.js";
 
@@ -13,8 +13,9 @@ function mergeBlocks(posBetweenBlocks: number) {
 }
 
 function getPosBeforeSelectedBlock() {
-  return getBlockInfoFromSelection(getEditor()._tiptapEditor.state).bnBlock
-    .beforePos;
+  return getEditor().transact(
+    (tr) => getBlockInfoFromTransaction(tr).bnBlock.beforePos
+  );
 }
 
 describe("Test mergeBlocks", () => {
@@ -61,15 +62,16 @@ describe("Test mergeBlocks", () => {
   it("Selection is updated", () => {
     getEditor().setTextCursorPosition("paragraph-0", "end");
 
-    const firstBlockEndOffset =
-      getEditor()._tiptapEditor.state.selection.$anchor.parentOffset;
+    const firstBlockEndOffset = getEditor().transact(
+      (tr) => tr.selection.$anchor.parentOffset
+    );
 
     getEditor().setTextCursorPosition("paragraph-1");
 
     mergeBlocks(getPosBeforeSelectedBlock());
 
     const anchorIsAtOldFirstBlockEndPos =
-      getEditor()._tiptapEditor.state.selection.$anchor.parentOffset ===
+      getEditor().transact((tr) => tr.selection.$anchor.parentOffset) ===
       firstBlockEndOffset;
 
     expect(anchorIsAtOldFirstBlockEndPos).toBeTruthy();

package/src/api/blockManipulation/commands/moveBlocks/moveBlocks.test.ts

@@ -2,7 +2,7 @@ import { NodeSelection, TextSelection } from "prosemirror-state";
 import { CellSelection } from "prosemirror-tables";
 import { describe, expect, it } from "vitest";
 
-import { getBlockInfoFromSelection } from "../../../getBlockInfoFromPos.js";
+import { getBlockInfoFromTransaction } from "../../../getBlockInfoFromPos.js";
 import { setupTestEnv } from "../../setupTestEnv.js";
 import {
   moveBlocksDown,
@@ -13,7 +13,9 @@ import {
 const getEditor = setupTestEnv();
 
 function makeSelectionSpanContent(selectionType: "text" | "node" | "cell") {
-  const blockInfo = getBlockInfoFromSelection(getEditor()._tiptapEditor.state);
+  const blockInfo = getEditor().transact((tr) =>
+    getBlockInfoFromTransaction(tr)
+  );
   if (!blockInfo.isBlockContainer) {
     throw new Error(
       `Selection points to a ${blockInfo.blockNoteType} node, not a blockContainer node`
@@ -21,34 +23,26 @@ function makeSelectionSpanContent(selectionType: "text" | "node" | "cell") {
   }
   const { blockContent } = blockInfo;
 
+  const editor = getEditor();
   if (selectionType === "cell") {
-    getEditor().dispatch(
-      getEditor()._tiptapEditor.state.tr.setSelection(
+    editor.transact((tr) =>
+      tr.setSelection(
         CellSelection.create(
-          getEditor()._tiptapEditor.state.doc,
-          getEditor()
-            ._tiptapEditor.state.doc.resolve(blockContent.beforePos + 3)
-            .before(),
-          getEditor()
-            ._tiptapEditor.state.doc.resolve(blockContent.afterPos - 3)
-            .before()
+          tr.doc,
+          tr.doc.resolve(blockContent.beforePos + 3).before(),
+          tr.doc.resolve(blockContent.afterPos - 3).before()
         )
       )
     );
   } else if (selectionType === "node") {
-    getEditor().dispatch(
-      getEditor()._tiptapEditor.state.tr.setSelection(
-        NodeSelection.create(
-          getEditor()._tiptapEditor.state.doc,
-          blockContent.beforePos
-        )
-      )
+    editor.transact((tr) =>
+      tr.setSelection(NodeSelection.create(tr.doc, blockContent.beforePos))
     );
   } else {
-    getEditor().dispatch(
-      getEditor()._tiptapEditor.state.tr.setSelection(
+    editor.transact((tr) =>
+      tr.setSelection(
         TextSelection.create(
-          getEditor()._tiptapEditor.state.doc,
+          tr.doc,
           blockContent.beforePos + 1,
           blockContent.afterPos - 1
         )
@@ -64,12 +58,12 @@ describe("Test moveSelectedBlockAndSelection", () => {
 
     moveSelectedBlocksAndSelection(getEditor(), "paragraph-0", "before");
 
-    const selection = getEditor()._tiptapEditor.state.selection;
+    const selection = getEditor().transact((tr) => tr.selection);
     getEditor().setTextCursorPosition("paragraph-1");
     makeSelectionSpanContent("text");
 
     expect(
-      selection.eq(getEditor()._tiptapEditor.state.selection)
+      selection.eq(getEditor().transact((tr) => tr.selection))
     ).toBeTruthy();
   });
 
@@ -79,12 +73,12 @@ describe("Test moveSelectedBlockAndSelection", () => {
 
     moveSelectedBlocksAndSelection(getEditor(), "paragraph-0", "before");
 
-    const selection = getEditor()._tiptapEditor.state.selection;
+    const selection = getEditor().transact((tr) => tr.selection);
     getEditor().setTextCursorPosition("image-0");
     makeSelectionSpanContent("node");
 
     expect(
-      selection.eq(getEditor()._tiptapEditor.state.selection)
+      selection.eq(getEditor().transact((tr) => tr.selection))
     ).toBeTruthy();
   });
 
@@ -94,12 +88,12 @@ describe("Test moveSelectedBlockAndSelection", () => {
 
     moveSelectedBlocksAndSelection(getEditor(), "paragraph-0", "before");
 
-    const selection = getEditor()._tiptapEditor.state.selection;
+    const selection = getEditor().transact((tr) => tr.selection);
     getEditor().setTextCursorPosition("table-0");
     makeSelectionSpanContent("cell");
 
     expect(
-      selection.eq(getEditor()._tiptapEditor.state.selection)
+      selection.eq(getEditor().transact((tr) => tr.selection))
     ).toBeTruthy();
   });
 
@@ -108,11 +102,11 @@ describe("Test moveSelectedBlockAndSelection", () => {
 
     moveSelectedBlocksAndSelection(getEditor(), "paragraph-0", "before");
 
-    const selection = getEditor()._tiptapEditor.state.selection;
+    const selection = getEditor().transact((tr) => tr.selection);
     getEditor().setSelection("paragraph-1", "paragraph-2");
 
     expect(
-      selection.eq(getEditor()._tiptapEditor.state.selection)
+      selection.eq(getEditor().transact((tr) => tr.selection))
     ).toBeTruthy();
   });
 
@@ -121,11 +115,11 @@ describe("Test moveSelectedBlockAndSelection", () => {
 
     moveSelectedBlocksAndSelection(getEditor(), "paragraph-0", "before");
 
-    const selection = getEditor()._tiptapEditor.state.selection;
+    const selection = getEditor().transact((tr) => tr.selection);
     getEditor().setSelection("paragraph-6", "table-0");
 
     expect(
-      selection.eq(getEditor()._tiptapEditor.state.selection)
+      selection.eq(getEditor().transact((tr) => tr.selection))
     ).toBeTruthy();
   });
 });