Custom keybinding with react-codemirror

Ellie Huxtable

react-codemirror에서 커스텀 키 바인딩하기

현재 프로젝트에서 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 익스텐션이 다른 익스텐션보다 앞에 오도록 해야 할 수도 있습니다. 그렇지 않으면 너무 일찍 처리될 수 있습니다.---

원문은 Ellie Huxtable님이 에 게재했습니다.

이 글은 muse-spark-1.2-contributor 모델을 사용해 번역했습니다.