Custom keybinding with react-codemirror
ellie.wtf·77w
Preview
Report Post

I’m currently using uiwjs/react-codemirror for a project, and needed to add a custom binding to cmd+enter

The documentation didn’t quite show what I needed, but with the following you can bind custom keys

import React from 'react';
import CodeMirror from '@uiw/react-codemirror';
import { keymap } from '@codemirror/view';
import { defaultKeymap } from '@codemirror/commands';

const MyCodeEditor = () => {
const handleCmdEnter = React.useCallback((view) => {
console.log('Cmd+Enter pressed!');
return true;
}, []);

const customKeymap = keymap.of([
{
key: 'Mod-Enter',
run: handleCmdEnter,
},
]);

return (
<CodeMirror
value="code and stuff"
extensions={[customKeymap]}
/>
);
};

export default MyCodeEditor;

Note that you may need to ensure your keymap extension is listed before o…

Similar Posts

Loading similar posts...

Keyboard Shortcuts

Navigation
Next / previous item
j/k
Open post
oorEnter
Preview post
v
Post Actions
Love post
a
Like post
l
Dislike post
d
Undo reaction
u
Recommendations
Add interest / feed
Enter
Not interested
x
Go to
Home
gh
Interests
gi
Feeds
gf
Likes
gl
History
gy
Changelog
gc
Settings
gs
Browse
gb
Search
/
General
Show this help
?
Submit feedback
!
Close modal / unfocus
Esc

Press ? anytime to show this help