@blocknote/core 0.13.2 → 0.13.4

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

@@ -1,10 +1,6 @@
 import { EditorTestCases } from "../index";
 
-import {
-  imagePropSchema,
-  renderImage,
-} from "../../../blocks/ImageBlockContent/ImageBlockContent";
-import { uploadToTmpFilesDotOrg_DEV_ONLY } from "../../../blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
+import { uploadToTmpFilesDotOrg_DEV_ONLY } from "../../../blocks/FileBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
 import {
   DefaultInlineContentSchema,
   DefaultStyleSchema,
@@ -13,23 +9,29 @@ import {
 import { defaultProps } from "../../../blocks/defaultProps";
 import { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
 import { BlockNoteSchema } from "../../../editor/BlockNoteSchema";
-import { createBlockSpec } from "../../../schema/blocks/createSpec";
+import { createBlockSpec } from "../../../schema";
+import {
+  imagePropSchema,
+  imageRender,
+} from "../../../blocks/ImageBlockContent/ImageBlockContent";
 
 // This is a modified version of the default image block that does not implement
-// a `serialize` function. It's used to test if the custom serializer by default
-// serializes custom blocks using their `render` function.
+// a `toExternalHTML` function. It's used to test if the custom serializer by
+// default serializes custom blocks using their `render` function.
 const SimpleImage = createBlockSpec(
   {
-    type: "simpleImage" as const,
+    type: "simpleImage",
     propSchema: imagePropSchema,
     content: "none",
   },
-  { render: renderImage as any }
+  {
+    render: (block, editor) => imageRender(block as any, editor as any),
+  }
 );
 
 const CustomParagraph = createBlockSpec(
   {
-    type: "customParagraph" as const,
+    type: "customParagraph",
     propSchema: defaultProps,
     content: "inline",
   },
@@ -57,7 +59,7 @@ const CustomParagraph = createBlockSpec(
 
 const SimpleCustomParagraph = createBlockSpec(
   {
-    type: "simpleCustomParagraph" as const,
+    type: "simpleCustomParagraph",
     propSchema: defaultProps,
     content: "inline",
   },
@@ -96,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: [
@@ -108,12 +113,54 @@ export const customBlocksTestCases: EditorTestCases<
       name: "simpleImage/basic",
       blocks: [
         {
-          type: "simpleImage" as const,
+          type: "simpleImage",
+          props: {
+            name: "example",
+            url: "exampleURL",
+            caption: "Caption",
+            previewWidth: 256,
+          },
+        },
+      ],
+    },
+    {
+      name: "simpleImage/noName",
+      blocks: [
+        {
+          type: "simpleImage",
+          props: {
+            url: "exampleURL",
+            caption: "Caption",
+            previewWidth: 256,
+          },
+        },
+      ],
+    },
+    {
+      name: "simpleImage/noCaption",
+      blocks: [
+        {
+          type: "simpleImage",
+          props: {
+            name: "example",
+            url: "exampleURL",
+            previewWidth: 256,
+          },
+        },
+      ],
+    },
+    {
+      name: "simpleImage/noPreview",
+      blocks: [
+        {
+          type: "simpleImage",
           props: {
+            name: "example",
             url: "exampleURL",
             caption: "Caption",
-            width: 256,
-          } as const,
+            showPreview: false,
+            previewWidth: 256,
+          },
         },
       ],
     },
@@ -121,20 +168,22 @@ export const customBlocksTestCases: EditorTestCases<
       name: "simpleImage/nested",
       blocks: [
         {
-          type: "simpleImage" as const,
+          type: "simpleImage",
           props: {
+            name: "example",
             url: "exampleURL",
             caption: "Caption",
-            width: 256,
-          } as const,
+            previewWidth: 256,
+          },
           children: [
             {
-              type: "simpleImage" as const,
+              type: "simpleImage",
               props: {
+                name: "example",
                 url: "exampleURL",
                 caption: "Caption",
-                width: 256,
-              } as const,
+                previewWidth: 256,
+              },
             },
           ],
         },
@@ -144,7 +193,7 @@ export const customBlocksTestCases: EditorTestCases<
       name: "customParagraph/basic",
       blocks: [
         {
-          type: "customParagraph" as const,
+          type: "customParagraph",
           content: "Custom Paragraph",
         },
       ],
@@ -153,12 +202,12 @@ export const customBlocksTestCases: EditorTestCases<
       name: "customParagraph/styled",
       blocks: [
         {
-          type: "customParagraph" as const,
+          type: "customParagraph",
           props: {
             textAlignment: "center",
             textColor: "orange",
             backgroundColor: "pink",
-          } as const,
+          },
           content: [
             {
               type: "text",
@@ -195,15 +244,15 @@ export const customBlocksTestCases: EditorTestCases<
       name: "customParagraph/nested",
       blocks: [
         {
-          type: "customParagraph" as const,
+          type: "customParagraph",
           content: "Custom Paragraph",
           children: [
             {
-              type: "customParagraph" as const,
+              type: "customParagraph",
               content: "Nested Custom Paragraph 1",
             },
             {
-              type: "customParagraph" as const,
+              type: "customParagraph",
               content: "Nested Custom Paragraph 2",
             },
           ],
@@ -214,7 +263,7 @@ export const customBlocksTestCases: EditorTestCases<
       name: "simpleCustomParagraph/basic",
       blocks: [
         {
-          type: "simpleCustomParagraph" as const,
+          type: "simpleCustomParagraph",
           content: "Custom Paragraph",
         },
       ],
@@ -223,12 +272,12 @@ export const customBlocksTestCases: EditorTestCases<
       name: "simpleCustomParagraph/styled",
       blocks: [
         {
-          type: "simpleCustomParagraph" as const,
+          type: "simpleCustomParagraph",
           props: {
             textAlignment: "center",
             textColor: "orange",
             backgroundColor: "pink",
-          } as const,
+          },
           content: [
             {
               type: "text",
@@ -265,15 +314,15 @@ export const customBlocksTestCases: EditorTestCases<
       name: "simpleCustomParagraph/nested",
       blocks: [
         {
-          type: "simpleCustomParagraph" as const,
+          type: "simpleCustomParagraph",
           content: "Custom Paragraph",
           children: [
             {
-              type: "simpleCustomParagraph" as const,
+              type: "simpleCustomParagraph",
               content: "Nested Custom Paragraph 1",
             },
             {
-              type: "simpleCustomParagraph" as const,
+              type: "simpleCustomParagraph",
               content: "Nested Custom Paragraph 2",
             },
           ],

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

@@ -1,6 +1,6 @@
 import { EditorTestCases } from "../index";
 
-import { uploadToTmpFilesDotOrg_DEV_ONLY } from "../../../blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
+import { uploadToTmpFilesDotOrg_DEV_ONLY } from "../../../blocks/FileBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
 import {
   DefaultBlockSchema,
   DefaultStyleSchema,

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

@@ -1,6 +1,6 @@
 import { EditorTestCases } from "../index";
 
-import { uploadToTmpFilesDotOrg_DEV_ONLY } from "../../../blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
+import { uploadToTmpFilesDotOrg_DEV_ONLY } from "../../../blocks/FileBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
 import {
   DefaultBlockSchema,
   DefaultInlineContentSchema,

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

@@ -6,7 +6,7 @@ import {
   DefaultInlineContentSchema,
   DefaultStyleSchema,
 } from "../../../blocks/defaultBlocks";
-import { uploadToTmpFilesDotOrg_DEV_ONLY } from "../../../blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
+import { uploadToTmpFilesDotOrg_DEV_ONLY } from "../../../blocks/FileBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
 
 export const defaultSchemaTestCases: EditorTestCases<
   DefaultBlockSchema,
@@ -98,6 +98,145 @@ 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: [
+        {
+          type: "file",
+        },
+      ],
+    },
+    {
+      name: "file/basic",
+      blocks: [
+        {
+          type: "file",
+          props: {
+            name: "example",
+            url: "exampleURL",
+            caption: "Caption",
+          },
+        },
+      ],
+    },
+    {
+      name: "file/noName",
+      blocks: [
+        {
+          type: "file",
+          props: {
+            url: "exampleURL",
+            caption: "Caption",
+          },
+        },
+      ],
+    },
+    {
+      name: "file/noCaption",
+      blocks: [
+        {
+          type: "file",
+          props: {
+            name: "example",
+            url: "exampleURL",
+          },
+        },
+      ],
+    },
+    {
+      name: "file/nested",
+      blocks: [
+        {
+          type: "file",
+          props: {
+            name: "example",
+            url: "exampleURL",
+            caption: "Caption",
+          },
+          children: [
+            {
+              type: "file",
+              props: {
+                name: "example",
+                url: "exampleURL",
+                caption: "Caption",
+              },
+            },
+          ],
+        },
+      ],
+    },
+    // 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: [
@@ -112,9 +251,51 @@ export const defaultSchemaTestCases: EditorTestCases<
         {
           type: "image",
           props: {
+            name: "example",
+            url: "exampleURL",
+            caption: "Caption",
+            previewWidth: 256,
+          },
+        },
+      ],
+    },
+    {
+      name: "image/noName",
+      blocks: [
+        {
+          type: "image",
+          props: {
+            url: "exampleURL",
+            caption: "Caption",
+            previewWidth: 256,
+          },
+        },
+      ],
+    },
+    {
+      name: "image/noCaption",
+      blocks: [
+        {
+          type: "image",
+          props: {
+            name: "example",
+            url: "exampleURL",
+            previewWidth: 256,
+          },
+        },
+      ],
+    },
+    {
+      name: "image/noPreview",
+      blocks: [
+        {
+          type: "image",
+          props: {
+            name: "example",
             url: "exampleURL",
             caption: "Caption",
-            width: 256,
+            showPreview: false,
+            previewWidth: 256,
           },
         },
       ],
@@ -127,7 +308,7 @@ export const defaultSchemaTestCases: EditorTestCases<
           props: {
             url: "exampleURL",
             caption: "Caption",
-            width: 256,
+            previewWidth: 256,
           },
           children: [
             {
@@ -135,7 +316,7 @@ export const defaultSchemaTestCases: EditorTestCases<
               props: {
                 url: "exampleURL",
                 caption: "Caption",
-                width: 256,
+                previewWidth: 256,
               },
             },
           ],

package/src/blocks/AudioBlockContent/AudioBlockContent.ts

@@ -0,0 +1,163 @@
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
+import {
+  BlockFromConfig,
+  createBlockSpec,
+  FileBlockConfig,
+  Props,
+  PropSchema,
+} from "../../schema";
+import { defaultProps } from "../defaultProps";
+
+import {
+  createAddFileButton,
+  createDefaultFilePreview,
+  createFigureWithCaption,
+  createFileAndCaptionWrapper,
+  createLinkWithCaption,
+  parseFigureElement,
+} from "../FileBlockContent/fileBlockHelpers";
+import { parseAudioElement } from "./audioBlockHelpers";
+
+export const audioPropSchema = {
+  backgroundColor: defaultProps.backgroundColor,
+  // File name.
+  name: {
+    default: "" as const,
+  },
+  // File url.
+  url: {
+    default: "" as const,
+  },
+  // File caption.
+  caption: {
+    default: "" as const,
+  },
+
+  showPreview: {
+    default: true,
+  },
+} satisfies PropSchema;
+
+export const audioBlockConfig = {
+  type: "audio" as const,
+  propSchema: audioPropSchema,
+  content: "none",
+  isFileBlock: true,
+  fileBlockAcceptMimeTypes: ["audio/*"],
+} satisfies FileBlockConfig;
+
+export const audioRender = (
+  block: BlockFromConfig<typeof audioBlockConfig, any, any>,
+  editor: BlockNoteEditor<any, any, any>
+) => {
+  const wrapper = document.createElement("div");
+  wrapper.className = "bn-file-block-content-wrapper";
+
+  if (block.props.url === "") {
+    const fileBlockAudioIcon = document.createElement("div");
+    fileBlockAudioIcon.innerHTML =
+      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 16.0001H5.88889L11.1834 20.3319C11.2727 20.405 11.3846 20.4449 11.5 20.4449C11.7761 20.4449 12 20.2211 12 19.9449V4.05519C12 3.93977 11.9601 3.8279 11.887 3.73857C11.7121 3.52485 11.3971 3.49335 11.1834 3.66821L5.88889 8.00007H2C1.44772 8.00007 1 8.44778 1 9.00007V15.0001C1 15.5524 1.44772 16.0001 2 16.0001ZM23 12C23 15.292 21.5539 18.2463 19.2622 20.2622L17.8445 18.8444C19.7758 17.1937 21 14.7398 21 12C21 9.26016 19.7758 6.80629 17.8445 5.15557L19.2622 3.73779C21.5539 5.75368 23 8.70795 23 12ZM18 12C18 10.0883 17.106 8.38548 15.7133 7.28673L14.2842 8.71584C15.3213 9.43855 16 10.64 16 12C16 13.36 15.3213 14.5614 14.2842 15.2841L15.7133 16.7132C17.106 15.6145 18 13.9116 18 12Z"></path></svg>';
+    const addAudioButton = createAddFileButton(
+      block,
+      editor,
+      editor.dictionary.file_blocks.audio.add_button_text,
+      fileBlockAudioIcon.firstElementChild as HTMLElement
+    );
+    wrapper.appendChild(addAudioButton.dom);
+
+    return {
+      dom: wrapper,
+      destroy: () => {
+        addAudioButton?.destroy?.();
+      },
+    };
+  } else if (!block.props.showPreview) {
+    const file = createDefaultFilePreview(block).dom;
+    const element = createFileAndCaptionWrapper(block, file);
+
+    return {
+      dom: element.dom,
+    };
+  } else {
+    const audio = document.createElement("audio");
+    audio.className = "bn-audio";
+    editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
+      audio.src = downloadUrl;
+    });
+    audio.controls = true;
+    audio.contentEditable = "false";
+    audio.draggable = false;
+
+    const element = createFileAndCaptionWrapper(block, audio);
+    wrapper.appendChild(element.dom);
+
+    return {
+      dom: wrapper,
+    };
+  }
+};
+
+export const audioParse = (
+  element: HTMLElement
+): Partial<Props<typeof audioBlockConfig.propSchema>> | undefined => {
+  if (element.tagName === "AUDIO") {
+    return parseAudioElement(element as HTMLAudioElement);
+  }
+
+  if (element.tagName === "FIGURE") {
+    const parsedFigure = parseFigureElement(element, "audio");
+    if (!parsedFigure) {
+      return undefined;
+    }
+
+    const { targetElement, caption } = parsedFigure;
+
+    return {
+      ...parseAudioElement(targetElement as HTMLAudioElement),
+      caption,
+    };
+  }
+
+  return undefined;
+};
+
+export const audioToExternalHTML = (
+  block: BlockFromConfig<typeof audioBlockConfig, any, any>
+) => {
+  if (!block.props.url) {
+    const div = document.createElement("p");
+    div.textContent = "Add audio";
+
+    return {
+      dom: div,
+    };
+  }
+
+  let audio;
+  if (block.props.showPreview) {
+    audio = document.createElement("audio");
+    audio.src = block.props.url;
+  } else {
+    audio = document.createElement("a");
+    audio.href = block.props.url;
+    audio.textContent = block.props.name || block.props.url;
+  }
+
+  if (block.props.caption) {
+    if (block.props.showPreview) {
+      return createFigureWithCaption(audio, block.props.caption);
+    } else {
+      return createLinkWithCaption(audio, block.props.caption);
+    }
+  }
+
+  return {
+    dom: audio,
+  };
+};
+
+export const AudioBlock = createBlockSpec(audioBlockConfig, {
+  render: audioRender,
+  parse: audioParse,
+  toExternalHTML: audioToExternalHTML,
+});

package/src/blocks/AudioBlockContent/audioBlockHelpers.ts

@@ -0,0 +1,5 @@
+export const parseAudioElement = (audioElement: HTMLAudioElement) => {
+  const url = audioElement.src || undefined;
+
+  return { url };
+};