Using Hot Keys with Monaco Editor?

user_4012572 0
Viewed 1240

I'm trying to use hot keys in a monaco editor to run a function when cmd + enter is pressed using the 'react-hotkeys-hook' npm package.

I have it working when I click off from the monaco editor. It seems when the cursor is focused in the editor, the hot keys don't work.

Is there a way to make the hot keys work while also typing in the monaco editor instead of manually clicking off to anther div?

Here is some of the code I'm working on:

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>
  )
}
monaco-editor reactjs
1 Answers

I have never used react-hotkeys-hook, but I registered multiple shortcuts in the editor, including 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);
                },
            });

with the precondition:

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