Simplify layout of full-width images

app/scenes/Document/components/Document.tsx

@@ -17,6 +17,7 @@ import {
 import { toast } from "sonner";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import useComponentSize from "@shared/editor/components/hooks/useComponentSize";
 import { s } from "@shared/styles";
 import { NavigationNode } from "@shared/types";
 import { ProsemirrorHelper, Heading } from "@shared/utils/ProsemirrorHelper";
@@ -437,8 +438,7 @@ class DocumentScene extends React.Component<Props> {
             }
           }}
         />
-        <Background
-          id="full-width-container"
+        <FullWidthContainer
           key={revision ? revision.id : document.id}
           column
           auto
@@ -564,7 +564,7 @@ class DocumentScene extends React.Component<Props> {
               <ConnectionStatus />
             </Footer>
           )}
-        </Background>
+        </FullWidthContainer>
       </ErrorBoundary>
     );
   }
@@ -622,4 +622,20 @@ const MaxWidth = styled(Flex)<MaxWidthProps>`
   `};
 `;
 
+const FullWidthContainer = (props: React.ComponentProps<typeof Background>) => {
+  const ref = React.useRef(null);
+  const rect = useComponentSize(ref.current);
+
+  return (
+    <Background
+      {...props}
+      ref={ref}
+      style={{
+        "--container-width": `${rect.width}px`,
+        "--container-left": `${rect.left}px`,
+      }}
+    />
+  );
+};
+
 export default withTranslation()(withStores(withRouter(DocumentScene)));

shared/editor/components/Image.tsx

@@ -29,10 +29,7 @@ const Image = (props: Props) => {
   const [loaded, setLoaded] = React.useState(false);
   const [naturalWidth, setNaturalWidth] = React.useState(node.attrs.width);
   const [naturalHeight, setNaturalHeight] = React.useState(node.attrs.height);
-  const containerBounds = useComponentSize(
-    document.body.querySelector("#full-width-container")
-  );
-  const documentBounds = props.view.dom.getBoundingClientRect();
+  const documentBounds = useComponentSize(props.view.dom);
   const maxWidth = documentBounds.width;
   const { width, height, setSize, handlePointerDown, dragging } = useDragResize(
     {
@@ -60,21 +57,11 @@ const Image = (props: Props) => {
   }, [node.attrs.width]);
 
   const widthStyle = isFullWidth
-    ? { width: containerBounds.width }
+    ? { width: "var(--container-width)" }
     : { width: width || "auto" };
 
-  const containerStyle = isFullWidth
-    ? ({
-        "--offset": `${-(
-          documentBounds.left -
-          containerBounds.left +
-          getPadding(props.view.dom)
-        )}px`,
-      } as React.CSSProperties)
-    : undefined;
-
   return (
-    <div contentEditable={false} className={className} style={containerStyle}>
+    <div contentEditable={false} className={className}>
       <ImageWrapper
         isFullWidth={isFullWidth}
         className={isSelected || dragging ? "ProseMirror-selectednode" : ""}
@@ -143,11 +130,6 @@ const Image = (props: Props) => {
   );
 };
 
-function getPadding(element: Element) {
-  const computedStyle = window.getComputedStyle(element, null);
-  return parseFloat(computedStyle.paddingLeft);
-}
-
 function getPlaceholder(width: number, height: number) {
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" />`;
 }

shared/editor/components/Styles.ts

@@ -553,7 +553,7 @@ iframe.embed {
   max-width: 100vw;
   clear: both;
   position: initial;
-  ${props.rtl ? `margin-right: var(--offset)` : `margin-left: var(--offset)`};
+  transform: translateX(calc(50% + var(--container-width) * -0.5));
 
   img {
     max-width: 100vw;