The bubble toolbar
The floating toolbar that pops above any text selection. Bold, italic, link, headings, lists, blockquote, all without leaving the cursor.
The bubble toolbar is sweetdocs’s in-flow formatter — it appears right above whatever text you’ve selected, never in a fixed position. Make a selection, format it, keep typing.
The bamboo grove at Arashiyama is best at dawn.
When it appears
The toolbar shows up whenever:
- The cursor has a non-empty selection (any range of text)
- The document is in Edit mode (not Preview, not a read-only share view)
It hides automatically when:
- The selection collapses to a cursor
- You switch to Preview mode
- You click outside the editor
The buttons
Eleven buttons in a single row, grouped by purpose:
Inline marks (1–5)
| Button | Shortcut | Effect |
|---|---|---|
| Bold | ⌘B | Wraps selection in **…** |
| Italic | ⌘I | Wraps selection in *…* |
| Strikethrough | ⌘⇧X | Wraps selection in ~~…~~ |
| Inline code | ⌘E* | Wraps selection in `…` |
| Link | ⌘K* | Opens the link input (see below) |
The ⌘E and ⌘K shortcuts are intercepted by sweetdocs at the document level — they open the document mode toggle and the command palette, respectively. To apply inline code or a link, click the button in the bubble toolbar. See Keyboard shortcuts for the full conflict map.
Block transforms (6–8)
| Button | Effect |
|---|---|
| H1 | Converts the surrounding paragraph to a level-1 heading |
| H2 | Converts to a level-2 heading |
| H3 | Converts to a level-3 heading |
These show as text labels (H1 / H2 / H3) rather than icons, both for clarity and to mirror the slash menu.
Block elements (9–11)
| Button | Effect |
|---|---|
| Bullet list | Turns the block into a - list item |
| Numbered list | Turns the block into a 1. list item |
| Blockquote | Wraps the block in > |
The split-and-apply behaviour
If you select part of a paragraph and click H1 (or any block transform), sweetdocs splits the paragraph at your selection boundaries first, then applies the new block type only to the middle. You’re not promoted to a heading — the selected words are.
Example: starting from The quick brown fox jumps, selecting “brown fox” and clicking H1 gives you:
The quick
# brown fox
jumpsEach piece becomes its own block. This holds for all of H1/H2/H3, lists, and blockquote. If your selection covers the whole paragraph, no split happens — the entire block converts. If your cursor has no selection (just a caret), the transform applies to the containing block too.
The link button
Clicking the link button flips the toolbar into an input row:
Pre-book the Nishiki food tour for Saturday.
Behaviour:
| Action | Result |
|---|---|
| Type a URL → press Enter or click Apply | Link is applied to the selected text |
| Leave the field empty → click Remove | The link mark is stripped (the underlying text stays) |
| Press Esc or click the X | Closes the input without changes |
| Click anywhere else (selection collapses) | Closes the input automatically |
| Open the link button on existing link | URL pre-fills with the current href; text is pre-selected for fast replace |
Schemeless URLs: if you type example.com (no http:// / https://), sweetdocs auto-prefixes https://. Other schemes (mailto:, tel:, ftp:, etc.) are kept as-is.
No popover, no modal. The whole flow stays in the bubble toolbar.
What’s not in the bubble toolbar
By design, a few things live elsewhere:
| You want to… | Use… |
|---|---|
| Insert a new block (table, code block, divider) | The slash menu |
| Set text color (hex swatch) | Type any #RRGGBB literal — it becomes a swatch automatically |
| Add a comment to selected text | The Comments panel + comment toolbar (selection → Comments tab) |
| Apply heading levels 4–6 | Raw Markdown (#### / ##### / ######) |
| Highlight, superscript, subscript | Not supported in v1 — see Markdown essentials |
| Center / align body text | Not supported in v1 — alignment is only on images, via the image toolbar |
Visual states
- Active mark: a button is filled with the theme’s accent-light background when the cursor sits inside its mark (e.g. inside a bold word, the Bold button is highlighted).
- Hover: a subtle background tint on hover.
- Block-transform buttons highlight the same way when the current block matches (H1 lights up inside an H1).