@blocknote/core 0.35.0 → 0.36.1

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

@@ -4,9 +4,10 @@ import {
   type Node as PMNode,
   Slice,
 } from "prosemirror-model";
-import type { Transaction } from "prosemirror-state";
-
+import { TextSelection, Transaction } from "prosemirror-state";
+import { TableMap } from "prosemirror-tables";
 import { ReplaceStep, Transform } from "prosemirror-transform";
+
 import type { Block, PartialBlock } from "../../../../blocks/defaultBlocks.js";
 import type {
   BlockIdentifier,
@@ -56,7 +57,7 @@ export function updateBlockTr<
   I extends InlineContentSchema,
   S extends StyleSchema,
 >(
-  tr: Transform,
+  tr: Transform | Transaction,
   posBeforeBlock: number,
   block: PartialBlock<BSchema, I, S>,
   replaceFromPos?: number,
@@ -64,6 +65,11 @@ export function updateBlockTr<
 ) {
   const blockInfo = getBlockInfoFromResolvedPos(tr.doc.resolve(posBeforeBlock));
 
+  let cellAnchor: CellAnchor | null = null;
+  if (blockInfo.blockNoteType === "table") {
+    cellAnchor = captureCellAnchor(tr);
+  }
+
   const pmSchema = getPmSchema(tr);
 
   if (
@@ -143,6 +149,10 @@ export function updateBlockTr<
     ...blockInfo.bnBlock.node.attrs,
     ...block.props,
   });
+
+  if (cellAnchor) {
+    restoreCellAnchor(tr, blockInfo, cellAnchor);
+  }
 }
 
 function updateBlockContentNode<
@@ -301,7 +311,7 @@ export function updateBlock<
   I extends InlineContentSchema = any,
   S extends StyleSchema = any,
 >(
-  tr: Transaction,
+  tr: Transform,
   blockToUpdate: BlockIdentifier,
   update: PartialBlock<BSchema, I, S>,
   replaceFromPos?: number,
@@ -329,3 +339,121 @@ export function updateBlock<
   const pmSchema = getPmSchema(tr);
   return nodeToBlock(blockContainerNode, pmSchema);
 }
