Editor API Menu Item select/click events

Help & Support
1

Hi. I am following some examples from this code and I cant quite figure out how to trigger a function when clicking a menu item.

I have a menu something like:

const myMenu = new pcui.Menu({
            items: [
                { text: "First Menu Item"},
                { text: "Second Menu Item" }
            ]
        });

editor.call('layout.viewport').append(myMenu.dom);

The menu appears fine but when I click an item it just results in an error:


 myMenu.items.forEach(item => {
                 item.on('click', () => {
                     console.log('Clicked :', item.text);
                 });
             });

Anyone have an example of a menu where items (or are they menuItems??) get clicked? Any guidance much appreciated.
Thanks

2

You need to set the onSelect property of your menu items:

So do:

const menu = new pcui.Menu({
    items: [
        {
            text: 'First Menu Item',
            onSelect: () => {
                console.log('Selected: First Menu Item')
            }
        },
        {
            text: 'Second Menu Item',
            onSelect: () => {
                console.log('Selected: Second Menu Item')
            }
        },
    ]
});

editor.call('layout.viewport').append(menu);

This is equivalent to doing:

const menu = new pcui.Menu();

const item1 = new pcui.MenuItem({
    text: 'First Menu Item',
    onSelect: () => {
        console.log('Selected: First Menu Item')
    }
});
menu.append(item1);

const item2 = new pcui.MenuItem({
    text: 'Second Menu Item',
    onSelect: () => {
        console.log('Selected: Second Menu Item')
    }
});
menu.append(item2);

editor.call('layout.viewport').append(menu);
1 Like