在 Monaco Editor 中使用热键?

当使用'react-hotkeys-hook'npm包按下cmd + enter时,我正在尝试在摩纳哥编辑器中使用热键来运行一个函数。

当我从 monaco 编辑器中单击时,它就可以工作了。似乎当光标聚焦在编辑器中时,热键不起作用。

有没有办法让热键工作,同时在 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>
  )
}
stack overflow Using Hot Keys with Monaco Editor?
原文答案

答案:

作者头像

我没用过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";