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

[tupizz]

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.

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 (slash-menu.js)

• Editor event emission: ArrowDown/ArrowUp/Enter now emit slashMenu: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

Vue Component (SlashMenu.vue)

• Editor events instead of document keydown: Listens via editor.on('slashMenu: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)

Test Fixes

• Mock path fix: vi.mock('@extensions/slash-menu') resolved to index.js barrel, but the component imports slash-menu.js directly — different module identifiers meant the mock didn't apply. Fixed to vi.mock('@extensions/slash-menu/slash-menu')
• Mock state reset: Added SlashMenuPluginKey.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 slashMenu:navigate instead of document keydown

Test plan

• All 626 test files pass (5560 tests, 10 skipped)
• / opens menu with character visible in document
• Typing after / filters items in real-time
• ArrowDown/ArrowUp navigate with wrapping
• 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)

[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".