Skip to content

fix: File block resize handles not working with touch input #1981

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 4, 2025
Merged

fix: File block resize handles not working with touch input #1981

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
066ec11
Fixed file block resize handles not working with touch input
matthewlipski Sep 3, 2025
10ee7f6
Small fix
matthewlipski Sep 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 41 additions & 14 deletions packages/core/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 &&
Expand All @@ -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;
}
}

Expand All @@ -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 ||
Expand Down Expand Up @@ -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,
);
},
};
};
37 changes: 24 additions & 13 deletions packages/react/src/blocks/FileBlockContent/helpers/render/ResizableFileBlockWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down Expand Up @@ -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]);

Expand All @@ -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,
});
},
[],
Expand Down Expand Up @@ -166,11 +175,13 @@ export const ResizableFileBlockWrapper = (
className={"bn-resize-handle"}
style={{ left: "4px" }}
onMouseDown={leftResizeHandleMouseDownHandler}
onTouchStart={leftResizeHandleMouseDownHandler}
/>
<div
className={"bn-resize-handle"}
style={{ right: "4px" }}
onMouseDown={rightResizeHandleMouseDownHandler}
onTouchStart={rightResizeHandleMouseDownHandler}
/>
</>
)}
Expand Down
Loading