Can't add placeholders drop down to text field drop down options with CKEditor enabled

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome

Reproducible demo link

https://codepen.io/darrenbawag/pen/JjWBLrp

Describe the bug

How to reproduce the bug?

1. Open this link https://codepen.io/darrenbawag/pen/JjWBLrp and try to show the placeholder dropdown to toolbar of CKEditor using this code but this does show the drop down only when we don't add the grape grapesjs-plugin-ckeditor to configuration.

    icon: `<select class="gjs-field">
    <option  id="defaultPlaceholder">Placeholder</option>
    <option value="[[salutation]]">Salutation</option>
    <option value="[[firstname]]">Firstname</option>
    <option value="[[lastname]]">Lastname</option>
        </select>`,
    // Bind the 'result' on 'change' listener
    event: "change",
    result: (
      rte: { exec: (arg0: string, arg1: unknown) => unknown },
      action: { btn: { firstChild: { value: unknown } } }
    ) => rte.exec("fontSize", action.btn.firstChild.value),
    // Callback on any input change (mousedown, keydown, etc..)
    update: (
      rte: { insertHTML: (arg0: unknown) => void },
      action: { btn: { children: { selectedOptions: { value: unknown }[] }[] } }
    ) => {
      rte.insertHTML(action.btn.children[0].selectedOptions[0].value);
    },
  });```
2. ...

**What is the expected behavior?**
GrapeJS ckeditor should provide way to add custom placeholders dropdowns, 

**What is the current behavior?**
I can not custom drop down placeholder to the toolbar options when I use grape js ckeditor or custom plugin.

If is necessary to execute some code in order to reproduce the bug, paste it here below:
This code adds the drop down to default RichTextEditor toolbar but does not adds drop down on CKeditor toolbar options
```js
  rte.add("fontSize", {
    icon: `<select class="gjs-field">
    <option  id="defaultPlaceholder">Placeholder</option>
    <option value="[[salutation]]">Salutation</option>
    <option value="[[firstname]]">Firstname</option>
    <option value="[[lastname]]">Lastname</option>
        </select>`,
    // Bind the 'result' on 'change' listener
    event: "change",
    result: (
      rte: { exec: (arg0: string, arg1: unknown) => unknown },
      action: { btn: { firstChild: { value: unknown } } }
    ) => rte.exec("fontSize", action.btn.firstChild.value),
    // Callback on any input change (mousedown, keydown, etc..)
    update: (
      rte: { insertHTML: (arg0: unknown) => void },
      action: { btn: { children: { selectedOptions: { value: unknown }[] }[] } }
    ) => {
      rte.insertHTML(action.btn.children[0].selectedOptions[0].value);
    },
  });

Code of Conduct

• I agree to follow this project's Code of Conduct