diff --git a/.changeset/cold-icons-accept.md b/.changeset/cold-icons-accept.md new file mode 100644 index 000000000..c8e03eb51 --- /dev/null +++ b/.changeset/cold-icons-accept.md @@ -0,0 +1,5 @@ +--- +'@spotlightjs/overlay': patch +--- + +fix(overlay): Open overlay on Ctrl+F12 instead of Ctrl/Cmd+Shift+F12 diff --git a/packages/overlay/src/App.tsx b/packages/overlay/src/App.tsx index 51aaa5b5d..01e7da64e 100644 --- a/packages/overlay/src/App.tsx +++ b/packages/overlay/src/App.tsx @@ -26,11 +26,7 @@ export default function App({ const [triggerButtonCount, setTriggerButtonCount] = useState({ count: 0, severe: false }); const [isOpen, setOpen] = useState(openOnInit); - useKeyPress(['ctrlKey', 'shiftKey', 's'], () => { - setOpen(prev => !prev); - }); - - useKeyPress(['metaKey', 'shiftKey', 's'], () => { + useKeyPress(['ctrlKey', 'F12'], () => { setOpen(prev => !prev); }); diff --git a/packages/overlay/src/lib/useKeyPress.ts b/packages/overlay/src/lib/useKeyPress.ts index 1a83e1bff..4f1b1810f 100644 --- a/packages/overlay/src/lib/useKeyPress.ts +++ b/packages/overlay/src/lib/useKeyPress.ts @@ -9,11 +9,15 @@ import { useEffect } from 'react'; export default function useKeyPress(keys: string[], action: () => void, propagate = false) { useEffect(() => { function onKeyup(e: KeyboardEvent) { - if (!propagate) e.stopPropagation(); + if (!propagate) { + e.stopPropagation(); + } if ( keys.every((key: string) => { - if (key in e) return e[key as keyof KeyboardEvent]; + if (key in e) { + return e[key as keyof KeyboardEvent]; + } return e.key.toLowerCase() === key.toLowerCase(); }) ) { @@ -23,6 +27,8 @@ export default function useKeyPress(keys: string[], action: () => void, propagat window.addEventListener('keyup', onKeyup); - return () => window.removeEventListener('keyup', onKeyup); + return () => { + window.removeEventListener('keyup', onKeyup); + }; }, [keys, action, propagate]); }