From 7e3a79cbb4fc3139cc3d05e31e63367027d9d78f Mon Sep 17 00:00:00 2001
From: Alex Reznik <alexander.reznik.01@gmail.com>
Date: Wed, 8 May 2024 13:22:26 +0100
Subject: [PATCH] [lexical-table][lexical-playground] Bug Fix: Table selection
 stuck  (#6049)

---
 packages/lexical-playground/__tests__/utils/index.mjs  | 10 ++++++++++
 .../lexical-table/src/LexicalTableSelectionHelpers.ts  | 10 ++++++++++
 2 files changed, 20 insertions(+)

diff --git a/packages/lexical-playground/__tests__/utils/index.mjs b/packages/lexical-playground/__tests__/utils/index.mjs
index 3a6f2905c7b..213f7b18508 100644
--- 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
index e45c366faa3..3fb7135dd96 100644
--- 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 &&