Formatting toolbar

[Steven]

I don’t think I would be able to do something like that. When I created the plugin, we were not on FontAwesome5, I didn’t find a nice icon for indent right. If you have a

But if you want to change the default button, you have two solutions :

• You can fork the plugin on github and edit this file : https://github.com/iunctis/discourse-formatting-toolbar/blob/master/assets/javascripts/discourse/initializers/formattingtlb-ui.js.es6#L32
  Change floatl to floatr, the texts can easily be changed in your discourse instance after

• Or you can use this:

Hide the float left button with this css

/* FLOAT LEFT BUTTON */
.d-editor-button-bar .floatl_ui_button {
    display: none;
}

And import a theme component that will add a floatr button

What you can do is discourse-floatr.zip (1.2 KB)

It’s a theme component I just created on Discourse Theme to add a floatr button with the same icon that the former floatl.

https://theme-creator.discourse.org/theme/Steven/floatr

[jord8on (Jordan)]

Steven! You are a genius! Thank you so much for the extra work on this

I went with option 2 because I have no idea how to fork and modify a plugin!

Everything worked perfectly and now that button does just what we want!

[jord8on (Jordan)]

One more question here… is there an easy way to move specific buttons from the main bar and hide them in the gear icon menu?

e.g.,

I love all of these tools from this plugin but I think that most of our users will probably not be leveraging the rich formatting options so I’d like to simplify for them. I don’t mind having an extra click, when I’m writing posts, if it makes a cleaner and simpler experience for our users.

[Steven]

Easy way, no. It would need some modification like the floatr button.

Either forking and editing the plugin, or hiding them and recreate them in the toolbr popup menu option

You could use my theme component as an example on how to add some options in this menu. Or I could edit the floatr component I created to add this button in the popup menu options and you can finish the job easily after that

MD Composer extras

This theme component adds few formatting options in the composer : underline, align center, align right, justify and strikethrough. You can customize the text of each button in the settings, making it compatible with every languages. Exist in rtl version (change align right to align left).

GitHub - MonDiscourse/md-composer-extras: Add some formatting option in your...

[jord8on (Jordan)]

First off, THANK YOU again for that tweak on the floatr button. I’ve already used it a half dozen times and love not having to switch from floatl to floatr! Thank you!!!

At some point I’d like to learn more and be able to know how to edit and create plugins. I’d love to give back and add to the great developments of people like you, in this community.

@Steven

I could edit the floatr component I created to add this button in the popup menu options and you can finish the job easily after that

It would be great if you could add those extra buttons to the gear icon “popup menu” so that there’s fewer options for avg users to see. I’m proficient in CSS and inspecting the browser element to find out which classes/id’s I want to modify. Would I be able to do the same thing with your “component” so I could look at the code syntax and easily decide which buttons I want to put in the menu and/or take out of the menu and put back on the bar? Or is it a bit more complex than that?

[Steven]

It’s more complex because it doesn’t use the same javascript.

I created a quick example, if you want a strike button in the composer, you have to use this javascript

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "strike_button",
        group: "fontStyles",
        icon: "strikethrough",
	perform: e => e.applySurround('<s>', '</s>', 'strike_text')
    });
});

But for the toolbar menu options, it’s totally different

api.addToolbarPopupMenuOptionsCallback(() => {
  return {
    action: "strike",
    icon: "strikethrough",
    label: "strike_button"
  };
});

api.modifyClass("controller:composer", {
  actions: {
    strike() {
      this.get("toolbarEvent").applySurround("<s>", "</s>", "strike_prompt");
    },
  }
});

I didn’t add the translations needed for the toolbar options, etc. But you get the idea.

I don’t have the knowledge to add some choise between the toolbar of the menu options and adapt the javascript, my attempt to add some option to activate/deactivate some buttons worked for some time, but it broke recently and I don’t really know how to fix it. So I had to make a choice for most users.

Anyway, if you want to keep the bbcode but transfer the buttons in the menu options, I think the best way is to keep the plugin, hide the buttons via css and use a theme component to add button in the menu options. It’s totally doable since we basically did something similar for the float button. It requires some time, but if you’re lost on this subject I can help you.

For theme components, it’s best to use Discourse Theme, you can add settings to your component, translations, and the code., preview it. It’s a really nice tool for creators.

[jord8on (Jordan)]

