How to capture or emit beforeCursorEnter

1

I’m using version “5.65.5”

I took the markselection.html demo file and tried to capture beforeCursorEnter on the styled text.

So from the demo, I added a constant to hold the marker:

const myMarker = editor.markText({line: 6, ch: 26}, {line: 6, ch: 42}, {className: "styled-background"});

then I tried:

editor.on("beforeCursorEnter", function(){ 
      console.log("beforeCursorEnter")
});

Got nothing. So I tried:

editor.on(myMarker, "beforeCursorEnter", function(){ 
      console.log("beforeCursorEnter")
});

Got nothing. I even edited the markText line to add the handleMouseEvents option like so:

let myMarker = editor.markText({line: 6, ch: 26}, {line: 6, ch: 42}, {handleMouseEvents: true, className: "styled-background"});

still got nothing…

What am I doing wrong here?

2

You want CodeMirror.on, not editor.on. The latter is only used for editor-wide events.

3

Thank you so much for the reply.

Is the event supposed to fire twice? My code below fires twice whenever I click on the marked text.

CodeMirror.on(myMarker, "beforeCursorEnter", function(){
      console.log("marked, beforeCursorEnter")
    });

Also, is there a way to fire an event when the user hovers over marked text? Or does one have to add their own custom mode as in your htmlmixed example here?

Thank you again.

4

No.

No, but you can register editor-wide event handlers to detect hovering and check whether the mouse is over a region you’re interested when it hovers.

5

Hmm, my beforeCursorEnter appears to be firing twice. This below is now currently the entirety of my <script> section (there are no others) and I am getting “myMarker → beforeCursorEnter” printed twice inside the console. Any idea why that is?

<script>
  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    styleSelectedText: true
  });
  const myMarker = editor.markText({line: 6, ch: 26}, {line: 6, ch: 42}, {className: "styled-background"});
  CodeMirror.on(myMarker, "beforeCursorEnter", function(){
    console.log("myMarker -> beforeCursorEnter")
  });
</script>

Thank you.

6

Is there an option that I need to set to prevent the double firing of the beforeCursorEnter?

I can’t do a e.preventDefault() because no arguments are passed to the handler.

  const myMarker = editor.markText({line: 6, ch: 26}, {line: 6, ch: 42}, {className: "styled-background"});
  CodeMirror.on(myMarker, "beforeCursorEnter", function(...args) {
    console.log(args);
  });

will log an empty array. So no preventDefault() is available. Is there an option that needs to be set to prevent double event firing? Oh and by the way, the console logs twice too.

7

I went digging into the source code and it’s inside the source file selection_updates.js, the function skipAtomicInSelection() does make TWO calls to skipAtomic() which calls skipAtomicInner where the calls to signal(m, "beforeCursorEnter") takes place.

The two calls inside the skipAtomicInSelection() are to set variables newAnchor and newHead

Should I use a debounce method to deal with the double “beforeCursorEnter” events or is there a better way?

8

Looks like it fires it both for the selection head and the selection anchor, even if those are the same. The patch below avoids the extra call, though you’d probably still want to make your handler idempotent or debounce it somehow, since quick selection changes or the creation of a non-cursor selection in your range will still cause it to fire multiple times.