From c40edd193540b4d7c1add8ae8b579e8d35d7f860 Mon Sep 17 00:00:00 2001
From: matthewlipski <matthewlipski@gmail.com>
Date: Thu, 5 Dec 2024 17:02:44 +0100
Subject: [PATCH 01/18] Fixed issues with exporting file blocks to external
 HTML

---
 .../AudioBlockContent/AudioBlockContent.ts      |  1 +
 .../blocks/FileBlockContent/fileBlockHelpers.ts |  2 --
 .../ImageBlockContent/ImageBlockContent.ts      |  4 +++-
 .../VideoBlockContent/VideoBlockContent.ts      |  7 +++++--
 .../AudioBlockContent/AudioBlockContent.tsx     | 10 +++++-----
 .../ImageBlockContent/ImageBlockContent.tsx     | 17 ++++++++++-------
 .../VideoBlockContent/VideoBlockContent.tsx     | 17 ++++++++++-------
 7 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts b/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts
index 7cdf9d2aae..b7b0145fcc 100644
--- a/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts
+++ b/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts
@@ -57,6 +57,7 @@ export const audioRender = (
 
   const audio = document.createElement("audio");
   audio.className = "bn-audio";
+  audio.src = block.props.url;
   editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
     audio.src = downloadUrl;
   });
diff --git a/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts b/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts
index 58600671ff..41080422c1 100644
--- a/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts
+++ b/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts
@@ -329,8 +329,6 @@ export const createResizeHandlesWrapper = (
     // predetermined minimum width.
     if (newWidth < minWidth) {
       setWidth(minWidth);
-    } else if (newWidth > editor.domElement.firstElementChild!.clientWidth) {
-      setWidth(editor.domElement.firstElementChild!.clientWidth);
     } else {
       setWidth(newWidth);
     }
diff --git a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts b/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts
index 32ad7df41f..2373d14020 100644
--- a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts
+++ b/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts
@@ -62,6 +62,7 @@ export const imageRender = (
 
   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;
   });
