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) => {