Controlling keyboard shortcuts

With Monaco Editor, you can provide custom commands that handle keyboard combinations. For example, the format of the Open command may look as follows:

editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_O, () => {
// do something
});
Note that the same command works as Cmd + O on macOS and is Ctrl + O on other systems, such as Windows and Linux. Apply this logic throughout.

Let's create two stubs for the Open and Save functions, which will be handled by the Ctrl + O/Cmd + O and Ctrl + S/Cmd + S commands, respectively:

  1. In the Editor.js file, update the editorDidMount handler so that it looks as follows:
const editorDidMount = (editor, monaco) => {
console.log('editorDidMount', editor, monaco);
editor.focus();

editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_O, () => {
console.log('open');
});

editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, () => {
console.log('save');
});
};
  1. Run the web application and check out the developer tools. You can also do this from within the Electron shell.
  2. Try the Cmd + O and Cmd + S combinations in the editor. Notice how our commands handle the keyboard events and log the messages to the console's output:

Next, let's implement the handler for Cmd + O and add support so that we can load files.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.124.232