Windows & Linux AltGr Fix (#1538)

Co-authored-by: Matt Holtzman <matt.holtzman@gmail.com>

@types/frame/environment.d.ts

@@ -1,3 +1,5 @@
+import { KeyboardLayout } from '../../resources/keyboard'
+
 declare global {
   namespace NodeJS {
     interface ProcessEnv {
@@ -7,6 +9,9 @@ declare global {
       LOG_LEVEL?: 'silly' | 'debug' | 'verbose' | 'info' | 'warn' | 'error'
     }
   }
+  interface Navigator {
+    keyboard: { getLayoutMap: () => Promise<KeyboardLayout> }
+  }
 }
 
 export {}

app/onboard/App/Slides/Access/index.jsx

@@ -4,7 +4,7 @@ import { Slide, SlideBody, SlideItem, Shortcut } from '../../styled'
 
 import link from '../../../../../resources/link'
 
-import { getDisplayShortcut } from '../../../../../resources/app'
+import { getDisplayShortcut } from '../../../../../resources/keyboard'
 
 const Access = ({ setTitle, setProceed, platform }) => {
   const { modifierKeys, shortcutKey } = getDisplayShortcut(platform, store('main.shortcuts.summon'))

eslint.config.mjs

@@ -65,7 +65,7 @@ export default [
     files: [
       'app/**/*.js',
       'main/dapps/server/inject/*.js',
-      'resources/app/**/*.js',
+      'resources/keyboard/**/*.js',
       'resources/Components/**/*.js',
       'resources/Hooks/**/*.js',
       'resources/Native/**/*.js',

main/keyboardShortcuts/index.ts

@@ -0,0 +1,90 @@
+import { globalShortcut } from 'electron'
+import log from 'electron-log'
+
+import store from '../store'
+import { shortcutKeyMap } from '../../resources/keyboard/mappings'
+import type { Shortcut } from '../store/state/types/shortcuts'
+
+const stringifyShortcut = ({ modifierKeys, shortcutKey }: Shortcut) => ({
+  shortcutString: [...modifierKeys, shortcutKey].join('+'),
+  accelerator: [...modifierKeys.slice().sort(), shortcutKeyMap[shortcutKey] || shortcutKey].join('+')
+})
+
+const equivalentShortcuts = (shortcut1: Shortcut, shortcut2: Shortcut) =>
+  shortcut1.modifierKeys === shortcut2.modifierKeys && shortcut1.shortcutKey === shortcut2.shortcutKey
+
+function unregister(shortcut: Shortcut) {
+  const { shortcutString, accelerator } = stringifyShortcut(shortcut)
+
+  log.verbose(`Unregistering accelerator "${accelerator}" for shortcut: ${shortcutString}`)
+
+  try {
+    globalShortcut.unregister(accelerator)
+  } catch (e) {
+    log.error(`Failed to unregister accelerator "${accelerator}" for shortcut: ${shortcutString}`, e)
+  }
+}
+
+function register(shortcut: Shortcut, shortcutHandler: (accelerator: string) => void) {
+  const { shortcutString, accelerator } = stringifyShortcut(shortcut)
+
+  log.verbose(`Registering accelerator "${accelerator}" for shortcut: ${shortcutString}`)
+
+  try {
+    if (shortcut.enabled && !shortcut.configuring) {
+      globalShortcut.register(accelerator, () => shortcutHandler(accelerator))
+      log.info(`Accelerator "${accelerator}" registered for shortcut: ${shortcutString}`)
+    }
+  } catch (e) {
+    log.error(`Failed to register accelerator "${accelerator}" for shortcut: ${shortcutString}`, e)
+  }
+}
+
+export const registerShortcut = (shortcut: Shortcut, shortcutHandler: (accelerator: string) => void) => {
+  const isWindows = process.platform === 'win32'
+  const isMacOS = process.platform === 'darwin'
+  const keyboardLayout = store('keyboardLayout')
+  const createAltGrShortcut = () => {
+    // remove AltGr and Alt from modifiers (Linux)
+    // remove AltGr, Alt and Control from modifiers (Windows)
+    const modifierKeys = shortcut.modifierKeys.filter((modifier) =>
+      isWindows ? !modifier.startsWith('Alt') && modifier !== 'Control' : !modifier.startsWith('Alt')
+    )
+
+    // return new modifiers depending on OS + rest of shortcut - so that AltGr / Right Alt triggers in the same way as Left Alt
+    return {
+      ...shortcut,
+      modifierKeys: (isWindows
+        ? [...modifierKeys, 'Control', 'Alt']
+        : [...modifierKeys, 'AltGr']) as typeof shortcut.modifierKeys
+    }
+  }
+
+  // Windows & Linux Non-US key layout AltGr / Right Alt fix
+  if (!isMacOS) {
+    const altGrShortcut = createAltGrShortcut()
+
+    // unregister any existing AltGr shortcut - unless it matches the one we are about to register
+    if (!keyboardLayout.isUS && !equivalentShortcuts(shortcut, altGrShortcut)) {
+      unregister(altGrShortcut)
+    }
+
+    if (
+      shortcut.modifierKeys.includes('AltGr') ||
+      (shortcut.modifierKeys.includes('Alt') && !keyboardLayout.isUS)
+    ) {
+      // register the AltGr shortcut
+      register(altGrShortcut, shortcutHandler)
+
+      // replace AltGr with Alt in the main shortcut
+      shortcut = {
+        ...shortcut,
+        modifierKeys: shortcut.modifierKeys.map((key) => (key === 'AltGr' ? 'Alt' : key))
+      }
+    }
+  }
+
+  // register the shortcut
+  unregister(shortcut)
+  register(shortcut, shortcutHandler)
+}

main/store/actions/index.js

@@ -232,6 +232,11 @@ module.exports = {
       enabled: shortcut.enabled ?? existingShortcut.enabled
     }))
   },
+  setKeyboardLayout: (u, layout) => {
+    u('keyboardLayout', (existingLayout = {}) => ({
+      isUS: layout.isUS ?? existingLayout.isUS
+    }))
+  },
   setAutohide: (u, v) => {
     u('main.autohide', () => v)
   },

main/store/state/index.js

@@ -163,6 +163,9 @@ const initial = {
     rates: {}
   },
   platform: process.platform,
+  keyboardLayout: {
+    isUS: true
+  },
   main: {
     _version: main('_version', 32),
     instanceId: main('instanceId', generateUuid()),

main/store/state/types/shortcuts.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod'
 
-const supportedModifierKey = z.enum(['Alt', 'Control', 'Meta', 'Super', 'CommandOrCtrl'])
+const supportedModifierKey = z.enum(['Alt', 'AltGr', 'Control', 'Meta', 'Super', 'CommandOrCtrl'])
 
 const supportedShortcutKey = z.enum([
   'Comma',

main/windows/index.ts

@@ -16,7 +16,8 @@ import store from '../store'
 import FrameManager from './frames'
 import { createWindow } from './window'
 import { SystemTray, SystemTrayEventHandlers } from './systemTray'
-import { getAcceleratorFromShortcut } from '../../resources/app'
+import { registerShortcut } from '../keyboardShortcuts'
+import { Shortcut } from '../store/state/types/shortcuts'
 
 type Windows = { [key: string]: BrowserWindow }
 
@@ -39,7 +40,6 @@ let dash: Dash
 let onboard: Onboard
 let mouseTimeout: NodeJS.Timeout
 let glide = false
-let summonShortcutAccelerator = 'Alt+/'
 
 const app = {
   hide: () => {
@@ -554,35 +554,21 @@ const init = () => {
 
   store.observer(() => broadcast('permissions', JSON.stringify(store('permissions'))))
   store.observer(() => {
-    const summonShortcut = store('main.shortcuts.summon')
-    const accelerator = getAcceleratorFromShortcut(summonShortcut)
-    try {
-      globalShortcut.unregister(accelerator)
-      if (summonShortcutAccelerator) {
-        globalShortcut.unregister(summonShortcutAccelerator)
+    let summonShortcut: Shortcut = store('main.shortcuts.summon')
+    const summonHandler = (accelerator: string) => {
+      app.toggle()
+      if (store('windows.onboard.showing')) {
+        send('onboard', 'main:flex', 'shortcutActivated')
       }
-      if (summonShortcut.enabled && !summonShortcut.configuring) {
-        globalShortcut.register(accelerator, () => {
-          app.toggle()
-          if (store('windows.onboard.showing')) {
-            send('onboard', 'main:flex', 'shortcutActivated')
-          }
+      if (tray?.isReady()) {
+        systemTray.setContextMenu(tray.isVisible() ? 'hide' : 'show', {
+          displaySummonShortcut: summonShortcut.enabled,
+          accelerator
         })
-        summonShortcutAccelerator = accelerator
       }
-    } catch (e) {
-      const summonShortcutStr = [...summonShortcut.modifierKeys, summonShortcut.shortcutKey].join('+')
-      log.error(
-        new Error(`Could not set accelerator "${accelerator}" for summon shortcut: ${summonShortcutStr}`)
-      )
     }
 
-    if (tray?.isReady()) {
-      systemTray.setContextMenu(tray.isVisible() ? 'hide' : 'show', {
-        displaySummonShortcut: summonShortcut.enabled,
-        accelerator
-      })
-    }
+    registerShortcut(summonShortcut, summonHandler)
   })
 }
 

resources/Components/KeyboardShortcutConfigurator/index.js

@@ -1,8 +1,8 @@
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import hotkeys from 'hotkeys-js'
 
 import link from '../../../resources/link'
-import { getShortcutFromKeyEvent, getDisplayShortcut, isShortcutKey } from '../../../resources/app'
+import { getShortcutFromKeyEvent, getDisplayShortcut, isShortcutKey } from '../../keyboard'
 
 const KeyboardShortcutConfigurator = ({ actionText = '', platform, shortcut, shortcutName }) => {
   const { modifierKeys, shortcutKey } = getDisplayShortcut(platform, shortcut)
@@ -12,12 +12,12 @@ const KeyboardShortcutConfigurator = ({ actionText = '', platform, shortcut, sho
       hotkeys('*', { capture: true }, (event) => {
         event.preventDefault()
 
-        const allowedModifierKeys = ['Meta', 'Alt', 'Control', 'Command']
+        const allowedModifierKeys = ['Meta', 'Alt', 'AltGr', 'Control', 'Command']
         const isModifierKey = allowedModifierKeys.includes(event.key)
 
         // ignore modifier key solo keypresses and disabled keys
         if (!isModifierKey && isShortcutKey(event)) {
-          const newShortcut = getShortcutFromKeyEvent(event)
+          const newShortcut = getShortcutFromKeyEvent(event, hotkeys.getPressedKeyCodes(), platform)
           // enable the new shortcut
           link.send('tray:action', 'setShortcut', shortcutName, {
             ...newShortcut,