Adding a new button on the composer toolbar


(Ionuț Staicu) #1

Hey guys.

I’m trying to add a shortcut on the editor toolbar and I’m having some issues witht the translation strings.

So, I’m adding the shortcut via admin/customize/css_html, into a </head> tab:

<script type="text/discourse-plugin" version="0.1">
    api.onToolbarCreate(function(toolbar){
      toolbar.addButton({
        trimLeading: true,
        id: 'kbd',
        group: 'insertions',
        icon: 'keyboard-o',
        perform: function(e){
          return e.applySurround('<kbd>', '</kbd>', 'kbd_shortcut')
        }
      });
    })
</script>

Things works great, but the tooltip reads [ro.composer.kbd_shortcut] and the inserted snippet looks like this:

<kbd>[ro.composer.kbd_shortcut]</kbd>

There is a way of customizing that key? I would expect to show up into admin/customize/site_texts, but… it doesn’t.

Do I miss something obvious?

Thanks!


[PAID-job] Adding buttons in composer toolbar
How to add a custom toolbar button via external JS?
(Jeff Atwood) #2

Sure, @eviltrout worked on this recently and can advise.


(Robin Ward) #3

Normally you should add a title attribute to give the button a title like in the enable-emoji script.

Having said that, this is a bit of a peculiar situation as you are doing all the work in an HTML/CSS customization rather than a plugin. Translation strings won’t show up in the admin section unless they are in one of the yml files.

For now I think you’ll have to create a proper plugin for this with a yml file if you want that text to show up in the translations section.


(Ionuț Staicu) #4

Adding a title opens another can of worms, having tooltip and inserted text be completely different.

If the tooltip won’t be displayed if you don’t provide neither a title nor a perform strings, would be just great :

        title : '',
        group: 'insertions',
        icon: 'keyboard-o',
        perform: function(e){
          return e.applySurround('<kbd>', '</kbd>', '')
        }

But instead I get [ro.composer.] as both title and inserted content.


(Robin Ward) #5

title is for the button title, and you’ve left it blank in that example. Again you can look to the emoji for an example of how setting a title works, but you will need a YML file if you want to translate it.

Regarding the text that is inserted, in this case you are using applySurround whose third argument is an exampleKey which is created from the form composer.YOUR_VALUE - like the title that needs to be in a YML file if you want it to show up in the admin section.

I recommend a plugin for this functionality.