fix: file block resize handles not working with touch inputs (#1981)

Author: matthewlipski

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,
+      );
     },
   };
 };

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}
             />
             <div
               className={"bn-resize-handle"}
               style={{ right: "4px" }}
               onMouseDown={rightResizeHandleMouseDownHandler}
+              onTouchStart={rightResizeHandleMouseDownHandler}
             />
           </>
         )}