@blocknote/core 0.4.0 → 0.4.3

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

@@ -1,14 +1,21 @@
 import { Editor } from "@tiptap/core";
 import { Node } from "prosemirror-model";
-import { Block, PartialBlock } from "../../extensions/Blocks/api/blockTypes";
-import { blockToNode, getNodeById } from "../nodeConversions/nodeConversions";
+import {
+  BlockIdentifier,
+  PartialBlock,
+} from "../../extensions/Blocks/api/blockTypes";
+import { blockToNode } from "../nodeConversions/nodeConversions";
+import { getNodeById } from "../util/nodeUtil";
 
 export function insertBlocks(
   blocksToInsert: PartialBlock[],
-  blockToInsertAt: Block,
+  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));
@@ -16,10 +23,7 @@ export function insertBlocks(
 
   let insertionPos = -1;
 
-  const { node, posBeforeNode } = getNodeById(
-    blockToInsertAt.id,
-    editor.state.doc
-  );
+  const { node, posBeforeNode } = getNodeById(id, editor.state.doc);
 
   if (placement === "before") {
     insertionPos = posBeforeNode;
@@ -53,18 +57,25 @@ export function insertBlocks(
 }
 
 export function updateBlock(
-  blockToUpdate: Block,
-  updatedBlock: PartialBlock,
+  blockToUpdate: BlockIdentifier,
+  update: PartialBlock,
   editor: Editor
 ) {
-  const { posBeforeNode } = getNodeById(blockToUpdate.id, editor.state.doc);
+  const id =
+    typeof blockToUpdate === "string" ? blockToUpdate : blockToUpdate.id;
+  const { posBeforeNode } = getNodeById(id, editor.state.doc);
 
-  editor.commands.BNUpdateBlock(posBeforeNode + 1, updatedBlock);
+  editor.commands.BNUpdateBlock(posBeforeNode + 1, update);
 }
 
-export function removeBlocks(blocksToRemove: Block[], editor: Editor) {
+export function removeBlocks(
+  blocksToRemove: BlockIdentifier[],
+  editor: Editor
+) {
   const idsOfBlocksToRemove = new Set<string>(
-    blocksToRemove.map((block) => block.id)
+    blocksToRemove.map((block) =>
+      typeof block === "string" ? block : block.id
+    )
   );
 
   let removedSize = 0;
@@ -105,7 +116,7 @@ export function removeBlocks(blocksToRemove: Block[], editor: Editor) {
 }
 
 export function replaceBlocks(
-  blocksToRemove: Block[],
+  blocksToRemove: BlockIdentifier[],
   blocksToInsert: PartialBlock[],
   editor: 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***
+"
+`;