@blocknote/core 0.30.0 → 0.31.0

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

@@ -1,5 +1,7 @@
 import { describe, expect, it } from "vitest";
 
+import { getBlockInfo } from "../../../getBlockInfoFromPos.js";
+import { getNodeById } from "../../../nodeUtil.js";
 import { setupTestEnv } from "../../setupTestEnv.js";
 import { updateBlock } from "./updateBlock.js";
 
@@ -13,7 +15,7 @@ describe("Test updateBlock typing", () => {
         {
           // @ts-expect-error invalid type
           type: "non-existing",
-        }
+        },
       );
     } catch (e) {
       // ID doesn't exist, which is fine - this is a compile-time check
@@ -30,7 +32,7 @@ describe("Test updateBlock typing", () => {
             // @ts-expect-error invalid type
             level: 1,
           },
-        }
+        },
       );
     } catch (e) {
       // ID doesn't exist, which is fine - this is a compile-time check
@@ -43,7 +45,7 @@ describe("Test updateBlock typing", () => {
           props: {
             level: 1,
           },
-        }
+        },
       );
     } catch (e) {
       // ID doesn't exist, which is fine - this is a compile-time check
@@ -57,8 +59,8 @@ describe("Test updateBlock", () => {
       getEditor().transact((tr) =>
         updateBlock(tr, "heading-with-everything", {
           id: "new-id",
-        })
-      )
+        }),
+      ),
     ).toMatchSnapshot();
     expect(getEditor().document).toMatchSnapshot();
   });
@@ -68,8 +70,8 @@ describe("Test updateBlock", () => {
       getEditor().transact((tr) =>
         updateBlock(tr, "heading-with-everything", {
           type: "paragraph",
-        })
-      )
+        }),
+      ),
     ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();
@@ -82,8 +84,8 @@ describe("Test updateBlock", () => {
           props: {
             level: 3,
           },
-        })
-      )
+        }),
+      ),
     ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();
@@ -99,8 +101,8 @@ describe("Test updateBlock", () => {
             textAlignment: "right",
             textColor: "blue",
           },
-        })
-      )
+        }),
+      ),
     ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();
@@ -113,8 +115,8 @@ describe("Test updateBlock", () => {
           props: {
             level: undefined,
           },
-        })
-      )
+        }),
+      ),
     ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();
@@ -130,8 +132,8 @@ describe("Test updateBlock", () => {
             textAlignment: undefined,
             textColor: undefined,
           },
-        })
-      )
+        }),
+      ),
     ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();
@@ -142,8 +144,8 @@ describe("Test updateBlock", () => {
       getEditor().transact((tr) =>
         updateBlock(tr, "heading-with-everything", {
           content: "New content",
-        })
-      )
+        }),
+      ),
     ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();
@@ -166,13 +168,169 @@ describe("Test updateBlock", () => {
               styles: { backgroundColor: "blue" },
             },
           ],
-        })
-      )
+        }),
+      ),
     ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();
   });
 
