Custom TinyMCE buttons can only be placed at the end of the toolbar

nikosdion commented 1 year ago

Steps to reproduce the issue

Create the file /media/test/plugin.js with the following content:

window.tinymce.create("tinymce.plugins.InlineCodeButtonPlugin", {
    InlineCodeButtonPlugin: function(editor, url) {
        editor.ui.registry.addToggleButton("inlinecode", {
            icon:     "sourcecode",
            title:    "Inline Code",
            tooltip:  "Inline Code",
            onAction: (_) => {
                  editor.execCommand('FormatBlock', false, 'code');
              },
            onSetup: (api) => {
                editor.formatter.formatChanged('code', (state) => {
                    api.setActive(state);
                })
            }
        });
    }
});

window.tinymce.PluginManager.add("inlinecodebutton", tinymce.plugins.InlineCodeButtonPlugin);

Edit the Editor - TinyMCE options (System, Manage, Plugins, search for "Editor - TinyMCE", and click on it).

Towards the bottom of the page find the Custom Plugin setting and set it to inlinecodebutton

In the External Plugin URLs add a new row with the following settings:

Plugin Name inlinecodebutton
Path /media/test/plugin.js

Expected result

Editing the "Editor - TinyMCE" I can see my custom "Inline Code" button and place it on the toolbar where I want.

Actual result

Editing the "Editor - TinyMCE" plugin settings I cannot see my custom "Inline Code" button.

Instead, I have to set the Custom Button option to inlinecode BUT it does not do what I need! It simply adds my custom button to the end of the toolbar.

Sure, it works, kinda sorta. The thing is, I do not want this button there; it makes no sense. I want it next to my Bold, Italic etc formatting buttons so I can correctly format inline code references in my blog posts without digging through the (very slow to render) drop-down menus.

System information (as much as possible)

Joomla 4.3.0

Everything else is irrelevant.

Additional comments

I think addressing this would require \Joomla\Plugin\Editors\TinyMCE\PluginTraits\KnownButtons::getKnownButtons parsing the "Custom Button" plugin option and append the custom buttons to the returned array (perhaps trying to use a language string such as PLG_EDITORS_TINYMCE_CUSTOM_BUTTON_buttonName for the label, so we can provide something meaningful here?).

Likewise, \Joomla\Plugin\Editors\TinyMCE\PluginTraits\DisplayTrait::onDisplay would need to be modified so that the custom_button option does not append buttons willy-nilly to the toolbar, i.e. it should never set $custom_button.

BTW, allowing custom plugins in the TInyMCE editor plugin is FREAKING AWESOME, but there's scant documentation, y'all. I figured out how to do it by reading the code. I am not sure most users who'd like to use this feature are gluttons for punishment like yours truly 😬