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 发布

本文章由 stealth/ox-alpha 进行翻译