@@ -70,7 +71,8 @@ export const imageRender = (
   image.draggable = false;
   image.width = Math.min(
     block.props.previewWidth,
-    editor.domElement.firstElementChild!.clientWidth
+    // Width is 0 if the image is not rendered yet.
+    image.getBoundingClientRect().width || Number.MAX_VALUE
   );
 
   const file = createResizeHandlesWrapper(
diff --git a/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts b/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts
index 5dacc6ae76..a2fe4ecc9a 100644
--- a/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts
+++ b/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts
@@ -64,12 +64,15 @@ export const videoRender = (
   const video = document.createElement("video");
   video.className = "bn-visual-media";
   video.src = block.props.url;
+  editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
+    video.src = downloadUrl;
+  });
   video.controls = true;
   video.contentEditable = "false";
   video.draggable = false;
   video.width = Math.min(
-    block.props.previewWidth,
-    editor.domElement.firstElementChild!.clientWidth
+    // Width is 0 if the video is not rendered yet.
+    video.getBoundingClientRect().width || Number.MAX_VALUE
   );
 
   const file = createResizeHandlesWrapper(
diff --git a/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx b/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx
index 958db0c858..00827159a6 100644
--- a/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx
+++ b/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx
@@ -21,14 +21,14 @@ export const AudioPreview = (
 ) => {
   const resolved = useResolveUrl(props.block.props.url!);
 
-  if (resolved.loadingState === "loading") {
-    return null;
-  }
-
   return (
     <audio
       className={"bn-audio"}
-      src={resolved.downloadUrl}
+      src={
+        resolved.loadingState === "loading"
+          ? props.block.props.url
+          : resolved.downloadUrl
+      }
       controls={true}
       contentEditable={false}
       draggable={false}
diff --git a/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx b/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
index 6ad43d6114..c330b7c340 100644
--- a/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
+++ b/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
@@ -1,5 +1,5 @@
 import { FileBlockConfig, imageBlockConfig, imageParse } from "@blocknote/core";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { RiImage2Fill } from "react-icons/ri";
 
 import {
@@ -20,28 +20,31 @@ export const ImagePreview = (
     "contentRef"
   >
 ) => {
+  const imgRef = useRef<HTMLImageElement>(null);
+
   const [width, setWidth] = useState<number>(
     Math.min(
       props.block.props.previewWidth!,
-      props.editor.domElement.firstElementChild!.clientWidth
+      imgRef.current?.getBoundingClientRect().width || Number.MAX_VALUE
     )
   );
 
   const resolved = useResolveUrl(props.block.props.url!);
 
-  if (resolved.loadingState === "loading") {
-    return null;
-  }
-
   return (
     <ResizeHandlesWrapper {...props} width={width} setWidth={setWidth}>
       <img
         className={"bn-visual-media"}
-        src={resolved.downloadUrl}
+        src={
+          resolved.loadingState === "loading"
+            ? props.block.props.url
+            : resolved.downloadUrl
+        }
         alt={props.block.props.caption || "BlockNote image"}
         contentEditable={false}
         draggable={false}
         width={width}
+        ref={imgRef}
       />
     </ResizeHandlesWrapper>
   );
diff --git a/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx b/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
index 96bf42ae1a..5ab0645c14 100644
--- a/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
+++ b/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
@@ -1,5 +1,5 @@
 import { FileBlockConfig, videoBlockConfig, videoParse } from "@blocknote/core";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { RiVideoFill } from "react-icons/ri";
 
 import {
@@ -20,28 +20,31 @@ export const VideoPreview = (
     "contentRef"
   >
 ) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
   const [width, setWidth] = useState<number>(
     Math.min(
       props.block.props.previewWidth!,
-      props.editor.domElement.firstElementChild!.clientWidth
+      videoRef.current?.getBoundingClientRect().width || Number.MAX_VALUE
     )
   );
 
   const resolved = useResolveUrl(props.block.props.url!);
 
-  if (resolved.loadingState === "loading") {
-    return null;
-  }
-
   return (
     <ResizeHandlesWrapper {...props} width={width} setWidth={setWidth}>
       <video
         className={"bn-visual-media"}
-        src={resolved.downloadUrl}
+        src={
+          resolved.loadingState === "loading"
+            ? props.block.props.url
+            : resolved.downloadUrl
+        }
         controls={true}
         contentEditable={false}
         draggable={false}
         width={width}
+        ref={videoRef}
       />
     </ResizeHandlesWrapper>
   );

From 544725e61760ba834f414618e0f6573412a20a07 Mon Sep 17 00:00:00 2001
From: matthewlipski <matthewlipski@gmail.com>
Date: Thu, 5 Dec 2024 17:27:11 +0100
Subject: [PATCH 02/18] Changed editor view typing to possibly be undefined

---
 .../commands/moveBlocks/moveBlocks.test.ts    |  6 +++---
 .../commands/moveBlocks/moveBlocks.ts         |  2 +-
 .../commands/splitBlock/splitBlock.test.ts    |  2 +-
 .../core/src/api/clipboard/clipboard.test.ts  |  4 ++++
 .../fromClipboard/handleFileInsertion.ts      |  2 +-
 .../fromClipboard/handleVSCodePaste.ts        |  6 +++++-
 .../clipboard/fromClipboard/pasteExtension.ts |  6 +++---
 .../parsers/markdown/parseMarkdown.test.ts    |  4 ++++
 packages/core/src/editor/BlockNoteEditor.ts   | 19 +++++++++++++------
 .../Placeholder/PlaceholderPlugin.ts          |  8 ++++----
 .../src/extensions/SideMenu/SideMenuPlugin.ts |  6 +++++-
 .../core/src/extensions/SideMenu/dragging.ts  |  3 +++
 .../SuggestionMenu/SuggestionPlugin.ts        |  9 +++------
 .../TableHandles/TableHandlesPlugin.ts        | 12 ++++++++++++
 .../FileBlockContent/fileBlockHelpers.tsx     |  4 ----
 ...useGridSuggestionMenuKeyboardNavigation.ts |  4 ++--
 .../useSuggestionMenuKeyboardNavigation.ts    |  4 ++--
 17 files changed, 66 insertions(+), 35 deletions(-)

diff --git a/packages/core/src/api/blockManipulation/commands/moveBlocks/moveBlocks.test.ts b/packages/core/src/api/blockManipulation/commands/moveBlocks/moveBlocks.test.ts
index c1c4bb93a6..c1b0de5ecc 100644
--- a/packages/core/src/api/blockManipulation/commands/moveBlocks/moveBlocks.test.ts
+++ b/packages/core/src/api/blockManipulation/commands/moveBlocks/moveBlocks.test.ts
@@ -22,7 +22,7 @@ function makeSelectionSpanContent(selectionType: "text" | "node" | "cell") {
   const { blockContent } = blockInfo;
 
   if (selectionType === "cell") {
-    getEditor()._tiptapEditor.view.dispatch(
+    getEditor()._tiptapEditor.view?.dispatch(
       getEditor()._tiptapEditor.state.tr.setSelection(
         CellSelection.create(
           getEditor()._tiptapEditor.state.doc,
@@ -36,7 +36,7 @@ function makeSelectionSpanContent(selectionType: "text" | "node" | "cell") {
       )
     );
   } else if (selectionType === "node") {
-    getEditor()._tiptapEditor.view.dispatch(
+    getEditor()._tiptapEditor.view?.dispatch(
       getEditor()._tiptapEditor.state.tr.setSelection(
         NodeSelection.create(
           getEditor()._tiptapEditor.state.doc,
@@ -45,7 +45,7 @@ function makeSelectionSpanContent(selectionType: "text" | "node" | "cell") {
       )
     );
   } else {
-    getEditor()._tiptapEditor.view.dispatch(
+    getEditor()._tiptapEditor.view?.dispatch(
       getEditor()._tiptapEditor.state.tr.setSelection(
         TextSelection.create(
           getEditor()._tiptapEditor.state.doc,
diff --git a/packages/core/src/api/blockManipulation/commands/moveBlocks/moveBlocks.ts b/packages/core/src/api/blockManipulation/commands/moveBlocks/moveBlocks.ts
index 89006b8bc8..2ffe1744d0 100644
--- a/packages/core/src/api/blockManipulation/commands/moveBlocks/moveBlocks.ts
+++ b/packages/core/src/api/blockManipulation/commands/moveBlocks/moveBlocks.ts
@@ -125,7 +125,7 @@ function updateBlockSelectionFromData(
     );
   }
 
-  editor._tiptapEditor.view.dispatch(
+  editor._tiptapEditor.view?.dispatch(
     editor._tiptapEditor.state.tr.setSelection(selection)
   );
 }
diff --git a/packages/core/src/api/blockManipulation/commands/splitBlock/splitBlock.test.ts b/packages/core/src/api/blockManipulation/commands/splitBlock/splitBlock.test.ts
index 1699e37084..a78a746d5c 100644
--- a/packages/core/src/api/blockManipulation/commands/splitBlock/splitBlock.test.ts
+++ b/packages/core/src/api/blockManipulation/commands/splitBlock/splitBlock.test.ts
@@ -38,7 +38,7 @@ function setSelectionWithOffset(
     throw new Error("Target block is not a block container");
   }
 
-  getEditor()._tiptapEditor.view.dispatch(
+  getEditor()._tiptapEditor.view?.dispatch(
     getEditor()._tiptapEditor.state.tr.setSelection(
       TextSelection.create(doc, info.blockContent.beforePos + offset + 1)
     )
diff --git a/packages/core/src/api/clipboard/clipboard.test.ts b/packages/core/src/api/clipboard/clipboard.test.ts
index 416076aa0a..f2cfa8e985 100644
--- a/packages/core/src/api/clipboard/clipboard.test.ts
+++ b/packages/core/src/api/clipboard/clipboard.test.ts
@@ -167,6 +167,10 @@ describe("Test ProseMirror selection clipboard HTML", () => {
   // Sets the editor selection to the given start and end positions, then
   // exports the selected content to HTML and compares it to a snapshot.
   async function testSelection(testCase: SelectionTestCase) {
+    if (!editor._tiptapEditor.view) {
+      throw new Error("Editor view not initialized.");
+    }
+
     editor.dispatch(
       editor._tiptapEditor.state.tr.setSelection(
         testCase.createSelection(editor._tiptapEditor.view.state.doc)
diff --git a/packages/core/src/api/clipboard/fromClipboard/handleFileInsertion.ts b/packages/core/src/api/clipboard/fromClipboard/handleFileInsertion.ts
index 92618f9f05..cf622f6c72 100644
--- a/packages/core/src/api/clipboard/fromClipboard/handleFileInsertion.ts
+++ b/packages/core/src/api/clipboard/fromClipboard/handleFileInsertion.ts
@@ -131,7 +131,7 @@ export async function handleFileInsertion<
           top: (event as DragEvent).clientY,
         };
 
-        const pos = editor._tiptapEditor.view.posAtCoords(coords);
+        const pos = editor._tiptapEditor.view?.posAtCoords(coords);
         if (!pos) {
           return;
         }
diff --git a/packages/core/src/api/clipboard/fromClipboard/handleVSCodePaste.ts b/packages/core/src/api/clipboard/fromClipboard/handleVSCodePaste.ts
index a9131c43cf..96ef277693 100644
--- a/packages/core/src/api/clipboard/fromClipboard/handleVSCodePaste.ts
+++ b/packages/core/src/api/clipboard/fromClipboard/handleVSCodePaste.ts
@@ -11,6 +11,10 @@ export async function handleVSCodePaste<
   S extends StyleSchema
 >(event: ClipboardEvent, editor: BlockNoteEditor<BSchema, I, S>) {
   const view = editor.prosemirrorView;
+  if (!view) {
+    return false;
+  }
+
   const { schema } = view.state;
 
   if (!event.clipboardData) {
@@ -38,7 +42,7 @@ export async function handleVSCodePaste<
 
   // strip carriage return chars from text pasted as code
   // see: https://github.com/ProseMirror/prosemirror-view/commit/a50a6bcceb4ce52ac8fcc6162488d8875613aacd
-  editor._tiptapEditor.view.pasteHTML(
+  view.pasteHTML(
     `<pre><code class="language-${language}">${text.replace(
       /\r\n?/g,
       "\n"
diff --git a/packages/core/src/api/clipboard/fromClipboard/pasteExtension.ts b/packages/core/src/api/clipboard/fromClipboard/pasteExtension.ts
index bd180363ba..6a61723ca3 100644
--- a/packages/core/src/api/clipboard/fromClipboard/pasteExtension.ts
+++ b/packages/core/src/api/clipboard/fromClipboard/pasteExtension.ts
@@ -57,18 +57,18 @@ export const createPasteFromClipboardExtension = <
                 let data = event.clipboardData!.getData(format);
 
                 if (format === "blocknote/html") {
-                  editor._tiptapEditor.view.pasteHTML(data);
+                  editor._tiptapEditor.view?.pasteHTML(data);
                   return true;
                 }
 
                 if (format === "text/html") {
                   const htmlNode = nestedListsToBlockNoteStructure(data.trim());
                   data = htmlNode.innerHTML;
-                  editor._tiptapEditor.view.pasteHTML(data);
+                  editor._tiptapEditor.view?.pasteHTML(data);
                   return true;
                 }
 
-                editor._tiptapEditor.view.pasteText(data);
+                editor._tiptapEditor.view?.pasteText(data);
 
                 return true;
               },
diff --git a/packages/core/src/api/parsers/markdown/parseMarkdown.test.ts b/packages/core/src/api/parsers/markdown/parseMarkdown.test.ts
index 8d0e511a06..b84aa4c578 100644
--- a/packages/core/src/api/parsers/markdown/parseMarkdown.test.ts
+++ b/packages/core/src/api/parsers/markdown/parseMarkdown.test.ts
@@ -16,6 +16,10 @@ async function parseMarkdownAndCompareSnapshots(
     snapshotPath
   );
 
+  if (!editor._tiptapEditor.view) {
+    throw new Error("Editor view not initialized.");
+  }
+
   doPaste(
     editor._tiptapEditor.view,
     md,
diff --git a/packages/core/src/editor/BlockNoteEditor.ts b/packages/core/src/editor/BlockNoteEditor.ts
index dba3658b1e..608a9b5da4 100644
--- a/packages/core/src/editor/BlockNoteEditor.ts
+++ b/packages/core/src/editor/BlockNoteEditor.ts
@@ -93,6 +93,7 @@ import { createInternalHTMLSerializer } from "../api/exporters/html/internalHTML
 import { inlineContentToNodes } from "../api/nodeConversions/blockToNode.js";
 import { nodeToBlock } from "../api/nodeConversions/nodeToBlock.js";
 import "../style.css";
+import { EditorView } from "prosemirror-view";
 
 export type BlockNoteExtension =
   | AnyExtension
@@ -274,7 +275,8 @@ export class BlockNoteEditor<
   public readonly headless: boolean = false;
 
   public readonly _tiptapEditor:
-    | BlockNoteTipTapEditor & {
+    | Omit<BlockNoteTipTapEditor, "view"> & {
+        view: EditorView | undefined;
         contentComponent: any;
       } = undefined as any; // TODO: Type should actually reflect that it can be `undefined` in headless mode
 
@@ -542,6 +544,7 @@ export class BlockNoteEditor<
         tiptapOptions,
         this.schema.styleSchema
       ) as BlockNoteTipTapEditor & {
+        view: any;
         contentComponent: any;
       };
       this._pmSchema = this._tiptapEditor.schema;
@@ -570,15 +573,15 @@ export class BlockNoteEditor<
   }
 
   public get domElement() {
-    return this._tiptapEditor.view.dom as HTMLDivElement;
+    return this._tiptapEditor.view?.dom as HTMLDivElement | undefined;
   }
 
-  public isFocused() {
-    return this._tiptapEditor.view.hasFocus();
+  public isFocused(): boolean | undefined {
+    return this._tiptapEditor.view?.hasFocus();
   }
 
   public focus() {
-    this._tiptapEditor.view.focus();
+    this._tiptapEditor.view?.focus();
   }
 
   public onUploadStart(callback: (blockId?: string) => void) {
@@ -1198,7 +1201,11 @@ export class BlockNoteEditor<
       ignoreQueryLength?: boolean;
     }
   ) {
-    const tr = this.prosemirrorView.state.tr;
+    const tr = this.prosemirrorView?.state.tr;
+    if (!tr) {
+      return;
+    }
+
     const transaction =
       pluginState && pluginState.deleteTriggerCharacter
         ? tr.insertText(triggerCharacter)
diff --git a/packages/core/src/extensions/Placeholder/PlaceholderPlugin.ts b/packages/core/src/extensions/Placeholder/PlaceholderPlugin.ts
index 30ac29c8db..b535379287 100644
--- a/packages/core/src/extensions/Placeholder/PlaceholderPlugin.ts
+++ b/packages/core/src/extensions/Placeholder/PlaceholderPlugin.ts
@@ -18,10 +18,10 @@ export class PlaceholderPlugin {
         if (nonce) {
           styleEl.setAttribute("nonce", nonce);
         }
-        if (editor._tiptapEditor.view.root instanceof ShadowRoot) {
+        if (editor._tiptapEditor.view?.root instanceof ShadowRoot) {
           editor._tiptapEditor.view.root.append(styleEl);
         } else {
-          editor._tiptapEditor.view.root.head.appendChild(styleEl);
+          editor._tiptapEditor.view?.root.head.appendChild(styleEl);
         }
 
         const styleSheet = styleEl.sheet!;
@@ -78,10 +78,10 @@ export class PlaceholderPlugin {
 
         return {
           destroy: () => {
-            if (editor._tiptapEditor.view.root instanceof ShadowRoot) {
+            if (editor._tiptapEditor.view?.root instanceof ShadowRoot) {
               editor._tiptapEditor.view.root.removeChild(styleEl);
             } else {
-              editor._tiptapEditor.view.root.head.removeChild(styleEl);
+              editor._tiptapEditor.view?.root.head.removeChild(styleEl);
             }
           },
         };
diff --git a/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts b/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts
index a206398980..eb50f42487 100644
--- a/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts
+++ b/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts
@@ -485,7 +485,11 @@ export class SideMenuProsemirrorPlugin<
   /**
    * Handles drag & drop events for blocks.
    */
-  blockDragEnd = () => unsetDragImage(this.editor.prosemirrorView.root);
+  blockDragEnd = () => {
+    if (this.editor.prosemirrorView) {
+      unsetDragImage(this.editor.prosemirrorView.root);
+    }
+  };
   /**
    * Freezes the side menu. When frozen, the side menu will stay
    * attached to the same block regardless of which block is hovered by the
diff --git a/packages/core/src/extensions/SideMenu/dragging.ts b/packages/core/src/extensions/SideMenu/dragging.ts
index 088bd26205..2c8a4bb5d1 100644
--- a/packages/core/src/extensions/SideMenu/dragging.ts
+++ b/packages/core/src/extensions/SideMenu/dragging.ts
@@ -148,6 +148,9 @@ export function dragStart<
   }
 
   const view = editor.prosemirrorView;
+  if (!view) {
+    return;
+  }
 
   const posInfo = getNodeById(block.id, view.state.doc);
   if (!posInfo) {
diff --git a/packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts b/packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts
index 332b408592..1cd64b2a0a 100644
--- a/packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts
+++ b/packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts
@@ -45,12 +45,12 @@ class SuggestionMenuView<
       });
     };
 
-    this.rootEl = this.editor._tiptapEditor.view.root;
+    this.rootEl = this.editor._tiptapEditor.view?.root;
 
     // Setting capture=true ensures that any parent container of the editor that
     // gets scrolled will trigger the scroll event. Scroll events do not bubble
     // and so won't propagate to the document by default.
-    this.rootEl.addEventListener("scroll", this.handleScroll, true);
+    this.rootEl?.addEventListener("scroll", this.handleScroll, true);
   }
 
   handleScroll = () => {
@@ -113,10 +113,7 @@ class SuggestionMenuView<
 
   closeMenu = () => {
     this.editor.dispatch(
-      this.editor._tiptapEditor.view.state.tr.setMeta(
-        suggestionMenuPluginKey,
-        null
-      )
+      this.editor._tiptapEditor.state.tr.setMeta(suggestionMenuPluginKey, null)
     );
   };
 
diff --git a/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts b/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts
index 9238703f88..f322e74319 100644
--- a/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts
+++ b/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts
@@ -742,6 +742,10 @@ export class TableHandlesProsemirrorPlugin<
       })
     );
 
+    if (!this.editor._tiptapEditor.view) {
+      throw new Error("Editor view not initialized.");
+    }
+
     setHiddenDragImage(this.editor._tiptapEditor.view.root);
     event.dataTransfer!.setDragImage(dragImageElement!, 0, 0);
     event.dataTransfer!.effectAllowed = "move";
@@ -781,6 +785,10 @@ export class TableHandlesProsemirrorPlugin<
       })
     );
 
+    if (!this.editor._tiptapEditor.view) {
+      throw new Error("Editor view not initialized.");
+    }
+
     setHiddenDragImage(this.editor._tiptapEditor.view.root);
     event.dataTransfer!.setDragImage(dragImageElement!, 0, 0);
     event.dataTransfer!.effectAllowed = "copyMove";
@@ -804,6 +812,10 @@ export class TableHandlesProsemirrorPlugin<
       this.editor._tiptapEditor.state.tr.setMeta(tableHandlesPluginKey, null)
     );
 
+    if (!this.editor._tiptapEditor.view) {
+      throw new Error("Editor view not initialized.");
+    }
+
     unsetHiddenDragImage(this.editor._tiptapEditor.view.root);
   };
 
diff --git a/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx b/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
index a18e329898..edd32d6e16 100644
--- a/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
+++ b/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
@@ -194,10 +194,6 @@ export const ResizeHandlesWrapper = (
       // predetermined minimum width.
       if (newWidth < minWidth) {
         props.setWidth(minWidth);
-      } else if (
-        newWidth > props.editor.domElement.firstElementChild!.clientWidth
-      ) {
-        props.setWidth(props.editor.domElement.firstElementChild!.clientWidth);
       } else {
         props.setWidth(newWidth);
       }
diff --git a/packages/react/src/components/SuggestionMenu/GridSuggestionMenu/hooks/useGridSuggestionMenuKeyboardNavigation.ts b/packages/react/src/components/SuggestionMenu/GridSuggestionMenu/hooks/useGridSuggestionMenuKeyboardNavigation.ts
index a0b125bbc2..89875a1e6b 100644
--- a/packages/react/src/components/SuggestionMenu/GridSuggestionMenu/hooks/useGridSuggestionMenuKeyboardNavigation.ts
+++ b/packages/react/src/components/SuggestionMenu/GridSuggestionMenu/hooks/useGridSuggestionMenuKeyboardNavigation.ts
@@ -65,14 +65,14 @@ export function useGridSuggestionMenuKeyboardNavigation<Item>(
       return false;
     };
 
-    editor.domElement.addEventListener(
+    editor.domElement?.addEventListener(
       "keydown",
       handleMenuNavigationKeys,
       true
     );
 
     return () => {
-      editor.domElement.removeEventListener(
+      editor.domElement?.removeEventListener(
         "keydown",
         handleMenuNavigationKeys,
         true
diff --git a/packages/react/src/components/SuggestionMenu/hooks/useSuggestionMenuKeyboardNavigation.ts b/packages/react/src/components/SuggestionMenu/hooks/useSuggestionMenuKeyboardNavigation.ts
index 84c46a01af..b7d0d2bb83 100644
--- a/packages/react/src/components/SuggestionMenu/hooks/useSuggestionMenuKeyboardNavigation.ts
+++ b/packages/react/src/components/SuggestionMenu/hooks/useSuggestionMenuKeyboardNavigation.ts
@@ -46,14 +46,14 @@ export function useSuggestionMenuKeyboardNavigation<Item>(
       return false;
     };
 
-    editor.domElement.addEventListener(
+    editor.domElement?.addEventListener(
       "keydown",
       handleMenuNavigationKeys,
       true
     );
 
     return () => {
-      editor.domElement.removeEventListener(
+      editor.domElement?.removeEventListener(
         "keydown",
         handleMenuNavigationKeys,
         true

From 5070ec6aed258c606c1f18e6bba3b8308d539548 Mon Sep 17 00:00:00 2001
From: matthewlipski <matthewlipski@gmail.com>
Date: Thu, 5 Dec 2024 18:28:38 +0100
Subject: [PATCH 03/18] Updated resizing logic

---
 .../FileBlockContent/fileBlockHelpers.ts      | 20 +++++++++----------
 .../ImageBlockContent/ImageBlockContent.ts    |  6 +-----
 .../VideoBlockContent/VideoBlockContent.ts    |  5 +----
 .../FileBlockContent/fileBlockHelpers.tsx     | 15 ++++++++------
 .../ImageBlockContent/ImageBlockContent.tsx   |  7 +------
 .../VideoBlockContent/VideoBlockContent.tsx   |  7 +------
 6 files changed, 23 insertions(+), 37 deletions(-)

diff --git a/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts b/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts
index 41080422c1..e2cd2ece60 100644
--- a/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts
+++ b/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts
@@ -361,16 +361,16 @@ export const createResizeHandlesWrapper = (
     });
   };
 
-  // Shows the resize handles when hovering over the element with the cursor.
-  const elementMouseEnterHandler = () => {
+  // Shows the resize handles when hovering over the wrapper with the cursor.
+  const wrapperMouseEnterHandler = () => {
     if (editor.isEditable) {
       wrapper.appendChild(leftResizeHandle);
       wrapper.appendChild(rightResizeHandle);
     }
   };
-  // Hides the resize handles when the cursor leaves the element, unless the
+  // Hides the resize handles when the cursor leaves the wrapper, unless the
   // cursor moves to one of the resize handles.
-  const elementMouseLeaveHandler = (event: MouseEvent) => {
+  const wrapperMouseLeaveHandler = (event: MouseEvent) => {
     if (
       event.relatedTarget === leftResizeHandle ||
       event.relatedTarget === rightResizeHandle
@@ -402,7 +402,7 @@ export const createResizeHandlesWrapper = (
 
     resizeParams = {
       handleUsed: "left",
-      initialWidth: block.props.previewWidth!,
+      initialWidth: wrapper.clientWidth,
       initialClientX: event.clientX,
     };
   };
@@ -414,7 +414,7 @@ export const createResizeHandlesWrapper = (
 
     resizeParams = {
       handleUsed: "right",
-      initialWidth: block.props.previewWidth!,
+      initialWidth: wrapper.clientWidth,
       initialClientX: event.clientX,
     };
   };
@@ -423,8 +423,8 @@ export const createResizeHandlesWrapper = (
 
   window.addEventListener("mousemove", windowMouseMoveHandler);
   window.addEventListener("mouseup", windowMouseUpHandler);
-  element.addEventListener("mouseenter", elementMouseEnterHandler);
-  element.addEventListener("mouseleave", elementMouseLeaveHandler);
+  wrapper.addEventListener("mouseenter", wrapperMouseEnterHandler);
+  wrapper.addEventListener("mouseleave", wrapperMouseLeaveHandler);
   leftResizeHandle.addEventListener(
     "mousedown",
     leftResizeHandleMouseDownHandler
@@ -439,8 +439,8 @@ export const createResizeHandlesWrapper = (
     destroy: () => {
       window.removeEventListener("mousemove", windowMouseMoveHandler);
       window.removeEventListener("mouseup", windowMouseUpHandler);
-      element.removeEventListener("mouseenter", elementMouseEnterHandler);
-      element.removeEventListener("mouseleave", elementMouseLeaveHandler);
+      wrapper.removeEventListener("mouseenter", wrapperMouseEnterHandler);
+      wrapper.removeEventListener("mouseleave", wrapperMouseLeaveHandler);
       leftResizeHandle.removeEventListener(
         "mousedown",
         leftResizeHandleMouseDownHandler
diff --git a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts b/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts
index 2373d14020..7273008709 100644
--- a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts
+++ b/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts
@@ -69,11 +69,7 @@ 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,
-    // Width is 0 if the image is not rendered yet.
-    image.getBoundingClientRect().width || Number.MAX_VALUE
-  );
+  image.width = block.props.previewWidth;
 
   const file = createResizeHandlesWrapper(
     block,
diff --git a/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts b/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts
index a2fe4ecc9a..7a5cee3325 100644
--- a/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts
+++ b/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts
@@ -70,10 +70,7 @@ export const videoRender = (
   video.controls = true;
   video.contentEditable = "false";
   video.draggable = false;
-  video.width = Math.min(
-    // Width is 0 if the video is not rendered yet.
-    video.getBoundingClientRect().width || Number.MAX_VALUE
-  );
+  video.width = block.props.previewWidth;
 
   const file = createResizeHandlesWrapper(
     block,
diff --git a/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx b/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
index edd32d6e16..47717dcce1 100644
--- a/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
+++ b/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
@@ -1,5 +1,5 @@
 import { FileBlockConfig } from "@blocknote/core";
-import { ReactNode, useCallback, useEffect, useState } from "react";
+import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { RiFile2Line } from "react-icons/ri";
 
 import { useUploadLoading } from "../../hooks/useUploadLoading.js";
@@ -157,6 +157,8 @@ export const ResizeHandlesWrapper = (
     | undefined
   >(undefined);
 
+  const ref = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     // Updates the child width with an updated width depending on the cursor X
     // offset from when the resize began, and which resize handle is being used.
@@ -242,11 +244,11 @@ export const ResizeHandlesWrapper = (
 
       setResizeParams({
         handleUsed: "left",
-        initialWidth: props.width,
+        initialWidth: ref.current!.clientWidth,
         initialClientX: event.clientX,
       });
     },
-    [props.width]
+    []
   );
   const rightResizeHandleMouseDownHandler = useCallback(
     (event: React.MouseEvent) => {
@@ -254,18 +256,19 @@ export const ResizeHandlesWrapper = (
 
       setResizeParams({
         handleUsed: "right",
-        initialWidth: props.width,
+        initialWidth: ref.current!.clientWidth,
         initialClientX: event.clientX,
       });
     },
-    [props.width]
+    []
   );
 
   return (
     <div
       className={"bn-visual-media-wrapper"}
       onMouseEnter={childWrapperMouseEnterHandler}
-      onMouseLeave={childWrapperMouseLeaveHandler}>
+      onMouseLeave={childWrapperMouseLeaveHandler}
+      ref={ref}>
       {props.children}
       {(childHovered || resizeParams) && (
         <>
diff --git a/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx b/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
index c330b7c340..399e538652 100644
--- a/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
+++ b/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
@@ -22,12 +22,7 @@ export const ImagePreview = (
 ) => {
   const imgRef = useRef<HTMLImageElement>(null);
 
-  const [width, setWidth] = useState<number>(
-    Math.min(
-      props.block.props.previewWidth!,
-      imgRef.current?.getBoundingClientRect().width || Number.MAX_VALUE
-    )
-  );
+  const [width, setWidth] = useState<number>(props.block.props.previewWidth!);
 
   const resolved = useResolveUrl(props.block.props.url!);
 
diff --git a/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx b/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
index 5ab0645c14..ef96609124 100644
--- a/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
+++ b/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
@@ -22,12 +22,7 @@ export const VideoPreview = (
 ) => {
   const videoRef = useRef<HTMLVideoElement>(null);
 
-  const [width, setWidth] = useState<number>(
-    Math.min(
-      props.block.props.previewWidth!,
-      videoRef.current?.getBoundingClientRect().width || Number.MAX_VALUE
-    )
-  );
+  const [width, setWidth] = useState<number>(props.block.props.previewWidth!);
 
   const resolved = useResolveUrl(props.block.props.url!);
 

From 53352b292488b4ba7ae5d61095413b6a7083eaf4 Mon Sep 17 00:00:00 2001
From: matthewlipski <matthewlipski@gmail.com>
Date: Thu, 5 Dec 2024 19:40:15 +0100
Subject: [PATCH 04/18] Improved file resize UX

---
 .../AudioBlockContent/AudioBlockContent.ts    |  4 +-
 .../FileBlockContent/FileBlockContent.ts      |  5 +-
 .../FileBlockContent/fileBlockHelpers.ts      | 67 ++++++-------
 .../ImageBlockContent/ImageBlockContent.ts    | 21 +++--
 .../VideoBlockContent/VideoBlockContent.ts    | 20 ++--
 packages/core/src/editor/Block.css            | 13 ++-
 .../AudioBlockContent/AudioBlockContent.tsx   | 25 ++---
 .../FileBlockContent/FileBlockContent.tsx     | 16 +++-
 .../FileBlockContent/fileBlockHelpers.tsx     | 94 +++++++++++++------
 .../ImageBlockContent/ImageBlockContent.tsx   | 38 ++++----
 .../VideoBlockContent/VideoBlockContent.tsx   | 38 ++++----
 11 files changed, 205 insertions(+), 136 deletions(-)

diff --git a/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts b/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts
index b7b0145fcc..c60c29ebe5 100644
--- a/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts
+++ b/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts
@@ -65,12 +65,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
   );
diff --git a/packages/core/src/blocks/FileBlockContent/FileBlockContent.ts b/packages/core/src/blocks/FileBlockContent/FileBlockContent.ts
index 9e1e960c11..ba9a4d95af 100644
--- a/packages/core/src/blocks/FileBlockContent/FileBlockContent.ts
+++ b/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) => {
diff --git a/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts b/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts
index e2cd2ece60..c60d759a72 100644
--- a/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts
+++ b/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,9 +242,8 @@ export const createFigureWithCaption = (
 export const createResizeHandlesWrapper = (
   block: BlockFromConfig<FileBlockConfig, any, any>,
   editor: BlockNoteEditor<any, any, any>,
-  element: HTMLElement,
-  getWidth: () => number,
-  setWidth: (width: number) => void
+  childElement: HTMLElement,
+  resizeHandlesContainerElement?: HTMLElement
 ): { dom: HTMLElement; destroy: () => void } => {
   if (!block.props.previewWidth) {
     throw new Error("Block must have a `previewWidth` prop.");
@@ -260,14 +251,20 @@ export const createResizeHandlesWrapper = (
 
   // 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`;
+
+  // Container for resize handles, defaults to the wrapper element. This allows
+  // e.g. images with captions to have the resize handles centered vertically on
+  // the image.
+  const resizeHandlesContainer = resizeHandlesContainerElement || wrapper;
 
   // 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
@@ -286,11 +283,11 @@ export const createResizeHandlesWrapper = (
     if (!resizeParams) {
       if (
         !editor.isEditable &&
-        wrapper.contains(leftResizeHandle) &&
-        wrapper.contains(rightResizeHandle)
+        resizeHandlesContainer.contains(leftResizeHandle) &&
+        resizeHandlesContainer.contains(rightResizeHandle)
       ) {
-        wrapper.removeChild(leftResizeHandle);
-        wrapper.removeChild(rightResizeHandle);
+        resizeHandlesContainer.removeChild(leftResizeHandle);
+        resizeHandlesContainer.removeChild(rightResizeHandle);
       }
 
       return;
@@ -328,9 +325,9 @@ 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}px`;
     } else {
-      setWidth(newWidth);
+      wrapper.style.width = `${newWidth}px`;
     }
   };
   // Stops mouse movements from resizing the element and updates the block's
@@ -341,11 +338,11 @@ export const createResizeHandlesWrapper = (
       (!event.target ||
         !wrapper.contains(event.target as Node) ||
         !editor.isEditable) &&
-      wrapper.contains(leftResizeHandle) &&
-      wrapper.contains(rightResizeHandle)
+      resizeHandlesContainer.contains(leftResizeHandle) &&
+      resizeHandlesContainer.contains(rightResizeHandle)
     ) {
-      wrapper.removeChild(leftResizeHandle);
-      wrapper.removeChild(rightResizeHandle);
+      resizeHandlesContainer.removeChild(leftResizeHandle);
+      resizeHandlesContainer.removeChild(rightResizeHandle);
     }
 
     if (!resizeParams) {
@@ -356,7 +353,7 @@ export const createResizeHandlesWrapper = (
 
     editor.updateBlock(block, {
       props: {
-        previewWidth: getWidth(),
+        previewWidth: parseInt(wrapper.style.width.replace("px", "")),
       },
     });
   };
@@ -364,8 +361,8 @@ export const createResizeHandlesWrapper = (
   // Shows the resize handles when hovering over the wrapper with the cursor.
   const wrapperMouseEnterHandler = () => {
     if (editor.isEditable) {
-      wrapper.appendChild(leftResizeHandle);
-      wrapper.appendChild(rightResizeHandle);
+      resizeHandlesContainer.appendChild(leftResizeHandle);
+      resizeHandlesContainer.appendChild(rightResizeHandle);
     }
   };
   // Hides the resize handles when the cursor leaves the wrapper, unless the
@@ -384,11 +381,11 @@ export const createResizeHandlesWrapper = (
 
     if (
       editor.isEditable &&
-      wrapper.contains(leftResizeHandle) &&
-      wrapper.contains(rightResizeHandle)
+      resizeHandlesContainer.contains(leftResizeHandle) &&
+      resizeHandlesContainer.contains(rightResizeHandle)
     ) {
-      wrapper.removeChild(leftResizeHandle);
-      wrapper.removeChild(rightResizeHandle);
+      resizeHandlesContainer.removeChild(leftResizeHandle);
+      resizeHandlesContainer.removeChild(rightResizeHandle);
     }
   };
 
@@ -397,9 +394,6 @@ export const createResizeHandlesWrapper = (
   const leftResizeHandleMouseDownHandler = (event: MouseEvent) => {
     event.preventDefault();
 
-    wrapper.appendChild(leftResizeHandle);
-    wrapper.appendChild(rightResizeHandle);
-
     resizeParams = {
       handleUsed: "left",
       initialWidth: wrapper.clientWidth,
@@ -409,9 +403,6 @@ export const createResizeHandlesWrapper = (
   const rightResizeHandleMouseDownHandler = (event: MouseEvent) => {
     event.preventDefault();
 
-    wrapper.appendChild(leftResizeHandle);
-    wrapper.appendChild(rightResizeHandle);
-
     resizeParams = {
       handleUsed: "right",
       initialWidth: wrapper.clientWidth,
@@ -419,7 +410,7 @@ export const createResizeHandlesWrapper = (
     };
   };
 
-  wrapper.appendChild(element);
+  wrapper.appendChild(childElement);
 
   window.addEventListener("mousemove", windowMouseMoveHandler);
   window.addEventListener("mouseup", windowMouseUpHandler);
diff --git a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts b/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts
index 7273008709..6b814d5d19 100644
--- a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts
+++ b/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts
@@ -60,6 +60,9 @@ export const imageRender = (
   const icon = document.createElement("div");
   icon.innerHTML = FILE_IMAGE_ICON_SVG;
 
+  const imageWrapper = document.createElement("div");
+  imageWrapper.className = "bn-visual-media-wrapper";
+
   const image = document.createElement("img");
   image.className = "bn-visual-media";
   image.src = block.props.url;
@@ -69,22 +72,24 @@ export const imageRender = (
   image.alt = block.props.name || block.props.caption || "BlockNote image";
   image.contentEditable = "false";
   image.draggable = false;
-  image.width = block.props.previewWidth;
 
-  const file = createResizeHandlesWrapper(
+  imageWrapper.appendChild(image);
+
+  const fileAndCaptionWrapper = createFileAndCaptionWrapper(
+    block,
+    imageWrapper
+  );
+  const resizeHandlesWrapper = createResizeHandlesWrapper(
     block,
     editor,
-    image,
-    () => image.width,
-    (width) => (image.width = width)
+    fileAndCaptionWrapper.dom,
+    imageWrapper
   );
 
-  const element = createFileAndCaptionWrapper(block, file.dom);
-
   return createFileBlockWrapper(
     block,
     editor,
-    element,
+    resizeHandlesWrapper,
     editor.dictionary.file_blocks.image.add_button_text,
     icon.firstElementChild as HTMLElement
   );
diff --git a/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts b/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts
index 7a5cee3325..80ca2f14ab 100644
--- a/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts
+++ b/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts
@@ -61,6 +61,9 @@ export const videoRender = (
   const icon = document.createElement("div");
   icon.innerHTML = FILE_VIDEO_ICON_SVG;
 
+  const videoWrapper = document.createElement("div");
+  videoWrapper.className = "bn-visual-media-wrapper";
+
   const video = document.createElement("video");
   video.className = "bn-visual-media";
   video.src = block.props.url;
@@ -72,20 +75,23 @@ export const videoRender = (
   video.draggable = false;
   video.width = block.props.previewWidth;
 
-  const file = createResizeHandlesWrapper(
+  videoWrapper.appendChild(video);
+
+  const fileAndCaptionWrapper = createFileAndCaptionWrapper(
+    block,
+    videoWrapper
+  );
+  const resizeHandlesWrapper = createResizeHandlesWrapper(
     block,
     editor,
-    video,
-    () => video.width,
-    (width) => (video.width = width)
+    fileAndCaptionWrapper.dom,
+    videoWrapper
   );
 
-  const element = createFileAndCaptionWrapper(block, file.dom);
-
   return createFileBlockWrapper(
     block,
     editor,
-    element,
+    resizeHandlesWrapper,
     editor.dictionary.file_blocks.video.add_button_text,
     icon.firstElementChild as HTMLElement
   );
diff --git a/packages/core/src/editor/Block.css b/packages/core/src/editor/Block.css
index 5cc3e2cccf..4651bb0c3a 100644
--- a/packages/core/src/editor/Block.css
+++ b/packages/core/src/editor/Block.css
@@ -321,6 +321,7 @@ NESTED BLOCKS
   display: flex;
   flex-direction: column;
   justify-content: stretch;
+  max-width: 100%;
   user-select: none;
 }
 
@@ -353,6 +354,7 @@ NESTED BLOCKS
   display: flex;
   flex-direction: column;
   border-radius: 4px;
+  width: 100%;
 }
 
 [data-file-block] .bn-file-default-preview {
@@ -375,20 +377,25 @@ NESTED BLOCKS
   height: 24px;
 }
 
+[data-file-block] .bn-resize-handles-wrapper {
+  position: relative;
+  max-width: 100%;
+}
+
 [data-file-block] .bn-visual-media-wrapper {
   display: flex;
   flex-direction: row;
   align-items: center;
   position: relative;
-  width: fit-content;
+  width: 100%;
 }
 
 [data-file-block] .bn-visual-media {
   border-radius: 4px;
-  max-width: 100%;
+  width: 100%;
 }
 
-[data-file-block] .bn-visual-media-resize-handle {
+[data-file-block] .bn-resize-handle {
   position: absolute;
   width: 8px;
   height: 30px;
diff --git a/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx b/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx
index 00827159a6..c9ccf0a2a1 100644
--- a/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx
+++ b/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";
@@ -22,17 +23,19 @@ export const AudioPreview = (
   const resolved = useResolveUrl(props.block.props.url!);
 
   return (
-    <audio
-      className={"bn-audio"}
-      src={
-        resolved.loadingState === "loading"
-          ? props.block.props.url
-          : resolved.downloadUrl
-      }
-      controls={true}
-      contentEditable={false}
-      draggable={false}
-    />
+    <FileAndCaptionWrapper {...props}>
+      <audio
+        className={"bn-audio"}
+        src={
+          resolved.loadingState === "loading"
+            ? props.block.props.url
+            : resolved.downloadUrl
+        }
+        controls={true}
+        contentEditable={false}
+        draggable={false}
+      />
+    </FileAndCaptionWrapper>
   );
 };
 
diff --git a/packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx b/packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx
index da59ad2e01..3c5b4cf7f8 100644
--- a/packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx
+++ b/packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx
@@ -1,4 +1,4 @@
-import { fileBlockConfig, fileParse } from "@blocknote/core";
+import { FileBlockConfig, fileBlockConfig, fileParse } from "@blocknote/core";
 
 import {
   createReactBlockSpec,
@@ -6,10 +6,22 @@ import {
 } 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>
   );
 };
diff --git a/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx b/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
index 47717dcce1..eacd9daeb2 100644
--- a/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
+++ b/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
@@ -1,5 +1,13 @@
 import { FileBlockConfig } from "@blocknote/core";
-import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { RiFile2Line } from "react-icons/ri";
 
 import { useUploadLoading } from "../../hooks/useUploadLoading.js";
@@ -30,9 +38,7 @@ export const FileBlockWrapper = (
           />
         </FileAndCaptionWrapper>
       ) : (
-        <FileAndCaptionWrapper block={props.block} editor={props.editor as any}>
-          {props.children}
-        </FileAndCaptionWrapper>
+        props.children
       )}
     </div>
   );
@@ -66,9 +72,7 @@ export const FileAndCaptionWrapper = (
   return (
     <div className={"bn-file-and-caption-wrapper"}>
       {props.children}
-      {props.block.props.caption && (
-        <p className={"bn-file-caption"}>{props.block.props.caption}</p>
-      )}
+      <p className={"bn-file-caption"}>{props.block.props.caption}</p>
     </div>
   );
 };
@@ -138,15 +142,26 @@ export const FigureWithCaption = (props: {
   </figure>
 );
 
+const ResizeHandlesContext = createContext<{
+  show: boolean;
+  leftResizeHandleMouseDownHandler: (event: React.MouseEvent) => void;
+  rightResizeHandleMouseDownHandler: (event: React.MouseEvent) => void;
+}>({
+  show: false,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  leftResizeHandleMouseDownHandler: () => {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  rightResizeHandleMouseDownHandler: () => {},
+});
+
 export const ResizeHandlesWrapper = (
   props: Required<
     Omit<ReactCustomBlockRenderProps<FileBlockConfig, any, any>, "contentRef">
   > & {
-    width: number;
-    setWidth: (width: number) => void;
     children: ReactNode;
   }
 ) => {
+  const [width, setWidth] = useState(props.block.props.previewWidth! as number);
   const [childHovered, setChildHovered] = useState<boolean>(false);
   const [resizeParams, setResizeParams] = useState<
     | {
@@ -195,9 +210,9 @@ export const ResizeHandlesWrapper = (
       // Ensures the child is not wider than the editor and not smaller than a
       // predetermined minimum width.
       if (newWidth < minWidth) {
-        props.setWidth(minWidth);
+        setWidth(minWidth);
       } else {
-        props.setWidth(newWidth);
+        setWidth(newWidth);
       }
     };
     // Stops mouse movements from resizing the child and updates the block's
@@ -207,7 +222,7 @@ export const ResizeHandlesWrapper = (
 
       (props.editor as any).updateBlock(props.block, {
         props: {
-          previewWidth: props.width,
+          previewWidth: width,
         },
       });
     };
@@ -221,7 +236,7 @@ export const ResizeHandlesWrapper = (
       window.removeEventListener("mousemove", windowMouseMoveHandler);
       window.removeEventListener("mouseup", windowMouseUpHandler);
     };
-  }, [props, resizeParams]);
+  }, [props, resizeParams, width]);
 
   // Shows the resize handles when hovering over the child with the cursor.
   const childWrapperMouseEnterHandler = useCallback(() => {
@@ -265,25 +280,46 @@ export const ResizeHandlesWrapper = (
 
   return (
     <div
-      className={"bn-visual-media-wrapper"}
+      className={"bn-resize-handles-wrapper"}
       onMouseEnter={childWrapperMouseEnterHandler}
       onMouseLeave={childWrapperMouseLeaveHandler}
+      style={{ width: `${width}px` }}
       ref={ref}>
-      {props.children}
-      {(childHovered || resizeParams) && (
-        <>
-          <div
-            className={"bn-visual-media-resize-handle"}
-            style={{ left: "4px" }}
-            onMouseDown={leftResizeHandleMouseDownHandler}
-          />
-          <div
-            className={"bn-visual-media-resize-handle"}
-            style={{ right: "4px" }}
-            onMouseDown={rightResizeHandleMouseDownHandler}
-          />
-        </>
-      )}
+      <ResizeHandlesContext.Provider
+        value={{
+          show: !!(childHovered || resizeParams),
+          leftResizeHandleMouseDownHandler,
+          rightResizeHandleMouseDownHandler,
+        }}>
+        {props.children}
+      </ResizeHandlesContext.Provider>
     </div>
   );
 };
+
+export const ResizeHandles = () => {
+  const {
+    show,
+    leftResizeHandleMouseDownHandler,
+    rightResizeHandleMouseDownHandler,
+  } = useContext(ResizeHandlesContext);
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <>
+      <div
+        className={"bn-resize-handle"}
+        style={{ left: "4px" }}
+        onMouseDown={leftResizeHandleMouseDownHandler}
+      />
+      <div
+        className={"bn-resize-handle"}
+        style={{ right: "4px" }}
+        onMouseDown={rightResizeHandleMouseDownHandler}
+      />
+    </>
+  );
+};
diff --git a/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx b/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
index 399e538652..53b9866e2e 100644
--- a/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
+++ b/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
@@ -1,5 +1,5 @@
 import { FileBlockConfig, imageBlockConfig, imageParse } from "@blocknote/core";
-import { useRef, useState } from "react";
+import { useRef } from "react";
 import { RiImage2Fill } from "react-icons/ri";
 
 import {
@@ -8,8 +8,10 @@ import {
 } from "../../schema/ReactBlockSpec.js";
 import {
   FigureWithCaption,
+  FileAndCaptionWrapper,
   FileBlockWrapper,
   LinkWithCaption,
+  ResizeHandles,
   ResizeHandlesWrapper,
 } from "../FileBlockContent/fileBlockHelpers.js";
 import { useResolveUrl } from "../FileBlockContent/useResolveUrl.js";
@@ -22,25 +24,27 @@ export const ImagePreview = (
 ) => {
   const imgRef = useRef<HTMLImageElement>(null);
 
-  const [width, setWidth] = useState<number>(props.block.props.previewWidth!);
-
   const resolved = useResolveUrl(props.block.props.url!);
 
   return (
-    <ResizeHandlesWrapper {...props} width={width} setWidth={setWidth}>
-      <img
-        className={"bn-visual-media"}
-        src={
-          resolved.loadingState === "loading"
-            ? props.block.props.url
-            : resolved.downloadUrl
-        }
-        alt={props.block.props.caption || "BlockNote image"}
-        contentEditable={false}
-        draggable={false}
-        width={width}
-        ref={imgRef}
-      />
+    <ResizeHandlesWrapper {...props}>
+      <FileAndCaptionWrapper {...props}>
+        <div className={"bn-visual-media-wrapper"}>
+          <img
+            className={"bn-visual-media"}
+            src={
+              resolved.loadingState === "loading"
+                ? props.block.props.url
+                : resolved.downloadUrl
+            }
+            alt={props.block.props.caption || "BlockNote image"}
+            contentEditable={false}
+            draggable={false}
+            ref={imgRef}
+          />
+          <ResizeHandles />
+        </div>
+      </FileAndCaptionWrapper>
     </ResizeHandlesWrapper>
   );
 };
diff --git a/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx b/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
index ef96609124..da12acdf49 100644
--- a/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
+++ b/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
@@ -1,5 +1,5 @@
 import { FileBlockConfig, videoBlockConfig, videoParse } from "@blocknote/core";
-import { useRef, useState } from "react";
+import { useRef } from "react";
 import { RiVideoFill } from "react-icons/ri";
 
 import {
@@ -8,8 +8,10 @@ import {
 } from "../../schema/ReactBlockSpec.js";
 import {
   FigureWithCaption,
+  FileAndCaptionWrapper,
   FileBlockWrapper,
   LinkWithCaption,
+  ResizeHandles,
   ResizeHandlesWrapper,
 } from "../FileBlockContent/fileBlockHelpers.js";
 import { useResolveUrl } from "../FileBlockContent/useResolveUrl.js";
@@ -22,25 +24,27 @@ export const VideoPreview = (
 ) => {
   const videoRef = useRef<HTMLVideoElement>(null);
 
-  const [width, setWidth] = useState<number>(props.block.props.previewWidth!);
-
   const resolved = useResolveUrl(props.block.props.url!);
 
   return (
-    <ResizeHandlesWrapper {...props} width={width} setWidth={setWidth}>
-      <video
-        className={"bn-visual-media"}
-        src={
-          resolved.loadingState === "loading"
-            ? props.block.props.url
-            : resolved.downloadUrl
-        }
-        controls={true}
-        contentEditable={false}
-        draggable={false}
-        width={width}
-        ref={videoRef}
-      />
+    <ResizeHandlesWrapper {...props}>
+      <FileAndCaptionWrapper {...props}>
+        <div className={"bn-visual-media-wrapper"}>
+          <video
+            className={"bn-visual-media"}
+            src={
+              resolved.loadingState === "loading"
+                ? props.block.props.url
+                : resolved.downloadUrl
+            }
+            controls={true}
+            contentEditable={false}
+            draggable={false}
+            ref={videoRef}
+          />
+          <ResizeHandles />
+        </div>
+      </FileAndCaptionWrapper>
     </ResizeHandlesWrapper>
   );
 };

From 9e603a9a564a88af21bae38e6a8eebbb37f899b4 Mon Sep 17 00:00:00 2001
From: matthewlipski <matthewlipski@gmail.com>
Date: Fri, 6 Dec 2024 12:56:06 +0100
Subject: [PATCH 05/18] Cleaned up React DOM structure

---
 .../AudioBlockContent/AudioBlockContent.tsx   |  25 +-
 .../FileBlockContent/FileBlockContent.tsx     |  16 +-
 .../FileBlockContent/fileBlockHelpers.tsx     | 214 ++++++++++--------
 .../ImageBlockContent/ImageBlockContent.tsx   |  42 ++--
 .../VideoBlockContent/VideoBlockContent.tsx   |  42 ++--
 5 files changed, 171 insertions(+), 168 deletions(-)

diff --git a/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx b/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx
index c9ccf0a2a1..00827159a6 100644
--- a/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx
+++ b/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx
@@ -8,7 +8,6 @@ import {
 } from "../../schema/ReactBlockSpec.js";
 import {
   FigureWithCaption,
-  FileAndCaptionWrapper,
   FileBlockWrapper,
   LinkWithCaption,
 } from "../FileBlockContent/fileBlockHelpers.js";
@@ -23,19 +22,17 @@ export const AudioPreview = (
   const resolved = useResolveUrl(props.block.props.url!);
 
   return (
-    <FileAndCaptionWrapper {...props}>
-      <audio
-        className={"bn-audio"}
-        src={
-          resolved.loadingState === "loading"
-            ? props.block.props.url
-            : resolved.downloadUrl
-        }
-        controls={true}
-        contentEditable={false}
-        draggable={false}
-      />
-    </FileAndCaptionWrapper>
+    <audio
+      className={"bn-audio"}
+      src={
+        resolved.loadingState === "loading"
+          ? props.block.props.url
+          : resolved.downloadUrl
+      }
+      controls={true}
+      contentEditable={false}
+      draggable={false}
+    />
   );
 };
 
diff --git a/packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx b/packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx
index 3c5b4cf7f8..62f97d32bc 100644
--- a/packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx
+++ b/packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx
@@ -1,4 +1,4 @@
-import { FileBlockConfig, fileBlockConfig, fileParse } from "@blocknote/core";
+import { fileBlockConfig, fileParse } from "@blocknote/core";
 
 import {
   createReactBlockSpec,
@@ -6,22 +6,10 @@ import {
 } 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>,
@@ -54,7 +42,7 @@ export const FileBlock = (
 ) => {
   return (
     <FileBlockWrapper {...(props as any)}>
-      <FilePreview {...(props as any)} />
+      <DefaultFilePreview {...(props as any)} />
     </FileBlockWrapper>
   );
 };
diff --git a/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx b/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
index eacd9daeb2..73d6761966 100644
--- a/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
+++ b/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
@@ -1,6 +1,8 @@
 import { FileBlockConfig } from "@blocknote/core";
 import {
+  ComponentPropsWithoutRef,
   createContext,
+  forwardRef,
   ReactNode,
   useCallback,
   useContext,
@@ -14,69 +16,6 @@ import { useUploadLoading } from "../../hooks/useUploadLoading.js";
 import { useDictionary } from "../../i18n/dictionary.js";
 import { ReactCustomBlockRenderProps } from "../../schema/ReactBlockSpec.js";
 
-export const FileBlockWrapper = (
-  props: Omit<
-    ReactCustomBlockRenderProps<FileBlockConfig, any, any>,
-    "contentRef"
-  > & { buttonText?: string; buttonIcon?: ReactNode; children: ReactNode }
-) => {
-  const showLoader = useUploadLoading(props.block.id);
-
-  if (showLoader) {
-    return <div className={"bn-file-loading-preview"}>Loading...</div>;
-  }
-
-  return (
-    <div className={"bn-file-block-content-wrapper"}>
-      {props.block.props.url === "" ? (
-        <AddFileButton {...props} />
-      ) : props.block.props.showPreview === false ? (
-        <FileAndCaptionWrapper block={props.block} editor={props.editor as any}>
-          <DefaultFilePreview
-            block={props.block}
-            editor={props.editor as any}
-          />
-        </FileAndCaptionWrapper>
-      ) : (
-        props.children
-      )}
-    </div>
-  );
-};
-
-export const DefaultFilePreview = (
-  props: Omit<
-    ReactCustomBlockRenderProps<FileBlockConfig, any, any>,
-    "contentRef"
-  >
-) => (
-  <div
-    className={"bn-file-default-preview"}
-    contentEditable={false}
-    draggable={false}>
-    <div className={"bn-file-default-preview-icon"}>
-      <RiFile2Line size={24} />
-    </div>
-    <p className={"bn-file-default-preview-name"}>{props.block.props.name}</p>
-  </div>
-);
-
-export const FileAndCaptionWrapper = (
-  props: Omit<
-    ReactCustomBlockRenderProps<FileBlockConfig, any, any>,
-    "contentRef"
-  > & {
-    children: ReactNode;
-  }
-) => {
-  return (
-    <div className={"bn-file-and-caption-wrapper"}>
-      {props.children}
-      <p className={"bn-file-caption"}>{props.block.props.caption}</p>
-    </div>
-  );
-};
-
 export const AddFileButton = (
   props: Omit<
     ReactCustomBlockRenderProps<FileBlockConfig, any, any>,
@@ -122,25 +61,69 @@ export const AddFileButton = (
   );
 };
 
-export const LinkWithCaption = (props: {
-  caption: string;
-  children: ReactNode;
-}) => (
-  <div>
-    {props.children}
-    <p>{props.caption}</p>
+export const DefaultFilePreview = (
+  props: Omit<
+    ReactCustomBlockRenderProps<FileBlockConfig, any, any>,
+    "contentRef"
+  >
+) => (
+  <div
+    className={"bn-file-default-preview"}
+    contentEditable={false}
+    draggable={false}>
+    <div className={"bn-file-default-preview-icon"}>
+      <RiFile2Line size={24} />
+    </div>
+    <p className={"bn-file-default-preview-name"}>{props.block.props.name}</p>
   </div>
 );
 
-export const FigureWithCaption = (props: {
-  caption: string;
-  children: ReactNode;
-}) => (
-  <figure>
-    {props.children}
-    <figcaption>{props.caption}</figcaption>
-  </figure>
-);
+export const FileCaption = (
+  props: Omit<
+    ReactCustomBlockRenderProps<FileBlockConfig, any, any>,
+    "contentRef"
+  >
+) => {
+  return props.block.props.caption ? (
+    <p className={"bn-file-caption"}>{props.block.props.caption}</p>
+  ) : null;
+};
+
+export const FileBlockWrapper = forwardRef<
+  HTMLDivElement,
+  Omit<ReactCustomBlockRenderProps<FileBlockConfig, any, any>, "contentRef"> &
+    ComponentPropsWithoutRef<"div"> & {
+      buttonText?: string;
+      buttonIcon?: ReactNode;
+      children: ReactNode;
+    }
+>((props, ref) => {
+  const showLoader = useUploadLoading(props.block.id);
+
+  return (
+    <div className={"bn-file-block-content-wrapper"} ref={ref}>
+      {props.block.props.url === "" ? (
+        // Show the add file button if the file has not been uploaded yet.
+        <AddFileButton {...props} />
+      ) : showLoader ? (
+        // Show loader while a file is being uploaded.
+        <div className={"bn-file-loading-preview"}>Loading...</div>
+      ) : (
+        // Show the file preview and caption if the file has been uploaded.
+        <>
+          {props.block.props.showPreview === false ? (
+            // Use default preview.
+            <DefaultFilePreview {...props} />
+          ) : (
+            // Use custom preview.
+            props.children
+          )}
+          <FileCaption {...props} />
+        </>
+      )}
+    </div>
+  );
+});
 
 const ResizeHandlesContext = createContext<{
   show: boolean;
@@ -154,10 +137,13 @@ const ResizeHandlesContext = createContext<{
   rightResizeHandleMouseDownHandler: () => {},
 });
 
-export const ResizeHandlesWrapper = (
-  props: Required<
-    Omit<ReactCustomBlockRenderProps<FileBlockConfig, any, any>, "contentRef">
+export const ResizableFileBlockWrapper = (
+  props: Omit<
+    ReactCustomBlockRenderProps<FileBlockConfig, any, any>,
+    "contentRef"
   > & {
+    buttonText?: string;
+    buttonIcon?: ReactNode;
     children: ReactNode;
   }
 ) => {
@@ -278,21 +264,45 @@ export const ResizeHandlesWrapper = (
     []
   );
 
+  const showLoader = useUploadLoading(props.block.id);
+
   return (
     <div
-      className={"bn-resize-handles-wrapper"}
+      className={"bn-file-block-content-wrapper"}
       onMouseEnter={childWrapperMouseEnterHandler}
       onMouseLeave={childWrapperMouseLeaveHandler}
-      style={{ width: `${width}px` }}
+      style={
+        props.block.props.url && !showLoader && props.block.props.showPreview
+          ? { width: `${width}px` }
+          : undefined
+      }
       ref={ref}>
-      <ResizeHandlesContext.Provider
-        value={{
-          show: !!(childHovered || resizeParams),
-          leftResizeHandleMouseDownHandler,
-          rightResizeHandleMouseDownHandler,
-        }}>
-        {props.children}
-      </ResizeHandlesContext.Provider>
+      {props.block.props.url === "" ? (
+        // Show the add file button if the file has not been uploaded yet.
+        <AddFileButton {...props} />
+      ) : showLoader ? (
+        // Show loader while a file is being uploaded.
+        <div className={"bn-file-loading-preview"}>Loading...</div>
+      ) : (
+        // Show the file preview and caption if the file has been uploaded.
+        <>
+          {props.block.props.showPreview === false ? (
+            // Use default preview.
+            <DefaultFilePreview {...props} />
+          ) : (
+            // Use custom preview.
+            <ResizeHandlesContext.Provider
+              value={{
+                show: !!(childHovered || resizeParams),
+                leftResizeHandleMouseDownHandler,
+                rightResizeHandleMouseDownHandler,
+              }}>
+              {props.children}
+            </ResizeHandlesContext.Provider>
+          )}
+          <FileCaption {...props} />
+        </>
+      )}
     </div>
   );
 };
@@ -323,3 +333,23 @@ export const ResizeHandles = () => {
     </>
   );
 };
+
+export const LinkWithCaption = (props: {
+  caption: string;
+  children: ReactNode;
+}) => (
+  <div>
+    {props.children}
+    <p>{props.caption}</p>
+  </div>
+);
+
+export const FigureWithCaption = (props: {
+  caption: string;
+  children: ReactNode;
+}) => (
+  <figure>
+    {props.children}
+    <figcaption>{props.caption}</figcaption>
+  </figure>
+);
diff --git a/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx b/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
index 53b9866e2e..182de6a469 100644
--- a/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
+++ b/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
@@ -8,11 +8,9 @@ import {
 } from "../../schema/ReactBlockSpec.js";
 import {
   FigureWithCaption,
-  FileAndCaptionWrapper,
-  FileBlockWrapper,
   LinkWithCaption,
+  ResizableFileBlockWrapper,
   ResizeHandles,
-  ResizeHandlesWrapper,
 } from "../FileBlockContent/fileBlockHelpers.js";
 import { useResolveUrl } from "../FileBlockContent/useResolveUrl.js";
 
@@ -27,25 +25,21 @@ export const ImagePreview = (
   const resolved = useResolveUrl(props.block.props.url!);
 
   return (
-    <ResizeHandlesWrapper {...props}>
-      <FileAndCaptionWrapper {...props}>
-        <div className={"bn-visual-media-wrapper"}>
-          <img
-            className={"bn-visual-media"}
-            src={
-              resolved.loadingState === "loading"
-                ? props.block.props.url
-                : resolved.downloadUrl
-            }
-            alt={props.block.props.caption || "BlockNote image"}
-            contentEditable={false}
-            draggable={false}
-            ref={imgRef}
-          />
-          <ResizeHandles />
-        </div>
-      </FileAndCaptionWrapper>
-    </ResizeHandlesWrapper>
+    <div className={"bn-visual-media-wrapper"}>
+      <img
+        className={"bn-visual-media"}
+        src={
+          resolved.loadingState === "loading"
+            ? props.block.props.url
+            : resolved.downloadUrl
+        }
+        alt={props.block.props.caption || "BlockNote image"}
+        contentEditable={false}
+        draggable={false}
+        ref={imgRef}
+      />
+      <ResizeHandles />
+    </div>
   );
 };
 
@@ -92,12 +86,12 @@ export const ImageBlock = (
   props: ReactCustomBlockRenderProps<typeof imageBlockConfig, any, any>
 ) => {
   return (
-    <FileBlockWrapper
+    <ResizableFileBlockWrapper
       {...(props as any)}
       buttonText={props.editor.dictionary.file_blocks.image.add_button_text}
       buttonIcon={<RiImage2Fill size={24} />}>
       <ImagePreview block={props.block} editor={props.editor as any} />
-    </FileBlockWrapper>
+    </ResizableFileBlockWrapper>
   );
 };
 
diff --git a/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx b/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
index da12acdf49..fa535ef853 100644
--- a/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
+++ b/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
@@ -8,11 +8,9 @@ import {
 } from "../../schema/ReactBlockSpec.js";
 import {
   FigureWithCaption,
-  FileAndCaptionWrapper,
-  FileBlockWrapper,
   LinkWithCaption,
+  ResizableFileBlockWrapper,
   ResizeHandles,
-  ResizeHandlesWrapper,
 } from "../FileBlockContent/fileBlockHelpers.js";
 import { useResolveUrl } from "../FileBlockContent/useResolveUrl.js";
 
@@ -27,25 +25,21 @@ export const VideoPreview = (
   const resolved = useResolveUrl(props.block.props.url!);
 
   return (
-    <ResizeHandlesWrapper {...props}>
-      <FileAndCaptionWrapper {...props}>
-        <div className={"bn-visual-media-wrapper"}>
-          <video
-            className={"bn-visual-media"}
-            src={
-              resolved.loadingState === "loading"
-                ? props.block.props.url
-                : resolved.downloadUrl
-            }
-            controls={true}
-            contentEditable={false}
-            draggable={false}
-            ref={videoRef}
-          />
-          <ResizeHandles />
-        </div>
-      </FileAndCaptionWrapper>
-    </ResizeHandlesWrapper>
+    <div className={"bn-visual-media-wrapper"}>
+      <video
+        className={"bn-visual-media"}
+        src={
+          resolved.loadingState === "loading"
+            ? props.block.props.url
+            : resolved.downloadUrl
+        }
+        controls={true}
+        contentEditable={false}
+        draggable={false}
+        ref={videoRef}
+      />
+      <ResizeHandles />
+    </div>
   );
 };
 
@@ -86,12 +80,12 @@ export const VideoBlock = (
   props: ReactCustomBlockRenderProps<typeof videoBlockConfig, any, any>
 ) => {
   return (
-    <FileBlockWrapper
+    <ResizableFileBlockWrapper
       {...(props as any)}
       buttonText={props.editor.dictionary.file_blocks.video.add_button_text}
       buttonIcon={<RiVideoFill size={24} />}>
       <VideoPreview block={props.block} editor={props.editor as any} />
-    </FileBlockWrapper>
+    </ResizableFileBlockWrapper>
   );
 };
 

From a8051e97240652ace853a12eda8c551114fdb93a Mon Sep 17 00:00:00 2001
From: matthewlipski <matthewlipski@gmail.com>
Date: Fri, 6 Dec 2024 15:12:02 +0100
Subject: [PATCH 06/18] Cleaned up vanilla DOM structure

---
 .../AudioBlockContent/AudioBlockContent.ts    |   5 +-
 .../FileBlockContent/FileBlockContent.ts      |   8 +-
 .../FileBlockContent/fileBlockHelpers.ts      | 332 ++++++++----------
 .../ImageBlockContent/ImageBlockContent.ts    |  21 +-
 .../VideoBlockContent/VideoBlockContent.ts    |  21 +-
 5 files changed, 166 insertions(+), 221 deletions(-)

diff --git a/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts b/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts
index c60c29ebe5..03e1ad57e1 100644
--- a/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts
+++ b/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts
@@ -10,7 +10,6 @@ import { defaultProps } from "../defaultProps.js";
 
 import {
   createFigureWithCaption,
-  createFileAndCaptionWrapper,
   createFileBlockWrapper,
   createLinkWithCaption,
   parseFigureElement,
@@ -65,12 +64,10 @@ export const audioRender = (
   audio.contentEditable = "false";
   audio.draggable = false;
 
-  const fileAndCaptionWrapper = createFileAndCaptionWrapper(block, audio);
-
   return createFileBlockWrapper(
     block,
     editor,
-    fileAndCaptionWrapper,
+    { dom: audio },
     editor.dictionary.file_blocks.audio.add_button_text,
     icon.firstElementChild as HTMLElement
   );
diff --git a/packages/core/src/blocks/FileBlockContent/FileBlockContent.ts b/packages/core/src/blocks/FileBlockContent/FileBlockContent.ts
index ba9a4d95af..ffed617356 100644
--- a/packages/core/src/blocks/FileBlockContent/FileBlockContent.ts
+++ b/packages/core/src/blocks/FileBlockContent/FileBlockContent.ts
@@ -7,8 +7,6 @@ import {
 } from "../../schema/index.js";
 import { defaultProps } from "../defaultProps.js";
 import {
-  createDefaultFilePreview,
-  createFileAndCaptionWrapper,
   createFileBlockWrapper,
   createLinkWithCaption,
   parseEmbedElement,
@@ -42,11 +40,7 @@ export const fileRender = (
   block: BlockFromConfig<typeof fileBlockConfig, any, any>,
   editor: BlockNoteEditor<any, any, any>
 ) => {
-  const file = createDefaultFilePreview(block).dom;
-
-  const fileAndCaptionWrapper = createFileAndCaptionWrapper(block, file);
-
-  return createFileBlockWrapper(block, editor, fileAndCaptionWrapper);
+  return createFileBlockWrapper(block, editor);
 };
 
 export const fileParse = (element: HTMLElement) => {
diff --git a/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts b/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts
index c60d759a72..ae1227e329 100644
--- a/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts
+++ b/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts
@@ -6,117 +6,7 @@ import {
 } 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 createFileBlockWrapper = (
-  block: BlockFromConfig<FileBlockConfig, any, any>,
-  editor: BlockNoteEditor<
-    BlockSchemaWithBlock<FileBlockConfig["type"], FileBlockConfig>,
-    any,
-    any
-  >,
-  // TODO: Maybe make optional for default preview
-  element: { dom: HTMLElement; destroy?: () => void },
-  buttonText?: string,
-  buttonIcon?: HTMLElement
-) => {
-  const wrapper = document.createElement("div");
-  wrapper.className = "bn-file-block-content-wrapper";
-
-  if (block.props.url === "") {
-    const addFileButton = createAddFileButton(
-      block,
-      editor,
-      buttonText,
-      buttonIcon
-    );
-    wrapper.appendChild(addFileButton.dom);
-
-    const loading = document.createElement("div");
-    loading.className = "bn-file-loading-preview";
-    loading.textContent = "Loading...";
-
-    const destroyUploadStartHandler = editor.onUploadStart((blockId) => {
-      if (blockId === block.id) {
-        wrapper.removeChild(addFileButton.dom);
-        wrapper.appendChild(loading);
-      }
-    });
-    const destroyUploadEndHandler = editor.onUploadEnd((blockId) => {
-      if (blockId === block.id) {
-        wrapper.removeChild(loading);
-        wrapper.appendChild(addFileButton.dom);
-      }
-    });
-
-    return {
-      dom: wrapper,
-      destroy: () => {
-        addFileButton.destroy?.();
-        destroyUploadStartHandler();
-        destroyUploadEndHandler();
-      },
-    };
-  } else if (block.props.showPreview === false) {
-    // TODO: Not using the wrapper element here?
-    const file = createDefaultFilePreview(block).dom;
-    const element = createFileAndCaptionWrapper(block, file);
-
-    return {
-      dom: element.dom,
-    };
-  } else {
-    wrapper.appendChild(element.dom);
-
-    return {
-      dom: wrapper,
-      destroy: element.destroy,
-    };
-  }
-};
-
-// Default file preview, displaying a file icon and file name.
-export const createDefaultFilePreview = (
-  block: BlockFromConfig<FileBlockConfig, any, any>
-): { dom: HTMLElement; destroy?: () => void } => {
-  const file = document.createElement("div");
-  file.className = "bn-file-default-preview";
-
-  const icon = document.createElement("div");
-  icon.className = "bn-file-default-preview-icon";
-  icon.innerHTML = FILE_ICON_SVG;
-
-  const fileName = document.createElement("p");
-  fileName.className = "bn-file-default-preview-name";
-  fileName.textContent = block.props.name || "";
-
-  file.appendChild(icon);
-  file.appendChild(fileName);
-
-  return {
-    dom: file,
-  };
-};
-
-// Wrapper element containing file preview and caption.
-export const createFileAndCaptionWrapper = (
-  block: BlockFromConfig<FileBlockConfig, any, any>,
-  file: HTMLElement
-) => {
-  const fileAndCaptionWrapper = document.createElement("div");
-  fileAndCaptionWrapper.className = "bn-file-and-caption-wrapper";
 
-  const caption = document.createElement("p");
-  caption.className = "bn-file-caption";
-  caption.textContent = block.props.caption;
-
-  fileAndCaptionWrapper.appendChild(file);
-  fileAndCaptionWrapper.appendChild(caption);
-
-  return {
-    dom: fileAndCaptionWrapper,
-  };
-};
-
-// Button element that acts as a placeholder for files with no src.
 export const createAddFileButton = (
   block: BlockFromConfig<FileBlockConfig, any, any>,
   editor: BlockNoteEditor<any, any, any>,
@@ -134,11 +24,13 @@ export const createAddFileButton = (
     addFileButtonIcon.innerHTML =
       '<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>';
   }
+  addFileButton.appendChild(addFileButtonIcon);
 
   const addFileButtonText = document.createElement("p");
   addFileButtonText.className = "bn-add-file-button-text";
   addFileButtonText.innerHTML =
     buttonText || editor.dictionary.file_blocks.file.add_button_text;
+  addFileButton.appendChild(addFileButtonText);
 
   // Prevents focus from moving to the button.
   const addFileButtonMouseDownHandler = (event: MouseEvent) => {
@@ -152,10 +44,6 @@ export const createAddFileButton = (
       })
     );
   };
-
-  addFileButton.appendChild(addFileButtonIcon);
-  addFileButton.appendChild(addFileButtonText);
-
   addFileButton.addEventListener(
     "mousedown",
     addFileButtonMouseDownHandler,
@@ -180,86 +68,122 @@ export const createAddFileButton = (
   };
 };
 
-export const parseEmbedElement = (embedElement: HTMLEmbedElement) => {
-  const url = embedElement.src || undefined;
-
-  return { url };
-};
+export const createDefaultFilePreview = (
+  block: BlockFromConfig<FileBlockConfig, any, any>
+): { dom: HTMLElement; destroy?: () => void } => {
+  const file = document.createElement("div");
+  file.className = "bn-file-default-preview";
 
-export const parseFigureElement = (
-  figureElement: HTMLElement,
-  targetTag: string
-) => {
-  const targetElement = figureElement.querySelector(
-    targetTag
-  ) as HTMLElement | null;
-  if (!targetElement) {
-    return undefined;
-  }
+  const icon = document.createElement("div");
+  icon.className = "bn-file-default-preview-icon";
+  icon.innerHTML = FILE_ICON_SVG;
+  file.appendChild(icon);
 
-  const captionElement = figureElement.querySelector("figcaption");
-  const caption = captionElement?.textContent ?? undefined;
+  const fileName = document.createElement("p");
+  fileName.className = "bn-file-default-preview-name";
+  fileName.textContent = block.props.name;
+  file.appendChild(fileName);
 
-  return { targetElement, caption };
+  return {
+    dom: file,
+  };
 };
 
-// Wrapper figure element to display file link with caption. Used for external
-// HTML
-export const createLinkWithCaption = (
-  element: HTMLElement,
-  caption: string
+export const createFileBlockWrapper = (
+  block: BlockFromConfig<FileBlockConfig, any, any>,
+  editor: BlockNoteEditor<
+    BlockSchemaWithBlock<FileBlockConfig["type"], FileBlockConfig>,
+    any,
+    any
+  >,
+  element?: { dom: HTMLElement; destroy?: () => void },
+  buttonText?: string,
+  buttonIcon?: HTMLElement
 ) => {
   const wrapper = document.createElement("div");
-  const fileCaption = document.createElement("p");
-  fileCaption.textContent = caption;
+  wrapper.className = "bn-file-block-content-wrapper";
 
-  wrapper.appendChild(element);
-  wrapper.appendChild(fileCaption);
+  const loading = document.createElement("div");
+  loading.className = "bn-file-loading-preview";
+  loading.textContent = "Loading...";
 
-  return {
-    dom: wrapper,
-  };
-};
+  const addFileButton = createAddFileButton(
+    block,
+    editor,
+    buttonText,
+    buttonIcon
+  );
 
-// Wrapper figure element to display file preview with caption. Used for
-// external HTML.
-export const createFigureWithCaption = (
-  element: HTMLElement,
-  caption: string
-) => {
-  const figure = document.createElement("figure");
-  const captionElement = document.createElement("figcaption");
-  captionElement.textContent = caption;
+  const defaultFilePreview = createDefaultFilePreview(block);
 
-  figure.appendChild(element);
-  figure.appendChild(captionElement);
+  const caption = document.createElement("p");
+  caption.className = "bn-file-caption";
+  caption.textContent = block.props.caption;
 
-  return { dom: figure };
+  const destroyUploadStartHandler = editor.onUploadStart((blockId) => {
+    if (blockId === block.id) {
+      wrapper.removeChild(addFileButton.dom);
+      wrapper.appendChild(loading);
+    }
+  });
+  const destroyUploadEndHandler = editor.onUploadEnd((blockId) => {
+    if (blockId === block.id) {
+      wrapper.removeChild(loading);
+      wrapper.appendChild(element ? element.dom : defaultFilePreview.dom);
+    }
+  });
+
+  if (block.props.url === "") {
+    // Show the add file button if the file has not been uploaded yet.
+    wrapper.appendChild(addFileButton.dom);
+  } else {
+    // Show the file preview and caption if the file has been uploaded.
+    if (block.props.showPreview === false || !element) {
+      // Use default preview.
+      wrapper.appendChild(defaultFilePreview.dom);
+    } else {
+      // Use custom preview.
+      wrapper.appendChild(element.dom);
+    }
+    if (block.props.caption) {
+      // Show the caption if there is one.
+      wrapper.appendChild(caption);
+    }
+  }
+
+  return {
+    dom: wrapper,
+    destroy: () => {
+      destroyUploadStartHandler();
+      destroyUploadEndHandler();
+      addFileButton.destroy();
+      defaultFilePreview.destroy?.();
+    },
+  };
 };
 
-// Wrapper element which adds resize handles & logic for visual media file
-// previews.
-export const createResizeHandlesWrapper = (
+export const createResizableFileBlockWrapper = (
   block: BlockFromConfig<FileBlockConfig, any, any>,
   editor: BlockNoteEditor<any, any, any>,
-  childElement: HTMLElement,
-  resizeHandlesContainerElement?: HTMLElement
+  element?: { dom: HTMLElement; destroy?: () => void },
+  resizeHandlesContainerElement?: HTMLElement,
+  buttonText?: string,
+  buttonIcon?: HTMLElement
 ): { dom: HTMLElement; destroy: () => void } => {
-  if (!block.props.previewWidth) {
-    throw new Error("Block must have a `previewWidth` prop.");
+  const { dom, destroy } = createFileBlockWrapper(
+    block,
+    editor,
+    element,
+    buttonText,
+    buttonIcon
+  );
+  const wrapper = dom;
+  if (block.props.url && block.props.showPreview) {
+    wrapper.style.width = `${block.props.previewWidth}px`;
   }
 
-  // Wrapper element for rendered element and resize handles.
-  const wrapper = document.createElement("div");
-  wrapper.className = "bn-resize-handles-wrapper";
-  wrapper.style.width = `${block.props.previewWidth}px`;
-
-  // Container for resize handles, defaults to the wrapper element. This allows
-  // e.g. images with captions to have the resize handles centered vertically on
-  // the image.
   const resizeHandlesContainer = resizeHandlesContainerElement || wrapper;
 
-  // Resize handle elements.
   const leftResizeHandle = document.createElement("div");
   leftResizeHandle.className = "bn-resize-handle";
   leftResizeHandle.style.left = "4px";
@@ -322,7 +246,7 @@ export const createResizeHandlesWrapper = (
     // Min element width in px.
     const minWidth = 64;
 
-    // Ensures the element is not wider than the editor and not smaller than a
+    // Ensures the element is not wider than the editor and not narrower than a
     // predetermined minimum width.
     if (newWidth < minWidth) {
       wrapper.style.width = `${minWidth}px`;
@@ -410,8 +334,6 @@ export const createResizeHandlesWrapper = (
     };
   };
 
-  wrapper.appendChild(childElement);
-
   window.addEventListener("mousemove", windowMouseMoveHandler);
   window.addEventListener("mouseup", windowMouseUpHandler);
   wrapper.addEventListener("mouseenter", wrapperMouseEnterHandler);
@@ -428,6 +350,7 @@ export const createResizeHandlesWrapper = (
   return {
     dom: wrapper,
     destroy: () => {
+      destroy();
       window.removeEventListener("mousemove", windowMouseMoveHandler);
       window.removeEventListener("mouseup", windowMouseUpHandler);
       wrapper.removeEventListener("mouseenter", wrapperMouseEnterHandler);
@@ -443,3 +366,60 @@ export const createResizeHandlesWrapper = (
     },
   };
 };
+
+export const parseEmbedElement = (embedElement: HTMLEmbedElement) => {
+  const url = embedElement.src || undefined;
+
+  return { url };
+};
+
+export const parseFigureElement = (
+  figureElement: HTMLElement,
+  targetTag: string
+) => {
+  const targetElement = figureElement.querySelector(
+    targetTag
+  ) as HTMLElement | null;
+  if (!targetElement) {
+    return undefined;
+  }
+
+  const captionElement = figureElement.querySelector("figcaption");
+  const caption = captionElement?.textContent ?? undefined;
+
+  return { targetElement, caption };
+};
+
+// Wrapper figure element to display file link with caption. Used for external
+// HTML
+export const createLinkWithCaption = (
+  element: HTMLElement,
+  caption: string
+) => {
+  const wrapper = document.createElement("div");
+  const fileCaption = document.createElement("p");
+  fileCaption.textContent = caption;
+
+  wrapper.appendChild(element);
+  wrapper.appendChild(fileCaption);
+
+  return {
+    dom: wrapper,
+  };
+};
+
+// Wrapper figure element to display file preview with caption. Used for
+// external HTML.
+export const createFigureWithCaption = (
+  element: HTMLElement,
+  caption: string
+) => {
+  const figure = document.createElement("figure");
+  const captionElement = document.createElement("figcaption");
+  captionElement.textContent = caption;
+
+  figure.appendChild(element);
+  figure.appendChild(captionElement);
+
+  return { dom: figure };
+};
diff --git a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts b/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts
index 6b814d5d19..e16046c064 100644
--- a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts
+++ b/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts
@@ -9,10 +9,8 @@ import {
 import { defaultProps } from "../defaultProps.js";
 import {
   createFigureWithCaption,
-  createFileAndCaptionWrapper,
-  createFileBlockWrapper,
   createLinkWithCaption,
-  createResizeHandlesWrapper,
+  createResizableFileBlockWrapper,
   parseFigureElement,
 } from "../FileBlockContent/fileBlockHelpers.js";
 import { parseImageElement } from "./imageBlockHelpers.js";
@@ -72,24 +70,13 @@ export const imageRender = (
   image.alt = block.props.name || block.props.caption || "BlockNote image";
   image.contentEditable = "false";
   image.draggable = false;
-
   imageWrapper.appendChild(image);
 
-  const fileAndCaptionWrapper = createFileAndCaptionWrapper(
-    block,
-    imageWrapper
-  );
-  const resizeHandlesWrapper = createResizeHandlesWrapper(
-    block,
-    editor,
-    fileAndCaptionWrapper.dom,
-    imageWrapper
-  );
-
-  return createFileBlockWrapper(
+  return createResizableFileBlockWrapper(
     block,
     editor,
-    resizeHandlesWrapper,
+    { dom: imageWrapper },
+    imageWrapper,
     editor.dictionary.file_blocks.image.add_button_text,
     icon.firstElementChild as HTMLElement
   );
diff --git a/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts b/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts
index 80ca2f14ab..617339d349 100644
--- a/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts
+++ b/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts
@@ -10,10 +10,8 @@ import { defaultProps } from "../defaultProps.js";
 
 import {
   createFigureWithCaption,
-  createFileAndCaptionWrapper,
-  createFileBlockWrapper,
   createLinkWithCaption,
-  createResizeHandlesWrapper,
+  createResizableFileBlockWrapper,
   parseFigureElement,
 } from "../FileBlockContent/fileBlockHelpers.js";
 import { parseVideoElement } from "./videoBlockHelpers.js";
@@ -74,24 +72,13 @@ export const videoRender = (
   video.contentEditable = "false";
   video.draggable = false;
   video.width = block.props.previewWidth;
-
   videoWrapper.appendChild(video);
 
-  const fileAndCaptionWrapper = createFileAndCaptionWrapper(
-    block,
-    videoWrapper
-  );
-  const resizeHandlesWrapper = createResizeHandlesWrapper(
-    block,
-    editor,
-    fileAndCaptionWrapper.dom,
-    videoWrapper
-  );
-
-  return createFileBlockWrapper(
+  return createResizableFileBlockWrapper(
     block,
     editor,
-    resizeHandlesWrapper,
+    { dom: videoWrapper },
+    videoWrapper,
     editor.dictionary.file_blocks.video.add_button_text,
     icon.firstElementChild as HTMLElement
   );

From 85d71bc3e9e11cd19f0fb1676038a07265fded57 Mon Sep 17 00:00:00 2001
From: matthewlipski <matthewlipski@gmail.com>
Date: Fri, 6 Dec 2024 15:12:13 +0100
Subject: [PATCH 07/18] React code cleanup

---
 .../FileBlockContent/FileBlockContent.tsx     |  12 +-
 .../FileBlockContent/fileBlockHelpers.tsx     | 114 ++++++++----------
 2 files changed, 52 insertions(+), 74 deletions(-)

diff --git a/packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx b/packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx
index 62f97d32bc..1d5b972f26 100644
--- a/packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx
+++ b/packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx
@@ -4,11 +4,7 @@ import {
   createReactBlockSpec,
   ReactCustomBlockRenderProps,
 } from "../../schema/ReactBlockSpec.js";
-import {
-  DefaultFilePreview,
-  FileBlockWrapper,
-  LinkWithCaption,
-} from "./fileBlockHelpers.js";
+import { FileBlockWrapper, LinkWithCaption } from "./fileBlockHelpers.js";
 
 export const FileToExternalHTML = (
   props: Omit<
@@ -40,11 +36,7 @@ export const FileToExternalHTML = (
 export const FileBlock = (
   props: ReactCustomBlockRenderProps<typeof fileBlockConfig, any, any>
 ) => {
-  return (
-    <FileBlockWrapper {...(props as any)}>
-      <DefaultFilePreview {...(props as any)} />
-    </FileBlockWrapper>
-  );
+  return <FileBlockWrapper {...(props as any)} />;
 };
 
 export const ReactFileBlock = createReactBlockSpec(fileBlockConfig, {
diff --git a/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx b/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
index 73d6761966..16c8b6f9c8 100644
--- a/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
+++ b/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
@@ -1,7 +1,7 @@
 import { FileBlockConfig } from "@blocknote/core";
 import {
-  ComponentPropsWithoutRef,
   createContext,
+  CSSProperties,
   forwardRef,
   ReactNode,
   useCallback,
@@ -64,7 +64,7 @@ export const AddFileButton = (
 export const DefaultFilePreview = (
   props: Omit<
     ReactCustomBlockRenderProps<FileBlockConfig, any, any>,
-    "contentRef"
+    "editor" | "contentRef"
   >
 ) => (
   <div
@@ -78,47 +78,48 @@ export const DefaultFilePreview = (
   </div>
 );
 
-export const FileCaption = (
-  props: Omit<
-    ReactCustomBlockRenderProps<FileBlockConfig, any, any>,
-    "contentRef"
-  >
-) => {
-  return props.block.props.caption ? (
-    <p className={"bn-file-caption"}>{props.block.props.caption}</p>
-  ) : null;
-};
-
 export const FileBlockWrapper = forwardRef<
   HTMLDivElement,
-  Omit<ReactCustomBlockRenderProps<FileBlockConfig, any, any>, "contentRef"> &
-    ComponentPropsWithoutRef<"div"> & {
-      buttonText?: string;
-      buttonIcon?: ReactNode;
-      children: ReactNode;
-    }
+  Omit<ReactCustomBlockRenderProps<FileBlockConfig, any, any>, "contentRef"> & {
+    buttonText?: string;
+    buttonIcon?: ReactNode;
+    children?: ReactNode;
+  } & {
+    // These props & the `forwardRef` are just here so we can reuse this
+    // component in `ResizableFileBlockWrapper`.
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    style?: CSSProperties;
+  }
 >((props, ref) => {
   const showLoader = useUploadLoading(props.block.id);
 
   return (
-    <div className={"bn-file-block-content-wrapper"} ref={ref}>
-      {props.block.props.url === "" ? (
-        // Show the add file button if the file has not been uploaded yet.
-        <AddFileButton {...props} />
-      ) : showLoader ? (
+    <div
+      className={"bn-file-block-content-wrapper"}
+      onMouseEnter={props.onMouseEnter}
+      onMouseLeave={props.onMouseLeave}
+      style={props.style}
+      ref={ref}>
+      {showLoader ? (
         // Show loader while a file is being uploaded.
         <div className={"bn-file-loading-preview"}>Loading...</div>
+      ) : props.block.props.url === "" ? (
+        // Show the add file button if the file has not been uploaded yet.
+        <AddFileButton {...props} />
       ) : (
         // Show the file preview and caption if the file has been uploaded.
         <>
-          {props.block.props.showPreview === false ? (
+          {props.block.props.showPreview === false || !props.children ? (
             // Use default preview.
             <DefaultFilePreview {...props} />
           ) : (
             // Use custom preview.
             props.children
           )}
-          <FileCaption {...props} />
+          {props.block.props.caption && (
+            <p className={"bn-file-caption"}>{props.block.props.caption}</p>
+          )}
         </>
       )}
     </div>
@@ -147,8 +148,8 @@ export const ResizableFileBlockWrapper = (
     children: ReactNode;
   }
 ) => {
-  const [width, setWidth] = useState(props.block.props.previewWidth! as number);
-  const [childHovered, setChildHovered] = useState<boolean>(false);
+  // Temporary parameters set when the user begins resizing the element, used to
+  // calculate the new width of the element.
   const [resizeParams, setResizeParams] = useState<
     | {
         initialWidth: number;
@@ -158,6 +159,9 @@ export const ResizableFileBlockWrapper = (
     | undefined
   >(undefined);
 
+  const [width, setWidth] = useState(props.block.props.previewWidth! as number);
+  const [hovered, setHovered] = useState<boolean>(false);
+
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -193,7 +197,7 @@ export const ResizableFileBlockWrapper = (
       // Min child width in px.
       const minWidth = 64;
 
-      // Ensures the child is not wider than the editor and not smaller than a
+      // Ensures the child is not wider than the editor and not narrower than a
       // predetermined minimum width.
       if (newWidth < minWidth) {
         setWidth(minWidth);
@@ -225,16 +229,16 @@ export const ResizableFileBlockWrapper = (
   }, [props, resizeParams, width]);
 
   // Shows the resize handles when hovering over the child with the cursor.
-  const childWrapperMouseEnterHandler = useCallback(() => {
+  const wrapperMouseEnterHandler = useCallback(() => {
     if (props.editor.isEditable) {
-      setChildHovered(true);
+      setHovered(true);
     }
   }, [props.editor.isEditable]);
 
   // Hides the resize handles when the cursor leaves the child, unless the
   // cursor moves to one of the resize handles.
-  const childWrapperMouseLeaveHandler = useCallback(() => {
-    setChildHovered(false);
+  const wrapperMouseLeaveHandler = useCallback(() => {
+    setHovered(false);
   }, []);
 
   // Sets the resize params, allowing the user to begin resizing the child by
@@ -267,43 +271,25 @@ export const ResizableFileBlockWrapper = (
   const showLoader = useUploadLoading(props.block.id);
 
   return (
-    <div
-      className={"bn-file-block-content-wrapper"}
-      onMouseEnter={childWrapperMouseEnterHandler}
-      onMouseLeave={childWrapperMouseLeaveHandler}
+    <FileBlockWrapper
+      {...props}
+      onMouseEnter={wrapperMouseEnterHandler}
+      onMouseLeave={wrapperMouseLeaveHandler}
       style={
         props.block.props.url && !showLoader && props.block.props.showPreview
           ? { width: `${width}px` }
           : undefined
       }
       ref={ref}>
-      {props.block.props.url === "" ? (
-        // Show the add file button if the file has not been uploaded yet.
-        <AddFileButton {...props} />
-      ) : showLoader ? (
-        // Show loader while a file is being uploaded.
-        <div className={"bn-file-loading-preview"}>Loading...</div>
-      ) : (
-        // Show the file preview and caption if the file has been uploaded.
-        <>
-          {props.block.props.showPreview === false ? (
-            // Use default preview.
-            <DefaultFilePreview {...props} />
-          ) : (
-            // Use custom preview.
-            <ResizeHandlesContext.Provider
-              value={{
-                show: !!(childHovered || resizeParams),
-                leftResizeHandleMouseDownHandler,
-                rightResizeHandleMouseDownHandler,
-              }}>
-              {props.children}
-            </ResizeHandlesContext.Provider>
-          )}
-          <FileCaption {...props} />
-        </>
-      )}
-    </div>
+      <ResizeHandlesContext.Provider
+        value={{
+          show: !!(hovered || resizeParams),
+          leftResizeHandleMouseDownHandler,
+          rightResizeHandleMouseDownHandler,
+        }}>
+        {props.children}
+      </ResizeHandlesContext.Provider>
+    </FileBlockWrapper>
   );
 };
 

From d927604a714ebc746ccced480681f50f08e37642 Mon Sep 17 00:00:00 2001
From: matthewlipski <matthewlipski@gmail.com>
Date: Fri, 6 Dec 2024 15:12:22 +0100
Subject: [PATCH 08/18] Styles cleanup

---
 packages/core/src/editor/Block.css | 80 +++++++++++-------------------
 1 file changed, 30 insertions(+), 50 deletions(-)

diff --git a/packages/core/src/editor/Block.css b/packages/core/src/editor/Block.css
index 4651bb0c3a..aa20c22085 100644
--- a/packages/core/src/editor/Block.css
+++ b/packages/core/src/editor/Block.css
@@ -310,61 +310,49 @@ NESTED BLOCKS
 
 /* FILES */
 
-/* Add block button & default preview */
-[data-file-block] .bn-file-block-content-wrapper:has(.bn-add-file-button),
-[data-file-block] .bn-file-block-content-wrapper:has(.bn-file-default-preview) {
-  width: 100%;
-}
-
+/* Element that wraps content for all file blocks */
 [data-file-block] .bn-file-block-content-wrapper {
   cursor: pointer;
   display: flex;
   flex-direction: column;
-  justify-content: stretch;
-  max-width: 100%;
   user-select: none;
 }
 
+/* Add block button & default preview */
+[data-file-block] .bn-file-block-content-wrapper:has(.bn-add-file-button),
+[data-file-block] .bn-file-block-content-wrapper:has(.bn-file-default-preview) {
+  width: 100%;
+}
+
 [data-file-block] .bn-add-file-button {
   align-items: center;
   background-color: rgb(242, 241, 238);
   border-radius: 4px;
   color: rgb(125, 121, 122);
   display: flex;
-  flex-direction: row;
   gap: 10px;
   padding: 12px;
-  width: 100%;
 }
 
 .bn-editor[contenteditable="true"] [data-file-block] .bn-add-file-button:hover {
   background-color: rgb(225, 225, 225);
 }
 
-[data-file-block] .bn-add-file-button-icon {
+[data-file-block] .bn-add-file-button-icon,
+[data-file-block] .bn-file-default-preview-icon {
   width: 24px;
   height: 24px;
 }
 
-[data-file-block] .bn-add-file-button .bn-add-file-button-text {
+[data-file-block] .bn-add-file-button-text {
   font-size: 0.9rem;
 }
 
-[data-file-block] .bn-file-and-caption-wrapper {
-  display: flex;
-  flex-direction: column;
-  border-radius: 4px;
-  width: 100%;
-}
-
 [data-file-block] .bn-file-default-preview {
-  align-items: center;
   border-radius: 4px;
   display: flex;
-  flex-direction: row;
   gap: 4px;
   padding: 4px;
-  width: 100%;
 }
 
 [data-file-block] .bn-file-default-preview:hover,
@@ -372,29 +360,18 @@ NESTED BLOCKS
   background-color: rgb(225, 225, 225);
 }
 
-[data-file-block] .bn-file-default-preview-icon {
-  width: 24px;
-  height: 24px;
-}
-
-[data-file-block] .bn-resize-handles-wrapper {
-  position: relative;
-  max-width: 100%;
-}
-
-[data-file-block] .bn-visual-media-wrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  position: relative;
-  width: 100%;
+/* File captions */
+[data-file-block] .bn-file-caption {
+  font-size: 0.8em;
+  padding-block: 4px;
+  word-break: break-word;
 }
 
-[data-file-block] .bn-visual-media {
-  border-radius: 4px;
-  width: 100%;
+[data-file-block] .bn-file-caption:empty {
+  padding-block: 0;
 }
 
+/* Resize handles */
 [data-file-block] .bn-resize-handle {
   position: absolute;
   width: 8px;
@@ -405,19 +382,22 @@ NESTED BLOCKS
   cursor: ew-resize;
 }
 
-[data-content-type="audio"] > .bn-file-block-content-wrapper,
-.bn-audio {
-  width: 100%;
+/* Visual media file blocks, e.g. images & videos */
+[data-file-block] .bn-visual-media-wrapper {
+  display: flex;
+  align-items: center;
+  position: relative;
 }
 
-[data-file-block] .bn-file-caption {
-  font-size: 0.8em;
-  padding-block: 4px;
-  word-break: break-word;
+[data-file-block] .bn-visual-media {
+  border-radius: 4px;
+  width: 100%;
 }
 
-[data-file-block] .bn-file-caption:empty {
-  padding-block: 0;
+/* Block-specific styles */
+[data-content-type="audio"] > .bn-file-block-content-wrapper,
+.bn-audio {
+  width: 100%;
 }
 
 /* PLACEHOLDERS*/

From 8ce432eeda46314a9fd4b5ec3eb9bb7655bdece8 Mon Sep 17 00:00:00 2001
From: matthewlipski <matthewlipski@gmail.com>
Date: Fri, 6 Dec 2024 15:31:03 +0100
Subject: [PATCH 09/18] Small fixes

---
 .../04-pdf-file-block/PDF.tsx                 | 37 ++++---------------
 .../AudioBlockContent/AudioBlockContent.tsx   |  2 +-
 .../ImageBlockContent/ImageBlockContent.tsx   |  2 +-
 .../VideoBlockContent/VideoBlockContent.tsx   |  2 +-
 4 files changed, 11 insertions(+), 32 deletions(-)

diff --git a/examples/06-custom-schema/04-pdf-file-block/PDF.tsx b/examples/06-custom-schema/04-pdf-file-block/PDF.tsx
index a15c3e1303..7d65d059ae 100644
--- a/examples/06-custom-schema/04-pdf-file-block/PDF.tsx
+++ b/examples/06-custom-schema/04-pdf-file-block/PDF.tsx
@@ -1,13 +1,11 @@
 import { FileBlockConfig } from "@blocknote/core";
 import {
-  AddFileButton,
   createReactBlockSpec,
-  DefaultFilePreview,
-  FileAndCaptionWrapper,
   ReactCustomBlockRenderProps,
+  ResizableFileBlockWrapper,
 } from "@blocknote/react";
 
-import { RiFilePdfFill } from "react-icons/ri";
+import { RiImage2Fill } from "react-icons/ri";
 
 import "./styles.css";
 
@@ -53,31 +51,12 @@ export const PDF = createReactBlockSpec(
   },
   {
     render: (props) => (
-      <div className={"bn-file-block-content-wrapper"}>
-        {props.block.props.url === "" ? (
-          <AddFileButton
-            {...props}
-            editor={props.editor as any}
-            buttonText={"Add PDF"}
-            buttonIcon={<RiFilePdfFill size={24} />}
-          />
-        ) : !props.block.props.showPreview ? (
-          <FileAndCaptionWrapper
-            block={props.block}
-            editor={props.editor as any}>
-            <DefaultFilePreview
-              block={props.block}
-              editor={props.editor as any}
-            />
-          </FileAndCaptionWrapper>
-        ) : (
-          <FileAndCaptionWrapper
-            block={props.block}
-            editor={props.editor as any}>
-            <PDFPreview block={props.block} editor={props.editor as any} />
-          </FileAndCaptionWrapper>
-        )}
-      </div>
+      <ResizableFileBlockWrapper
+        {...(props as any)}
+        buttonText={props.editor.dictionary.file_blocks.image.add_button_text}
+        buttonIcon={<RiImage2Fill size={24} />}>
+        <PDFPreview {...(props as any)} />
+      </ResizableFileBlockWrapper>
     ),
   }
 );
diff --git a/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx b/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx
index 00827159a6..ec8cd1d74e 100644
--- a/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx
+++ b/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx
@@ -77,7 +77,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>
   );
 };
diff --git a/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx b/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
index 182de6a469..8893318e3d 100644
--- a/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
+++ b/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
@@ -90,7 +90,7 @@ export const ImageBlock = (
       {...(props as any)}
       buttonText={props.editor.dictionary.file_blocks.image.add_button_text}
       buttonIcon={<RiImage2Fill size={24} />}>
-      <ImagePreview block={props.block} editor={props.editor as any} />
+      <ImagePreview {...(props as any)} />
     </ResizableFileBlockWrapper>
   );
 };
diff --git a/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx b/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
index fa535ef853..79bb96797c 100644
--- a/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
+++ b/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
@@ -84,7 +84,7 @@ export const VideoBlock = (
       {...(props as any)}
       buttonText={props.editor.dictionary.file_blocks.video.add_button_text}
       buttonIcon={<RiVideoFill size={24} />}>
-      <VideoPreview block={props.block} editor={props.editor as any} />
+      <VideoPreview {...(props as any)} />
     </ResizableFileBlockWrapper>
   );
 };

From 3629699b112ff3e3aecf02b2967bfd2353e8411a Mon Sep 17 00:00:00 2001
From: matthewlipski <matthewlipski@gmail.com>
Date: Fri, 6 Dec 2024 16:31:54 +0100
Subject: [PATCH 10/18] - Refactored `ResizableFileBlockWrapper` to get rid of
 context - Renamed `DefaultFilePreview` to `FileNameWithIcon` - Made file
 `src` get set straight away only if `resolveFileUrl` is undefined

---
 .../AudioBlockContent/AudioBlockContent.ts    | 11 ++-
 .../FileBlockContent/fileBlockHelpers.ts      | 21 ++----
 .../ImageBlockContent/ImageBlockContent.ts    | 12 ++-
 .../VideoBlockContent/VideoBlockContent.ts    | 11 ++-
 packages/core/src/editor/Block.css            | 17 ++---
 .../FileBlockContent/fileBlockHelpers.tsx     | 74 ++++++-------------
 .../ImageBlockContent/ImageBlockContent.tsx   | 28 +++----
 .../VideoBlockContent/VideoBlockContent.tsx   | 28 +++----
 8 files changed, 81 insertions(+), 121 deletions(-)

diff --git a/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts b/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts
index 03e1ad57e1..d80cecb8e5 100644
--- a/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts
+++ b/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts
@@ -56,10 +56,13 @@ export const audioRender = (
 
   const audio = document.createElement("audio");
   audio.className = "bn-audio";
-  audio.src = block.props.url;
-  editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
-    audio.src = downloadUrl;
-  });
+  if (editor.resolveFileUrl) {
+    editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
+      audio.src = downloadUrl;
+    });
+  } else {
+    audio.src = block.props.url;
+  }
   audio.controls = true;
   audio.contentEditable = "false";
   audio.draggable = false;
diff --git a/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts b/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts
index ae1227e329..e43ea02e39 100644
--- a/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts
+++ b/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts
@@ -68,19 +68,19 @@ export const createAddFileButton = (
   };
 };
 
-export const createDefaultFilePreview = (
+export const createFileNameWithIcon = (
   block: BlockFromConfig<FileBlockConfig, any, any>
 ): { dom: HTMLElement; destroy?: () => void } => {
   const file = document.createElement("div");
-  file.className = "bn-file-default-preview";
+  file.className = "bn-file-name-with-icon";
 
   const icon = document.createElement("div");
-  icon.className = "bn-file-default-preview-icon";
+  icon.className = "bn-file-icon";
   icon.innerHTML = FILE_ICON_SVG;
   file.appendChild(icon);
 
   const fileName = document.createElement("p");
-  fileName.className = "bn-file-default-preview-name";
+  fileName.className = "bn-file-name";
   fileName.textContent = block.props.name;
   file.appendChild(fileName);
 
@@ -114,7 +114,7 @@ export const createFileBlockWrapper = (
     buttonIcon
   );
 
-  const defaultFilePreview = createDefaultFilePreview(block);
+  const fileNameWithIcon = createFileNameWithIcon(block);
 
   const caption = document.createElement("p");
   caption.className = "bn-file-caption";
@@ -126,12 +126,6 @@ export const createFileBlockWrapper = (
       wrapper.appendChild(loading);
     }
   });
-  const destroyUploadEndHandler = editor.onUploadEnd((blockId) => {
-    if (blockId === block.id) {
-      wrapper.removeChild(loading);
-      wrapper.appendChild(element ? element.dom : defaultFilePreview.dom);
-    }
-  });
 
   if (block.props.url === "") {
     // Show the add file button if the file has not been uploaded yet.
@@ -140,7 +134,7 @@ export const createFileBlockWrapper = (
     // Show the file preview and caption if the file has been uploaded.
     if (block.props.showPreview === false || !element) {
       // Use default preview.
-      wrapper.appendChild(defaultFilePreview.dom);
+      wrapper.appendChild(fileNameWithIcon.dom);
     } else {
       // Use custom preview.
       wrapper.appendChild(element.dom);
@@ -155,9 +149,8 @@ export const createFileBlockWrapper = (
     dom: wrapper,
     destroy: () => {
       destroyUploadStartHandler();
-      destroyUploadEndHandler();
       addFileButton.destroy();
-      defaultFilePreview.destroy?.();
+      fileNameWithIcon.destroy?.();
     },
   };
 };
diff --git a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts b/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts
index e16046c064..9b7c9a2bc2 100644
--- a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts
+++ b/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts
@@ -63,10 +63,14 @@ export const imageRender = (
 
   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;
-  });
+  if (editor.resolveFileUrl) {
+    editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
+      image.src = downloadUrl;
+    });
+  } else {
+    image.src = block.props.url;
+  }
+
   image.alt = block.props.name || block.props.caption || "BlockNote image";
   image.contentEditable = "false";
   image.draggable = false;
diff --git a/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts b/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts
index 617339d349..ef58b9ff66 100644
--- a/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts
+++ b/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts
@@ -64,10 +64,13 @@ export const videoRender = (
 
   const video = document.createElement("video");
   video.className = "bn-visual-media";
-  video.src = block.props.url;
-  editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
-    video.src = downloadUrl;
-  });
+  if (editor.resolveFileUrl) {
+    editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
+      video.src = downloadUrl;
+    });
+  } else {
+    video.src = block.props.url;
+  }
   video.controls = true;
   video.contentEditable = "false";
   video.draggable = false;
diff --git a/packages/core/src/editor/Block.css b/packages/core/src/editor/Block.css
index aa20c22085..efe784e644 100644
--- a/packages/core/src/editor/Block.css
+++ b/packages/core/src/editor/Block.css
@@ -318,9 +318,9 @@ NESTED BLOCKS
   user-select: none;
 }
 
-/* Add block button & default preview */
+/* Add block button & default element (name with icon) */
 [data-file-block] .bn-file-block-content-wrapper:has(.bn-add-file-button),
-[data-file-block] .bn-file-block-content-wrapper:has(.bn-file-default-preview) {
+[data-file-block] .bn-file-block-content-wrapper:has(.bn-file-name-with-icon) {
   width: 100%;
 }
 
@@ -334,12 +334,14 @@ NESTED BLOCKS
   padding: 12px;
 }
 
-.bn-editor[contenteditable="true"] [data-file-block] .bn-add-file-button:hover {
+.bn-editor[contenteditable="true"] [data-file-block] .bn-add-file-button:hover,
+[data-file-block] .bn-file-name-with-icon:hover,
+.ProseMirror-selectednode .bn-file-name-with-icon{
   background-color: rgb(225, 225, 225);
 }
 
 [data-file-block] .bn-add-file-button-icon,
-[data-file-block] .bn-file-default-preview-icon {
+[data-file-block] .bn-file-icon {
   width: 24px;
   height: 24px;
 }
@@ -348,18 +350,13 @@ NESTED BLOCKS
   font-size: 0.9rem;
 }
 
-[data-file-block] .bn-file-default-preview {
+[data-file-block] .bn-file-name-with-icon {
   border-radius: 4px;
   display: flex;
   gap: 4px;
   padding: 4px;
 }
 
-[data-file-block] .bn-file-default-preview:hover,
-.ProseMirror-selectednode .bn-file-default-preview {
-  background-color: rgb(225, 225, 225);
-}
-
 /* File captions */
 [data-file-block] .bn-file-caption {
   font-size: 0.8em;
diff --git a/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx b/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
index 16c8b6f9c8..4b94340410 100644
--- a/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
+++ b/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
@@ -1,11 +1,9 @@
 import { FileBlockConfig } from "@blocknote/core";
 import {
-  createContext,
   CSSProperties,
   forwardRef,
   ReactNode,
   useCallback,
-  useContext,
   useEffect,
   useRef,
   useState,
@@ -61,20 +59,20 @@ export const AddFileButton = (
   );
 };
 
-export const DefaultFilePreview = (
+export const FileNameWithIcon = (
   props: Omit<
     ReactCustomBlockRenderProps<FileBlockConfig, any, any>,
     "editor" | "contentRef"
   >
 ) => (
   <div
-    className={"bn-file-default-preview"}
+    className={"bn-file-name-with-icon"}
     contentEditable={false}
     draggable={false}>
-    <div className={"bn-file-default-preview-icon"}>
+    <div className={"bn-file-icon"}>
       <RiFile2Line size={24} />
     </div>
-    <p className={"bn-file-default-preview-name"}>{props.block.props.name}</p>
+    <p className={"bn-file-name"}>{props.block.props.name}</p>
   </div>
 );
 
@@ -112,7 +110,7 @@ export const FileBlockWrapper = forwardRef<
         <>
           {props.block.props.showPreview === false || !props.children ? (
             // Use default preview.
-            <DefaultFilePreview {...props} />
+            <FileNameWithIcon {...props} />
           ) : (
             // Use custom preview.
             props.children
@@ -126,18 +124,6 @@ export const FileBlockWrapper = forwardRef<
   );
 });
 
-const ResizeHandlesContext = createContext<{
-  show: boolean;
-  leftResizeHandleMouseDownHandler: (event: React.MouseEvent) => void;
-  rightResizeHandleMouseDownHandler: (event: React.MouseEvent) => void;
-}>({
-  show: false,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  leftResizeHandleMouseDownHandler: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  rightResizeHandleMouseDownHandler: () => {},
-});
-
 export const ResizableFileBlockWrapper = (
   props: Omit<
     ReactCustomBlockRenderProps<FileBlockConfig, any, any>,
@@ -281,45 +267,27 @@ export const ResizableFileBlockWrapper = (
           : undefined
       }
       ref={ref}>
-      <ResizeHandlesContext.Provider
-        value={{
-          show: !!(hovered || resizeParams),
-          leftResizeHandleMouseDownHandler,
-          rightResizeHandleMouseDownHandler,
-        }}>
+      <div className={"bn-visual-media-wrapper"}>
         {props.children}
-      </ResizeHandlesContext.Provider>
+        {(hovered || resizeParams) && (
+          <>
+            <div
+              className={"bn-resize-handle"}
+              style={{ left: "4px" }}
+              onMouseDown={leftResizeHandleMouseDownHandler}
+            />
+            <div
+              className={"bn-resize-handle"}
+              style={{ right: "4px" }}
+              onMouseDown={rightResizeHandleMouseDownHandler}
+            />
+          </>
+        )}
+      </div>
     </FileBlockWrapper>
   );
 };
 
-export const ResizeHandles = () => {
-  const {
-    show,
-    leftResizeHandleMouseDownHandler,
-    rightResizeHandleMouseDownHandler,
-  } = useContext(ResizeHandlesContext);
-
-  if (!show) {
-    return null;
-  }
-
-  return (
-    <>
-      <div
-        className={"bn-resize-handle"}
-        style={{ left: "4px" }}
-        onMouseDown={leftResizeHandleMouseDownHandler}
-      />
-      <div
-        className={"bn-resize-handle"}
-        style={{ right: "4px" }}
-        onMouseDown={rightResizeHandleMouseDownHandler}
-      />
-    </>
-  );
-};
-
 export const LinkWithCaption = (props: {
   caption: string;
   children: ReactNode;
diff --git a/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx b/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
index 8893318e3d..fd156cf906 100644
--- a/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
+++ b/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
@@ -10,7 +10,6 @@ import {
   FigureWithCaption,
   LinkWithCaption,
   ResizableFileBlockWrapper,
-  ResizeHandles,
 } from "../FileBlockContent/fileBlockHelpers.js";
 import { useResolveUrl } from "../FileBlockContent/useResolveUrl.js";
 
@@ -25,21 +24,18 @@ export const ImagePreview = (
   const resolved = useResolveUrl(props.block.props.url!);
 
   return (
-    <div className={"bn-visual-media-wrapper"}>
-      <img
-        className={"bn-visual-media"}
-        src={
-          resolved.loadingState === "loading"
-            ? props.block.props.url
-            : resolved.downloadUrl
-        }
-        alt={props.block.props.caption || "BlockNote image"}
-        contentEditable={false}
-        draggable={false}
-        ref={imgRef}
-      />
-      <ResizeHandles />
-    </div>
+    <img
+      className={"bn-visual-media"}
+      src={
+        resolved.loadingState === "loading"
+          ? props.block.props.url
+          : resolved.downloadUrl
+      }
+      alt={props.block.props.caption || "BlockNote image"}
+      contentEditable={false}
+      draggable={false}
+      ref={imgRef}
+    />
   );
 };
 
diff --git a/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx b/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
index 79bb96797c..2d44e033bd 100644
--- a/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
+++ b/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
@@ -10,7 +10,6 @@ import {
   FigureWithCaption,
   LinkWithCaption,
   ResizableFileBlockWrapper,
-  ResizeHandles,
 } from "../FileBlockContent/fileBlockHelpers.js";
 import { useResolveUrl } from "../FileBlockContent/useResolveUrl.js";
 
@@ -25,21 +24,18 @@ export const VideoPreview = (
   const resolved = useResolveUrl(props.block.props.url!);
 
   return (
-    <div className={"bn-visual-media-wrapper"}>
-      <video
-        className={"bn-visual-media"}
-        src={
-          resolved.loadingState === "loading"
-            ? props.block.props.url
-            : resolved.downloadUrl
-        }
-        controls={true}
-        contentEditable={false}
-        draggable={false}
-        ref={videoRef}
-      />
-      <ResizeHandles />
-    </div>
+    <video
+      className={"bn-visual-media"}
+      src={
+        resolved.loadingState === "loading"
+          ? props.block.props.url
+          : resolved.downloadUrl
+      }
+      controls={true}
+      contentEditable={false}
+      draggable={false}
+      ref={videoRef}
+    />
   );
 };
 

From 913583012d8bef4bb645bbbcb99090640e55fec0 Mon Sep 17 00:00:00 2001
From: matthewlipski <matthewlipski@gmail.com>
Date: Fri, 6 Dec 2024 19:18:53 +0100
Subject: [PATCH 11/18] Cleaned up references to view

---
 .../commands/moveBlocks/moveBlocks.test.ts    |  6 +++---
 .../commands/moveBlocks/moveBlocks.ts         |  4 +---
 .../commands/splitBlock/splitBlock.test.ts    |  2 +-
 .../core/src/api/clipboard/clipboard.test.ts  |  8 +++----
 .../fromClipboard/handleFileInsertion.ts      |  2 +-
 .../fromClipboard/handleVSCodePaste.ts        | 21 +++++--------------
 .../clipboard/fromClipboard/pasteExtension.ts | 12 +++++------
 .../parsers/markdown/parseMarkdown.test.ts    | 10 ++-------
 packages/core/src/editor/BlockNoteEditor.ts   |  8 +++----
 .../Placeholder/PlaceholderPlugin.ts          | 12 +++++------
 .../SuggestionMenu/SuggestionPlugin.ts        |  2 +-
 .../TableHandles/TableHandlesPlugin.ts        | 12 +++++------
 .../src/schema/inlineContent/createSpec.ts    |  4 ++--
 .../src/schema/ReactInlineContentSpec.tsx     |  4 ++--
 14 files changed, 44 insertions(+), 63 deletions(-)

diff --git a/packages/core/src/api/blockManipulation/commands/moveBlocks/moveBlocks.test.ts b/packages/core/src/api/blockManipulation/commands/moveBlocks/moveBlocks.test.ts
index c1b0de5ecc..d8b4e5d40d 100644
--- a/packages/core/src/api/blockManipulation/commands/moveBlocks/moveBlocks.test.ts
+++ b/packages/core/src/api/blockManipulation/commands/moveBlocks/moveBlocks.test.ts
@@ -22,7 +22,7 @@ function makeSelectionSpanContent(selectionType: "text" | "node" | "cell") {
   const { blockContent } = blockInfo;
 
   if (selectionType === "cell") {
-    getEditor()._tiptapEditor.view?.dispatch(
+    getEditor().dispatch(
       getEditor()._tiptapEditor.state.tr.setSelection(
         CellSelection.create(
           getEditor()._tiptapEditor.state.doc,
@@ -36,7 +36,7 @@ function makeSelectionSpanContent(selectionType: "text" | "node" | "cell") {
       )
     );
   } else if (selectionType === "node") {
-    getEditor()._tiptapEditor.view?.dispatch(
+    getEditor().dispatch(
       getEditor()._tiptapEditor.state.tr.setSelection(
         NodeSelection.create(
           getEditor()._tiptapEditor.state.doc,
@@ -45,7 +45,7 @@ function makeSelectionSpanContent(selectionType: "text" | "node" | "cell") {
       )
     );
   } else {
-    getEditor()._tiptapEditor.view?.dispatch(
+    getEditor().dispatch(
       getEditor()._tiptapEditor.state.tr.setSelection(
         TextSelection.create(
           getEditor()._tiptapEditor.state.doc,
diff --git a/packages/core/src/api/blockManipulation/commands/moveBlocks/moveBlocks.ts b/packages/core/src/api/blockManipulation/commands/moveBlocks/moveBlocks.ts
index 2ffe1744d0..c99d92de6f 100644
--- a/packages/core/src/api/blockManipulation/commands/moveBlocks/moveBlocks.ts
+++ b/packages/core/src/api/blockManipulation/commands/moveBlocks/moveBlocks.ts
@@ -125,9 +125,7 @@ function updateBlockSelectionFromData(
     );
   }
 
-  editor._tiptapEditor.view?.dispatch(
-    editor._tiptapEditor.state.tr.setSelection(selection)
-  );
+  editor.dispatch(editor._tiptapEditor.state.tr.setSelection(selection));
 }
 
 /**
diff --git a/packages/core/src/api/blockManipulation/commands/splitBlock/splitBlock.test.ts b/packages/core/src/api/blockManipulation/commands/splitBlock/splitBlock.test.ts
index a78a746d5c..444729e69c 100644
--- a/packages/core/src/api/blockManipulation/commands/splitBlock/splitBlock.test.ts
+++ b/packages/core/src/api/blockManipulation/commands/splitBlock/splitBlock.test.ts
@@ -38,7 +38,7 @@ function setSelectionWithOffset(
     throw new Error("Target block is not a block container");
   }
 
-  getEditor()._tiptapEditor.view?.dispatch(
+  getEditor().dispatch(
     getEditor()._tiptapEditor.state.tr.setSelection(
       TextSelection.create(doc, info.blockContent.beforePos + offset + 1)
     )
diff --git a/packages/core/src/api/clipboard/clipboard.test.ts b/packages/core/src/api/clipboard/clipboard.test.ts
index f2cfa8e985..58a9d5da36 100644
--- a/packages/core/src/api/clipboard/clipboard.test.ts
+++ b/packages/core/src/api/clipboard/clipboard.test.ts
@@ -167,18 +167,18 @@ describe("Test ProseMirror selection clipboard HTML", () => {
   // Sets the editor selection to the given start and end positions, then
   // exports the selected content to HTML and compares it to a snapshot.
   async function testSelection(testCase: SelectionTestCase) {
-    if (!editor._tiptapEditor.view) {
+    if (!editor.prosemirrorView) {
       throw new Error("Editor view not initialized.");
     }
 
     editor.dispatch(
       editor._tiptapEditor.state.tr.setSelection(
-        testCase.createSelection(editor._tiptapEditor.view.state.doc)
+        testCase.createSelection(editor.prosemirrorView.state.doc)
       )
     );
 
     const { clipboardHTML, externalHTML } = selectedFragmentToHTML(
-      editor._tiptapEditor.view,
+      editor.prosemirrorView,
       editor
     );
 
@@ -188,7 +188,7 @@ describe("Test ProseMirror selection clipboard HTML", () => {
 
     const originalDocument = editor.document;
     doPaste(
-      editor._tiptapEditor.view,
+      editor.prosemirrorView,
       "text",
       clipboardHTML,
       false,
diff --git a/packages/core/src/api/clipboard/fromClipboard/handleFileInsertion.ts b/packages/core/src/api/clipboard/fromClipboard/handleFileInsertion.ts
index cf622f6c72..c8944b854f 100644
--- a/packages/core/src/api/clipboard/fromClipboard/handleFileInsertion.ts
+++ b/packages/core/src/api/clipboard/fromClipboard/handleFileInsertion.ts
@@ -131,7 +131,7 @@ export async function handleFileInsertion<
           top: (event as DragEvent).clientY,
         };
 
-        const pos = editor._tiptapEditor.view?.posAtCoords(coords);
+        const pos = editor.prosemirrorView?.posAtCoords(coords);
         if (!pos) {
           return;
         }
diff --git a/packages/core/src/api/clipboard/fromClipboard/handleVSCodePaste.ts b/packages/core/src/api/clipboard/fromClipboard/handleVSCodePaste.ts
index 96ef277693..eb15099451 100644
--- a/packages/core/src/api/clipboard/fromClipboard/handleVSCodePaste.ts
+++ b/packages/core/src/api/clipboard/fromClipboard/handleVSCodePaste.ts
@@ -1,20 +1,9 @@
-import { BlockNoteEditor } from "../../../editor/BlockNoteEditor.js";
-import {
-  BlockSchema,
-  InlineContentSchema,
-  StyleSchema,
-} from "../../../schema/index.js";
-
-export async function handleVSCodePaste<
-  BSchema extends BlockSchema,
-  I extends InlineContentSchema,
-  S extends StyleSchema
->(event: ClipboardEvent, editor: BlockNoteEditor<BSchema, I, S>) {
-  const view = editor.prosemirrorView;
-  if (!view) {
-    return false;
-  }
+import { EditorView } from "prosemirror-view";
 
+export async function handleVSCodePaste(
+  event: ClipboardEvent,
+  view: EditorView
+) {
   const { schema } = view.state;
 
   if (!event.clipboardData) {
diff --git a/packages/core/src/api/clipboard/fromClipboard/pasteExtension.ts b/packages/core/src/api/clipboard/fromClipboard/pasteExtension.ts
index 6a61723ca3..350cf2dad8 100644
--- a/packages/core/src/api/clipboard/fromClipboard/pasteExtension.ts
+++ b/packages/core/src/api/clipboard/fromClipboard/pasteExtension.ts
@@ -19,14 +19,14 @@ export const createPasteFromClipboardExtension = <
 >(
   editor: BlockNoteEditor<BSchema, I, S>
 ) =>
-  Extension.create<{ editor: BlockNoteEditor<BSchema, I, S> }, undefined>({
+  Extension.create({
     name: "pasteFromClipboard",
     addProseMirrorPlugins() {
       return [
         new Plugin({
           props: {
             handleDOMEvents: {
-              paste(_view, event) {
+              paste(view, event) {
                 event.preventDefault();
 
                 if (!editor.isEditable) {
@@ -45,7 +45,7 @@ export const createPasteFromClipboardExtension = <
                 }
 
                 if (format === "vscode-editor-data") {
-                  handleVSCodePaste(event, editor);
+                  handleVSCodePaste(event, view);
                   return true;
                 }
 
@@ -57,18 +57,18 @@ export const createPasteFromClipboardExtension = <
                 let data = event.clipboardData!.getData(format);
 
                 if (format === "blocknote/html") {
-                  editor._tiptapEditor.view?.pasteHTML(data);
+                  view.pasteHTML(data);
                   return true;
                 }
 
                 if (format === "text/html") {
                   const htmlNode = nestedListsToBlockNoteStructure(data.trim());
                   data = htmlNode.innerHTML;
-                  editor._tiptapEditor.view?.pasteHTML(data);
+                  view.pasteHTML(data);
                   return true;
                 }
 
-                editor._tiptapEditor.view?.pasteText(data);
+                view.pasteText(data);
 
                 return true;
               },
diff --git a/packages/core/src/api/parsers/markdown/parseMarkdown.test.ts b/packages/core/src/api/parsers/markdown/parseMarkdown.test.ts
index b84aa4c578..6d9ea800da 100644
--- a/packages/core/src/api/parsers/markdown/parseMarkdown.test.ts
+++ b/packages/core/src/api/parsers/markdown/parseMarkdown.test.ts
@@ -16,17 +16,11 @@ async function parseMarkdownAndCompareSnapshots(
     snapshotPath
   );
 
-  if (!editor._tiptapEditor.view) {
+  if (!editor.prosemirrorView) {
     throw new Error("Editor view not initialized.");
   }
 
-  doPaste(
-    editor._tiptapEditor.view,
-    md,
-    null,
-    true,
-    new ClipboardEvent("paste")
-  );
+  doPaste(editor.prosemirrorView, md, null, true, new ClipboardEvent("paste"));
 
   const pastedSnapshotPath = "./__snapshots__/pasted/" + snapshotName + ".json";
   expect(JSON.stringify(editor.document, undefined, 2)).toMatchFileSnapshot(
diff --git a/packages/core/src/editor/BlockNoteEditor.ts b/packages/core/src/editor/BlockNoteEditor.ts
index 608a9b5da4..cde89a3240 100644
--- a/packages/core/src/editor/BlockNoteEditor.ts
+++ b/packages/core/src/editor/BlockNoteEditor.ts
@@ -573,15 +573,15 @@ export class BlockNoteEditor<
   }
 
   public get domElement() {
-    return this._tiptapEditor.view?.dom as HTMLDivElement | undefined;
+    return this.prosemirrorView?.dom as HTMLDivElement | undefined;
   }
 
-  public isFocused(): boolean | undefined {
-    return this._tiptapEditor.view?.hasFocus();
+  public isFocused() {
+    return this.prosemirrorView?.hasFocus() || false;
   }
 
   public focus() {
-    this._tiptapEditor.view?.focus();
+    this.prosemirrorView?.focus();
   }
 
   public onUploadStart(callback: (blockId?: string) => void) {
diff --git a/packages/core/src/extensions/Placeholder/PlaceholderPlugin.ts b/packages/core/src/extensions/Placeholder/PlaceholderPlugin.ts
index b535379287..440457eb29 100644
--- a/packages/core/src/extensions/Placeholder/PlaceholderPlugin.ts
+++ b/packages/core/src/extensions/Placeholder/PlaceholderPlugin.ts
@@ -18,10 +18,10 @@ export class PlaceholderPlugin {
         if (nonce) {
           styleEl.setAttribute("nonce", nonce);
         }
-        if (editor._tiptapEditor.view?.root instanceof ShadowRoot) {
-          editor._tiptapEditor.view.root.append(styleEl);
+        if (editor.prosemirrorView?.root instanceof ShadowRoot) {
+          editor.prosemirrorView.root.append(styleEl);
         } else {
-          editor._tiptapEditor.view?.root.head.appendChild(styleEl);
+          editor.prosemirrorView?.root.head.appendChild(styleEl);
         }
 
         const styleSheet = styleEl.sheet!;
@@ -78,10 +78,10 @@ export class PlaceholderPlugin {
 
         return {
           destroy: () => {
-            if (editor._tiptapEditor.view?.root instanceof ShadowRoot) {
-              editor._tiptapEditor.view.root.removeChild(styleEl);
+            if (editor.prosemirrorView?.root instanceof ShadowRoot) {
+              editor.prosemirrorView.root.removeChild(styleEl);
             } else {
-              editor._tiptapEditor.view?.root.head.removeChild(styleEl);
+              editor.prosemirrorView?.root.head.removeChild(styleEl);
             }
           },
         };
diff --git a/packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts b/packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts
index 1cd64b2a0a..6564a1993b 100644
--- a/packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts
+++ b/packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts
@@ -45,7 +45,7 @@ class SuggestionMenuView<
       });
     };
 
-    this.rootEl = this.editor._tiptapEditor.view?.root;
+    this.rootEl = this.editor.prosemirrorView?.root;
 
     // Setting capture=true ensures that any parent container of the editor that
     // gets scrolled will trigger the scroll event. Scroll events do not bubble
diff --git a/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts b/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts
index f322e74319..135c5a67d5 100644
--- a/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts
+++ b/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts
@@ -742,11 +742,11 @@ export class TableHandlesProsemirrorPlugin<
       })
     );
 
-    if (!this.editor._tiptapEditor.view) {
+    if (!this.editor.prosemirrorView) {
       throw new Error("Editor view not initialized.");
     }
 
-    setHiddenDragImage(this.editor._tiptapEditor.view.root);
+    setHiddenDragImage(this.editor.prosemirrorView.root);
     event.dataTransfer!.setDragImage(dragImageElement!, 0, 0);
     event.dataTransfer!.effectAllowed = "move";
   };
@@ -785,11 +785,11 @@ export class TableHandlesProsemirrorPlugin<
       })
     );
 
-    if (!this.editor._tiptapEditor.view) {
+    if (!this.editor.prosemirrorView) {
       throw new Error("Editor view not initialized.");
     }
 
-    setHiddenDragImage(this.editor._tiptapEditor.view.root);
+    setHiddenDragImage(this.editor.prosemirrorView.root);
     event.dataTransfer!.setDragImage(dragImageElement!, 0, 0);
     event.dataTransfer!.effectAllowed = "copyMove";
   };
@@ -812,11 +812,11 @@ export class TableHandlesProsemirrorPlugin<
       this.editor._tiptapEditor.state.tr.setMeta(tableHandlesPluginKey, null)
     );
 
-    if (!this.editor._tiptapEditor.view) {
+    if (!this.editor.prosemirrorView) {
       throw new Error("Editor view not initialized.");
     }
 
-    unsetHiddenDragImage(this.editor._tiptapEditor.view.root);
+    unsetHiddenDragImage(this.editor.prosemirrorView.root);
   };
 
   /**
diff --git a/packages/core/src/schema/inlineContent/createSpec.ts b/packages/core/src/schema/inlineContent/createSpec.ts
index ba37d89049..e088a9704f 100644
--- a/packages/core/src/schema/inlineContent/createSpec.ts
+++ b/packages/core/src/schema/inlineContent/createSpec.ts
@@ -142,8 +142,8 @@ export function createInlineContentSpec<
               editor.schema.styleSchema
             );
 
-            editor._tiptapEditor.view.dispatch(
-              editor._tiptapEditor.view.state.tr.replaceWith(
+            editor.dispatch(
+              editor.prosemirrorView.state.tr.replaceWith(
                 getPos(),
                 getPos() + node.nodeSize,
                 content
diff --git a/packages/react/src/schema/ReactInlineContentSpec.tsx b/packages/react/src/schema/ReactInlineContentSpec.tsx
index c86926ff71..0ab5ac0d70 100644
--- a/packages/react/src/schema/ReactInlineContentSpec.tsx
+++ b/packages/react/src/schema/ReactInlineContentSpec.tsx
@@ -174,8 +174,8 @@ export function createReactInlineContentSpec<
                       editor.schema.styleSchema
                     );
 
-                    editor._tiptapEditor.view.dispatch(
-                      editor._tiptapEditor.view.state.tr.replaceWith(
+                    editor.dispatch(
+                      editor.prosemirrorView.state.tr.replaceWith(
                         props.getPos(),
                         props.getPos() + props.node.nodeSize,
                         content

From abb4af9c69cdadac3716cbad8fcf2d6993227f6a Mon Sep 17 00:00:00 2001
From: matthewlipski <matthewlipski@gmail.com>
Date: Fri, 6 Dec 2024 19:38:02 +0100
Subject: [PATCH 12/18] Updated unit tests

---
 .../api/exporters/html/__snapshots__/file/basic/internal.html   | 2 +-
 .../api/exporters/html/__snapshots__/file/nested/internal.html  | 2 +-
 .../exporters/html/__snapshots__/file/noCaption/internal.html   | 2 +-
 .../api/exporters/html/__snapshots__/file/noName/internal.html  | 2 +-
 .../api/exporters/html/__snapshots__/image/basic/internal.html  | 2 +-
 .../api/exporters/html/__snapshots__/image/nested/internal.html | 2 +-
 .../exporters/html/__snapshots__/image/noCaption/internal.html  | 2 +-
 .../api/exporters/html/__snapshots__/image/noName/internal.html | 2 +-
 .../exporters/html/__snapshots__/image/noPreview/internal.html  | 2 +-
 .../html/__snapshots__/simpleImage/basic/external.html          | 2 +-
 .../html/__snapshots__/simpleImage/basic/internal.html          | 2 +-
 .../html/__snapshots__/simpleImage/nested/external.html         | 2 +-
 .../html/__snapshots__/simpleImage/nested/internal.html         | 2 +-
 .../html/__snapshots__/simpleImage/noCaption/external.html      | 2 +-
 .../html/__snapshots__/simpleImage/noCaption/internal.html      | 2 +-
 .../html/__snapshots__/simpleImage/noName/external.html         | 2 +-
 .../html/__snapshots__/simpleImage/noName/internal.html         | 2 +-
 .../html/__snapshots__/simpleImage/noPreview/external.html      | 2 +-
 .../html/__snapshots__/simpleImage/noPreview/internal.html      | 2 +-
 .../react/src/test/__snapshots__/reactFile/basic/internal.html  | 2 +-
 .../react/src/test/__snapshots__/reactFile/nested/internal.html | 2 +-
 .../src/test/__snapshots__/reactFile/noCaption/internal.html    | 2 +-
 .../react/src/test/__snapshots__/reactFile/noName/internal.html | 2 +-
 .../react/src/test/__snapshots__/reactImage/basic/internal.html | 2 +-
 .../src/test/__snapshots__/reactImage/nested/internal.html      | 2 +-
 .../src/test/__snapshots__/reactImage/noCaption/internal.html   | 2 +-
 .../src/test/__snapshots__/reactImage/noName/internal.html      | 2 +-
 .../src/test/__snapshots__/reactImage/noPreview/internal.html   | 2 +-
 28 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/packages/core/src/api/exporters/html/__snapshots__/file/basic/internal.html b/packages/core/src/api/exporters/html/__snapshots__/file/basic/internal.html
index da6935c5ea..a219d1be53 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/file/basic/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/file/basic/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="file" data-name="example" data-url="exampleURL" data-caption="Caption" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-file-default-preview"><div class="bn-file-default-preview-icon"><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></div><p class="bn-file-default-preview-name">example</p></div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="file" data-name="example" data-url="exampleURL" data-caption="Caption" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-name-with-icon"><div class="bn-file-icon"><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></div><p class="bn-file-name">example</p></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/file/nested/internal.html b/packages/core/src/api/exporters/html/__snapshots__/file/nested/internal.html
index 1983bdaba2..72208b450c 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/file/nested/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/file/nested/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="file" data-name="example" data-url="exampleURL" data-caption="Caption" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-file-default-preview"><div class="bn-file-default-preview-icon"><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></div><p class="bn-file-default-preview-name">example</p></div><p class="bn-file-caption">Caption</p></div></div></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="file" data-name="example" data-url="exampleURL" data-caption="Caption" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-file-default-preview"><div class="bn-file-default-preview-icon"><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></div><p class="bn-file-default-preview-name">example</p></div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="file" data-name="example" data-url="exampleURL" data-caption="Caption" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-name-with-icon"><div class="bn-file-icon"><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></div><p class="bn-file-name">example</p></div><p class="bn-file-caption">Caption</p></div></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="file" data-name="example" data-url="exampleURL" data-caption="Caption" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-name-with-icon"><div class="bn-file-icon"><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></div><p class="bn-file-name">example</p></div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/file/noCaption/internal.html b/packages/core/src/api/exporters/html/__snapshots__/file/noCaption/internal.html
index b51c375d9f..490e9fead0 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/file/noCaption/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/file/noCaption/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="file" data-name="example" data-url="exampleURL" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-file-default-preview"><div class="bn-file-default-preview-icon"><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></div><p class="bn-file-default-preview-name">example</p></div><p class="bn-file-caption"></p></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="file" data-name="example" data-url="exampleURL" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-name-with-icon"><div class="bn-file-icon"><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></div><p class="bn-file-name">example</p></div></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/file/noName/internal.html b/packages/core/src/api/exporters/html/__snapshots__/file/noName/internal.html
index 1558ee2a2c..c16f385f31 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/file/noName/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/file/noName/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="file" data-url="exampleURL" data-caption="Caption" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-file-default-preview"><div class="bn-file-default-preview-icon"><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></div><p class="bn-file-default-preview-name"></p></div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="file" data-url="exampleURL" data-caption="Caption" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-name-with-icon"><div class="bn-file-icon"><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></div><p class="bn-file-name"></p></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/image/basic/internal.html b/packages/core/src/api/exporters/html/__snapshots__/image/basic/internal.html
index 2f075de853..174fdea44f 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/image/basic/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/image/basic/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false" width="0"></div><p class="bn-file-caption" style="width: 256px;">Caption</p></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/image/nested/internal.html b/packages/core/src/api/exporters/html/__snapshots__/image/nested/internal.html
index 5f10fa1d42..00e710fad7 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/image/nested/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/image/nested/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="Caption" draggable="false" width="0"></div><p class="bn-file-caption" style="width: 256px;">Caption</p></div></div></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="Caption" draggable="false" width="0"></div><p class="bn-file-caption" style="width: 256px;">Caption</p></div></div></div></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="Caption" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="Caption" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/image/noCaption/internal.html b/packages/core/src/api/exporters/html/__snapshots__/image/noCaption/internal.html
index 0874d2e700..d19fb52967 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/image/noCaption/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/image/noCaption/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-name="example" data-url="exampleURL" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false" width="0"></div><p class="bn-file-caption"></p></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-name="example" data-url="exampleURL" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false"></div></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/image/noName/internal.html b/packages/core/src/api/exporters/html/__snapshots__/image/noName/internal.html
index 4eda49c520..f6f9a971f4 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/image/noName/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/image/noName/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="Caption" draggable="false" width="0"></div><p class="bn-file-caption" style="width: 256px;">Caption</p></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="Caption" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/image/noPreview/internal.html b/packages/core/src/api/exporters/html/__snapshots__/image/noPreview/internal.html
index f064da6141..a91118a162 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/image/noPreview/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/image/noPreview/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-name="example" data-url="exampleURL" data-caption="Caption" data-show-preview="false" data-preview-width="256" data-file-block=""><div class="bn-file-and-caption-wrapper"><div class="bn-file-default-preview"><div class="bn-file-default-preview-icon"><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></div><p class="bn-file-default-preview-name">example</p></div><p class="bn-file-caption" style="width: 256px;">Caption</p></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-name="example" data-url="exampleURL" data-caption="Caption" data-show-preview="false" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-name-with-icon"><div class="bn-file-icon"><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></div><p class="bn-file-name">example</p></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/basic/external.html b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/basic/external.html
index d05a079a2b..75ad5ef39b 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/basic/external.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/basic/external.html
@@ -1 +1 @@
-<div data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false" width="0"></div><p class="bn-file-caption" style="width: 256px;">Caption</p></div></div>
\ No newline at end of file
+<div style="width: 256px;" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/basic/internal.html b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/basic/internal.html
index b07030e132..d810a8b22d 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/basic/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/basic/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleImage" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false" width="0"></div><p class="bn-file-caption" style="width: 256px;">Caption</p></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleImage" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/nested/external.html b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/nested/external.html
index d4e62f36b1..6cdb4051fd 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/nested/external.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/nested/external.html
@@ -1 +1 @@
-<div data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false" width="0"></div><p class="bn-file-caption" style="width: 256px;">Caption</p></div></div><div data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false" width="0"></div><p class="bn-file-caption" style="width: 256px;">Caption</p></div></div>
\ No newline at end of file
+<div style="width: 256px;" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div><div style="width: 256px;" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/nested/internal.html b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/nested/internal.html
index edf436e66c..2117d7a68a 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/nested/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/nested/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleImage" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false" width="0"></div><p class="bn-file-caption" style="width: 256px;">Caption</p></div></div></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="simpleImage" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false" width="0"></div><p class="bn-file-caption" style="width: 256px;">Caption</p></div></div></div></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleImage" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="simpleImage" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noCaption/external.html b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noCaption/external.html
index eb44e8345c..e604f86aa0 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noCaption/external.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noCaption/external.html
@@ -1 +1 @@
-<div data-name="example" data-url="exampleURL" data-preview-width="256"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false" width="0"></div><p class="bn-file-caption" style="width: 256px;"></p></div></div>
\ No newline at end of file
+<div style="width: 256px;" data-name="example" data-url="exampleURL" data-preview-width="256"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false"></div></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noCaption/internal.html b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noCaption/internal.html
index 59fcce1b4b..3e0149a0a2 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noCaption/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noCaption/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleImage" data-name="example" data-url="exampleURL" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false" width="0"></div><p class="bn-file-caption"></p></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleImage" data-name="example" data-url="exampleURL" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false"></div></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noName/external.html b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noName/external.html
index b7a3d513dc..d04684a50d 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noName/external.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noName/external.html
@@ -1 +1 @@
-<div data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="Caption" draggable="false" width="0"></div><p class="bn-file-caption" style="width: 256px;">Caption</p></div></div>
\ No newline at end of file
+<div style="width: 256px;" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="Caption" draggable="false"></div><p class="bn-file-caption">Caption</p></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noName/internal.html b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noName/internal.html
index 60d9fe0fb8..643b26b3a3 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noName/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noName/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleImage" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="Caption" draggable="false" width="0"></div><p class="bn-file-caption" style="width: 256px;">Caption</p></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleImage" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="Caption" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noPreview/external.html b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noPreview/external.html
index f02bd05eed..e32f659eac 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noPreview/external.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noPreview/external.html
@@ -1 +1 @@
-<div data-name="example" data-url="exampleURL" data-caption="Caption" data-show-preview="false" data-preview-width="256"><div class="bn-file-default-preview"><div class="bn-file-default-preview-icon"><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></div><p class="bn-file-default-preview-name">example</p></div><p class="bn-file-caption" style="width: 256px;">Caption</p></div>
\ No newline at end of file
+<div data-name="example" data-url="exampleURL" data-caption="Caption" data-show-preview="false" data-preview-width="256"><div class="bn-file-name-with-icon"><div class="bn-file-icon"><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></div><p class="bn-file-name">example</p></div><p class="bn-file-caption">Caption</p></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noPreview/internal.html b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noPreview/internal.html
index 4d342eaded..12568d4971 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noPreview/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noPreview/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleImage" data-name="example" data-url="exampleURL" data-caption="Caption" data-show-preview="false" data-preview-width="256"><div class="bn-file-and-caption-wrapper"><div class="bn-file-default-preview"><div class="bn-file-default-preview-icon"><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></div><p class="bn-file-default-preview-name">example</p></div><p class="bn-file-caption" style="width: 256px;">Caption</p></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleImage" data-name="example" data-url="exampleURL" data-caption="Caption" data-show-preview="false" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-file-name-with-icon"><div class="bn-file-icon"><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></div><p class="bn-file-name">example</p></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/reactFile/basic/internal.html b/packages/react/src/test/__snapshots__/reactFile/basic/internal.html
index b3e7b4955b..ea52dffd75 100644
--- a/packages/react/src/test/__snapshots__/reactFile/basic/internal.html
+++ b/packages/react/src/test/__snapshots__/reactFile/basic/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="file" data-name="example" data-url="exampleURL" data-caption="Caption" data-node-view-wrapper="" style="white-space: normal;"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-file-default-preview" contenteditable="false" draggable="false"><div class="bn-file-default-preview-icon"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><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></div><p class="bn-file-default-preview-name">example</p></div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="file" data-name="example" data-url="exampleURL" data-caption="Caption" data-node-view-wrapper="" style="white-space: normal;"><div class="bn-file-block-content-wrapper"><div class="bn-file-name-with-icon" contenteditable="false" draggable="false"><div class="bn-file-icon"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><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></div><p class="bn-file-name">example</p></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/reactFile/nested/internal.html b/packages/react/src/test/__snapshots__/reactFile/nested/internal.html
index 393a59c490..c387803036 100644
--- a/packages/react/src/test/__snapshots__/reactFile/nested/internal.html
+++ b/packages/react/src/test/__snapshots__/reactFile/nested/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="file" data-name="example" data-url="exampleURL" data-caption="Caption" data-node-view-wrapper="" style="white-space: normal;"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-file-default-preview" contenteditable="false" draggable="false"><div class="bn-file-default-preview-icon"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><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></div><p class="bn-file-default-preview-name">example</p></div><p class="bn-file-caption">Caption</p></div></div></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="file" data-name="example" data-url="exampleURL" data-caption="Caption" data-node-view-wrapper="" style="white-space: normal;"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-file-default-preview" contenteditable="false" draggable="false"><div class="bn-file-default-preview-icon"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><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></div><p class="bn-file-default-preview-name">example</p></div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="file" data-name="example" data-url="exampleURL" data-caption="Caption" data-node-view-wrapper="" style="white-space: normal;"><div class="bn-file-block-content-wrapper"><div class="bn-file-name-with-icon" contenteditable="false" draggable="false"><div class="bn-file-icon"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><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></div><p class="bn-file-name">example</p></div><p class="bn-file-caption">Caption</p></div></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="file" data-name="example" data-url="exampleURL" data-caption="Caption" data-node-view-wrapper="" style="white-space: normal;"><div class="bn-file-block-content-wrapper"><div class="bn-file-name-with-icon" contenteditable="false" draggable="false"><div class="bn-file-icon"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><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></div><p class="bn-file-name">example</p></div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/reactFile/noCaption/internal.html b/packages/react/src/test/__snapshots__/reactFile/noCaption/internal.html
index 0a97c8d9b1..25dd7ea3ae 100644
--- a/packages/react/src/test/__snapshots__/reactFile/noCaption/internal.html
+++ b/packages/react/src/test/__snapshots__/reactFile/noCaption/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="file" data-name="example" data-url="exampleURL" data-node-view-wrapper="" style="white-space: normal;"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-file-default-preview" contenteditable="false" draggable="false"><div class="bn-file-default-preview-icon"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><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></div><p class="bn-file-default-preview-name">example</p></div></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="file" data-name="example" data-url="exampleURL" data-node-view-wrapper="" style="white-space: normal;"><div class="bn-file-block-content-wrapper"><div class="bn-file-name-with-icon" contenteditable="false" draggable="false"><div class="bn-file-icon"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><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></div><p class="bn-file-name">example</p></div></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/reactFile/noName/internal.html b/packages/react/src/test/__snapshots__/reactFile/noName/internal.html
index e957d5681b..05f6bbbb63 100644
--- a/packages/react/src/test/__snapshots__/reactFile/noName/internal.html
+++ b/packages/react/src/test/__snapshots__/reactFile/noName/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="file" data-url="exampleURL" data-caption="Caption" data-node-view-wrapper="" style="white-space: normal;"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-file-default-preview" contenteditable="false" draggable="false"><div class="bn-file-default-preview-icon"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><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></div><p class="bn-file-default-preview-name"></p></div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="file" data-url="exampleURL" data-caption="Caption" data-node-view-wrapper="" style="white-space: normal;"><div class="bn-file-block-content-wrapper"><div class="bn-file-name-with-icon" contenteditable="false" draggable="false"><div class="bn-file-icon"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><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></div><p class="bn-file-name"></p></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/reactImage/basic/internal.html b/packages/react/src/test/__snapshots__/reactImage/basic/internal.html
index bc328151fe..326340c0c2 100644
--- a/packages/react/src/test/__snapshots__/reactImage/basic/internal.html
+++ b/packages/react/src/test/__snapshots__/reactImage/basic/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-node-view-wrapper="" style="white-space: normal;"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><p class="bn-file-caption">Caption</p></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-node-view-wrapper="" style="white-space: normal;"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="Caption" contenteditable="false" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/reactImage/nested/internal.html b/packages/react/src/test/__snapshots__/reactImage/nested/internal.html
index 05f0a4e7ea..0e44c4e14a 100644
--- a/packages/react/src/test/__snapshots__/reactImage/nested/internal.html
+++ b/packages/react/src/test/__snapshots__/reactImage/nested/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-node-view-wrapper="" style="white-space: normal;"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><p class="bn-file-caption">Caption</p></div></div></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="image" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-node-view-wrapper="" style="white-space: normal;"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><p class="bn-file-caption">Caption</p></div></div></div></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-node-view-wrapper="" style="white-space: normal;"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="Caption" contenteditable="false" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="image" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-node-view-wrapper="" style="white-space: normal;"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="Caption" contenteditable="false" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/reactImage/noCaption/internal.html b/packages/react/src/test/__snapshots__/reactImage/noCaption/internal.html
index 29537a20ad..ea8c668159 100644
--- a/packages/react/src/test/__snapshots__/reactImage/noCaption/internal.html
+++ b/packages/react/src/test/__snapshots__/reactImage/noCaption/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-name="example" data-url="exampleURL" data-preview-width="256" data-node-view-wrapper="" style="white-space: normal;"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-name="example" data-url="exampleURL" data-preview-width="256" data-node-view-wrapper="" style="white-space: normal;"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="BlockNote image" contenteditable="false" draggable="false"></div></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/reactImage/noName/internal.html b/packages/react/src/test/__snapshots__/reactImage/noName/internal.html
index a16987a46c..e06868f523 100644
--- a/packages/react/src/test/__snapshots__/reactImage/noName/internal.html
+++ b/packages/react/src/test/__snapshots__/reactImage/noName/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-node-view-wrapper="" style="white-space: normal;"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><p class="bn-file-caption">Caption</p></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-node-view-wrapper="" style="white-space: normal;"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="Caption" contenteditable="false" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/react/src/test/__snapshots__/reactImage/noPreview/internal.html b/packages/react/src/test/__snapshots__/reactImage/noPreview/internal.html
index eb28e8394d..e465f950ad 100644
--- a/packages/react/src/test/__snapshots__/reactImage/noPreview/internal.html
+++ b/packages/react/src/test/__snapshots__/reactImage/noPreview/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-name="example" data-url="exampleURL" data-caption="Caption" data-show-preview="false" data-preview-width="256" data-node-view-wrapper="" style="white-space: normal;"><div class="bn-file-block-content-wrapper"><div class="bn-file-and-caption-wrapper"><div class="bn-file-default-preview" contenteditable="false" draggable="false"><div class="bn-file-default-preview-icon"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><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></div><p class="bn-file-default-preview-name">example</p></div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-name="example" data-url="exampleURL" data-caption="Caption" data-show-preview="false" data-preview-width="256" data-node-view-wrapper="" style="white-space: normal;"><div class="bn-file-block-content-wrapper"><div class="bn-file-name-with-icon" contenteditable="false" draggable="false"><div class="bn-file-icon"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><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></div><p class="bn-file-name">example</p></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>
\ No newline at end of file

From 299a37a1567893a298ff0ba7b6184b1e1a114275 Mon Sep 17 00:00:00 2001
From: matthewlipski <matthewlipski@gmail.com>
Date: Mon, 9 Dec 2024 18:58:54 +0100
Subject: [PATCH 13/18] Implemented PR feedback

---
 .../04-pdf-file-block/PDF.tsx                 |   6 +-
 .../FileBlockContent/fileBlockHelpers.ts      | 140 +++++++++---------
 packages/core/src/editor/BlockNoteEditor.ts   |   4 +-
 .../FileBlockContent/fileBlockHelpers.tsx     |  32 ++--
 .../blocks/FileBlockContent/useResolveUrl.tsx |   4 +-
 .../ImageBlockContent/ImageBlockContent.tsx   |   4 -
 .../VideoBlockContent/VideoBlockContent.tsx   |   4 -
 .../DefaultButtons/FileDownloadButton.tsx     |  15 +-
 8 files changed, 105 insertions(+), 104 deletions(-)

diff --git a/examples/06-custom-schema/04-pdf-file-block/PDF.tsx b/examples/06-custom-schema/04-pdf-file-block/PDF.tsx
index 7d65d059ae..447f47fae2 100644
--- a/examples/06-custom-schema/04-pdf-file-block/PDF.tsx
+++ b/examples/06-custom-schema/04-pdf-file-block/PDF.tsx
@@ -5,7 +5,7 @@ import {
   ResizableFileBlockWrapper,
 } from "@blocknote/react";
 
-import { RiImage2Fill } from "react-icons/ri";
+import { RiFilePdfFill } from "react-icons/ri";
 
 import "./styles.css";
 
@@ -53,8 +53,8 @@ export const PDF = createReactBlockSpec(
     render: (props) => (
       <ResizableFileBlockWrapper
         {...(props as any)}
-        buttonText={props.editor.dictionary.file_blocks.image.add_button_text}
-        buttonIcon={<RiImage2Fill size={24} />}>
+        bbuttonText={"Add PDF"}
+        buttonIcon={<RiFilePdfFill size={24} />}>
         <PDFPreview {...(props as any)} />
       </ResizableFileBlockWrapper>
     ),
diff --git a/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts b/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts
index e43ea02e39..3744b9a131 100644
--- a/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts
+++ b/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts
@@ -103,65 +103,71 @@ export const createFileBlockWrapper = (
   const wrapper = document.createElement("div");
   wrapper.className = "bn-file-block-content-wrapper";
 
-  const loading = document.createElement("div");
-  loading.className = "bn-file-loading-preview";
-  loading.textContent = "Loading...";
+  // Show the add file button if the file has not been uploaded yet. Change to
+  // show a loader if a file upload for the block begins.
+  if (block.props.url === "") {
+    const addFileButton = createAddFileButton(
+      block,
+      editor,
+      buttonText,
+      buttonIcon
+    );
+    wrapper.appendChild(addFileButton.dom);
 
-  const addFileButton = createAddFileButton(
-    block,
-    editor,
-    buttonText,
-    buttonIcon
-  );
+    const destroyUploadStartHandler = editor.onUploadStart((blockId) => {
+      if (blockId === block.id) {
+        wrapper.removeChild(addFileButton.dom);
+
+        const loading = document.createElement("div");
+        loading.className = "bn-file-loading-preview";
+        loading.textContent = "Loading...";
+        wrapper.appendChild(loading);
+      }
+    });
 
-  const fileNameWithIcon = createFileNameWithIcon(block);
+    return {
+      dom: wrapper,
+      destroy: () => {
+        destroyUploadStartHandler();
+        addFileButton.destroy();
+      },
+    };
+  }
 
-  const caption = document.createElement("p");
-  caption.className = "bn-file-caption";
-  caption.textContent = block.props.caption;
+  const ret: { dom: HTMLElement; destroy?: () => void } = { dom: wrapper };
 
-  const destroyUploadStartHandler = editor.onUploadStart((blockId) => {
-    if (blockId === block.id) {
-      wrapper.removeChild(addFileButton.dom);
-      wrapper.appendChild(loading);
-    }
-  });
+  // Show the file preview, or the file name and icon.
+  if (block.props.showPreview === false || !element) {
+    // Show file name and icon.
+    const fileNameWithIcon = createFileNameWithIcon(block);
+    wrapper.appendChild(fileNameWithIcon.dom);
 
-  if (block.props.url === "") {
-    // Show the add file button if the file has not been uploaded yet.
-    wrapper.appendChild(addFileButton.dom);
+    ret.destroy = () => {
+      fileNameWithIcon.destroy?.();
+    };
   } else {
-    // Show the file preview and caption if the file has been uploaded.
-    if (block.props.showPreview === false || !element) {
-      // Use default preview.
-      wrapper.appendChild(fileNameWithIcon.dom);
-    } else {
-      // Use custom preview.
-      wrapper.appendChild(element.dom);
-    }
-    if (block.props.caption) {
-      // Show the caption if there is one.
-      wrapper.appendChild(caption);
-    }
+    // Show file preview.
+    wrapper.appendChild(element.dom);
   }
 
-  return {
-    dom: wrapper,
-    destroy: () => {
-      destroyUploadStartHandler();
-      addFileButton.destroy();
-      fileNameWithIcon.destroy?.();
-    },
-  };
+  // Show the caption if there is one.
+  if (block.props.caption) {
+    const caption = document.createElement("p");
+    caption.className = "bn-file-caption";
+    caption.textContent = block.props.caption;
+    wrapper.appendChild(caption);
+  }
+
+  return ret;
 };
 
 export const createResizableFileBlockWrapper = (
   block: BlockFromConfig<FileBlockConfig, any, any>,
   editor: BlockNoteEditor<any, any, any>,
-  element?: { dom: HTMLElement; destroy?: () => void },
-  resizeHandlesContainerElement?: HTMLElement,
-  buttonText?: string,
-  buttonIcon?: HTMLElement
+  element: { dom: HTMLElement; destroy?: () => void },
+  resizeHandlesContainerElement: HTMLElement,
+  buttonText: string,
+  buttonIcon: HTMLElement
 ): { dom: HTMLElement; destroy: () => void } => {
   const { dom, destroy } = createFileBlockWrapper(
     block,
@@ -175,8 +181,6 @@ export const createResizableFileBlockWrapper = (
     wrapper.style.width = `${block.props.previewWidth}px`;
   }
 
-  const resizeHandlesContainer = resizeHandlesContainerElement || wrapper;
-
   const leftResizeHandle = document.createElement("div");
   leftResizeHandle.className = "bn-resize-handle";
   leftResizeHandle.style.left = "4px";
@@ -193,6 +197,7 @@ export const createResizableFileBlockWrapper = (
         initialClientX: number;
       }
     | undefined;
+  let width = block.props.previewWidth! as number;
 
   // Updates the element width with an updated width depending on the cursor X
   // offset from when the resize began, and which resize handle is being used.
@@ -200,11 +205,11 @@ export const createResizableFileBlockWrapper = (
     if (!resizeParams) {
       if (
         !editor.isEditable &&
-        resizeHandlesContainer.contains(leftResizeHandle) &&
-        resizeHandlesContainer.contains(rightResizeHandle)
+        resizeHandlesContainerElement.contains(leftResizeHandle) &&
+        resizeHandlesContainerElement.contains(rightResizeHandle)
       ) {
-        resizeHandlesContainer.removeChild(leftResizeHandle);
-        resizeHandlesContainer.removeChild(rightResizeHandle);
+        resizeHandlesContainerElement.removeChild(leftResizeHandle);
+        resizeHandlesContainerElement.removeChild(rightResizeHandle);
       }
 
       return;
@@ -241,11 +246,8 @@ export const createResizableFileBlockWrapper = (
 
     // Ensures the element is not wider than the editor and not narrower than a
     // predetermined minimum width.
-    if (newWidth < minWidth) {
-      wrapper.style.width = `${minWidth}px`;
-    } else {
-      wrapper.style.width = `${newWidth}px`;
-    }
+    width = Math.max(newWidth, minWidth);
+    wrapper.style.width = `${width}px`;
   };
   // Stops mouse movements from resizing the element and updates the block's
   // `width` prop to the new value.
@@ -255,11 +257,11 @@ export const createResizableFileBlockWrapper = (
       (!event.target ||
         !wrapper.contains(event.target as Node) ||
         !editor.isEditable) &&
-      resizeHandlesContainer.contains(leftResizeHandle) &&
-      resizeHandlesContainer.contains(rightResizeHandle)
+      resizeHandlesContainerElement.contains(leftResizeHandle) &&
+      resizeHandlesContainerElement.contains(rightResizeHandle)
     ) {
-      resizeHandlesContainer.removeChild(leftResizeHandle);
-      resizeHandlesContainer.removeChild(rightResizeHandle);
+      resizeHandlesContainerElement.removeChild(leftResizeHandle);
+      resizeHandlesContainerElement.removeChild(rightResizeHandle);
     }
 
     if (!resizeParams) {
@@ -270,7 +272,7 @@ export const createResizableFileBlockWrapper = (
 
     editor.updateBlock(block, {
       props: {
-        previewWidth: parseInt(wrapper.style.width.replace("px", "")),
+        previewWidth: width,
       },
     });
   };
@@ -278,8 +280,8 @@ export const createResizableFileBlockWrapper = (
   // Shows the resize handles when hovering over the wrapper with the cursor.
   const wrapperMouseEnterHandler = () => {
     if (editor.isEditable) {
-      resizeHandlesContainer.appendChild(leftResizeHandle);
-      resizeHandlesContainer.appendChild(rightResizeHandle);
+      resizeHandlesContainerElement.appendChild(leftResizeHandle);
+      resizeHandlesContainerElement.appendChild(rightResizeHandle);
     }
   };
   // Hides the resize handles when the cursor leaves the wrapper, unless the
@@ -298,11 +300,11 @@ export const createResizableFileBlockWrapper = (
 
     if (
       editor.isEditable &&
-      resizeHandlesContainer.contains(leftResizeHandle) &&
-      resizeHandlesContainer.contains(rightResizeHandle)
+      resizeHandlesContainerElement.contains(leftResizeHandle) &&
+      resizeHandlesContainerElement.contains(rightResizeHandle)
     ) {
-      resizeHandlesContainer.removeChild(leftResizeHandle);
-      resizeHandlesContainer.removeChild(rightResizeHandle);
+      resizeHandlesContainerElement.removeChild(leftResizeHandle);
+      resizeHandlesContainerElement.removeChild(rightResizeHandle);
     }
   };
 
@@ -343,7 +345,7 @@ export const createResizableFileBlockWrapper = (
   return {
     dom: wrapper,
     destroy: () => {
-      destroy();
+      destroy?.();
       window.removeEventListener("mousemove", windowMouseMoveHandler);
       window.removeEventListener("mouseup", windowMouseUpHandler);
       wrapper.removeEventListener("mouseenter", wrapperMouseEnterHandler);
diff --git a/packages/core/src/editor/BlockNoteEditor.ts b/packages/core/src/editor/BlockNoteEditor.ts
index cde89a3240..f974af072f 100644
--- a/packages/core/src/editor/BlockNoteEditor.ts
+++ b/packages/core/src/editor/BlockNoteEditor.ts
@@ -346,7 +346,7 @@ export class BlockNoteEditor<
   private onUploadStartCallbacks: ((blockId?: string) => void)[] = [];
   private onUploadEndCallbacks: ((blockId?: string) => void)[] = [];
 
-  public readonly resolveFileUrl: (url: string) => Promise<string>;
+  public readonly resolveFileUrl?: (url: string) => Promise<string>;
 
   public get pmSchema() {
     return this._pmSchema;
@@ -458,7 +458,7 @@ export class BlockNoteEditor<
       };
     }
 
-    this.resolveFileUrl = newOptions.resolveFileUrl || (async (url) => url);
+    this.resolveFileUrl = newOptions.resolveFileUrl;
     this.headless = newOptions._headless;
 
     if (newOptions.collaboration && newOptions.initialContent) {
diff --git a/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx b/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
index 4b94340410..6d09a5ca96 100644
--- a/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
+++ b/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
@@ -1,7 +1,6 @@
 import { FileBlockConfig } from "@blocknote/core";
 import {
   CSSProperties,
-  forwardRef,
   ReactNode,
   useCallback,
   useEffect,
@@ -76,9 +75,11 @@ export const FileNameWithIcon = (
   </div>
 );
 
-export const FileBlockWrapper = forwardRef<
-  HTMLDivElement,
-  Omit<ReactCustomBlockRenderProps<FileBlockConfig, any, any>, "contentRef"> & {
+export const FileBlockWrapper = (
+  props: Omit<
+    ReactCustomBlockRenderProps<FileBlockConfig, any, any>,
+    "contentRef"
+  > & {
     buttonText?: string;
     buttonIcon?: ReactNode;
     children?: ReactNode;
@@ -89,7 +90,7 @@ export const FileBlockWrapper = forwardRef<
     onMouseLeave?: () => void;
     style?: CSSProperties;
   }
->((props, ref) => {
+) => {
   const showLoader = useUploadLoading(props.block.id);
 
   return (
@@ -97,8 +98,7 @@ export const FileBlockWrapper = forwardRef<
       className={"bn-file-block-content-wrapper"}
       onMouseEnter={props.onMouseEnter}
       onMouseLeave={props.onMouseLeave}
-      style={props.style}
-      ref={ref}>
+      style={props.style}>
       {showLoader ? (
         // Show loader while a file is being uploaded.
         <div className={"bn-file-loading-preview"}>Loading...</div>
@@ -106,31 +106,32 @@ export const FileBlockWrapper = forwardRef<
         // Show the add file button if the file has not been uploaded yet.
         <AddFileButton {...props} />
       ) : (
-        // Show the file preview and caption if the file has been uploaded.
+        // Show the file preview, or the file name and icon.
         <>
           {props.block.props.showPreview === false || !props.children ? (
-            // Use default preview.
+            // Show file name and icon.
             <FileNameWithIcon {...props} />
           ) : (
-            // Use custom preview.
+            // Show preview.
             props.children
           )}
           {props.block.props.caption && (
+            // Show the caption if there is one.
             <p className={"bn-file-caption"}>{props.block.props.caption}</p>
           )}
         </>
       )}
     </div>
   );
-});
+};
 
 export const ResizableFileBlockWrapper = (
   props: Omit<
     ReactCustomBlockRenderProps<FileBlockConfig, any, any>,
     "contentRef"
   > & {
-    buttonText?: string;
-    buttonIcon?: ReactNode;
+    buttonText: string;
+    buttonIcon: ReactNode;
     children: ReactNode;
   }
 ) => {
@@ -265,9 +266,8 @@ export const ResizableFileBlockWrapper = (
         props.block.props.url && !showLoader && props.block.props.showPreview
           ? { width: `${width}px` }
           : undefined
-      }
-      ref={ref}>
-      <div className={"bn-visual-media-wrapper"}>
+      }>
+      <div className={"bn-visual-media-wrapper"} ref={ref}>
         {props.children}
         {(hovered || resizeParams) && (
           <>
diff --git a/packages/react/src/blocks/FileBlockContent/useResolveUrl.tsx b/packages/react/src/blocks/FileBlockContent/useResolveUrl.tsx
index 2dcb4112f8..55fac55000 100644
--- a/packages/react/src/blocks/FileBlockContent/useResolveUrl.tsx
+++ b/packages/react/src/blocks/FileBlockContent/useResolveUrl.tsx
@@ -21,7 +21,9 @@ export function useResolveUrl(fetchUrl: string) {
       setLoadingState("loading");
 
       try {
-        url = await editor.resolveFileUrl(fetchUrl);
+        url = editor.resolveFileUrl
+          ? await editor.resolveFileUrl(fetchUrl)
+          : fetchUrl;
       } catch (error) {
         setLoadingState("error");
         return;
diff --git a/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx b/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
index fd156cf906..4ce30fc5cb 100644
--- a/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
+++ b/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
@@ -1,5 +1,4 @@
 import { FileBlockConfig, imageBlockConfig, imageParse } from "@blocknote/core";
-import { useRef } from "react";
 import { RiImage2Fill } from "react-icons/ri";
 
 import {
@@ -19,8 +18,6 @@ export const ImagePreview = (
     "contentRef"
   >
 ) => {
-  const imgRef = useRef<HTMLImageElement>(null);
-
   const resolved = useResolveUrl(props.block.props.url!);
 
   return (
@@ -34,7 +31,6 @@ export const ImagePreview = (
       alt={props.block.props.caption || "BlockNote image"}
       contentEditable={false}
       draggable={false}
-      ref={imgRef}
     />
   );
 };
diff --git a/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx b/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
index 2d44e033bd..1d63d084c6 100644
--- a/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
+++ b/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
@@ -1,5 +1,4 @@
 import { FileBlockConfig, videoBlockConfig, videoParse } from "@blocknote/core";
-import { useRef } from "react";
 import { RiVideoFill } from "react-icons/ri";
 
 import {
@@ -19,8 +18,6 @@ export const VideoPreview = (
     "contentRef"
   >
 ) => {
-  const videoRef = useRef<HTMLVideoElement>(null);
-
   const resolved = useResolveUrl(props.block.props.url!);
 
   return (
@@ -34,7 +31,6 @@ export const VideoPreview = (
       controls={true}
       contentEditable={false}
       draggable={false}
-      ref={videoRef}
     />
   );
 };
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/FileDownloadButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/FileDownloadButton.tsx
index 94fb10d8b1..5ffa15a285 100644
--- a/packages/react/src/components/FormattingToolbar/DefaultButtons/FileDownloadButton.tsx
+++ b/packages/react/src/components/FormattingToolbar/DefaultButtons/FileDownloadButton.tsx
@@ -44,11 +44,16 @@ export const FileDownloadButton = () => {
   const onClick = useCallback(() => {
     if (fileBlock && fileBlock.props.url) {
       editor.focus();
-      editor
-        .resolveFileUrl(fileBlock.props.url)
-        .then((downloadUrl) =>
-          window.open(sanitizeUrl(downloadUrl, window.location.href))
-        );
+
+      if (!editor.resolveFileUrl) {
+        window.open(sanitizeUrl(fileBlock.props.url, window.location.href));
+      } else {
+        editor
+          .resolveFileUrl(fileBlock.props.url)
+          .then((downloadUrl) =>
+            window.open(sanitizeUrl(downloadUrl, window.location.href))
+          );
+      }
     }
   }, [editor, fileBlock]);
 

From 054ce70d1f491f8df855fc432d93b86089b6a39b Mon Sep 17 00:00:00 2001
From: matthewlipski <matthewlipski@gmail.com>
Date: Mon, 9 Dec 2024 18:59:16 +0100
Subject: [PATCH 14/18] Fixes unit tests

---
 tests/src/end-to-end/images/images.test.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/tests/src/end-to-end/images/images.test.ts b/tests/src/end-to-end/images/images.test.ts
index 2cc1d5a009..9577a2acc7 100644
--- a/tests/src/end-to-end/images/images.test.ts
+++ b/tests/src/end-to-end/images/images.test.ts
@@ -73,11 +73,9 @@ test.describe("Check Image Block and Toolbar functionality", () => {
 
     await page.click(`img`);
 
-    await page.waitForSelector(
-      `[class*="bn-visual-media-resize-handle"][style*="right"]`
-    );
+    await page.waitForSelector(`[class*="bn-resize-handle"][style*="right"]`);
     const resizeHandle = page.locator(
-      `[class*="bn-visual-media-resize-handle"][style*="right"]`
+      `[class*="bn-resize-handle"][style*="right"]`
     );
     const resizeHandleBoundingBox = (await resizeHandle.boundingBox())!;
     await page.mouse.move(

From 2b0a5ce034122b6b7322704a9e0b6d627d751974 Mon Sep 17 00:00:00 2001
From: matthewlipski <matthewlipski@gmail.com>
Date: Mon, 9 Dec 2024 19:35:27 +0100
Subject: [PATCH 15/18] Implemented PR feedback

---
 .../AudioBlockContent/AudioBlockContent.ts    |  12 +-
 ...ioBlockHelpers.ts => parseAudioElement.ts} |   0
 .../FileBlockContent/FileBlockContent.ts      |  10 +-
 .../FileBlockContent/fileBlockHelpers.ts      | 420 ------------------
 .../helpers/parse/parseEmbedElement.ts        |   5 +
 .../helpers/parse/parseFigureElement.ts       |  16 +
 .../helpers/render/createAddFileButton.ts     |  63 +++
 .../helpers/render/createFileBlockWrapper.ts  |  80 ++++
 .../helpers/render/createFileNameWithIcon.ts  |  24 +
 .../render/createResizableFileBlockWrapper.ts | 204 +++++++++
 .../toExternalHTML/createFigureWithCaption.ts |  13 +
 .../toExternalHTML/createLinkWithCaption.ts   |  15 +
 .../ImageBlockContent/ImageBlockContent.ts    |  12 +-
 ...geBlockHelpers.ts => parseImageElement.ts} |   0
 .../VideoBlockContent/VideoBlockContent.ts    |  13 +-
 ...eoBlockHelpers.ts => parseVideoElement.ts} |   0
 packages/core/src/index.ts                    |  10 +-
 .../AudioBlockContent/AudioBlockContent.tsx   |   8 +-
 .../FileBlockContent/FileBlockContent.tsx     |   3 +-
 .../helpers/render/AddFileButton.tsx          |  51 +++
 .../helpers/render/FileBlockWrapper.tsx       |  57 +++
 .../helpers/render/FileNameWithIcon.tsx       |  21 +
 .../render/ResizableFileBlockWrapper.tsx}     | 148 +-----
 .../toExternalHTML/FigureWithCaption.tsx      |  11 +
 .../toExternalHTML/LinkWithCaption.tsx        |  11 +
 .../ImageBlockContent/ImageBlockContent.tsx   |   8 +-
 .../VideoBlockContent/VideoBlockContent.tsx   |   8 +-
 packages/react/src/index.ts                   |   7 +-
 28 files changed, 619 insertions(+), 611 deletions(-)
 rename packages/core/src/blocks/AudioBlockContent/{audioBlockHelpers.ts => parseAudioElement.ts} (100%)
 delete mode 100644 packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts
 create mode 100644 packages/core/src/blocks/FileBlockContent/helpers/parse/parseEmbedElement.ts
 create mode 100644 packages/core/src/blocks/FileBlockContent/helpers/parse/parseFigureElement.ts
 create mode 100644 packages/core/src/blocks/FileBlockContent/helpers/render/createAddFileButton.ts
 create mode 100644 packages/core/src/blocks/FileBlockContent/helpers/render/createFileBlockWrapper.ts
 create mode 100644 packages/core/src/blocks/FileBlockContent/helpers/render/createFileNameWithIcon.ts
 create mode 100644 packages/core/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts
 create mode 100644 packages/core/src/blocks/FileBlockContent/helpers/toExternalHTML/createFigureWithCaption.ts
 create mode 100644 packages/core/src/blocks/FileBlockContent/helpers/toExternalHTML/createLinkWithCaption.ts
 rename packages/core/src/blocks/ImageBlockContent/{imageBlockHelpers.ts => parseImageElement.ts} (100%)
 rename packages/core/src/blocks/VideoBlockContent/{videoBlockHelpers.ts => parseVideoElement.ts} (100%)
 create mode 100644 packages/react/src/blocks/FileBlockContent/helpers/render/AddFileButton.tsx
 create mode 100644 packages/react/src/blocks/FileBlockContent/helpers/render/FileBlockWrapper.tsx
 create mode 100644 packages/react/src/blocks/FileBlockContent/helpers/render/FileNameWithIcon.tsx
 rename packages/react/src/blocks/FileBlockContent/{fileBlockHelpers.tsx => helpers/render/ResizableFileBlockWrapper.tsx} (56%)
 create mode 100644 packages/react/src/blocks/FileBlockContent/helpers/toExternalHTML/FigureWithCaption.tsx
 create mode 100644 packages/react/src/blocks/FileBlockContent/helpers/toExternalHTML/LinkWithCaption.tsx

diff --git a/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts b/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts
index d80cecb8e5..4357755bea 100644
--- a/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts
+++ b/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts
@@ -8,13 +8,11 @@ import {
 } from "../../schema/index.js";
 import { defaultProps } from "../defaultProps.js";
 
-import {
-  createFigureWithCaption,
-  createFileBlockWrapper,
-  createLinkWithCaption,
-  parseFigureElement,
-} from "../FileBlockContent/fileBlockHelpers.js";
-import { parseAudioElement } from "./audioBlockHelpers.js";
+import { parseFigureElement } from "../FileBlockContent/helpers/parse/parseFigureElement.js";
+import { createFileBlockWrapper } from "../FileBlockContent/helpers/render/createFileBlockWrapper.js";
+import { createFigureWithCaption } from "../FileBlockContent/helpers/toExternalHTML/createFigureWithCaption.js";
+import { createLinkWithCaption } from "../FileBlockContent/helpers/toExternalHTML/createLinkWithCaption.js";
+import { parseAudioElement } from "./parseAudioElement.js";
 
 export const FILE_AUDIO_ICON_SVG =
   '<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>';
diff --git a/packages/core/src/blocks/AudioBlockContent/audioBlockHelpers.ts b/packages/core/src/blocks/AudioBlockContent/parseAudioElement.ts
similarity index 100%
rename from packages/core/src/blocks/AudioBlockContent/audioBlockHelpers.ts
rename to packages/core/src/blocks/AudioBlockContent/parseAudioElement.ts
diff --git a/packages/core/src/blocks/FileBlockContent/FileBlockContent.ts b/packages/core/src/blocks/FileBlockContent/FileBlockContent.ts
index ffed617356..80ba39b012 100644
--- a/packages/core/src/blocks/FileBlockContent/FileBlockContent.ts
+++ b/packages/core/src/blocks/FileBlockContent/FileBlockContent.ts
@@ -6,12 +6,10 @@ import {
   createBlockSpec,
 } from "../../schema/index.js";
 import { defaultProps } from "../defaultProps.js";
-import {
-  createFileBlockWrapper,
-  createLinkWithCaption,
-  parseEmbedElement,
-  parseFigureElement,
-} from "./fileBlockHelpers.js";
+import { parseEmbedElement } from "./helpers/parse/parseEmbedElement.js";
+import { parseFigureElement } from "./helpers/parse/parseFigureElement.js";
+import { createFileBlockWrapper } from "./helpers/render/createFileBlockWrapper.js";
+import { createLinkWithCaption } from "./helpers/toExternalHTML/createLinkWithCaption.js";
 
 export const filePropSchema = {
   backgroundColor: defaultProps.backgroundColor,
diff --git a/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts b/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts
deleted file mode 100644
index 3744b9a131..0000000000
--- a/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts
+++ /dev/null
@@ -1,420 +0,0 @@
-import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
-import {
-  BlockFromConfig,
-  BlockSchemaWithBlock,
-  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 createAddFileButton = (
-  block: BlockFromConfig<FileBlockConfig, any, any>,
-  editor: BlockNoteEditor<any, any, any>,
-  buttonText?: string,
-  buttonIcon?: HTMLElement
-) => {
-  const addFileButton = document.createElement("div");
-  addFileButton.className = "bn-add-file-button";
-
-  const addFileButtonIcon = document.createElement("div");
-  addFileButtonIcon.className = "bn-add-file-button-icon";
-  if (buttonIcon) {
-    addFileButtonIcon.appendChild(buttonIcon);
-  } else {
-    addFileButtonIcon.innerHTML =
-      '<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>';
-  }
-  addFileButton.appendChild(addFileButtonIcon);
-
-  const addFileButtonText = document.createElement("p");
-  addFileButtonText.className = "bn-add-file-button-text";
-  addFileButtonText.innerHTML =
-    buttonText || editor.dictionary.file_blocks.file.add_button_text;
-  addFileButton.appendChild(addFileButtonText);
-
-  // Prevents focus from moving to the button.
-  const addFileButtonMouseDownHandler = (event: MouseEvent) => {
-    event.preventDefault();
-  };
-  // Opens the file toolbar.
-  const addFileButtonClickHandler = () => {
-    editor.dispatch(
-      editor._tiptapEditor.state.tr.setMeta(editor.filePanel!.plugin, {
-        block: block,
-      })
-    );
-  };
-  addFileButton.addEventListener(
-    "mousedown",
-    addFileButtonMouseDownHandler,
-    true
-  );
-  addFileButton.addEventListener("click", addFileButtonClickHandler, true);
-
-  return {
-    dom: addFileButton,
-    destroy: () => {
-      addFileButton.removeEventListener(
-        "mousedown",
-        addFileButtonMouseDownHandler,
-        true
-      );
-      addFileButton.removeEventListener(
-        "click",
-        addFileButtonClickHandler,
-        true
-      );
-    },
-  };
-};
-
-export const createFileNameWithIcon = (
-  block: BlockFromConfig<FileBlockConfig, any, any>
-): { dom: HTMLElement; destroy?: () => void } => {
-  const file = document.createElement("div");
-  file.className = "bn-file-name-with-icon";
-
-  const icon = document.createElement("div");
-  icon.className = "bn-file-icon";
-  icon.innerHTML = FILE_ICON_SVG;
-  file.appendChild(icon);
-
-  const fileName = document.createElement("p");
-  fileName.className = "bn-file-name";
-  fileName.textContent = block.props.name;
-  file.appendChild(fileName);
-
-  return {
-    dom: file,
-  };
-};
-
-export const createFileBlockWrapper = (
-  block: BlockFromConfig<FileBlockConfig, any, any>,
-  editor: BlockNoteEditor<
-    BlockSchemaWithBlock<FileBlockConfig["type"], FileBlockConfig>,
-    any,
-    any
-  >,
-  element?: { dom: HTMLElement; destroy?: () => void },
-  buttonText?: string,
-  buttonIcon?: HTMLElement
-) => {
-  const wrapper = document.createElement("div");
-  wrapper.className = "bn-file-block-content-wrapper";
-
-  // Show the add file button if the file has not been uploaded yet. Change to
-  // show a loader if a file upload for the block begins.
-  if (block.props.url === "") {
-    const addFileButton = createAddFileButton(
-      block,
-      editor,
-      buttonText,
-      buttonIcon
-    );
-    wrapper.appendChild(addFileButton.dom);
-
-    const destroyUploadStartHandler = editor.onUploadStart((blockId) => {
-      if (blockId === block.id) {
-        wrapper.removeChild(addFileButton.dom);
-
-        const loading = document.createElement("div");
-        loading.className = "bn-file-loading-preview";
-        loading.textContent = "Loading...";
-        wrapper.appendChild(loading);
-      }
-    });
-
-    return {
-      dom: wrapper,
-      destroy: () => {
-        destroyUploadStartHandler();
-        addFileButton.destroy();
-      },
-    };
-  }
-
-  const ret: { dom: HTMLElement; destroy?: () => void } = { dom: wrapper };
-
-  // Show the file preview, or the file name and icon.
-  if (block.props.showPreview === false || !element) {
-    // Show file name and icon.
-    const fileNameWithIcon = createFileNameWithIcon(block);
-    wrapper.appendChild(fileNameWithIcon.dom);
-
-    ret.destroy = () => {
-      fileNameWithIcon.destroy?.();
-    };
-  } else {
-    // Show file preview.
-    wrapper.appendChild(element.dom);
-  }
-
-  // Show the caption if there is one.
-  if (block.props.caption) {
-    const caption = document.createElement("p");
-    caption.className = "bn-file-caption";
-    caption.textContent = block.props.caption;
-    wrapper.appendChild(caption);
-  }
-
-  return ret;
-};
-
-export const createResizableFileBlockWrapper = (
-  block: BlockFromConfig<FileBlockConfig, any, any>,
-  editor: BlockNoteEditor<any, any, any>,
-  element: { dom: HTMLElement; destroy?: () => void },
-  resizeHandlesContainerElement: HTMLElement,
-  buttonText: string,
-  buttonIcon: HTMLElement
-): { dom: HTMLElement; destroy: () => void } => {
-  const { dom, destroy } = createFileBlockWrapper(
-    block,
-    editor,
-    element,
-    buttonText,
-    buttonIcon
-  );
-  const wrapper = dom;
-  if (block.props.url && block.props.showPreview) {
-    wrapper.style.width = `${block.props.previewWidth}px`;
-  }
-
-  const leftResizeHandle = document.createElement("div");
-  leftResizeHandle.className = "bn-resize-handle";
-  leftResizeHandle.style.left = "4px";
-  const rightResizeHandle = document.createElement("div");
-  rightResizeHandle.className = "bn-resize-handle";
-  rightResizeHandle.style.right = "4px";
-
-  // Temporary parameters set when the user begins resizing the element, used to
-  // calculate the new width of the element.
-  let resizeParams:
-    | {
-        handleUsed: "left" | "right";
-        initialWidth: number;
-        initialClientX: number;
-      }
-    | undefined;
-  let width = block.props.previewWidth! as number;
-
-  // Updates the element width with an updated width depending on the cursor X
-  // offset from when the resize began, and which resize handle is being used.
-  const windowMouseMoveHandler = (event: MouseEvent) => {
-    if (!resizeParams) {
-      if (
-        !editor.isEditable &&
-        resizeHandlesContainerElement.contains(leftResizeHandle) &&
-        resizeHandlesContainerElement.contains(rightResizeHandle)
-      ) {
-        resizeHandlesContainerElement.removeChild(leftResizeHandle);
-        resizeHandlesContainerElement.removeChild(rightResizeHandle);
-      }
-
-      return;
-    }
-
-    let newWidth: number;
-
-    if (block.props.textAlignment === "center") {
-      if (resizeParams.handleUsed === "left") {
-        newWidth =
-          resizeParams.initialWidth +
-          (resizeParams.initialClientX - event.clientX) * 2;
-      } else {
-        newWidth =
-          resizeParams.initialWidth +
-          (event.clientX - resizeParams.initialClientX) * 2;
-      }
-    } else {
-      if (resizeParams.handleUsed === "left") {
-        newWidth =
-          resizeParams.initialWidth +
-          resizeParams.initialClientX -
-          event.clientX;
-      } else {
-        newWidth =
-          resizeParams.initialWidth +
-          event.clientX -
-          resizeParams.initialClientX;
-      }
-    }
-
-    // Min element width in px.
-    const minWidth = 64;
-
-    // Ensures the element is not wider than the editor and not narrower than a
-    // predetermined minimum width.
-    width = Math.max(newWidth, minWidth);
-    wrapper.style.width = `${width}px`;
-  };
-  // Stops mouse movements from resizing the element and updates the block's
-  // `width` prop to the new value.
-  const windowMouseUpHandler = (event: MouseEvent) => {
-    // Hides the drag handles if the cursor is no longer over the element.
-    if (
-      (!event.target ||
-        !wrapper.contains(event.target as Node) ||
-        !editor.isEditable) &&
-      resizeHandlesContainerElement.contains(leftResizeHandle) &&
-      resizeHandlesContainerElement.contains(rightResizeHandle)
-    ) {
-      resizeHandlesContainerElement.removeChild(leftResizeHandle);
-      resizeHandlesContainerElement.removeChild(rightResizeHandle);
-    }
-
-    if (!resizeParams) {
-      return;
-    }
-
-    resizeParams = undefined;
-
-    editor.updateBlock(block, {
-      props: {
-        previewWidth: width,
-      },
-    });
-  };
-
-  // Shows the resize handles when hovering over the wrapper with the cursor.
-  const wrapperMouseEnterHandler = () => {
-    if (editor.isEditable) {
-      resizeHandlesContainerElement.appendChild(leftResizeHandle);
-      resizeHandlesContainerElement.appendChild(rightResizeHandle);
-    }
-  };
-  // Hides the resize handles when the cursor leaves the wrapper, unless the
-  // cursor moves to one of the resize handles.
-  const wrapperMouseLeaveHandler = (event: MouseEvent) => {
-    if (
-      event.relatedTarget === leftResizeHandle ||
-      event.relatedTarget === rightResizeHandle
-    ) {
-      return;
-    }
-
-    if (resizeParams) {
-      return;
-    }
-
-    if (
-      editor.isEditable &&
-      resizeHandlesContainerElement.contains(leftResizeHandle) &&
-      resizeHandlesContainerElement.contains(rightResizeHandle)
-    ) {
-      resizeHandlesContainerElement.removeChild(leftResizeHandle);
-      resizeHandlesContainerElement.removeChild(rightResizeHandle);
-    }
-  };
-
-  // Sets the resize params, allowing the user to begin resizing the element by
-  // moving the cursor left or right.
-  const leftResizeHandleMouseDownHandler = (event: MouseEvent) => {
-    event.preventDefault();
-
-    resizeParams = {
-      handleUsed: "left",
-      initialWidth: wrapper.clientWidth,
-      initialClientX: event.clientX,
-    };
-  };
-  const rightResizeHandleMouseDownHandler = (event: MouseEvent) => {
-    event.preventDefault();
-
-    resizeParams = {
-      handleUsed: "right",
-      initialWidth: wrapper.clientWidth,
-      initialClientX: event.clientX,
-    };
-  };
-
-  window.addEventListener("mousemove", windowMouseMoveHandler);
-  window.addEventListener("mouseup", windowMouseUpHandler);
-  wrapper.addEventListener("mouseenter", wrapperMouseEnterHandler);
-  wrapper.addEventListener("mouseleave", wrapperMouseLeaveHandler);
-  leftResizeHandle.addEventListener(
-    "mousedown",
-    leftResizeHandleMouseDownHandler
-  );
-  rightResizeHandle.addEventListener(
-    "mousedown",
-    rightResizeHandleMouseDownHandler
-  );
-
-  return {
-    dom: wrapper,
-    destroy: () => {
-      destroy?.();
-      window.removeEventListener("mousemove", windowMouseMoveHandler);
-      window.removeEventListener("mouseup", windowMouseUpHandler);
-      wrapper.removeEventListener("mouseenter", wrapperMouseEnterHandler);
-      wrapper.removeEventListener("mouseleave", wrapperMouseLeaveHandler);
-      leftResizeHandle.removeEventListener(
-        "mousedown",
-        leftResizeHandleMouseDownHandler
-      );
-      rightResizeHandle.removeEventListener(
-        "mousedown",
-        rightResizeHandleMouseDownHandler
-      );
-    },
-  };
-};
-
-export const parseEmbedElement = (embedElement: HTMLEmbedElement) => {
-  const url = embedElement.src || undefined;
-
-  return { url };
-};
-
-export const parseFigureElement = (
-  figureElement: HTMLElement,
-  targetTag: string
-) => {
-  const targetElement = figureElement.querySelector(
-    targetTag
-  ) as HTMLElement | null;
-  if (!targetElement) {
-    return undefined;
-  }
-
-  const captionElement = figureElement.querySelector("figcaption");
-  const caption = captionElement?.textContent ?? undefined;
-
-  return { targetElement, caption };
-};
-
-// Wrapper figure element to display file link with caption. Used for external
-// HTML
-export const createLinkWithCaption = (
-  element: HTMLElement,
-  caption: string
-) => {
-  const wrapper = document.createElement("div");
-  const fileCaption = document.createElement("p");
-  fileCaption.textContent = caption;
-
-  wrapper.appendChild(element);
-  wrapper.appendChild(fileCaption);
-
-  return {
-    dom: wrapper,
-  };
-};
-
-// Wrapper figure element to display file preview with caption. Used for
-// external HTML.
-export const createFigureWithCaption = (
-  element: HTMLElement,
-  caption: string
-) => {
-  const figure = document.createElement("figure");
-  const captionElement = document.createElement("figcaption");
-  captionElement.textContent = caption;
-
-  figure.appendChild(element);
-  figure.appendChild(captionElement);
-
-  return { dom: figure };
-};
diff --git a/packages/core/src/blocks/FileBlockContent/helpers/parse/parseEmbedElement.ts b/packages/core/src/blocks/FileBlockContent/helpers/parse/parseEmbedElement.ts
new file mode 100644
index 0000000000..b7a62f5789
--- /dev/null
+++ b/packages/core/src/blocks/FileBlockContent/helpers/parse/parseEmbedElement.ts
@@ -0,0 +1,5 @@
+export const parseEmbedElement = (embedElement: HTMLEmbedElement) => {
+  const url = embedElement.src || undefined;
+
+  return { url };
+};
diff --git a/packages/core/src/blocks/FileBlockContent/helpers/parse/parseFigureElement.ts b/packages/core/src/blocks/FileBlockContent/helpers/parse/parseFigureElement.ts
new file mode 100644
index 0000000000..2e306bb86a
--- /dev/null
+++ b/packages/core/src/blocks/FileBlockContent/helpers/parse/parseFigureElement.ts
@@ -0,0 +1,16 @@
+export const parseFigureElement = (
+  figureElement: HTMLElement,
+  targetTag: string
+) => {
+  const targetElement = figureElement.querySelector(
+    targetTag
+  ) as HTMLElement | null;
+  if (!targetElement) {
+    return undefined;
+  }
+
+  const captionElement = figureElement.querySelector("figcaption");
+  const caption = captionElement?.textContent ?? undefined;
+
+  return { targetElement, caption };
+};
diff --git a/packages/core/src/blocks/FileBlockContent/helpers/render/createAddFileButton.ts b/packages/core/src/blocks/FileBlockContent/helpers/render/createAddFileButton.ts
new file mode 100644
index 0000000000..1b033a4bc5
--- /dev/null
+++ b/packages/core/src/blocks/FileBlockContent/helpers/render/createAddFileButton.ts
@@ -0,0 +1,63 @@
+import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
+import { BlockFromConfig, FileBlockConfig } from "../../../../schema/index.js";
+
+export const createAddFileButton = (
+  block: BlockFromConfig<FileBlockConfig, any, any>,
+  editor: BlockNoteEditor<any, any, any>,
+  buttonText?: string,
+  buttonIcon?: HTMLElement
+) => {
+  const addFileButton = document.createElement("div");
+  addFileButton.className = "bn-add-file-button";
+
+  const addFileButtonIcon = document.createElement("div");
+  addFileButtonIcon.className = "bn-add-file-button-icon";
+  if (buttonIcon) {
+    addFileButtonIcon.appendChild(buttonIcon);
+  } else {
+    addFileButtonIcon.innerHTML =
+      '<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>';
+  }
+  addFileButton.appendChild(addFileButtonIcon);
+
+  const addFileButtonText = document.createElement("p");
+  addFileButtonText.className = "bn-add-file-button-text";
+  addFileButtonText.innerHTML =
+    buttonText || editor.dictionary.file_blocks.file.add_button_text;
+  addFileButton.appendChild(addFileButtonText);
+
+  // Prevents focus from moving to the button.
+  const addFileButtonMouseDownHandler = (event: MouseEvent) => {
+    event.preventDefault();
+  };
+  // Opens the file toolbar.
+  const addFileButtonClickHandler = () => {
+    editor.dispatch(
+      editor._tiptapEditor.state.tr.setMeta(editor.filePanel!.plugin, {
+        block: block,
+      })
+    );
+  };
+  addFileButton.addEventListener(
+    "mousedown",
+    addFileButtonMouseDownHandler,
+    true
+  );
+  addFileButton.addEventListener("click", addFileButtonClickHandler, true);
+
+  return {
+    dom: addFileButton,
+    destroy: () => {
+      addFileButton.removeEventListener(
+        "mousedown",
+        addFileButtonMouseDownHandler,
+        true
+      );
+      addFileButton.removeEventListener(
+        "click",
+        addFileButtonClickHandler,
+        true
+      );
+    },
+  };
+};
diff --git a/packages/core/src/blocks/FileBlockContent/helpers/render/createFileBlockWrapper.ts b/packages/core/src/blocks/FileBlockContent/helpers/render/createFileBlockWrapper.ts
new file mode 100644
index 0000000000..4d2314dc33
--- /dev/null
+++ b/packages/core/src/blocks/FileBlockContent/helpers/render/createFileBlockWrapper.ts
@@ -0,0 +1,80 @@
+import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
+import {
+  BlockFromConfig,
+  BlockSchemaWithBlock,
+  FileBlockConfig,
+} from "../../../../schema/index.js";
+import { createAddFileButton } from "./createAddFileButton.js";
+import { createFileNameWithIcon } from "./createFileNameWithIcon.js";
+
+export const createFileBlockWrapper = (
+  block: BlockFromConfig<FileBlockConfig, any, any>,
+  editor: BlockNoteEditor<
+    BlockSchemaWithBlock<FileBlockConfig["type"], FileBlockConfig>,
+    any,
+    any
+  >,
+  element?: { dom: HTMLElement; destroy?: () => void },
+  buttonText?: string,
+  buttonIcon?: HTMLElement
+) => {
+  const wrapper = document.createElement("div");
+  wrapper.className = "bn-file-block-content-wrapper";
+
+  // Show the add file button if the file has not been uploaded yet. Change to
+  // show a loader if a file upload for the block begins.
+  if (block.props.url === "") {
+    const addFileButton = createAddFileButton(
+      block,
+      editor,
+      buttonText,
+      buttonIcon
+    );
+    wrapper.appendChild(addFileButton.dom);
+
+    const destroyUploadStartHandler = editor.onUploadStart((blockId) => {
+      if (blockId === block.id) {
+        wrapper.removeChild(addFileButton.dom);
+
+        const loading = document.createElement("div");
+        loading.className = "bn-file-loading-preview";
+        loading.textContent = "Loading...";
+        wrapper.appendChild(loading);
+      }
+    });
+
+    return {
+      dom: wrapper,
+      destroy: () => {
+        destroyUploadStartHandler();
+        addFileButton.destroy();
+      },
+    };
+  }
+
+  const ret: { dom: HTMLElement; destroy?: () => void } = { dom: wrapper };
+
+  // Show the file preview, or the file name and icon.
+  if (block.props.showPreview === false || !element) {
+    // Show file name and icon.
+    const fileNameWithIcon = createFileNameWithIcon(block);
+    wrapper.appendChild(fileNameWithIcon.dom);
+
+    ret.destroy = () => {
+      fileNameWithIcon.destroy?.();
+    };
+  } else {
+    // Show file preview.
+    wrapper.appendChild(element.dom);
+  }
+
+  // Show the caption if there is one.
+  if (block.props.caption) {
+    const caption = document.createElement("p");
+    caption.className = "bn-file-caption";
+    caption.textContent = block.props.caption;
+    wrapper.appendChild(caption);
+  }
+
+  return ret;
+};
diff --git a/packages/core/src/blocks/FileBlockContent/helpers/render/createFileNameWithIcon.ts b/packages/core/src/blocks/FileBlockContent/helpers/render/createFileNameWithIcon.ts
new file mode 100644
index 0000000000..cd4b37b291
--- /dev/null
+++ b/packages/core/src/blocks/FileBlockContent/helpers/render/createFileNameWithIcon.ts
@@ -0,0 +1,24 @@
+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>
+): { dom: HTMLElement; destroy?: () => void } => {
+  const file = document.createElement("div");
+  file.className = "bn-file-name-with-icon";
+
+  const icon = document.createElement("div");
+  icon.className = "bn-file-icon";
+  icon.innerHTML = FILE_ICON_SVG;
+  file.appendChild(icon);
+
+  const fileName = document.createElement("p");
+  fileName.className = "bn-file-name";
+  fileName.textContent = block.props.name;
+  file.appendChild(fileName);
+
+  return {
+    dom: file,
+  };
+};
diff --git a/packages/core/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts b/packages/core/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts
new file mode 100644
index 0000000000..a207961cd3
--- /dev/null
+++ b/packages/core/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts
@@ -0,0 +1,204 @@
+import type { BlockNoteEditor } from "../../../../editor/BlockNoteEditor.js";
+import { BlockFromConfig, FileBlockConfig } from "../../../../schema/index.js";
+import { createFileBlockWrapper } from "./createFileBlockWrapper.js";
+
+export const createResizableFileBlockWrapper = (
+  block: BlockFromConfig<FileBlockConfig, any, any>,
+  editor: BlockNoteEditor<any, any, any>,
+  element: { dom: HTMLElement; destroy?: () => void },
+  resizeHandlesContainerElement: HTMLElement,
+  buttonText: string,
+  buttonIcon: HTMLElement
+): { dom: HTMLElement; destroy: () => void } => {
+  const { dom, destroy } = createFileBlockWrapper(
+    block,
+    editor,
+    element,
+    buttonText,
+    buttonIcon
+  );
+  const wrapper = dom;
+  if (block.props.url && block.props.showPreview) {
+    wrapper.style.width = `${block.props.previewWidth}px`;
+  }
+
+  const leftResizeHandle = document.createElement("div");
+  leftResizeHandle.className = "bn-resize-handle";
+  leftResizeHandle.style.left = "4px";
+  const rightResizeHandle = document.createElement("div");
+  rightResizeHandle.className = "bn-resize-handle";
+  rightResizeHandle.style.right = "4px";
+
+  // Temporary parameters set when the user begins resizing the element, used to
+  // calculate the new width of the element.
+  let resizeParams:
+    | {
+        handleUsed: "left" | "right";
+        initialWidth: number;
+        initialClientX: number;
+      }
+    | undefined;
+  let width = block.props.previewWidth! as number;
+
+  // Updates the element width with an updated width depending on the cursor X
+  // offset from when the resize began, and which resize handle is being used.
+  const windowMouseMoveHandler = (event: MouseEvent) => {
+    if (!resizeParams) {
+      if (
+        !editor.isEditable &&
+        resizeHandlesContainerElement.contains(leftResizeHandle) &&
+        resizeHandlesContainerElement.contains(rightResizeHandle)
+      ) {
+        resizeHandlesContainerElement.removeChild(leftResizeHandle);
+        resizeHandlesContainerElement.removeChild(rightResizeHandle);
+      }
+
+      return;
+    }
+
+    let newWidth: number;
+
+    if (block.props.textAlignment === "center") {
+      if (resizeParams.handleUsed === "left") {
+        newWidth =
+          resizeParams.initialWidth +
+          (resizeParams.initialClientX - event.clientX) * 2;
+      } else {
+        newWidth =
+          resizeParams.initialWidth +
+          (event.clientX - resizeParams.initialClientX) * 2;
+      }
+    } else {
+      if (resizeParams.handleUsed === "left") {
+        newWidth =
+          resizeParams.initialWidth +
+          resizeParams.initialClientX -
+          event.clientX;
+      } else {
+        newWidth =
+          resizeParams.initialWidth +
+          event.clientX -
+          resizeParams.initialClientX;
+      }
+    }
+
+    // Min element width in px.
+    const minWidth = 64;
+
+    // Ensures the element is not wider than the editor and not narrower than a
+    // predetermined minimum width.
+    width = Math.max(newWidth, minWidth);
+    wrapper.style.width = `${width}px`;
+  };
+  // Stops mouse movements from resizing the element and updates the block's
+  // `width` prop to the new value.
+  const windowMouseUpHandler = (event: MouseEvent) => {
+    // Hides the drag handles if the cursor is no longer over the element.
+    if (
+      (!event.target ||
+        !wrapper.contains(event.target as Node) ||
+        !editor.isEditable) &&
+      resizeHandlesContainerElement.contains(leftResizeHandle) &&
+      resizeHandlesContainerElement.contains(rightResizeHandle)
+    ) {
+      resizeHandlesContainerElement.removeChild(leftResizeHandle);
+      resizeHandlesContainerElement.removeChild(rightResizeHandle);
+    }
+
+    if (!resizeParams) {
+      return;
+    }
+
+    resizeParams = undefined;
+
+    editor.updateBlock(block, {
+      props: {
+        previewWidth: width,
+      },
+    });
+  };
+
+  // Shows the resize handles when hovering over the wrapper with the cursor.
+  const wrapperMouseEnterHandler = () => {
+    if (editor.isEditable) {
+      resizeHandlesContainerElement.appendChild(leftResizeHandle);
+      resizeHandlesContainerElement.appendChild(rightResizeHandle);
+    }
+  };
+  // Hides the resize handles when the cursor leaves the wrapper, unless the
+  // cursor moves to one of the resize handles.
+  const wrapperMouseLeaveHandler = (event: MouseEvent) => {
+    if (
+      event.relatedTarget === leftResizeHandle ||
+      event.relatedTarget === rightResizeHandle
+    ) {
+      return;
+    }
+
+    if (resizeParams) {
+      return;
+    }
+
+    if (
+      editor.isEditable &&
+      resizeHandlesContainerElement.contains(leftResizeHandle) &&
+      resizeHandlesContainerElement.contains(rightResizeHandle)
+    ) {
+      resizeHandlesContainerElement.removeChild(leftResizeHandle);
+      resizeHandlesContainerElement.removeChild(rightResizeHandle);
+    }
+  };
+
+  // Sets the resize params, allowing the user to begin resizing the element by
+  // moving the cursor left or right.
+  const leftResizeHandleMouseDownHandler = (event: MouseEvent) => {
+    event.preventDefault();
+
+    resizeParams = {
+      handleUsed: "left",
+      initialWidth: wrapper.clientWidth,
+      initialClientX: event.clientX,
+    };
+  };
+  const rightResizeHandleMouseDownHandler = (event: MouseEvent) => {
+    event.preventDefault();
+
+    resizeParams = {
+      handleUsed: "right",
+      initialWidth: wrapper.clientWidth,
+      initialClientX: event.clientX,
+    };
+  };
+
+  window.addEventListener("mousemove", windowMouseMoveHandler);
+  window.addEventListener("mouseup", windowMouseUpHandler);
+  wrapper.addEventListener("mouseenter", wrapperMouseEnterHandler);
+  wrapper.addEventListener("mouseleave", wrapperMouseLeaveHandler);
+  leftResizeHandle.addEventListener(
+    "mousedown",
+    leftResizeHandleMouseDownHandler
+  );
+  rightResizeHandle.addEventListener(
+    "mousedown",
+    rightResizeHandleMouseDownHandler
+  );
+
+  return {
+    dom: wrapper,
+    destroy: () => {
+      destroy?.();
+      window.removeEventListener("mousemove", windowMouseMoveHandler);
+      window.removeEventListener("mouseup", windowMouseUpHandler);
+      wrapper.removeEventListener("mouseenter", wrapperMouseEnterHandler);
+      wrapper.removeEventListener("mouseleave", wrapperMouseLeaveHandler);
+      leftResizeHandle.removeEventListener(
+        "mousedown",
+        leftResizeHandleMouseDownHandler
+      );
+      rightResizeHandle.removeEventListener(
+        "mousedown",
+        rightResizeHandleMouseDownHandler
+      );
+    },
+  };
+};
diff --git a/packages/core/src/blocks/FileBlockContent/helpers/toExternalHTML/createFigureWithCaption.ts b/packages/core/src/blocks/FileBlockContent/helpers/toExternalHTML/createFigureWithCaption.ts
new file mode 100644
index 0000000000..8379d38383
--- /dev/null
+++ b/packages/core/src/blocks/FileBlockContent/helpers/toExternalHTML/createFigureWithCaption.ts
@@ -0,0 +1,13 @@
+export const createFigureWithCaption = (
+  element: HTMLElement,
+  caption: string
+) => {
+  const figure = document.createElement("figure");
+  const captionElement = document.createElement("figcaption");
+  captionElement.textContent = caption;
+
+  figure.appendChild(element);
+  figure.appendChild(captionElement);
+
+  return { dom: figure };
+};
diff --git a/packages/core/src/blocks/FileBlockContent/helpers/toExternalHTML/createLinkWithCaption.ts b/packages/core/src/blocks/FileBlockContent/helpers/toExternalHTML/createLinkWithCaption.ts
new file mode 100644
index 0000000000..95a03fccd5
--- /dev/null
+++ b/packages/core/src/blocks/FileBlockContent/helpers/toExternalHTML/createLinkWithCaption.ts
@@ -0,0 +1,15 @@
+export const createLinkWithCaption = (
+  element: HTMLElement,
+  caption: string
+) => {
+  const wrapper = document.createElement("div");
+  const fileCaption = document.createElement("p");
+  fileCaption.textContent = caption;
+
+  wrapper.appendChild(element);
+  wrapper.appendChild(fileCaption);
+
+  return {
+    dom: wrapper,
+  };
+};
diff --git a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts b/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts
index 9b7c9a2bc2..8de45dca10 100644
--- a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts
+++ b/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts
@@ -7,13 +7,11 @@ import {
   PropSchema,
 } from "../../schema/index.js";
 import { defaultProps } from "../defaultProps.js";
-import {
-  createFigureWithCaption,
-  createLinkWithCaption,
-  createResizableFileBlockWrapper,
-  parseFigureElement,
-} from "../FileBlockContent/fileBlockHelpers.js";
-import { parseImageElement } from "./imageBlockHelpers.js";
+import { parseFigureElement } from "../FileBlockContent/helpers/parse/parseFigureElement.js";
+import { createFigureWithCaption } from "../FileBlockContent/helpers/toExternalHTML/createFigureWithCaption.js";
+import { createLinkWithCaption } from "../FileBlockContent/helpers/toExternalHTML/createLinkWithCaption.js";
+import { createResizableFileBlockWrapper } from "../FileBlockContent/helpers/render/createResizableFileBlockWrapper.js";
+import { parseImageElement } from "./parseImageElement.js";
 
 export const FILE_IMAGE_ICON_SVG =
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 11.1005L7 9.1005L12.5 14.6005L16 11.1005L19 14.1005V5H5V11.1005ZM4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM15.5 10C14.6716 10 14 9.32843 14 8.5C14 7.67157 14.6716 7 15.5 7C16.3284 7 17 7.67157 17 8.5C17 9.32843 16.3284 10 15.5 10Z"></path></svg>';
diff --git a/packages/core/src/blocks/ImageBlockContent/imageBlockHelpers.ts b/packages/core/src/blocks/ImageBlockContent/parseImageElement.ts
similarity index 100%
rename from packages/core/src/blocks/ImageBlockContent/imageBlockHelpers.ts
rename to packages/core/src/blocks/ImageBlockContent/parseImageElement.ts
diff --git a/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts b/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts
index ef58b9ff66..619bea0734 100644
--- a/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts
+++ b/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts
@@ -7,14 +7,11 @@ import {
   PropSchema,
 } from "../../schema/index.js";
 import { defaultProps } from "../defaultProps.js";
-
-import {
-  createFigureWithCaption,
-  createLinkWithCaption,
-  createResizableFileBlockWrapper,
-  parseFigureElement,
-} from "../FileBlockContent/fileBlockHelpers.js";
-import { parseVideoElement } from "./videoBlockHelpers.js";
+import { parseFigureElement } from "../FileBlockContent/helpers/parse/parseFigureElement.js";
+import { createFigureWithCaption } from "../FileBlockContent/helpers/toExternalHTML/createFigureWithCaption.js";
+import { createLinkWithCaption } from "../FileBlockContent/helpers/toExternalHTML/createLinkWithCaption.js";
+import { createResizableFileBlockWrapper } from "../FileBlockContent/helpers/render/createResizableFileBlockWrapper.js";
+import { parseVideoElement } from "./parseVideoElement.js";
 
 export const FILE_VIDEO_ICON_SVG =
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 5V19H16V5H8ZM4 5V7H6V5H4ZM18 5V7H20V5H18ZM4 9V11H6V9H4ZM18 9V11H20V9H18ZM4 13V15H6V13H4ZM18 13V15H20V13H18ZM4 17V19H6V17H4ZM18 17V19H20V17H18Z"></path></svg>';
diff --git a/packages/core/src/blocks/VideoBlockContent/videoBlockHelpers.ts b/packages/core/src/blocks/VideoBlockContent/parseVideoElement.ts
similarity index 100%
rename from packages/core/src/blocks/VideoBlockContent/videoBlockHelpers.ts
rename to packages/core/src/blocks/VideoBlockContent/parseVideoElement.ts
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 3c3e556eec..064102693f 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -7,10 +7,16 @@ export * from "./api/testUtil/index.js";
 export * from "./blocks/AudioBlockContent/AudioBlockContent.js";
 export * from "./blocks/CodeBlockContent/CodeBlockContent.js";
 export * from "./blocks/FileBlockContent/FileBlockContent.js";
-export * from "./blocks/FileBlockContent/fileBlockHelpers.js";
+export * from "./blocks/FileBlockContent/helpers/parse/parseEmbedElement.js";
+export * from "./blocks/FileBlockContent/helpers/parse/parseFigureElement.js";
+export * from "./blocks/FileBlockContent/helpers/render/createAddFileButton.js";
+export * from "./blocks/FileBlockContent/helpers/render/createFileBlockWrapper.js";
+export * from "./blocks/FileBlockContent/helpers/render/createFileNameWithIcon.js";
+export * from "./blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.js";
+export * from "./blocks/FileBlockContent/helpers/toExternalHTML/createFigureWithCaption.js";
+export * from "./blocks/FileBlockContent/helpers/toExternalHTML/createLinkWithCaption.js";
 export * from "./blocks/FileBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY.js";
 export * from "./blocks/ImageBlockContent/ImageBlockContent.js";
-export { parseImageElement } from "./blocks/ImageBlockContent/imageBlockHelpers.js";
 export {
   EMPTY_CELL_HEIGHT,
   EMPTY_CELL_WIDTH,
diff --git a/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx b/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx
index ec8cd1d74e..9b19781714 100644
--- a/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx
+++ b/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx
@@ -6,12 +6,10 @@ import {
   ReactCustomBlockRenderProps,
   createReactBlockSpec,
 } from "../../schema/ReactBlockSpec.js";
-import {
-  FigureWithCaption,
-  FileBlockWrapper,
-  LinkWithCaption,
-} from "../FileBlockContent/fileBlockHelpers.js";
 import { useResolveUrl } from "../FileBlockContent/useResolveUrl.js";
+import { FigureWithCaption } from "../FileBlockContent/helpers/toExternalHTML/FigureWithCaption.js";
+import { FileBlockWrapper } from "../FileBlockContent/helpers/render/FileBlockWrapper.js";
+import { LinkWithCaption } from "../FileBlockContent/helpers/toExternalHTML/LinkWithCaption.js";
 
 export const AudioPreview = (
   props: Omit<
diff --git a/packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx b/packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx
index 1d5b972f26..0b42f2b13f 100644
--- a/packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx
+++ b/packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx
@@ -4,7 +4,8 @@ import {
   createReactBlockSpec,
   ReactCustomBlockRenderProps,
 } from "../../schema/ReactBlockSpec.js";
-import { FileBlockWrapper, LinkWithCaption } from "./fileBlockHelpers.js";
+import { FileBlockWrapper } from "./helpers/render/FileBlockWrapper.js";
+import { LinkWithCaption } from "./helpers/toExternalHTML/LinkWithCaption.js";
 
 export const FileToExternalHTML = (
   props: Omit<
diff --git a/packages/react/src/blocks/FileBlockContent/helpers/render/AddFileButton.tsx b/packages/react/src/blocks/FileBlockContent/helpers/render/AddFileButton.tsx
new file mode 100644
index 0000000000..0e13dfbb31
--- /dev/null
+++ b/packages/react/src/blocks/FileBlockContent/helpers/render/AddFileButton.tsx
@@ -0,0 +1,51 @@
+import { FileBlockConfig } from "@blocknote/core";
+import { ReactNode, useCallback } from "react";
+import { RiFile2Line } from "react-icons/ri";
+
+import { useDictionary } from "../../../../i18n/dictionary.js";
+import { ReactCustomBlockRenderProps } from "../../../../schema/ReactBlockSpec.js";
+
+export const AddFileButton = (
+  props: Omit<
+    ReactCustomBlockRenderProps<FileBlockConfig, any, any>,
+    "contentRef"
+  > & {
+    buttonText?: string;
+    buttonIcon?: ReactNode;
+  }
+) => {
+  const dict = useDictionary();
+
+  // Prevents focus from moving to the button.
+  const addFileButtonMouseDownHandler = useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+    },
+    []
+  );
+  // Opens the file toolbar.
+  const addFileButtonClickHandler = useCallback(() => {
+    props.editor.dispatch(
+      props.editor._tiptapEditor.state.tr.setMeta(
+        props.editor.filePanel!.plugin,
+        {
+          block: props.block,
+        }
+      )
+    );
+  }, [props.block, props.editor]);
+
+  return (
+    <div
+      className={"bn-add-file-button"}
+      onMouseDown={addFileButtonMouseDownHandler}
+      onClick={addFileButtonClickHandler}>
+      <div className={"bn-add-file-button-icon"}>
+        {props.buttonIcon || <RiFile2Line size={24} />}
+      </div>
+      <div className={"bn-add-file-button-text"}>
+        {props.buttonText || dict.file_blocks.file.add_button_text}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/react/src/blocks/FileBlockContent/helpers/render/FileBlockWrapper.tsx b/packages/react/src/blocks/FileBlockContent/helpers/render/FileBlockWrapper.tsx
new file mode 100644
index 0000000000..6593c9b6db
--- /dev/null
+++ b/packages/react/src/blocks/FileBlockContent/helpers/render/FileBlockWrapper.tsx
@@ -0,0 +1,57 @@
+import { FileBlockConfig } from "@blocknote/core";
+import { CSSProperties, ReactNode } from "react";
+
+import { useUploadLoading } from "../../../../hooks/useUploadLoading.js";
+import { ReactCustomBlockRenderProps } from "../../../../schema/ReactBlockSpec.js";
+import { AddFileButton } from "./AddFileButton.js";
+import { FileNameWithIcon } from "./FileNameWithIcon.js";
+
+export const FileBlockWrapper = (
+  props: Omit<
+    ReactCustomBlockRenderProps<FileBlockConfig, any, any>,
+    "contentRef"
+  > & {
+    buttonText?: string;
+    buttonIcon?: ReactNode;
+    children?: ReactNode;
+  } & {
+    // These props & the `forwardRef` are just here so we can reuse this
+    // component in `ResizableFileBlockWrapper`.
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    style?: CSSProperties;
+  }
+) => {
+  const showLoader = useUploadLoading(props.block.id);
+
+  return (
+    <div
+      className={"bn-file-block-content-wrapper"}
+      onMouseEnter={props.onMouseEnter}
+      onMouseLeave={props.onMouseLeave}
+      style={props.style}>
+      {showLoader ? (
+        // Show loader while a file is being uploaded.
+        <div className={"bn-file-loading-preview"}>Loading...</div>
+      ) : props.block.props.url === "" ? (
+        // Show the add file button if the file has not been uploaded yet.
+        <AddFileButton {...props} />
+      ) : (
+        // Show the file preview, or the file name and icon.
+        <>
+          {props.block.props.showPreview === false || !props.children ? (
+            // Show file name and icon.
+            <FileNameWithIcon {...props} />
+          ) : (
+            // Show preview.
+            props.children
+          )}
+          {props.block.props.caption && (
+            // Show the caption if there is one.
+            <p className={"bn-file-caption"}>{props.block.props.caption}</p>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
diff --git a/packages/react/src/blocks/FileBlockContent/helpers/render/FileNameWithIcon.tsx b/packages/react/src/blocks/FileBlockContent/helpers/render/FileNameWithIcon.tsx
new file mode 100644
index 0000000000..145e91d8eb
--- /dev/null
+++ b/packages/react/src/blocks/FileBlockContent/helpers/render/FileNameWithIcon.tsx
@@ -0,0 +1,21 @@
+import { FileBlockConfig } from "@blocknote/core";
+import { RiFile2Line } from "react-icons/ri";
+
+import { ReactCustomBlockRenderProps } from "../../../../schema/ReactBlockSpec.js";
+
+export const FileNameWithIcon = (
+  props: Omit<
+    ReactCustomBlockRenderProps<FileBlockConfig, any, any>,
+    "editor" | "contentRef"
+  >
+) => (
+  <div
+    className={"bn-file-name-with-icon"}
+    contentEditable={false}
+    draggable={false}>
+    <div className={"bn-file-icon"}>
+      <RiFile2Line size={24} />
+    </div>
+    <p className={"bn-file-name"}>{props.block.props.name}</p>
+  </div>
+);
diff --git a/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx b/packages/react/src/blocks/FileBlockContent/helpers/render/ResizableFileBlockWrapper.tsx
similarity index 56%
rename from packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
rename to packages/react/src/blocks/FileBlockContent/helpers/render/ResizableFileBlockWrapper.tsx
index 6d09a5ca96..f8a9a2b635 100644
--- a/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
+++ b/packages/react/src/blocks/FileBlockContent/helpers/render/ResizableFileBlockWrapper.tsx
@@ -1,129 +1,9 @@
 import { FileBlockConfig } from "@blocknote/core";
-import {
-  CSSProperties,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { RiFile2Line } from "react-icons/ri";
+import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
 
-import { useUploadLoading } from "../../hooks/useUploadLoading.js";
-import { useDictionary } from "../../i18n/dictionary.js";
-import { ReactCustomBlockRenderProps } from "../../schema/ReactBlockSpec.js";
-
-export const AddFileButton = (
-  props: Omit<
-    ReactCustomBlockRenderProps<FileBlockConfig, any, any>,
-    "contentRef"
-  > & {
-    buttonText?: string;
-    buttonIcon?: ReactNode;
-  }
-) => {
-  const dict = useDictionary();
-
-  // Prevents focus from moving to the button.
-  const addFileButtonMouseDownHandler = useCallback(
-    (event: React.MouseEvent) => {
-      event.preventDefault();
-    },
-    []
-  );
-  // Opens the file toolbar.
-  const addFileButtonClickHandler = useCallback(() => {
-    props.editor.dispatch(
-      props.editor._tiptapEditor.state.tr.setMeta(
-        props.editor.filePanel!.plugin,
-        {
-          block: props.block,
-        }
-      )
-    );
-  }, [props.block, props.editor]);
-
-  return (
-    <div
-      className={"bn-add-file-button"}
-      onMouseDown={addFileButtonMouseDownHandler}
-      onClick={addFileButtonClickHandler}>
-      <div className={"bn-add-file-button-icon"}>
-        {props.buttonIcon || <RiFile2Line size={24} />}
-      </div>
-      <div className={"bn-add-file-button-text"}>
-        {props.buttonText || dict.file_blocks.file.add_button_text}
-      </div>
-    </div>
-  );
-};
-
-export const FileNameWithIcon = (
-  props: Omit<
-    ReactCustomBlockRenderProps<FileBlockConfig, any, any>,
-    "editor" | "contentRef"
-  >
-) => (
-  <div
-    className={"bn-file-name-with-icon"}
-    contentEditable={false}
-    draggable={false}>
-    <div className={"bn-file-icon"}>
-      <RiFile2Line size={24} />
-    </div>
-    <p className={"bn-file-name"}>{props.block.props.name}</p>
-  </div>
-);
-
-export const FileBlockWrapper = (
-  props: Omit<
-    ReactCustomBlockRenderProps<FileBlockConfig, any, any>,
-    "contentRef"
-  > & {
-    buttonText?: string;
-    buttonIcon?: ReactNode;
-    children?: ReactNode;
-  } & {
-    // These props & the `forwardRef` are just here so we can reuse this
-    // component in `ResizableFileBlockWrapper`.
-    onMouseEnter?: () => void;
-    onMouseLeave?: () => void;
-    style?: CSSProperties;
-  }
-) => {
-  const showLoader = useUploadLoading(props.block.id);
-
-  return (
-    <div
-      className={"bn-file-block-content-wrapper"}
-      onMouseEnter={props.onMouseEnter}
-      onMouseLeave={props.onMouseLeave}
-      style={props.style}>
-      {showLoader ? (
-        // Show loader while a file is being uploaded.
-        <div className={"bn-file-loading-preview"}>Loading...</div>
-      ) : props.block.props.url === "" ? (
-        // Show the add file button if the file has not been uploaded yet.
-        <AddFileButton {...props} />
-      ) : (
-        // Show the file preview, or the file name and icon.
-        <>
-          {props.block.props.showPreview === false || !props.children ? (
-            // Show file name and icon.
-            <FileNameWithIcon {...props} />
-          ) : (
-            // Show preview.
-            props.children
-          )}
-          {props.block.props.caption && (
-            // Show the caption if there is one.
-            <p className={"bn-file-caption"}>{props.block.props.caption}</p>
-          )}
-        </>
-      )}
-    </div>
-  );
-};
+import { useUploadLoading } from "../../../../hooks/useUploadLoading.js";
+import { ReactCustomBlockRenderProps } from "../../../../schema/ReactBlockSpec.js";
+import { FileBlockWrapper } from "./FileBlockWrapper.js";
 
 export const ResizableFileBlockWrapper = (
   props: Omit<
@@ -287,23 +167,3 @@ export const ResizableFileBlockWrapper = (
     </FileBlockWrapper>
   );
 };
-
-export const LinkWithCaption = (props: {
-  caption: string;
-  children: ReactNode;
-}) => (
-  <div>
-    {props.children}
-    <p>{props.caption}</p>
-  </div>
-);
-
-export const FigureWithCaption = (props: {
-  caption: string;
-  children: ReactNode;
-}) => (
-  <figure>
-    {props.children}
-    <figcaption>{props.caption}</figcaption>
-  </figure>
-);
diff --git a/packages/react/src/blocks/FileBlockContent/helpers/toExternalHTML/FigureWithCaption.tsx b/packages/react/src/blocks/FileBlockContent/helpers/toExternalHTML/FigureWithCaption.tsx
new file mode 100644
index 0000000000..aa4a4f11d9
--- /dev/null
+++ b/packages/react/src/blocks/FileBlockContent/helpers/toExternalHTML/FigureWithCaption.tsx
@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+
+export const FigureWithCaption = (props: {
+  caption: string;
+  children: ReactNode;
+}) => (
+  <figure>
+    {props.children}
+    <figcaption>{props.caption}</figcaption>
+  </figure>
+);
diff --git a/packages/react/src/blocks/FileBlockContent/helpers/toExternalHTML/LinkWithCaption.tsx b/packages/react/src/blocks/FileBlockContent/helpers/toExternalHTML/LinkWithCaption.tsx
new file mode 100644
index 0000000000..34bfa68e95
--- /dev/null
+++ b/packages/react/src/blocks/FileBlockContent/helpers/toExternalHTML/LinkWithCaption.tsx
@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+
+export const LinkWithCaption = (props: {
+  caption: string;
+  children: ReactNode;
+}) => (
+  <div>
+    {props.children}
+    <p>{props.caption}</p>
+  </div>
+);
diff --git a/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx b/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
index 4ce30fc5cb..e459477e07 100644
--- a/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
+++ b/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
@@ -5,12 +5,10 @@ import {
   createReactBlockSpec,
   ReactCustomBlockRenderProps,
 } from "../../schema/ReactBlockSpec.js";
-import {
-  FigureWithCaption,
-  LinkWithCaption,
-  ResizableFileBlockWrapper,
-} from "../FileBlockContent/fileBlockHelpers.js";
 import { useResolveUrl } from "../FileBlockContent/useResolveUrl.js";
+import { FigureWithCaption } from "../FileBlockContent/helpers/toExternalHTML/FigureWithCaption.js";
+import { ResizableFileBlockWrapper } from "../FileBlockContent/helpers/render/ResizableFileBlockWrapper.js";
+import { LinkWithCaption } from "../FileBlockContent/helpers/toExternalHTML/LinkWithCaption.js";
 
 export const ImagePreview = (
   props: Omit<
diff --git a/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx b/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
index 1d63d084c6..aa84c52e8d 100644
--- a/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
+++ b/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
@@ -5,12 +5,10 @@ import {
   createReactBlockSpec,
   ReactCustomBlockRenderProps,
 } from "../../schema/ReactBlockSpec.js";
-import {
-  FigureWithCaption,
-  LinkWithCaption,
-  ResizableFileBlockWrapper,
-} from "../FileBlockContent/fileBlockHelpers.js";
 import { useResolveUrl } from "../FileBlockContent/useResolveUrl.js";
+import { FigureWithCaption } from "../FileBlockContent/helpers/toExternalHTML/FigureWithCaption.js";
+import { ResizableFileBlockWrapper } from "../FileBlockContent/helpers/render/ResizableFileBlockWrapper.js";
+import { LinkWithCaption } from "../FileBlockContent/helpers/toExternalHTML/LinkWithCaption.js";
 
 export const VideoPreview = (
   props: Omit<
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 713325abfa..fe013eed42 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -7,7 +7,12 @@ export * from "./i18n/dictionary.js";
 
 export * from "./blocks/AudioBlockContent/AudioBlockContent.js";
 export * from "./blocks/FileBlockContent/FileBlockContent.js";
-export * from "./blocks/FileBlockContent/fileBlockHelpers.js";
+export * from "./blocks/FileBlockContent/helpers/render/AddFileButton.js";
+export * from "./blocks/FileBlockContent/helpers/render/FileBlockWrapper.js";
+export * from "./blocks/FileBlockContent/helpers/render/FileNameWithIcon.js";
+export * from "./blocks/FileBlockContent/helpers/render/ResizableFileBlockWrapper.js";
+export * from "./blocks/FileBlockContent/helpers/toExternalHTML/FigureWithCaption.js";
+export * from "./blocks/FileBlockContent/helpers/toExternalHTML/LinkWithCaption.js";
 export * from "./blocks/FileBlockContent/useResolveUrl.js";
 export * from "./blocks/ImageBlockContent/ImageBlockContent.js";
 export * from "./blocks/VideoBlockContent/VideoBlockContent.js";

From 1ea35b418a8265d16fa3e34884b66ffc9b1544f8 Mon Sep 17 00:00:00 2001
From: matthewlipski <matthewlipski@gmail.com>
Date: Mon, 9 Dec 2024 19:51:05 +0100
Subject: [PATCH 16/18] Updated unit test snapshots

---
 .../exporters/html/__snapshots__/image/basic/internal.html    | 2 +-
 .../exporters/html/__snapshots__/image/nested/internal.html   | 2 +-
 .../html/__snapshots__/image/noCaption/internal.html          | 2 +-
 .../exporters/html/__snapshots__/image/noName/internal.html   | 2 +-
 .../html/__snapshots__/simpleImage/basic/external.html        | 2 +-
 .../html/__snapshots__/simpleImage/basic/internal.html        | 2 +-
 .../html/__snapshots__/simpleImage/nested/external.html       | 2 +-
 .../html/__snapshots__/simpleImage/nested/internal.html       | 2 +-
 .../html/__snapshots__/simpleImage/noCaption/external.html    | 2 +-
 .../html/__snapshots__/simpleImage/noCaption/internal.html    | 2 +-
 .../html/__snapshots__/simpleImage/noName/external.html       | 2 +-
 .../html/__snapshots__/simpleImage/noName/internal.html       | 2 +-
 .../markdown/__snapshots__/simpleImage/basic/markdown.md      | 2 +-
 .../markdown/__snapshots__/simpleImage/nested/markdown.md     | 4 ++--
 .../markdown/__snapshots__/simpleImage/noCaption/markdown.md  | 2 +-
 .../markdown/__snapshots__/simpleImage/noName/markdown.md     | 2 +-
 16 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/core/src/api/exporters/html/__snapshots__/image/basic/internal.html b/packages/core/src/api/exporters/html/__snapshots__/image/basic/internal.html
index 174fdea44f..4861c132e7 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/image/basic/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/image/basic/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/image/nested/internal.html b/packages/core/src/api/exporters/html/__snapshots__/image/nested/internal.html
index 00e710fad7..41ce95a083 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/image/nested/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/image/nested/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="Caption" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="Caption" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="Caption" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="Caption" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/image/noCaption/internal.html b/packages/core/src/api/exporters/html/__snapshots__/image/noCaption/internal.html
index d19fb52967..416651286a 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/image/noCaption/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/image/noCaption/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-name="example" data-url="exampleURL" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false"></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-name="example" data-url="exampleURL" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="example" draggable="false"></div></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/image/noName/internal.html b/packages/core/src/api/exporters/html/__snapshots__/image/noName/internal.html
index f6f9a971f4..4ca54f0aea 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/image/noName/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/image/noName/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="Caption" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="image" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="Caption" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/basic/external.html b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/basic/external.html
index 75ad5ef39b..76bc3d4ceb 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/basic/external.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/basic/external.html
@@ -1 +1 @@
-<div style="width: 256px;" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div>
\ No newline at end of file
+<div style="width: 256px;" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/basic/internal.html b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/basic/internal.html
index d810a8b22d..7e827005d2 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/basic/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/basic/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleImage" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleImage" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/nested/external.html b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/nested/external.html
index 6cdb4051fd..773dd9cb8f 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/nested/external.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/nested/external.html
@@ -1 +1 @@
-<div style="width: 256px;" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div><div style="width: 256px;" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div>
\ No newline at end of file
+<div style="width: 256px;" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div><div style="width: 256px;" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/nested/internal.html b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/nested/internal.html
index 2117d7a68a..ffedb462fa 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/nested/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/nested/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleImage" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="simpleImage" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleImage" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2"><div class="bn-block-content" data-content-type="simpleImage" data-name="example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="example" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noCaption/external.html b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noCaption/external.html
index e604f86aa0..2a44ef4fc3 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noCaption/external.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noCaption/external.html
@@ -1 +1 @@
-<div style="width: 256px;" data-name="example" data-url="exampleURL" data-preview-width="256"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false"></div></div>
\ No newline at end of file
+<div style="width: 256px;" data-name="example" data-url="exampleURL" data-preview-width="256"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="example" draggable="false"></div></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noCaption/internal.html b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noCaption/internal.html
index 3e0149a0a2..a594242e00 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noCaption/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noCaption/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleImage" data-name="example" data-url="exampleURL" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="example" draggable="false"></div></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleImage" data-name="example" data-url="exampleURL" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="example" draggable="false"></div></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noName/external.html b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noName/external.html
index d04684a50d..fb302b1c46 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noName/external.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noName/external.html
@@ -1 +1 @@
-<div style="width: 256px;" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="Caption" draggable="false"></div><p class="bn-file-caption">Caption</p></div>
\ No newline at end of file
+<div style="width: 256px;" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="Caption" draggable="false"></div><p class="bn-file-caption">Caption</p></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noName/internal.html b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noName/internal.html
index 643b26b3a3..0afeec0b4f 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noName/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/simpleImage/noName/internal.html
@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleImage" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" alt="Caption" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>
\ No newline at end of file
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="simpleImage" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><div class="bn-file-block-content-wrapper"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="Caption" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>
\ No newline at end of file
diff --git a/packages/core/src/api/exporters/markdown/__snapshots__/simpleImage/basic/markdown.md b/packages/core/src/api/exporters/markdown/__snapshots__/simpleImage/basic/markdown.md
index 72f7aacc27..b350ae21e0 100644
--- a/packages/core/src/api/exporters/markdown/__snapshots__/simpleImage/basic/markdown.md
+++ b/packages/core/src/api/exporters/markdown/__snapshots__/simpleImage/basic/markdown.md
@@ -1,3 +1,3 @@
-![example]()
+![example](exampleURL)
 
 Caption
diff --git a/packages/core/src/api/exporters/markdown/__snapshots__/simpleImage/nested/markdown.md b/packages/core/src/api/exporters/markdown/__snapshots__/simpleImage/nested/markdown.md
index 40eac3a5e0..27ac3f5776 100644
--- a/packages/core/src/api/exporters/markdown/__snapshots__/simpleImage/nested/markdown.md
+++ b/packages/core/src/api/exporters/markdown/__snapshots__/simpleImage/nested/markdown.md
@@ -1,7 +1,7 @@
-![example]()
+![example](exampleURL)
 
 Caption
 
-![example]()
+![example](exampleURL)
 
 Caption
diff --git a/packages/core/src/api/exporters/markdown/__snapshots__/simpleImage/noCaption/markdown.md b/packages/core/src/api/exporters/markdown/__snapshots__/simpleImage/noCaption/markdown.md
index 3ef8cf3fe2..2c05062cd4 100644
--- a/packages/core/src/api/exporters/markdown/__snapshots__/simpleImage/noCaption/markdown.md
+++ b/packages/core/src/api/exporters/markdown/__snapshots__/simpleImage/noCaption/markdown.md
@@ -1 +1 @@
-![example]()
+![example](exampleURL)
diff --git a/packages/core/src/api/exporters/markdown/__snapshots__/simpleImage/noName/markdown.md b/packages/core/src/api/exporters/markdown/__snapshots__/simpleImage/noName/markdown.md
index f79cd6529f..c6b5864d90 100644
--- a/packages/core/src/api/exporters/markdown/__snapshots__/simpleImage/noName/markdown.md
+++ b/packages/core/src/api/exporters/markdown/__snapshots__/simpleImage/noName/markdown.md
@@ -1,3 +1,3 @@
-![Caption]()
+![Caption](exampleURL)
 
 Caption

From 090bce15c3bb43fd6c6a27b4619d4dbd8e734b40 Mon Sep 17 00:00:00 2001
From: matthewlipski <matthewlipski@gmail.com>
Date: Mon, 9 Dec 2024 20:03:11 +0100
Subject: [PATCH 17/18] Added `ServerBlockNoteEditor` tests

---
 .../src/context/ServerBlockNoteEditor.test.ts |  30 ++++
 .../ServerBlockNoteEditor.test.ts.snap        | 139 +++++++++++++++++-
 2 files changed, 167 insertions(+), 2 deletions(-)

diff --git a/packages/server-util/src/context/ServerBlockNoteEditor.test.ts b/packages/server-util/src/context/ServerBlockNoteEditor.test.ts
index a607111b8f..530dca2a92 100644
--- a/packages/server-util/src/context/ServerBlockNoteEditor.test.ts
+++ b/packages/server-util/src/context/ServerBlockNoteEditor.test.ts
@@ -71,6 +71,36 @@ describe("Test ServerBlockNoteEditor", () => {
         },
       ],
     },
+    {
+      id: "4",
+      type: "image",
+      props: {
+        backgroundColor: "default",
+        textAlignment: "left",
+        name: "Example",
+        url: "exampleURL",
+        caption: "Caption",
+        showPreview: true,
+        previewWidth: 256,
+      },
+      content: undefined,
+      children: [],
+    },
+    {
+      id: "5",
+      type: "image",
+      props: {
+        backgroundColor: "default",
+        textAlignment: "left",
+        name: "Example",
+        url: "exampleURL",
+        caption: "Caption",
+        showPreview: false,
+        previewWidth: 256,
+      },
+      content: undefined,
+      children: [],
+    },
   ];
 
   it("converts to and from prosemirror (doc)", async () => {
diff --git a/packages/server-util/src/context/__snapshots__/ServerBlockNoteEditor.test.ts.snap b/packages/server-util/src/context/__snapshots__/ServerBlockNoteEditor.test.ts.snap
index 5da0509a79..258da51826 100644
--- a/packages/server-util/src/context/__snapshots__/ServerBlockNoteEditor.test.ts.snap
+++ b/packages/server-util/src/context/__snapshots__/ServerBlockNoteEditor.test.ts.snap
@@ -1,8 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Test ServerBlockNoteEditor > converts to HTML (blocksToFullHTML) 1`] = `"<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1" data-text-color="yellow" data-background-color="blue"><div class="bn-block" data-node-type="blockContainer" data-id="1" data-text-color="yellow" data-background-color="blue"><div class="bn-block-content" data-content-type="heading" data-text-alignment="right" data-level="2"><h2 class="bn-inline-content"><strong><u>Heading </u></strong><em><s>2</s></em></h2></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2" data-background-color="red"><div class="bn-block" data-node-type="blockContainer" data-id="2" data-background-color="red"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content">Paragraph</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="3"><div class="bn-block" data-node-type="blockContainer" data-id="3"><div class="bn-block-content" data-content-type="bulletListItem"><p class="bn-inline-content">list item</p></div></div></div></div></div></div></div>"`;
+exports[`Test ServerBlockNoteEditor > converts to HTML (blocksToFullHTML) 1`] = `"<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1" data-text-color="yellow" data-background-color="blue"><div class="bn-block" data-node-type="blockContainer" data-id="1" data-text-color="yellow" data-background-color="blue"><div class="bn-block-content" data-content-type="heading" data-text-alignment="right" data-level="2"><h2 class="bn-inline-content"><strong><u>Heading </u></strong><em><s>2</s></em></h2></div><div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="2" data-background-color="red"><div class="bn-block" data-node-type="blockContainer" data-id="2" data-background-color="red"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content">Paragraph</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="3"><div class="bn-block" data-node-type="blockContainer" data-id="3"><div class="bn-block-content" data-content-type="bulletListItem"><p class="bn-inline-content">list item</p></div></div></div></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="4"><div class="bn-block" data-node-type="blockContainer" data-id="4"><div class="bn-block-content" data-content-type="image" data-name="Example" data-url="exampleURL" data-caption="Caption" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper" style="width: 256px;"><div class="bn-visual-media-wrapper"><img class="bn-visual-media" src="exampleURL" alt="Example" draggable="false"></div><p class="bn-file-caption">Caption</p></div></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="5"><div class="bn-block" data-node-type="blockContainer" data-id="5"><div class="bn-block-content" data-content-type="image" data-name="Example" data-url="exampleURL" data-caption="Caption" data-show-preview="false" data-preview-width="256" data-file-block=""><div class="bn-file-block-content-wrapper"><div class="bn-file-name-with-icon"><div class="bn-file-icon"><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></div><p class="bn-file-name">Example</p></div><p class="bn-file-caption">Caption</p></div></div></div></div></div>"`;
 
-exports[`Test ServerBlockNoteEditor > converts to and from HTML (blocksToHTMLLossy) 1`] = `"<h2 data-text-color="yellow" data-background-color="blue" data-text-alignment="right" data-level="2"><strong><u>Heading </u></strong><em><s>2</s></em></h2><p data-background-color="red">Paragraph</p><ul><li><p>list item</p></li></ul>"`;
+exports[`Test ServerBlockNoteEditor > converts to and from HTML (blocksToHTMLLossy) 1`] = `"<h2 data-text-color="yellow" data-background-color="blue" data-text-alignment="right" data-level="2"><strong><u>Heading </u></strong><em><s>2</s></em></h2><p data-background-color="red">Paragraph</p><ul><li><p>list item</p></li></ul><figure data-name="Example" data-url="exampleURL" data-caption="Caption" data-preview-width="256"><img src="exampleURL" alt="Example" width="256"><figcaption>Caption</figcaption></figure><div data-name="Example" data-url="exampleURL" data-caption="Caption" data-show-preview="false" data-preview-width="256"><a href="exampleURL">Example</a><p>Caption</p></div>"`;
 
 exports[`Test ServerBlockNoteEditor > converts to and from HTML (blocksToHTMLLossy) 2`] = `
 [
@@ -69,6 +69,61 @@ exports[`Test ServerBlockNoteEditor > converts to and from HTML (blocksToHTMLLos
     },
     "type": "bulletListItem",
   },
+  {
+    "children": [],
+    "content": undefined,
+    "id": "3",
+    "props": {
+      "backgroundColor": "default",
+      "caption": "Caption",
+      "name": "Example",
+      "previewWidth": 256,
+      "showPreview": true,
+      "textAlignment": "left",
+      "url": "exampleURL",
+    },
+    "type": "image",
+  },
+  {
+    "children": [],
+    "content": [
+      {
+        "content": [
+          {
+            "styles": {},
+            "text": "Example",
+            "type": "text",
+          },
+        ],
+        "href": "exampleURL",
+        "type": "link",
+      },
+    ],
+    "id": "4",
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+  {
+    "children": [],
+    "content": [
+      {
+        "styles": {},
+        "text": "Caption",
+        "type": "text",
+      },
+    ],
+    "id": "5",
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
 ]
 `;
 
@@ -78,6 +133,14 @@ exports[`Test ServerBlockNoteEditor > converts to and from markdown (blocksToMar
 Paragraph
 
 *   list item
+
+![Example](exampleURL)
+
+Caption
+
+[Example](exampleURL)
+
+Caption
 "
 `;
 
@@ -143,5 +206,77 @@ exports[`Test ServerBlockNoteEditor > converts to and from markdown (blocksToMar
     },
     "type": "bulletListItem",
   },
+  {
+    "children": [],
+    "content": undefined,
+    "id": "3",
+    "props": {
+      "backgroundColor": "default",
+      "caption": "",
+      "name": "",
+      "previewWidth": 512,
+      "showPreview": true,
+      "textAlignment": "left",
+      "url": "exampleURL",
+    },
+    "type": "image",
+  },
+  {
+    "children": [],
+    "content": [
+      {
+        "styles": {},
+        "text": "Caption",
+        "type": "text",
+      },
+    ],
+    "id": "4",
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+  {
+    "children": [],
+    "content": [
+      {
+        "content": [
+          {
+            "styles": {},
+            "text": "Example",
+            "type": "text",
+          },
+        ],
+        "href": "exampleURL",
+        "type": "link",
+      },
+    ],
+    "id": "5",
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
+  {
+    "children": [],
+    "content": [
+      {
+        "styles": {},
+        "text": "Caption",
+        "type": "text",
+      },
+    ],
+    "id": "6",
+    "props": {
+      "backgroundColor": "default",
+      "textAlignment": "left",
+      "textColor": "default",
+    },
+    "type": "paragraph",
+  },
 ]
 `;

From c61220ff90996ab0050bdc19663132649fafbfe3 Mon Sep 17 00:00:00 2001
From: matthewlipski <matthewlipski@gmail.com>
Date: Mon, 9 Dec 2024 20:20:15 +0100
Subject: [PATCH 18/18] Fixed e2e test

---
 tests/src/end-to-end/copypaste/copypaste.test.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/tests/src/end-to-end/copypaste/copypaste.test.ts b/tests/src/end-to-end/copypaste/copypaste.test.ts
index 1c1a18298e..de3728aff4 100644
--- a/tests/src/end-to-end/copypaste/copypaste.test.ts
+++ b/tests/src/end-to-end/copypaste/copypaste.test.ts
@@ -160,11 +160,9 @@ test.describe("Check Copy/Paste Functionality", () => {
 
     await page.click(`img`);
 
-    await page.waitForSelector(
-      `[class*="bn-visual-media-resize-handle"][style*="right"]`
-    );
+    await page.waitForSelector(`[class*="bn-resize-handle"][style*="right"]`);
     const resizeHandle = page.locator(
-      `[class*="bn-visual-media-resize-handle"][style*="right"]`
+      `[class*="bn-resize-handle"][style*="right"]`
     );
     const resizeHandleBoundingBox = (await resizeHandle.boundingBox())!;
     await page.mouse.move(