Adding a pulldown to the toolbar

AI-generated summary

The discussion revolves around adding a pulldown to the toolbar in a Discourse theme. bombledmonk has successfully added items to the toolbar but is seeking help with two issues: creating a pulldown/hidden options menu and customizing the order of icons. Osama responds that both are achievable in a theme. For the pulldown menu, Osama points to an example in the discourse/poll repository, and for icon ordering, suggests setting the button’s group to a specific category (‘insertions’, ‘extras’, etc.) as defined in the d-editor.js.es6 file.

I’ve figured out how to add items to the toolbar and add functionality emulating what another theme did,
image

but I was curious about two things.

  1. The toolbar has the ability to have some sort pulldown/hidden options. How would one go about figuring out how to emulate this or is it possible in theme-only land? I’ve poked around a bit and haven’t really figured out a whole lot.

  2. Is there any way to give order to where the icons show up, and what’s causing them to show up in the middle of the bar, not even at the edges of the separators?

  1. Yep it’s doable in a theme. See how it’s done here:

https://github.com/discourse/discourse/blob/master/plugins/poll/assets/javascripts/initializers/add-poll-ui-builder.js.es6#L24-L31

  1. You can specify which of the three groups of buttons you want to your button to belong to. It seems your button is showing up in the middle because the code you used sets the button’s group to ‘insertions’, which is the middle group. So if you want your button to be on the right hand side of the toolbar, you’ll need to set the button’s group to ‘extras’. See the list of group names here:

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/components/d-editor.js.es6#L52-L56