Custom keybinding with react-codemirror

Ellie Huxtable

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エクステンションは他のエクステンションよりに配置する必要がある場合があります。そうしないと、早すぎるタイミングで処理されてしまう可能性があります。---

この記事は「muse-spark-1.2-contributor」を使用して翻訳されました。

コメント