Tiptap editor refinement: slash commands, bubble menu, and intuitive editing

[devin-ai-integration]

Problem

The current Tiptap editor lacks intuitive editing features that users expect from modern note-taking applications. There's no slash command support, no bubble menu for quick formatting, and the overall editing experience needs polish.

Expected Behavior

The editor should provide:

1. Slash commands - Type / to access a command palette for inserting blocks, formatting, etc.
2. Bubble menu - A floating toolbar that appears when text is selected for quick formatting
3. Intuitive editing - Smooth, responsive editing experience comparable to Notion, Linear, or Slack

Technical Context

The editor is built with Tiptap (packages/tiptap/) and used in:

• apps/desktop/src/components/editor-area/
• apps/desktop/src/components/main/body/sessions/note-input/

Related existing issues:

• slash command in editor area #1304: slash command in editor area
• Add formatting bar in the editor #203: Add formatting bar in the editor

Acceptance Criteria

Slash Commands

• Type / to open command palette
• Support common commands: headings, lists, code blocks, dividers, etc.
• Keyboard navigation (arrow keys, enter to select)
• Filter commands as user types

Bubble Menu

• Appears when text is selected
• Quick access to: bold, italic, strikethrough, link, code
• Smooth animations and positioning

General Polish

• Responsive and smooth typing experience
• Consistent styling with the rest of the app
• Keyboard shortcuts work as expected

Labels

product/desktop, area/ui

[devin-ai-integration]

Related Issues

This issue consolidates editor refinement work including:

• Support option + top/down in note editor #734: Support option + top/down in note editor (now part of this issue)

The option+up/down interactions mentioned in the roadmap are included in the 'General Polish' acceptance criteria.