Adding custom keybindings to modern-monaco

[hybridherbst]

Hi, I'm trying to add custom shortcuts to modern-monaco.

I figured out a few things already.
I can get the underlying monaco instance from lazy() by accessing the workspace:

workspace._monaco.promise.then(monaco => {
  const editor = monaco.editor;
  editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
        runCustomCode();
    });
});

However, I'm running into issues like this:

client.js:3208 Cannot add keybinding because the editor is configured with an unrecognized KeybindingService
warn	@	client.js:3208
addAction	@	editor-core.mjs:191902

Could you provide an example for how to use the underlying editor instance and add things to it? Thanks!

[hybridherbst]

I figured it out, as so often after searching for hours and then posting an issue :)

For future readers – I believe this could be easier / better documented but at least it works.

import { lazy, Workspace } from "modern-monaco";
import type * as MonacoNS from "monaco-editor";

await lazy({ workspace });

workspace._monaco.promise.then((monaco: typeof MonacoNS) => {
      monaco.editor.addEditorAction({
        id: 'save-action',
        label: 'Save File',
        keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS],
        run: (ed) => {
            runSaveAction();
        },
    });
});

Things that could be better:

• would be great if I didn't have to grab the types from a separate monaco-editor package
• would be great if the monaco instance wasn't "hidden" on the workspace and instead officially available

Leaving this open for comment, if you feel this is the right approach the issue can be closed.

[ije]

A) i will add an onLoad(monaco: typeof MonacoNS) option for the lazy options
B) considering a keybindings option

await lazy({ workspace, shortcuts: {
  "⌘ + s": runSaveAction
}});