fix: File resize UX

packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts

@@ -64,12 +64,12 @@ export const audioRender = (
   audio.contentEditable = "false";
   audio.draggable = false;
 
-  const element = createFileAndCaptionWrapper(block, audio);
+  const fileAndCaptionWrapper = createFileAndCaptionWrapper(block, audio);
 
   return createFileBlockWrapper(
     block,
     editor,
-    element,
+    fileAndCaptionWrapper,
     editor.dictionary.file_blocks.audio.add_button_text,
     icon.firstElementChild as HTMLElement
   );

packages/core/src/blocks/FileBlockContent/FileBlockContent.ts

@@ -43,9 +43,10 @@ export const fileRender = (
   editor: BlockNoteEditor<any, any, any>
 ) => {
   const file = createDefaultFilePreview(block).dom;
-  const element = createFileAndCaptionWrapper(block, file);
 
-  return createFileBlockWrapper(block, editor, element);
+  const fileAndCaptionWrapper = createFileAndCaptionWrapper(block, file);
+
+  return createFileBlockWrapper(block, editor, fileAndCaptionWrapper);
 };
 
 export const fileParse = (element: HTMLElement) => {

packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts

@@ -108,14 +108,6 @@ export const createFileAndCaptionWrapper = (
   caption.className = "bn-file-caption";
   caption.textContent = block.props.caption;
 
-  if (
-    typeof block.props.previewWidth === "number" &&
-    block.props.previewWidth > 0 &&
-    block.props.caption !== undefined
-  ) {
-    caption.style.width = `${block.props.previewWidth}px`;
-  }
-
   fileAndCaptionWrapper.appendChild(file);
   fileAndCaptionWrapper.appendChild(caption);
 
@@ -250,24 +242,23 @@ export const createFigureWithCaption = (
 export const createResizeHandlesWrapper = (
   block: BlockFromConfig<FileBlockConfig, any, any>,
   editor: BlockNoteEditor<any, any, any>,
-  element: HTMLElement,
-  getWidth: () => number,
-  setWidth: (width: number) => void
+  element: HTMLElement
 ): { dom: HTMLElement; destroy: () => void } => {
   if (!block.props.previewWidth) {
     throw new Error("Block must have a `previewWidth` prop.");
   }
 
   // Wrapper element for rendered element and resize handles.
   const wrapper = document.createElement("div");
-  wrapper.className = "bn-visual-media-wrapper";
+  wrapper.className = "bn-resize-handles-wrapper";
+  wrapper.style.width = `${block.props.previewWidth}px`;
 
   // Resize handle elements.
   const leftResizeHandle = document.createElement("div");
-  leftResizeHandle.className = "bn-visual-media-resize-handle";
+  leftResizeHandle.className = "bn-resize-handle";
   leftResizeHandle.style.left = "4px";
   const rightResizeHandle = document.createElement("div");
-  rightResizeHandle.className = "bn-visual-media-resize-handle";
+  rightResizeHandle.className = "bn-resize-handle";
   rightResizeHandle.style.right = "4px";
 
   // Temporary parameters set when the user begins resizing the element, used to
@@ -328,11 +319,13 @@ export const createResizeHandlesWrapper = (
     // Ensures the element is not wider than the editor and not smaller than a
     // predetermined minimum width.
     if (newWidth < minWidth) {
-      setWidth(minWidth);
+      wrapper.style.width = `${minWidth}`;
     } else if (newWidth > editor.domElement.firstElementChild!.clientWidth) {
-      setWidth(editor.domElement.firstElementChild!.clientWidth);
+      wrapper.style.width = `${
+        editor.domElement.firstElementChild!.clientWidth
+      }px`;
     } else {
-      setWidth(newWidth);
+      wrapper.style.width = `${newWidth}px`;
     }
   };
   // Stops mouse movements from resizing the element and updates the block's
@@ -358,7 +351,7 @@ export const createResizeHandlesWrapper = (
 
     editor.updateBlock(block, {
       props: {
-        previewWidth: getWidth(),
+        previewWidth: parseInt(wrapper.style.width.replace("px", "")),
       },
     });
   };

packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts

@@ -57,6 +57,17 @@ export const imageRender = (
   block: BlockFromConfig<typeof imageBlockConfig, any, any>,
   editor: BlockNoteEditor<any, any, any>
 ) => {
+  // Immediately updates & re-renders the block if it's wider than the editor.
+  if (
+    block.props.previewWidth > editor.domElement.firstElementChild!.clientWidth
+  ) {
+    editor.updateBlock(block, {
+      props: {
+        previewWidth: editor.domElement.firstElementChild!.clientWidth,
+      },
+    });
+  }
+
   const icon = document.createElement("div");
   icon.innerHTML = FILE_IMAGE_ICON_SVG;
 
@@ -68,25 +79,19 @@ export const imageRender = (
   image.alt = block.props.name || block.props.caption || "BlockNote image";
   image.contentEditable = "false";
   image.draggable = false;
-  image.width = Math.min(
-    block.props.previewWidth,
-    editor.domElement.firstElementChild!.clientWidth
-  );
 
-  const file = createResizeHandlesWrapper(
+  const fileAndCaptionWrapper = createFileAndCaptionWrapper(block, image);
+
+  const resizeHandlesWrapper = createResizeHandlesWrapper(
     block,
     editor,
-    image,
-    () => image.width,
-    (width) => (image.width = width)
+    fileAndCaptionWrapper.dom
   );
 
-  const element = createFileAndCaptionWrapper(block, file.dom);
-
   return createFileBlockWrapper(
     block,
     editor,
-    element,
+    resizeHandlesWrapper,
     editor.dictionary.file_blocks.image.add_button_text,
     icon.firstElementChild as HTMLElement
   );

packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts

@@ -58,6 +58,17 @@ export const videoRender = (
   block: BlockFromConfig<typeof videoBlockConfig, any, any>,
   editor: BlockNoteEditor<any, any, any>
 ) => {
+  // Immediately updates & re-renders the block if it's wider than the editor.
+  if (
+    block.props.previewWidth > editor.domElement.firstElementChild!.clientWidth
+  ) {
+    editor.updateBlock(block, {
+      props: {
+        previewWidth: editor.domElement.firstElementChild!.clientWidth,
+      },
+    });
+  }
+
   const icon = document.createElement("div");
   icon.innerHTML = FILE_VIDEO_ICON_SVG;
 
@@ -67,25 +78,19 @@ export const videoRender = (
   video.controls = true;
   video.contentEditable = "false";
   video.draggable = false;
-  video.width = Math.min(
-    block.props.previewWidth,
-    editor.domElement.firstElementChild!.clientWidth
-  );
 
-  const file = createResizeHandlesWrapper(
+  const fileAndCaptionWrapper = createFileAndCaptionWrapper(block, video);
+
+  const resizeHandlesWrapper = createResizeHandlesWrapper(
     block,
     editor,
-    video,
-    () => video.width,
-    (width) => (video.width = width)
+    fileAndCaptionWrapper.dom
   );
 
-  const element = createFileAndCaptionWrapper(block, file.dom);
-
   return createFileBlockWrapper(
     block,
     editor,
-    element,
+    resizeHandlesWrapper,
     editor.dictionary.file_blocks.video.add_button_text,
     icon.firstElementChild as HTMLElement
   );

packages/core/src/editor/Block.css

@@ -350,6 +350,7 @@ NESTED BLOCKS
   display: flex;
   flex-direction: column;
   border-radius: 4px;
+  width: 100%;
 }
 
 [data-file-block] .bn-file-default-preview {
@@ -372,20 +373,19 @@ NESTED BLOCKS
   height: 24px;
 }
 
-[data-file-block] .bn-visual-media-wrapper {
+[data-file-block] .bn-resize-handles-wrapper {
   display: flex;
   flex-direction: row;
   align-items: center;
   position: relative;
-  width: fit-content;
 }
 
 [data-file-block] .bn-visual-media {
   border-radius: 4px;
   max-width: 100%;
 }
 
-[data-file-block] .bn-visual-media-resize-handle {
+[data-file-block] .bn-resize-handle {
   position: absolute;
   width: 8px;
   height: 30px;

packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx

@@ -8,6 +8,7 @@ import {
 } from "../../schema/ReactBlockSpec.js";
 import {
   FigureWithCaption,
+  FileAndCaptionWrapper,
   FileBlockWrapper,
   LinkWithCaption,
 } from "../FileBlockContent/fileBlockHelpers.js";
@@ -26,13 +27,15 @@ export const AudioPreview = (
   }
 
   return (
-    <audio
-      className={"bn-audio"}
-      src={resolved.downloadUrl}
-      controls={true}
-      contentEditable={false}
-      draggable={false}
-    />
+    <FileAndCaptionWrapper {...props}>
+      <audio
+        className={"bn-audio"}
+        src={resolved.downloadUrl}
+        controls={true}
+        contentEditable={false}
+        draggable={false}
+      />
+    </FileAndCaptionWrapper>
   );
 };
 
@@ -77,7 +80,7 @@ export const AudioBlock = (
       {...(props as any)}
       buttonText={props.editor.dictionary.file_blocks.audio.add_button_text}
       buttonIcon={<RiVolumeUpFill size={24} />}>
-      <AudioPreview block={props.block} editor={props.editor as any} />
+      <AudioPreview {...(props as any)} />
     </FileBlockWrapper>
   );
 };

packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx

@@ -1,15 +1,27 @@
-import { fileBlockConfig, fileParse } from "@blocknote/core";
+import { FileBlockConfig, fileBlockConfig, fileParse } from "@blocknote/core";
 
 import {
   createReactBlockSpec,
   ReactCustomBlockRenderProps,
 } from "../../schema/ReactBlockSpec.js";
 import {
   DefaultFilePreview,
+  FileAndCaptionWrapper,
   FileBlockWrapper,
   LinkWithCaption,
 } from "./fileBlockHelpers.js";
 
+export const FilePreview = (
+  props: Omit<
+    ReactCustomBlockRenderProps<FileBlockConfig, any, any>,
+    "contentRef"
+  >
+) => (
+  <FileAndCaptionWrapper {...props}>
+    <DefaultFilePreview {...props} />
+  </FileAndCaptionWrapper>
+);
+
 export const FileToExternalHTML = (
   props: Omit<
     ReactCustomBlockRenderProps<typeof fileBlockConfig, any, any>,
@@ -42,7 +54,7 @@ export const FileBlock = (
 ) => {
   return (
     <FileBlockWrapper {...(props as any)}>
-      <DefaultFilePreview block={props.block} editor={props.editor as any} />
+      <FilePreview {...(props as any)} />
     </FileBlockWrapper>
   );
 };