A customizable toolbar that allows CSS snippets, markdowns, and built-in macros to be applied to selected text.
To begin, register your required actions in the toolbar.
Selecting text in the editor view will show your customized toolbar.
Click the button to apply CSS snippets, markdowns, built-in macros, etc. to the selected text.
Selecting multiple texts with the Alt and Shift keys allows you to apply the same action at once.
Tab key: Focus on toolbar or next button
Shift+Tab: Focus on previous button
Cursor key: Move button focus
Esc key: Hide toolbar
Three different toolbar structures can be configured for different Obsidian window sizes.
The toolbar structure, such as the number of buttons, rows, etc., can be configured according to the screen, such as desktop, tablet, or cell phone.
Toolbar and button colors, borders, opacity, etc. can be set.
Each action is added to the toolbar in turn as a single button.
There are three types of actions.
-
Actions with the prefix 'TAG' add HTML tags.
You can apply styles to text by combining it with your CSS snippets.
Tag Example:
span:
<span class="Class">selected text</span>div*2:
<div class="Class"><div>selected text</div></div>div span /%s/:
<div class="Class"><span></span>selected text</div> -
Actions with the prefix 'MD' add Markdown elements.
Some actions add Markdown elements and HTML tags at the same time.
-
Actions with the prefix 'MAC' execute built-in Macros.
The label that appears on the button.
If the CSS class is set, a simplified style is applied to the label.
Font size is reduced to fit the button, so fewer characters on the label are preferred.
Emoji and symbols can be used.
CSS class to be applied to HTML tags.
It must be registered in your CSS snippet.
This is not required for Markdowns or Macros, so it can be left blank.
suggest.ts is the copyrighted work of Liam Cain (https://github.com/liamcain) obsidian-periodic-notes (https://github.com/liamcain/obsidian-periodic-notes).
popper.js https://popper.js.org/
Dummy text from https://www.blindtextgenerator.com/
CSS Reference: