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 익스텐션이 다른 익스텐션보다 앞에 오도록 해야 할 수도 있습니다. 그렇지 않으면 너무 빨리 처리될 수 있습니다.---
글을 무작위로 읽기
댓글
로그인하고 댓글 남기기