cleanup redundant even listeners

facebook · Mar 6, 2025 · bccc07b · bccc07b
1 parent f8bcadb
commit bccc07b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 51 deletions.
diff --git a/packages/lexical-playground/src/plugins/TableCellResizer/index.css b/packages/lexical-playground/src/plugins/TableCellResizer/index.css
@@ -9,6 +9,7 @@
 
 .TableCellResizer__resizer {
   position: absolute;
+  touch-action: none;
 }
 
 @media (pointer: coarse) {

diff --git a/packages/lexical-playground/src/plugins/TableCellResizer/index.tsx b/packages/lexical-playground/src/plugins/TableCellResizer/index.tsx
@@ -52,15 +52,13 @@ function TableCellResizer({editor}: {editor: LexicalEditor}): JSX.Element {
   const targetRef = useRef<HTMLElement | null>(null);
   const resizerRef = useRef<HTMLDivElement | null>(null);
   const tableRectRef = useRef<ClientRect | null>(null);
-  const pointerTypeRef = useRef<string | null>(null);
   const [hasTable, setHasTable] = useState(false);
 
   const pointerStartPosRef = useRef<PointerPosition | null>(null);
   const [pointerCurrentPos, updatePointerCurrentPos] =
     useState<PointerPosition | null>(null);
 
   const [activeCell, updateActiveCell] = useState<TableDOMCell | null>(null);
-  const [isPointerDown, updateIsPointerDown] = useState<boolean>(false);
   const [draggingDirection, updateDraggingDirection] =
     useState<PointerDraggingDirection | null>(null);
 
@@ -72,10 +70,6 @@ function TableCellResizer({editor}: {editor: LexicalEditor}): JSX.Element {
     tableRectRef.current = null;
   }, []);
 
-  const isPointerDownOnEvent = (event: PointerEvent) => {
-    return (event.buttons & 1) === 1;
-  };
-
   useEffect(() => {
     const tableKeys = new Set<NodeKey>();
     return mergeRegister(
@@ -109,22 +103,20 @@ function TableCellResizer({editor}: {editor: LexicalEditor}): JSX.Element {
     }
 
     const onPointerMove = (event: PointerEvent) => {
-      if (event.pointerType === 'touch') {
-        return;
-      }
       const target = event.target;
       if (!isHTMLElement(target)) {
         return;
       }
 
       if (draggingDirection) {
+        event.preventDefault();
+        event.stopPropagation();
         updatePointerCurrentPos({
           x: event.clientX,
           y: event.clientY,
         });
         return;
       }
-      updateIsPointerDown(isPointerDownOnEvent(event));
       if (resizerRef.current && resizerRef.current.contains(target)) {
         return;
       }
@@ -165,64 +157,29 @@ function TableCellResizer({editor}: {editor: LexicalEditor}): JSX.Element {
     };
 
     const onPointerDown = (event: PointerEvent) => {
-      pointerTypeRef.current = event.pointerType;
-      updateIsPointerDown(true);
-    };
-
-    const onPointerUp = (event: PointerEvent) => {
-      updateIsPointerDown(false);
-    };
-
-    const onClick = (event: MouseEvent) => {
-      const pointerType = pointerTypeRef.current || 'mouse';
-      if (pointerType === 'touch') {
-        const pointerEvent = new PointerEvent('pointermove', {
-          ...event,
-          bubbles: true,
-          cancelable: true,
-        });
-        const target = event.target;
-        target?.dispatchEvent(pointerEvent);
-        updateIsPointerDown(false);
-      }
-    };
-
-    const onTouchMove = (event: TouchEvent) => {
-      if (draggingDirection) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (!event.touches || event.touches.length === 0) {
-          return;
-        }
-        const touch = event.touches[0];
-        updatePointerCurrentPos({
-          x: touch.clientX,
-          y: touch.clientY,
-        });
+      const isTouchEvent = event.pointerType === 'touch';
+      if (isTouchEvent) {
+        onPointerMove(event);
       }
     };
 
     const resizerContainer = resizerRef.current;
-    resizerContainer?.addEventListener('touchmove', onTouchMove, {
+    resizerContainer?.addEventListener('pointermove', onPointerMove, {
       capture: true,
     });
 
     const removeRootListener = editor.registerRootListener(
       (rootElement, prevRootElement) => {
         prevRootElement?.removeEventListener('pointermove', onPointerMove);
-        prevRootElement?.removeEventListener('click', onClick);
         prevRootElement?.removeEventListener('pointerdown', onPointerDown);
-        prevRootElement?.removeEventListener('pointerup', onPointerUp);
         rootElement?.addEventListener('pointermove', onPointerMove);
-        rootElement?.addEventListener('click', onClick);
         rootElement?.addEventListener('pointerdown', onPointerDown);
-        rootElement?.addEventListener('pointerup', onPointerUp);
       },
     );
 
     return () => {
       removeRootListener();
-      resizerContainer?.removeEventListener('touchmove', onTouchMove);
+      resizerContainer?.removeEventListener('pointermove', onPointerMove);
     };
   }, [activeCell, draggingDirection, editor, resetState, hasTable]);
 
@@ -471,7 +428,7 @@ function TableCellResizer({editor}: {editor: LexicalEditor}): JSX.Element {
 
   return (
     <div ref={resizerRef}>
-      {activeCell != null && !isPointerDown && (
+      {activeCell != null && (
         <>
           <div
             className="TableCellResizer__resizer TableCellResizer__ui"