@blocknote/core 0.29.1 → 0.30.1

package/src/blocks/CodeBlockContent/CodeBlockContent.ts

@@ -64,7 +64,7 @@ type CodeBlockConfigOptions = {
 
 export const shikiParserSymbol = Symbol.for("blocknote.shikiParser");
 export const shikiHighlighterPromiseSymbol = Symbol.for(
-  "blocknote.shikiHighlighterPromise"
+  "blocknote.shikiHighlighterPromise",
 );
 export const defaultCodeBlockPropSchema = {
   language: {
@@ -126,7 +126,10 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
             return null;
           }
 
-          return getLanguageId(options.editor.settings.codeBlock, language);
+          return (
+            getLanguageId(options.editor.settings.codeBlock, language) ??
+            language
+          );
         },
         renderHTML: (attributes) => {
           return attributes.language
@@ -141,10 +144,12 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
   },
   parseHTML() {
     return [
+      // Parse from internal HTML.
       {
         tag: "div[data-content-type=" + this.name + "]",
-        contentElement: "code",
+        contentElement: ".bn-inline-content",
       },
+      // Parse from external HTML.
       {
         tag: "pre",
         contentElement: "code",
@@ -161,7 +166,7 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
       {
         ...(this.options.domAttributes?.inlineContent || {}),
         ...HTMLAttributes,
-      }
+      },
     );
 
     dom.removeChild(contentDOM);
@@ -187,7 +192,7 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
           ...(this.options.domAttributes?.blockContent || {}),
           ...HTMLAttributes,
         },
-        this.options.domAttributes?.inlineContent || {}
+        this.options.domAttributes?.inlineContent || {},
       );
       const handleLanguageChange = (event: Event) => {
         const language = (event.target as HTMLSelectElement).value;
@@ -200,7 +205,7 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
       };
 
       Object.entries(
-        options.editor.settings.codeBlock.supportedLanguages
+        options.editor.settings.codeBlock.supportedLanguages,
       ).forEach(([id, { name }]) => {
         const option = document.createElement("option");
 
@@ -251,7 +256,7 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
         if (process.env.NODE_ENV === "development" && !hasWarned) {
           // eslint-disable-next-line no-console
           console.log(
-            "For syntax highlighting of code blocks, you must provide a highlighter function"
+            "For syntax highlighting of code blocks, you must provide a `codeBlock.createHighlighter` function",
           );
           hasWarned = true;
         }
@@ -265,18 +270,25 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
         return globalThisForShiki[shikiHighlighterPromiseSymbol].then(
           (createdHighlighter) => {
             highlighter = createdHighlighter;
-          }
+          },
         );
       }
-
-      const language = parserOptions.language;
+      const language = getLanguageId(
+        options.editor.settings.codeBlock,
+        parserOptions.language!,
+      );
 
       if (
-        language &&
-        language !== "text" &&
-        !highlighter.getLoadedLanguages().includes(language) &&
-        language in options.editor.settings.codeBlock.supportedLanguages
+        !language ||
+        language === "text" ||
+        language === "none" ||
+        language === "plaintext" ||
+        language === "txt"
       ) {
+        return [];
+      }
+
+      if (!highlighter.getLoadedLanguages().includes(language)) {
         return highlighter.loadLanguage(language);
       }
 
@@ -308,10 +320,9 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
           const $start = state.doc.resolve(range.from);
           const languageName = match[1].trim();
           const attributes = {
-            language: getLanguageId(
-              options.editor.settings.codeBlock,
-              languageName
-            ),
+            language:
+              getLanguageId(options.editor.settings.codeBlock, languageName) ??
+              languageName,
           };
 
           if (
@@ -320,7 +331,7 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
               .canReplaceWith(
                 $start.index(-1),
                 $start.indexAfter(-1),
-                this.type
+                this.type,
               )
           ) {
             return null;
@@ -407,7 +418,7 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
             $from.pos - $from.parentOffset + $from.parent.nodeSize,
             {
               type: "paragraph",
-            }
+            },
           )
           .run();
 
