Composer Knop 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	Making sure you're not a bot!
	Release Notes	Making sure you're not a bot!
	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

[Shauny (Shaun Robinson)]

Ik heb hier een probleem mee, ik gebruik het en vind het geweldig, maar ik heb een “spoiler”-knop toegevoegd en deze maakt spoiler-tags met DIV in plaats van SPAN, dus ze komen altijd op een nieuwe regel wanneer ik de WYSIWYG-editor gebruik.

Is er een manier om dit te veranderen?

[Shauny (Shaun Robinson)]

Is this still supported?

Still getting the issue with spoilers being in a DIV not a SPAN.

[Shauny (Shaun Robinson)]

I guess this is not supported any longer?

Can anyone suggest how I can fix this, the “spoiler” button doesn’t work correctly (see my previous post)

[denvergeeks]

I will look into this, but I need you to show specifically how you added this “spoiler” button.

[Shauny (Shaun Robinson)]

Thanks!

Here’s my setup:

There are more under there. But spoiler is added with:

spoiler,shift+x

In Markdown mode it works perfectly.
In WYSIWYG mode, when you select something and click the spoiler button instead of being in a SPAN it goes in a DIV so it is a block level element on its own line.

Thanks!

[mdoggydog]

Literally an hour ago, I just realized that ComposerButtonBonanza (CBB) is broken in WYSIWYG-Composer. (Or, perhaps, it is the other way around.) We do not use WYSIWYG on the site that I maintain, so I never noticed! So… ugh.

(Not a fan of WYSIWYG. MediaWiki (e.g., wikipedia) put a lot of effort into a WYSIWYG editor a decade+ ago, thinking it would encourage more people to become editors. It ended up making no difference, and they could not get rid of the original editor anyway because there are so many things you can’t really accomplish with the WYSIWYG version, and it ends up just being generally kind of clunky compared to the original wikicode+preview editor.)

Hmm… indpendently of CBB… if I insert a spoiler in the WYSIWYG-Composer, and then click outside of the spoiler-box to edit elsewhere, it permanently blurs itself and I do not seem to be able to edit the spoiler text again …unless I switch to Markdown-mode. Am I missing something, or is that just a bug in WYSIWYG-mode?

…Oh, nevermind! If I triple-click (out of frustration and/or boredom) then I can edit the spoiler text again! (Not a fan of WYSIWYG-mode; did I mention that already?)

[Shauny (Shaun Robinson)]

If you can fix spoilers so they don’t become block-level I will be very grateful