在 Monaco 编辑器中如何使用热键？

Question

我正在尝试在Monaco编辑器中使用热键，在光标聚焦的情况下使用'react-hotkeys-hook' npm包，当按下“cmd + enter”时运行一个函数。我已经成功实现了在单击Monaco编辑器之外时的功能。似乎当光标聚焦在编辑器中时，热键无法工作。有没有办法使热键在编辑器中输入内容时也能正常工作，而不是手动点击到另一个div？以下是我正在处理的一些代码：

import React from "react";
import Editor from "@monaco-editor/react";
import { useHotkeys } from "react-hotkeys-hook";

export default function codeEditor(props) {
useHotkeys("cmd+enter", () => runCode());

function runCode() {
  alert('Running code...')
}

return (
    <div className="editor-container">
      <Editor
        defaultValue={`Hello World`}
        onMount={handleEditorDidMount}
        width="100%"
        height="80vh"
        theme="vs-dark"
        fontSize='20px'
        defaultLanguage="javascript"
        options={{
          fontSize: '18px'
        }}  
      />
    </div>
  )
}

- StackUnderFlow

Answer 1

我从未使用过react-hotkeys-hook，但我在编辑器中注册了多个快捷键，包括cmd / ctrl + enter：

            editor.addAction({
                id: "executeCurrentAndAdvance",
                label: "Execute Block and Advance",
                keybindings: [KeyMod.CtrlCmd | KeyCode.Enter],
                contextMenuGroupId: "2_execution",
                precondition: blockContext,
                run: () => {
                    this.executeCurrentContext(false, true);
                },
            });

前提条件是：

        const blockContext = "editorTextFocus && !suggestWidgetVisible && !renameInputVisible && !inSnippetMode " +
            "&& !quickFixWidgetVisible";

- Mike Lischke

Answer 2

尝试使用以下调用表单：

useHotkeys("cmd+enter", () => runCode(), {enableOnTags: ['INPUT','TEXTAREA','SELECT']});

"enableOnTags: string[] 用于启用在表单字段中监听热键的功能。"

- MaxAlex

Answer 3

在 react-hotkeys-hook 的版本 4.3.8 中，可以通过以下方式实现：

  useHotkeys("ctrl+b", () => console.log("hello"), {
    preventDefault: true,
    enableOnFormTags: true,
  });

- AshishPandagre