Context Menu on Editor Canvas not populating

[niranjank151]

Hi @artf,

Im Currently trying to Implement my custom context menu on the Grapesjs Editor but its not allowing me to override the default Context menu. Could you please help me on this?

Thanks in Advance :)

[haniAboul]

@contextmenu="onRightClick" add this on the div of the grapeJsEditor.

`const onRightClick = event => {
event.preventDefault();
const target = event.target; // Get the element being right-clicked

if (target.classList.contains('gjs-frame')) {
console.log('Right-clicked on canvas frame');
contextMenu.value?.open(event.clientX, event.clientY);
} else if (target.classList.contains('some-class')) {
console.log('Right-clicked on a custom element');
// Add more logic here if needed
}

const { clientX, clientY } = event;

if (contextMenu.value) {
contextMenu.value.open(clientX, clientY);
document.addEventListener('click', closeContextMenu, { once: true });
}
};`

Do your stuff to open contextMenu and preventDefault.

On the grapeJs div add this CSS

#gjs * {
pointer-events: auto !important;
}

Not sure if this is the optimal solution but I hope this help! Also I know this has been a while but maybe it can help someone else.