UseKeypress

1'use client';
2 
3import { useCallback, useEffect, useMemo, useRef } from 'react';
4 
5interface UseKeyboardOptions {
6  combo: string | string[];
7  callback: (event: KeyboardEvent) => void;
8  preventDefault?: boolean;
9  target?: HTMLElement | null;
10}
11 
12function normalizeCombo(combo: string): string {
13  const parts = combo
14    .toLowerCase()
15    .split('+')
16    .map((p) => p.trim());
17 
18  const modifiers = ['ctrl', 'alt', 'shift', 'meta'];
19  const keys: string[] = [];
20  const mods: string[] = [];
21 
22  for (const part of parts) {
23    if (modifiers.includes(part)) {
24      mods.push(part);
25    } else {
26      keys.push(part);
27    }
28  }
29 
30  // Sort modifiers for consistent comparison
31  mods.sort((a, b) => modifiers.indexOf(a) - modifiers.indexOf(b));
32  return [...mods, ...keys].join('+');
33}
34 
35function eventMatchesCombo(
36  event: KeyboardEvent,
37  normalizedCombo: string,
38): boolean {
39  const modifiers = ['ctrl', 'alt', 'shift', 'meta'];
40  const eventMods = [
41    event.ctrlKey ? 'ctrl' : null,
42    event.altKey ? 'alt' : null,
43    event.shiftKey ? 'shift' : null,
44    event.metaKey ? 'meta' : null,
45  ].filter(Boolean) as string[];
46 
47  const key = event.key.toLowerCase();
48  const comboParts = normalizedCombo.split('+');
49  const comboMods = comboParts.filter((p) => modifiers.includes(p));
50  const comboKey = comboParts.find((p) => !modifiers.includes(p));
51 
52  // All modifiers in combo must be pressed
53  if (comboMods.length !== eventMods.length) return false;
54 
55  for (const mod of comboMods) {
56    if (!eventMods.includes(mod)) return false;
57  }
58 
59  // Key must match
60  return key === comboKey;
61}
62 
63export function useKeypress({
64  combo,
65  callback,
66  preventDefault = false,
67  target,
68}: UseKeyboardOptions) {
69  const callbackRef = useRef(callback);
70 
71  useEffect(() => {
72    callbackRef.current = callback;
73  }, [callback]);
74 
75  // Memoize normalized combos for performance
76  const normalizedCombos = useMemo(() => {
77    const combos = Array.isArray(combo) ? combo : [combo];
78    return combos.map(normalizeCombo);
79  }, [combo]);
80 
81  // Memoize handler to avoid unnecessary re-attachments
82  const handler = useCallback(
83    (event: Event) => {
84      const keyboardEvent = event as KeyboardEvent;
85      for (const normCombo of normalizedCombos) {
86        if (eventMatchesCombo(keyboardEvent, normCombo)) {
87          if (preventDefault) keyboardEvent.preventDefault();
88          callbackRef.current(keyboardEvent);
89          break;
90        }
91      }
92    },
93    [normalizedCombos, preventDefault],
94  );
95 
96// … truncated