@blocknote/core 0.9.5 → 0.10.0

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

@@ -0,0 +1,144 @@
+[
+  {
+    "id": "1",
+    "type": "bulletListItem",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "a",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "2",
+    "type": "bulletListItem",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "b",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "3",
+    "type": "bulletListItem",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "c",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "4",
+    "type": "bulletListItem",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "d",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "5",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "anything",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "6",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "link",
+        "href": "http://example.com",
+        "content": [
+          {
+            "type": "text",
+            "text": "a link",
+            "styles": {}
+          }
+        ]
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "7",
+    "type": "bulletListItem",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "another",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "8",
+    "type": "bulletListItem",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "list",
+        "styles": {}
+      }
+    ],
+    "children": []
+  }
+]

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

@@ -0,0 +1,72 @@
+[
+  {
+    "id": "1",
+    "type": "heading",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "level": 1
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "Heading",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "2",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "Paragraph",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "3",
+    "type": "bulletListItem",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "Bullet List Item",
+        "styles": {}
+      }
+    ],
+    "children": [
+      {
+        "id": "4",
+        "type": "numberedListItem",
+        "props": {
+          "textColor": "default",
+          "backgroundColor": "default",
+          "textAlignment": "left"
+        },
+        "content": [
+          {
+            "type": "text",
+            "text": "Numbered List Item",
+            "styles": {}
+          }
+        ],
+        "children": []
+      }
+    ]
+  }
+]

package/src/api/parsers/markdown/__snapshots__/non-nested.json

@@ -0,0 +1,71 @@
+[
+  {
+    "id": "1",
+    "type": "heading",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "level": 1
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "Heading",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "2",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "Paragraph",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "3",
+    "type": "bulletListItem",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "Bullet List Item",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "4",
+    "type": "numberedListItem",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "Numbered List Item",
+        "styles": {}
+      }
+    ],
+    "children": []
+  }
+]

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

@@ -0,0 +1,58 @@
+[
+  {
+    "id": "1",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "Bold",
+        "styles": {
+          "bold": true
+        }
+      },
+      {
+        "type": "text",
+        "text": " ",
+        "styles": {}
+      },
+      {
+        "type": "text",
+        "text": "Italic",
+        "styles": {
+          "italic": true
+        }
+      },
+      {
+        "type": "text",
+        "text": " ",
+        "styles": {}
+      },
+      {
+        "type": "text",
+        "text": "Strikethrough",
+        "styles": {
+          "strike": true
+        }
+      },
+      {
+        "type": "text",
+        "text": " ",
+        "styles": {}
+      },
+      {
+        "type": "text",
+        "text": "Multiple",
+        "styles": {
+          "bold": true,
+          "italic": true
+        }
+      }
+    ],
+    "children": []
+  }
+]

package/src/api/parsers/markdown/parseMarkdown.test.ts

@@ -0,0 +1,114 @@
+import { describe, expect, it } from "vitest";
+import { BlockNoteEditor } from "../../..";
+
+async function parseMarkdownAndCompareSnapshots(
+  md: string,
+  snapshotName: string
+) {
+  const editor = BlockNoteEditor.create();
+  const blocks = await editor.tryParseMarkdownToBlocks(md);
+
+  const snapshotPath = "./__snapshots__/" + snapshotName + ".json";
+  expect(JSON.stringify(blocks, undefined, 2)).toMatchFileSnapshot(
+    snapshotPath
+  );
+}
+
+describe("Parse Markdown", () => {
+  it("Convert non-nested Markdown to blocks", async () => {
+    const markdown = `# Heading
+  
+Paragraph
+
+*   Bullet List Item
+
+1.  Numbered List Item
+  `;
+    await parseMarkdownAndCompareSnapshots(markdown, "non-nested");
+  });
+
+  // Failing due to nested block parsing bug.
+  it("Convert nested Markdown to blocks", async () => {
+    const markdown = `# Heading
+  
+Paragraph
+
+*   Bullet List Item
+
+    1.  Numbered List Item
+`;
+    await parseMarkdownAndCompareSnapshots(markdown, "nested");
+  });
+
+  it("Convert styled Markdown to blocks", async () => {
+    const markdown = `**Bold** *Italic* ~~Strikethrough~~ ***Multiple***`;
+    await parseMarkdownAndCompareSnapshots(markdown, "styled");
+  });
+
+  it("Convert complex Markdown to blocks", async () => {
+    const markdown = `# Heading 1
+
+## Heading 2
+
+### Heading 3
+
+Paragraph
+
+P**ara***grap*h
+
+P*ara*~~grap~~h
+
+*   Bullet List Item
+
+*   Bullet List Item
+
+    *   Bullet List Item
+
+        *   Bullet List Item
+
+        Paragraph
+
+        1.  Numbered List Item
+
+        2.  Numbered List Item
+
+        3.  Numbered List Item
+
+            1.  Numbered List Item
+
+        *   Bullet List Item
+
+    *   Bullet List Item
+
+*   Bullet List Item`;
+    await parseMarkdownAndCompareSnapshots(markdown, "complex");
+  });
+});
+
+describe("Issue 226", () => {
+  it("Case 1", async () => {
+    const markdown = `
+- 📝 item1
+- ⚙️ item2
+- 🔗 item3
+
+# h1
+`;
+    await parseMarkdownAndCompareSnapshots(markdown, "issue-226-1");
+  });
+
+  it("Case 2", async () => {
+    const markdown = `* a
+* b
+* c
+* d
+
+anything
+
+[a link](http://example.com)
+
+* another
+* list`;
+    await parseMarkdownAndCompareSnapshots(markdown, "issue-226-2");
+  });
+});

