Notion Selection Toolbar

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

1. Open a note in editing mode (Live Preview or Source mode). The toolbar doesn't appear in Reading view.
2. Select text with the mouse or keyboard. The toolbar appears just above the selection, or below it if there's no room above.
3. 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.
4. 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 as Cmd/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)

1. Download main.js, manifest.json, and styles.css from the latest release.
2. Put them in <your vault>/.obsidian/plugins/notion-selection-toolbar/ (create the folder if it doesn't exist).
3. Restart Obsidian, then enable Notion Selection Toolbar under Settings → Community plugins.

Development

npm install
npm run dev

License

MIT