From ca68a864944ed49e9b09743c12b6cedfbcc8ed2f Mon Sep 17 00:00:00 2001 From: Palanikannan M Date: Thu, 10 Oct 2024 18:28:13 +0530 Subject: [PATCH 1/2] regression: image aspect ratio fix --- .../custom-image/components/image-block.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 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 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 && ( From a3646bf2f53d731c72dc4924ad1e9b8dd5f13fd4 Mon Sep 17 00:00:00 2001 From: Palanikannan M Date: Thu, 10 Oct 2024 20:09:14 +0530 Subject: [PATCH 2/2] fix: name of variables changed for clarity --- .../custom-image/components/image-block.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 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 35e75596839..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 = (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({ - width: ensurePixelString(width, "35%"), - height: ensurePixelString(height, "auto"), - aspectRatio: aspectRatio || null, + width: ensurePixelString(nodeWidth, "35%"), + height: ensurePixelString(nodeHeight, "auto"), + aspectRatio: nodeAspectRatio || null, }); const [isResizing, setIsResizing] = useState(false); const [initialResizeComplete, setInitialResizeComplete] = useState(false); @@ -104,7 +104,7 @@ export const CustomImageBlock: React.FC = (props) => { setEditorContainer(closestEditorContainer); 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 / aspectRatioCalculated; @@ -123,7 +123,7 @@ export const CustomImageBlock: React.FC = (props) => { } else { // as the aspect ratio in not stored for old images, we need to update the attrs // 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) { + if (!nodeAspectRatio || nodeAspectRatio !== aspectRatioCalculated) { setSize((prevSize) => { const newSize = { ...prevSize, aspectRatio: aspectRatioCalculated }; updateAttributesSafely( @@ -135,16 +135,16 @@ export const CustomImageBlock: React.FC = (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) => {