@blocknote/core 0.13.3 → 0.13.4

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

@@ -76,88 +76,147 @@ describe("Parse HTML", () => {
 
   it("list test", async () => {
     const html = `<ul>
-   <li>First</li>
-   <li>Second</li>
-   <li>Third</li>
-   <li>Five Parent
-   <ul>
-   <li>Child 1</li>
-   <li>Child 2</li>
-   </ul>
-   </li>
-   </ul>`;
+    <li>First</li>
+    <li>Second</li>
+    <li>Third</li>
+    <li>
+      <input type="checkbox">
+      Fourth
+    </li>
+    <li>
+      <input type="checkbox">
+      Fifth
+    </li>
+    <li>Five Parent
+      <ul>
+        <li>Child 1</li>
+        <li>Child 2</li>
+        <li>
+          <input type="checkbox">
+          Child 3
+        </li>
+        <li>
+          <input type="checkbox">
+          Child 4
+        </li>
+      </ul>
+    </li>
+  </ul>`;
     await parseHTMLAndCompareSnapshots(html, "list-test");
   });
 
   it("Parse nested lists", async () => {
     const html = `<ul>
     <li>Bullet List Item</li>
-      <li>Bullet List Item</li>
-        <ul>
-           <li>
-              Nested Bullet List Item
-           </li>
-           <li>
-              Nested Bullet List Item
-           </li>
-        </ul>
-     <li>
-        Bullet List Item
-     </li>
+    <li>Bullet List Item
+      <ul>
+        <li>Nested Bullet List Item</li>
+        <li>Nested Bullet List Item</li>
+      </ul>
+    </li>
+    <li>Bullet List Item</li>
   </ul>
   <ol>
-     <li>
-        Numbered List Item
-        <ol>
-           <li>
-              Nested Numbered List Item
-           </li>
-           <li>
-              Nested Numbered List Item
-           </li>
-        </ol>
-     </li>
-     <li>
-        Numbered List Item
-     </li>
-  </ol>`;
+    <li>Numbered List Item</li>
+    <li>Numbered List Item
+      <ol>
+        <li>Nested Numbered List Item</li>
+        <li>Nested Numbered List Item</li>
+      </ol>
+    </li>
+    <li>Numbered List Item</li>
+  </ol>
+  <ul>
+    <li>
+      <input type="checkbox">
+      Check List Item
+    </li>
+    <li>
+      <input type="checkbox">
+      Check List Item
+      <ul>
+        <li>
+          <input type="checkbox">
+          Nested Check List Item
+        </li>
+        <li>
+          <input type="checkbox">
+          Nested Check List Item
+        </li>
+      </ul>
+    </li>
+    <li>
+      <input type="checkbox">
+      Nested Check List Item
+    </li>
+  </ul>`;
 
     await parseHTMLAndCompareSnapshots(html, "parse-nested-lists");
   });
 
   it("Parse nested lists with paragraphs", async () => {
     const html = `<ul>
-     <li>
-        <p>Bullet List Item</p>
-        <ul>
-           <li>
-              <p>Nested Bullet List Item</p>
-           </li>
-           <li>
-              <p>Nested Bullet List Item</p>
-           </li>
-        </ul>
-     </li>
-     <li>
-        <p>Bullet List Item</p>
-     </li>
+    <li>
+      <p>Bullet List Item</p>
+    </li>
+    <li>
+      <p>Bullet List Item</p>
+      <ul>
+        <li>
+          <p>Nested Bullet List Item</p>
+        </li>
+        <li>
+          <p>Nested Bullet List Item</p>
+        </li>
+      </ul>
+    </li>
+    <li>
+      <p>Bullet List Item</p>
+    </li>
   </ul>
   <ol>
-     <li>
-        <p>Numbered List Item</p>
-        <ol>
-           <li>
-              <p>Nested Numbered List Item</p>
-           </li>
-           <li>
-              <p>Nested Numbered List Item</p>
-           </li>
-        </ol>
-     </li>
-     <li>
-        <p>Numbered List Item</p>
-     </li>
-  </ol>`;
+    <li>
+      <p>Numbered List Item</p>
+    </li>
+    <li>
+      <p>Numbered List Item</p>
+      <ol>
+        <li>
+          <p>Nested Numbered List Item</p>
+        </li>
+        <li>
+          <p>Nested Numbered List Item</p>
+        </li>
+      </ol>
+    </li>
+    <li>
+      <p>Numbered List Item</p>
+    </li>
+  </ol>
+  <ul>
+    <li>
+      <input type="checkbox">
+      <p>Checked List Item</p>
+    </li>
+    <li>
+      <input type="checkbox">
+      <p>Checked List Item</p>
+      <ul>
+        <li>
+          <input type="checkbox">
+          <p>Nested Checked List Item</p>
+        </li>
+        <li>
+          <label><input type="checkbox"></label>
+          <p>Nested Checked List Item</p>
+        </li>
+      </ul>
+    </li>
+    <li>
+      <input type="checkbox">
+      <p>Checked List Item</p>
+    </li>
+  </ul>`;
 
     await parseHTMLAndCompareSnapshots(
       html,
@@ -167,37 +226,49 @@ describe("Parse HTML", () => {
 
   it("Parse mixed nested lists", async () => {
     const html = `<ul>
-     <li>
-        Bullet List Item
-        <ol>
-           <li>
-              Nested Numbered List Item
-           </li>
-           <li>
-              Nested Numbered List Item
-           </li>
-        </ol>
-     </li>
-     <li>
-        Bullet List Item
-     </li>
+    <li>Bullet List Item</li>
+    <li>Bullet List Item
+      <ol>
+        <li>Nested Numbered List Item</li>
+        <li>Nested Numbered List Item</li>
+      </ol>
+    </li>
+    <li>Bullet List Item</li>
   </ul>
   <ol>
-     <li>
-        Numbered List Item
-        <ul>
-           <li>
-              <p>Nested Bullet List Item</p>
-           </li>
-           <li>
-              <p>Nested Bullet List Item</p>
-           </li>
-        </ul>
-     </li>
-     <li>
-        Numbered List Item
-     </li>
-  </ol>`;
+    <li>Numbered List Item</li>
+    <li>Numbered List Item
+      <ul>
+        <li>
+          <input type="checkbox" checked>
+          Nested Check List Item
+        </li>
+        <li>
+          <input type="checkbox">
+          Nested Check List Item
+        </li>
+      </ul>
+    </li>
+    <li>Numbered List Item</li>
+  </ol>
+  <ul>
+    <li>
+      <input type="checkbox" checked>
+      Check List Item
+    </li>
+    <li>
+      <input type="checkbox">
+      Check List Item
+      <ul>
+        <li>Nested Bullet List Item</li>
+        <li>Nested Bullet List Item</li>
+      </ul>
+    </li>
+    <li>
+      <input type="checkbox" checked>
+      Nested Check List Item
+    </li>
+  </ul>`;
 
     await parseHTMLAndCompareSnapshots(html, "parse-mixed-nested-lists");
   });

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

@@ -98,6 +98,9 @@ export const customBlocksTestCases: EditorTestCases<
     });
   },
   documents: [
+    // Because images need to fetch the download URL async, their output HTML is
+    // initially rendered without a `src` attribute, which is reflected in the
+    // tests.
     {
       name: "simpleImage/button",
       blocks: [

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

@@ -98,6 +98,74 @@ export const defaultSchemaTestCases: EditorTestCases<
         },
       ],
     },
