Keybinding [new] (2026)

handleKeydown(event: KeyboardEvent) const pressed = this.normalizeEvent(event); for (const binding of this.bindings.values())

remap(id: string, newKeys: string[]) const binding = this.bindings.get(id); if (binding) binding.userKeys = newKeys;

private trigger(id: string) const callbacks = this.listeners.get(id); callbacks?.forEach(cb => cb()); keybinding

private normalizeKeyString(keys: string): string return keys.toLowerCase().replace(/\s/g, "");

off(id: string, callback: () => void) this.listeners.get(id)?.delete(callback); handleKeydown(event: KeyboardEvent) const pressed = this

private normalizeEvent(e: KeyboardEvent): string const parts = []; if (e.ctrlKey) parts.push("ctrl"); if (e.shiftKey) parts.push("shift"); if (e.altKey) parts.push("alt"); if (e.metaKey) parts.push("meta"); parts.push(e.key.toLowerCase()); return parts.join("+");

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); newKeys: string[]) const binding = this.bindings.get(id)

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]);