Navigation

Note Slash Menu

A Note's blocks are reached through a menu bar above the page or through Markdown-style input rules nobody is shown (note resource). Every modern document editor — Notion first, then Linear, Confluence and Google Docs' @ menu — lets a writer insert a block without leaving the keyboard or the line: type /, type a few letters of what you want, press Enter.

What it adds

A suggestion extension on the Note editor, triggered by / at the start of a line or after a space, drawing a filterable list in a caret popover:

ItemInserts / converts the line to
Texta paragraph
Heading 1–3a heading of that level
Bulleted lista bullet list
Numbered listan ordered list
To-do lista task list
Quotea blockquote
Codea code block
Dividera horizontal rule
  • Built on what exists. The message composer already runs three suggestion extensions (emoji, mention, message slash commands) through @tiptap/suggestion, and the tiptap skill owns the pattern: a unique PluginKey, a SuggestionTrigger member, a list drawn in the editor's caret popover. This is a fourth, on the Note editor, reusing useSuggestionListNavigation for the arrow keys, Enter and Escape.
  • One source for both menus. Each item runs the same editor command its menu-bar button runs, so the items are derived from the menu bar's own items (getTextFormatMenuItems, getListMenuItems and the Note's block items) rather than listed twice.
  • Typing filters by title and by aliases (h1, ul, todo), as Notion's /h1 and /todo do. Backspace past the / or Escape closes it and leaves the typed text.

What is deliberately not in it

  • No embeds or database blocks (/table, /image, /page). Each is a new node type with its own design; the menu lists what the writing kit already has.
  • No slash menu in the message composer. / there already means message slash commands (slash commands).

Key files

FileRole after the change
apps/web/app/services/resource/note/getNoteExtensions.tsadds the block suggestion to the editor (not to the generateHTML render)
apps/web/app/composables/message/suggestion/useSuggestionListNavigation.tsthe list keyboard navigation it reuses
apps/web/app/models/richTextEditor/RichTextSuggestion.tsthe suggestion trigger it registers under
apps/web/app/components/Resource/Note/EditorMenuBar.vuethe items the menu derives from

Sources

Details

Command palette

Keyboard shortcuts