@blocknote/core 0.27.2 → 0.29.0

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

@@ -1,4 +1,9 @@
-import { NodeSelection, Selection, TextSelection } from "prosemirror-state";
+import {
+  NodeSelection,
+  Selection,
+  TextSelection,
+  Transaction,
+} from "prosemirror-state";
 import { CellSelection } from "prosemirror-tables";
 
 import { Block } from "../../../../blocks/defaultBlocks.js";
@@ -38,36 +43,35 @@ type BlockSelectionData = (
 function getBlockSelectionData(
   editor: BlockNoteEditor<any, any, any>
 ): BlockSelectionData {
-  const state = editor._tiptapEditor.state;
-  const selection = state.selection;
-
-  const anchorBlockPosInfo = getNearestBlockPos(state.doc, selection.anchor);
-
-  if (selection instanceof CellSelection) {
-    return {
-      type: "cell" as const,
-      anchorBlockId: anchorBlockPosInfo.node.attrs.id,
-      anchorCellOffset:
-        selection.$anchorCell.pos - anchorBlockPosInfo.posBeforeNode,
-      headCellOffset:
-        selection.$headCell.pos - anchorBlockPosInfo.posBeforeNode,
-    };
-  } else if (editor._tiptapEditor.state.selection instanceof NodeSelection) {
-    return {
-      type: "node" as const,
-      anchorBlockId: anchorBlockPosInfo.node.attrs.id,
-    };
-  } else {
-    const headBlockPosInfo = getNearestBlockPos(state.doc, selection.head);
-
-    return {
-      type: "text" as const,
-      anchorBlockId: anchorBlockPosInfo.node.attrs.id,
-      headBlockId: headBlockPosInfo.node.attrs.id,
-      anchorOffset: selection.anchor - anchorBlockPosInfo.posBeforeNode,
-      headOffset: selection.head - headBlockPosInfo.posBeforeNode,
-    };
-  }
+  return editor.transact((tr) => {
+    const anchorBlockPosInfo = getNearestBlockPos(tr.doc, tr.selection.anchor);
+
+    if (tr.selection instanceof CellSelection) {
+      return {
+        type: "cell" as const,
+        anchorBlockId: anchorBlockPosInfo.node.attrs.id,
+        anchorCellOffset:
+          tr.selection.$anchorCell.pos - anchorBlockPosInfo.posBeforeNode,
+        headCellOffset:
+          tr.selection.$headCell.pos - anchorBlockPosInfo.posBeforeNode,
+      };
+    } else if (tr.selection instanceof NodeSelection) {
+      return {
+        type: "node" as const,
+        anchorBlockId: anchorBlockPosInfo.node.attrs.id,
+      };
+    } else {
+      const headBlockPosInfo = getNearestBlockPos(tr.doc, tr.selection.head);
+
+      return {
+        type: "text" as const,
+        anchorBlockId: anchorBlockPosInfo.node.attrs.id,
+        headBlockId: headBlockPosInfo.node.attrs.id,
+        anchorOffset: tr.selection.anchor - anchorBlockPosInfo.posBeforeNode,
+        headOffset: tr.selection.head - headBlockPosInfo.posBeforeNode,
+      };
+    }
+  });
 }
 
 /**
@@ -77,18 +81,15 @@ function getBlockSelectionData(
  * positions of their surrounding blocks, as well as the IDs of those blocks. We
  * can then recreate the selection by finding the blocks with those IDs, getting
  * their before positions, and adding the offsets to those positions.
- * @param editor The BlockNote editor instance to update the selection in.
+ * @param tr The transaction to update the selection in.
  * @param data The selection data to update the selection with (generated by
  * `getBlockSelectionData`).
  */
 function updateBlockSelectionFromData(
-  editor: BlockNoteEditor<any, any, any>,
+  tr: Transaction,
   data: BlockSelectionData
 ) {
-  const anchorBlockPos = getNodeById(
-    data.anchorBlockId,
-    editor._tiptapEditor.state.doc
-  )?.posBeforeNode;
+  const anchorBlockPos = getNodeById(data.anchorBlockId, tr.doc)?.posBeforeNode;
   if (anchorBlockPos === undefined) {
     throw new Error(
       `Could not find block with ID ${data.anchorBlockId} to update selection`
@@ -98,20 +99,14 @@ function updateBlockSelectionFromData(
   let selection: Selection;
   if (data.type === "cell") {
     selection = CellSelection.create(
-      editor._tiptapEditor.state.doc,
+      tr.doc,
       anchorBlockPos + data.anchorCellOffset,
       anchorBlockPos + data.headCellOffset
     );
   } else if (data.type === "node") {
-    selection = NodeSelection.create(
-      editor._tiptapEditor.state.doc,
-      anchorBlockPos + 1
-    );
+    selection = NodeSelection.create(tr.doc, anchorBlockPos + 1);
   } else {
-    const headBlockPos = getNodeById(
-      data.headBlockId,
-      editor._tiptapEditor.state.doc
-    )?.posBeforeNode;
+    const headBlockPos = getNodeById(data.headBlockId, tr.doc)?.posBeforeNode;
     if (headBlockPos === undefined) {
       throw new Error(
         `Could not find block with ID ${data.headBlockId} to update selection`
@@ -119,13 +114,13 @@ function updateBlockSelectionFromData(
     }
 
     selection = TextSelection.create(
-      editor._tiptapEditor.state.doc,
+      tr.doc,
       anchorBlockPos + data.anchorOffset,
       headBlockPos + data.headOffset
     );
   }
 
-  editor.dispatch(editor._tiptapEditor.state.tr.setSelection(selection));
+  tr.setSelection(selection);
 }
 
 /**
@@ -168,15 +163,18 @@ export function moveSelectedBlocksAndSelection(
   referenceBlock: BlockIdentifier,
   placement: "before" | "after"
 ) {
-  const blocks = editor.getSelection()?.blocks || [
-    editor.getTextCursorPosition().block,
-  ];
-  const selectionData = getBlockSelectionData(editor);
-
-  editor.removeBlocks(blocks);
-  editor.insertBlocks(flattenColumns(blocks), referenceBlock, placement);
-
-  updateBlockSelectionFromData(editor, selectionData);
+  // We want this to be a single step in the undo history
+  editor.transact((tr) => {
+    const blocks = editor.getSelection()?.blocks || [
+      editor.getTextCursorPosition().block,
+    ];
+    const selectionData = getBlockSelectionData(editor);
+
+    editor.removeBlocks(blocks);
+    editor.insertBlocks(flattenColumns(blocks), referenceBlock, placement);
+
+    updateBlockSelectionFromData(tr, selectionData);
+  });
 }
 
 // Checks if a block is in a valid place after being moved. This check is
@@ -292,45 +290,49 @@ function getMoveDownPlacement(
 }
 
 export function moveBlocksUp(editor: BlockNoteEditor<any, any, any>) {
-  const selection = editor.getSelection();
-  const block = selection?.blocks[0] || editor.getTextCursorPosition().block;
+  editor.transact(() => {
+    const selection = editor.getSelection();
+    const block = selection?.blocks[0] || editor.getTextCursorPosition().block;
 
-  const moveUpPlacement = getMoveUpPlacement(
-    editor,
-    editor.getPrevBlock(block),
-    editor.getParentBlock(block)
-  );
+    const moveUpPlacement = getMoveUpPlacement(
+      editor,
+      editor.getPrevBlock(block),
+      editor.getParentBlock(block)
+    );
 
-  if (!moveUpPlacement) {
-    return;
-  }
+    if (!moveUpPlacement) {
+      return;
+    }
 
-  moveSelectedBlocksAndSelection(
-    editor,
-    moveUpPlacement.referenceBlock,
-    moveUpPlacement.placement
-  );
+    moveSelectedBlocksAndSelection(
+      editor,
+      moveUpPlacement.referenceBlock,
+      moveUpPlacement.placement
+    );
+  });
 }
 
 export function moveBlocksDown(editor: BlockNoteEditor<any, any, any>) {
-  const selection = editor.getSelection();
-  const block =
-    selection?.blocks[selection?.blocks.length - 1] ||
-    editor.getTextCursorPosition().block;
-
-  const moveDownPlacement = getMoveDownPlacement(
-    editor,
-    editor.getNextBlock(block),
-    editor.getParentBlock(block)
-  );
-
-  if (!moveDownPlacement) {
-    return;
-  }
+  editor.transact(() => {
+    const selection = editor.getSelection();
+    const block =
+      selection?.blocks[selection?.blocks.length - 1] ||
+      editor.getTextCursorPosition().block;
 
-  moveSelectedBlocksAndSelection(
-    editor,
-    moveDownPlacement.referenceBlock,
-    moveDownPlacement.placement
-  );
+    const moveDownPlacement = getMoveDownPlacement(
+      editor,
+      editor.getNextBlock(block),
+      editor.getParentBlock(block)
+    );
+
+    if (!moveDownPlacement) {
+      return;
+    }
+
+    moveSelectedBlocksAndSelection(
+      editor,
+      moveDownPlacement.referenceBlock,
+      moveDownPlacement.placement
+    );
+  });
 }

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

@@ -1,9 +1,9 @@
 import { Fragment, NodeType, Slice } from "prosemirror-model";
-import { EditorState } from "prosemirror-state";
+import { EditorState, Transaction } from "prosemirror-state";
 import { ReplaceAroundStep } from "prosemirror-transform";
 
 import { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
-import { getBlockInfoFromSelection } from "../../../getBlockInfoFromPos.js";
+import { getBlockInfoFromTransaction } from "../../../getBlockInfoFromPos.js";
 
 // TODO: Unit tests
 /**
@@ -12,7 +12,7 @@ import { getBlockInfoFromSelection } from "../../../getBlockInfoFromPos.js";
  * The original function derives too many information from the parentnode and itemtype
  */
 function sinkListItem(itemType: NodeType, groupType: NodeType) {
-  return function ({ state, dispatch }: { state: EditorState; dispatch: any }) {
+  return function (state: EditorState, dispatch?: (tr: Transaction) => void) {
     const { $from, $to } = state.selection;
     const range = $from.blockRange(
       $to,
@@ -67,11 +67,11 @@ function sinkListItem(itemType: NodeType, groupType: NodeType) {
 }
 
 export function nestBlock(editor: BlockNoteEditor<any, any, any>) {
-  return editor._tiptapEditor.commands.command(
+  return editor.exec((state, dispatch) =>
     sinkListItem(
-      editor._tiptapEditor.schema.nodes["blockContainer"],
-      editor._tiptapEditor.schema.nodes["blockGroup"]
-    )
+      state.schema.nodes["blockContainer"],
+      state.schema.nodes["blockGroup"]
+    )(state, dispatch)
   );
 }
 
@@ -80,21 +80,17 @@ export function unnestBlock(editor: BlockNoteEditor<any, any, any>) {
 }
 
 export function canNestBlock(editor: BlockNoteEditor<any, any, any>) {
-  const { bnBlock: blockContainer } = getBlockInfoFromSelection(
-    editor._tiptapEditor.state
-  );
+  return editor.transact((tr) => {
+    const { bnBlock: blockContainer } = getBlockInfoFromTransaction(tr);
 
-  return (
-    editor._tiptapEditor.state.doc.resolve(blockContainer.beforePos)
-      .nodeBefore !== null
-  );
+    return tr.doc.resolve(blockContainer.beforePos).nodeBefore !== null;
+  });
 }
+
 export function canUnnestBlock(editor: BlockNoteEditor<any, any, any>) {
-  const { bnBlock: blockContainer } = getBlockInfoFromSelection(
-    editor._tiptapEditor.state
-  );
+  return editor.transact((tr) => {
+    const { bnBlock: blockContainer } = getBlockInfoFromTransaction(tr);
 
-  return (
-    editor._tiptapEditor.state.doc.resolve(blockContainer.beforePos).depth > 1
-  );
+    return tr.doc.resolve(blockContainer.beforePos).depth > 1;
+  });
 }

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

@@ -1,10 +1,23 @@
 import { describe, expect, it } from "vitest";
 
 import { setupTestEnv } from "../../setupTestEnv.js";
-import { replaceBlocks } from "./replaceBlocks.js";
+import { removeAndInsertBlocks } from "./replaceBlocks.js";
+import { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
+import { PartialBlock } from "../../../../blocks/defaultBlocks.js";
+import { BlockIdentifier } from "../../../../schema/index.js";
 
 const getEditor = setupTestEnv();
 
+function replaceBlocks(
+  editor: BlockNoteEditor,
+  blocksToRemove: BlockIdentifier[],
+  blocksToInsert: PartialBlock<any, any, any>[]
+) {
+  return editor.transact((tr) =>
+    removeAndInsertBlocks(tr, blocksToRemove, blocksToInsert)
+  );
+}
+
 describe("Test replaceBlocks", () => {
   it("Remove single block", () => {
     replaceBlocks(getEditor(), ["paragraph-0"], []);

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

@@ -1,38 +1,34 @@
-import { Block, PartialBlock } from "../../../../blocks/defaultBlocks.js";
-import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor";
-import {
+import type { Node } from "prosemirror-model";
+import type { Transaction } from "prosemirror-state";
+import type { Block, PartialBlock } from "../../../../blocks/defaultBlocks.js";
+import type {
   BlockIdentifier,
   BlockSchema,
   InlineContentSchema,
   StyleSchema,
 } from "../../../../schema/index.js";
-import { Node } from "prosemirror-model";
 import { blockToNode } from "../../../nodeConversions/blockToNode.js";
 import { nodeToBlock } from "../../../nodeConversions/nodeToBlock.js";
+import { getPmSchema } from "../../../pmUtil.js";
 
 export function removeAndInsertBlocks<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema
 >(
-  editor: BlockNoteEditor<BSchema, I, S>,
+  tr: Transaction,
   blocksToRemove: BlockIdentifier[],
   blocksToInsert: PartialBlock<BSchema, I, S>[]
 ): {
   insertedBlocks: Block<BSchema, I, S>[];
   removedBlocks: Block<BSchema, I, S>[];
 } {
-  const ttEditor = editor._tiptapEditor;
-  let tr = ttEditor.state.tr;
-
+  const pmSchema = getPmSchema(tr);
   // Converts the `PartialBlock`s to ProseMirror nodes to insert them into the
   // document.
-  const nodesToInsert: Node[] = [];
-  for (const block of blocksToInsert) {
-    nodesToInsert.push(
-      blockToNode(block, editor.pmSchema, editor.schema.styleSchema)
-    );
-  }
+  const nodesToInsert: Node[] = blocksToInsert.map((block) =>
+    blockToNode(block, pmSchema)
+  );
 
   const idsOfBlocksToRemove = new Set<string>(
     blocksToRemove.map((block) =>
@@ -47,7 +43,7 @@ export function removeAndInsertBlocks<
       : blocksToRemove[0].id;
   let removedSize = 0;
 
-  ttEditor.state.doc.descendants((node, pos) => {
+  tr.doc.descendants((node, pos) => {
     // Skips traversing nodes after all target blocks have been removed.
     if (idsOfBlocksToRemove.size === 0) {
       return false;
@@ -62,20 +58,12 @@ export function removeAndInsertBlocks<
     }
 
     // Saves the block that is being deleted.
-    removedBlocks.push(
-      nodeToBlock(
-        node,
-        editor.schema.blockSchema,
-        editor.schema.inlineContentSchema,
-        editor.schema.styleSchema,
-        editor.blockCache
-      )
-    );
+    removedBlocks.push(nodeToBlock(node, pmSchema));
     idsOfBlocksToRemove.delete(node.attrs.id);
 
     if (blocksToInsert.length > 0 && node.attrs.id === idOfFirstBlock) {
       const oldDocSize = tr.doc.nodeSize;
-      tr = tr.insert(pos, nodesToInsert);
+      tr.insert(pos, nodesToInsert);
       const newDocSize = tr.doc.nodeSize;
 
       removedSize += oldDocSize - newDocSize;
@@ -91,9 +79,9 @@ export function removeAndInsertBlocks<
       $pos.node($pos.depth - 1).type.name !== "doc" &&
       $pos.node().childCount === 1
     ) {
-      tr = tr.delete($pos.before(), $pos.after());
+      tr.delete($pos.before(), $pos.after());
     } else {
-      tr = tr.delete(pos - removedSize, pos - removedSize + node.nodeSize);
+      tr.delete(pos - removedSize, pos - removedSize + node.nodeSize);
     }
     const newDocSize = tr.doc.nodeSize;
     removedSize += oldDocSize - newDocSize;
@@ -111,36 +99,10 @@ export function removeAndInsertBlocks<
     );
   }
 
-  editor.dispatch(tr);
-
   // Converts the nodes created from `blocksToInsert` 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, removedBlocks };
 }
-
-export function replaceBlocks<
-  BSchema extends BlockSchema,
-  I extends InlineContentSchema,
-  S extends StyleSchema
->(
-  editor: BlockNoteEditor<BSchema, I, S>,
-  blocksToRemove: BlockIdentifier[],
-  blocksToInsert: PartialBlock<BSchema, I, S>[]
-): {
-  insertedBlocks: Block<BSchema, I, S>[];
-  removedBlocks: Block<BSchema, I, S>[];
-} {
-  return removeAndInsertBlocks(editor, blocksToRemove, blocksToInsert);
-}

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

@@ -4,7 +4,7 @@ import { describe, expect, it } from "vitest";
 
 import {
   getBlockInfo,
-  getBlockInfoFromSelection,
+  getBlockInfoFromTransaction,
 } from "../../../getBlockInfoFromPos.js";
 import { getNodeById } from "../../../nodeUtil.js";
 import { setupTestEnv } from "../../setupTestEnv.js";
@@ -38,8 +38,8 @@ function setSelectionWithOffset(
     throw new Error("Target block is not a block container");
   }
 
-  getEditor().dispatch(
-    getEditor()._tiptapEditor.state.tr.setSelection(
+  getEditor().transact((tr) =>
+    tr.setSelection(
       TextSelection.create(doc, info.blockContent.beforePos + offset + 1)
     )
   );
@@ -47,97 +47,103 @@ function setSelectionWithOffset(
 
 describe("Test splitBlocks", () => {
   it("Basic", () => {
-    setSelectionWithOffset(
-      getEditor()._tiptapEditor.state.doc,
-      "paragraph-0",
-      4
-    );
+    getEditor().transact((tr) => {
+      setSelectionWithOffset(tr.doc, "paragraph-0", 4);
+    });
 
-    splitBlock(getEditor()._tiptapEditor.state.selection.anchor);
+    splitBlock(getEditor().transact((tr) => tr.selection.anchor));
 
     expect(getEditor().document).toMatchSnapshot();
   });
 
   it("End of content", () => {
-    setSelectionWithOffset(
-      getEditor()._tiptapEditor.state.doc,
-      "paragraph-0",
-      11
-    );
+    getEditor().transact((tr) => {
+      setSelectionWithOffset(tr.doc, "paragraph-0", 11);
+    });
 
-    splitBlock(getEditor()._tiptapEditor.state.selection.anchor);
+    splitBlock(getEditor().transact((tr) => tr.selection.anchor));
 
     expect(getEditor().document).toMatchSnapshot();
   });
 
   it("Block has children", () => {
-    setSelectionWithOffset(
-      getEditor()._tiptapEditor.state.doc,
-      "paragraph-with-children",
-      4
-    );
+    getEditor().transact((tr) => {
+      setSelectionWithOffset(tr.doc, "paragraph-with-children", 4);
+    });
 
-    splitBlock(getEditor()._tiptapEditor.state.selection.anchor);
+    splitBlock(getEditor().transact((tr) => tr.selection.anchor));
 
     expect(getEditor().document).toMatchSnapshot();
   });
 
   it("Keep type", () => {
-    setSelectionWithOffset(getEditor()._tiptapEditor.state.doc, "heading-0", 4);
+    getEditor().transact((tr) => {
+      setSelectionWithOffset(tr.doc, "heading-0", 4);
+    });
 
-    splitBlock(getEditor()._tiptapEditor.state.selection.anchor, true);
+    splitBlock(
+      getEditor().transact((tr) => tr.selection.anchor),
+      true
+    );
 
     expect(getEditor().document).toMatchSnapshot();
   });
 
   it("Don't keep type", () => {
-    setSelectionWithOffset(getEditor()._tiptapEditor.state.doc, "heading-0", 4);
+    getEditor().transact((tr) => {
+      setSelectionWithOffset(tr.doc, "heading-0", 4);
+    });
 
-    splitBlock(getEditor()._tiptapEditor.state.selection.anchor, false);
+    splitBlock(
+      getEditor().transact((tr) => tr.selection.anchor),
+      false
+    );
 
     expect(getEditor().document).toMatchSnapshot();
   });
 
   it.skip("Keep props", () => {
-    setSelectionWithOffset(
-      getEditor()._tiptapEditor.state.doc,
-      "paragraph-with-props",
-      4
+    getEditor().transact((tr) => {
+      setSelectionWithOffset(tr.doc, "paragraph-with-props", 4);
+    });
+
+    splitBlock(
+      getEditor().transact((tr) => tr.selection.anchor),
+      false,
+      true
     );
 
-    splitBlock(getEditor()._tiptapEditor.state.selection.anchor, false, true);
-
     expect(getEditor().document).toMatchSnapshot();
   });
 
   it("Don't keep props", () => {
-    setSelectionWithOffset(
-      getEditor()._tiptapEditor.state.doc,
-      "paragraph-with-props",
-      4
+    getEditor().transact((tr) => {
+      setSelectionWithOffset(tr.doc, "paragraph-with-props", 4);
+    });
+
+    splitBlock(
+      getEditor().transact((tr) => tr.selection.anchor),
+      false,
+      false
     );
 
-    splitBlock(getEditor()._tiptapEditor.state.selection.anchor, false, false);
-
     expect(getEditor().document).toMatchSnapshot();
   });
 
   it("Selection is set", () => {
-    setSelectionWithOffset(
-      getEditor()._tiptapEditor.state.doc,
-      "paragraph-0",
-      4
-    );
+    getEditor().transact((tr) => {
+      setSelectionWithOffset(tr.doc, "paragraph-0", 4);
+    });
 
-    splitBlock(getEditor()._tiptapEditor.state.selection.anchor);
+    splitBlock(getEditor().transact((tr) => tr.selection.anchor));
 
-    const { bnBlock } = getBlockInfoFromSelection(
-      getEditor()._tiptapEditor.state
+    const bnBlock = getEditor().transact(
+      (tr) => getBlockInfoFromTransaction(tr).bnBlock
     );
 
     const anchorIsAtStartOfNewBlock =
       bnBlock.node.attrs.id === "0" &&
-      getEditor()._tiptapEditor.state.selection.$anchor.parentOffset === 0;
+      getEditor().transact((tr) => tr.selection.$anchor.parentOffset) === 0;
 
     expect(anchorIsAtStartOfNewBlock).toBeTruthy();
   });