@blocknote/core 0.9.5 → 0.10.0

package/src/api/parsers/html/util/nestedLists.test.ts

@@ -0,0 +1,176 @@
+import rehypeFormat from "rehype-format";
+import rehypeParse from "rehype-parse";
+import rehypeStringify from "rehype-stringify";
+import { unified } from "unified";
+import { describe, expect, it } from "vitest";
+import { nestedListsToBlockNoteStructure } from "./nestedLists";
+
+async function testHTML(html: string) {
+  const htmlNode = nestedListsToBlockNoteStructure(html);
+
+  const pretty = await unified()
+    .use(rehypeParse, { fragment: true })
+    .use(rehypeFormat)
+    .use(rehypeStringify)
+    .process(htmlNode.innerHTML);
+
+  expect(pretty.value).toMatchSnapshot();
+}
+
+describe("Lift nested lists", () => {
+  it("Lifts nested bullet lists", async () => {
+    const html = `<ul>
+    <li>
+       Bullet List Item 1
+       <ul>
+          <li>
+             Nested Bullet List Item 1
+          </li>
+          <li>
+             Nested Bullet List Item 2
+          </li>
+       </ul>
+    </li>
+    <li>
+    Bullet List Item 2
+    </li>
+ </ul>`;
+    await testHTML(html);
+  });
+
+  it("Lifts nested bullet lists without li", async () => {
+    const html = `<ul>
+       Bullet List Item 1
+       <ul>
+          <li>
+             Nested Bullet List Item 1
+          </li>
+          <li>
+             Nested Bullet List Item 2
+          </li>
+       </ul>
+    <li>
+    Bullet List Item 2
+    </li>
+ </ul>`;
+    await testHTML(html);
+  });
+
+  it("Lifts nested bullet lists with content after nested list", async () => {
+    const html = `<ul>
+    <li>
+       Bullet List Item 1
+       <ul>
+          <li>
+             Nested Bullet List Item 1
+          </li>
+          <li>
+             Nested Bullet List Item 2
+          </li>
+       </ul>
+       More content in list item 1
+    </li>
+    <li>
+    Bullet List Item 2
+    </li>
+ </ul>`;
+    await testHTML(html);
+  });
+
+  it("Lifts multiple bullet lists", async () => {
+    const html = `<ul>
+    <li>
+       Bullet List Item 1
+       <ul>
+          <li>
+             Nested Bullet List Item 1
+          </li>
+          <li>
+             Nested Bullet List Item 2
+          </li>
+       </ul>
+       <ul>
+          <li>
+             Nested Bullet List Item 3
+          </li>
+          <li>
+             Nested Bullet List Item 4
+          </li>
+       </ul>
+    </li>
+    <li>
+    Bullet List Item 2
+    </li>
+ </ul>`;
+    await testHTML(html);
+  });
+
+  it("Lifts multiple bullet lists with content in between", async () => {
+    const html = `<ul>
+    <li>
+       Bullet List Item 1
+       <ul>
+          <li>
+             Nested Bullet List Item 1
+          </li>
+          <li>
+             Nested Bullet List Item 2
+          </li>
+       </ul>
+       In between content
+       <ul>
+          <li>
+             Nested Bullet List Item 3
+          </li>
+          <li>
+             Nested Bullet List Item 4
+          </li>
+       </ul>
+    </li>
+    <li>
+    Bullet List Item 2
+    </li>
+ </ul>`;
+    await testHTML(html);
+  });
+
+  it("Lifts nested numbered lists", async () => {
+    const html = `<ol>
+    <li>
+       Numbered List Item 1
+       <ol>
+          <li>
+             Nested Numbered List Item 1
+          </li>
+          <li>
+             Nested Numbered List Item 2
+          </li>
+       </ol>
+    </li>
+    <li>
+       Numbered List Item 2
+    </li>
+ </ol>`;
+    await testHTML(html);
+  });
+
+  it("Lifts nested mixed lists", async () => {
+    const html = `<ol>
+    <li>
+       Numbered List Item 1
+       <ul>
+          <li>
+             Bullet List Item 1
+          </li>
+          <li>
+          Bullet List Item 2
+          </li>
+       </ul>
+    </li>
+    <li>
+       Numbered List Item 2
+    </li>
+ </ol>`;
+    await testHTML(html);
+  });
+});

