@blocknote/core 0.4.0 → 0.4.2

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

@@ -0,0 +1,268 @@
+// Vitest Snapshot v1
+
+exports[`Complex ProseMirror Node Conversions > Convert complex block to node 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "blue",
+    "id": 4,
+    "textColor": "yellow",
+  },
+  "content": [
+    {
+      "attrs": {
+        "level": "2",
+        "textAlignment": "right",
+      },
+      "content": [
+        {
+          "marks": [
+            {
+              "type": "bold",
+            },
+            {
+              "type": "underline",
+            },
+          ],
+          "text": "Heading ",
+          "type": "text",
+        },
+        {
+          "marks": [
+            {
+              "type": "italic",
+            },
+            {
+              "type": "strike",
+            },
+          ],
+          "text": "2",
+          "type": "text",
+        },
+      ],
+      "type": "heading",
+    },
+    {
+      "content": [
+        {
+          "attrs": {
+            "backgroundColor": "red",
+            "id": 5,
+            "textColor": "default",
+          },
+          "content": [
+            {
+              "attrs": {
+                "textAlignment": "left",
+              },
+              "content": [
+                {
+                  "text": "Paragraph",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "blockContainer",
+        },
+        {
+          "attrs": {
+            "backgroundColor": "default",
+            "id": 6,
+            "textColor": "default",
+          },
+          "content": [
+            {
+              "attrs": {
+                "textAlignment": "left",
+              },
+              "type": "bulletListItem",
+            },
+          ],
+          "type": "blockContainer",
+        },
+      ],
+      "type": "blockGroup",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
+exports[`Complex ProseMirror Node Conversions > Convert complex node to block 1`] = `
+{
+  "children": [
+    {
+      "children": [],
+      "content": [
+        {
+          "styles": {},
+          "text": "Paragraph",
+          "type": "text",
+        },
+      ],
+      "id": 2,
+      "props": {
+        "backgroundColor": "red",
+        "textAlignment": "left",
+        "textColor": "default",
+      },
+      "type": "paragraph",
+    },
+    {
+      "children": [],
+      "content": [],
+      "id": 3,
+      "props": {
+        "backgroundColor": "default",
+        "textAlignment": "left",
+        "textColor": "default",
+      },
+      "type": "bulletListItem",
+    },
+  ],
+  "content": [
+    {
+      "styles": {
+        "bold": true,
+        "underline": true,
+      },
+      "text": "Heading ",
+      "type": "text",
+    },
+    {
+      "styles": {
+        "italic": true,
+        "strike": true,
+      },
+      "text": "2",
+      "type": "text",
+    },
+  ],
+  "id": 1,
+  "props": {
+    "backgroundColor": "blue",
+    "level": "2",
+    "textAlignment": "right",
+    "textColor": "yellow",
+  },
+  "type": "heading",
+}
+`;
+
+exports[`Simple ProseMirror Node Conversions > Convert simple block to node 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": 4,
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "textAlignment": "left",
+      },
+      "type": "paragraph",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
+exports[`Simple ProseMirror Node Conversions > Convert simple node to block 1`] = `
+{
+  "children": [],
+  "content": [],
+  "id": 0,
+  "props": {
+    "backgroundColor": "default",
+    "textAlignment": "left",
+    "textColor": "default",
+  },
+  "type": "paragraph",
+}
+`;
+
+exports[`links > Convert a block with link 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": 4,
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "textAlignment": "left",
+      },
+      "content": [
+        {
+          "marks": [
+            {
+              "attrs": {
+                "class": null,
+                "href": "https://www.website.com",
+                "target": "_blank",
+              },
+              "type": "link",
+            },
+          ],
+          "text": "Website",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
+exports[`links > Convert two adjacent links in a block 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": 4,
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "textAlignment": "left",
+      },
+      "content": [
+        {
+          "marks": [
+            {
+              "attrs": {
+                "class": null,
+                "href": "https://www.website.com",
+                "target": "_blank",
+              },
+              "type": "link",
+            },
+          ],
+          "text": "Website",
+          "type": "text",
+        },
+        {
+          "marks": [
+            {
+              "attrs": {
+                "class": null,
+                "href": "https://www.website2.com",
+                "target": "_blank",
+              },
+              "type": "link",
+            },
+          ],
+          "text": "Website2",
+          "type": "text",
+        },
+      ],
+      "type": "paragraph",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;

package/src/api/nodeConversions/nodeConversions.test.ts

