`stopPropagation` in `keymap`

v6
1

I’m trying to stopPropagation on the Mod+/ shortcut for toggleComment when Editor is focused to prevent a conflict elsewhere in the app.

From this topic: How can I replace the default autocompletion keymap (v6) - #5 by marijn

the library doesn’t concern itself with stopping propagation, but it shouldn’t be too hard to either properly check the event target in your own handlers, or add an intermediate handler on the editor’s wrapping <div> that stops everything you don’t want to escape.

Yet, I don’t see any clear way I can get the keyboard event for a keymap. Are there any ways to access the keyboard event directly?

Or do you have to do some roundabout EditorView.domEventHandlers() to watch keydown and handle the direct keyboard event at the top level?

  EditorView.domEventHandlers({
    keydown(event) {
      if (event.metaKey && event.key === '/') {
        console.log('Mod+/ keydown!', event);
        event.stopPropagation();
      }
    }
  }),

This works when I don’t have the Mod+/ keymap added, but if I add that keymap, then my keydown listener never fires. I can’t see exactly why the keymap prevents that in the code view/src/keymap.ts at main · codemirror/view · GitHub

2

domEventHandlers won’t fire for events that already have their default prevented by higher-precedence handlers. So either give this extension a higher precedence than your highest-precedence keymap extension, or use view.dom.addEventListener to add a raw DOM listener to the outer element.

1 Like
3

Ah yes, it was indeed a precedence issue. Adding Prec.high to the domEventHandler made it work as expected.

Thank you!