package/src/api/parsers/html/util/nestedLists.ts

@@ -0,0 +1,113 @@
+function getChildIndex(node: Element) {
+  return Array.prototype.indexOf.call(node.parentElement!.childNodes, node);
+}
+
+function isWhitespaceNode(node: Node) {
+  return node.nodeType === 3 && !/\S/.test(node.nodeValue || "");
+}
+
+/**
+ * Step 1, Turns:
+ *
+ * <ul>
+ *  <li>item</li>
+ *  <li>
+ *   <ul>
+ *      <li>...</li>
+ *      <li>...</li>
+ *   </ul>
+ * </li>
+ *
+ * Into:
+ * <ul>
+ *  <li>item</li>
+ *  <ul>
+ *      <li>...</li>
+ *      <li>...</li>
+ *  </ul>
+ * </ul>
+ *
+ */
+function liftNestedListsToParent(element: HTMLElement) {
+  element.querySelectorAll("li > ul, li > ol").forEach((list) => {
+    const index = getChildIndex(list);
+    const parentListItem = list.parentElement!;
+    const siblingsAfter = Array.from(parentListItem.childNodes).slice(
+      index + 1
+    );
+    list.remove();
+    siblingsAfter.forEach((sibling) => {
+      sibling.remove();
+    });
+
+    parentListItem.insertAdjacentElement("afterend", list);
+
+    siblingsAfter.reverse().forEach((sibling) => {
+      if (isWhitespaceNode(sibling)) {
+        return;
+      }
+      const siblingContainer = document.createElement("li");
+      siblingContainer.append(sibling);
+      list.insertAdjacentElement("afterend", siblingContainer);
+    });
+    if (parentListItem.childNodes.length === 0) {
+      parentListItem.remove();
+    }
+  });
+}
+
+/**
+ * Step 2, Turns (output of liftNestedListsToParent):
+ *
+ * <li>item</li>
+ * <ul>
+ *   <li>...</li>
+ *   <li>...</li>
+ * </ul>
+ *
+ * Into:
+ * <div>
+ *  <li>item</li>
+ *  <div data-node-type="blockGroup">
+ *      <ul>
+ *          <li>...</li>
+ *          <li>...</li>
+ *      </ul>
+ *  </div>
+ * </div>
+ *
+ * This resulting format is parsed
+ */
+function createGroups(element: HTMLElement) {
+  element.querySelectorAll("li + ul, li + ol").forEach((list) => {
+    const listItem = list.previousElementSibling as HTMLElement;
+    const blockContainer = document.createElement("div");
+
+    listItem.insertAdjacentElement("afterend", blockContainer);
+    blockContainer.append(listItem);
+
+    const blockGroup = document.createElement("div");
+    blockGroup.setAttribute("data-node-type", "blockGroup");
+    blockContainer.append(blockGroup);
+
+    while (
+      blockContainer.nextElementSibling?.nodeName === "UL" ||
+      blockContainer.nextElementSibling?.nodeName === "OL"
+    ) {
+      blockGroup.append(blockContainer.nextElementSibling);
+    }
+  });
+}
+
+export function nestedListsToBlockNoteStructure(
+  elementOrHTML: HTMLElement | string
+) {
+  if (typeof elementOrHTML === "string") {
+    const element = document.createElement("div");
+    element.innerHTML = elementOrHTML;
+    elementOrHTML = element;
+  }
+  liftNestedListsToParent(elementOrHTML);
+  createGroups(elementOrHTML);
+  return elementOrHTML;
+}

package/src/api/parsers/markdown/__snapshots__/complex.json

