Notion Selection Toolbar
Jiwoo Roh203 downloadsA Notion-style floating toolbar that appears when you select text or a line: change block type, text/highlight color, and inline formatting.
- Overview
- Scorecard
- Updates11
A Notion-style floating toolbar for Obsidian. Select some text and a toolbar pops up above it. From there you can change the block type, color the text or highlight it, and apply inline formatting without typing any Markdown.
If you like it,
How to use
- Open a note in editing mode (Live Preview or Source mode). The toolbar doesn't appear in Reading view.
- Select text with the mouse or keyboard. The toolbar appears just above the selection, or below it if there's no room above.
- Click a button to apply it. The selection stays in place, so you can stack several actions, for example a color, then bold, then italic.
- Press Esc or click elsewhere to close the toolbar or any open menu.
Toolbar layout
┌──────────────────────────────┐
│ ¶ Text › │ Turn into (block type)
│ A B I U ⌫ │ Color · Bold · Italic · Underline · Clear formatting
│ 🔗 S̶ <> Σ ⋯ │ Link · Strikethrough · Inline code · Inline equation · More
│ 💬 Comment ✨ │ Comment · Custom button
└──────────────────────────────┘
Turn into (block type)
The top button shows the current line's block type (e.g. Heading 2). Click it to convert the selected line or lines:
| Menu item | Result |
|---|---|
| Text | Removes the heading, list, quote or callout marker |
| Heading 1–4 | # … #### |
| Bulleted / Numbered / To-do list | - , 1. , - [ ] (renumbered automatically when you select several lines) |
| Quote | > |
| Callout | Opens a submenu of Obsidian callout types (Note, Info, Tip, Warning, Danger, Bug, …) → > [!type] |
| Code | Wraps the lines in a ``` code block |
| Block equation | Wraps the lines in a $$ math block |
| Toggle list / Toggle heading 1–4 | A collapsible <details> block. The selected text becomes the summary, and you type the hidden content on the next line |
| 2 columns | A two-column layout. The selected content goes in the left column |
| Page | Moves the selection into a new note in the same folder and leaves a [[wikilink]] in its place. The first line of the selection becomes the note's title |
| Page in | Same as Page, but first asks which folder to create the note in |
Colors
Click A to open the color panel:
- Text color: 9 Notion colors (gray, brown, orange, yellow, green, blue, purple, pink, red)
- Background color: the same 9 colors as highlights
- Default: removes the color from the selection
- Recently used: your last 5 colors
Press Cmd/Ctrl + Shift + H to apply your most recently used color to the selection without opening the toolbar.
Colors follow your theme: applied colors switch automatically between light and dark mode.
Bold colored text uses a slightly deeper bold variant of its color. Bold, italic, strikethrough and code applied to colored or highlighted text are written inside the color tag as HTML (e.g. <span class="nst-fg-red"><strong>text</strong></span>) so they render in Live Preview as well as Reading view. Obsidian's own Cmd/Ctrl + B does the same when the selection is colored or highlighted text.
The palette, based on Notion's colors:
| Color | Text (light) | Bold text (light) | Background (light) | Text (dark) | Bold text (dark) | Background (dark) |
|---|---|---|---|---|---|---|
| Gray | #888784 |
#787774 |
#F1F1EF |
#8F8F8F |
#9B9B9B |
#2F2F2F |
| Brown | #976D57 |
#976D57 |
#F3EEEE |
#B28773 |
#B28773 |
#46332A |
| Orange | #D1873F |
#CC782F |
#F8ECDF |
#AD774D |
#BD8052 |
#573C27 |
| Yellow | #C29343 |
#C29343 |
#FAF3DE |
#C29A56 |
#C29A56 |
#53442C |
| Green | #679176 |
#548164 |
#EEF3EC |
#5C8C6B |
#659C75 |
#2A3C31 |
| Blue | #487CA5 |
#487CA5 |
#E9F3F7 |
#6786C4 |
#6786C4 |
#1E394C |
| Purple | #8A67AB |
#8A67AB |
#F6F3F9 |
#956ACD |
#956ACD |
#3A2E47 |
| Pink | #B75D8F |
#B35488 |
#F8F1F5 |
#B85A8C |
#C25F94 |
#492E3B |
| Red | #C4554D |
#C4554D |
#FAECEC |
#CF5D57 |
#CF5D57 |
#4D302B |
Highlight colors can be customized in settings (see below); text colors are fixed.
Note: Colors are saved as HTML (
<span class="nst-fg-red">,<mark class="nst-hl-yellow">) and get their look from this plugin's CSS. If you disable the plugin, the text stays but the colors stop showing.
Inline formatting
| Button | Markdown |
|---|---|
| Bold / Italic | **text** / *text* |
| Underline | <u>text</u> |
| Strikethrough | ~~text~~ |
| Inline code | `text` |
| Inline equation | $text$ |
| Link | Type or paste a URL and press Enter → [text](url) |
| Clear formatting | Removes bold, italic, underline, strikethrough, highlights, colors, code and block markers from the selection |
Every button toggles: click it again on the same selection to remove the formatting. Formatting a colored selection works too, because the markers are placed inside the color tag so Live Preview renders them correctly.
Other buttons
More (⋯): opens Obsidian's command palette.
Comment: adds a comment to the selection.
- If the Notion-style Comments plugin is enabled, it opens that plugin's Add comment.
- Otherwise it makes a native Obsidian comment,
%%text%%, using Obsidian's built-in Toggle comment (the same asCmd/Ctrl + /). Click again to remove it. - You can choose which one to always use under Settings → Notion Selection Toolbar → Comment style.
Custom button (✨): runs any command you assign to it in settings (see below).
Settings
Go to Settings → Notion Selection Toolbar:
- Light / Dark theme highlight colors: change each background color separately for light and dark mode. Use the ↺ button to reset a color to its default. Highlights already in your notes update immediately.
- Comment style: what the Comment button does. Automatic (default) uses Notion-style Comments when it's enabled and native
%%comments otherwise. You can also pick one of the two to always use. - Custom toolbar button
- Command: pick any command from the command palette for the button to run.
- Icon: any Lucide icon name, e.g.
sparkles,star,zap,bookmark.
Commands & hotkeys
| Command | Default hotkey |
|---|---|
| Apply most recently used color | Cmd/Ctrl + Shift + H |
| Toggle strikethrough | – |
| Toggle underline | – |
You can bind or change hotkeys under Settings → Hotkeys.
Installation (manual)
- Download
main.js,manifest.json, andstyles.cssfrom the latest release. - Put them in
<your vault>/.obsidian/plugins/notion-selection-toolbar/(create the folder if it doesn't exist). - Restart Obsidian, then enable Notion Selection Toolbar under Settings → Community plugins.
Development
npm install
npm run dev
License
MIT