diff --git a/packages/core/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts b/packages/core/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts index ec7c736b7d..aa0a1c3dad 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 = + "touches" in event ? 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} />
> )}