From 961afe7dc5151b5bc9c746de0aca632a38cd5638 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Tue, 18 Apr 2023 20:11:11 -0400
Subject: [PATCH] fix: Full-width images have margin on side since #5197

---
 shared/editor/components/Image.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/shared/editor/components/Image.tsx b/shared/editor/components/Image.tsx
index 5c8225dd7..d5a028257 100644
--- a/shared/editor/components/Image.tsx
+++ b/shared/editor/components/Image.tsx
@@ -36,7 +36,7 @@ const Image = (
   const [offset, setOffset] = React.useState(0);
   const [dragging, setDragging] = React.useState<DragDirection>();
   const [documentWidth, setDocumentWidth] = React.useState(
-    props.view?.dom.clientWidth || 0
+    props.view ? getInnerWidth(props.view.dom) : 0
   );
   const maxWidth = layoutClass ? documentWidth / 3 : documentWidth;
   const isFullWidth = layoutClass === "full-width";
@@ -51,7 +51,7 @@ const Image = (
       const contentWidth =
         document.body.querySelector("#full-width-container")?.clientWidth || 0;
       setContentWidth(contentWidth);
-      setDocumentWidth(props.view?.dom.clientWidth || 0);
+      setDocumentWidth(props.view ? getInnerWidth(props.view.dom) : 0);
     };
 
     window.addEventListener("resize", handleResize);
@@ -232,6 +232,16 @@ const Image = (
   );
 };
 
+function getInnerWidth(element: Element) {
+  const computedStyle = window.getComputedStyle(element, null);
+  let width = element.clientWidth;
+  width -=
+    parseFloat(computedStyle.paddingLeft) +
+    parseFloat(computedStyle.paddingRight);
+
+  return width;
+}
+
 function getPlaceholder(width: number, height: number) {
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" />`;
 }