@@ -419,13 +430,16 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
 
 export const CodeBlock = createBlockSpecFromStronglyTypedTiptapNode(
   CodeBlockContent,
-  defaultCodeBlockPropSchema
+  defaultCodeBlockPropSchema,
 );
 
-function getLanguageId(options: CodeBlockOptions, languageName: string) {
-  return (
-    Object.entries(options.supportedLanguages).find(([id, { aliases }]) => {
+function getLanguageId(
+  options: CodeBlockOptions,
+  languageName: string,
+): string | undefined {
+  return Object.entries(options.supportedLanguages).find(
+    ([id, { aliases }]) => {
       return aliases?.includes(languageName) || id === languageName;
-    })?.[0] || languageName
-  );
+    },
+  )?.[0];
 }

package/src/blocks/FileBlockContent/FileBlockContent.ts

@@ -36,13 +36,18 @@ export const fileBlockConfig = {
 
 export const fileRender = (
   block: BlockFromConfig<typeof fileBlockConfig, any, any>,
-  editor: BlockNoteEditor<any, any, any>
+  editor: BlockNoteEditor<any, any, any>,
 ) => {
   return createFileBlockWrapper(block, editor);
 };
 
 export const fileParse = (element: HTMLElement) => {
   if (element.tagName === "EMBED") {
+    // Ignore if parent figure has already been parsed.
+    if (element.closest("figure")) {
+      return undefined;
+    }
+
     return parseEmbedElement(element as HTMLEmbedElement);
   }
 
@@ -64,7 +69,7 @@ export const fileParse = (element: HTMLElement) => {
 };
 
 export const fileToExternalHTML = (
-  block: BlockFromConfig<typeof fileBlockConfig, any, any>
+  block: BlockFromConfig<typeof fileBlockConfig, any, any>,
 ) => {
   if (!block.props.url) {
     const div = document.createElement("p");

package/src/blocks/FileBlockContent/helpers/parse/parseFigureElement.ts

@@ -1,9 +1,9 @@
 export const parseFigureElement = (
   figureElement: HTMLElement,
-  targetTag: string
+  targetTag: string,
 ) => {
   const targetElement = figureElement.querySelector(
-    targetTag
+    targetTag,
   ) as HTMLElement | null;
   if (!targetElement) {
     return undefined;

package/src/blocks/FileBlockContent/helpers/render/createAddFileButton.ts

@@ -5,7 +5,7 @@ export const createAddFileButton = (
   block: BlockFromConfig<FileBlockConfig, any, any>,
   editor: BlockNoteEditor<any, any, any>,
   buttonText?: string,
-  buttonIcon?: HTMLElement
+  buttonIcon?: HTMLElement,
 ) => {
   const addFileButton = document.createElement("div");
   addFileButton.className = "bn-add-file-button";
@@ -35,13 +35,13 @@ export const createAddFileButton = (
     editor.transact((tr) =>
       tr.setMeta(editor.filePanel!.plugin, {
         block: block,
-      })
+      }),
     );
   };
   addFileButton.addEventListener(
     "mousedown",
     addFileButtonMouseDownHandler,
-    true
+    true,
   );
   addFileButton.addEventListener("click", addFileButtonClickHandler, true);
 
@@ -51,12 +51,12 @@ export const createAddFileButton = (
       addFileButton.removeEventListener(
         "mousedown",
         addFileButtonMouseDownHandler,
-        true
+        true,
       );
       addFileButton.removeEventListener(
         "click",
         addFileButtonClickHandler,
-        true
+        true,
       );
     },
   };

package/src/blocks/FileBlockContent/helpers/render/createFileBlockWrapper.ts

@@ -16,7 +16,7 @@ export const createFileBlockWrapper = (
   >,
   element?: { dom: HTMLElement; destroy?: () => void },
   buttonText?: string,
-  buttonIcon?: HTMLElement
+  buttonIcon?: HTMLElement,
 ) => {
   const wrapper = document.createElement("div");
   wrapper.className = "bn-file-block-content-wrapper";
@@ -28,7 +28,7 @@ export const createFileBlockWrapper = (
       block,
       editor,
       buttonText,
-      buttonIcon
+      buttonIcon,
     );
     wrapper.appendChild(addFileButton.dom);
 

package/src/blocks/FileBlockContent/helpers/render/createFileNameWithIcon.ts

@@ -3,7 +3,7 @@ import { BlockFromConfig, FileBlockConfig } from "../../../../schema/index.js";
 export const FILE_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 8L9.00319 2H19.9978C20.5513 2 21 2.45531 21 2.9918V21.0082C21 21.556 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5501 3 20.9932V8ZM10 4V9H5V20H19V4H10Z"></path></svg>`;
 
 export const createFileNameWithIcon = (
-  block: BlockFromConfig<FileBlockConfig, any, any>
+  block: BlockFromConfig<FileBlockConfig, any, any>,
 ): { dom: HTMLElement; destroy?: () => void } => {
   const file = document.createElement("div");
   file.className = "bn-file-name-with-icon";

package/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts

@@ -8,18 +8,22 @@ export const createResizableFileBlockWrapper = (
   element: { dom: HTMLElement; destroy?: () => void },
   resizeHandlesContainerElement: HTMLElement,
   buttonText: string,
-  buttonIcon: HTMLElement
+  buttonIcon: HTMLElement,
 ): { dom: HTMLElement; destroy: () => void } => {
   const { dom, destroy } = createFileBlockWrapper(
     block,
     editor,
     element,
     buttonText,
-    buttonIcon
+    buttonIcon,
   );
   const wrapper = dom;
   if (block.props.url && block.props.showPreview) {
-    wrapper.style.width = `${block.props.previewWidth}px`;
+    if (block.props.previewWidth) {
+      wrapper.style.width = `${block.props.previewWidth}px`;
+    } else {
+      wrapper.style.width = "fit-content";
+    }
   }
 
   const leftResizeHandle = document.createElement("div");
@@ -87,7 +91,10 @@ export const createResizableFileBlockWrapper = (
 
     // Ensures the element is not wider than the editor and not narrower than a
     // predetermined minimum width.
-    width = Math.max(newWidth, minWidth);
+    width = Math.min(
+      Math.max(newWidth, minWidth),
+      editor.domElement?.firstElementChild?.clientWidth || Number.MAX_VALUE,
+    );
     wrapper.style.width = `${width}px`;
   };
   // Stops mouse movements from resizing the element and updates the block's
@@ -176,11 +183,11 @@ export const createResizableFileBlockWrapper = (
   wrapper.addEventListener("mouseleave", wrapperMouseLeaveHandler);
   leftResizeHandle.addEventListener(
     "mousedown",
-    leftResizeHandleMouseDownHandler
+    leftResizeHandleMouseDownHandler,
   );
   rightResizeHandle.addEventListener(
     "mousedown",
-    rightResizeHandleMouseDownHandler
+    rightResizeHandleMouseDownHandler,
   );
 
   return {
@@ -193,11 +200,11 @@ export const createResizableFileBlockWrapper = (
       wrapper.removeEventListener("mouseleave", wrapperMouseLeaveHandler);
       leftResizeHandle.removeEventListener(
         "mousedown",
-        leftResizeHandleMouseDownHandler
+        leftResizeHandleMouseDownHandler,
       );
       rightResizeHandle.removeEventListener(
         "mousedown",
-        rightResizeHandleMouseDownHandler
+        rightResizeHandleMouseDownHandler,
       );
     },
   };

package/src/blocks/FileBlockContent/helpers/toExternalHTML/createFigureWithCaption.ts

@@ -1,6 +1,6 @@
 export const createFigureWithCaption = (
   element: HTMLElement,
-  caption: string
+  caption: string,
 ) => {
   const figure = document.createElement("figure");
   const captionElement = document.createElement("figcaption");

package/src/blocks/FileBlockContent/helpers/toExternalHTML/createLinkWithCaption.ts

@@ -1,6 +1,6 @@
 export const createLinkWithCaption = (
   element: HTMLElement,
-  caption: string
+  caption: string,
 ) => {
   const wrapper = document.createElement("div");
   const fileCaption = document.createElement("p");

package/src/blocks/FileBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY.ts

@@ -4,7 +4,7 @@
  * @warning This function should only be used for development purposes, replace with your own backend!
  */
 export const uploadToTmpFilesDotOrg_DEV_ONLY = async (
-  file: File
+  file: File,
 ): Promise<string> => {
   const body = new FormData();
   body.append("file", file);
@@ -15,6 +15,6 @@ export const uploadToTmpFilesDotOrg_DEV_ONLY = async (
   });
   return (await ret.json()).data.url.replace(
     "tmpfiles.org/",
-    "tmpfiles.org/dl/"
+    "tmpfiles.org/dl/",
   );
 };

package/src/blocks/HeadingBlockContent/HeadingBlockContent.ts

@@ -46,7 +46,7 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
                   props: {
                     level: level as any,
                   },
-                })
+                }),
               )
               // Removes the "#" character(s) used to set the heading.
               .deleteRange({ from: range.from, to: range.to })
@@ -75,7 +75,7 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
             props: {
               level: 1 as any,
             },
-          })
+          }),
         );
       },
       "Mod-Alt-2": () => {
@@ -93,7 +93,7 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
             props: {
               level: 2 as any,
             },
-          })
+          }),
         );
       },
       "Mod-Alt-3": () => {
@@ -111,16 +111,19 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
             props: {
               level: 3 as any,
             },
-          })
+          }),
         );
       },
     };
   },
   parseHTML() {
     return [
+      // Parse from internal HTML.
       {
         tag: "div[data-content-type=" + this.name + "]",
+        contentElement: ".bn-inline-content",
       },
+      // Parse from external HTML.
       {
         tag: "h1",
         attrs: { level: 1 },
@@ -147,12 +150,12 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
         ...(this.options.domAttributes?.blockContent || {}),
         ...HTMLAttributes,
       },
-      this.options.domAttributes?.inlineContent || {}
+      this.options.domAttributes?.inlineContent || {},
     );
   },
 });
 
 export const Heading = createBlockSpecFromStronglyTypedTiptapNode(
   HeadingBlockContent,
-  headingPropSchema
+  headingPropSchema,
 );

