fix: close table handle menu when drag starts

apps/client/src/features/editor/components/table/handle/column-handle.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import type { Editor } from "@tiptap/react";
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import { useFloating, offset, autoUpdate, hide } from "@floating-ui/react";
@@ -58,7 +58,10 @@ export const ColumnHandle = React.memo(function ColumnHandle({
   // wrapper for this drag's auto-scroll. The handle itself lives in a
   // floating layer outside the editor DOM, so we can't walk up from it.
   const wrapper = cellDom?.closest<HTMLElement>(".tableWrapper") ?? null;
-  useTableHandleDrag(editor, "col", handleEl, wrapper);
+
+  const [menuOpened, setMenuOpened] = useState(false);
+  const closeMenu = useCallback(() => setMenuOpened(false), []);
+  useTableHandleDrag(editor, "col", handleEl, wrapper, closeMenu);
 
   const { onOpen, onClose } = useColumnRowMenuLifecycle({
     editor,
@@ -72,6 +75,8 @@ export const ColumnHandle = React.memo(function ColumnHandle({
 
   return (
     <Menu
+      opened={menuOpened}
+      onChange={setMenuOpened}
       position="bottom-start"
       onOpen={onOpen}
       onClose={onClose}

apps/client/src/features/editor/components/table/handle/hooks/use-table-handle-drag.ts

@@ -16,6 +16,7 @@ export function useTableHandleDrag(
   orientation: "col" | "row",
   element: HTMLElement | null,
   wrapper: HTMLElement | null,
+  onDragStart?: () => void,
 ) {
   useEffect(() => {
     if (!element) return;
@@ -30,6 +31,9 @@ export function useTableHandleDrag(
           disableNativeDragPreview({ nativeSetDragImage });
         },
         onDragStart: ({ location }) => {
+          // The menu (if open from a prior click on the handle) won't dismiss
+          // on its own — pragmatic-dnd swallows the events Mantine listens for.
+          onDragStart?.();
           const spec = getTableHandlePluginSpec(editor);
           if (!spec) return;
           const { clientX, clientY } = location.initial.input;
@@ -71,5 +75,5 @@ export function useTableHandleDrag(
         : () => {},
       autoScrollWindowForElements({ getAllowedAxis: () => "vertical" }),
     );
-  }, [editor, orientation, element, wrapper]);
+  }, [editor, orientation, element, wrapper, onDragStart]);
 }

apps/client/src/features/editor/components/table/handle/row-handle.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import type { Editor } from "@tiptap/react";
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import { useFloating, offset, autoUpdate, hide } from "@floating-ui/react";
@@ -53,7 +53,10 @@ export const RowHandle = React.memo(function RowHandle({
   }, [cellDom, refs]);
 
   const wrapper = cellDom?.closest<HTMLElement>(".tableWrapper") ?? null;
-  useTableHandleDrag(editor, "row", handleEl, wrapper);
+
+  const [menuOpened, setMenuOpened] = useState(false);
+  const closeMenu = useCallback(() => setMenuOpened(false), []);
+  useTableHandleDrag(editor, "row", handleEl, wrapper, closeMenu);
 
   const { onOpen, onClose } = useColumnRowMenuLifecycle({
     editor,
@@ -67,6 +70,8 @@ export const RowHandle = React.memo(function RowHandle({
 
   return (
     <Menu
+      opened={menuOpened}
+      onChange={setMenuOpened}
       position="right-start"
       onOpen={onOpen}
       onClose={onClose}