diff --git a/apps/client/src/features/editor/components/table/handle/column-handle.tsx b/apps/client/src/features/editor/components/table/handle/column-handle.tsx index e634a8518..ccc459740 100644 --- a/apps/client/src/features/editor/components/table/handle/column-handle.tsx +++ b/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(".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 ( 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]); } diff --git a/apps/client/src/features/editor/components/table/handle/row-handle.tsx b/apps/client/src/features/editor/components/table/handle/row-handle.tsx index 107c303f1..7a5483558 100644 --- a/apps/client/src/features/editor/components/table/handle/row-handle.tsx +++ b/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(".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 (