fix(editor): stabilize slash menu arrow key navigation (#205)

[zacharias-ona]

Closes #205

What

The slash command menu (/) jumped back to the first item when navigating with arrow keys. Two issues caused this: (1) the options array was recreated via useMemo on every queryString change, discarding the MenuOption.ref DOM references that Lexical's internal arrow-key handler relies on for scroll-into-view, and (2) Lexical's built-in SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND targets the #typeahead-menu anchor positioning div rather than the overflow-y-auto scrollable menu container we render, so items were never scrolled within the menu.

How

Split the single useMemo into a stable baseOptions memo (depends only on editor) and a separate filter memo (depends on baseOptions + queryString). This keeps MenuOption instances and their DOM refs alive across query changes. Added explicit scrollIntoView({ block: 'nearest' }) on the highlighted item via requestAnimationFrame in the render function, triggered when selectedIndex changes, targeting children of our scrollable menu container directly.

Testing

• Added E2E test "arrow keys navigate sequentially without jumping back to top" — presses ArrowDown 6 times and verifies each subsequent item is highlighted without jumping back to index 0.
• Added E2E test "selected item scrolls into view when navigating with arrow keys" — navigates to the last menu item and verifies it is both highlighted and in the viewport.
• All existing slash command E2E tests continue to pass.
• pnpm lint && pnpm typecheck && pnpm test all pass.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
memo	Ready	Preview, Comment	Apr 17, 2026 10:52pm

[zacharias-ona]

✅ UI verification passed — design spec compliance confirmed.

Static analysis: All classes in slash-command-plugin.tsx use design token colors (bg-popover, text-foreground, text-muted-foreground, bg-white/[0.08], border-white/[0.06]), correct typography scale (text-sm, text-xs, font-medium), Tailwind spacing scale (px-2, py-1.5, p-1, gap-2), and rounded-sm for the floating menu (per spec exception). No new visual classes were introduced — changes are purely behavioral (ref stability, scroll-into-view).

Visual verification: Playwright screenshots of the editor page (desktop dark + mobile) and slash command menu (open state + scrolled to bottom) confirm:

• Slash menu renders correctly with proper highlight on arrow key navigation
• Scroll-into-view works — last item ("Toggle") is highlighted and visible when navigated to
• No broken layouts, overlapping elements, or contrast issues
• Mobile layout correct (sidebar hidden, hamburger visible)

[zacharias-ona]

⚠️ Post-merge verification completed with pre-existing E2E failures (unrelated to this PR).

E2E suite: 49 passed, 2 failed, 3 skipped (due to dependency on failed test)

This PR's new tests both passed:

• ✅ arrow keys navigate sequentially without jumping back to top
• ✅ selected item scrolls into view when navigating with arrow keys

Pre-existing failures (not caused by this PR):

• ❌ members.spec.ts:139 — "owner can re-invite and invited user can accept" — strict mode violation, duplicate member entries → bug: E2E flake — "owner can re-invite and invited user can accept" strict mode violation #215
• ❌ search.spec.ts:188 — "search with no matches shows empty state" — empty state message not rendered → bug: search empty state not shown when no results match #216

Ad-hoc smoke tests: ✅ All passed

• ✅ Landing page loads with title
• ✅ Sign-in page renders with email input
• ✅ Health endpoint returns OK
• ✅ Authenticated login + workspace load
• ✅ No console errors (unauthenticated or authenticated)
• ⏭️ Skipped: editor page navigation (no page buttons in test workspace)
• ⏭️ Skipped: /dashboard (not yet built)