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..35e75596839 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 @@ -62,7 +62,7 @@ export const CustomImageBlock: React.FC = (props) => { const [size, setSize] = useState({ 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 = (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 = (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 = (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 = (props) => { })} style={{ width: size.width, - aspectRatio: size.aspectRatio, + ...(size.aspectRatio && { aspectRatio: size.aspectRatio }), }} /> {showImageUtils && (