[lexical-table][lexical-playground] Bug Fix: Table selection stuck (#…

…6049)
facebook · May 8, 2024 · 7e3a79c · 7e3a79c
1 parent 89a9701
commit 7e3a79c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/packages/lexical-playground/__tests__/utils/index.mjs b/packages/lexical-playground/__tests__/utils/index.mjs
@@ -620,6 +620,7 @@ export async function dragMouse(
   positionStart = 'middle',
   positionEnd = 'middle',
   mouseUp = true,
+  slow = false,
 ) {
   let fromX = fromBoundingBox.x;
   let fromY = fromBoundingBox.y;
@@ -643,6 +644,11 @@ export async function dragMouse(
     toY += toBoundingBox.height;
   }
 
+  if (slow) {
+    //simulate more than 1 mouse move event to replicate human slow dragging
+    await page.mouse.move((fromX + toX) / 2, (fromY + toY) / 2);
+  }
+
   await page.mouse.move(toX, toY);
 
   if (mouseUp) {
@@ -801,6 +807,10 @@ export async function selectCellsFromTableCords(
     page,
     await firstRowFirstColumnCell.boundingBox(),
     await secondRowSecondCell.boundingBox(),
+    'middle',
+    'middle',
+    true,
+    true,
   );
 }
 

diff --git a/packages/lexical-table/src/LexicalTableSelectionHelpers.ts b/packages/lexical-table/src/LexicalTableSelectionHelpers.ts
@@ -77,6 +77,10 @@ export const getDOMSelection = (
 ): Selection | null =>
   CAN_USE_DOM ? (targetWindow || window).getSelection() : null;
 
+const isMouseDownOnEvent = (event: MouseEvent) => {
+  return (event.buttons & 1) === 1;
+};
+
 export function applyTableHandlers(
   tableNode: TableNode,
   tableElement: HTMLTableElementWithWithTableSelectionState,
@@ -104,6 +108,12 @@ export function applyTableHandlers(
     const onMouseMove = (moveEvent: MouseEvent) => {
       // delaying mousemove handler to allow selectionchange handler from LexicalEvents.ts to be executed first
       setTimeout(() => {
+        if (!isMouseDownOnEvent(moveEvent) && tableObserver.isSelecting) {
+          tableObserver.isSelecting = false;
+          editorWindow.removeEventListener('mouseup', onMouseUp);
+          editorWindow.removeEventListener('mousemove', onMouseMove);
+          return;
+        }
         const focusCell = getDOMCellFromTarget(moveEvent.target as Node);
         if (
           focusCell !== null &&