Why my div is not responsive?

1

Hi, I am working on a personal project using CodeMirror for a text commenting app. My idea is to add a custom gutter element through:
gutters: [“CodeMirror-linenumbers”, “my-gutter-elem”].

The custom gutter element (position: relative) has a child div (position: absolute) to show/edit the comments. When the gutter line number was clicked, the div is shown on top of the editor area. But I found that the mouse clicking and keyboard events are all captured by the editor instead of my div, even if I set my div a higher z-index. When double clicking my div the CodeMirror editor lines was highlighted, not my div, and I am not able to type in any keys. How can I make it work so my div can receive mouse/keyboard events?

Here is the relevant runtime html elements:

<div class="CodeMirror-gutter-wrapper" style="left: -51px; width: 51px;">
  <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 26px;">12</div>
  <div class="CodeMirror-gutter-elt" style="left: 34px; width: 16px;">
    <div class="mywrapper" style="left: 50px; position: absolute;">
      <div class="dialog">
        <div>
          <textarea cols="80" rows="5">You can comment here</textarea>
          <input type="button" value="Save">
          <input type="button" value="Cancel">
        </div>
      </div>
    </div>
  </div>
</div>

Thanks a lot!

2

Turned out that I have to modify the CodeMirror function leftButtonDown() a little, add the following code at the beginning of the function:

var commentDialog = $(e.target).closest('.mydialog')
if ($(commentDialog[0]).hasClass('mydialog')) {
  return;
}

otherwise the mouse events would be captured by the editor. Is there a more elegant way to do this?

Thanks.

3

In recent versions (4.9 and up) you can set a "cm-ignore-events" attribute of "true" on an element to disable CodeMirror’s own mouse event handling for the element. That might also help here.

4

Cool, exactly what I was looking for! It works like a charm and it’s such an elegant solution.

Thank you so much!

5

BTW, is it documented somewhere? I didn’t find it in the manual. It would be very useful for developers to know it.