+
+type CellAnchor = { row: number; col: number; offset: number };
+
+/**
+ * Captures the cell anchor from the current selection.
+ * @param tr - The transaction to capture the cell anchor from.
+ *
+ * @returns The cell anchor, or null if no cell is selected.
+ */
+export function captureCellAnchor(tr: Transform): CellAnchor | null {
+  const sel = "selection" in tr ? tr.selection : null;
+  if (!(sel instanceof TextSelection)) {
+    return null;
+  }
+
+  const $head = tr.doc.resolve(sel.head);
+  // Find enclosing cell and table
+  let cellDepth = -1;
+  let tableDepth = -1;
+  for (let d = $head.depth; d >= 0; d--) {
+    const name = $head.node(d).type.name;
+    if (cellDepth < 0 && (name === "tableCell" || name === "tableHeader")) {
+      cellDepth = d;
+    }
+    if (name === "table") {
+      tableDepth = d;
+      break;
+    }
+  }
+  if (cellDepth < 0 || tableDepth < 0) {
+    return null;
+  }
+
+  // Absolute positions (before the cell)
+  const cellPos = $head.before(cellDepth);
+  const tablePos = $head.before(tableDepth);
+  const table = tr.doc.nodeAt(tablePos);
+  if (!table || table.type.name !== "table") {
+    return null;
+  }
+
+  // Visual grid position via TableMap (handles spans)
+  const map = TableMap.get(table);
+  const rel = cellPos - (tablePos + 1); // relative to inside table
+  const idx = map.map.indexOf(rel);
+  if (idx < 0) {
+    return null;
+  }
+
+  const row = Math.floor(idx / map.width);
+  const col = idx % map.width;
+
+  // Caret offset relative to the start of paragraph text
+  const paraPos = cellPos + 1; // pos BEFORE tableParagraph
+  const textStart = paraPos + 1; // start of paragraph text
+  const offset = Math.max(0, sel.head - textStart);
+
+  return { row, col, offset };
+}
+
+function restoreCellAnchor(
+  tr: Transform | Transaction,
+  blockInfo: BlockInfo,
+  a: CellAnchor,
+): boolean {
+  if (blockInfo.blockNoteType !== "table") {
+    return false;
+  }
+
+  // 1) Resolve the table node in the current document
+  let tablePos = -1;
+
+  if (blockInfo.isBlockContainer) {
+    // Prefer the blockContent position when available (points directly at the PM table node)
+    tablePos = tr.mapping.map(blockInfo.blockContent.beforePos);
+  } else {
+    // Fallback: scan within the mapped bnBlock range to find the inner table node
+    const start = tr.mapping.map(blockInfo.bnBlock.beforePos);
+    const end = start + (tr.doc.nodeAt(start)?.nodeSize || 0);
+    tr.doc.nodesBetween(start, end, (node, pos) => {
+      if (node.type.name === "table") {
+        tablePos = pos;
+        return false;
+      }
+      return true;
+    });
+  }
+
+  const table = tablePos >= 0 ? tr.doc.nodeAt(tablePos) : null;
+  if (!table || table.type.name !== "table") {
+    return false;
+  }
+
+  // 2) Clamp row/col to the table’s current grid
+  const map = TableMap.get(table);
+  const row = Math.max(0, Math.min(a.row, map.height - 1));
+  const col = Math.max(0, Math.min(a.col, map.width - 1));
+
+  // 3) Compute the absolute position of the target cell (pos BEFORE the cell)
+  const cellIndex = row * map.width + col;
+  const relCellPos = map.map[cellIndex]; // relative to (tablePos + 1)
+  if (relCellPos == null) {
+    return false;
+  }
+  const cellPos = tablePos + 1 + relCellPos;
+
+  // 4) Place the caret inside the cell, clamping the text offset
+  const textPos = cellPos + 1;
+  const textNode = tr.doc.nodeAt(textPos);
+  const textStart = textPos + 1;
+  const max = textNode ? textNode.content.size : 0;
+  const head = textStart + Math.max(0, Math.min(a.offset, max));
+
+  if ("selection" in tr) {
+    tr.setSelection(TextSelection.create(tr.doc, head));
+  }
+  return true;
+}

package/src/api/clipboard/toClipboard/copyExtension.ts

@@ -17,6 +17,7 @@ import {
   contentNodeToInlineContent,
   contentNodeToTableContent,
 } from "../../nodeConversions/nodeToBlock.js";
+import { initializeESMDependencies } from "../../../util/esmDependencies.js";
 
 function fragmentToExternalHTML<
   BSchema extends BlockSchema,
