From 9751cab16c27a9d3dca477bc9f5a53e55812eb81 Mon Sep 17 00:00:00 2001
From: Abdul Rehman <76230556+Abdulrehman-PIAIC80387@users.noreply.github.com>
Date: Sun, 3 May 2026 23:34:29 +0500
Subject: [PATCH] fix(editor): native table column resize broken in edgeless
 mode (#14824)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #14717

## Summary

When a native `affine:table` block is placed in a note on the edgeless
canvas, dragging the column resize handle (or the column/row drag
handles) causes the canvas to pan instead of triggering the resize/drag,
because the edgeless `DragController` listens at the `pointerdown` level
— earlier than `SelectionController`'s existing `mousedown` handler.

## Fix

Two interception layers added to
`blocksuite/affine/blocks/table/src/selection-controller.ts`, matching
the working pattern in `affine:database`'s `database-header-column.ts`:

1. **DOM-level `pointerdown` `stopPropagation()`** in `dragListener()` —
prevents the edgeless `DragController` from capturing the event before
BlockSuite's event system sees it.
2. **`handleEvent('dragStart', ...)`** in `hostConnected()` — returns
`true` when the target is a resize/drag handle, so the BlockSuite event
dispatcher doesn't route to the edgeless tool controller.

Selectors guarded: `[data-width-adjust-column-id]`,
`[data-drag-column-id]`, `[data-drag-row-id]`.

Mobile and readonly states preserved (matching existing `dragListener()`
guards).

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Improved drag-and-drop interaction handling for table operations,
including column width adjustment and row/column dragging. Enhanced
event handling to prevent unintended drag actions and ensure proper
behavior.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../blocks/table/src/selection-controller.ts  | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/blocksuite/affine/blocks/table/src/selection-controller.ts b/blocksuite/affine/blocks/table/src/selection-controller.ts
index 0274d52ec..73b7ca43f 100644
--- a/blocksuite/affine/blocks/table/src/selection-controller.ts
+++ b/blocksuite/affine/blocks/table/src/selection-controller.ts
@@ -33,6 +33,22 @@ export class SelectionController implements ReactiveController {
     this.host.handleEvent('copy', this.onCopy);
     this.host.handleEvent('cut', this.onCut);
     this.host.handleEvent('paste', this.onPaste);
+    this.host.handleEvent('dragStart', context => {
+      if (IS_MOBILE || this.dataManager.readonly$.value) return false;
+      const event = context.get('pointerState').raw;
+      const target = event.target;
+      if (
+        target instanceof Element &&
+        target.closest(
+          '[data-width-adjust-column-id], [data-drag-column-id], [data-drag-row-id]'
+        )
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+        return true;
+      }
+      return false;
+    });
   }
   private get dataManager() {
     return this.host.dataManager;
@@ -84,6 +100,17 @@ export class SelectionController implements ReactiveController {
     if (IS_MOBILE || this.dataManager.readonly$.value) {
       return;
     }
+    this.host.disposables.addFromEvent(this.host, 'pointerdown', event => {
+      const target = event.target;
+      if (!(target instanceof HTMLElement)) return;
+      if (
+        target.closest(
+          '[data-width-adjust-column-id], [data-drag-column-id], [data-drag-row-id]'
+        )
+      ) {
+        event.stopPropagation();
+      }
+    });
     this.host.disposables.addFromEvent(this.host, 'mousedown', event => {
       const target = event.target;
       if (!(target instanceof HTMLElement)) {