Ckeditor5: How to bind event on ListItemView?

[devaptas]

I'm trying bind a event to a ListItemView on a dropdownView, render is allright, but nothing happens on click. Someone has a tip to help me?

Follow my code (I'm using v12.3.1)

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import Collection from '@ckeditor/ckeditor5-utils/src/collection';
import ListItemView from '@ckeditor/ckeditor5-ui/src/list/listitemview';
import {addListToDropdown, createDropdown} from '@ckeditor/ckeditor5-ui/src/dropdown/utils';

import CardioIcon from '../icon/cardio.svg';
import Model from '@ckeditor/ckeditor5-ui/src/model';

export default class CardioUI extends Plugin {

    init() {

        const editor = this.editor;
        const t = editor.t;

        // The "simpleBox" button must be registered among the UI components of the editor
        // to be displayed in the toolbar.
        editor.ui.componentFactory.add('cardio', locale => {

            const dropdownView = createDropdown(locale);

            dropdownView.buttonView.set({
                icon: CardioIcon,
                label: t('Cardio'),
            });

            // The collection of the list items.
            const items = new Collection();

            // Cardio button
            let listItemViewCardio = new ListItemView(locale);
            listItemViewCardio.set({
                type: 'button',
                model: new Model({
                    icon: CardioIcon,
                    label: t('Ecocardio'),
                    withText: true,
                }),
            });
            listItemViewCardio.on('execute', () => {
                console.log( 'The listItemViewCardio has been clicked!' );
            });
            items.add(listItemViewCardio);

            addListToDropdown(dropdownView, items);

            return dropdownView;
        });
    }
}

[jodator]

Hi! The best way to ask questions is to post them on StackOverflow.

The addListToDropDown() helper expects items to be a Collection of plain objects. They are described by ListDropdownItemDefinition.

So in your case, this should do the trick:

const listItemViewCardio = {
    type: 'button',
    model: new Model({
        icon: CardioIcon,
        label: t('Ecocardio'),
        withText: true,
        // you can set own data, that will be available on evt.source
    }),
};

then listen to the 'execute' event on a dropdownView:

this.listenTo( dropdownView, 'execute', evt => {
    console.log( evt.source.label, ' has been clicked' );
} );

[tmendesilva]

Tnks so much @jodator , event works now!

[devaptas]

Tnks so much @jodator , event works now! (wrong user before, haha)