handleKeydown(event: KeyboardEvent) const pressed = this.normalizeEvent(event); for (const binding of this.bindings.values()) binding.context === this.activeContext) ) if (binding.preventDefault) event.preventDefault(); this.trigger(binding.id); break;
setContext(context: string) this.activeContext = context;
private normalizeKeyString(keys: string): string return keys.toLowerCase().replace(/\s/g, ""); keybinding
private matches(pressed: string, bindingKeys: string[]): boolean return bindingKeys.some(k => this.normalizeKeyString(k) === pressed);
remap(id: string, newKeys: string[]) const binding = this.bindings.get(id); if (binding) binding.userKeys = newKeys; handleKeydown(event: KeyboardEvent) const pressed = this
function useKeybinding(id: string, callback: () => void, deps: any[] = []) const manager = useKeybindingManager(); // from context useEffect(() => manager.on(id, callback); return () => manager.off(id, callback); , [id, callback, ...deps]);
type KeybindingMap = Record<string, Keybinding>; | Feature | Description | |---------|-------------| | Register | Add keybinding to a manager | | Unregister | Remove on component unmount | | Listen | Global keyboard event listener | | Parse keys | Normalize Ctrl , Shift , Alt , Meta + key | | Match | Compare pressed keys against stored bindings | | Override | Allow user to set new combination | | Conflict resolution | Warn if same combo assigned twice | | Context switching | Enable/disable sets per UI mode | | Export/Import | Save/load user bindings as JSON | 4. Implementation Example (TypeScript + React) 4.1 Keybinding Manager class KeybindingManager private bindings: Map<string, Keybinding> = new Map(); private activeContext: string = "global"; private listeners: Map<string, Set<() => void>> = new Map(); register(binding: Keybinding) this.bindings.set(binding.id, binding); if (binding.defaultKeys) this.addBindingToLookup(binding); setContext(context: string) this.activeContext = context
on(id: string, callback: () => void) if (!this.listeners.has(id)) this.listeners.set(id, new Set()); this.listeners.get(id)!.add(callback);