"extraKey" property on React component erases CodeMirror default key map behavior
See original GitHub issueCurrent Behavior
When a user defines the extraKey
property on the <ReactSimpleMDE />
component, it overwrites/erases the default key handler behavior for the entire component such that the editor stops reacting to events like Cmd-P
(Preview) and F11
(Full screen editor), among others.
Questions
-
Is this intended behavior? It seems from the CodeMirror documentation the
extraKeys
property is meant to add keymaps in addition to the default keymap. See documentation here:Can be used to specify extra key bindings for the editor, alongside the ones defined by keyMap.
-
(Assuming the answer to #1 is “no”) Is this behavior that react-simplemde-editor is causing, or is it a downstream dependency (i.e. - CodeMirror or SimpleMDE)?
Workaround
Set the SimpleMDE getInstance
to capture the ref, then add your own keymap on top of what the default codemirror behavior is:
// Handler
getInstance = (simplemde) => {
simplemde.codemirror.addKeyMap({
Up: (cm) => {
cm.replaceSelection(" surprise. ");
},
Down: (cm) => {
cm.replaceSelection(" surprise again! ");
}
});
}
// JSX
<SimpleMDE
getMdeInstance={getInstance}
{...otherProps}
/>
CodeMirror Repro
Here is the problem in action (also viewable here): https://codesandbox.io/s/compassionate-fire-db63m
And here is the problem fixed by my workaround: https://codesandbox.io/s/dark-mountain-51kuy
Here is a screenshot of the problematic behavior in the online sample referenced in the README
Issue Analytics
- State:
- Created 3 years ago
- Reactions:2
- Comments:9 (8 by maintainers)
I really need to spent few hours one day addressing those… Sorry, I’m building a startup as a CTO and Co-founder (basically doing all the shit in the world) now and I barely have time for myself let alone some library that I don’t use for last 3 years 😃 So, I cannot promise, but I’ll try do smth today (will be fun to read this 3 years after while this issue will be still open 😄) But I’ll try folks, I’ll try to. Maybe it’s time to rewrite it using hooks? Will see.
4.1.4
has this fixed. Just published.