diff --git a/website/src/website/data/playground-samples/all.js b/website/src/website/data/playground-samples/all.js index aeed1778..a0c87522 100644 --- a/website/src/website/data/playground-samples/all.js +++ b/website/src/website/data/playground-samples/all.js @@ -36,6 +36,12 @@ id: "interacting-with-the-editor-adding-an-action-to-an-editor-instance", path: "interacting-with-the-editor/adding-an-action-to-an-editor-instance", }, + { + chapter: "Interacting with the editor", + name: "Adding a keybinding to an existing command", + id: "interacting-with-the-editor-adding-an-keybinding-to-an-existing-command", + path: "interacting-with-the-editor/adding-an-keybinding-to-an-existing-command", + }, { chapter: "Interacting with the editor", name: "Revealing a position", diff --git a/website/src/website/data/playground-samples/interacting-with-the-editor/adding-a-keybinding-to-an-existing-command/sample.css b/website/src/website/data/playground-samples/interacting-with-the-editor/adding-a-keybinding-to-an-existing-command/sample.css new file mode 100644 index 00000000..e69de29b diff --git a/website/src/website/data/playground-samples/interacting-with-the-editor/adding-a-keybinding-to-an-existing-command/sample.html b/website/src/website/data/playground-samples/interacting-with-the-editor/adding-a-keybinding-to-an-existing-command/sample.html new file mode 100644 index 00000000..75b9b160 --- /dev/null +++ b/website/src/website/data/playground-samples/interacting-with-the-editor/adding-a-keybinding-to-an-existing-command/sample.html @@ -0,0 +1 @@ +<div id="container" style="height: 100%"></div> diff --git a/website/src/website/data/playground-samples/interacting-with-the-editor/adding-a-keybinding-to-an-existing-command/sample.js b/website/src/website/data/playground-samples/interacting-with-the-editor/adding-a-keybinding-to-an-existing-command/sample.js new file mode 100644 index 00000000..cd14677e --- /dev/null +++ b/website/src/website/data/playground-samples/interacting-with-the-editor/adding-a-keybinding-to-an-existing-command/sample.js @@ -0,0 +1,49 @@ +// Explanation: +// First, we need to know the ID of the command. +// If you know the default key bindings, you can get the ID by following these steps. +// 1. open Visual Studio Code and navigate to "Preferences => Keyboard Shortcuts". +// 2. enter a shortcut key (e.g. Tab, Escape, Enter, etc.) in the search text input at the top. +// 3. Once the commands are filtered, you will need to find which command is the target command by ID and name. + +// In this sample, the cursor can be moved with the Ctrl key and HJKL. +// To move the cursor to the left, we usually use the LeftArrow key, so we type `LeftArrow` in the search form. +// You will see a number of commands, but you will find the most likely one, `cursorLeft`. +// Note that the `When` column says `textInputFocus`. +// In a similar fashion, you will find the commands `cursorDown`, `cursorUp`, and `cursorRight`. + +monaco.editor.addKeybindingRules([ + { + keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyH, + command: "cursorLeft", // ID + when: "textInputFocus", // When + }, + { + keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyJ, + command: "cursorDown", + when: "textInputFocus", + }, + { + keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK, + command: "cursorUp", + when: "textInputFocus", + }, + { + keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyL, + command: "cursorRight", + when: "textInputFocus", + }, +]); + +monaco.editor.create(document.getElementById("container"), { + value: [ + "", + "class Example {", + "\tprivate m:number;", + "", + "\tpublic met(): string {", + '\t\treturn "Hello world!";', + "\t}", + "}", + ].join("\n"), + language: "typescript", +}); diff --git a/website/src/website/data/playground-samples/interacting-with-the-editor/adding-a-keybinding-to-an-existing-command/sample.json b/website/src/website/data/playground-samples/interacting-with-the-editor/adding-a-keybinding-to-an-existing-command/sample.json new file mode 100644 index 00000000..b1331f1d --- /dev/null +++ b/website/src/website/data/playground-samples/interacting-with-the-editor/adding-a-keybinding-to-an-existing-command/sample.json @@ -0,0 +1,3 @@ +{ + "title": "Adding a Keybinding to an Existing Command" +}