+    {
+      name: "lists/basic",
+      blocks: [
+        {
+          type: "bulletListItem",
+          content: "Bullet List Item 1",
+        },
+        {
+          type: "bulletListItem",
+          content: "Bullet List Item 2",
+        },
+        {
+          type: "numberedListItem",
+          content: "Numbered List Item 1",
+        },
+        {
+          type: "numberedListItem",
+          content: "Numbered List Item 2",
+        },
+        {
+          type: "checkListItem",
+          content: "Check List Item 1",
+        },
+        {
+          type: "checkListItem",
+          props: {
+            checked: true,
+          },
+          content: "Check List Item 2",
+        },
+      ],
+    },
+    {
+      name: "lists/nested",
+      blocks: [
+        {
+          type: "bulletListItem",
+          content: "Bullet List Item 1",
+        },
+        {
+          type: "bulletListItem",
+          content: "Bullet List Item 2",
+          children: [
+            {
+              type: "numberedListItem",
+              content: "Numbered List Item 1",
+            },
+            {
+              type: "numberedListItem",
+              content: "Numbered List Item 2",
+              children: [
+                {
+                  type: "checkListItem",
+                  content: "Check List Item 1",
+                },
+                {
+                  type: "checkListItem",
+                  props: {
+                    checked: true,
+                  },
+                  content: "Check List Item 2",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
     {
       name: "file/button",
       blocks: [
@@ -166,6 +234,9 @@ export const defaultSchemaTestCases: EditorTestCases<
         },
       ],
     },
+    // Because images need to fetch the download URL async, their internal HTML
+    // is initially rendered without a `src` attribute, which is reflected in
+    // the tests.
     {
       name: "image/button",
       blocks: [

package/src/blocks/AudioBlockContent/AudioBlockContent.ts

@@ -43,7 +43,6 @@ export const audioBlockConfig = {
   propSchema: audioPropSchema,
   content: "none",
   isFileBlock: true,
-  isFileBlockPlaceholder: (block: any) => !block.props.url,
   fileBlockAcceptMimeTypes: ["audio/*"],
 } satisfies FileBlockConfig;
 
@@ -82,7 +81,9 @@ export const audioRender = (
   } else {
     const audio = document.createElement("audio");
     audio.className = "bn-audio";
-    audio.src = block.props.url;
+    editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
+      audio.src = downloadUrl;
+    });
     audio.controls = true;
     audio.contentEditable = "false";
     audio.draggable = false;

package/src/blocks/FileBlockContent/FileBlockContent.ts

@@ -10,9 +10,9 @@ import {
   createAddFileButton,
   createDefaultFilePreview,
   createFileAndCaptionWrapper,
+  createLinkWithCaption,
   parseEmbedElement,
   parseFigureElement,
-  createLinkWithCaption,
 } from "./fileBlockHelpers";
 
 export const filePropSchema = {
@@ -36,7 +36,6 @@ export const fileBlockConfig = {
   propSchema: filePropSchema,
   content: "none",
   isFileBlock: true,
-  isFileBlockPlaceholder: (block: any) => !block.props.url,
 } satisfies FileBlockConfig;
 
 export const fileRender = (

package/src/blocks/ImageBlockContent/ImageBlockContent.ts

@@ -49,7 +49,6 @@ export const imageBlockConfig = {
   propSchema: imagePropSchema,
   content: "none",
   isFileBlock: true,
-  isFileBlockPlaceholder: (block: any) => !block.props.url,
   fileBlockAcceptMimeTypes: ["image/*"],
 } satisfies FileBlockConfig;
 
@@ -88,7 +87,9 @@ export const imageRender = (
   } else {
     const image = document.createElement("img");
     image.className = "bn-visual-media";
-    image.src = block.props.url;
+    editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
+      image.src = downloadUrl;
+    });
     image.alt = block.props.name || block.props.caption || "BlockNote image";
     image.contentEditable = "false";
     image.draggable = false;

package/src/blocks/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts

@@ -17,6 +17,9 @@ const BulletListItemBlockContent = createStronglyTypedTiptapNode({
   name: "bulletListItem",
   content: "inline*",
   group: "blockContent",
+  // This is to make sure that check list parse rules run before, since they
+  // both parse `li` elements but check lists are more specific.
+  priority: 90,
   addInputRules() {
     return [
       // Creates an unordered list when starting with "-", "+", or "*".