From 066ec1123d4271ea24be3ad53a3a496a2191bf66 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Wed, 3 Sep 2025 18:07:22 +0200 Subject: [PATCH 1/2] Fixed file block resize handles not working with touch input --- .../render/createResizableFileBlockWrapper.ts | 55 ++++++++++++++----- .../render/ResizableFileBlockWrapper.tsx | 37 ++++++++----- 2 files changed, 65 insertions(+), 27 deletions(-) diff --git a/packages/core/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts b/packages/core/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts index ec7c736b7d..4de732fe82 100644 --- a/packages/core/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts +++ b/packages/core/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts @@ -56,7 +56,7 @@ export const createResizableFileBlockWrapper = ( // Updates the element width with an updated width depending on the cursor X // offset from when the resize began, and which resize handle is being used. - const windowMouseMoveHandler = (event: MouseEvent) => { + const windowMouseMoveHandler = (event: MouseEvent | TouchEvent) => { if (!resizeParams) { if ( !editor.isEditable && @@ -72,27 +72,26 @@ export const createResizableFileBlockWrapper = ( let newWidth: number; + const clientX = + event instanceof TouchEvent ? event.touches[0].clientX : event.clientX; + if (block.props.textAlignment === "center") { if (resizeParams.handleUsed === "left") { newWidth = resizeParams.initialWidth + - (resizeParams.initialClientX - event.clientX) * 2; + (resizeParams.initialClientX - clientX) * 2; } else { newWidth = resizeParams.initialWidth + - (event.clientX - resizeParams.initialClientX) * 2; + (clientX - resizeParams.initialClientX) * 2; } } else { if (resizeParams.handleUsed === "left") { newWidth = - resizeParams.initialWidth + - resizeParams.initialClientX - - event.clientX; + resizeParams.initialWidth + resizeParams.initialClientX - clientX; } else { newWidth = - resizeParams.initialWidth + - event.clientX - - resizeParams.initialClientX; + resizeParams.initialWidth + clientX - resizeParams.initialClientX; } } @@ -109,7 +108,7 @@ export const createResizableFileBlockWrapper = ( }; // Stops mouse movements from resizing the element and updates the block's // `width` prop to the new value. - const windowMouseUpHandler = (event: MouseEvent) => { + const windowMouseUpHandler = (event: MouseEvent | TouchEvent) => { // Hides the drag handles if the cursor is no longer over the element. if ( (!event.target || @@ -172,62 +171,90 @@ export const createResizableFileBlockWrapper = ( // Sets the resize params, allowing the user to begin resizing the element by // moving the cursor left or right. - const leftResizeHandleMouseDownHandler = (event: MouseEvent) => { + const leftResizeHandleMouseDownHandler = (event: MouseEvent | TouchEvent) => { event.preventDefault(); if (!wrapper.contains(eventCaptureElement)) { wrapper.appendChild(eventCaptureElement); } + const clientX = + "touches" in event ? event.touches[0].clientX : event.clientX; + resizeParams = { handleUsed: "left", initialWidth: wrapper.clientWidth, - initialClientX: event.clientX, + initialClientX: clientX, }; }; - const rightResizeHandleMouseDownHandler = (event: MouseEvent) => { + const rightResizeHandleMouseDownHandler = ( + event: MouseEvent | TouchEvent, + ) => { event.preventDefault(); if (!wrapper.contains(eventCaptureElement)) { wrapper.appendChild(eventCaptureElement); } + const clientX = + "touches" in event ? event.touches[0].clientX : event.clientX; + resizeParams = { handleUsed: "right", initialWidth: wrapper.clientWidth, - initialClientX: event.clientX, + initialClientX: clientX, }; }; window.addEventListener("mousemove", windowMouseMoveHandler); + window.addEventListener("touchmove", windowMouseMoveHandler); window.addEventListener("mouseup", windowMouseUpHandler); + window.addEventListener("touchend", windowMouseUpHandler); wrapper.addEventListener("mouseenter", wrapperMouseEnterHandler); wrapper.addEventListener("mouseleave", wrapperMouseLeaveHandler); leftResizeHandle.addEventListener( "mousedown", leftResizeHandleMouseDownHandler, ); + leftResizeHandle.addEventListener( + "touchstart", + leftResizeHandleMouseDownHandler, + ); rightResizeHandle.addEventListener( "mousedown", rightResizeHandleMouseDownHandler, ); + rightResizeHandle.addEventListener( + "touchstart", + rightResizeHandleMouseDownHandler, + ); return { dom: wrapper, destroy: () => { destroy?.(); window.removeEventListener("mousemove", windowMouseMoveHandler); + window.removeEventListener("touchmove", windowMouseMoveHandler); window.removeEventListener("mouseup", windowMouseUpHandler); + window.removeEventListener("touchend", windowMouseUpHandler); wrapper.removeEventListener("mouseenter", wrapperMouseEnterHandler); wrapper.removeEventListener("mouseleave", wrapperMouseLeaveHandler); leftResizeHandle.removeEventListener( "mousedown", leftResizeHandleMouseDownHandler, ); + leftResizeHandle.removeEventListener( + "touchstart", + leftResizeHandleMouseDownHandler, + ); rightResizeHandle.removeEventListener( "mousedown", rightResizeHandleMouseDownHandler, ); + rightResizeHandle.removeEventListener( + "touchstart", + rightResizeHandleMouseDownHandler, + ); }, }; }; diff --git a/packages/react/src/blocks/FileBlockContent/helpers/render/ResizableFileBlockWrapper.tsx b/packages/react/src/blocks/FileBlockContent/helpers/render/ResizableFileBlockWrapper.tsx index 7aca733692..db6f784103 100644 --- a/packages/react/src/blocks/FileBlockContent/helpers/render/ResizableFileBlockWrapper.tsx +++ b/packages/react/src/blocks/FileBlockContent/helpers/render/ResizableFileBlockWrapper.tsx @@ -36,30 +36,29 @@ export const ResizableFileBlockWrapper = ( useEffect(() => { // Updates the child width with an updated width depending on the cursor X // offset from when the resize began, and which resize handle is being used. - const windowMouseMoveHandler = (event: MouseEvent) => { + const windowMouseMoveHandler = (event: MouseEvent | TouchEvent) => { let newWidth: number; + const clientX = + "touches" in event ? event.touches[0].clientX : event.clientX; + if (props.block.props.textAlignment === "center") { if (resizeParams!.handleUsed === "left") { newWidth = resizeParams!.initialWidth + - (resizeParams!.initialClientX - event.clientX) * 2; + (resizeParams!.initialClientX - clientX) * 2; } else { newWidth = resizeParams!.initialWidth + - (event.clientX - resizeParams!.initialClientX) * 2; + (clientX - resizeParams!.initialClientX) * 2; } } else { if (resizeParams!.handleUsed === "left") { newWidth = - resizeParams!.initialWidth + - resizeParams!.initialClientX - - event.clientX; + resizeParams!.initialWidth + resizeParams!.initialClientX - clientX; } else { newWidth = - resizeParams!.initialWidth + - event.clientX - - resizeParams!.initialClientX; + resizeParams!.initialWidth + clientX - resizeParams!.initialClientX; } } @@ -90,12 +89,16 @@ export const ResizableFileBlockWrapper = ( if (resizeParams) { window.addEventListener("mousemove", windowMouseMoveHandler); + window.addEventListener("touchmove", windowMouseMoveHandler); window.addEventListener("mouseup", windowMouseUpHandler); + window.addEventListener("touchend", windowMouseUpHandler); } return () => { window.removeEventListener("mousemove", windowMouseMoveHandler); + window.removeEventListener("touchmove", windowMouseMoveHandler); window.removeEventListener("mouseup", windowMouseUpHandler); + window.removeEventListener("touchend", windowMouseUpHandler); }; }, [props, resizeParams, width]); @@ -115,25 +118,31 @@ export const ResizableFileBlockWrapper = ( // Sets the resize params, allowing the user to begin resizing the child by // moving the cursor left or right. const leftResizeHandleMouseDownHandler = useCallback( - (event: React.MouseEvent) => { + (event: React.MouseEvent | React.TouchEvent) => { event.preventDefault(); + const clientX = + "touches" in event ? event.touches[0].clientX : event.clientX; + setResizeParams({ handleUsed: "left", initialWidth: ref.current!.clientWidth, - initialClientX: event.clientX, + initialClientX: clientX, }); }, [], ); const rightResizeHandleMouseDownHandler = useCallback( - (event: React.MouseEvent) => { + (event: React.MouseEvent | React.TouchEvent) => { event.preventDefault(); + const clientX = + "touches" in event ? event.touches[0].clientX : event.clientX; + setResizeParams({ handleUsed: "right", initialWidth: ref.current!.clientWidth, - initialClientX: event.clientX, + initialClientX: clientX, }); }, [], @@ -166,11 +175,13 @@ export const ResizableFileBlockWrapper = ( className={"bn-resize-handle"} style={{ left: "4px" }} onMouseDown={leftResizeHandleMouseDownHandler} + onTouchStart={leftResizeHandleMouseDownHandler} />
)} From 10ee7f624d48af6913aab2712f6f5bb985cf1ccf Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Wed, 3 Sep 2025 18:23:15 +0200 Subject: [PATCH 2/2] Small fix --- .../helpers/render/createResizableFileBlockWrapper.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts b/packages/core/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts index 4de732fe82..aa0a1c3dad 100644 --- a/packages/core/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts +++ b/packages/core/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts @@ -73,7 +73,7 @@ export const createResizableFileBlockWrapper = ( let newWidth: number; const clientX = - event instanceof TouchEvent ? event.touches[0].clientX : event.clientX; + "touches" in event ? event.touches[0].clientX : event.clientX; if (block.props.textAlignment === "center") { if (resizeParams.handleUsed === "left") {