fix: Updated resizable file wrappers (#1914)

* Updated resizable file wrappers

* Updated unit tests

* Revert "Updated unit tests"

This reverts commit ef1e44e.

* Revert "Updated resizable file wrappers"

This reverts commit 571af73.

* Re-added `eventCaptureElement`

* Added `position: "relative"` to wrapper element

* Updated unit test snaps

Author: matthewlipski

packages/core/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts

@@ -18,6 +18,7 @@ export const createResizableFileBlockWrapper = (
     buttonIcon,
   );
   const wrapper = dom;
+  wrapper.style.position = "relative";
   if (block.props.url && block.props.showPreview) {
     if (block.props.previewWidth) {
       wrapper.style.width = `${block.props.previewWidth}px`;
@@ -33,6 +34,15 @@ export const createResizableFileBlockWrapper = (
   rightResizeHandle.className = "bn-resize-handle";
   rightResizeHandle.style.right = "4px";
 
+  // This element ensures `mousemove` and `mouseup` events are captured while
+  // resizing when the cursor is over the wrapper content. This is because
+  // embeds are treated as separate HTML documents, so if the content is an
+  // embed, the events will only fire within that document.
+  const eventCaptureElement = document.createElement("div");
+  eventCaptureElement.style.position = "absolute";
+  eventCaptureElement.style.height = "100%";
+  eventCaptureElement.style.width = "100%";
+
   // Temporary parameters set when the user begins resizing the element, used to
   // calculate the new width of the element.
   let resizeParams:
@@ -118,6 +128,10 @@ export const createResizableFileBlockWrapper = (
 
     resizeParams = undefined;
 
+    if (wrapper.contains(eventCaptureElement)) {
+      wrapper.removeChild(eventCaptureElement);
+    }
+
     editor.updateBlock(block, {
       props: {
         previewWidth: width,
@@ -161,6 +175,10 @@ export const createResizableFileBlockWrapper = (
   const leftResizeHandleMouseDownHandler = (event: MouseEvent) => {
     event.preventDefault();
 
+    if (!wrapper.contains(eventCaptureElement)) {
+      wrapper.appendChild(eventCaptureElement);
+    }
+
     resizeParams = {
       handleUsed: "left",
       initialWidth: wrapper.clientWidth,
@@ -170,6 +188,10 @@ export const createResizableFileBlockWrapper = (
   const rightResizeHandleMouseDownHandler = (event: MouseEvent) => {
     event.preventDefault();
 
+    if (!wrapper.contains(eventCaptureElement)) {
+      wrapper.appendChild(eventCaptureElement);
+    }
+
     resizeParams = {
       handleUsed: "right",
       initialWidth: wrapper.clientWidth,

packages/react/src/blocks/FileBlockContent/helpers/render/ResizableFileBlockWrapper.tsx

@@ -154,7 +154,11 @@ export const ResizableFileBlockWrapper = (
           : undefined
       }
     >
-      <div className={"bn-visual-media-wrapper"} ref={ref}>
+      <div
+        className={"bn-visual-media-wrapper"}
+        style={{ position: "relative" }}
+        ref={ref}
+      >
         {props.children}
         {(hovered || resizeParams) && (
           <>
@@ -170,6 +174,19 @@ export const ResizableFileBlockWrapper = (
             />
           </>
         )}
+        {/* This element ensures `mousemove` and `mouseup` events are captured
+        while resizing when the cursor is over the wrapper content. This is
+        because embeds are treated as separate HTML documents, so if the 
+        content is an embed, the events will only fire within that document. */}
+        {resizeParams && (
+          <div
+            style={{
+              position: "absolute",
+              height: "100%",
+              width: "100%",
+            }}
+          />
+        )}
       </div>
     </FileBlockWrapper>
   );

packages/server-util/src/context/__snapshots__/ServerBlockNoteEditor.test.ts.snap

@@ -1,6 +1,6 @@
 // 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 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 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="position: relative; 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" style="position: relative;"><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><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>"`;
 

tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/basic.html

@@ -10,7 +10,7 @@
         data-preview-width="256"
         data-file-block=""
       >
-        <div class="bn-file-block-content-wrapper">
+        <div class="bn-file-block-content-wrapper" style="position: relative;">
           <div class="bn-visual-media-wrapper">
             <img class="bn-visual-media" src="exampleURL" alt="example" draggable="false" />
           </div>

tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/button.html

@@ -2,7 +2,7 @@
   <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-file-block="">
-        <div class="bn-file-block-content-wrapper">
+        <div class="bn-file-block-content-wrapper" style="position: relative;">
           <div class="bn-add-file-button">
             <div class="bn-add-file-button-icon">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">

tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/nested.html

@@ -9,7 +9,7 @@
         data-preview-width="256"
         data-file-block=""
       >
-        <div class="bn-file-block-content-wrapper">
+        <div class="bn-file-block-content-wrapper" style="position: relative;">
           <div class="bn-visual-media-wrapper">
             <img class="bn-visual-media" src="exampleURL" alt="Caption" draggable="false" />
           </div>
@@ -27,7 +27,7 @@
               data-preview-width="256"
               data-file-block=""
             >
-              <div class="bn-file-block-content-wrapper">
+              <div class="bn-file-block-content-wrapper" style="position: relative;">
                 <div class="bn-visual-media-wrapper">
                   <img class="bn-visual-media" src="exampleURL" alt="Caption" draggable="false" />
                 </div>

tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/noCaption.html

@@ -9,7 +9,7 @@
         data-preview-width="256"
         data-file-block=""
       >
-        <div class="bn-file-block-content-wrapper">
+        <div class="bn-file-block-content-wrapper" style="position: relative;">
           <div class="bn-visual-media-wrapper">
             <img class="bn-visual-media" src="exampleURL" alt="example" draggable="false" />
           </div>

tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/noName.html

@@ -9,7 +9,7 @@
         data-preview-width="256"
         data-file-block=""
       >
-        <div class="bn-file-block-content-wrapper">
+        <div class="bn-file-block-content-wrapper" style="position: relative;">
           <div class="bn-visual-media-wrapper">
             <img class="bn-visual-media" src="exampleURL" alt="Caption" draggable="false" />
           </div>

tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image/noPreview.html

@@ -11,7 +11,7 @@
         data-preview-width="256"
         data-file-block=""
       >
-        <div class="bn-file-block-content-wrapper">
+        <div class="bn-file-block-content-wrapper" style="position: relative;">
           <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">

tests/src/unit/react/formatConversion/export/__snapshots__/blocknoteHTML/reactImage/basic.html

@@ -10,7 +10,7 @@
         data-preview-width="256"
         data-file-block=""
       >
-        <div class="bn-file-block-content-wrapper">
+        <div class="bn-file-block-content-wrapper" style="position: relative;">
           <div class="bn-visual-media-wrapper">
             <img class="bn-visual-media" src="exampleURL" alt="example" draggable="false" />
           </div>