Composer Button Bonanza

[mdoggydog]

	Summary	Composer Button Bonanza allows a site admin to define and add new markup buttons to the Composer toolbar, and provides a bonanza of new buttons in its default configuration.
	Repository	centertap/DiscourseComposerButtonBonanza - Codeberg.org
	Readme	DiscourseComposerButtonBonanza/README.md at main - centertap/DiscourseComposerButtonBonanza - Codeberg.org
	Release Notes	DiscourseComposerButtonBonanza/RELEASE-NOTES.md at main - centertap/DiscourseComposerButtonBonanza - Codeberg.org
	Install Guide	How to install a theme or theme component
	Sponsorship	Brought to you by… This theme component is developed by the Center for Transparent Analysis and Policy, a 501(c)(3) non-profit organization. If this component is useful for your site, consider making a donation to support CTAP.

Install Composer Button Bonanza

“Composer Affordances that You Can Afford!”

Composer Button Bonanza is a theme component which provides more markup buttons for the Composer.

Out-of-the-box, it provides a slew of new buttons, a mess of buttons, a bonanza of buttons. The default configuration adds three new buttons to the toolbar (Can you spot them? ), and hides the rest behind a toggle button in the popup menu:

After clicking on the toggle button, the rest of the buttons become visible:

Via the theme component configuration settings, you can:

• add new button definitions (and/or remove the provided ones);
• select which buttons to show, and when to show them;
• change the ordering of buttons, and place buttons in the toolbar or the toolbar’s pop-up menu;
• provide translations/localizations for the buttons.

This component does not define any markup or styling — it merely adds convenient buttons (affordances!) to type out existing markup that will invoke existing styles. Its primary purpose is to help your users to discover and use Composer functionality. E.g., users who use a lot of footnotes will probably just bang the ^[ and ] directly on the keyboard; but the rest of us will be happy to have an button to remind us what to do.

A benefit of this approach is that if you decide to remove this theme component, you will not disturb the styling of any existing posts. This component is not responsible for doing any styling; it just provides shortcuts to functionality already in the Composer, and/or provided by other plugins or theme components.

Default Configuration

The default configuration provides definitions for most (all?) of the extra
markup that is available on a default Discourse installation (with all the
built-in plugins enabled, and no extra plugins installed):

• Text styles:
  • underline, strike-through
  • ^superscript and _subscript
  • big text, small text
  • keyboard-style
• Formatting
  • Heading 1, Heading 2, Heading 3
  • Footnote^[1]
  • Ruby text( ルビー テキスト)
  • Image via external URL (<img>)
  • Checklist
  • Highlighted, Inserted, Deleted text
• Symbols
  • Copyright ©, Registered ®, Trademark™
  • Euro €, Yen ¥
  • the “shrug” kaomoji (because, why not? ¯\_(ツ)_/¯ )
• and, a toggle button to show/hide most of the above buttons

As mentioned above, these are merely the defaults. All of these buttons can
be rearranged or removed, and new ones can be added.

---

1. …like this footnote, for example. ↩︎

[Shauny (Shaun Robinson)]

This is cool, thanks!

Is there a way to add the ‘spoiler’ tag directly in the top toolbar? It’s something we use a lot.

Edit: I have figured it out

[Shauny (Shaun Robinson)]

How do shortcuts work?

I’d like to create a keyboard shortcut for my “spoiler” button, but aren’t most shortcuts already taken for other things?

The example says shift-4 but that is a $ sign for me…

[Heliosurge (Dan DeMontmorency)]

Yeah very nice component. I was looking for the button to display the extra buttons in the composer bar

I think a cool feature would be to add a button to composer bar. Maybe 2 options. Display/hide &/or Composer bar menus. That way you can group functions in a selectable bar

Ie

• Style bar: would have things like bold, italics, strike through etc…
• Layout bar: Table, right justify, center…
• with option to customize main bar with commonly used.

[mdoggydog]

@Shauny

How do shortcuts work?

(Keep in mind, this component merely exposes the parameters/options that are already in the Discourse JS code…)

For shortcuts, you specify the shortcut key, along with any modifiers… and then Discourse always prepends a ctrl+ (or cmd+ on apple hardware?). E.g., the literal string “shift+4” (as the button parameter) translates into ctrl+shift+4 (as the shortcut keys).

@Shauny

but aren’t most shortcuts already taken for other things?

I haven’t tried to figure out a way to remove shortcuts — again, this component is additive on top of the baseline of buttons already built-in to Composer. (I wish I could make ctrl+e not be a shortcut for preformatted text, and just be “jump to end of line” instead!)

[denvergeeks]

h01y cr@p this is awwwwwwesommmmme