Context-aware editing controls

Selection Toolbar

A floating toolbar that appears when text is selected. It provides context-aware formatting options based on the current selection.

--Format toggles -- Bold, Italic, Underline, Strikethrough, Inline Code with active state detection.
--Element type selector -- Convert selected block to any heading level (h1-h6), paragraph, code, blockquote, or list.
--Color picker -- Apply custom text colors with a visual palette.
--Font size picker -- Adjust the size of selected text.
--Link popover -- Add, edit, or remove hyperlinks from selected text.
--Custom class popover -- Browse and apply Tailwind CSS or custom classes with live preview.
--AI sparkles button -- Opens the AI selection menu for AI-powered text transformations (when AI provider is configured).

Editor Toolbar

The top toolbar provides document-level actions for inserting content and managing the editor.

--Media upload popover -- Insert single images, multiple images, or videos from your device.
--Insert components -- Add free-positioned images or custom components via the insert modal.
--List buttons -- Create unordered or ordered lists with a single click.
--Table builder -- Create tables with custom row and column counts.

Compact Toolbar

A lightweight inline toolbar used by the CompactEditor variant. Provides essential formatting options in a minimal footprint -- ideal for comment boxes and embedded editing.

Slash Commands

Keyboard Shortcuts