Add Custom Button to RTE

Hello all,

i'm currently trying to move away from ckeditor (used in an legacy app to create emails and microsites). This works very well actually, but i have the need to insert Placeholders/Tags/Merge Fields however you want to call them, into the text (like [[salutation]] [[firstname]] etc.).

So at first i looked at grapesjs source on how to add an custom element to the rte and found an example in a code comment. The same example as in the api docs:

    rte.add('fontSize', {
        icon: '<select class="gjs-field">
              <option>1</option>
              <option>4</option>
              <option>7</option>
            </select>',
          // Bind the 'result' on 'change' listener
        event: 'change',
        result: (rte, action) => rte.exec('fontSize', action.btn.firstChild.value),
        // Callback on any input change (mousedown, keydown, etc..)
        update: (rte, action) => {
          const value = rte.doc.queryCommandValue(action.name);
          if (value != 'false') { // value is a string
            action.btn.firstChild.value = value;
          }
         }
      })

But even the example doesn't work. All it shows is an empty button in the RTE Toolbar:

Having looked around in the issues, i found something like this:

   rte.add('placeholder', {
        name: 'Placeholder',
        icon: 'P',
        options: [
          {name: 'Salutation', value: '[[salutation]]'},
          {name: 'Firstname', value: '[[firstname]]'},
          {name: 'Lastname', value: '[[lastname]]'},
        ],
        event: 'change',
        result: (rte, action) => console.log(action),
        update: (rte, action) => console.log(action)
    });

This piece of code gives me atleast an select dropdown, but the change event won't trigger when i select an option. I simply can't get it to work...

I hope someone of you might point me in the right direction.

Best regards,

ExCluSiv3