diff --git a/apps/client/src/features/editor/components/table/handle/cell-chevron.tsx b/apps/client/src/features/editor/components/table/handle/cell-chevron.tsx index db79844e..ebac82dd 100644 --- a/apps/client/src/features/editor/components/table/handle/cell-chevron.tsx +++ b/apps/client/src/features/editor/components/table/handle/cell-chevron.tsx @@ -11,6 +11,7 @@ import clsx from "clsx"; import { useTranslation } from "react-i18next"; import { isCellSelection } from "@docmost/editor-ext"; import { CellChevronMenu } from "./menus/cell-chevron-menu"; +import { refocusEditorAfterMenuClose } from "./hooks/use-column-row-menu-lifecycle"; import classes from "./handle.module.css"; interface CellChevronProps { @@ -87,6 +88,7 @@ export const CellChevron = React.memo(function CellChevron({ const onClose = useCallback(() => { editor.commands.unfreezeHandles(); + refocusEditorAfterMenuClose(editor); }, [editor]); if (!cellDom) return null; diff --git a/apps/client/src/features/editor/components/table/handle/hooks/use-column-row-menu-lifecycle.ts b/apps/client/src/features/editor/components/table/handle/hooks/use-column-row-menu-lifecycle.ts index a3059559..100750bf 100644 --- a/apps/client/src/features/editor/components/table/handle/hooks/use-column-row-menu-lifecycle.ts +++ b/apps/client/src/features/editor/components/table/handle/hooks/use-column-row-menu-lifecycle.ts @@ -11,6 +11,39 @@ interface Args { tablePos: number; } +/** + * Restore focus to the editor after a table handle/cell menu closes. + * + * The grip/chevron menus are Mantine ``s with `returnFocus: true`, and + * their targets live in a floating/portaled layer OUTSIDE the editor's + * contenteditable. After an action (delete row/column, insert, etc.) the menu + * closes and Mantine returns focus to that outside target, so ProseMirror's + * undo keymap never sees Ctrl+Z until the user clicks back into a cell. + * + * We defer with `requestAnimationFrame` so this runs AFTER Mantine's + * returnFocus, and guard against stealing focus if the user intentionally + * moved to another input/editable (e.g. the page title). + */ +export function refocusEditorAfterMenuClose(editor: Editor) { + requestAnimationFrame(() => { + if (editor.isDestroyed) return; + const active = document.activeElement as HTMLElement | null; + // Already inside the editor — nothing to do. + if (active && editor.view.dom.contains(active)) return; + // Respect a deliberate move to another field/editable. + const tag = active?.tagName; + if ( + tag === "INPUT" || + tag === "TEXTAREA" || + tag === "SELECT" || + active?.isContentEditable + ) { + return; + } + editor.view.focus(); // pure DOM focus, no extra transaction + }); +} + export function useColumnRowMenuLifecycle({ editor, orientation, @@ -34,6 +67,7 @@ export function useColumnRowMenuLifecycle({ const onClose = useCallback(() => { editor.commands.unfreezeHandles(); + refocusEditorAfterMenuClose(editor); }, [editor]); return { onOpen, onClose };