You are incredible @Steven! Thank you for this thorough response. I think I’m going to see how the community handles having all the options and if I’m hearing that it’s confusing then I will take your second approach here with the theme components. That approach seems very clear to me.

Thanks again for your help and for supporting this fantastic plugin. btw… I can’t say thank you enough, for helping me switch the default float button to “right.” It’s been awesome!

[neounix (Dark Matter)]

Quick question: What do we change in this api.onToolbarCreate code in our theme for a different button action in the composer?

Basically, we want to add a new composer button which adds this MD around a multiline block of code:

```text

```

api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "code_button",
        group: "fontStyles",
        icon: "code",
        perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text')
    });
});

So that the results go around a multiline block of code instead of adding our new action for each line?

Before button action:

After button action:

I assume there is a different method than e.applySurround which applies to a multiline block of text? But searching the site and Google did not turn up anything, so after 30 minutes of searching, decided to post a question.

Also, searched https://docs.discourse.org/ with various keywords and did not get lucky.

Thanks,

[neounix (Dark Matter)]

I found the method / param multiline: false with more Google’n …

perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text', { multiline: false } )

});
api.onToolbarCreate(toolbar => {
    toolbar.addButton({
        id: "code_button",
        group: "fontStyles",
        icon: "code",
        perform: e => e.applySurround('\n```text\n', '\n```\n', 'code_text', { multiline: false } )
    });
});

So, I’m all set. Thanks.

[AntiMetaman]

Correct me if I’m wrong but the official discourse bbcode is already packaged into latest Discourse, if I install this plugin, will it conflict? The primary reason I want this formatting toolbar is to have the option to change the color of text via a button.

[neounix (Dark Matter)]

There is no conflict at all.

[Steven]

The Discourse BBCode plugin still seem to be an external plugin, not shipped in core.

You have two options :

• This plugin that adds the bbcodes in the engine + some buttons in the toolbar
• The Official BBCode plugin + Composer extras (an optional theme component that adds some buttons in the toolbar).

The second option is best if you prefer to use official plugin, the theme component can easily be deactivated if it needs some upgrading.

Formatting toolbar should not be broken or create a conflict with discourse core

[AntiMetaman]

I was using md composer theme component with the official bbcode plugin before. However, there’s no button to change text color which this plugin has. Ideally, a color picker would be nice but I don’t think it’s possible.

[Steven]

Ah I see, the component only use elements available in core, and color bbcode needs one plugin as you know. It’s not so hard to edit a button in the component (or fork in github), but in your case you’re right, this plugin is the best choice.

You can install this plugin but I recommend you uninstall the official bbcode plugin at the same time to avoid any conflict in the markdown engine.

Regarding the color picker, I’m honestly not a good coder, I only used some tools available to share with the community, I’ll gladly take a pull request to make this plugin better.

[AntiMetaman]

I’ll likely be learning how to play with adding buttons to composer as I’ll be making my own plugin. However, not sure if I’m the right guy to send a pull request to add a color picker since I’ll be learning Discourse just recently.

And yes, I uninstalled the official bbcode plugin. There was also awesome bbcode which has the autocomplete. However, because of the color button, I think this is better for average users who are new to Discourse and aren’t familiar with bbcode.

[AntiMetaman]

I noticed that this plugin includes another “insert image” button. Is that really necessary since the original one allows attachments or a url link. I like the formatting buttons otherwise. Just wondering because it looks weird to have two image icons in the composer. If it can’t be removed, I’ll have to revert to using md composer + official bbcode.

[neounix (Dark Matter)]

You can easily use CSS to hide any button or item you wish to hide in the composer toolbar.

Or, another alternative:

You can easily modify the plugin to remove any button you do not wish to display in the composer toolbar.

[Steven]

It was mostly added to use with the float button or the alignment for the forums that depends a lot on external links. If you mostly use internal uploads images, you can hide it

[AntiMetaman]

If I comment lines, will it be sufficient to remove that button?

https://github.com/iunctis/discourse-formatting-toolbar/blob/master/assets/javascripts/discourse/initializers/formattingtlb-ui.js.es6#L18L25

https://github.com/iunctis/discourse-formatting-toolbar/blob/master/plugin.rb#L13

[Steven]

It’s best to add some css in your theme

/* IMAGE BUTTON */
.d-editor-button-bar .addimg_ui_button {
    display: none;
}