import { useEffect } from 'react'; import { useHistoryStore } from '@/store/history-store'; /** * Keyboard shortcuts configuration */ interface KeyboardShortcut { key: string; ctrl?: boolean; shift?: boolean; alt?: boolean; meta?: boolean; handler: () => void; description: string; } /** * Hook to manage keyboard shortcuts */ export function useKeyboardShortcuts() { const { undo, redo, canUndo, canRedo } = useHistoryStore(); useEffect(() => { const shortcuts: KeyboardShortcut[] = [ { key: 'z', ctrl: true, shift: false, handler: () => { if (canUndo()) { undo(); } }, description: 'Undo', }, { key: 'z', ctrl: true, shift: true, handler: () => { if (canRedo()) { redo(); } }, description: 'Redo', }, { key: 'y', ctrl: true, handler: () => { if (canRedo()) { redo(); } }, description: 'Redo (alternative)', }, ]; const handleKeyDown = (e: KeyboardEvent) => { // Check if we're in an input field const target = e.target as HTMLElement; if ( target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable ) { return; } for (const shortcut of shortcuts) { const ctrlMatch = shortcut.ctrl ? (e.ctrlKey || e.metaKey) : !e.ctrlKey && !e.metaKey; const shiftMatch = shortcut.shift ? e.shiftKey : !e.shiftKey; const altMatch = shortcut.alt ? e.altKey : !e.altKey; if ( e.key.toLowerCase() === shortcut.key.toLowerCase() && ctrlMatch && shiftMatch && altMatch ) { e.preventDefault(); shortcut.handler(); break; } } }; window.addEventListener('keydown', handleKeyDown); return () => { window.removeEventListener('keydown', handleKeyDown); }; }, [undo, redo, canUndo, canRedo]); } /** * Get keyboard shortcut display string */ export function getShortcutDisplay(shortcut: { key: string; ctrl?: boolean; shift?: boolean; alt?: boolean; meta?: boolean; }): string { const parts: string[] = []; const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.platform); if (shortcut.ctrl || shortcut.meta) { parts.push(isMac ? '⌘' : 'Ctrl'); } if (shortcut.shift) { parts.push(isMac ? '⇧' : 'Shift'); } if (shortcut.alt) { parts.push(isMac ? '⌥' : 'Alt'); } parts.push(shortcut.key.toUpperCase()); return parts.join(isMac ? '' : '+'); }