@blocknote/core 0.41.1 → 0.42.1

package/src/yjs/utils.test.ts

@@ -0,0 +1,1023 @@
+import { Block, docToBlocks } from "../index.js";
+import { BlockNoteEditor } from "../editor/BlockNoteEditor.js";
+import { describe, expect, it } from "vitest";
+import * as Y from "yjs";
+import {
+  _blocksToProsemirrorNode,
+  blocksToYDoc,
+  blocksToYXmlFragment,
+  yDocToBlocks,
+  yXmlFragmentToBlocks,
+} from "./utils.js";
+
+describe("Test yjs utils", () => {
+  const editor = BlockNoteEditor.create();
+
+  const testConversion = (testName: string, blocks: Block[]) => {
+    it(`${testName} - converts to and from prosemirror (doc)`, () => {
+      const node = _blocksToProsemirrorNode(editor, blocks);
+      const blockOutput = docToBlocks(node);
+      expect(blockOutput).toEqual(blocks);
+    });
+
+    it(`${testName} - converts to and from yjs (doc)`, () => {
+      const ydoc = blocksToYDoc(editor, blocks);
+      const blockOutput = yDocToBlocks(editor, ydoc);
+      expect(blockOutput).toEqual(blocks);
+    });
+
+    it(`${testName} - converts to and from yjs (fragment)`, () => {
+      const doc = new Y.Doc();
+      const fragment = doc.getXmlFragment("test");
+      blocksToYXmlFragment(editor, blocks, fragment);
+
+      const blockOutput = yXmlFragmentToBlocks(editor, fragment);
+      expect(blockOutput).toEqual(blocks);
+    });
+  };
+
+  describe("Original test case", () => {
+    const blocks: Block[] = [
+      {
+        id: "1",
+        type: "heading",
+        props: {
+          backgroundColor: "blue",
+          textColor: "yellow",
+          textAlignment: "right",
+          level: 2,
+          isToggleable: false,
+        },
+        content: [
+          {
+            type: "text",
+            text: "Heading ",
+            styles: {
+              bold: true,
+              underline: true,
+            },
+          },
+          {
+            type: "text",
+            text: "2",
+            styles: {
+              italic: true,
+              strike: true,
+            },
+          },
+        ],
+        children: [
+          {
+            id: "2",
+            type: "paragraph",
+            props: {
+              backgroundColor: "red",
+              textAlignment: "left",
+              textColor: "default",
+            },
+            content: [
+              {
+                type: "text",
+                text: "Paragraph",
+                styles: {},
+              },
+            ],
+            children: [],
+          },
+          {
+            id: "3",
+            type: "bulletListItem",
+            props: {
+              backgroundColor: "default",
+              textColor: "default",
+              textAlignment: "left",
+            },
+            content: [
+              {
+                type: "text",
+                text: "list item",
+                styles: {},
+              },
+            ],
+            children: [],
+          },
+        ],
+      },
+      {
+        id: "4",
+        type: "image",
+        props: {
+          backgroundColor: "default",
+          textAlignment: "left",
+          name: "Example",
+          url: "exampleURL",
+          caption: "Caption",
+          showPreview: true,
+          previewWidth: 256,
+        },
+        content: undefined,
+        children: [],
+      },
+      {
+        id: "5",
+        type: "image",
+        props: {
+          backgroundColor: "default",
+          textAlignment: "left",
+          name: "Example",
+          url: "exampleURL",
+          caption: "Caption",
+          showPreview: false,
+          previewWidth: 256,
+        },
+        content: undefined,
+        children: [],
+      },
+    ];
+
+    testConversion("original test case", blocks);
+  });
+
+  describe("Empty document", () => {
+    it("empty document - handles empty array", () => {
+      const blocks: Block[] = [];
+      const node = _blocksToProsemirrorNode(editor, blocks);
+      const blockOutput = docToBlocks(node);
+      expect(blockOutput).toEqual([]);
+    });
+
+    it("empty document - converts to and from yjs (doc)", () => {
+      const blocks: Block[] = [];
+      const ydoc = blocksToYDoc(editor, blocks);
+      const blockOutput = yDocToBlocks(editor, ydoc);
+      expect(blockOutput).toEqual([]);
+    });
+
+    it("empty document - converts to and from yjs (fragment)", () => {
+      const blocks: Block[] = [];
+      const doc = new Y.Doc();
+      const fragment = doc.getXmlFragment("test");
+      blocksToYXmlFragment(editor, blocks, fragment);
+
+      const blockOutput = yXmlFragmentToBlocks(editor, fragment);
+      expect(blockOutput).toEqual([]);
+    });
+  });
+
+  describe("Simple paragraphs", () => {
+    const blocks: Block[] = [
+      {
+        id: "1",
+        type: "paragraph",
+        props: {
+          backgroundColor: "default",
+          textColor: "default",
+          textAlignment: "left",
+        },
+        content: [
+          {
+            type: "text",
+            text: "First paragraph",
+            styles: {},
+          },
+        ],
+        children: [],
+      },
+      {
+        id: "2",
+        type: "paragraph",
+        props: {
+          backgroundColor: "default",
+          textColor: "default",
+          textAlignment: "center",
+        },
+        content: [
+          {
+            type: "text",
+            text: "Second paragraph",
+            styles: {},
+          },
+        ],
+        children: [],
+      },
+    ];
+    testConversion("simple paragraphs", blocks);
+  });
+
+  describe("Deeply nested lists", () => {
+    const blocks: Block[] = [
+      {
+        id: "1",
+        type: "bulletListItem",
+        props: {
+          backgroundColor: "default",
+          textColor: "default",
+          textAlignment: "left",
+        },
+        content: [
+          {
+            type: "text",
+            text: "Level 1",
+            styles: {},
+          },
+        ],
+        children: [
+          {
+            id: "2",
+            type: "bulletListItem",
+            props: {
+              backgroundColor: "default",
+              textColor: "default",
+              textAlignment: "left",
+            },
+            content: [
+              {
+                type: "text",
+                text: "Level 2",
+                styles: {},
+              },
+            ],
+            children: [
+              {
+                id: "3",
+                type: "bulletListItem",
+                props: {
+                  backgroundColor: "default",
+                  textColor: "default",
+                  textAlignment: "left",
+                },
+                content: [
+                  {
+                    type: "text",
+                    text: "Level 3",
+                    styles: {},
+                  },
+                ],
+                children: [
+                  {
+                    id: "4",
+                    type: "bulletListItem",
+                    props: {
+                      backgroundColor: "default",
+                      textColor: "default",
+                      textAlignment: "left",
+                    },
+                    content: [
+                      {
+                        type: "text",
+                        text: "Level 4",
+                        styles: {},
+                      },
+                    ],
+                    children: [],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ];
+    testConversion("deeply nested lists", blocks);
+  });
+
+  describe("Numbered lists", () => {
+    const blocks = [
+      {
+        id: "1",
+        type: "numberedListItem",
+        props: {
+          backgroundColor: "default",
+          textColor: "default",
+          textAlignment: "left",
+        },
+        content: [
+          {
+            type: "text",
+            text: "First item",
+            styles: {},
+          },
+        ],
+        children: [],
+      },
+      {
+        id: "2",
+        type: "numberedListItem",
+        props: {
+          backgroundColor: "default",
+          textColor: "default",
+          textAlignment: "left",
+        },
+        content: [
+          {
+            type: "text",
+            text: "Second item",
+            styles: {},
+          },
+        ],
+        children: [
+          {
+            id: "3",
+            type: "numberedListItem",
+            props: {
+              backgroundColor: "default",
+              textColor: "default",
+              textAlignment: "left",
+            },
+            content: [
+              {
+                type: "text",
+                text: "Nested item",
+                styles: {},
+              },
+            ],
+            children: [],
+          },
+        ],
+      },
+    ] as unknown as Block[];
+    testConversion("numbered lists", blocks);
+  });
+
+  describe("Checklists", () => {
+    const blocks: Block[] = [
+      {
+        id: "1",
+        type: "checkListItem",
+        props: {
+          backgroundColor: "default",
+          textColor: "default",
+          textAlignment: "left",
+          checked: true,
+        },
+        content: [
+          {
+            type: "text",
+            text: "Completed task",
+            styles: {},
+          },
+        ],
+        children: [],
+      },
+      {
+        id: "2",
+        type: "checkListItem",
+        props: {
+          backgroundColor: "default",
+          textColor: "default",
+          textAlignment: "left",
+          checked: false,
+        },
+        content: [
+          {
+            type: "text",
+            text: "Pending task",
+            styles: {},
+          },
+        ],
+        children: [
+          {
+            id: "3",
+            type: "checkListItem",
+            props: {
+              backgroundColor: "default",
+              textColor: "default",
+              textAlignment: "left",
+              checked: false,
+            },
+            content: [
+              {
+                type: "text",
+                text: "Subtask",
+                styles: {},
+              },
+            ],
+            children: [],
+          },
+        ],
+      },
+    ];
+    testConversion("checklists", blocks);
+  });
+
+  describe("Toggle lists", () => {
+    const blocks: Block[] = [
+      {
+        id: "1",
+        type: "toggleListItem",
+        props: {
+          backgroundColor: "default",
+          textColor: "default",
+          textAlignment: "left",
+        },
+        content: [
+          {
+            type: "text",
+            text: "Toggle item",
+            styles: {},
+          },
+        ],
+        children: [
+          {
+            id: "2",
+            type: "paragraph",
+            props: {
+              backgroundColor: "default",
+              textColor: "default",
+              textAlignment: "left",
+            },
+            content: [
+              {
+                type: "text",
+                text: "Hidden content",
+                styles: {},
+              },
+            ],
+            children: [],
+          },
+        ],
+      },
+    ];
+    testConversion("toggle lists", blocks);
+  });
+
+  describe("Code blocks", () => {
+    const blocks: Block[] = [
+      {
+        id: "1",
+        type: "codeBlock",
+        props: {
+          language: "javascript",
+        },
+        content: [
+          {
+            type: "text",
+            text: 'console.log("Hello, world!");',
+            styles: {},
+          },
+        ],
+        children: [],
+      },
+      {
+        id: "2",
+        type: "codeBlock",
+        props: {
+          language: "typescript",
+        },
+        content: [
+          {
+            type: "text",
+            text: "const x: number = 42;",
+            styles: {},
+          },
+        ],
+        children: [],
+      },
+    ];
+    testConversion("code blocks", blocks);
+  });
+
+  describe("Quotes", () => {
+    const blocks: Block[] = [
+      {
+        id: "1",
+        type: "quote",
+        props: {
+          backgroundColor: "default",
+          textColor: "default",
+        },
+        content: [
+          {
+            type: "text",
+            text: "This is a quote",
+            styles: {
+              italic: true,
+            },
+          },
+        ],
+        children: [
+          {
+            id: "2",
+            type: "paragraph",
+            props: {
+              backgroundColor: "default",
+              textColor: "default",
+              textAlignment: "left",
+            },
+            content: [
+              {
+                type: "text",
+                text: "Nested in quote",
+                styles: {},
+              },
+            ],
+            children: [],
+          },
+        ],
+      },
+    ];
+    testConversion("quotes", blocks);
+  });
+
+  describe("Headings with different levels", () => {
+    const blocks: Block[] = [
+      {
+        id: "1",
+        type: "heading",
+        props: {
+          backgroundColor: "default",
+          textColor: "default",
+          textAlignment: "left",
+          level: 1,
+          isToggleable: false,
+        },
+        content: [
+          {
+            type: "text",
+            text: "Heading 1",
+            styles: {},
+          },
+        ],
+        children: [],
+      },
+      {
+        id: "2",
+        type: "heading",
+        props: {
+          backgroundColor: "default",
+          textColor: "default",
+          textAlignment: "left",
+          level: 2,
+          isToggleable: false,
+        },
+        content: [
+          {
+            type: "text",
+            text: "Heading 2",
+            styles: {},
+          },
+        ],
+        children: [],
+      },
+      {
+        id: "3",
+        type: "heading",
+        props: {
+          backgroundColor: "default",
+          textColor: "default",
+          textAlignment: "left",
+          level: 3,
+          isToggleable: true,
+        },
+        content: [
+          {
+            type: "text",
+            text: "Toggle Heading 3",
+            styles: {},
+          },
+        ],
+        children: [
+          {
+            id: "4",
+            type: "paragraph",
+            props: {
+              backgroundColor: "default",
+              textColor: "default",
+              textAlignment: "left",
+            },
+            content: [
+              {
+                type: "text",
+                text: "Content under toggle heading",
+                styles: {},
+              },
+            ],
+            children: [],
+          },
+        ],
+      },
+    ];
+    testConversion("headings with different levels", blocks);
+  });
+
+  describe("Inline styles and links", () => {
+    const blocks: Block[] = [
+      {
+        id: "1",
+        type: "paragraph",
+        props: {
+          backgroundColor: "default",
+          textColor: "default",
+          textAlignment: "left",
+        },
+        content: [
+          {
+            type: "text",
+            text: "Bold ",
+            styles: {
+              bold: true,
+            },
+          },
+          {
+            type: "text",
+            text: "italic ",
+            styles: {
+              italic: true,
+            },
+          },
+          {
+            type: "text",
+            text: "underline ",
+            styles: {
+              underline: true,
+            },
+          },
+          {
+            type: "text",
+            text: "strikethrough ",
+            styles: {
+              strike: true,
+            },
+          },
+          {
+            type: "text",
+            text: "code",
+            styles: {
+              code: true,
+            },
+          },
+        ],
+        children: [],
+      },
+      {
+        id: "2",
+        type: "paragraph",
+        props: {
+          backgroundColor: "default",
+          textColor: "default",
+          textAlignment: "left",
+        },
+        content: [
+          {
+            type: "link",
+            href: "https://example.com",
+            content: [
+              {
+                type: "text",
+                text: "Link text",
+                styles: {},
+              },
+            ],
+          },
+        ],
+        children: [],
+      },
+    ];
+    testConversion("inline styles and links", blocks);
+  });
+
+  describe("Tables", () => {
+    const blocks = [
+      {
+        id: "1",
+        type: "table",
+        props: {
+          textColor: "default",
+        },
+        content: {
+          type: "tableContent",
+          columnWidths: [100, 100, 100],
+          headerRows: 1,
+          headerCols: undefined,
+          rows: [
+            {
+              cells: [
+                {
+                  type: "tableCell",
+                  props: {
+                    backgroundColor: "default",
+                    textColor: "default",
+                    textAlignment: "left",
+                    colspan: 1,
+                    rowspan: 1,
+                  },
+                  content: [
+                    {
+                      type: "text",
+                      text: "Header 1",
+                      styles: {
+                        bold: true,
+                      },
+                    },
+                  ],
+                },
+                {
+                  type: "tableCell",
+                  props: {
+                    backgroundColor: "default",
+                    textColor: "default",
+                    textAlignment: "left",
+                    colspan: 1,
+                    rowspan: 1,
+                  },
+                  content: [
+                    {
+                      type: "text",
+                      text: "Header 2",
+                      styles: {
+                        bold: true,
+                      },
+                    },
+                  ],
+                },
+                {
+                  type: "tableCell",
+                  props: {
+                    backgroundColor: "default",
+                    textColor: "default",
+                    textAlignment: "left",
+                    colspan: 1,
+                    rowspan: 1,
+                  },
+                  content: [
+                    {
+                      type: "text",
+                      text: "Header 3",
+                      styles: {
+                        bold: true,
+                      },
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              cells: [
+                {
+                  type: "tableCell",
+                  props: {
+                    backgroundColor: "default",
+                    textColor: "default",
+                    textAlignment: "left",
+                    colspan: 1,
+                    rowspan: 1,
+                  },
+                  content: [
+                    {
+                      type: "text",
+                      text: "Cell 1",
+                      styles: {},
+                    },
+                  ],
+                },
+                {
+                  type: "tableCell",
+                  props: {
+                    backgroundColor: "default",
+                    textColor: "default",
+                    textAlignment: "left",
+                    colspan: 1,
+                    rowspan: 1,
+                  },
+                  content: [
+                    {
+                      type: "text",
+                      text: "Cell 2",
+                      styles: {},
+                    },
+                  ],
+                },
+                {
+                  type: "tableCell",
+                  props: {
+                    backgroundColor: "default",
+                    textColor: "default",
+                    textAlignment: "left",
+                    colspan: 1,
+                    rowspan: 1,
+                  },
+                  content: [
+                    {
+                      type: "text",
+                      text: "Cell 3",
+                      styles: {},
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        children: [],
+      },
+    ] as unknown as Block[];
+    testConversion("tables", blocks);
+  });
+
+  describe("Divider", () => {
+    const blocks = [
+      {
+        id: "1",
+        type: "paragraph",
+        props: {
+          backgroundColor: "default",
+          textColor: "default",
+          textAlignment: "left",
+        },
+        content: [
+          {
+            type: "text",
+            text: "Before divider",
+            styles: {},
+          },
+        ],
+        children: [],
+      },
+      {
+        id: "2",
+        type: "divider",
+        props: {},
+        content: undefined,
+        children: [],
+      },
+      {
+        id: "3",
+        type: "paragraph",
+        props: {
+          backgroundColor: "default",
+          textColor: "default",
+          textAlignment: "left",
+        },
+        content: [
+          {
+            type: "text",
+            text: "After divider",
+            styles: {},
+          },
+        ],
+        children: [],
+      },
+    ] as unknown as Block[];
+    testConversion("divider", blocks);
+  });
+
+  describe("Complex mixed document", () => {
+    const blocks: Block[] = [
+      {
+        id: "1",
+        type: "heading",
+        props: {
+          backgroundColor: "blue",
+          textColor: "yellow",
+          textAlignment: "center",
+          level: 1,
+          isToggleable: false,
+        },
+        content: [
+          {
+            type: "text",
+            text: "Main Title",
+            styles: {
+              bold: true,
+            },
+          },
+        ],
+        children: [],
+      },
+      {
+        id: "2",
+        type: "paragraph",
+        props: {
+          backgroundColor: "red",
+          textColor: "default",
+          textAlignment: "right",
+        },
+        content: [
+          {
+            type: "text",
+            text: "This is a paragraph with ",
+            styles: {},
+          },
+          {
+            type: "text",
+            text: "mixed",
+            styles: {
+              bold: true,
+              italic: true,
+            },
+          },
+          {
+            type: "text",
+            text: " styles and a ",
+            styles: {},
+          },
+          {
+            type: "link",
+            href: "https://example.com",
+            content: [
+              {
+                type: "text",
+                text: "link",
+                styles: {},
+              },
+            ],
+          },
+          {
+            type: "text",
+            text: ".",
+            styles: {},
+          },
+        ],
+        children: [
+          {
+            id: "3",
+            type: "bulletListItem",
+            props: {
+              backgroundColor: "default",
+              textColor: "default",
+              textAlignment: "left",
+            },
+            content: [
+              {
+                type: "text",
+                text: "Nested list item",
+                styles: {},
+              },
+            ],
+            children: [],
+          },
+        ],
+      },
+      {
+        id: "4",
+        type: "quote",
+        props: {
+          backgroundColor: "default",
+          textColor: "default",
+        },
+        content: [
+          {
+            type: "text",
+            text: "Important quote",
+            styles: {
+              italic: true,
+            },
+          },
+        ],
+        children: [],
+      },
+      {
+        id: "5",
+        type: "codeBlock",
+        props: {
+          language: "typescript",
+        },
+        content: [
+          {
+            type: "text",
+            text: "const example = () => {\n  return 'code';\n};",
+            styles: {},
+          },
+        ],
+        children: [],
+      },
+      {
+        id: "6",
+        type: "checkListItem",
+        props: {
+          backgroundColor: "default",
+          textColor: "default",
+          textAlignment: "left",
+          checked: true,
+        },
+        content: [
+          {
+            type: "text",
+            text: "Completed checklist item",
+            styles: {},
+          },
+        ],
+        children: [],
+      },
+      {
+        id: "7",
+        type: "checkListItem",
+        props: {
+          backgroundColor: "default",
+          textColor: "default",
+          textAlignment: "left",
+          checked: false,
+        },
+        content: [
+          {
+            type: "text",
+            text: "Pending checklist item",
+            styles: {},
+          },
+        ],
+        children: [],
+      },
+    ];
+    testConversion("complex mixed document", blocks);
+  });
+});