From c68658d877ba0af93044fbcda7a43d779b1ddf5f Mon Sep 17 00:00:00 2001
From: "M. Palanikannan" <73993394+Palanikannan1437@users.noreply.github.com>
Date: Thu, 10 Oct 2024 20:53:20 +0530
Subject: [PATCH] [PE-56] fix: image aspect ratio (#5794)

* regression: image aspect ratio fix

* fix: name of variables changed for clarity
---
 .../custom-image/components/image-block.tsx   | 33 ++++++++++---------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/packages/editor/src/core/extensions/custom-image/components/image-block.tsx b/packages/editor/src/core/extensions/custom-image/components/image-block.tsx
index ed60f3dab08..c7008db00ef 100644
--- a/packages/editor/src/core/extensions/custom-image/components/image-block.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/image-block.tsx
@@ -57,12 +57,12 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
     editorContainer,
     setEditorContainer,
   } = props;
-  const { src: remoteImageSrc, width, height, aspectRatio } = node.attrs;
+  const { src: remoteImageSrc, width: nodeWidth, height: nodeHeight, aspectRatio: nodeAspectRatio } = node.attrs;
   // states
   const [size, setSize] = useState<Size>({
-    width: ensurePixelString(width, "35%"),
-    height: ensurePixelString(height, "auto"),
-    aspectRatio: aspectRatio || 1,
+    width: ensurePixelString(nodeWidth, "35%"),
+    height: ensurePixelString(nodeHeight, "auto"),
+    aspectRatio: nodeAspectRatio || null,
   });
   const [isResizing, setIsResizing] = useState(false);
   const [initialResizeComplete, setInitialResizeComplete] = useState(false);
@@ -102,17 +102,17 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
     }
 
     setEditorContainer(closestEditorContainer);
-    const aspectRatio = img.naturalWidth / img.naturalHeight;
+    const aspectRatioCalculated = img.naturalWidth / img.naturalHeight;
 
-    if (width === "35%") {
+    if (nodeWidth === "35%") {
       const editorWidth = closestEditorContainer.clientWidth;
       const initialWidth = Math.max(editorWidth * 0.35, MIN_SIZE);
-      const initialHeight = initialWidth / aspectRatio;
+      const initialHeight = initialWidth / aspectRatioCalculated;
 
       const initialComputedSize = {
         width: `${Math.round(initialWidth)}px` satisfies Pixel,
         height: `${Math.round(initialHeight)}px` satisfies Pixel,
-        aspectRatio: aspectRatio,
+        aspectRatio: aspectRatioCalculated,
       };
 
       setSize(initialComputedSize);
@@ -122,9 +122,10 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
       );
     } else {
       // as the aspect ratio in not stored for old images, we need to update the attrs
-      if (!aspectRatio) {
+      // or if aspectRatioCalculated from the image's width and height doesn't match stored aspectRatio then also we'll update the attrs
+      if (!nodeAspectRatio || nodeAspectRatio !== aspectRatioCalculated) {
         setSize((prevSize) => {
-          const newSize = { ...prevSize, aspectRatio };
+          const newSize = { ...prevSize, aspectRatio: aspectRatioCalculated };
           updateAttributesSafely(
             newSize,
             "Failed to update attributes while initializing images with width but no aspect ratio:"
@@ -134,16 +135,16 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
       }
     }
     setInitialResizeComplete(true);
-  }, [width, updateAttributes, editorContainer, aspectRatio]);
+  }, [nodeWidth, updateAttributes, editorContainer, nodeAspectRatio]);
 
   // for real time resizing
   useLayoutEffect(() => {
     setSize((prevSize) => ({
       ...prevSize,
-      width: ensurePixelString(width),
-      height: ensurePixelString(height),
+      width: ensurePixelString(nodeWidth),
+      height: ensurePixelString(nodeHeight),
     }));
-  }, [width, height]);
+  }, [nodeWidth, nodeHeight]);
 
   const handleResize = useCallback(
     (e: MouseEvent | TouchEvent) => {
@@ -215,7 +216,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
       onMouseDown={handleImageMouseDown}
       style={{
         width: size.width,
-        aspectRatio: size.aspectRatio,
+        ...(size.aspectRatio && { aspectRatio: size.aspectRatio }),
       }}
     >
       {showImageLoader && (
@@ -241,7 +242,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
         })}
         style={{
           width: size.width,
-          aspectRatio: size.aspectRatio,
+          ...(size.aspectRatio && { aspectRatio: size.aspectRatio }),
         }}
       />
       {showImageUtils && (