How to track when the cursor has been moved by mouse-click

v6
1

Is there an event I could use to track when the cursor position has been moved by a mouse-click? My goal is to open my own proprietary code-completion menu based on where they click in the textarea.

I can work with either native JS API or CodeMirror API, but I wanted to know what is the recommended approach here.

2

I could in theory do something like:

textarea.addEventListener('click', () => {
  console.log('Cursor position after click:', textarea.selectionStart);
});

But I wonder if that breaks the abstraction in a bad way, or if there’s a correct way to add an event handler like this to the code editor.

3

There is no textarea, so that won’t really work. But you can use the EditorView.domEventHandlers facet to register regular event handlers. Or have your view plugin, which would probably be the place to manage a completion menu, listen for transactions with a select.pointer user event tag.

4

I see. I think I may be able to use domEventHandlers to track the click event. Does it also support tracking right-click events?

5

Looks like contextmenu works, but I wonder if I can somehow get this to work for just right-click, as contextmenu also works with certain keys.

6

You get a DOM event. You can do everything with that that you can in regular handlers, including looking at its button property.