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 進行翻譯

留言