add physical key mapping for useHotkeys to support alt keyboard languages (#2051)

src/shared/hooks/use-hotkeys.ts

@@ -2,7 +2,17 @@ import {
     type HotkeyItem as MantineHotkeyItem,
     useHotkeys as useMantineHotkeys,
 } from '@mantine/hooks';
+import { useMemo } from 'react';
 
-export const useHotkeys = useMantineHotkeys;
+import { withPhysicalKeys } from '/@/shared/utils/hotkeys';
+
+export const useHotkeys = (
+    hotkeys: MantineHotkeyItem[],
+    tagsToIgnore?: string[],
+    triggerOnContentEditable?: boolean,
+) => {
+    const physicalHotkeys = useMemo(() => withPhysicalKeys(hotkeys), [hotkeys]);
+    useMantineHotkeys(physicalHotkeys, tagsToIgnore, triggerOnContentEditable);
+};
 
 export type HotkeyItem = MantineHotkeyItem;

src/shared/utils/hotkeys.ts

@@ -0,0 +1,37 @@
+import type { HotkeyItem } from '@mantine/hooks';
+
+const RESERVED_KEYS = new Set(['alt', 'ctrl', 'meta', 'mod', 'shift']);
+
+/**
+ * Converts stored hotkey strings to Mantine's physical-key format.
+ * Mantine matches KeyboardEvent.code via normalizeKey, which turns Digit1 into
+ * "digit1" but leaves "1" as "1" — so mod+1 must become mod+Digit1.
+ */
+export const toPhysicalHotkey = (hotkey: string): string =>
+    hotkey
+        .split('+')
+        .map((part) => part.trim())
+        .map((part) => {
+            if (part === '[plus]') {
+                return part;
+            }
+
+            const lower = part.toLowerCase();
+            if (RESERVED_KEYS.has(lower)) {
+                return lower;
+            }
+
+            if (/^\d$/.test(part)) {
+                return `Digit${part}`;
+            }
+
+            return part;
+        })
+        .join('+');
+
+export const withPhysicalKeys = (hotkeys: HotkeyItem[]): HotkeyItem[] =>
+    hotkeys.map(([hotkey, handler, options]) => [
+        toPhysicalHotkey(hotkey),
+        handler,
+        { ...options, usePhysicalKeys: true },
+    ]);

src/shared/utils/keyboard-code-to-hotkey.ts

@@ -0,0 +1,68 @@
+const CODE_TO_HOTKEY_KEY: Record<string, string> = {
+    ArrowDown: 'arrowdown',
+    ArrowLeft: 'arrowleft',
+    ArrowRight: 'arrowright',
+    ArrowUp: 'arrowup',
+    Backspace: 'backspace',
+    Delete: 'delete',
+    End: 'end',
+    Enter: 'enter',
+    Equal: 'equal',
+    Escape: 'escape',
+    Home: 'home',
+    Insert: 'insert',
+    Minus: 'minus',
+    PageDown: 'pagedown',
+    PageUp: 'pageup',
+    Space: 'space',
+    Tab: 'tab',
+};
+
+const NUMPAD_CODE_TO_HOTKEY_KEY: Record<string, string> = {
+    Add: 'numpadadd',
+    Decimal: 'numpaddecimal',
+    Divide: 'numpaddivide',
+    Enter: 'numpadenter',
+    Multiply: 'numpadmultiply',
+    Subtract: 'numpadsubtract',
+};
+
+export const MODIFIER_KEY_CODES = new Set([
+    'AltLeft',
+    'AltRight',
+    'ControlLeft',
+    'ControlRight',
+    'MetaLeft',
+    'MetaRight',
+    'ShiftLeft',
+    'ShiftRight',
+]);
+
+export const keyboardCodeToHotkeyKey = (code: string): null | string => {
+    const mapped = CODE_TO_HOTKEY_KEY[code];
+    if (mapped) {
+        return mapped;
+    }
+
+    if (code.startsWith('Key')) {
+        return code.slice(3).toLowerCase();
+    }
+
+    if (code.startsWith('Digit')) {
+        return code.slice(5);
+    }
+
+    if (code.startsWith('Numpad')) {
+        const suffix = code.slice(6);
+        const numpadMapped = NUMPAD_CODE_TO_HOTKEY_KEY[suffix];
+        if (numpadMapped) {
+            return numpadMapped;
+        }
+
+        if (/^\d$/.test(suffix)) {
+            return `numpad${suffix}`;
+        }
+    }
+
+    return null;
+};