fix: correct keyboard shortcut modifier matching logic

The previous implementation had inverted logic that prevented keyboard
shortcuts from working. The check `shortcut.ctrl ? event.ctrlKey : !event.ctrlKey`
meant that if ctrl wasn't specified, it required ctrl to NOT be pressed,
which broke shortcuts with only meta keys.

**Changes:**
- Fix modifier matching: only check modifiers that are explicitly required (=== true)
- Add check to prevent unwanted modifiers (e.g., if only meta+c, reject ctrl+meta+c)
- Improve cross-platform meta/cmd key handling (Mac uses metaKey, Windows/Linux uses ctrlKey)
- Allow meta key to permit ctrl on non-Mac platforms (meta is treated as ctrl equivalent)

**Now working shortcuts in playground:**
- Cmd/Ctrl+C: Copy color to clipboard
- Cmd/Ctrl+S: Share color (copy URL)
- Cmd/Ctrl+R: Generate random color

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
valknarness
2025-11-07 16:22:42 +01:00
parent 0d03156e04
commit 638ba67189

View File

@@ -36,22 +36,37 @@ export function useKeyboard(shortcuts: KeyboardShortcut[]) {
const handleKeyDown = (event: KeyboardEvent) => { const handleKeyDown = (event: KeyboardEvent) => {
for (const shortcut of shortcuts) { for (const shortcut of shortcuts) {
const keyMatches = event.key.toLowerCase() === shortcut.key.toLowerCase(); const keyMatches = event.key.toLowerCase() === shortcut.key.toLowerCase();
const ctrlMatches = shortcut.ctrl ? event.ctrlKey : !event.ctrlKey;
const shiftMatches = shortcut.shift ? event.shiftKey : !event.shiftKey;
const altMatches = shortcut.alt ? event.altKey : !event.altKey;
const metaMatches = shortcut.meta ? event.metaKey : !event.metaKey;
// On Windows/Linux, treat meta as ctrl for convenience // Check if required modifiers match (only check if explicitly required)
const modifierMatches = shortcut.meta const ctrlMatches = shortcut.ctrl === true ? event.ctrlKey : true;
? event.metaKey || (event.ctrlKey && !navigator.platform.includes('Mac')) const shiftMatches = shortcut.shift === true ? event.shiftKey : true;
: metaMatches; const altMatches = shortcut.alt === true ? event.altKey : true;
// Handle meta/cmd key with cross-platform support
let metaMatches = true;
if (shortcut.meta === true) {
// On Mac: require Cmd key
// On Windows/Linux: accept Ctrl key as Cmd equivalent
const isMac = navigator.platform.includes('Mac');
metaMatches = isMac ? event.metaKey : event.ctrlKey;
}
// Ensure unwanted modifiers are not pressed (unless explicitly required)
const noExtraCtrl = shortcut.ctrl === true || shortcut.meta === true || !event.ctrlKey;
const noExtraShift = shortcut.shift === true || !event.shiftKey;
const noExtraAlt = shortcut.alt === true || !event.altKey;
const noExtraMeta = shortcut.meta === true || !event.metaKey;
if ( if (
keyMatches && keyMatches &&
ctrlMatches && ctrlMatches &&
shiftMatches && shiftMatches &&
altMatches && altMatches &&
modifierMatches metaMatches &&
noExtraCtrl &&
noExtraShift &&
noExtraAlt &&
noExtraMeta
) { ) {
event.preventDefault(); event.preventDefault();
shortcut.handler(event); shortcut.handler(event);