react-codemirrorでカスタムキーバインドを設定する
原文は Ellie Huxtable により に公開されました。 このブログを購読する
現在プロジェクトでuiwjs/react-codemirrorを使っていて、cmd+enterにカスタムバインディングを追加する必要がありました。
ドキュメントには必要なことがはっきりと書かれていなかったのですが、以下の方法でカスタムキーをバインドできます。
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;なお、keymapエクステンションは他のエクステンションより前に配置する必要がある場合があります。そうしないと、早すぎるタイミングで処理されてしまう可能性があります。---
記事をランダムに読む
コメント
ログインしてコメントする