package/src/blocks/ImageBlockContent/ImageBlockContent.ts

@@ -37,7 +37,8 @@ export const imagePropSchema = {
   },
   // File preview width in px.
   previewWidth: {
-    default: 512,
+    default: undefined,
+    type: "number",
   },
 } satisfies PropSchema;
 
@@ -51,7 +52,7 @@ export const imageBlockConfig = {
 
 export const imageRender = (
   block: BlockFromConfig<typeof imageBlockConfig, any, any>,
-  editor: BlockNoteEditor<any, any, any>
+  editor: BlockNoteEditor<any, any, any>,
 ) => {
   const icon = document.createElement("div");
   icon.innerHTML = FILE_IMAGE_ICON_SVG;
@@ -80,14 +81,19 @@ export const imageRender = (
     { dom: imageWrapper },
     imageWrapper,
     editor.dictionary.file_blocks.image.add_button_text,
-    icon.firstElementChild as HTMLElement
+    icon.firstElementChild as HTMLElement,
   );
 };
 
 export const imageParse = (
-  element: HTMLElement
+  element: HTMLElement,
 ): Partial<Props<typeof imageBlockConfig.propSchema>> | undefined => {
   if (element.tagName === "IMG") {
+    // Ignore if parent figure has already been parsed.
+    if (element.closest("figure")) {
+      return undefined;
+    }
+
     return parseImageElement(element as HTMLImageElement);
   }
 
@@ -109,7 +115,7 @@ export const imageParse = (
 };
 
 export const imageToExternalHTML = (
-  block: BlockFromConfig<typeof imageBlockConfig, any, any>
+  block: BlockFromConfig<typeof imageBlockConfig, any, any>,
 ) => {
   if (!block.props.url) {
     const div = document.createElement("p");
@@ -125,7 +131,9 @@ export const imageToExternalHTML = (
     image = document.createElement("img");
     image.src = block.props.url;
     image.alt = block.props.name || block.props.caption || "BlockNote image";
-    image.width = block.props.previewWidth;
+    if (block.props.previewWidth) {
+      image.width = block.props.previewWidth;
+    }
   } else {
     image = document.createElement("a");
     image.href = block.props.url;

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

@@ -8,6 +8,7 @@ import {
 } from "../../../schema/index.js";
 import { createDefaultBlockDOMOutputSpec } from "../../defaultBlockHelpers.js";
 import { defaultProps } from "../../defaultProps.js";
+import { getListItemContent } from "../getListItemContent.js";
 import { handleEnter } from "../ListItemKeyboardShortcuts.js";
 
 export const bulletListItemPropSchema = {
@@ -40,7 +41,7 @@ const BulletListItemBlockContent = createStronglyTypedTiptapNode({
               updateBlockCommand(blockInfo.bnBlock.beforePos, {
                 type: "bulletListItem",
                 props: {},
-              })
+              }),
             )
             // Removes the "-", "+", or "*" character used to set the list.
             .deleteRange({ from: range.from, to: range.to });
@@ -65,7 +66,7 @@ const BulletListItemBlockContent = createStronglyTypedTiptapNode({
           updateBlockCommand(blockInfo.bnBlock.beforePos, {
             type: "bulletListItem",
             props: {},
-          })
+          }),
         );
       },
     };
@@ -73,10 +74,12 @@ const BulletListItemBlockContent = createStronglyTypedTiptapNode({
 
   parseHTML() {
     return [
-      // Case for regular HTML list structure.
+      // Parse from internal HTML.
       {
         tag: "div[data-content-type=" + this.name + "]",
+        contentElement: ".bn-inline-content",
       },
+      // Parse from external HTML.
       {
         tag: "li",
         getAttrs: (element) => {
@@ -92,36 +95,17 @@ const BulletListItemBlockContent = createStronglyTypedTiptapNode({
 
           if (
             parent.tagName === "UL" ||
-            (parent.tagName === "DIV" && parent.parentElement!.tagName === "UL")
+            (parent.tagName === "DIV" && parent.parentElement?.tagName === "UL")
           ) {
             return {};
           }
 
           return false;
         },
-        node: "bulletListItem",
-      },
-      // Case for BlockNote list structure.
-      {
-        tag: "p",
-        getAttrs: (element) => {
-          if (typeof element === "string") {
-            return false;
-          }
-
-          const parent = element.parentElement;
-
-          if (parent === null) {
-            return false;
-          }
-
-          if (parent.getAttribute("data-content-type") === "bulletListItem") {
-            return {};
-          }
-
-          return false;
-        },
-        priority: 300,
+        // As `li` elements can contain multiple paragraphs, we need to merge their contents
+        // into a single one so that ProseMirror can parse everything correctly.
+        getContent: (node, schema) =>
+          getListItemContent(node, schema, this.name),
         node: "bulletListItem",
       },
     ];
@@ -138,12 +122,12 @@ const BulletListItemBlockContent = createStronglyTypedTiptapNode({
         ...(this.options.domAttributes?.blockContent || {}),
         ...HTMLAttributes,
       },
-      this.options.domAttributes?.inlineContent || {}
+      this.options.domAttributes?.inlineContent || {},
     );
   },
 });
 
 export const BulletListItem = createBlockSpecFromStronglyTypedTiptapNode(
   BulletListItemBlockContent,
-  bulletListItemPropSchema
+  bulletListItemPropSchema,
 );