@blocknote/core 0.3.0 → 0.4.2

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

@@ -0,0 +1,172 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { Block, BlockNoteEditor, PartialBlock } from "../..";
+
+let editor: BlockNoteEditor;
+
+function waitForEditor() {
+  // wait for create event on editor,
+  // this is necessary because otherwise UniqueId.create hasn't been called yet, and
+  // blocks would have "null" as their id
+  return new Promise<void>((resolve) => {
+    editor._tiptapEditor.on("create", () => {
+      resolve();
+    });
+  });
+}
+
+let singleBlock: PartialBlock;
+
+let multipleBlocks: PartialBlock[];
+
+let insert: (placement: "before" | "nested" | "after") => Block[];
+
+beforeEach(() => {
+  (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS = {};
+
+  editor = new BlockNoteEditor();
+
+  singleBlock = {
+    type: "paragraph",
+    content: "Paragraph",
+  };
+
+  multipleBlocks = [
+    {
+      type: "heading",
+      props: {
+        level: "1",
+      },
+      content: "Heading 1",
+      children: [
+        {
+          type: "heading",
+          props: {
+            level: "1",
+          },
+          content: "Nested Heading 1",
+        },
+      ],
+    },
+    {
+      type: "heading",
+      props: {
+        level: "2",
+      },
+      content: "Heading 2",
+      children: [
+        {
+          type: "heading",
+          props: {
+            level: "2",
+          },
+          content: "Nested Heading 2",
+        },
+      ],
+    },
+  ];
+
+  insert = (placement) => {
+    const existingBlock = editor.topLevelBlocks[0];
+    editor.insertBlocks(multipleBlocks, existingBlock, placement);
+
+    return editor.topLevelBlocks;
+  };
+});
+
+afterEach(() => {
+  editor._tiptapEditor.destroy();
+  editor = undefined as any;
+
+  delete (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS;
+});
+
+describe("Inserting Blocks with Different Placements", () => {
+  it("Insert before existing block", async () => {
+    await waitForEditor();
+
+    const output = insert("before");
+
+    expect(output).toMatchSnapshot();
+  });
+
+  it("Insert nested inside existing block", async () => {
+    await waitForEditor();
+
+    const output = insert("nested");
+
+    expect(output).toMatchSnapshot();
+  });
+
+  it("Insert after existing block", async () => {
+    await waitForEditor();
+
+    const output = insert("after");
+
+    expect(output).toMatchSnapshot();
+  });
+});
+
+describe("Insert, Update, & Delete Blocks", () => {
+  it("Insert, update, & delete single block", async () => {
+    await waitForEditor();
+
+    const existingBlock = editor.topLevelBlocks[0];
+    editor.insertBlocks([singleBlock], existingBlock);
+
+    expect(editor.topLevelBlocks).toMatchSnapshot();
+
+    const newBlock = editor.topLevelBlocks[0];
+    editor.updateBlock(newBlock, {
+      type: "heading",
+      props: {
+        textAlignment: "right",
+        level: "3",
+      },
+      content: [
+        {
+          type: "text",
+          text: "Heading ",
+          styles: {
+            textColor: "red",
+          },
+        },
+        {
+          type: "text",
+          text: "3",
+          styles: {
+            backgroundColor: "red",
+          },
+        },
+      ],
+      children: [singleBlock],
+    });
+
+    expect(editor.topLevelBlocks).toMatchSnapshot();
+
+    const updatedBlock = editor.topLevelBlocks[0];
+    editor.removeBlocks([updatedBlock]);
+
+    expect(editor.topLevelBlocks).toMatchSnapshot();
+  });
+
+  it("Insert, update, & delete multiple blocks", async () => {
+    await waitForEditor();
+
+    const existingBlock = editor.topLevelBlocks[0];
+    editor.insertBlocks(multipleBlocks, existingBlock);
+
+    expect(editor.topLevelBlocks).toMatchSnapshot();
+
+    const newBlock = editor.topLevelBlocks[0];
+    editor.updateBlock(newBlock, {
+      type: "paragraph",
+    });
+
+    expect(editor.topLevelBlocks).toMatchSnapshot();
+
+    const updatedBlocks = editor.topLevelBlocks.slice(0, 2);
+    editor.removeBlocks([updatedBlocks[0].children[0], updatedBlocks[1]]);
+
+    expect(editor.topLevelBlocks).toMatchSnapshot();
+  });
+});

package/src/api/blockManipulation/blockManipulation.ts

@@ -0,0 +1,125 @@
+import { Editor } from "@tiptap/core";
+import { Node } from "prosemirror-model";
+import {
+  BlockIdentifier,
+  PartialBlock,
+} from "../../extensions/Blocks/api/blockTypes";
+import { blockToNode } from "../nodeConversions/nodeConversions";
+import { getNodeById } from "../util/nodeUtil";
+
+export function insertBlocks(
+  blocksToInsert: PartialBlock[],
+  referenceBlock: BlockIdentifier,
+  placement: "before" | "after" | "nested" = "before",
+  editor: Editor
+): void {
+  const id =
+    typeof referenceBlock === "string" ? referenceBlock : referenceBlock.id;
+
+  const nodesToInsert: Node[] = [];
+  for (const blockSpec of blocksToInsert) {
+    nodesToInsert.push(blockToNode(blockSpec, editor.schema));
+  }
+
+  let insertionPos = -1;
+
+  const { node, posBeforeNode } = getNodeById(id, editor.state.doc);
+
+  if (placement === "before") {
+    insertionPos = posBeforeNode;
+  }
+
+  if (placement === "after") {
+    insertionPos = posBeforeNode + node.nodeSize;
+  }
+
+  if (placement === "nested") {
+    // Case if block doesn't already have children.
+    if (node.childCount < 2) {
+      insertionPos = posBeforeNode + node.firstChild!.nodeSize + 1;
+
+      const blockGroupNode = editor.state.schema.nodes["blockGroup"].create(
+        {},
+        nodesToInsert
+      );
+
+      editor.view.dispatch(
+        editor.state.tr.insert(insertionPos, blockGroupNode)
+      );
+
+      return;
+    }
+
+    insertionPos = posBeforeNode + node.firstChild!.nodeSize + 2;
+  }
+
+  editor.view.dispatch(editor.state.tr.insert(insertionPos, nodesToInsert));
+}
+
+export function updateBlock(
+  blockToUpdate: BlockIdentifier,
+  update: PartialBlock,
+  editor: Editor
+) {
+  const id =
+    typeof blockToUpdate === "string" ? blockToUpdate : blockToUpdate.id;
+  const { posBeforeNode } = getNodeById(id, editor.state.doc);
+
+  editor.commands.BNUpdateBlock(posBeforeNode + 1, update);
+}
+
+export function removeBlocks(
+  blocksToRemove: BlockIdentifier[],
+  editor: Editor
+) {
+  const idsOfBlocksToRemove = new Set<string>(
+    blocksToRemove.map((block) =>
+      typeof block === "string" ? block : block.id
+    )
+  );
+
+  let removedSize = 0;
+
+  editor.state.doc.descendants((node, pos) => {
+    // Skips traversing nodes after all target blocks have been removed.
+    if (idsOfBlocksToRemove.size === 0) {
+      return false;
+    }
+
+    // Keeps traversing nodes if block with target ID has not been found.
+    if (
+      node.type.name !== "blockContainer" ||
+      !idsOfBlocksToRemove.has(node.attrs.id)
+    ) {
+      return true;
+    }
+
+    idsOfBlocksToRemove.delete(node.attrs.id);
+    const oldDocSize = editor.state.doc.nodeSize;
+
+    editor.commands.BNDeleteBlock(pos - removedSize + 1);
+
+    const newDocSize = editor.state.doc.nodeSize;
+    removedSize += oldDocSize - newDocSize;
+
+    return false;
+  });
+
+  if (idsOfBlocksToRemove.size > 0) {
+    let notFoundIds = [...idsOfBlocksToRemove].join("\n");
+
+    throw Error(
+      "Blocks with the following IDs could not be found in the editor: " +
+        notFoundIds
+    );
+  }
+}
+
+export function replaceBlocks(
+  blocksToRemove: BlockIdentifier[],
+  blocksToInsert: PartialBlock[],
+  editor: Editor
+) {
+  insertBlocks(blocksToInsert, blocksToRemove[0], "before", editor);
+  removeBlocks(blocksToRemove, editor);
+}

package/src/api/formatConversions/__snapshots__/formatConversions.test.ts.snap

@@ -0,0 +1,346 @@
+// Vitest Snapshot v1
+
+exports[`Complex Block/HTML/Markdown Conversions > Convert complex blocks to HTML 1`] = `"<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><p><span data-text-color=\\"purple\\"><span data-background-color=\\"green\\">Paragraph</span></span></p><p>P<strong>ara</strong><em>grap</em>h</p><p>P<u>ara</u><s>grap</s>h</p><ul><li><p>Bullet List Item</p></li><li><p>Bullet List Item</p><ul><li><p>Bullet List Item</p><ul><li><p>Bullet List Item</p></li></ul><p>Paragraph</p><ol><li><p>Numbered List Item</p></li><li><p>Numbered List Item</p></li><li><p>Numbered List Item</p><ol><li><p>Numbered List Item</p></li></ol></li></ol><ul><li><p>Bullet List Item</p></li></ul></li><li><p>Bullet List Item</p></li></ul></li><li><p>Bullet List Item</p></li></ul>"`;
+
+exports[`Complex Block/HTML/Markdown Conversions > Convert complex blocks to Markdown 1`] = `
+"# Heading 1
+
+## Heading 2
+
+### Heading 3
+
+Paragraph
+
+P**ara***grap*h
+
+Para~~grap~~h
+
+*   Bullet List Item
+
+*   Bullet List Item
+
+    *   Bullet List Item
+
+        *   Bullet List Item
+
+        Paragraph
+
+        1.  Numbered List Item
+
+        2.  Numbered List Item
+
+        3.  Numbered List Item
+
+            1.  Numbered List Item
+
+        *   Bullet List Item
+
+    *   Bullet List Item
+
+*   Bullet List Item
+"
+`;
+
+exports[`Nested Block/HTML/Markdown Conversions > Convert nested blocks to HTML 1`] = `"<h1>Heading</h1><p>Paragraph</p><ul><li><p>Bullet List Item</p><ol><li><p>Numbered List Item</p></li></ol></li></ul>"`;
+
+exports[`Nested Block/HTML/Markdown Conversions > Convert nested blocks to Markdown 1`] = `
+"# Heading
+
+Paragraph
+
+*   Bullet List Item
+
+    1.  Numbered List Item
+"
+`;
+
+exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested HTML to blocks 1`] = `
+[
+  {
+    "children": [],
+    "content": [
+      {
+        "styles": {},
+        "text": "Heading",
+        "type": "text",
+      },
+    ],
+    "id": 27,
+    "props": {
+      "backgroundColor": "default",
+      "level": "1",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "heading",
+  },
+  {
+    "children": [],
+    "content": [
+      {
+        "styles": {},
+        "text": "Paragraph",
+        "type": "text",
+      },
+    ],
+    "id": 28,
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+  {
+    "children": [],
+    "content": [
+      {
+        "styles": {},
+        "text": "Bullet List Item",
+        "type": "text",
+      },
+    ],
+    "id": 29,
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "bulletListItem",
+  },
+  {
+    "children": [],
+    "content": [
+      {
+        "styles": {},
+        "text": "Numbered List Item",
+        "type": "text",
+      },
+    ],
+    "id": 30,
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "numberedListItem",
+  },
+]
+`;
+
+exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested Markdown to blocks 1`] = `
+[
+  {
+    "children": [],
+    "content": [
+      {
+        "styles": {},
+        "text": "Heading",
+        "type": "text",
+      },
+    ],
+    "id": 27,
+    "props": {
+      "backgroundColor": "default",
+      "level": "1",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "heading",
+  },
+  {
+    "children": [],
+    "content": [
+      {
+        "styles": {},
+        "text": "Paragraph",
+        "type": "text",
+      },
+    ],
+    "id": 28,
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+  {
+    "children": [],
+    "content": [
+      {
+        "styles": {},
+        "text": "Bullet List Item",
+        "type": "text",
+      },
+    ],
+    "id": 29,
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "bulletListItem",
+  },
+  {
+    "children": [],
+    "content": [
+      {
+        "styles": {},
+        "text": "Numbered List Item",
+        "type": "text",
+      },
+    ],
+    "id": 30,
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "numberedListItem",
+  },
+]
+`;
+
+exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested blocks to HTML 1`] = `"<h1>Heading</h1><p>Paragraph</p><ul><li><p>Bullet List Item</p></li></ul><ol><li><p>Numbered List Item</p></li></ol>"`;
+
+exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested blocks to Markdown 1`] = `
+"# Heading
+
+Paragraph
+
+*   Bullet List Item
+
+1.  Numbered List Item
+"
+`;
+
+exports[`Styled Block/HTML/Markdown Conversions > Convert styled HTML to blocks 1`] = `
+[
+  {
+    "children": [],
+    "content": [
+      {
+        "styles": {
+          "bold": true,
+        },
+        "text": "Bold",
+        "type": "text",
+      },
+      {
+        "styles": {
+          "italic": true,
+        },
+        "text": "Italic",
+        "type": "text",
+      },
+      {
+        "styles": {
+          "underline": true,
+        },
+        "text": "Underline",
+        "type": "text",
+      },
+      {
+        "styles": {
+          "strike": true,
+        },
+        "text": "Strikethrough",
+        "type": "text",
+      },
+      {
+        "styles": {
+          "textColor": "red",
+        },
+        "text": "TextColor",
+        "type": "text",
+      },
+      {
+        "styles": {
+          "backgroundColor": "red",
+        },
+        "text": "BackgroundColor",
+        "type": "text",
+      },
+      {
+        "styles": {
+          "bold": true,
+          "italic": true,
+        },
+        "text": "Multiple",
+        "type": "text",
+      },
+    ],
+    "id": 27,
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+]
+`;
+
+exports[`Styled Block/HTML/Markdown Conversions > Convert styled Markdown to blocks 1`] = `
+[
+  {
+    "children": [],
+    "content": [
+      {
+        "styles": {
+          "bold": true,
+        },
+        "text": "Bold",
+        "type": "text",
+      },
+      {
+        "styles": {
+          "italic": true,
+        },
+        "text": "Italic",
+        "type": "text",
+      },
+      {
+        "styles": {},
+        "text": "Underline",
+        "type": "text",
+      },
+      {
+        "styles": {
+          "strike": true,
+        },
+        "text": "Strikethrough",
+        "type": "text",
+      },
+      {
+        "styles": {},
+        "text": "TextColorBackgroundColor",
+        "type": "text",
+      },
+      {
+        "styles": {
+          "bold": true,
+          "italic": true,
+        },
+        "text": "Multiple",
+        "type": "text",
+      },
+    ],
+    "id": 27,
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+]
+`;
+
+exports[`Styled Block/HTML/Markdown Conversions > Convert styled blocks to HTML 1`] = `"<p><strong>Bold</strong><em>Italic</em><u>Underline</u><s>Strikethrough</s><span data-text-color=\\"red\\">TextColor</span><span data-background-color=\\"red\\">BackgroundColor</span><strong><em>Multiple</em></strong></p>"`;
+
+exports[`Styled Block/HTML/Markdown Conversions > Convert styled blocks to Markdown 1`] = `
+"**Bold***Italic*Underline~~Strikethrough~~TextColorBackgroundColor***Multiple***
+"
+`;