+  it("Update partial (offset start)", () => {
+    const info = getBlockInfo(
+      getNodeById("heading-with-everything", getEditor().prosemirrorState.doc)!,
+    );
+
+    if (!info.isBlockContainer) {
+      throw new Error("heading-with-everything is not a block container");
+    }
+
+    getEditor().transact((tr) =>
+      updateBlock(
+        tr,
+        "heading-with-everything",
+        {
+          content: [
+            {
+              type: "text",
+              text: "without styles",
+              styles: {},
+            },
+          ],
+        },
+        info.blockContent.beforePos + 9,
+      ),
+    );
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update partial (offset start + end)", () => {
+    const info = getBlockInfo(
+      getNodeById("heading-with-everything", getEditor().prosemirrorState.doc)!,
+    );
+
+    if (!info.isBlockContainer) {
+      throw new Error("heading-with-everything is not a block container");
+    }
+
+    getEditor().transact((tr) =>
+      updateBlock(
+        tr,
+        "heading-with-everything",
+        {
+          content: [
+            {
+              type: "text",
+              text: "without styles and ",
+              styles: {},
+            },
+          ],
+        },
+        info.blockContent.beforePos + 9,
+        info.blockContent.beforePos + 9,
+      ),
+    );
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update partial (props + offset end)", () => {
+    const info = getBlockInfo(
+      getNodeById("heading-with-everything", getEditor().prosemirrorState.doc)!,
+    );
+
+    if (!info.isBlockContainer) {
+      throw new Error("heading-with-everything is not a block container");
+    }
+
+    getEditor().transact((tr) => {
+      updateBlock(
+        tr,
+        "heading-with-everything",
+        {
+          props: {
+            level: 1,
+          },
+          content: [
+            {
+              type: "text",
+              text: "Title",
+              styles: {},
+            },
+          ],
+        },
+        undefined,
+        info.blockContent.beforePos + 8,
+      );
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update partial (table cell)", () => {
+    const info = getBlockInfo(
+      getNodeById("table-0", getEditor().prosemirrorState.doc)!,
+    );
+
+    if (!info.isBlockContainer) {
+      throw new Error("table-0 is not a block container");
+    }
+
+    const cell = info.blockContent.node.resolve(2);
+
+    getEditor().transact((tr) =>
+      updateBlock(
+        tr,
+        "table-0",
+        {
+          type: "table",
+          content: {
+            type: "tableContent",
+            rows: [{ cells: ["updated cell 1"] }],
+          },
+        },
+        info.blockContent.beforePos + 2,
+        info.blockContent.beforePos + 2 + cell.node().nodeSize,
+      ),
+    );
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update partial (table row)", () => {
+    const info = getBlockInfo(
+      getNodeById("table-0", getEditor().prosemirrorState.doc)!,
+    );
+
+    if (!info.isBlockContainer) {
+      throw new Error("table-0 is not a block container");
+    }
+
+    const cell = info.blockContent.node.resolve(1);
+
+    getEditor().transact((tr) =>
+      updateBlock(
+        tr,
+        "table-0",
+        {
+          type: "table",
+          content: {
+            type: "tableContent",
+            rows: [
+              {
+                cells: ["updated cell 1", "updated cell 2", "updated cell 3"],
+              },
+            ],
+          },
+        },
+        info.blockContent.beforePos + 1,
+        info.blockContent.beforePos + 1 + cell.node().nodeSize,
+      ),
+    );
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
   it("Update children", () => {
     expect(
       getEditor().transact((tr) =>
@@ -191,8 +349,8 @@ describe("Test updateBlock", () => {
               ],
             },
           ],
-        })
-      )
+        }),
+      ),
     ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();
@@ -236,8 +394,8 @@ describe("Test updateBlock", () => {
               ],
             },
           ],
-        })
-      )
+        }),
+      ),
     ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();
@@ -248,7 +406,7 @@ describe("Test updateBlock", () => {
       getEditor().transact((tr) =>
         updateBlock(tr, "paragraph-0", {
           type: "table",
-        })
+        }),
       );
     }).toThrow();
   });
@@ -258,8 +416,8 @@ describe("Test updateBlock", () => {
       getEditor().transact((tr) =>
         updateBlock(tr, "table-0", {
           type: "paragraph",
-        })
-      )
+        }),
+      ),
     ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();
@@ -284,8 +442,8 @@ describe("Test updateBlock", () => {
               },
             ],
           },
-        })
-      )
+        }),
+      ),
     ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();
@@ -297,8 +455,8 @@ describe("Test updateBlock", () => {
         updateBlock(tr, "table-0", {
           type: "paragraph",
           content: "Paragraph",
-        })
-      )
+        }),
+      ),
     ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();
@@ -309,8 +467,8 @@ describe("Test updateBlock", () => {
       getEditor().transact((tr) =>
         updateBlock(tr, "paragraph-0", {
           type: "image",
-        })
-      )
+        }),
+      ),
     ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();
@@ -321,8 +479,8 @@ describe("Test updateBlock", () => {
       getEditor().transact((tr) =>
         updateBlock(tr, "image-0", {
           type: "paragraph",
-        })
-      )
+        }),
+      ),
     ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();
@@ -334,8 +492,8 @@ describe("Test updateBlock", () => {
         updateBlock(tr, "image-0", {
           type: "paragraph",
           content: "Paragraph",
-        })
-      )
+        }),
+      ),
     ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();
@@ -346,8 +504,8 @@ describe("Test updateBlock", () => {
       getEditor().transact((tr) =>
         updateBlock(tr, "image-0", {
           type: "table",
-        })
-      )
+        }),
+      ),
     ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();
@@ -399,8 +557,8 @@ describe("Test updateBlock", () => {
               },
             ],
           },
-        })
-      )
+        }),
+      ),
     ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();
@@ -411,8 +569,8 @@ describe("Test updateBlock", () => {
       getEditor().transact((tr) =>
         updateBlock(tr, "table-0", {
           type: "image",
-        })
-      )
+        }),
+      ),
     ).toMatchSnapshot();
 
     expect(getEditor().document).toMatchSnapshot();

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

@@ -6,7 +6,7 @@ import {
 } from "prosemirror-model";
 import type { Transaction } from "prosemirror-state";
 
