@blocknote/xl-multi-column 0.19.0

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

@@ -0,0 +1,206 @@
+import { describe, expect, it } from "vitest";
+
+import { setupTestEnv } from "../setupTestEnv.js";
+
+const getEditor = setupTestEnv();
+
+describe("Test insertBlocks", () => {
+  it("Insert empty column list", () => {
+    // should throw an error as we don't allow empty column lists
+    expect(() => {
+      getEditor().insertBlocks(
+        [{ type: "columnList" }],
+        "paragraph-0",
+        "after"
+      );
+    }).toThrow();
+  });
+
+  it("Insert column list with empty column", () => {
+    // should throw an error as we don't allow empty columns
+    expect(() => {
+      getEditor().insertBlocks(
+        [
+          {
+            type: "columnList",
+            children: [
+              {
+                type: "column",
+              },
+            ],
+          },
+        ],
+        "paragraph-0",
+        "after"
+      );
+    }).toThrow();
+  });
+
+  it("Insert column list with single column", () => {
+    // should throw an error as we don't allow column list with single column
+    expect(() => {
+      getEditor().insertBlocks(
+        [
+          {
+            type: "columnList",
+            children: [
+              {
+                type: "column",
+                children: [
+                  {
+                    type: "paragraph",
+                    content: "Inserted Column Paragraph",
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+        "paragraph-0",
+        "after"
+      );
+    }).toThrow();
+  });
+
+  it("Insert valid column list with two columns", () => {
+    getEditor().insertBlocks(
+      [
+        {
+          type: "columnList",
+          children: [
+            {
+              type: "column",
+              children: [
+                {
+                  type: "paragraph",
+                  content: "Inserted Column Paragraph",
+                },
+              ],
+            },
+            {
+              type: "column",
+              children: [
+                {
+                  type: "paragraph",
+                  content: "Inserted Second Column Paragraph",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      "paragraph-0",
+      "after"
+    );
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Insert column with paragraph into column list", () => {
+    getEditor().insertBlocks(
+      [
+        {
+          type: "column",
+          children: [
+            {
+              type: "paragraph",
+              content: "Inserted Column Paragraph",
+            },
+          ],
+        },
+      ],
+      "column-0",
+      "before"
+    );
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Insert column list into paragraph", () => {
+    getEditor().insertBlocks(
+      [
+        {
+          type: "columnList",
+          children: [
+            {
+              type: "column",
+              children: [
+                {
+                  type: "paragraph",
+                  content: "Inserted Column Paragraph",
+                },
+              ],
+            },
+            {
+              type: "column",
+              children: [
+                {
+                  type: "paragraph",
+                  content: "Inserted Column Paragraph",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      "nested-paragraph-0",
+      "after"
+    );
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  // TODO: failing because prosemirror "insert" finds a place to insert this using the fitting algorithm
+  it.skip("Insert column into paragraph", () => {
+    // should throw an error as we don't allow columns to be children of paragraphs
+    expect(() => {
+      getEditor().insertBlocks(
+        [
+          {
+            type: "column",
+            children: [
+              {
+                type: "paragraph",
+                content: "Inserted Column Paragraph",
+              },
+            ],
+          },
+        ],
+        "nested-paragraph-0",
+        "after"
+      );
+    }).toThrow();
+  });
+
+  // TODO: failing because prosemirror "insert" finds a place to insert this using the fitting algorithm
+  it.skip("Insert paragraph into column list", () => {
+    // should throw an error as we don't allow paragraphs to be children of column lists
+    expect(() => {
+      getEditor().insertBlocks(
+        [
+          {
+            type: "paragraph",
+            content: "Inserted Column List Paragraph",
+          },
+        ],
+        "column-0",
+        "after"
+      );
+    }).toThrow();
+  });
+
+  it("Insert paragraph into column", () => {
+    getEditor().insertBlocks(
+      [
+        {
+          type: "paragraph",
+          content: "Inserted Column List Paragraph",
+        },
+      ],
+      "column-paragraph-0",
+      "after"
+    );
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+});

package/src/test/commands/textCursorPosition.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+
+import { setupTestEnv } from "../setupTestEnv.js";
+
+const getEditor = setupTestEnv();
+
+describe("Test getTextCursorPosition & setTextCursorPosition", () => {
+  it("Column list", () => {
+    getEditor().setTextCursorPosition("column-list-0");
+
+    expect(getEditor().getTextCursorPosition()).toMatchSnapshot();
+  });
+
+  it("Column", () => {
+    getEditor().setTextCursorPosition("column-0");
+
+    expect(getEditor().getTextCursorPosition()).toMatchSnapshot();
+  });
+});

package/src/test/commands/updateBlock.test.ts

@@ -0,0 +1,212 @@
+import { describe, expect, it } from "vitest";
+
+import { setupTestEnv } from "../setupTestEnv.js";
+
+const getEditor = setupTestEnv();
+
+describe("Test updateBlock", () => {
+  it("Update column list new children", () => {
+    getEditor().updateBlock("column-list-0", {
+      type: "columnList",
+      children: [
+        {
+          type: "column",
+          children: [
+            {
+              type: "paragraph",
+              content: "Inserted Column Paragraph",
+            },
+          ],
+        },
+        {
+          type: "column",
+          children: [
+            {
+              type: "paragraph",
+              content: "Inserted Column Paragraph",
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update column list new empty children", () => {
+    // should throw because we don't allow empty columns / single columns
+    expect(() => {
+      getEditor().updateBlock("column-list-0", {
+        type: "columnList",
+        children: [
+          {
+            type: "paragraph",
+            content: "Inserted Column Paragraph",
+          },
+        ],
+      });
+    }).toThrow();
+  });
+
+  it("Update column new children", () => {
+    getEditor().updateBlock("column-0", {
+      type: "column",
+      children: [
+        {
+          type: "paragraph",
+          content: "Inserted Column Paragraph",
+        },
+      ],
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update paragraph to column list", () => {
+    getEditor().updateBlock("paragraph-0", {
+      type: "columnList",
+      children: [
+        {
+          type: "column",
+          children: [
+            {
+              type: "paragraph",
+              content: "Inserted Column Paragraph",
+            },
+          ],
+        },
+        {
+          type: "column",
+          children: [
+            {
+              type: "paragraph",
+              content: "Inserted Column Paragraph",
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update nested paragraph to column list", () => {
+    getEditor().updateBlock("nested-paragraph-0", {
+      type: "columnList",
+      children: [
+        {
+          type: "column",
+          children: [
+            {
+              type: "paragraph",
+              content: "Inserted Column Paragraph",
+            },
+          ],
+        },
+        {
+          type: "column",
+          children: [
+            {
+              type: "paragraph",
+              content: "Inserted Column Paragraph",
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update column to column list", () => {
+    // should throw an error as we don't allow a column list inside a columnlist
+    expect(() => {
+      getEditor().updateBlock("column-0", {
+        type: "columnList",
+        children: [
+          {
+            type: "column",
+            children: [
+              {
+                type: "paragraph",
+                content: "Inserted Column Paragraph",
+              },
+            ],
+          },
+          {
+            type: "column",
+            children: [
+              {
+                type: "paragraph",
+                content: "Inserted Column Paragraph",
+              },
+            ],
+          },
+        ],
+      });
+    }).toThrow();
+  });
+
+  it("Update paragraph to column", () => {
+    getEditor().updateBlock("paragraph-0", {
+      type: "column",
+      children: [
+        {
+          type: "paragraph",
+          content: "Inserted Column Paragraph",
+        },
+      ],
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update nested paragraph to column", () => {
+    getEditor().updateBlock("nested-paragraph-0", {
+      type: "column",
+      children: [
+        {
+          type: "paragraph",
+          content: "Inserted Column Paragraph",
+        },
+      ],
+    });
+
+    expect(getEditor().document).toMatchSnapshot();
+  });
+
+  it("Update column list to column", () => {
+    // this would cause a column to become a child of a node that's not a column list, and should thus throw an error
+    expect(() => {
+      getEditor().updateBlock("column-list-0", {
+        type: "column",
+        children: [
+          {
+            type: "paragraph",
+            content: "Inserted Column Paragraph",
+          },
+        ],
+      });
+    }).toThrow();
+  });
+
+  it("Update column list to paragraph", () => {
+    // this would cause columns to become children of a paragraph, and should thus throw an error
+    expect(() => {
+      getEditor().updateBlock("column-list-0", {
+        type: "paragraph",
+        content: "Inserted Column Paragraph",
+      });
+    }).toThrow();
+  });
+
+  // TODO: this should throw, but currently doesn't, probably because of the fitting algorithm
+  it.skip("Update column to paragraph", () => {
+    expect(() => {
+      getEditor().updateBlock("column-0", {
+        type: "paragraph",
+        content: "Inserted Column Paragraph",
+      });
+    }).toThrow();
+  });
+});

package/src/test/conversions/__snapshots__/multi-column/undefined/external.html

@@ -0,0 +1 @@
+<div class="bn-block-column-list" data-node-type="columnList" data-id="1" style="display: flex;"><div class="bn-block-column" data-node-type="column" data-id="2" data-width="1" style="flex-grow: 1;"><p>Column Paragraph 0</p><p>Column Paragraph 1</p></div><div class="bn-block-column" data-node-type="column" data-id="5" data-width="1" style="flex-grow: 1;"><p>Column Paragraph 2</p><p>Column Paragraph 3</p></div></div>

package/src/test/conversions/__snapshots__/multi-column/undefined/internal.html

@@ -0,0 +1 @@
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-column-list" data-node-type="columnList" data-id="1" style="display: flex;"><div class="bn-block-column" data-node-type="column" data-id="2" data-width="1" style="flex-grow: 1;"><div class="bn-block-outer" data-node-type="blockOuter" data-id="3"><div class="bn-block" data-node-type="blockContainer" data-id="3"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content">Column Paragraph 0</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="4"><div class="bn-block" data-node-type="blockContainer" data-id="4"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content">Column Paragraph 1</p></div></div></div></div><div class="bn-block-column" data-node-type="column" data-id="5" data-width="1" style="flex-grow: 1;"><div class="bn-block-outer" data-node-type="blockOuter" data-id="6"><div class="bn-block" data-node-type="blockContainer" data-id="6"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content">Column Paragraph 2</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="7"><div class="bn-block" data-node-type="blockContainer" data-id="7"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content">Column Paragraph 3</p></div></div></div></div></div></div>

package/src/test/conversions/__snapshots__/nodeConversion.test.ts.snap

@@ -0,0 +1,118 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Test BlockNote-Prosemirror conversion > Case: multi-column-schema > Convert multi-column to/from prosemirror 1`] = `
+{
+  "attrs": {
+    "id": "1",
+  },
+  "content": [
+    {
+      "attrs": {
+        "id": "2",
+        "width": 1,
+      },
+      "content": [
+        {
+          "attrs": {
+            "backgroundColor": "default",
+            "id": "3",
+            "textColor": "default",
+          },
+          "content": [
+            {
+              "attrs": {
+                "textAlignment": "left",
+              },
+              "content": [
+                {
+                  "text": "Column Paragraph 0",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "blockContainer",
+        },
+        {
+          "attrs": {
+            "backgroundColor": "default",
+            "id": "4",
+            "textColor": "default",
+          },
+          "content": [
+            {
+              "attrs": {
+                "textAlignment": "left",
+              },
+              "content": [
+                {
+                  "text": "Column Paragraph 1",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "blockContainer",
+        },
+      ],
+      "type": "column",
+    },
+    {
+      "attrs": {
+        "id": "5",
+        "width": 1,
+      },
+      "content": [
+        {
+          "attrs": {
+            "backgroundColor": "default",
+            "id": "6",
+            "textColor": "default",
+          },
+          "content": [
+            {
+              "attrs": {
+                "textAlignment": "left",
+              },
+              "content": [
+                {
+                  "text": "Column Paragraph 2",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "blockContainer",
+        },
+        {
+          "attrs": {
+            "backgroundColor": "default",
+            "id": "7",
+            "textColor": "default",
+          },
+          "content": [
+            {
+              "attrs": {
+                "textAlignment": "left",
+              },
+              "content": [
+                {
+                  "text": "Column Paragraph 3",
+                  "type": "text",
+                },
+              ],
+              "type": "paragraph",
+            },
+          ],
+          "type": "blockContainer",
+        },
+      ],
+      "type": "column",
+    },
+  ],
+  "type": "columnList",
+}
+`;

package/src/test/conversions/htmlConversion.test.ts

@@ -0,0 +1,100 @@
+// @vitest-environment jsdom
+
+import {
+  BlockNoteEditor,
+  BlockSchema,
+  InlineContentSchema,
+  PartialBlock,
+  StyleSchema,
+  addIdsToBlocks,
+  createExternalHTMLExporter,
+  createInternalHTMLSerializer,
+  partialBlocksToBlocksForTesting,
+} from "@blocknote/core";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+
+import { multiColumnSchemaTestCases } from "./testCases.js";
+
+// TODO: code same from @blocknote/core, maybe create separate test util package
+async function convertToHTMLAndCompareSnapshots<
+  B extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  editor: BlockNoteEditor<B, I, S>,
+  blocks: PartialBlock<B, I, S>[],
+  snapshotDirectory: string,
+  snapshotName: string
+) {
+  addIdsToBlocks(blocks);
+  const serializer = createInternalHTMLSerializer(editor.pmSchema, editor);
+  const internalHTML = serializer.serializeBlocks(blocks, {});
+  const internalHTMLSnapshotPath =
+    "./__snapshots__/" +
+    snapshotDirectory +
+    "/" +
+    snapshotName +
+    "/internal.html";
+  expect(internalHTML).toMatchFileSnapshot(internalHTMLSnapshotPath);
+
+  // turn the internalHTML back into blocks, and make sure no data was lost
+  const fullBlocks = partialBlocksToBlocksForTesting(editor.schema, blocks);
+  const parsed = await editor.tryParseHTMLToBlocks(internalHTML);
+
+  expect(parsed).toStrictEqual(fullBlocks);
+
+  // Create the "external" HTML, which is a cleaned up HTML representation, but lossy
+  const exporter = createExternalHTMLExporter(editor.pmSchema, editor);
+  const externalHTML = exporter.exportBlocks(blocks, {});
+  const externalHTMLSnapshotPath =
+    "./__snapshots__/" +
+    snapshotDirectory +
+    "/" +
+    snapshotName +
+    "/external.html";
+  expect(externalHTML).toMatchFileSnapshot(externalHTMLSnapshotPath);
+}
+
+const testCases = [multiColumnSchemaTestCases];
+
+describe("Test multi-column HTML conversion", () => {
+  for (const testCase of testCases) {
+    describe("Case: " + testCase.name, () => {
+      let editor: BlockNoteEditor<any, any, any>;
+      const div = document.createElement("div");
+      beforeEach(() => {
+        editor = testCase.createEditor();
+
+        // Note that we don't necessarily need to mount a root
+        // Currently, we do mount to a root so that it reflects the "production" use-case more closely.
+
+        // However, it would be nice to increased converage and share the same set of tests for these cases:
+        // - does render to a root
+        // - does not render to a root
+        // - runs in server (jsdom) environment using server-util
+        editor.mount(div);
+      });
+
+      afterEach(() => {
+        editor.mount(undefined);
+        editor._tiptapEditor.destroy();
+        editor = undefined as any;
+
+        delete (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS;
+      });
+
+      for (const document of testCase.documents) {
+        // eslint-disable-next-line no-loop-func
+        it("Convert " + document.name + " to HTML", async () => {
+          const nameSplit = document.name.split("/");
+          await convertToHTMLAndCompareSnapshots(
+            editor,
+            document.blocks,
+            nameSplit[0],
+            nameSplit[1]
+          );
+        });
+      }
+    });
+  }
+});