The Editor
Formatting, slash commands, images, tables, AI writing, and real-time collaboration.
Toast includes a rich text editor powered by TipTap. This page covers everything the editor can do.
Text Formatting
Select text to reveal the floating toolbar with these options:
| Button | What It Does | Keyboard Shortcut |
|---|---|---|
| Bold | Bold text | Ctrl/⌘ + B |
| Italic | Italic text | Ctrl/⌘ + I |
| Underline | Underline text | Ctrl/⌘ + U |
| Strikethrough | Strikethrough text | — |
| Code | Inline code formatting | Ctrl/⌘ + E |
| Link | Add or edit a hyperlink | Ctrl/⌘ + K |
| Text color | Change the text color | — |
| Highlight | Apply a background highlight color | — |
| Superscript | Raise text above the baseline | — |
| Subscript | Lower text below the baseline | — |
The toolbar also includes:
- Turn into — convert the current block to a different type (heading, list, quote, etc.)
- Text alignment — left, center, right, or justify
- Comment — start a comment thread on the selected text
Slash Commands
Type / at the start of a new line (or anywhere in a paragraph) to open the command menu. Start typing to filter:
Text Blocks
| Command | What It Creates |
|---|---|
/text | Plain paragraph |
/heading1 | Large heading (H1) |
/heading2 | Medium heading (H2) |
/heading3 | Small heading (H3) |
/bulletlist | Bullet list |
/numberedlist | Numbered list |
/todolist | Checklist with interactive checkboxes |
/blockquote | Indented quote block |
/codeblock | Code block with syntax highlighting |
Insertions
| Command | What It Inserts |
|---|---|
/image | Image upload |
/table | 3×3 table |
/separator | Horizontal divider line |
/toc | Auto-generated table of contents |
/emoji | Emoji picker |
/mention | Mention a user (@) |
AI Commands
| Command | What It Does |
|---|---|
/continue | AI continues writing from your cursor |
/ai | Ask AI a free-form question or prompt |
Images
Insert an image using the /image slash command, the image button in the toolbar, or by dragging and dropping a file into the editor.
Once inserted, images support:
- Resizing — drag the handles to adjust width
- Alignment — position the image left, center, or right
- Captions — click below the image to add a caption
- Download — download the original image file
Uploaded images are stored on your configured storage provider (S3, MinIO, etc.). The maximum file size depends on your server configuration (default: 5 MB).
Tables
Insert a table with the /table slash command. Tables start as 3×3 and can be expanded:
- Add rows/columns — use the
+buttons that appear at the edges of the table - Resize columns — drag the column borders to adjust width
- Cell actions — click the handle on a cell for options like merge, split, delete row/column
- Select cells — click and drag to select multiple cells for bulk formatting
Task Lists
Use /todolist to create a checklist. Each item gets an interactive checkbox that can be toggled. Task lists support nesting — press Tab to indent an item under the previous one.
Code Blocks
Use /codeblock to insert a code block with syntax highlighting. The editor detects the language automatically, or you can select it manually.
Table of Contents
The /toc command inserts a live table of contents that automatically updates as you add, remove, or rename headings in your post.
AI Writing Assistance
When AI features are enabled on your site, the editor offers several AI-powered tools.
Improve Selected Text
Select text and click Improve in the floating toolbar. Options include:
| Action | What It Does |
|---|---|
| Fix Spelling & Grammar | Correct errors without changing meaning |
| Extend | Make the text longer with more detail |
| Shorten | Make the text more concise |
| Simplify | Reduce complexity for easier reading |
| Emojify | Add relevant emojis to the text |
| Summarize | Create a brief summary |
| Adjust Tone | Change the writing style (formal, casual, etc.) |
| Translate | Translate to a different language |
Continue Writing
Type /continue to have the AI write the next sentence based on the surrounding context.
Ask AI
Type /ai to open a free-form prompt. Describe what you want and the AI will generate content at your cursor position. Generated content appears progressively and can be accepted or dismissed.
Real-Time Collaboration
When TipTap Cloud collaboration is configured, multiple users can edit the same post simultaneously.
Live Cursors
Each collaborator's cursor appears in a unique color with their name. You can see exactly where everyone is working in real time.
Active Users
The editor header shows avatars of all users currently editing. Click the avatar group to see a full list of active collaborators.
Comments
Select text and click the Comment button in the floating toolbar to start a discussion thread:
- Comment threads are anchored to the selected text
- Other users can reply to existing threads
- Threads can be resolved when the discussion is complete (resolved threads are hidden from view)
- Each comment shows the author's name, avatar, and timestamp
Connection Status
A status indicator in the editor shows your connection state:
- Saved (green dot) — all changes are synced. Hover to see the last save time.
- Connecting... (spinner) — establishing connection to the collaboration server
- Offline (red dot) — changes are saved locally and will sync when you reconnect
Post Statistics
A word count badge appears in the bottom-right corner of the editor. Hover over it to see detailed statistics:
- Characters, words, sentences, and paragraphs
- Estimated reading time (based on 300 words per minute)
- Estimated speaking time (based on 150 words per minute)
Mobile Editing
On smaller screens, the floating toolbar is replaced with a dedicated mobile toolbar at the bottom of the screen. It provides the same formatting options in a touch-friendly layout, including buttons to move blocks up and down.