-import { ReplaceStep } from "prosemirror-transform";
+import { ReplaceStep, Transform } from "prosemirror-transform";
 import type { Block, PartialBlock } from "../../../../blocks/defaultBlocks.js";
 import type {
   BlockIdentifier,
@@ -28,13 +28,14 @@ import { nodeToBlock } from "../../../nodeConversions/nodeToBlock.js";
 import { getNodeById } from "../../../nodeUtil.js";
 import { getPmSchema } from "../../../pmUtil.js";
 
+// for compatibility with tiptap. TODO: remove as we want to remove dependency on tiptap command interface
 export const updateBlockCommand = <
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(
   posBeforeBlock: number,
-  block: PartialBlock<BSchema, I, S>
+  block: PartialBlock<BSchema, I, S>,
 ) => {
   return ({
     tr,
@@ -50,18 +51,29 @@ export const updateBlockCommand = <
   };
 };
 
-const updateBlockTr = <
+export function updateBlockTr<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(
-  tr: Transaction,
+  tr: Transform,
   posBeforeBlock: number,
-  block: PartialBlock<BSchema, I, S>
-) => {
+  block: PartialBlock<BSchema, I, S>,
+  replaceFromPos?: number,
+  replaceToPos?: number,
+) {
   const blockInfo = getBlockInfoFromResolvedPos(tr.doc.resolve(posBeforeBlock));
 
   const pmSchema = getPmSchema(tr);
+
+  if (
+    replaceFromPos !== undefined &&
+    replaceToPos !== undefined &&
+    replaceFromPos > replaceToPos
+  ) {
+    throw new Error("Invalid replaceFromPos or replaceToPos");
+  }
+
   // Adds blockGroup node with child blocks if necessary.
 
   const oldNodeType = pmSchema.nodes[blockInfo.blockNoteType];
@@ -71,10 +83,32 @@ const updateBlockTr = <
     : pmSchema.nodes["blockContainer"];
 
   if (blockInfo.isBlockContainer && newNodeType.isInGroup("blockContent")) {
+    const replaceFromOffset =
+      replaceFromPos !== undefined &&
+      replaceFromPos > blockInfo.blockContent.beforePos &&
+      replaceFromPos < blockInfo.blockContent.afterPos
+        ? replaceFromPos - blockInfo.blockContent.beforePos - 1
+        : undefined;
+
+    const replaceToOffset =
+      replaceToPos !== undefined &&
+      replaceToPos > blockInfo.blockContent.beforePos &&
+      replaceToPos < blockInfo.blockContent.afterPos
+        ? replaceToPos - blockInfo.blockContent.beforePos - 1
+        : undefined;
+
     updateChildren(block, tr, blockInfo);
     // The code below determines the new content of the block.
     // or "keep" to keep as-is
-    updateBlockContentNode(block, tr, oldNodeType, newNodeType, blockInfo);
+    updateBlockContentNode(
+      block,
+      tr,
+      oldNodeType,
+      newNodeType,
+      blockInfo,
+      replaceFromOffset,
+      replaceToOffset,
+    );
   } else if (!blockInfo.isBlockContainer && newNodeType.isInGroup("bnBlock")) {
     updateChildren(block, tr, blockInfo);
     // old node was a bnBlock type (like column or columnList) and new block as well
@@ -96,8 +130,8 @@ const updateBlockTr = <
           children: existingBlock.children, // if no children are passed in, use existing children
           ...block,
         },
-        pmSchema
-      )
+        pmSchema,
+      ),
     );
 
     return;
@@ -109,15 +143,15 @@ const updateBlockTr = <
     ...blockInfo.bnBlock.node.attrs,
     ...block.props,
   });
-};
+}
 
 function updateBlockContentNode<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
