Only Show EditorBubbleMenu on Editor Right Click

[jordan-sussman]

Description

Currently, when right-clicking inside the editor, both the browser's default context menu appear and the EditorBubbleMenu component. This can be a bit jarring at first glance.

Screenshot:

Solution

Prevent the EditorBubbleMenu component or the browser default context menu from appearing when right-clicking inside the editor.

The solution can be as simple as either:

On the editor's main div (here)

<div onContextMenu={preventDefaultContextMenu}>

const preventDefaultContextMenu = (e) => {
  e.preventDefault();
};

or

A listener:

div.addEventListener("contextmenu", (e) => {e.preventDefault()});

Alternative

If the above is not preferred, it could be worth making the EditorBubbleMenu less of a popover and more of a 'footer menu' that appears at the bottom of the editor when the focus is active in the editor (typing).