feat(slash-menu): notion-like slash menu UX with inline filtering

[tupizz]

Resolves SD-1945

Summary

Rewrites the slash menu to follow Notion's UX pattern: typing / inserts the character into the document and opens the menu below. Subsequent keystrokes filter items in real-time from the document text. This replaces the previous hidden-input approach with a more intuitive inline editing experience.

Merged with main's context-menu rename (SD-1824) — all naming now uses contextMenu conventions (contextMenu:open, contextMenu:navigate, ContextMenuPluginKey, .context-menu CSS classes).

Behavior

Slash menu opens with / visible in document

• Type / in a paragraph → the character appears in the document and the menu opens below the cursor
• First item is auto-selected with a visible blue highlight

Real-time filtering from document text

• Continue typing after / to filter items (e.g., /tab shows only "Insert table")
• A "FILTERED RESULTS" header appears when filtering is active
• If no items match, the menu auto-closes

Keyboard navigation with wrapping

• ArrowDown: moves selection down; from last item wraps to first
• ArrowUp: moves selection up; from first item wraps to last
• Enter: executes the selected item, removes /query text from document

Escape cleans up

• Pressing Escape deletes the entire /query text from the document and closes the menu
• The document returns to its original state before the / was typed

Right-click context menu preserved

• Right-click opens the same menu at the click position with a wider set of options (includes "Insert link")
• Uses a separate click trigger flow — no filtering, no document text insertion

Changes

PM Plugin (context-menu.js)

• Editor event emission: ArrowDown/ArrowUp/Enter now emit contextMenu:navigate events via editor.emit() instead of relying on DOM event bubbling, which was fragile in presentation mode (PresentationInputBridge creates synthetic KeyboardEvents that don't bubble naturally to document-level listeners)
• Slash trigger: / is inserted into the document in the same transaction as the menu open — the text is visible and used for filtering
• Auto-close: Menu closes when cursor leaves the /query range or moves to a different block
• Removed cooldown: The previous cooldown mechanism (preventing menu reopen for 300ms after close) has been removed — the menu can now be reopened immediately

Vue Component (ContextMenu.vue)

• Editor events instead of document keydown: Listens via editor.on('contextMenu:navigate') instead of document.addEventListener('keydown') — reliable in both flow and presentation modes
• Wrapping navigation: ArrowUp from first item wraps to last, ArrowDown from last wraps to first
• Document-based filtering: Search query extracted from document text between / anchor and cursor position via state.doc.textBetween()
• Improved highlight visibility: Selected item background changed from rgba(55, 53, 47, 0.08) (8% gray, nearly invisible) to rgba(35, 131, 226, 0.14) (blue tint, clearly visible)
• No hidden input: Removed the hidden input element — keyboard events flow through ProseMirror plugin → editor events → Vue component

VerticalNavigation fix (vertical-navigation.js)

• ArrowUp/Down yield to context menu: When the context menu is open, the VerticalNavigation plugin now yields (return false) instead of intercepting arrow keys for cursor movement. This prevents ArrowUp from moving the cursor to the previous line and closing the menu.
• Root cause: VerticalNavigation was registered before ContextMenu in the ProseMirror plugin array, so it processed ArrowUp first, dispatching a cursor-move transaction that triggered the menu's auto-close logic.

Naming alignment with main (SD-1824)

• All event names: slashMenu:* → contextMenu:open, contextMenu:close, contextMenu:navigate
• Plugin key: SlashMenuPluginKey → ContextMenuPluginKey (deprecated alias preserved)
• CSS classes: .slash-menu-* → .context-menu-*
• Extension name: slashMenu → contextMenu
• Test mocks and assertions updated throughout

Test Fixes

• Mock path fix: vi.mock('@extensions/context-menu') resolved to index.js barrel, but the component imports context-menu.js directly — different module identifiers meant the mock didn't apply. Fixed to vi.mock('@extensions/context-menu/context-menu')
• Mock state reset: Added ContextMenuPluginKey.getState.mockReset() in top-level beforeEach to prevent mock state leaking between tests
• Mock tr.delete: Added missing delete method to mock transaction object
• Updated assertions: Event listener setup/cleanup assertions now check for contextMenu:navigate instead of document keydown

Test plan

• All 663 test files pass (6161 tests, 10 skipped)
• / opens menu with character visible in document
• Typing after / filters items in real-time
• ArrowDown/ArrowUp navigate with wrapping
• ArrowUp works in presentation mode with content above cursor (no longer closes menu)
• Enter selects highlighted item and removes /query text
• Escape removes /query text and closes menu
• Right-click context menu still works
• Menu auto-closes when cursor leaves /query range
• Menu auto-closes when cursor moves to a different paragraph
• Works in presentation mode (layout engine on)
• Browser-tested with agent-browser on localhost:9098

[Copilot]

Pull request overview

This PR updates the slash menu to a Notion-like inline UX: typing / inserts the character into the document, opens the menu beneath the cursor, and uses subsequent document text to filter menu items in real time. It also replaces DOM keydown handling with editor-emitted navigation events for better reliability in presentation mode.

Changes:

• Update the ProseMirror slash-menu plugin to insert / in-doc, auto-close based on cursor movement, and emit slashMenu:navigate events for ArrowUp/Down/Enter.
• Refactor SlashMenu.vue to derive filtering from document text (textBetween) and handle navigation via editor events (with wrap-around selection).
• Adjust and stabilize tests/mocks to match new event flow and document-based filtering.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
packages/super-editor/src/extensions/slash-menu/slash-menu.js	Inserts / into the document when opening, adds slash-range auto-close, introduces trigger state, and emits slashMenu:navigate for keyboard navigation.
packages/super-editor/src/components/slash-menu/SlashMenu.vue	Removes hidden-input approach; syncs query from doc transactions, filters sections inline, and handles navigation via editor events.
packages/super-editor/src/extensions/slash-menu/slash-menu.test.js	Updates plugin tests for in-doc / insertion, Escape cleanup, trigger handling, and immediate reopen behavior.
packages/super-editor/src/components/slash-menu/tests/SlashMenu.test.js	Updates Vue tests to mock the correct module id, reset mock state, and simulate doc-based filtering + navigate events.
packages/super-editor/src/components/slash-menu/tests/testHelpers.js	Extends mocks (adds tr.delete) and updates listener assertions for slashMenu:navigate.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 8393971be4

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

[github-actions]

⚠️ AI Risk Review — potential issues found

• handleNavigate expects slashMenu:navigate events but grep finds zero emitters
• handleTransaction defined but never registered in onMounted/lifecycle hooks
• Auto-close watch could fire during initial section load before sections.value populates

_{Via L3 deep analysis · critical risk}

[linear]

SD-1945 Feature: Notion-like slash menu UX with inline filtering