+  S extends StyleSchema,
 >(
   block: PartialBlock<BSchema, I, S>,
-  tr: Transaction,
+  tr: Transform,
   oldNodeType: NodeType,
   newNodeType: NodeType,
   blockInfo: {
@@ -125,7 +159,9 @@ function updateBlockContentNode<
       | { node: PMNode; beforePos: number; afterPos: number }
       | undefined;
     blockContent: { node: PMNode; beforePos: number; afterPos: number };
-  }
+  },
+  replaceFromOffset?: number,
+  replaceToOffset?: number,
 ) {
   const pmSchema = getPmSchema(tr);
   let content: PMNode[] | "keep" = "keep";
@@ -137,7 +173,7 @@ function updateBlockContentNode<
       content = inlineContentToNodes(
         [block.content],
         pmSchema,
-        newNodeType.name
+        newNodeType.name,
       );
     } else if (Array.isArray(block.content)) {
       // Adds a text node with the provided styles converted into marks to the content,
@@ -172,17 +208,43 @@ function updateBlockContentNode<
   // content is being replaced or not.
   if (content === "keep") {
     // use setNodeMarkup to only update the type and attributes
-    tr.setNodeMarkup(
-      blockInfo.blockContent.beforePos,
-      block.type === undefined ? undefined : pmSchema.nodes[block.type],
-      {
-        ...blockInfo.blockContent.node.attrs,
-        ...block.props,
-      }
+    tr.setNodeMarkup(blockInfo.blockContent.beforePos, newNodeType, {
+      ...blockInfo.blockContent.node.attrs,
+      ...block.props,
+    });
+  } else if (replaceFromOffset !== undefined || replaceToOffset !== undefined) {
+    // first update markup of the containing node
+    tr.setNodeMarkup(blockInfo.blockContent.beforePos, newNodeType, {
+      ...blockInfo.blockContent.node.attrs,
+      ...block.props,
+    });
+
+    const start =
+      blockInfo.blockContent.beforePos + 1 + (replaceFromOffset ?? 0);
+    const end =
+      blockInfo.blockContent.beforePos +
+      1 +
+      (replaceToOffset ?? blockInfo.blockContent.node.content.size);
+
+    // for content like table cells (where the blockcontent has nested PM nodes),
+    // we need to figure out the correct openStart and openEnd for the slice when replacing
+
+    const contentDepth = tr.doc.resolve(blockInfo.blockContent.beforePos).depth;
+    const startDepth = tr.doc.resolve(start).depth;
+    const endDepth = tr.doc.resolve(end).depth;
+
+    tr.replace(
+      start,
+      end,
+      new Slice(
+        Fragment.from(content),
+        startDepth - contentDepth - 1,
+        endDepth - contentDepth - 1,
+      ),
     );
   } else {
     // use replaceWith to replace the content and the block itself
-    // also  reset the selection since replacing the block content
+    // also reset the selection since replacing the block content
     // sets it to the next block.
     tr.replaceWith(
       blockInfo.blockContent.beforePos,
@@ -192,8 +254,8 @@ function updateBlockContentNode<
           ...blockInfo.blockContent.node.attrs,
           ...block.props,
         },
-        content
-      )
+        content,
+      ),
     );
   }
 }
@@ -201,8 +263,8 @@ function updateBlockContentNode<
 function updateChildren<
   BSchema extends BlockSchema,
   I extends InlineContentSchema,
-  S extends StyleSchema
->(block: PartialBlock<BSchema, I, S>, tr: Transaction, blockInfo: BlockInfo) {
+  S extends StyleSchema,
+>(block: PartialBlock<BSchema, I, S>, tr: Transform, blockInfo: BlockInfo) {
   const pmSchema = getPmSchema(tr);
   if (block.children !== undefined && block.children.length > 0) {
     const childNodes = block.children.map((child) => {
@@ -218,8 +280,8 @@ function updateChildren<
         new ReplaceStep(
           blockInfo.childContainer.beforePos + 1,
           blockInfo.childContainer.afterPos - 1,
-          new Slice(Fragment.from(childNodes), 0, 0)
-        )
+          new Slice(Fragment.from(childNodes), 0, 0),
+        ),
       );
     } else {
       if (!blockInfo.isBlockContainer) {
@@ -228,7 +290,7 @@ function updateChildren<
       // Inserts a new blockGroup containing the child nodes created earlier.
       tr.insert(
         blockInfo.blockContent.afterPos,
-        pmSchema.nodes["blockGroup"].createChecked({}, childNodes)
+        pmSchema.nodes["blockGroup"].createChecked({}, childNodes),
       );
     }
   }
@@ -237,11 +299,13 @@ function updateChildren<
 export function updateBlock<
   BSchema extends BlockSchema = any,
   I extends InlineContentSchema = any,
-  S extends StyleSchema = any
+  S extends StyleSchema = any,
 >(
   tr: Transaction,
   blockToUpdate: BlockIdentifier,
-  update: PartialBlock<BSchema, I, S>
+  update: PartialBlock<BSchema, I, S>,
+  replaceFromPos?: number,
+  replaceToPos?: number,
 ): Block<BSchema, I, S> {
   const id =
     typeof blockToUpdate === "string" ? blockToUpdate : blockToUpdate.id;
@@ -250,7 +314,13 @@ export function updateBlock<
     throw new Error(`Block with ID ${id} not found`);
   }
 
-  updateBlockTr(tr, posInfo.posBeforeNode, update);
+  updateBlockTr(
+    tr,
+    posInfo.posBeforeNode,
+    update,
+    replaceFromPos,
+    replaceToPos,
+  );
 
   const blockContainerNode = tr.doc
     .resolve(posInfo.posBeforeNode + 1) // TODO: clean?