search

microsoft / monaco-editor

A browser based code editor
https://microsoft.github.io/monaco-editor/
MIT License
40.41k stars 3.6k forks source link

Detect/Select keyboard layout to display shortcuts in #2636

Open spahnke opened 3 years ago

spahnke commented 3 years ago

The Monaco editor currently only displays shortcuts in the US layout when opening the command palette or the context menu. grafik

As stated in https://github.com/microsoft/monaco-editor/issues/1233 some shortcuts simply don't translate over to other layouts. For example, on the German layout "Toggle Line Comment" is displayed in Monaco as Ctrl+/ but you have to use Ctrl+#to trigger the action. grafik

The browser version of VS Code (https://vscode-web-test-playground.azurewebsites.net) has a status bar item to open a quick pick where you can select your layout or enable auto-detection while you type. grafik grafik

I searched a bit for that feature in the VS Code codebase and found the picker here https://github.com/microsoft/vscode/blob/99e3914c7ec8f7b24a49d38c7387ac60b88f95aa/src/vs/workbench/contrib/preferences/browser/keyboardLayoutPicker.ts#L96 and the corresponding service here https://github.com/microsoft/vscode/blob/19f6f3103606da3fe5d8be4b722d96fe8e18271a/src/vs/workbench/services/keybinding/browser/keyboardLayoutService.ts#L506. The service and all other supporting code is currently located under workbench/services/keybinding/browser and .../common.

As someone who doesn't know the codebase that well I can't quite tell if it would be possible to do so dependency-wise. But is it possible to move that service and supporting code to platform so that it could be consumed from the standalone editor? Additionally, a corresponding quick pick would need to be implemented in the standalone layer, that let's you pick a layout + maybe a setting that let's you predefine it?

And please let me know if you want me to merge this issue into https://github.com/microsoft/monaco-editor/issues/1233, then I will move it over as a comment.

alexdima commented 3 years ago

There is an implicit cost with that feature: VS Code ends up shipping the 10 most popular keyboard layouts we have seen and loads them as necessary. This would increase the bundle size of the editor or complicate further the webpack configuration to make things load on-demand. I would be very interesting if there are by now any new browser APIs that can help us read the current keymap.

spahnke commented 3 years ago

Ah I see. From what I can tell, and you probably know way better than me, you're already using the experimental navigator.keyboard.getLayoutMap() here https://github.com/microsoft/vscode/blob/19f6f3103606da3fe5d8be4b722d96fe8e18271a/src/vs/workbench/services/keybinding/browser/keyboardLayoutService.ts#L389.

But just so I can wrap my head around that: That map only maps the physical key Backslash to the character # on the German keyboard layout, and is therefore missing some crucial information from the shipped maps? For instance here https://github.com/microsoft/vscode/blob/f90a0abe02b932182bd72d689ce5dd0836583493/src/vs/workbench/services/keybinding/browser/keyboardLayouts/de.win.ts#L60 you also provide mappings for the shifted version, the altGr version, and especially the virtual key code. If I understand correctly, that last part is the important bit to map from US_SLASH in the VS Code keybinding to VK_OEM_2 to # in the display together with the map here https://github.com/microsoft/vscode/blob/7bbc15a60e0adfdeae901bf149f56c72c83a9a65/src/vs/workbench/services/keybinding/common/windowsKeyboardMapper.ts#L655?

alexdima commented 3 years ago

@rebornix do you remember why navigator.keyboard.getLayoutMap() was not enough and we had to ship the popular keymaps as well?