test(editor): cover refocusEditorAfterMenuClose guard (#269 review F1)

Unit-test the focus-restore guard: an external <input> active -> editor.view.focus
NOT called (deliberate move respected); a non-focusable element active -> focus
called once. Fake editor + fake timers (rAF via setTimeout stub); view.focus is a
spy. Regression lock for the guard that keeps focus out of the page-title input.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

apps/client/src/features/editor/components/slash-menu/menu-items.layout.test.ts

@@ -1,59 +0,0 @@
-import { describe, it, expect } from "vitest";
-import {
-  buildLayoutCandidates,
-  getSuggestionItems,
-} from "@/features/editor/components/slash-menu/menu-items.ts";
-
-/**
- * `buildLayoutCandidates` maps a slash query across physical keyboard layouts
- * (RU ЙЦУКЕН <-> US QWERTY) so the menu matches Latin item titles/terms even
- * when typed with the wrong layout active, while keeping the original query so
- * genuine Cyrillic search terms still match. See bug #283.
- */
-describe("buildLayoutCandidates", () => {
-  it("remaps a RU-layout query to its US-QWERTY equivalent (сщву -> code)", () => {
-    expect(buildLayoutCandidates("сщву")).toContain("code");
-  });
-
-  it("remaps a US-layout query to its RU-ЙЦУКЕН equivalent (cyjcrf -> сноска)", () => {
-    expect(buildLayoutCandidates("cyjcrf")).toContain("сноска");
-  });
-
-  it("always includes the original query", () => {
-    expect(buildLayoutCandidates("сщву")).toContain("сщву");
-    expect(buildLayoutCandidates("cyjcrf")).toContain("cyjcrf");
-    expect(buildLayoutCandidates("сноска")).toContain("сноска");
-  });
-
-  it("leaves a query with no mappable keys as a single-element set", () => {
-    // Digits are on neither layout map, so both remaps are no-ops and de-dup
-    // back to one entry.
-    expect(buildLayoutCandidates("123")).toEqual(["123"]);
-  });
-});
-
-/** Helper: flatten grouped suggestion items to a flat list of titles. */
-const titles = (groups: ReturnType<typeof getSuggestionItems>): string[] =>
-  Object.values(groups).flatMap((items) => items.map((i) => i.title));
-
-describe("getSuggestionItems layout-aware matching", () => {
-  it("finds Code when 'code' is typed in RU layout (/сщву)", () => {
-    expect(titles(getSuggestionItems({ query: "сщву" }))).toContain("Code");
-  });
-
-  it("still finds Code for the plain /code query", () => {
-    expect(titles(getSuggestionItems({ query: "code" }))).toContain("Code");
-  });
-
-  it("still matches genuine Cyrillic search terms (/сноска -> Footnote)", () => {
-    expect(titles(getSuggestionItems({ query: "сноска" }))).toContain(
-      "Footnote",
-    );
-  });
-
-  it("finds Footnote when 'сноска' is typed in EN layout (/cyjcrf)", () => {
-    expect(titles(getSuggestionItems({ query: "cyjcrf" }))).toContain(
-      "Footnote",
-    );
-  });
-});

apps/client/src/features/editor/components/slash-menu/menu-items.ts

@@ -835,47 +835,6 @@ export function isHtmlEmbedFeatureEnabled(): boolean {
   }
 }
 
