Formatting toolbar

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.

2 Likes