@blocknote/core 0.15.11 → 0.17.0

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

@@ -0,0 +1,132 @@
+import { describe, expect, it } from "vitest";
+
+import { setupTestEnv } from "../../setupTestEnv.js";
+import { insertBlocks } from "./insertBlocks.js";
+
+const getEditor = setupTestEnv();
+
+describe("Test insertBlocks", () => {
+  it("Insert single basic block before", () => {
+    insertBlocks(getEditor(), [{ type: "paragraph" }], "paragraph-0", "before");
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Insert single basic block after", () => {
+    insertBlocks(getEditor(), [{ type: "paragraph" }], "paragraph-0", "after");
+
+    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(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(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",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      "paragraph-0",
+      "before"
+    );
+
+    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",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      "paragraph-0",
+      "after"
+    );
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,71 @@
+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 { getNodeById } from "../../../nodeUtil.js";
+
+export function insertBlocks<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  editor: BlockNoteEditor<BSchema, I, S>,
+  blocksToInsert: PartialBlock<BSchema, I, S>[],
+  referenceBlock: BlockIdentifier,
+  placement: "before" | "after" = "before"
+): Block<BSchema, I, S>[] {
+  const id =
+    typeof referenceBlock === "string" ? referenceBlock : referenceBlock.id;
+
+  const nodesToInsert: Node[] = [];
+  for (const blockSpec of blocksToInsert) {
+    nodesToInsert.push(
+      blockToNode(blockSpec, editor.pmSchema, editor.schema.styleSchema)
+    );
+  }
+
+  const { node, posBeforeNode } = getNodeById(
+    id,
+    editor._tiptapEditor.state.doc
+  );
+
+  if (placement === "before") {
+    editor.dispatch(
+      editor._tiptapEditor.state.tr.insert(posBeforeNode, nodesToInsert)
+    );
+  }
+
+  if (placement === "after") {
+    editor.dispatch(
+      editor._tiptapEditor.state.tr.insert(
+        posBeforeNode + node.nodeSize,
+        nodesToInsert
+      )
+    );
+  }
+
+  // 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;
+}