Add listeners only when required

AlexanderReznik · Apr 2, 2024 · a64352c · a64352c
1 parent c7ef4ae
commit a64352c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 17 deletions.
diff --git a/packages/lexical-table/src/LexicalTableObserver.ts b/packages/lexical-table/src/LexicalTableObserver.ts
@@ -72,6 +72,7 @@ export class TableObserver {
   editor: LexicalEditor;
   tableSelection: TableSelection | null;
   hasHijackedSelectionStyles: boolean;
+  inSelectionProgress: boolean;
 
   constructor(editor: LexicalEditor, tableNodeKey: string) {
     this.isHighlightingCells = false;
@@ -94,6 +95,7 @@ export class TableObserver {
     this.focusCell = null;
     this.hasHijackedSelectionStyles = false;
     this.trackTable();
+    this.inSelectionProgress = false;
   }
 
   getTable(): TableDOMTable {

diff --git a/packages/lexical-table/src/LexicalTableSelectionHelpers.ts b/packages/lexical-table/src/LexicalTableSelectionHelpers.ts
@@ -88,21 +88,25 @@ export function applyTableHandlers(
 
   attachTableObserverToTableElement(tableElement, tableObserver);
 
-  const onMouseUp = () => {
-    editorWindow.removeEventListener('mouseup', onMouseUp);
-    editorWindow.removeEventListener('mousemove', onMouseMove);
-  };
-
-  const onMouseMove = (moveEvent: MouseEvent) => {
-    const focusCell = getDOMCellFromTarget(moveEvent.target as Node);
-    if (
-      focusCell !== null &&
-      (tableObserver.anchorX !== focusCell.x ||
-        tableObserver.anchorY !== focusCell.y)
-    ) {
-      moveEvent.preventDefault();
-      tableObserver.setFocusCellForSelection(focusCell);
-    }
+  const createMouseHandlers = () => {
+    const onMouseUp = () => {
+      tableObserver.inSelectionProgress = false;
+      editorWindow.removeEventListener('mouseup', onMouseUp);
+      editorWindow.removeEventListener('mousemove', onMouseMove);
+    };
+
+    const onMouseMove = (moveEvent: MouseEvent) => {
+      const focusCell = getDOMCellFromTarget(moveEvent.target as Node);
+      if (
+        focusCell !== null &&
+        (tableObserver.anchorX !== focusCell.x ||
+          tableObserver.anchorY !== focusCell.y)
+      ) {
+        moveEvent.preventDefault();
+        tableObserver.setFocusCellForSelection(focusCell);
+      }
+    };
+    return {onMouseMove: onMouseMove, onMouseUp: onMouseUp};
   };
 
   tableElement.addEventListener('mousedown', (event: MouseEvent) => {
@@ -121,6 +125,8 @@ export function applyTableHandlers(
         tableObserver.setAnchorCellForSelection(anchorCell);
       }
 
+      const {onMouseUp, onMouseMove} = createMouseHandlers();
+      tableObserver.inSelectionProgress = true;
       editorWindow.addEventListener('mouseup', onMouseUp);
       editorWindow.addEventListener('mousemove', onMouseMove);
     }, 0);
@@ -717,8 +723,14 @@ export function applyTableHandlers(
                 getObserverCellFromCellNode(focusCellNode),
                 true,
               );
-              editorWindow.addEventListener('mouseup', onMouseUp);
-              editorWindow.addEventListener('mousemove', onMouseMove);
+              if (!tableObserver.inSelectionProgress) {
+                setTimeout(() => {
+                  const {onMouseUp, onMouseMove} = createMouseHandlers();
+                  tableObserver.inSelectionProgress = true;
+                  editorWindow.addEventListener('mouseup', onMouseUp);
+                  editorWindow.addEventListener('mousemove', onMouseMove);
+                }, 0);
+              }
             }
           }
         } else if (