Fixed selection handling clicking editor padding (#1629)

Author: matthewlipski

examples/06-custom-schema/04-pdf-file-block/styles.css

@@ -1,10 +1,4 @@
-[data-content-type="pdf"] .bn-file-block-content-wrapper,
-[data-content-type="pdf"] .bn-file-and-caption-wrapper {
-    height: 800px;
-    width: 100%;
-}
-
 [data-content-type="pdf"] embed {
-    height: 100%;
+    height: 800px;
     width: 100%;
 }

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

@@ -87,7 +87,10 @@ export const createResizableFileBlockWrapper = (
 
     // Ensures the element is not wider than the editor and not narrower than a
     // predetermined minimum width.
-    width = Math.max(newWidth, minWidth);
+    width = Math.min(
+      Math.max(newWidth, minWidth),
+      editor.domElement?.firstElementChild?.clientWidth || Number.MAX_VALUE
+    );
     wrapper.style.width = `${width}px`;
   };
   // Stops mouse movements from resizing the element and updates the block's

packages/core/src/editor/Block.css

@@ -14,7 +14,6 @@ BASIC STYLES
 }
 
 .bn-block-content {
-  display: flex;
   padding: 3px 0;
   transition: font-size 0.2s;
   width: 100%;
@@ -163,6 +162,7 @@ NESTED BLOCKS
 .bn-block-content::before {
   margin-right: 0;
   content: "";
+  display: inline;
 }
 
 /* Ordered */

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

@@ -66,11 +66,13 @@ export const ResizableFileBlockWrapper = (
 
       // Ensures the child is not wider than the editor and not narrower than a
       // predetermined minimum width.
-      if (newWidth < minWidth) {
-        setWidth(minWidth);
-      } else {
-        setWidth(newWidth);
-      }
+      setWidth(
+        Math.min(
+          Math.max(newWidth, minWidth),
+          props.editor.domElement?.firstElementChild?.clientWidth ||
+            Number.MAX_VALUE
+        )
+      );
     };
     // Stops mouse movements from resizing the child and updates the block's
     // `width` prop to the new value.