@@ -0,0 +1,353 @@
+[
+  {
+    "id": "1",
+    "type": "heading",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "level": 1
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "Heading 1",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "2",
+    "type": "heading",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "level": 2
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "Heading 2",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "3",
+    "type": "heading",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "level": 3
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "Heading 3",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "4",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "Paragraph",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "5",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "P",
+        "styles": {}
+      },
+      {
+        "type": "text",
+        "text": "ara",
+        "styles": {
+          "bold": true
+        }
+      },
+      {
+        "type": "text",
+        "text": "grap",
+        "styles": {
+          "italic": true
+        }
+      },
+      {
+        "type": "text",
+        "text": "h",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "6",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "P",
+        "styles": {}
+      },
+      {
+        "type": "text",
+        "text": "ara",
+        "styles": {
+          "italic": true
+        }
+      },
+      {
+        "type": "text",
+        "text": "grap",
+        "styles": {
+          "strike": true
+        }
+      },
+      {
+        "type": "text",
+        "text": "h",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "7",
+    "type": "bulletListItem",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "Bullet List Item",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "8",
+    "type": "bulletListItem",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "Bullet List Item",
+        "styles": {}
+      }
+    ],
+    "children": [
+      {
+        "id": "9",
+        "type": "bulletListItem",
+        "props": {
+          "textColor": "default",
+          "backgroundColor": "default",
+          "textAlignment": "left"
+        },
+        "content": [
+          {
+            "type": "text",
+            "text": "Bullet List Item",
+            "styles": {}
+          }
+        ],
+        "children": [
+          {
+            "id": "10",
+            "type": "bulletListItem",
+            "props": {
+              "textColor": "default",
+              "backgroundColor": "default",
+              "textAlignment": "left"
+            },
+            "content": [
+              {
+                "type": "text",
+                "text": "Bullet List Item",
+                "styles": {}
+              }
+            ],
+            "children": []
+          }
+        ]
+      },
+      {
+        "id": "11",
+        "type": "bulletListItem",
+        "props": {
+          "textColor": "default",
+          "backgroundColor": "default",
+          "textAlignment": "left"
+        },
+        "content": [
+          {
+            "type": "text",
+            "text": "Paragraph",
+            "styles": {}
+          }
+        ],
+        "children": [
+          {
+            "id": "12",
+            "type": "numberedListItem",
+            "props": {
+              "textColor": "default",
+              "backgroundColor": "default",
+              "textAlignment": "left"
+            },
+            "content": [
+              {
+                "type": "text",
+                "text": "Numbered List Item",
+                "styles": {}
+              }
+            ],
+            "children": []
+          },
+          {
+            "id": "13",
+            "type": "numberedListItem",
+            "props": {
+              "textColor": "default",
+              "backgroundColor": "default",
+              "textAlignment": "left"
+            },
+            "content": [
+              {
+                "type": "text",
+                "text": "Numbered List Item",
+                "styles": {}
+              }
+            ],
+            "children": []
+          },
+          {
+            "id": "14",
+            "type": "numberedListItem",
+            "props": {
+              "textColor": "default",
+              "backgroundColor": "default",
+              "textAlignment": "left"
+            },
+            "content": [
+              {
+                "type": "text",
+                "text": "Numbered List Item",
+                "styles": {}
+              }
+            ],
+            "children": [
+              {
+                "id": "15",
+                "type": "numberedListItem",
+                "props": {
+                  "textColor": "default",
+                  "backgroundColor": "default",
+                  "textAlignment": "left"
+                },
+                "content": [
+                  {
+                    "type": "text",
+                    "text": "Numbered List Item",
+                    "styles": {}
+                  }
+                ],
+                "children": []
+              }
+            ]
+          },
+          {
+            "id": "16",
+            "type": "bulletListItem",
+            "props": {
+              "textColor": "default",
+              "backgroundColor": "default",
+              "textAlignment": "left"
+            },
+            "content": [
+              {
+                "type": "text",
+                "text": "Bullet List Item",
+                "styles": {}
+              }
+            ],
+            "children": []
+          }
+        ]
+      },
+      {
+        "id": "17",
+        "type": "bulletListItem",
+        "props": {
+          "textColor": "default",
+          "backgroundColor": "default",
+          "textAlignment": "left"
+        },
+        "content": [
+          {
+            "type": "text",
+            "text": "Bullet List Item",
+            "styles": {}
+          }
+        ],
+        "children": []
+      }
+    ]
+  },
+  {
+    "id": "18",
+    "type": "bulletListItem",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "Bullet List Item",
+        "styles": {}
+      }
+    ],
+    "children": []
+  }
+]

package/src/api/parsers/markdown/__snapshots__/issue-226-1.json

@@ -0,0 +1,71 @@
+[
+  {
+    "id": "1",
+    "type": "bulletListItem",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "📝 item1",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "2",
+    "type": "bulletListItem",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "⚙️ item2",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "3",
+    "type": "bulletListItem",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "🔗 item3",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "4",
+    "type": "heading",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "level": 1
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "h1",
+        "styles": {}
+      }
+    ],
+    "children": []
+  }
+]