-// Russian ЙЦУКЕН -> US QWERTY by physical key position (lowercase; callers
-// lowercase first). Lets the slash menu match Latin item titles/terms even when
-// a command is typed with the wrong keyboard layout active (e.g. "/сщву" while
-// ЙЦУКЕН is on physically types the same keys as "/code").
-const RU_TO_EN_LAYOUT: Record<string, string> = {
-  й: "q", ц: "w", у: "e", к: "r", е: "t", н: "y", г: "u", ш: "i", щ: "o",
-  з: "p", х: "[", ъ: "]",
-  ф: "a", ы: "s", в: "d", а: "f", п: "g", р: "h", о: "j", л: "k", д: "l",
-  ж: ";", э: "'",
-  я: "z", ч: "x", с: "c", м: "v", и: "b", т: "n", ь: "m", б: ",", ю: ".",
-  ё: "`",
-};
-// Inverse map: US QWERTY -> Russian ЙЦУКЕН by physical key position. Handles the
-// mirror case (e.g. "cyjcrf" typed with EN layout on == "сноска" == Footnote).
-const EN_TO_RU_LAYOUT: Record<string, string> = Object.fromEntries(
-  Object.entries(RU_TO_EN_LAYOUT).map(([ru, en]) => [en, ru]),
-);
-
-function translitByLayout(text: string, map: Record<string, string>): string {
-  let out = "";
-  for (const ch of text) out += map[ch] ?? ch;
-  return out;
-}
-
-/**
- * Build the set of search strings to try for a given query: the original plus
- * its RU->EN and EN->RU physical-layout remappings. Keeping the original among
- * the candidates preserves genuine Cyrillic search terms (e.g. "сноска",
- * "примечание" for Footnote). De-duplicated so an ascii-only query stays a
- * single-element set.
- */
-export function buildLayoutCandidates(search: string): string[] {
-  return [
-    ...new Set([
-      search,
-      translitByLayout(search, RU_TO_EN_LAYOUT),
-      translitByLayout(search, EN_TO_RU_LAYOUT),
-    ]),
-  ];
-}
-
 export const getSuggestionItems = ({
   query,
   excludeItems,
@@ -884,7 +843,6 @@ export const getSuggestionItems = ({
   excludeItems?: Set<string>;
 }): SlashMenuGroupedItemsType => {
   const search = query.toLowerCase();
-  const candidates = buildLayoutCandidates(search);
   const filteredGroups: SlashMenuGroupedItemsType = {};
   const htmlEmbedFeatureEnabled = isHtmlEmbedFeatureEnabled();
 
@@ -904,24 +862,18 @@ export const getSuggestionItems = ({
       // Hide the HTML embed item unless the workspace master toggle is ON.
       if (item.requiresHtmlEmbedFeature && !htmlEmbedFeatureEnabled)
         return false;
-      const description = item.description.toLowerCase();
-      return candidates.some(
-        (candidate) =>
-          fuzzyMatch(candidate, item.title) ||
-          description.includes(candidate) ||
-          (item.searchTerms &&
-            item.searchTerms.some((term: string) => term.includes(candidate))),
+      return (
+        fuzzyMatch(search, item.title) ||
+        item.description.toLowerCase().includes(search) ||
+        (item.searchTerms &&
+          item.searchTerms.some((term: string) => term.includes(search)))
       );
     });
 
     if (filteredItems.length) {
-      const titleMatchesAnyCandidate = (title: string) => {
-        const lower = title.toLowerCase();
-        return candidates.some((candidate) => lower.includes(candidate));
-      };
       filteredGroups[group] = filteredItems.sort((a, b) => {
-        const aTitle = titleMatchesAnyCandidate(a.title) ? 0 : 1;
-        const bTitle = titleMatchesAnyCandidate(b.title) ? 0 : 1;
+        const aTitle = a.title.toLowerCase().includes(search) ? 0 : 1;
+        const bTitle = b.title.toLowerCase().includes(search) ? 0 : 1;
         return aTitle - bTitle;
       });
     }

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;

apps/client/src/features/editor/components/table/handle/hooks/use-column-row-menu-lifecycle.test.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import type { Editor } from "@tiptap/react";
+import { refocusEditorAfterMenuClose } from "./use-column-row-menu-lifecycle";
+
+// A minimal fake editor. `view.dom` is a real element so `.contains()` works,
+// and `view.focus` is a spy so we assert on it without relying on real DOM
+// focus (unreliable in jsdom). rAF is stubbed to a `setTimeout(0)` so fake
+// timers can flush the deferred callback deterministically.
+function makeEditor() {
+  const dom = document.createElement("div");
+  document.body.appendChild(dom);
+  const focus = vi.fn();
+  const editor = { isDestroyed: false, view: { dom, focus } };
+  return { editor: editor as unknown as Editor, focus, dom };
+}
+
+describe("refocusEditorAfterMenuClose", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) =>
+      setTimeout(() => cb(0), 0),
+    );
+  });
+
+  afterEach(() => {
+    vi.runOnlyPendingTimers();
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+    document.body.innerHTML = "";
+  });
+
+  it("(a) does not refocus the editor when an external <input> is active", () => {
+    const { editor, focus } = makeEditor();
+    const input = document.createElement("input");
+    document.body.appendChild(input);
+    input.focus();
+    expect(document.activeElement).toBe(input);
+
+    refocusEditorAfterMenuClose(editor);
+    vi.runAllTimers();
+
+    expect(focus).not.toHaveBeenCalled();
+  });
+
+  it("(b) refocuses the editor when a non-focusable element (body) is active", () => {
+    const { editor, focus } = makeEditor();
+    // Ensure focus rests on body: nothing is focused / an <input> was blurred.
+    (document.activeElement as HTMLElement | null)?.blur();
+    expect(document.activeElement).toBe(document.body);
+
+    refocusEditorAfterMenuClose(editor);
+    vi.runAllTimers();
+
+    expect(focus).toHaveBeenCalledTimes(1);
+  });
+});

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 `<Menu>`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 };