@@ -208,6 +209,7 @@ export const createCopyToClipboardExtension = <
   Extension.create<{ editor: BlockNoteEditor<BSchema, I, S> }, undefined>({
     name: "copyToClipboard",
     addProseMirrorPlugins() {
+      initializeESMDependencies();
       return [
         new Plugin({
           props: {

package/src/api/{nodeUtil.test.ts → getBlocksChangedByTransaction.test.ts}

@@ -1,7 +1,7 @@
 import { describe, expect, it, beforeEach } from "vitest";
 
 import { setupTestEnv } from "./blockManipulation/setupTestEnv.js";
-import { getBlocksChangedByTransaction } from "./nodeUtil.js";
+import { getBlocksChangedByTransaction } from "./getBlocksChangedByTransaction.js";
 import { BlockNoteEditor } from "../editor/BlockNoteEditor.js";
 
 const getEditor = setupTestEnv();
@@ -452,4 +452,120 @@ describe("getBlocksChangedByTransaction", () => {
       "__snapshots__/blocks-moved-multiple-in-same-transaction.json",
     );
   });
+
+  it("should return blocks which have been moved up or down in the same transaction", async () => {
+    editor.replaceBlocks(editor.document, [
+      {
+        id: "top",
+        type: "paragraph",
+        content: "Top",
+      },
+      {
+        id: "middle",
+        type: "paragraph",
+        content: "Middle",
+      },
+      {
+        id: "bottom",
+        type: "paragraph",
+        content: "Bottom",
+      },
+    ]);
+
+    const blocksChanged = editor.transact((tr) => {
+      editor.setTextCursorPosition("top");
+      editor.moveBlocksDown();
+
+      return getBlocksChangedByTransaction(tr);
+    });
+
+    // Should report a single minimal move within the same parent
+    await expect(blocksChanged).toMatchFileSnapshot(
+      "__snapshots__/blocks-moved-up-down-in-same-transaction.json",
+    );
+  });
+
+  it("should detect moving the bottom block up within the same parent", async () => {
+    editor.replaceBlocks(editor.document, [
+      { id: "top", type: "paragraph", content: "Top" },
+      { id: "middle", type: "paragraph", content: "Middle" },
+      { id: "bottom", type: "paragraph", content: "Bottom" },
+    ]);
+
+    const blocksChanged = editor.transact((tr) => {
+      editor.setTextCursorPosition("bottom");
+      editor.moveBlocksUp();
+      return getBlocksChangedByTransaction(tr);
+    });
+
+    await expect(blocksChanged).toMatchFileSnapshot(
+      "__snapshots__/blocks-moved-up-down-in-same-parent.json",
+    );
+  });
+
+  it("should detect moving a block down twice within the same parent as a single move", async () => {
+    editor.replaceBlocks(editor.document, [
+      { id: "a", type: "paragraph", content: "A" },
+      { id: "b", type: "paragraph", content: "B" },
+      { id: "c", type: "paragraph", content: "C" },
+    ]);
+
+    const blocksChanged = editor.transact((tr) => {
+      editor.setTextCursorPosition("a");
+      editor.moveBlocksDown();
+      editor.moveBlocksDown();
+      return getBlocksChangedByTransaction(tr);
+    });
+
+    await expect(blocksChanged).toMatchFileSnapshot(
+      "__snapshots__/blocks-moved-down-twice-in-same-parent.json",
+    );
+  });
+
+  it("should detect nested sibling reorder within the same parent", async () => {
+    editor.replaceBlocks(editor.document, [
+      {
+        id: "parent",
+        type: "paragraph",
+        content: "Parent",
+        children: [
+          { id: "child-a", type: "paragraph", content: "A" },
+          { id: "child-b", type: "paragraph", content: "B" },
+          { id: "child-c", type: "paragraph", content: "C" },
+        ],
+      },
+      { id: "sibling", type: "paragraph", content: "S" },
+    ]);
+
+    const blocksChanged = editor.transact((tr) => {
+      editor.setTextCursorPosition("child-a");
+      editor.moveBlocksDown();
+      return getBlocksChangedByTransaction(tr);
+    });
+
+    await expect(blocksChanged).toMatchFileSnapshot(
+      "__snapshots__/blocks-moved-nested-sibling-reorder.json",
+    );
+  });
+
+  it("should not report moves when an insert changes sibling order", async () => {
+    editor.replaceBlocks(editor.document, [
+      { id: "a", type: "paragraph", content: "A" },
+      { id: "b", type: "paragraph", content: "B" },
+      { id: "c", type: "paragraph", content: "C" },
+    ]);
+
+    const blocksChanged = editor.transact((tr) => {
+      editor.insertBlocks(
+        [{ id: "x", type: "paragraph", content: "X" }],
+        "a",
+        "after",
+      );
+      return getBlocksChangedByTransaction(tr);
+    });
+
+    await expect(blocksChanged).toMatchFileSnapshot(
+      "__snapshots__/blocks-moved-insert-changes-sibling-order.json",
+    );
+  });
 });