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 c951c3bf2c..a844ac1938 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 @@ -59,19 +59,6 @@ export const CustomImageBlock: React.FC = (props) => { setSize({ width, height }); }, [width, height]); - const handleResizeStart = useCallback( - (e: React.MouseEvent | React.TouchEvent) => { - e.preventDefault(); - e.stopPropagation(); - isResizing.current = true; - if (containerRef.current && editorContainer) { - aspectRatioRef.current = Number(size.width.replace("px", "")) / Number(size.height.replace("px", "")); - containerRect.current = containerRef.current.getBoundingClientRect(); - } - }, - [size, editorContainer] - ); - const handleResize = useCallback( (e: MouseEvent | TouchEvent) => { if (!isResizing.current || !containerRef.current || !containerRect.current) return; @@ -96,10 +83,32 @@ export const CustomImageBlock: React.FC = (props) => { if (isResizing.current) { isResizing.current = false; updateAttributes(size); + + window.removeEventListener("mousemove", handleResize); + window.removeEventListener("mouseup", handleResizeEnd); + window.removeEventListener("mouseleave", handleResizeEnd); } }, [size, updateAttributes]); - const handleMouseDown = useCallback( + const handleResizeStart = useCallback( + (e: React.MouseEvent | React.TouchEvent) => { + e.preventDefault(); + e.stopPropagation(); + isResizing.current = true; + + window.addEventListener("mousemove", handleResize); + window.addEventListener("mouseup", handleResizeEnd); + window.addEventListener("mouseleave", handleResizeEnd); + + if (containerRef.current && editorContainer) { + aspectRatioRef.current = Number(size.width.replace("px", "")) / Number(size.height.replace("px", "")); + containerRect.current = containerRef.current.getBoundingClientRect(); + } + }, + [size, editorContainer] + ); + + const handleImageMouseDown = useCallback( (e: React.MouseEvent) => { e.stopPropagation(); const pos = getPos(); @@ -109,29 +118,11 @@ export const CustomImageBlock: React.FC = (props) => { [editor, getPos] ); - useEffect(() => { - if (!editorContainer) return; - - const handleMouseMove = (e: MouseEvent) => handleResize(e); - const handleMouseUp = () => handleResizeEnd(); - const handleMouseLeave = () => handleResizeEnd(); - - editorContainer.addEventListener("mousemove", handleMouseMove); - editorContainer.addEventListener("mouseup", handleMouseUp); - editorContainer.addEventListener("mouseleave", handleMouseLeave); - - return () => { - editorContainer.removeEventListener("mousemove", handleMouseMove); - editorContainer.removeEventListener("mouseup", handleMouseUp); - editorContainer.removeEventListener("mouseleave", handleMouseLeave); - }; - }, [handleResize, handleResizeEnd, editorContainer]); - return (