From c1aa4c8ddeb94f8d83bf15d9e137da0d91f3a2ce Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sun, 22 Jan 2023 10:13:15 -0500
Subject: [PATCH] fix: Alignment of caption on fullwidth images

---
 shared/editor/nodes/Image.tsx | 30 ++++++++++++++----------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/shared/editor/nodes/Image.tsx b/shared/editor/nodes/Image.tsx
index 2752b5e12..655ca7f14 100644
--- a/shared/editor/nodes/Image.tsx
+++ b/shared/editor/nodes/Image.tsx
@@ -594,7 +594,7 @@ const ImageComponent = (
     onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
     onDownload: (event: React.MouseEvent<HTMLButtonElement>) => void;
     onChangeSize: (props: { width: number; height?: number }) => void;
-    children: React.ReactNode;
+    children: React.ReactElement;
     view: EditorView;
   }
 ) => {
@@ -721,27 +721,23 @@ const ImageComponent = (
     };
   }, [dragging, handlePointerMove, handlePointerUp]);
 
-  const style = isFullWidth
+  const widthStyle = isFullWidth
     ? { width: contentWidth }
     : { width: size.width || "auto" };
 
+  const containerStyle = isFullWidth
+    ? ({
+        "--offset": `${-(contentWidth - documentWidth) / 2}px`,
+      } as React.CSSProperties)
+    : undefined;
+
   return (
-    <div
-      contentEditable={false}
-      className={className}
-      style={
-        isFullWidth
-          ? ({
-              "--offset": `${-(contentWidth - documentWidth) / 2}px`,
-            } as React.CSSProperties)
-          : undefined
-      }
-    >
+    <div contentEditable={false} className={className} style={containerStyle}>
       <ImageWrapper
         isFullWidth={isFullWidth}
         className={isSelected || dragging ? "ProseMirror-selectednode" : ""}
         onClick={dragging ? undefined : props.onClick}
-        style={style}
+        style={widthStyle}
       >
         {!dragging && size.width > 60 && size.height > 60 && (
           <Button onClick={props.onDownload}>
@@ -750,7 +746,7 @@ const ImageComponent = (
         )}
         <ImageZoom zoomMargin={24}>
           <img
-            style={style}
+            style={widthStyle}
             src={sanitizeUrl(src) ?? ""}
             onLoad={(ev: React.SyntheticEvent<HTMLImageElement>) => {
               // For some SVG's Firefox does not provide the naturalWidth, in this
@@ -783,7 +779,9 @@ const ImageComponent = (
           </>
         )}
       </ImageWrapper>
-      {props.children}
+      {isFullWidth
+        ? React.cloneElement(props.children, { style: widthStyle })
+        : props.children}
     </div>
   );
 };