Localize Hotkeys

[hummingly]

Different keyboards require different shortcuts

[hummingly]

https://github.com/atom/keyboard-layout

[hummingly]

@RvanderLaan could you try out the dependency. I managed to compile it with compiling node-gyp with window-build-tools 2015 but when importing I do not know how to deal with webpack. In the case of keyboard-layout there is a jsonfile somehow and using native-keymap dep just doesn't work because require syntax does not work.

The problem is that the dialog expects the key '?' and code 'Slash' but that is only on US keyboard layouts possible. On my layout it is always key '_' and code 'Slash' and using key '?' gets me code 'Minus'. Physically the same keys but the display is different. However, it is not possible to fake the shortcut for showing the dialog by dispatching a keyboard event because it isn't trusted.

[hummingly]

At some point or another when localization is going to be an issue or priority, we're pretty much forced to have either a keymap for each language ('Select your language' at the installation) and load it. Or use something like keymap-layout which calls the platform APIs, however, compiling it is a pain and I cannot dodge it with WebAssembly.

[RvanderLaan]

This post mentions a workaround that works for me, the isTrusted is also mentioned earlier in that thread but this doesn't seem to require it:

<Button
  // @ts-ignore
  onClick={() => document.dispatchEvent(new KeyboardEvent('keydown', { which: 47, keyCode: 47, shiftKey: true, bubbles: true }))}
  text="Show hotkeys"
/>

Does that work for you as well?

I've been messing with webpack stuff for a couple of hours now and it's a real pain in the butt... I'm thinking of replacing our custom configs with electron-webpack, they mention it should all work out of the box

[hummingly]

I think it should work with the button. I've tried dispatching in the main file to add it to a menu entry but that only works in the rendering process. I also tried it by adding an additional if statement in App event listeners for a shortcut but this did not work since it isn't trusted. I will try this tomorrow.

What problems are you running into? Regardless, I don't mind having a dependency on this because I have no clue about configuring webpack...

[hummingly]

I looked how vscode does it. Their shortcut is Ctrl + K and opens the reference page to their shortcuts. We could add documentation to the web page as alternative. I tried adding a button into Settings but it does not work for me.

[RvanderLaan]

Might have found something, could you try to add this as a menu item in main.ts?

{
  label: 'View hotkeys',
  accelerator: 'CommandOrControl+H',
  click: (menuItem, browserWindow, event) => {
    browserWindow.webContents.sendInputEvent(
      // @ts-ignore
      { type: 'keyDown', keyCode: '\u003F' },
    );
  },
},

[hummingly]

Yeah this works. I can commit this to master but should we keep the information in the settings panel?

[RvanderLaan]

Nice! Yeah, I think keeping it in the settings panel will help with discoverability