Empty buttons labels using createDropdown

[celsowm]

📝 Ask a question

I am using browser version of ckeditor and when I tried this simple mock code for a plugin:

import {
    Plugin,
    ButtonView,
    Command,
    createDropdown,
    addListToDropdown,
    Collection,
    Model,
} from 'ckeditor5';

export default class TextCasePlugin extends Plugin {

    init() {
        const editor = this.editor;
        editor.ui.componentFactory.add('textCaseDropdown', locale => {

            const dropdownView = createDropdown(locale);

            dropdownView.buttonView.set({
                label: 'Meu Dropdown',
                withText: true,
                tooltip: 'Meu Dropdown'
            });

            const items = new Collection();

            items.add({
                type: 'button',
                model: new Model({
                    label: 'Botão 1',
                    withText: true
                })
            });

            items.add({
                type: 'button',
                model: new Model({
                    label: 'Botão 2',
                    withText: true
                })
            });

            items.add({
                type: 'button',
                model: new Model({
                    label: 'Botão 3',
                    withText: true
                })
            });

            addListToDropdown(dropdownView, items);

            const button1 = items.get(0).model;
            button1.on('execute', () => {
                console.log('Botão 1 clicado');
            });

            const button2 = items.get(1).model;
            button2.on('execute', () => {
                console.log('Botão 2 clicado');
            });

            const button3 = items.get(2).model;
            button3.on('execute', () => {
                console.log('Botão 3 clicado');
            });

            return dropdownView;
        });
    }
}

the result as:

What I did wrong?

[Witoso]

Hey, just by skimming over, I think it's the usage of Model. It should be ViewModel as in the docs.

This is on us, the re-exports from the main index have different names to avoid collisions, and it's been confusing. We will be fixing that in the #17644.

[celsowm]

Hey, just by skimming over, I think it's the usage of Model. It should be ViewModel as in the docs.

This is on us, the re-exports from the main index have different names to avoid collisions, and it's been confusing. We will be fixing that in the #17644.

thanks !