fix(tables): prevent stuck resize drag when pointer leaves window

Author: harbournick

packages/super-editor/src/components/TableResizeOverlay.test.js

@@ -1308,5 +1308,91 @@ describe('TableResizeOverlay', () => {
 
       wrapper.unmount();
     });
+
+    it('should cancel an active column drag on window blur', async () => {
+      const editor = createMockEditor();
+      const tableElement = createMockTableElement();
+      const wrapper = mount(TableResizeOverlay, {
+        props: {
+          editor,
+          visible: true,
+          tableElement,
+        },
+      });
+
+      await nextTick();
+
+      const downEvent = new MouseEvent('mousedown', { clientX: 100 });
+      Object.defineProperty(downEvent, 'preventDefault', { value: vi.fn() });
+      Object.defineProperty(downEvent, 'stopPropagation', { value: vi.fn() });
+      wrapper.vm.onHandleMouseDown(downEvent, 0);
+
+      expect(wrapper.vm.dragState).not.toBeNull();
+      expect(editor.view.dom.style.pointerEvents).toBe('none');
+
+      window.dispatchEvent(new Event('blur'));
+      await nextTick();
+
+      expect(wrapper.vm.dragState).toBeNull();
+      expect(editor.view.dom.style.pointerEvents).toBe('auto');
+      expect(wrapper.emitted('resize-end')).toBeDefined();
+
+      wrapper.unmount();
+    });
+
+    it('should cancel an active row drag when the document becomes hidden', async () => {
+      const originalVisibilityState = Object.getOwnPropertyDescriptor(document, 'visibilityState');
+      Object.defineProperty(document, 'visibilityState', {
+        configurable: true,
+        value: 'hidden',
+      });
+
+      try {
+        const editor = createMockEditor();
+        const metadata = {
+          columns: [
+            { i: 0, x: 0, w: 100, min: 50, r: 1 },
+            { i: 1, x: 100, w: 150, min: 50, r: 1 },
+          ],
+          rows: [
+            { i: 0, y: 0, h: 50, min: 30, r: 1 },
+            { i: 1, y: 50, h: 50, min: 30, r: 1 },
+          ],
+        };
+        const tableElement = createMockTableElement(metadata);
+        const wrapper = mount(TableResizeOverlay, {
+          props: {
+            editor,
+            visible: true,
+            tableElement,
+          },
+        });
+
+        await nextTick();
+
+        const downEvent = new MouseEvent('mousedown', { clientY: 50 });
+        Object.defineProperty(downEvent, 'preventDefault', { value: vi.fn() });
+        Object.defineProperty(downEvent, 'stopPropagation', { value: vi.fn() });
+        wrapper.vm.onRowHandleMouseDown(downEvent, 0);
+
+        expect(wrapper.vm.rowDragState).not.toBeNull();
+        expect(editor.view.dom.style.pointerEvents).toBe('none');
+
+        document.dispatchEvent(new Event('visibilitychange'));
+        await nextTick();
+
+        expect(wrapper.vm.rowDragState).toBeNull();
+        expect(editor.view.dom.style.pointerEvents).toBe('auto');
+        expect(wrapper.emitted('resize-end')).toBeDefined();
+
+        wrapper.unmount();
+      } finally {
+        if (originalVisibilityState) {
+          Object.defineProperty(document, 'visibilityState', originalVisibilityState);
+        } else {
+          delete document.visibilityState;
+        }
+      }
+    });
   });
 });

packages/super-editor/src/components/TableResizeOverlay.vue

@@ -242,6 +242,36 @@ const MIN_RESIZE_DELTA_PX = 1;
 let rafId = null;
 let isUnmounted = false;
 
+function removeInteractionCancelListeners() {
+  window.removeEventListener('blur', onInteractionCancel);
+  document.removeEventListener('visibilitychange', onInteractionCancel);
+}
+
+function cancelActiveResizeDrag() {
+  if (!dragState.value && !rowDragState.value) return;
+
+  forcedCleanup.value = true;
+  if (dragState.value) {
+    onDocumentMouseUp(new MouseEvent('mouseup'));
+  }
+  if (rowDragState.value) {
+    onRowDocumentMouseUp();
+  }
+  forcedCleanup.value = false;
+}
+
+function onInteractionCancel(event) {
+  if (!dragState.value && !rowDragState.value) return;
+  if (event?.type === 'visibilitychange' && document.visibilityState === 'visible') {
+    return;
+  }
+  if (document.visibilityState && document.visibilityState !== 'visible') {
+    cancelActiveResizeDrag();
+    return;
+  }
+  cancelActiveResizeDrag();
+}
+
 /**
  * Starts continuous RAF-based tracking of the overlay position.
  *
@@ -763,6 +793,8 @@ function onHandleMouseDown(event, resizableBoundaryIndex) {
   try {
     document.addEventListener('mousemove', onDocumentMouseMove);
     document.addEventListener('mouseup', onDocumentMouseUp);
+    window.addEventListener('blur', onInteractionCancel);
+    document.addEventListener('visibilitychange', onInteractionCancel);
 
     emit('resize-start', {
       columnIndex: boundary.index,
@@ -890,6 +922,7 @@ function onDocumentMouseUp(event) {
   // Clean up event listeners and restore pointer events
   document.removeEventListener('mousemove', onDocumentMouseMove);
   document.removeEventListener('mouseup', onDocumentMouseUp);
+  removeInteractionCancelListeners();
 
   if (props.editor?.view?.dom) {
     const pmView = props.editor.view.dom;
@@ -1130,6 +1163,8 @@ function onRowHandleMouseDown(event, rowBoundaryIndex) {
 
   document.addEventListener('mousemove', onRowDocumentMouseMove);
   document.addEventListener('mouseup', onRowDocumentMouseUp);
+  window.addEventListener('blur', onInteractionCancel);
+  document.addEventListener('visibilitychange', onInteractionCancel);
 
   emit('resize-start', { rowIndex: rowBoundary.i });
 }
@@ -1165,6 +1200,7 @@ function onRowDocumentMouseUp() {
 
   document.removeEventListener('mousemove', onRowDocumentMouseMove);
   document.removeEventListener('mouseup', onRowDocumentMouseUp);
+  removeInteractionCancelListeners();
 
   if (props.editor?.view?.dom) {
     props.editor.view.dom.style.pointerEvents = 'auto';
@@ -1286,16 +1322,7 @@ watch(
     } else {
       stopOverlayTracking();
       // Clean up drag state if overlay is hidden
-      if (dragState.value) {
-        forcedCleanup.value = true;
-        onDocumentMouseUp(new MouseEvent('mouseup'));
-        forcedCleanup.value = false;
-      }
-      if (rowDragState.value) {
-        forcedCleanup.value = true;
-        onRowDocumentMouseUp();
-        forcedCleanup.value = false;
-      }
+      cancelActiveResizeDrag();
     }
   },
 );
@@ -1333,6 +1360,7 @@ onBeforeUnmount(() => {
     props.editor.view.dom.style.pointerEvents = 'auto';
   }
 
+  removeInteractionCancelListeners();
   window.removeEventListener('scroll', updateOverlayRect, true);
   window.removeEventListener('resize', updateOverlayRect);
 });