Codemirror shortcut capturing

Hey @marijn, Hope you are doing well

  1. I would like to know how codemirror able to capture my defined shortcuts when bring to focus and revert them on unfocus.
  2. If there is an easy way to make it capture only the shortcuts it requires and let the app use other shortcuts?

Btw I know how to implement custom shortcuts in codemirror using keymap but I want to know how to let codemirror not capture not needed other shortcuts. If question is not clear, let me know thanks.

1 Like

CodeMirror does not preventDefault or stopPropagation keyboard events that it doesn’t have a keymap binding for. So it shouldn’t interfere with other shortcuts, if you listen for the keys on the outer DOM elements or the window, even when the editor is focused.

Thanks, I see it’s default browser’s behavior for input elements, input elements interferes with shortcuts and that’s why codemirror did too and I searched a bit there is no specific solution to the problem or may be I am missing something.

Don’t want to spam, but above comment is wrong. It was the hotkeysjs blocking shortcut in input/textarea

With CodeMirror, users can manage and create custom keyboard shortcuts and take advantage of a robust shortcut handling mechanism.

Custom Shortcut Definition: The keymap feature allows you to define custom shortcuts. For instance, you would set up a key binding using keymap.of and make sure it included a run function to handle the appropriate action to create a shortcut for saving a document with Ctrl-S. Though CodeMirror 6 may utilise a different syntax in some cases, this configuration is comparable to that of CodeMirror 5.​

Preventing Default Browser Actions: You must use preventDefault to make sure that your shortcuts do not cause default browser actions to occur (such as the browser’s save dialogue opening when you press Ctrl-S). You can accomplish this by telling CodeMirror to halt the default action by returning true in your run function. To stop the default action and capture Ctrl-S, for instance, it would look like this:

Prec.highest is used in this instance to guarantee that this key binding gets prioritised.

Handling Conflicting Shortcuts: You must make sure your custom keymap has a higher precedence or modify the current configurations to accommodate your new bindings if you have shortcuts that could conflict with other features (like autocomplete using Ctrl-Space).​

Multi-stroke Key Bindings: You can use multi-stroke key bindings for more intricate shortcut schemes, like those that involve sequences (such as pressing ESC and then another key). In order to finish the shortcut, this entails programming the editor to listen for the next key push after the original key stroke. It is generally not advised to use ESC for this purpose, though, as it may conflict with default behaviours like tab handling.

Keymap Flexibility: Other shortcuts for which CodeMirror does not have bindings are not affected by it. This means that in order to prevent the editor’s behaviour from overriding shortcuts unique to your application, you can capture keys at higher levels (such as the outer DOM or window).​