@blocknote/core 0.3.0 → 0.4.2

package/src/api/formatConversions/formatConversions.ts

@@ -0,0 +1,86 @@
+import { DOMParser, DOMSerializer, Schema } from "prosemirror-model";
+import { unified } from "unified";
+import rehypeParse from "rehype-parse";
+import rehypeStringify from "rehype-stringify";
+import rehypeRemark from "rehype-remark";
+import remarkGfm from "remark-gfm";
+import remarkStringify from "remark-stringify";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import { Block } from "../../extensions/Blocks/api/blockTypes";
+import { blockToNode, nodeToBlock } from "../nodeConversions/nodeConversions";
+import { simplifyBlocks } from "./simplifyBlocksRehypePlugin";
+import { removeUnderlines } from "./removeUnderlinesRehypePlugin";
+
+export async function blocksToHTML(
+  blocks: Block[],
+  schema: Schema
+): Promise<string> {
+  const htmlParentElement = document.createElement("div");
+  const serializer = DOMSerializer.fromSchema(schema);
+
+  for (const block of blocks) {
+    const node = blockToNode(block, schema);
+    const htmlNode = serializer.serializeNode(node);
+    htmlParentElement.appendChild(htmlNode);
+  }
+
+  const htmlString = await unified()
+    .use(rehypeParse, { fragment: true })
+    .use(simplifyBlocks, {
+      orderedListItemBlockTypes: new Set<string>(["numberedListItem"]),
+      unorderedListItemBlockTypes: new Set<string>(["bulletListItem"]),
+    })
+    .use(rehypeStringify)
+    .process(htmlParentElement.innerHTML);
+
+  return htmlString.value as string;
+}
+
+export async function HTMLToBlocks(
+  htmlString: string,
+  schema: Schema
+): Promise<Block[]> {
+  const htmlNode = document.createElement("div");
+  htmlNode.innerHTML = htmlString.trim();
+
+  const parser = DOMParser.fromSchema(schema);
+  const parentNode = parser.parse(htmlNode);
+
+  const blocks: Block[] = [];
+
+  for (let i = 0; i < parentNode.firstChild!.childCount; i++) {
+    blocks.push(nodeToBlock(parentNode.firstChild!.child(i)));
+  }
+
+  return blocks;
+}
+
+export async function blocksToMarkdown(
+  blocks: Block[],
+  schema: Schema
+): Promise<string> {
+  const markdownString = await unified()
+    .use(rehypeParse, { fragment: true })
+    .use(removeUnderlines)
+    .use(rehypeRemark)
+    .use(remarkGfm)
+    .use(remarkStringify)
+    .process(await blocksToHTML(blocks, schema));
+
+  return markdownString.value as string;
+}
+
+export async function markdownToBlocks(
+  markdownString: string,
+  schema: Schema
+): Promise<Block[]> {
+  const htmlString = await unified()
+    .use(remarkParse)
+    .use(remarkGfm)
+    .use(remarkRehype)
+    .use(rehypeStringify)
+    .process(markdownString);
+
+  return HTMLToBlocks(htmlString.value as string, schema);
+}

package/src/api/formatConversions/removeUnderlinesRehypePlugin.ts

@@ -0,0 +1,39 @@
+import { Element as HASTElement, Parent as HASTParent } from "hast";
+
+/**
+ * Rehype plugin which removes <u> tags. Used to remove underlines before converting HTML to markdown, as Markdown
+ * doesn't support underlines.
+ */
+export function removeUnderlines() {
+  const removeUnderlinesHelper = (tree: HASTParent) => {
+    let numChildElements = tree.children.length;
+
+    for (let i = 0; i < numChildElements; i++) {
+      const node = tree.children[i];
+
+      if (node.type === "element") {
+        // Recursively removes underlines from child elements.
+        removeUnderlinesHelper(node);
+
+        if ((node as HASTElement).tagName === "u") {
+          // Lifts child nodes outside underline element, deletes the underline element, and updates current index &
+          // the number of child elements.
+          if (node.children.length > 0) {
+            tree.children.splice(i, 1, ...node.children);
+
+            const numElementsAdded = node.children.length - 1;
+            numChildElements += numElementsAdded;
+            i += numElementsAdded;
+          } else {
+            tree.children.splice(i, 1);
+
+            numChildElements--;
+            i--;
+          }
+        }
+      }
+    }
+  };
+
+  return removeUnderlinesHelper;
+}

package/src/api/formatConversions/simplifyBlocksRehypePlugin.ts

