File size: 2,788 Bytes
8486d85 d9a380f 8486d85 d9a380f 8486d85 d9a380f 8486d85 e5ed23c d9a380f 8486d85 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
import { useStore } from '@nanostores/react';
import { useEffect } from 'react';
import { shortcutsStore, type Shortcuts } from '~/lib/stores/settings';
class ShortcutEventEmitter {
#emitter = new EventTarget();
dispatch(type: keyof Shortcuts) {
this.#emitter.dispatchEvent(new Event(type));
}
on(type: keyof Shortcuts, cb: VoidFunction) {
this.#emitter.addEventListener(type, cb);
return () => {
this.#emitter.removeEventListener(type, cb);
};
}
}
export const shortcutEventEmitter = new ShortcutEventEmitter();
export function useShortcuts(): void {
const shortcuts = useStore(shortcutsStore);
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent): void => {
// Debug logging
console.log('Key pressed:', {
key: event.key,
code: event.code, // This gives us the physical key regardless of modifiers
ctrlKey: event.ctrlKey,
shiftKey: event.shiftKey,
altKey: event.altKey,
metaKey: event.metaKey,
});
/*
* Check for theme toggle shortcut first (Option + Command + Shift + D)
* Use event.code to check for the physical D key regardless of the character produced
*/
if (
event.code === 'KeyD' &&
event.metaKey && // Command (Mac) or Windows key
event.altKey && // Option (Mac) or Alt (Windows)
event.shiftKey &&
!event.ctrlKey
) {
event.preventDefault();
event.stopPropagation();
shortcuts.toggleTheme.action();
return;
}
// Handle other shortcuts
for (const name in shortcuts) {
const shortcut = shortcuts[name as keyof Shortcuts];
if (name === 'toggleTheme') {
continue;
} // Skip theme toggle as it's handled above
// For other shortcuts, check both key and code
const keyMatches =
shortcut.key.toLowerCase() === event.key.toLowerCase() || `Key${shortcut.key.toUpperCase()}` === event.code;
const modifiersMatch =
(shortcut.ctrlKey === undefined || shortcut.ctrlKey === event.ctrlKey) &&
(shortcut.metaKey === undefined || shortcut.metaKey === event.metaKey) &&
(shortcut.shiftKey === undefined || shortcut.shiftKey === event.shiftKey) &&
(shortcut.altKey === undefined || shortcut.altKey === event.altKey);
if (keyMatches && modifiersMatch) {
event.preventDefault();
event.stopPropagation();
shortcutEventEmitter.dispatch(name as keyof Shortcuts);
shortcut.action();
break;
}
}
};
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
}, [shortcuts]);
}
|