使用 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 擴充功能排在其他擴充功能之前,否則可能會過早被處理。---
隨機一篇部落格