@@ -0,0 +1,125 @@
+import { Element as HASTElement, Parent as HASTParent } from "hast";
+import { fromDom } from "hast-util-from-dom";
+
+type SimplifyBlocksOptions = {
+  orderedListItemBlockTypes: Set<string>;
+  unorderedListItemBlockTypes: Set<string>;
+};
+
+/**
+ * Rehype plugin which converts the HTML output string rendered by BlockNote into a simplified structure which better
+ * follows HTML standards. It does several things:
+ * - Removes all block related div elements, leaving only the actual content inside the block.
+ * - Lifts nested blocks to a higher level for all block types that don't represent list items.
+ * - Wraps blocks which represent list items in corresponding ul/ol HTML elements and restructures them to comply
+ * with HTML list structure.
+ * @param options Options for specifying which block types represent ordered and unordered list items.
+ */
+export function simplifyBlocks(options: SimplifyBlocksOptions) {
+  const listItemBlockTypes = new Set<string>([
+    ...options.orderedListItemBlockTypes,
+    ...options.unorderedListItemBlockTypes,
+  ]);
+
+  const simplifyBlocksHelper = (tree: HASTParent) => {
+    let numChildElements = tree.children.length;
+    let activeList: HASTElement | undefined;
+
+    for (let i = 0; i < numChildElements; i++) {
+      const blockOuter = tree.children[i] as HASTElement;
+      const blockContainer = blockOuter.children[0] as HASTElement;
+      const blockContent = blockContainer.children[0] as HASTElement;
+      const blockGroup =
+        blockContainer.children.length === 2
+          ? (blockContainer.children[1] as HASTElement)
+          : null;
+
+      const isListItemBlock = listItemBlockTypes.has(
+        blockContent.properties!["dataContentType"] as string
+      );
+
+      const listItemBlockType = isListItemBlock
+        ? options.orderedListItemBlockTypes.has(
+            blockContent.properties!["dataContentType"] as string
+          )
+          ? "ol"
+          : "ul"
+        : null;
+
+      // Plugin runs recursively to process nested blocks.
+      if (blockGroup !== null) {
+        simplifyBlocksHelper(blockGroup);
+      }
+
+      // Checks that there is an active list, but the block can't be added to it as it's of a different type.
+      if (activeList && activeList.tagName !== listItemBlockType) {
+        // Blocks that were copied into the list are removed and the list is inserted in their place.
+        tree.children.splice(
+          i - activeList.children.length,
+          activeList.children.length,
+          activeList
+        );
+
+        // Updates the current index and number of child elements.
+        const numElementsRemoved = activeList.children.length - 1;
+        i -= numElementsRemoved;
+        numChildElements -= numElementsRemoved;
+
+        activeList = undefined;
+      }
+
+      // Checks if the block represents a list item.
+      if (isListItemBlock) {
+        // Checks if a list isn't already active. We don't have to check if the block and the list are of the same
+        // type as this was already done earlier.
+        if (!activeList) {
+          // Creates a new list element to represent an active list.
+          activeList = fromDom(
+            document.createElement(listItemBlockType!)
+          ) as HASTElement;
+        }
+
+        // Creates a new list item element to represent the block.
+        const listItemElement = fromDom(
+          document.createElement("li")
+        ) as HASTElement;
+
+        // Adds only the content inside the block to the active list.
+        listItemElement.children.push(blockContent.children[0]);
+        // Nested blocks have already been processed in the recursive function call, so the resulting elements are
+        // also added to the active list.
+        if (blockGroup !== null) {
+          listItemElement.children.push(...blockGroup.children);
+        }
+
+        // Adds the list item representing the block to the active list.
+        activeList.children.push(listItemElement);
+      } else if (blockGroup !== null) {
+        // Lifts all children out of the current block, as only list items should allow nesting.
+        tree.children.splice(i + 1, 0, ...blockGroup.children);
+        // Replaces the block with only the content inside it.
+        tree.children[i] = blockContent.children[0];
+
+        // Updates the current index and number of child elements.
+        const numElementsAdded = blockGroup.children.length;
+        i += numElementsAdded;
+        numChildElements += numElementsAdded;
+      } else {
+        // Replaces the block with only the content inside it.
+        tree.children[i] = blockContent.children[0];
+      }
+    }
+
+    // Since the active list is only inserted after encountering a block which can't be added to it, there are cases
+    // where it remains un-inserted after processing all blocks, which are handled here.
+    if (activeList) {
+      tree.children.splice(
+        numChildElements - activeList.children.length,
+        activeList.children.length,
+        activeList
+      );
+    }
+  };
+
+  return simplifyBlocksHelper;
+}

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",
+}
+`;