Notion Selection Toolbar

by Jiwoo Roh
5
4
3
2
1
Score: 50/100

Description

A Notion-style floating selection toolbar for Obsidian

Reviews

No reviews yet.

Stats

0
stars
38
downloads
0
forks
3
days
0
days
0
days
0
total PRs
0
open PRs
0
closed PRs
0
merged PRs
0
total issues
0
open issues
0
closed issues
25
commits

Latest Version

10 hours ago

Changelog

Bold on mixed selections

  • Bolding a selection that mixes colored/highlighted text with plain text (e.g. <span class="nst-fg-red">language</span> and <span class="nst-fg-red">structure</span>) now bolds every part: <strong> inside each color tag and ** around the plain text. Works with Cmd/Ctrl + B and the toolbar; italic, strikethrough and code from the toolbar work the same way.
  • Pressing it again removes the bold from every part.
  • Fixed a selection spanning two color tags being treated as one tag, which put the bold in the wrong place.

README file from

Github

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, BuyMeACoffee

Demo

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