Merge pull request #31 from cjpais/keycode-fix

Fix the keycode bug

package.json

@@ -22,7 +22,6 @@
     "@tauri-apps/plugin-stronghold": "~2",
     "@tauri-apps/plugin-updater": "~2",
     "@tauri-apps/plugin-upload": "~2",
-    "keycode": "^2.2.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwindcss": "^4.0.2",

src/components/settings/KeyboardShortcuts.tsx

@@ -8,7 +8,7 @@ import {
 } from "../../lib/types";
 import { invoke } from "@tauri-apps/api/core";
 import { type } from "@tauri-apps/plugin-os";
-import keycode from "keycode";
+import { getKeyName } from "../../lib/utils/keyboard";
 import ResetIcon from "../icons/ResetIcon";
 
 export const KeyboardShortcuts: React.FC = () => {
@@ -95,7 +95,7 @@ export const KeyboardShortcuts: React.FC = () => {
       e.preventDefault();
 
       // Get the key and normalize it (unify left/right modifiers)
-      const rawKey = keycode(e).toLowerCase();
+      const rawKey = getKeyName(e);
       const key = normalizeKey(rawKey);
 
       console.log("You pressed", rawKey, "normalized to", key);
@@ -113,7 +113,7 @@ export const KeyboardShortcuts: React.FC = () => {
       e.preventDefault();
 
       // Get the key and normalize it
-      const rawKey = keycode(e).toLowerCase();
+      const rawKey = getKeyName(e);
       const key = normalizeKey(rawKey);
 
       // Remove from currently pressed keys

src/lib/utils/keyboard.ts

@@ -0,0 +1,131 @@
+/**
+ * Keyboard utility functions for handling keyboard events
+ */
+
+/**
+ * Extract a consistent key name from a KeyboardEvent
+ * This function replaces the keycode library and provides better support
+ * for extended function keys (F14+) and cross-platform compatibility
+ */
+export const getKeyName = (e: KeyboardEvent): string => {
+  // Handle special cases first
+  if (e.code) {
+    const code = e.code;
+
+    // Handle function keys (F1-F24)
+    if (code.match(/^F\d+$/)) {
+      return code.toLowerCase(); // F1, F2, ..., F14, F15, etc.
+    }
+
+    // Handle regular letter keys (KeyA -> a)
+    if (code.match(/^Key[A-Z]$/)) {
+      return code.replace("Key", "").toLowerCase();
+    }
+
+    // Handle digit keys (Digit0 -> 0)
+    if (code.match(/^Digit\d$/)) {
+      return code.replace("Digit", "");
+    }
+
+    // Handle numpad digit keys (Numpad0 -> numpad 0)
+    if (code.match(/^Numpad\d$/)) {
+      return code.replace("Numpad", "numpad ").toLowerCase();
+    }
+
+    // Handle modifier keys - normalize left/right variants
+    const modifierMap: Record<string, string> = {
+      ShiftLeft: "shift",
+      ShiftRight: "shift",
+      ControlLeft: "ctrl",
+      ControlRight: "ctrl",
+      AltLeft: "alt",
+      AltRight: "alt",
+      MetaLeft: "command",
+      MetaRight: "command",
+      OSLeft: "command",
+      OSRight: "command",
+      CapsLock: "caps lock",
+      Tab: "tab",
+      Enter: "enter",
+      Space: "space",
+      Backspace: "backspace",
+      Delete: "delete",
+      Escape: "esc",
+      ArrowUp: "up",
+      ArrowDown: "down",
+      ArrowLeft: "left",
+      ArrowRight: "right",
+      Home: "home",
+      End: "end",
+      PageUp: "page up",
+      PageDown: "page down",
+      Insert: "insert",
+      PrintScreen: "print screen",
+      ScrollLock: "scroll lock",
+      Pause: "pause",
+      ContextMenu: "menu",
+      NumpadMultiply: "numpad *",
+      NumpadAdd: "numpad +",
+      NumpadSubtract: "numpad -",
+      NumpadDecimal: "numpad .",
+      NumpadDivide: "numpad /",
+      NumLock: "num lock",
+    };
+
+    if (modifierMap[code]) {
+      return modifierMap[code];
+    }
+
+    // Handle punctuation and special characters
+    const punctuationMap: Record<string, string> = {
+      Semicolon: ";",
+      Equal: "=",
+      Comma: ",",
+      Minus: "-",
+      Period: ".",
+      Slash: "/",
+      Backquote: "`",
+      BracketLeft: "[",
+      Backslash: "\\",
+      BracketRight: "]",
+      Quote: "'",
+    };
+
+    if (punctuationMap[code]) {
+      return punctuationMap[code];
+    }
+
+    // For any other codes, try to convert to a reasonable format
+    return code.toLowerCase().replace(/([a-z])([A-Z])/g, "$1 $2");
+  }
+
+  // Fallback to e.key if e.code is not available
+  if (e.key) {
+    const key = e.key;
+
+    // Handle special key names
+    const keyMap: Record<string, string> = {
+      Control: "ctrl",
+      Alt: "alt",
+      Shift: "shift",
+      Meta: "command",
+      OS: "command",
+      CapsLock: "caps lock",
+      ArrowUp: "up",
+      ArrowDown: "down",
+      ArrowLeft: "left",
+      ArrowRight: "right",
+      Escape: "esc",
+      " ": "space",
+    };
+
+    if (keyMap[key]) {
+      return keyMap[key];
+    }
+
+    return key.toLowerCase();
+  }
+
+  // Last resort fallback
+  return `unknown-${e.keyCode || e.which || 0}`;
+};