@blocknote/core 0.25.2 → 0.27.0

package/src/api/nodeConversions/__snapshots__/nodeConversions.test.ts.snap

@@ -699,7 +699,7 @@ exports[`Test BlockNote-Prosemirror conversion > Case: default schema > Convert
   "content": [
     {
       "attrs": {
-        "language": "javascript",
+        "language": "text",
       },
       "content": [
         {
@@ -724,7 +724,7 @@ exports[`Test BlockNote-Prosemirror conversion > Case: default schema > Convert
   "content": [
     {
       "attrs": {
-        "language": "javascript",
+        "language": "text",
       },
       "type": "codeBlock",
     },

package/src/api/nodeConversions/nodeToBlock.ts

@@ -82,6 +82,7 @@ export function contentNodeToTableContent<
 
           // Only merge if the last and first content are both styled text nodes and have the same styles
           if (
+            first &&
             isStyledTextInlineContent(last) &&
             isStyledTextInlineContent(first) &&
             JSON.stringify(last.styles) === JSON.stringify(first.styles)

package/src/api/parsers/html/__snapshots__/parse-2-tables.json

@@ -0,0 +1,129 @@
+[
+  {
+    "id": "1",
+    "type": "table",
+    "props": {
+      "textColor": "default"
+    },
+    "content": {
+      "type": "tableContent",
+      "columnWidths": [
+        null
+      ],
+      "rows": [
+        {
+          "cells": [
+            {
+              "type": "tableCell",
+              "content": [
+                {
+                  "type": "text",
+                  "text": "Company",
+                  "styles": {
+                    "underline": true
+                  }
+                }
+              ],
+              "props": {
+                "colspan": 1,
+                "rowspan": 1,
+                "backgroundColor": "default",
+                "textColor": "default",
+                "textAlignment": "left"
+              }
+            }
+          ]
+        },
+        {
+          "cells": [
+            {
+              "type": "tableCell",
+              "content": [
+                {
+                  "type": "text",
+                  "text": "Example Company Inc.",
+                  "styles": {
+                    "bold": true
+                  }
+                },
+                {
+                  "type": "text",
+                  "text": "\n        \nName: [Company Representative]\nTitle: Chief Executive Officer",
+                  "styles": {}
+                }
+              ],
+              "props": {
+                "colspan": 1,
+                "rowspan": 1,
+                "backgroundColor": "default",
+                "textColor": "default",
+                "textAlignment": "left"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    "children": []
+  },
+  {
+    "id": "2",
+    "type": "table",
+    "props": {
+      "textColor": "default"
+    },
+    "content": {
+      "type": "tableContent",
+      "columnWidths": [
+        null
+      ],
+      "rows": [
+        {
+          "cells": [
+            {
+              "type": "tableCell",
+              "content": [
+                {
+                  "type": "text",
+                  "text": "Advisor",
+                  "styles": {
+                    "underline": true
+                  }
+                }
+              ],
+              "props": {
+                "colspan": 1,
+                "rowspan": 1,
+                "backgroundColor": "default",
+                "textColor": "default",
+                "textAlignment": "left"
+              }
+            }
+          ]
+        },
+        {
+          "cells": [
+            {
+              "type": "tableCell",
+              "content": [
+                {
+                  "type": "text",
+                  "text": "[Advisor Name]",
+                  "styles": {}
+                }
+              ],
+              "props": {
+                "colspan": 1,
+                "rowspan": 1,
+                "backgroundColor": "default",
+                "textColor": "default",
+                "textAlignment": "left"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    "children": []
+  }
+]

package/src/api/parsers/html/__snapshots__/parse-codeblocks.json

@@ -3,7 +3,7 @@
     "id": "1",
     "type": "codeBlock",
     "props": {
-      "language": "javascript"
+      "language": "text"
     },
     "content": [
       {

package/src/api/parsers/html/parseHTML.test.ts

@@ -13,7 +13,7 @@ async function parseHTMLAndCompareSnapshots(
   const blocks = await editor.tryParseHTMLToBlocks(html);
 
   const snapshotPath = "./__snapshots__/" + snapshotName + ".json";
-  expect(JSON.stringify(blocks, undefined, 2)).toMatchFileSnapshot(
+  await expect(JSON.stringify(blocks, undefined, 2)).toMatchFileSnapshot(
     snapshotPath
   );
 
@@ -346,6 +346,41 @@ describe("Parse HTML", () => {
     await parseHTMLAndCompareSnapshots(html, "parse-div-with-inline-content");
   });
 
+  it("Parses 2 tables", async () => {
+    const html = `
+<table style="border-collapse:collapse;margin-left:255.478pt" cellspacing="0">
+  <tr style="height:22pt">
+    <td style="width:203pt">
+      <p data-text-alignment="left" data-text-indent="0pt"><u>Company</u></p>
+    </td>
+  </tr>
+  <tr style="height:86pt">
+    <td style="width:203pt">
+      <p data-text-alignment="left" data-text-indent="0pt"><b>Example Company Inc.</b></p>
+      <p data-text-alignment="left" data-text-indent="0pt">
+        <p>Name: [Company Representative]</p>
+      </p>
+      <p data-text-alignment="left" data-text-indent="0pt">Title: Chief Executive Officer</p>
+    </td>
+  </tr>
+</table>
+
+<table style="border-collapse:collapse;margin-left:256.5pt" cellspacing="0">
+  <tr style="height:58pt">
+    <td style="width:209pt;border-bottom-style:solid;border-bottom-width:2pt">
+      <p data-text-alignment="left" data-text-indent="0pt"><u>Advisor</u></p>
+    </td>
+  </tr>
+  <tr style="height:13pt">
+    <td style="width:209pt;border-top-style:solid;border-top-width:2pt">
+      <p data-text-alignment="left" data-text-indent="0pt">[Advisor Name]</p>
+    </td>
+  </tr>
+</table>`;
+
+    await parseHTMLAndCompareSnapshots(html, "parse-2-tables");
+  });
+
   it("Parse Notion HTML", async () => {
     // A few notes on Notion output HTML:
     // - Does not preserve text/background colors

package/src/api/parsers/markdown/__snapshots__/pasted/whitespace bold.json

@@ -0,0 +1,42 @@
+[
+  {
+    "id": "0",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "hello ",
+        "styles": {}
+      },
+      {
+        "type": "text",
+        "text": "beautiful ",
+        "styles": {
+          "bold": true
+        }
+      },
+      {
+        "type": "text",
+        "text": " world",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "2",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [],
+    "children": []
+  }
+]

package/src/api/parsers/markdown/__snapshots__/whitespace bold.json

@@ -0,0 +1,19 @@
+[
+  {
+    "id": "1",
+    "type": "paragraph",
+    "props": {
+      "textColor": "default",
+      "backgroundColor": "default",
+      "textAlignment": "left"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "hello **beautiful ** world",
+        "styles": {}
+      }
+    ],
+    "children": []
+  }
+]

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

@@ -0,0 +1,60 @@
+// Headings H1-H6.
+const h1 = /(^|\n) {0,3}#{1,6} {1,8}[^\n]{1,64}\r?\n\r?\n\s{0,32}\S/;
+
+// Bold, italic, underline, strikethrough, highlight.
+const bold = /(?:\s|^)(_|__|\*|\*\*|~~|==|\+\+)(?!\s).{1,64}(?<!\s)(?=\1)/;
+
+// Basic inline link (also captures images).
+const link = /\[[^\]]{1,128}\]\(https?:\/\/\S{1,999}\)/;
+
+// Inline code.
+const code = /(?:\s|^)`(?!\s)[^`]{1,48}(?<!\s)`([^\w]|$)/;
+
+// Unordered list.
+const ul = /(?:^|\n)\s{0,5}-\s{1}[^\n]+\n\s{0,15}-\s/;
+
+// Ordered list.
+const ol = /(?:^|\n)\s{0,5}\d+\.\s{1}[^\n]+\n\s{0,15}\d+\.\s/;
+
+// Horizontal rule.
+const hr = /\n{2} {0,3}-{2,48}\n{2}/;
+
+// Fenced code block.
+const fences =
+  /(?:\n|^)(```|~~~|\$\$)(?!`|~)[^\s]{0,64} {0,64}[^\n]{0,64}\n[\s\S]{0,9999}?\s*\1 {0,64}(?:\n+|$)/;
+
+// Classical underlined H1 and H2 headings.
+const title = /(?:\n|^)(?!\s)\w[^\n]{0,64}\r?\n(-|=)\1{0,64}\n\n\s{0,64}(\w|$)/;
+
+// Blockquote.
+const blockquote =
+  /(?:^|(\r?\n\r?\n))( {0,3}>[^\n]{1,333}\n){1,999}($|(\r?\n))/;
+
+// Table Header
+const tableHeader = /^\s*\|(.+\|)+\s*$/m;
+
+// Table Divider
+const tableDivider = /^\s*\|(\s*[-:]+[-:]\s*\|)+\s*$/m;
+
+// Table Row
+const tableRow = /^\s*\|(.+\|)+\s*$/m;
+
+/**
+ * Returns `true` if the source text might be a markdown document.
+ *
+ * @param src Source text to analyze.
+ */
+export const isMarkdown = (src: string): boolean =>
+  h1.test(src) ||
+  bold.test(src) ||
+  link.test(src) ||
+  code.test(src) ||
+  ul.test(src) ||
+  ol.test(src) ||
+  hr.test(src) ||
+  fences.test(src) ||
+  title.test(src) ||
+  blockquote.test(src) ||
+  tableHeader.test(src) ||
+  tableDivider.test(src) ||
+  tableRow.test(src);

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

@@ -12,7 +12,7 @@ async function parseMarkdownAndCompareSnapshots(
   const blocks = await editor.tryParseMarkdownToBlocks(md);
 
   const snapshotPath = "./__snapshots__/" + snapshotName + ".json";
-  expect(JSON.stringify(blocks, undefined, 2)).toMatchFileSnapshot(
+  await expect(JSON.stringify(blocks, undefined, 2)).toMatchFileSnapshot(
     snapshotPath
   );
 
@@ -23,7 +23,7 @@ async function parseMarkdownAndCompareSnapshots(
   doPaste(editor.prosemirrorView, md, null, true, new ClipboardEvent("paste"));
 
   const pastedSnapshotPath = "./__snapshots__/pasted/" + snapshotName + ".json";
-  expect(JSON.stringify(editor.document, undefined, 2)).toMatchFileSnapshot(
+  await expect(JSON.stringify(editor.document, undefined, 2)).toMatchFileSnapshot(
     pastedSnapshotPath
   );
 
@@ -99,6 +99,11 @@ P*ara*~~grap~~h
 *   Bullet List Item`;
     await parseMarkdownAndCompareSnapshots(markdown, "complex");
   });
+
+  it("whitespace bold", async () => {
+    const markdown = `hello **beautiful ** world`;
+    await parseMarkdownAndCompareSnapshots(markdown, "whitespace bold");
+  });
 });
 
 describe("Issue 226", () => {

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

@@ -48,18 +48,9 @@ function code(state: any, node: any) {
   return result;
 }
 
-export async 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>[]> {
+export async function markdownToHTML(markdown: string): Promise<string> {
   const deps = await initializeESMDependencies();
+
   const htmlString = deps.unified
     .unified()
     .use(deps.remarkParse.default)
@@ -73,11 +64,21 @@ export async function markdownToBlocks<
     .use(deps.rehypeStringify.default)
     .processSync(markdown);
 
-  return HTMLToBlocks(
-    htmlString.value as string,
-    blockSchema,
-    icSchema,
-    styleSchema,
-    pmSchema
-  );
+  return htmlString.value as string;
+}
+
+export async 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 = await markdownToHTML(markdown);
+
+  return HTMLToBlocks(htmlString, blockSchema, icSchema, styleSchema, pmSchema);
 }

package/src/api/testUtil/cases/defaultSchema.ts

@@ -23,6 +23,18 @@ export const defaultSchemaTestCases: EditorTestCases<
     return BlockNoteEditor.create({
       schema: withPageBreak(BlockNoteSchema.create()),
       uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
+      codeBlock: {
+        supportedLanguages: {
+          javascript: {
+            name: "JavaScript",
+            aliases: ["js"],
+          },
+          python: {
+            name: "Python",
+            aliases: ["py"],
+          },
+        },
+      },
     });
   },
   documents: [
@@ -213,6 +225,7 @@ export const defaultSchemaTestCases: EditorTestCases<
       blocks: [
         {
           type: "codeBlock",
+          props: { language: "javascript" },
           content: "const hello = 'world';\nconsole.log(hello);\n",
         },
       ],