regression: image aspect ratio fix

makeplane · Oct 10, 2024 · ca68a86 · ca68a86
1 parent 5573d85
commit ca68a86
Showing 1 changed file with 9 additions and 8 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
@@ -62,7 +62,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
   const [size, setSize] = useState<Size>({
     width: ensurePixelString(width, "35%"),
     height: ensurePixelString(height, "auto"),
-    aspectRatio: aspectRatio || 1,
+    aspectRatio: aspectRatio || 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%") {
       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 (!aspectRatio || aspectRatio !== 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:"
@@ -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 && (