How to listen to the right click event on the canvas?

[kamalesh-d]

Hello,

First of all thank you very much for making such great project in open source.

Can someone please help me, what is the way to listen to the right-click event on grapesjs canvas? I wanted to listen to this event and open a context-menu for designing the element at which the click was performed.

I learnt to get the current selected component from the canvas based on the following code:

editor.on('component:selected', (selectedcomponent) => {
# Selected component can be processed as I want.
});

However, I am not able to listen to the right-click event. I am working with Vuejs, what I tried is:

HTML content

    <div id="gjs" v-html="current_page.content" @contextmenu.prevent="rightClickHandle"></div>

Vue method

rightClickHandle(){
alert('right clicked');
}

Normally, it shall be able to detect the right click in this way. But since the canvas is attached through 'gjs' id, I need to know if there is a way grapesjs (API) allows us to listen for the right-click event.

Please let me know if any additional information is required.

Thanks in advance,
Kamalesh D.

[artf]

You can get the iframe document from the canvas and catch your events

editor.Canvas.getDocument().addEventListener('contextmenu', (ev) => {
    ev.preventDefault();
    console.log('contextmenu inside canvas iframe');
})

[kamalesh-d]

That resolved my issue, thank you very much for your help. Really very kind.

Regards,
Kamalesh D.

[usmanqamar-int]

editor.onReady(() => {
  editor.Canvas.getDocument().addEventListener('contextmenu', (ev) => {...});
})

Thanks @artf . It's working for me.

[badiuciprian]

Cool, it works but is there an eventListener for some components only? For example I need to add different actions for different components, and not have a context on the main wrapper

[ronaldohoch]

@badiuciprian i think you can use the editor.getSelected() and check the informations to show custon buttons of the context menu.

But o don't know if right click selects the components in Canvas 🤔

[badiuciprian]

as I tried so far, the context opens if you click anywhere on the canvas, because of the wrapper container which is basically a component and I could not make it "ignorable"