Add custom dropdown with grapesjs-plugin-ckeditor plugin

[romainlembo-zenchef]

I'm working on a project using GrapesJS and the grapesjs-plugin-ckeditor plugin. I want to add a custom dropdown to the CKEditor toolbar, alongside other default toolbar actions, but I am encountering issues with the integration.

Issue:

I've followed the documentation to configure CKEditor and added a custom dropdown using a CKEditor plugin. However, the dropdown doesn't appear in the toolbar as expected. It seems that the grapesjs-plugin-ckeditor doesn't properly support adding custom dropdowns or modifying the toolbar configuration.

Expected

I would like something like that:

Current Setup:

Here is my current configuration:

const editor = grapesjs.init({
    container: '#gjs',
    components: templateContent,
    plugins: [rtePlugin],
    pluginsOpts: {
        [rtePlugin]: {
            options: {
                toolbar: [
                    { name: 'styles', items: ['Font', 'FontSize'] },
                    { name: 'basicstyles', items: ['Bold', 'Italic'] },
                    // Custom Dropdown
                    { name: 'customDropdown', items: ['CustomDropdown'] }
                ],
                extraPlugins: 'customDropdown',
            },
            ckeditor: 'https://cdn.ckeditor.com/4.21.0/full-all/ckeditor.js'
        }
    }
});

CKEDITOR.plugins.add('customDropdown', {
    init: function (editor) {
        editor.ui.addRichCombo('CustomDropdown', {
            label: 'My Custom Dropdown',
            toolbar: 'customDropdown',
            panel: {
                multiSelect: false
            },
            init: function () {
                this.add('option1', 'Option 1');
                this.add('option2', 'Option 2');
            },
            onClick: function (value) {
                editor.insertText('You selected: ' + value);
            }
        });
    }
});

Dependencies:

"react": "18.3.1",
"grapesjs": "^0.21.8",
"grapesjs-blocks-basic": "^1.0.2",
"grapesjs-plugin-ckeditor": "^1.0.1",
"grapesjs-preset-newsletter": "^1.0.2",

Thank you 🙏