@@ -0,0 +1,244 @@
+import { Editor } from "@tiptap/core";
+import { Node } from "prosemirror-model";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { BlockNoteEditor, PartialBlock } from "../..";
+import UniqueID from "../../extensions/UniqueID/UniqueID";
+import { blockToNode, nodeToBlock } from "./nodeConversions";
+import { partialBlockToBlockForTesting } from "./testUtil";
+
+let editor: BlockNoteEditor;
+let tt: Editor;
+
+let simpleBlock: PartialBlock;
+let simpleNode: Node;
+
+let complexBlock: PartialBlock;
+let complexNode: Node;
+
+beforeEach(() => {
+  (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS = {};
+
+  editor = new BlockNoteEditor();
+  tt = editor._tiptapEditor;
+
+  simpleBlock = {
+    type: "paragraph",
+  };
+  simpleNode = tt.schema.nodes["blockContainer"].create(
+    { id: UniqueID.options.generateID() },
+    tt.schema.nodes["paragraph"].create()
+  );
+
+  complexBlock = {
+    type: "heading",
+    props: {
+      backgroundColor: "blue",
+      textColor: "yellow",
+      textAlignment: "right",
+      level: "2",
+    },
+    content: [
+      {
+        type: "text",
+        text: "Heading ",
+        styles: {
+          bold: true,
+          underline: true,
+        },
+      },
+      {
+        type: "text",
+        text: "2",
+        styles: {
+          italic: true,
+          strike: true,
+        },
+      },
+    ],
+    children: [
+      {
+        type: "paragraph",
+        props: {
+          backgroundColor: "red",
+        },
+        content: "Paragraph",
+        children: [],
+      },
+      {
+        type: "bulletListItem",
+      },
+    ],
+  };
+  complexNode = tt.schema.nodes["blockContainer"].create(
+    {
+      id: UniqueID.options.generateID(),
+      backgroundColor: "blue",
+      textColor: "yellow",
+    },
+    [
+      tt.schema.nodes["heading"].create(
+        { textAlignment: "right", level: "2" },
+        [
+          tt.schema.text("Heading ", [
+            tt.schema.mark("bold"),
+            tt.schema.mark("underline"),
+          ]),
+          tt.schema.text("2", [
+            tt.schema.mark("italic"),
+            tt.schema.mark("strike"),
+          ]),
+        ]
+      ),
+      tt.schema.nodes["blockGroup"].create({}, [
+        tt.schema.nodes["blockContainer"].create(
+          { id: UniqueID.options.generateID(), backgroundColor: "red" },
+          [tt.schema.nodes["paragraph"].create({}, tt.schema.text("Paragraph"))]
+        ),
+        tt.schema.nodes["blockContainer"].create(
+          { id: UniqueID.options.generateID() },
+          [tt.schema.nodes["bulletListItem"].create()]
+        ),
+      ]),
+    ]
+  );
+});
+
+afterEach(() => {
+  tt.destroy();
+  editor = undefined as any;
+  tt = undefined as any;
+
+  delete (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS;
+});
+
+describe("Simple ProseMirror Node Conversions", () => {
+  it("Convert simple block to node", async () => {
+    const firstNodeConversion = blockToNode(simpleBlock, tt.schema);
+
+    expect(firstNodeConversion).toMatchSnapshot();
+  });
+
+  it("Convert simple node to block", async () => {
+    const firstBlockConversion = nodeToBlock(simpleNode);
+
+    expect(firstBlockConversion).toMatchSnapshot();
+
+    const firstNodeConversion = blockToNode(firstBlockConversion, tt.schema);
+
+    expect(firstNodeConversion).toStrictEqual(simpleNode);
+  });
+});
+
+describe("Complex ProseMirror Node Conversions", () => {
+  it("Convert complex block to node", async () => {
+    const firstNodeConversion = blockToNode(complexBlock, tt.schema);
+
+    expect(firstNodeConversion).toMatchSnapshot();
+  });
+
+  it("Convert complex node to block", async () => {
+    const firstBlockConversion = nodeToBlock(complexNode);
+
+    expect(firstBlockConversion).toMatchSnapshot();
+
+    const firstNodeConversion = blockToNode(firstBlockConversion, tt.schema);
+
+    expect(firstNodeConversion).toStrictEqual(complexNode);
+  });
+});
+
+describe("links", () => {
+  it("Convert a block with link", async () => {
+    const block: PartialBlock = {
+      id: UniqueID.options.generateID(),
+      type: "paragraph",
+      content: [
+        {
+          type: "link",
+          href: "https://www.website.com",
+          content: "Website",
+        },
+      ],
+    };
+    const node = blockToNode(block, tt.schema);
+    expect(node).toMatchSnapshot();
+    const outputBlock = nodeToBlock(node);
+
+    // Temporary fix to set props to {}, because at this point
+    // we don't have an easy way to access default props at runtime,
+    // so partialBlockToBlockForTesting will not set them.
+    (outputBlock as any).props = {};
+    const fullOriginalBlock = partialBlockToBlockForTesting(block);
+
+    expect(outputBlock).toStrictEqual(fullOriginalBlock);
+  });
+
+  it("Convert link block with marks", async () => {
+    const block: PartialBlock = {
+      id: UniqueID.options.generateID(),
+      type: "paragraph",
+      content: [
+        {
+          type: "link",
+          href: "https://www.website.com",
+          content: [
+            {
+              type: "text",
+              text: "Web",
+              styles: {
+                bold: true,
+              },
+            },
+            {
+              type: "text",
+              text: "site",
+              styles: {},
+            },
+          ],
+        },
+      ],
+    };
+    const node = blockToNode(block, tt.schema);
+    // expect(node).toMatchSnapshot();
+    const outputBlock = nodeToBlock(node);
+
+    // Temporary fix to set props to {}, because at this point
+    // we don't have an easy way to access default props at runtime,
+    // so partialBlockToBlockForTesting will not set them.
+    (outputBlock as any).props = {};
+    const fullOriginalBlock = partialBlockToBlockForTesting(block);
+
+    expect(outputBlock).toStrictEqual(fullOriginalBlock);
+  });
+
+  it("Convert two adjacent links in a block", async () => {
+    const block: PartialBlock = {
+      id: UniqueID.options.generateID(),
+      type: "paragraph",
+      content: [
+        {
+          type: "link",
+          href: "https://www.website.com",
+          content: "Website",
+        },
+        {
+          type: "link",
+          href: "https://www.website2.com",
+          content: "Website2",
+        },
+      ],
+    };
+
+    const node = blockToNode(block, tt.schema);
+    expect(node).toMatchSnapshot();
+    const outputBlock = nodeToBlock(node);
+
+    // Temporary fix to set props to {}, because at this point
+    // we don't have an easy way to access default props at runtime,
+    // so partialBlockToBlockForTesting will not set them.
+    (outputBlock as any).props = {};
+    const fullOriginalBlock = partialBlockToBlockForTesting(block);
+
+    expect(outputBlock).toStrictEqual(fullOriginalBlock);
+  });
+});