@blocknote/core 0.16.0 → 0.17.0

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

@@ -0,0 +1,222 @@
+import { describe, expect, it } from "vitest";
+
+import { setupTestEnv } from "../../setupTestEnv.js";
+import { replaceBlocks } from "./replaceBlocks.js";
+
+const getEditor = setupTestEnv();
+
+describe("Test replaceBlocks", () => {
+  it("Remove single block", () => {
+    replaceBlocks(getEditor(), ["paragraph-0"], []);
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Remove multiple consecutive blocks", () => {
+    replaceBlocks(
+      getEditor(),
+      ["paragraph-0", "paragraph-1", "paragraph-with-children"],
+      []
+    );
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Remove multiple non-consecutive blocks", () => {
+    replaceBlocks(
+      getEditor(),
+      ["paragraph-0", "table-0", "heading-with-everything"],
+      []
+    );
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Replace single block with single basic", () => {
+    replaceBlocks(getEditor(), ["paragraph-0"], [{ type: "paragraph" }]);
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Replace multiple consecutive blocks with single basic", () => {
+    replaceBlocks(
+      getEditor(),
+      ["paragraph-0", "paragraph-1", "paragraph-with-children"],
+      [{ type: "paragraph" }]
+    );
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Replace multiple non-consecutive blocks with single basic", () => {
+    replaceBlocks(
+      getEditor(),
+      ["paragraph-0", "table-0", "heading-with-everything"],
+      [{ type: "paragraph" }]
+    );
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Replace single block with multiple", () => {
+    replaceBlocks(
+      getEditor(),
+      ["paragraph-0"],
+      [
+        { type: "paragraph", content: "Inserted paragraph 1" },
+        { type: "paragraph", content: "Inserted paragraph 2" },
+        { type: "paragraph", content: "Inserted paragraph 3" },
+      ]
+    );
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Replace multiple consecutive blocks with multiple", () => {
+    replaceBlocks(
+      getEditor(),
+      ["paragraph-0", "paragraph-1", "paragraph-with-children"],
+      [
+        { type: "paragraph", content: "Inserted paragraph 1" },
+        { type: "paragraph", content: "Inserted paragraph 2" },
+        { type: "paragraph", content: "Inserted paragraph 3" },
+      ]
+    );
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Replace multiple non-consecutive blocks with multiple", () => {
+    replaceBlocks(
+      getEditor(),
+      ["paragraph-0", "table-0", "heading-with-everything"],
+      [
+        { type: "paragraph", content: "Inserted paragraph 1" },
+        { type: "paragraph", content: "Inserted paragraph 2" },
+        { type: "paragraph", content: "Inserted paragraph 3" },
+      ]
+    );
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Replace single block with single complex", () => {
+    replaceBlocks(
+      getEditor(),
+      ["paragraph-0"],
+      [
+        {
+          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(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Replace multiple consecutive blocks with single complex", () => {
+    replaceBlocks(
+      getEditor(),
+      ["paragraph-0", "paragraph-1", "paragraph-with-children"],
+      [
+        {
+          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(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Replace multiple non-consecutive blocks with single complex", () => {
+    replaceBlocks(
+      getEditor(),
+      ["paragraph-0", "table-0", "heading-with-everything"],
+      [
+        {
+          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(getEditor().document).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,70 @@
+import { Node } from "prosemirror-model";
+
+import { Block, PartialBlock } from "../../../../blocks/defaultBlocks.js";
+import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor";
+import {
+  BlockIdentifier,
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../../../schema/index.js";
+import { blockToNode } from "../../../nodeConversions/blockToNode.js";
+import { nodeToBlock } from "../../../nodeConversions/nodeToBlock.js";
+import { removeBlocksWithCallback } from "../removeBlocks/removeBlocks.js";
+
+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>[];
+} {
+  const nodesToInsert: Node[] = [];
+  for (const block of blocksToInsert) {
+    nodesToInsert.push(
+      blockToNode(block, editor.pmSchema, editor.schema.styleSchema)
+    );
+  }
+
+  const idOfFirstBlock =
+    typeof blocksToRemove[0] === "string"
+      ? blocksToRemove[0]
+      : blocksToRemove[0].id;
+  const removedBlocks = removeBlocksWithCallback(
+    editor,
+    blocksToRemove,
+    (node, pos, tr, removedSize) => {
+      if (node.attrs.id === idOfFirstBlock) {
+        const oldDocSize = tr.doc.nodeSize;
+        tr.insert(pos, nodesToInsert);
+        const newDocSize = tr.doc.nodeSize;
+
+        return removedSize + oldDocSize - newDocSize;
+      }
+
+      return removedSize;
+    }
+  );
+
+  // 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
+      )
+    );
+  }
+
+  return { insertedBlocks, removedBlocks };
+}