package/src/api/parsers/markdown/parseMarkdown.ts

@@ -0,0 +1,84 @@
+import { Schema } from "prosemirror-model";
+import rehypeStringify from "rehype-stringify";
+import remarkGfm from "remark-gfm";
+import remarkParse from "remark-parse";
+import remarkRehype, { defaultHandlers } from "remark-rehype";
+import { unified } from "unified";
+import {
+  Block,
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../../schema";
+import { HTMLToBlocks } from "../html/parseHTML";
+
+// modified version of https://github.com/syntax-tree/mdast-util-to-hast/blob/main/lib/handlers/code.js
+// that outputs a data-language attribute instead of a CSS class (e.g.: language-typescript)
+function code(state: any, node: any) {
+  const value = node.value ? node.value + "\n" : "";
+  /** @type {Properties} */
+  const properties: any = {};
+
+  if (node.lang) {
+    // changed line
+    properties["data-language"] = node.lang;
+  }
+
+  // Create `<code>`.
+  /** @type {Element} */
+  let result: any = {
+    type: "element",
+    tagName: "code",
+    properties,
+    children: [{ type: "text", value }],
+  };
+
+  if (node.meta) {
+    result.data = { meta: node.meta };
+  }
+
+  state.patch(node, result);
+  result = state.applyData(node, result);
+
+  // Create `<pre>`.
+  result = {
+    type: "element",
+    tagName: "pre",
+    properties: {},
+    children: [result],
+  };
+  state.patch(node, result);
+  return result;
+}
+
+export function markdownToBlocks<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  markdown: string,
+  blockSchema: BSchema,
+  icSchema: I,
+  styleSchema: S,
+  pmSchema: Schema
+): Promise<Block<BSchema, I, S>[]> {
+  const htmlString = unified()
+    .use(remarkParse)
+    .use(remarkGfm)
+    .use(remarkRehype, {
+      handlers: {
+        ...(defaultHandlers as any),
+        code,
+      },
+    })
+    .use(rehypeStringify)
+    .processSync(markdown);
+
+  return HTMLToBlocks(
+    htmlString.value as string,
+    blockSchema,
+    icSchema,
+    styleSchema,
+    pmSchema
+  );
+}

package/src/api/parsers/pasteExtension.ts

@@ -0,0 +1,59 @@
+import { Extension } from "@tiptap/core";
+import { Plugin } from "prosemirror-state";
+
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
+import { nestedListsToBlockNoteStructure } from "./html/util/nestedLists";
+
+const acceptedMIMETypes = [
+  "blocknote/html",
+  "text/html",
+  "text/plain",
+] as const;
+
+export const createPasteFromClipboardExtension = <
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  editor: BlockNoteEditor<BSchema, I, S>
+) =>
+  Extension.create<{ editor: BlockNoteEditor<BSchema, I, S> }, undefined>({
+    name: "pasteFromClipboard",
+    addProseMirrorPlugins() {
+      return [
+        new Plugin({
+          props: {
+            handleDOMEvents: {
+              paste(_view, event) {
+                event.preventDefault();
+                let format: (typeof acceptedMIMETypes)[number] | null = null;
+
+                for (const mimeType of acceptedMIMETypes) {
+                  if (event.clipboardData!.types.includes(mimeType)) {
+                    format = mimeType;
+                    break;
+                  }
+                }
+
+                if (format !== null) {
+                  let data = event.clipboardData!.getData(format);
+                  if (format === "text/html") {
+                    const htmlNode = nestedListsToBlockNoteStructure(
+                      data.trim()
+                    );
+
+                    data = htmlNode.innerHTML;
+                    console.log(data);
+                  }
+                  editor._tiptapEditor.view.pasteHTML(data);
+                }
+
+                return true;
+              },
+            },
+          },
+        }),
+      ];
+    },
+  });