@tanstack/preact-hotkeys 0.5.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/HotkeysProvider.cjs.map +1 -1
- package/dist/HotkeysProvider.d.cts +2 -1
- package/dist/HotkeysProvider.d.ts +2 -1
- package/dist/HotkeysProvider.js.map +1 -1
- package/dist/index.cjs +2 -0
- package/dist/index.d.cts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/useHotkeySequence.cjs +10 -0
- package/dist/useHotkeySequence.cjs.map +1 -1
- package/dist/useHotkeySequence.d.cts +10 -0
- package/dist/useHotkeySequence.d.ts +10 -0
- package/dist/useHotkeySequence.js +10 -0
- package/dist/useHotkeySequence.js.map +1 -1
- package/dist/useHotkeySequenceRecorder.cjs +39 -0
- package/dist/useHotkeySequenceRecorder.cjs.map +1 -0
- package/dist/useHotkeySequenceRecorder.d.cts +19 -0
- package/dist/useHotkeySequenceRecorder.d.ts +19 -0
- package/dist/useHotkeySequenceRecorder.js +39 -0
- package/dist/useHotkeySequenceRecorder.js.map +1 -0
- package/package.json +2 -2
- package/src/HotkeysProvider.tsx +5 -1
- package/src/index.ts +1 -0
- package/src/useHotkeySequence.ts +10 -0
- package/src/useHotkeySequenceRecorder.ts +64 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HotkeysProvider.cjs","names":[],"sources":["../src/HotkeysProvider.tsx"],"sourcesContent":["import { createContext } from 'preact'\nimport { useContext, useMemo } from 'preact/hooks'\nimport type { ComponentChildren } from 'preact'\nimport type {
|
|
1
|
+
{"version":3,"file":"HotkeysProvider.cjs","names":[],"sources":["../src/HotkeysProvider.tsx"],"sourcesContent":["import { createContext } from 'preact'\nimport { useContext, useMemo } from 'preact/hooks'\nimport type { ComponentChildren } from 'preact'\nimport type {\n HotkeyRecorderOptions,\n HotkeySequenceRecorderOptions,\n} from '@tanstack/hotkeys'\nimport type { UseHotkeyOptions } from './useHotkey'\nimport type { UseHotkeySequenceOptions } from './useHotkeySequence'\n\nexport interface HotkeysProviderOptions {\n hotkey?: Partial<UseHotkeyOptions>\n hotkeyRecorder?: Partial<HotkeyRecorderOptions>\n hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>\n hotkeySequence?: Partial<UseHotkeySequenceOptions>\n}\n\ninterface HotkeysContextValue {\n defaultOptions: HotkeysProviderOptions\n}\n\nconst HotkeysContext = createContext<HotkeysContextValue | null>(null)\n\nexport interface HotkeysProviderProps {\n children: ComponentChildren\n defaultOptions?: HotkeysProviderOptions\n}\n\nconst DEFAULT_OPTIONS: HotkeysProviderOptions = {}\n\nexport function HotkeysProvider({\n children,\n defaultOptions = DEFAULT_OPTIONS,\n}: HotkeysProviderProps) {\n const contextValue: HotkeysContextValue = useMemo(\n () => ({\n defaultOptions,\n }),\n [defaultOptions],\n )\n\n return (\n <HotkeysContext.Provider value={contextValue}>\n {children}\n </HotkeysContext.Provider>\n )\n}\n\nexport function useHotkeysContext() {\n return useContext(HotkeysContext)\n}\n\nexport function useDefaultHotkeysOptions() {\n const context = useContext(HotkeysContext)\n return context?.defaultOptions ?? {}\n}\n"],"mappings":";;;;;AAqBA,MAAM,2CAA2D,KAAK;AAOtE,MAAM,kBAA0C,EAAE;AAElD,SAAgB,gBAAgB,EAC9B,UACA,iBAAiB,mBACM;CACvB,MAAM,gDACG,EACL,gBACD,GACD,CAAC,eAAe,CACjB;AAED,QACE,4CAAC,eAAe,UAAhB;EAAyB,OAAO;EAC7B;EACuB;;AAI9B,SAAgB,oBAAoB;AAClC,qCAAkB,eAAe;;AAGnC,SAAgB,2BAA2B;AAEzC,qCAD2B,eAAe,EAC1B,kBAAkB,EAAE"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { UseHotkeyOptions } from "./useHotkey.cjs";
|
|
2
2
|
import { UseHotkeySequenceOptions } from "./useHotkeySequence.cjs";
|
|
3
|
-
import { HotkeyRecorderOptions } from "@tanstack/hotkeys";
|
|
3
|
+
import { HotkeyRecorderOptions, HotkeySequenceRecorderOptions } from "@tanstack/hotkeys";
|
|
4
4
|
import * as preact from "preact";
|
|
5
5
|
import { ComponentChildren } from "preact";
|
|
6
6
|
|
|
@@ -8,6 +8,7 @@ import { ComponentChildren } from "preact";
|
|
|
8
8
|
interface HotkeysProviderOptions {
|
|
9
9
|
hotkey?: Partial<UseHotkeyOptions>;
|
|
10
10
|
hotkeyRecorder?: Partial<HotkeyRecorderOptions>;
|
|
11
|
+
hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>;
|
|
11
12
|
hotkeySequence?: Partial<UseHotkeySequenceOptions>;
|
|
12
13
|
}
|
|
13
14
|
interface HotkeysContextValue {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { UseHotkeyOptions } from "./useHotkey.js";
|
|
2
2
|
import { UseHotkeySequenceOptions } from "./useHotkeySequence.js";
|
|
3
|
-
import { HotkeyRecorderOptions } from "@tanstack/hotkeys";
|
|
3
|
+
import { HotkeyRecorderOptions, HotkeySequenceRecorderOptions } from "@tanstack/hotkeys";
|
|
4
4
|
import * as preact from "preact";
|
|
5
5
|
import { ComponentChildren } from "preact";
|
|
6
6
|
|
|
@@ -8,6 +8,7 @@ import { ComponentChildren } from "preact";
|
|
|
8
8
|
interface HotkeysProviderOptions {
|
|
9
9
|
hotkey?: Partial<UseHotkeyOptions>;
|
|
10
10
|
hotkeyRecorder?: Partial<HotkeyRecorderOptions>;
|
|
11
|
+
hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>;
|
|
11
12
|
hotkeySequence?: Partial<UseHotkeySequenceOptions>;
|
|
12
13
|
}
|
|
13
14
|
interface HotkeysContextValue {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HotkeysProvider.js","names":[],"sources":["../src/HotkeysProvider.tsx"],"sourcesContent":["import { createContext } from 'preact'\nimport { useContext, useMemo } from 'preact/hooks'\nimport type { ComponentChildren } from 'preact'\nimport type {
|
|
1
|
+
{"version":3,"file":"HotkeysProvider.js","names":[],"sources":["../src/HotkeysProvider.tsx"],"sourcesContent":["import { createContext } from 'preact'\nimport { useContext, useMemo } from 'preact/hooks'\nimport type { ComponentChildren } from 'preact'\nimport type {\n HotkeyRecorderOptions,\n HotkeySequenceRecorderOptions,\n} from '@tanstack/hotkeys'\nimport type { UseHotkeyOptions } from './useHotkey'\nimport type { UseHotkeySequenceOptions } from './useHotkeySequence'\n\nexport interface HotkeysProviderOptions {\n hotkey?: Partial<UseHotkeyOptions>\n hotkeyRecorder?: Partial<HotkeyRecorderOptions>\n hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>\n hotkeySequence?: Partial<UseHotkeySequenceOptions>\n}\n\ninterface HotkeysContextValue {\n defaultOptions: HotkeysProviderOptions\n}\n\nconst HotkeysContext = createContext<HotkeysContextValue | null>(null)\n\nexport interface HotkeysProviderProps {\n children: ComponentChildren\n defaultOptions?: HotkeysProviderOptions\n}\n\nconst DEFAULT_OPTIONS: HotkeysProviderOptions = {}\n\nexport function HotkeysProvider({\n children,\n defaultOptions = DEFAULT_OPTIONS,\n}: HotkeysProviderProps) {\n const contextValue: HotkeysContextValue = useMemo(\n () => ({\n defaultOptions,\n }),\n [defaultOptions],\n )\n\n return (\n <HotkeysContext.Provider value={contextValue}>\n {children}\n </HotkeysContext.Provider>\n )\n}\n\nexport function useHotkeysContext() {\n return useContext(HotkeysContext)\n}\n\nexport function useDefaultHotkeysOptions() {\n const context = useContext(HotkeysContext)\n return context?.defaultOptions ?? {}\n}\n"],"mappings":";;;;;AAqBA,MAAM,iBAAiB,cAA0C,KAAK;AAOtE,MAAM,kBAA0C,EAAE;AAElD,SAAgB,gBAAgB,EAC9B,UACA,iBAAiB,mBACM;CACvB,MAAM,eAAoC,eACjC,EACL,gBACD,GACD,CAAC,eAAe,CACjB;AAED,QACE,oBAAC,eAAe,UAAhB;EAAyB,OAAO;EAC7B;EACuB;;AAI9B,SAAgB,oBAAoB;AAClC,QAAO,WAAW,eAAe;;AAGnC,SAAgB,2BAA2B;AAEzC,QADgB,WAAW,eAAe,EAC1B,kBAAkB,EAAE"}
|
package/dist/index.cjs
CHANGED
|
@@ -7,6 +7,7 @@ const require_useHeldKeyCodes = require('./useHeldKeyCodes.cjs');
|
|
|
7
7
|
const require_useKeyHold = require('./useKeyHold.cjs');
|
|
8
8
|
const require_useHotkeySequence = require('./useHotkeySequence.cjs');
|
|
9
9
|
const require_useHotkeyRecorder = require('./useHotkeyRecorder.cjs');
|
|
10
|
+
const require_useHotkeySequenceRecorder = require('./useHotkeySequenceRecorder.cjs');
|
|
10
11
|
|
|
11
12
|
exports.HotkeysProvider = require_HotkeysProvider.HotkeysProvider;
|
|
12
13
|
exports.useDefaultHotkeysOptions = require_HotkeysProvider.useDefaultHotkeysOptions;
|
|
@@ -15,6 +16,7 @@ exports.useHeldKeys = require_useHeldKeys.useHeldKeys;
|
|
|
15
16
|
exports.useHotkey = require_useHotkey.useHotkey;
|
|
16
17
|
exports.useHotkeyRecorder = require_useHotkeyRecorder.useHotkeyRecorder;
|
|
17
18
|
exports.useHotkeySequence = require_useHotkeySequence.useHotkeySequence;
|
|
19
|
+
exports.useHotkeySequenceRecorder = require_useHotkeySequenceRecorder.useHotkeySequenceRecorder;
|
|
18
20
|
exports.useHotkeys = require_useHotkeys.useHotkeys;
|
|
19
21
|
exports.useHotkeysContext = require_HotkeysProvider.useHotkeysContext;
|
|
20
22
|
exports.useKeyHold = require_useKeyHold.useKeyHold;
|
package/dist/index.d.cts
CHANGED
|
@@ -6,5 +6,6 @@ import { useHeldKeys } from "./useHeldKeys.cjs";
|
|
|
6
6
|
import { useHeldKeyCodes } from "./useHeldKeyCodes.cjs";
|
|
7
7
|
import { useKeyHold } from "./useKeyHold.cjs";
|
|
8
8
|
import { PreactHotkeyRecorder, useHotkeyRecorder } from "./useHotkeyRecorder.cjs";
|
|
9
|
+
import { PreactHotkeySequenceRecorder, useHotkeySequenceRecorder } from "./useHotkeySequenceRecorder.cjs";
|
|
9
10
|
export * from "@tanstack/hotkeys";
|
|
10
|
-
export { HotkeysProvider, HotkeysProviderOptions, HotkeysProviderProps, PreactHotkeyRecorder, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceOptions, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeySequence, useHotkeys, useHotkeysContext, useKeyHold };
|
|
11
|
+
export { HotkeysProvider, HotkeysProviderOptions, HotkeysProviderProps, PreactHotkeyRecorder, PreactHotkeySequenceRecorder, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceOptions, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeySequence, useHotkeySequenceRecorder, useHotkeys, useHotkeysContext, useKeyHold };
|
package/dist/index.d.ts
CHANGED
|
@@ -6,5 +6,6 @@ import { useHeldKeys } from "./useHeldKeys.js";
|
|
|
6
6
|
import { useHeldKeyCodes } from "./useHeldKeyCodes.js";
|
|
7
7
|
import { useKeyHold } from "./useKeyHold.js";
|
|
8
8
|
import { PreactHotkeyRecorder, useHotkeyRecorder } from "./useHotkeyRecorder.js";
|
|
9
|
+
import { PreactHotkeySequenceRecorder, useHotkeySequenceRecorder } from "./useHotkeySequenceRecorder.js";
|
|
9
10
|
export * from "@tanstack/hotkeys";
|
|
10
|
-
export { HotkeysProvider, HotkeysProviderOptions, HotkeysProviderProps, PreactHotkeyRecorder, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceOptions, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeySequence, useHotkeys, useHotkeysContext, useKeyHold };
|
|
11
|
+
export { HotkeysProvider, HotkeysProviderOptions, HotkeysProviderProps, PreactHotkeyRecorder, PreactHotkeySequenceRecorder, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceOptions, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeySequence, useHotkeySequenceRecorder, useHotkeys, useHotkeysContext, useKeyHold };
|
package/dist/index.js
CHANGED
|
@@ -6,7 +6,8 @@ import { useHeldKeyCodes } from "./useHeldKeyCodes.js";
|
|
|
6
6
|
import { useKeyHold } from "./useKeyHold.js";
|
|
7
7
|
import { useHotkeySequence } from "./useHotkeySequence.js";
|
|
8
8
|
import { useHotkeyRecorder } from "./useHotkeyRecorder.js";
|
|
9
|
+
import { useHotkeySequenceRecorder } from "./useHotkeySequenceRecorder.js";
|
|
9
10
|
|
|
10
11
|
export * from "@tanstack/hotkeys"
|
|
11
12
|
|
|
12
|
-
export { HotkeysProvider, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeySequence, useHotkeys, useHotkeysContext, useKeyHold };
|
|
13
|
+
export { HotkeysProvider, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeySequence, useHotkeySequenceRecorder, useHotkeys, useHotkeysContext, useKeyHold };
|
|
@@ -10,6 +10,11 @@ let preact_hooks = require("preact/hooks");
|
|
|
10
10
|
* This hook allows you to register multi-key sequences like 'g g' or 'd d'
|
|
11
11
|
* that trigger when the full sequence is pressed within a timeout.
|
|
12
12
|
*
|
|
13
|
+
* Each step may include modifiers. You can chain the same modifier across
|
|
14
|
+
* steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,
|
|
15
|
+
* Control, Alt, or Meta pressed alone) are ignored while matching—they do not
|
|
16
|
+
* advance the sequence or reset progress.
|
|
17
|
+
*
|
|
13
18
|
* @param sequence - Array of hotkey strings that form the sequence
|
|
14
19
|
* @param callback - Function to call when the sequence is completed
|
|
15
20
|
* @param options - Options for the sequence behavior
|
|
@@ -32,6 +37,11 @@ let preact_hooks = require("preact/hooks");
|
|
|
32
37
|
* deleteInnerWord()
|
|
33
38
|
* }, { timeout: 500 })
|
|
34
39
|
*
|
|
40
|
+
* // Same modifier on consecutive steps (bare Shift between chords is ignored)
|
|
41
|
+
* useHotkeySequence(['Shift+R', 'Shift+T'], () => {
|
|
42
|
+
* nextAction()
|
|
43
|
+
* })
|
|
44
|
+
*
|
|
35
45
|
* return <div>...</div>
|
|
36
46
|
* }
|
|
37
47
|
* ```
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHotkeySequence.cjs","names":["useDefaultHotkeysOptions","isRef"],"sources":["../src/useHotkeySequence.ts"],"sourcesContent":["import { useEffect, useRef } from 'preact/hooks'\nimport { formatHotkeySequence, getSequenceManager } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type { RefObject } from 'preact'\nimport type {\n HotkeyCallback,\n HotkeyCallbackContext,\n HotkeySequence,\n SequenceOptions,\n SequenceRegistrationHandle,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeySequenceOptions extends Omit<\n SequenceOptions,\n 'target'\n> {\n /**\n * The DOM element to attach the event listener to.\n * Can be a Preact ref, direct DOM element, or null.\n * Defaults to document.\n */\n target?:\n | RefObject<HTMLElement | null>\n | HTMLElement\n | Document\n | Window\n | null\n}\n\n/**\n * Preact hook for registering a keyboard shortcut sequence (Vim-style).\n *\n * This hook allows you to register multi-key sequences like 'g g' or 'd d'\n * that trigger when the full sequence is pressed within a timeout.\n *\n * @param sequence - Array of hotkey strings that form the sequence\n * @param callback - Function to call when the sequence is completed\n * @param options - Options for the sequence behavior\n *\n * @example\n * ```tsx\n * function VimEditor() {\n * // 'g g' to go to top\n * useHotkeySequence(['G', 'G'], () => {\n * scrollToTop()\n * })\n *\n * // 'd d' to delete line\n * useHotkeySequence(['D', 'D'], () => {\n * deleteLine()\n * })\n *\n * // 'd i w' to delete inner word\n * useHotkeySequence(['D', 'I', 'W'], () => {\n * deleteInnerWord()\n * }, { timeout: 500 })\n *\n * return <div>...</div>\n * }\n * ```\n */\nexport function useHotkeySequence(\n sequence: HotkeySequence,\n callback: HotkeyCallback,\n options: UseHotkeySequenceOptions = {},\n): void {\n const mergedOptions = {\n ...useDefaultHotkeysOptions().hotkeySequence,\n ...options,\n } as UseHotkeySequenceOptions\n\n const manager = getSequenceManager()\n\n // Stable ref for registration handle\n const registrationRef = useRef<SequenceRegistrationHandle | null>(null)\n\n // Refs to capture current values for use in effect without adding dependencies\n const callbackRef = useRef(callback)\n const optionsRef = useRef(mergedOptions)\n const managerRef = useRef(manager)\n\n // Update refs on every render\n callbackRef.current = callback\n optionsRef.current = mergedOptions\n managerRef.current = manager\n\n // Track previous target and sequence to detect changes requiring re-registration\n const prevTargetRef = useRef<HTMLElement | Document | Window | null>(null)\n const prevSequenceRef = useRef<string | null>(null)\n\n // Normalize to hotkey sequence string (join with spaces)\n const hotkeySequenceString = formatHotkeySequence(sequence)\n\n // Extract options without target (target is handled separately)\n const { target: _target, ...optionsWithoutTarget } = mergedOptions\n\n useEffect(() => {\n if (sequence.length === 0) {\n return\n }\n\n // Resolve target inside the effect so refs are already attached after mount\n const resolvedTarget = isRef(optionsRef.current.target)\n ? optionsRef.current.target.current\n : (optionsRef.current.target ??\n (typeof document !== 'undefined' ? document : null))\n\n // Skip if no valid target (SSR or ref still null)\n if (!resolvedTarget) {\n return\n }\n\n // Check if we need to re-register (target or sequence changed)\n const targetChanged =\n prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget\n const sequenceChanged =\n prevSequenceRef.current !== null &&\n prevSequenceRef.current !== hotkeySequenceString\n\n // If we have an active registration and target/sequence changed, unregister first\n if (\n registrationRef.current?.isActive &&\n (targetChanged || sequenceChanged)\n ) {\n registrationRef.current.unregister()\n registrationRef.current = null\n }\n\n // Register if needed (no active registration)\n if (!registrationRef.current || !registrationRef.current.isActive) {\n registrationRef.current = managerRef.current.register(\n sequence,\n (event, context) => callbackRef.current(event, context),\n {\n ...optionsRef.current,\n target: resolvedTarget,\n },\n )\n }\n\n // Update tracking refs\n prevTargetRef.current = resolvedTarget\n prevSequenceRef.current = hotkeySequenceString\n\n // Cleanup on unmount\n return () => {\n if (registrationRef.current?.isActive) {\n registrationRef.current.unregister()\n registrationRef.current = null\n }\n }\n }, [hotkeySequenceString, mergedOptions.enabled, sequence])\n\n // Sync callback and options on EVERY render (outside useEffect)\n if (registrationRef.current?.isActive) {\n registrationRef.current.callback = (\n event: KeyboardEvent,\n context: HotkeyCallbackContext,\n ) => callbackRef.current(event, context)\n registrationRef.current.setOptions(optionsWithoutTarget)\n }\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useHotkeySequence.cjs","names":["useDefaultHotkeysOptions","isRef"],"sources":["../src/useHotkeySequence.ts"],"sourcesContent":["import { useEffect, useRef } from 'preact/hooks'\nimport { formatHotkeySequence, getSequenceManager } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type { RefObject } from 'preact'\nimport type {\n HotkeyCallback,\n HotkeyCallbackContext,\n HotkeySequence,\n SequenceOptions,\n SequenceRegistrationHandle,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeySequenceOptions extends Omit<\n SequenceOptions,\n 'target'\n> {\n /**\n * The DOM element to attach the event listener to.\n * Can be a Preact ref, direct DOM element, or null.\n * Defaults to document.\n */\n target?:\n | RefObject<HTMLElement | null>\n | HTMLElement\n | Document\n | Window\n | null\n}\n\n/**\n * Preact hook for registering a keyboard shortcut sequence (Vim-style).\n *\n * This hook allows you to register multi-key sequences like 'g g' or 'd d'\n * that trigger when the full sequence is pressed within a timeout.\n *\n * Each step may include modifiers. You can chain the same modifier across\n * steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,\n * Control, Alt, or Meta pressed alone) are ignored while matching—they do not\n * advance the sequence or reset progress.\n *\n * @param sequence - Array of hotkey strings that form the sequence\n * @param callback - Function to call when the sequence is completed\n * @param options - Options for the sequence behavior\n *\n * @example\n * ```tsx\n * function VimEditor() {\n * // 'g g' to go to top\n * useHotkeySequence(['G', 'G'], () => {\n * scrollToTop()\n * })\n *\n * // 'd d' to delete line\n * useHotkeySequence(['D', 'D'], () => {\n * deleteLine()\n * })\n *\n * // 'd i w' to delete inner word\n * useHotkeySequence(['D', 'I', 'W'], () => {\n * deleteInnerWord()\n * }, { timeout: 500 })\n *\n * // Same modifier on consecutive steps (bare Shift between chords is ignored)\n * useHotkeySequence(['Shift+R', 'Shift+T'], () => {\n * nextAction()\n * })\n *\n * return <div>...</div>\n * }\n * ```\n */\nexport function useHotkeySequence(\n sequence: HotkeySequence,\n callback: HotkeyCallback,\n options: UseHotkeySequenceOptions = {},\n): void {\n const mergedOptions = {\n ...useDefaultHotkeysOptions().hotkeySequence,\n ...options,\n } as UseHotkeySequenceOptions\n\n const manager = getSequenceManager()\n\n // Stable ref for registration handle\n const registrationRef = useRef<SequenceRegistrationHandle | null>(null)\n\n // Refs to capture current values for use in effect without adding dependencies\n const callbackRef = useRef(callback)\n const optionsRef = useRef(mergedOptions)\n const managerRef = useRef(manager)\n\n // Update refs on every render\n callbackRef.current = callback\n optionsRef.current = mergedOptions\n managerRef.current = manager\n\n // Track previous target and sequence to detect changes requiring re-registration\n const prevTargetRef = useRef<HTMLElement | Document | Window | null>(null)\n const prevSequenceRef = useRef<string | null>(null)\n\n // Normalize to hotkey sequence string (join with spaces)\n const hotkeySequenceString = formatHotkeySequence(sequence)\n\n // Extract options without target (target is handled separately)\n const { target: _target, ...optionsWithoutTarget } = mergedOptions\n\n useEffect(() => {\n if (sequence.length === 0) {\n return\n }\n\n // Resolve target inside the effect so refs are already attached after mount\n const resolvedTarget = isRef(optionsRef.current.target)\n ? optionsRef.current.target.current\n : (optionsRef.current.target ??\n (typeof document !== 'undefined' ? document : null))\n\n // Skip if no valid target (SSR or ref still null)\n if (!resolvedTarget) {\n return\n }\n\n // Check if we need to re-register (target or sequence changed)\n const targetChanged =\n prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget\n const sequenceChanged =\n prevSequenceRef.current !== null &&\n prevSequenceRef.current !== hotkeySequenceString\n\n // If we have an active registration and target/sequence changed, unregister first\n if (\n registrationRef.current?.isActive &&\n (targetChanged || sequenceChanged)\n ) {\n registrationRef.current.unregister()\n registrationRef.current = null\n }\n\n // Register if needed (no active registration)\n if (!registrationRef.current || !registrationRef.current.isActive) {\n registrationRef.current = managerRef.current.register(\n sequence,\n (event, context) => callbackRef.current(event, context),\n {\n ...optionsRef.current,\n target: resolvedTarget,\n },\n )\n }\n\n // Update tracking refs\n prevTargetRef.current = resolvedTarget\n prevSequenceRef.current = hotkeySequenceString\n\n // Cleanup on unmount\n return () => {\n if (registrationRef.current?.isActive) {\n registrationRef.current.unregister()\n registrationRef.current = null\n }\n }\n }, [hotkeySequenceString, mergedOptions.enabled, sequence])\n\n // Sync callback and options on EVERY render (outside useEffect)\n if (registrationRef.current?.isActive) {\n registrationRef.current.callback = (\n event: KeyboardEvent,\n context: HotkeyCallbackContext,\n ) => callbackRef.current(event, context)\n registrationRef.current.setOptions(optionsWithoutTarget)\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEA,SAAgB,kBACd,UACA,UACA,UAAoC,EAAE,EAChC;CACN,MAAM,gBAAgB;EACpB,GAAGA,kDAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,qDAA8B;CAGpC,MAAM,2CAA4D,KAAK;CAGvE,MAAM,uCAAqB,SAAS;CACpC,MAAM,sCAAoB,cAAc;CACxC,MAAM,sCAAoB,QAAQ;AAGlC,aAAY,UAAU;AACtB,YAAW,UAAU;AACrB,YAAW,UAAU;CAGrB,MAAM,yCAA+D,KAAK;CAC1E,MAAM,2CAAwC,KAAK;CAGnD,MAAM,mEAA4C,SAAS;CAG3D,MAAM,EAAE,QAAQ,SAAS,GAAG,yBAAyB;AAErD,mCAAgB;AACd,MAAI,SAAS,WAAW,EACtB;EAIF,MAAM,iBAAiBC,oBAAM,WAAW,QAAQ,OAAO,GACnD,WAAW,QAAQ,OAAO,UACzB,WAAW,QAAQ,WACnB,OAAO,aAAa,cAAc,WAAW;AAGlD,MAAI,CAAC,eACH;EAIF,MAAM,gBACJ,cAAc,YAAY,QAAQ,cAAc,YAAY;EAC9D,MAAM,kBACJ,gBAAgB,YAAY,QAC5B,gBAAgB,YAAY;AAG9B,MACE,gBAAgB,SAAS,aACxB,iBAAiB,kBAClB;AACA,mBAAgB,QAAQ,YAAY;AACpC,mBAAgB,UAAU;;AAI5B,MAAI,CAAC,gBAAgB,WAAW,CAAC,gBAAgB,QAAQ,SACvD,iBAAgB,UAAU,WAAW,QAAQ,SAC3C,WACC,OAAO,YAAY,YAAY,QAAQ,OAAO,QAAQ,EACvD;GACE,GAAG,WAAW;GACd,QAAQ;GACT,CACF;AAIH,gBAAc,UAAU;AACxB,kBAAgB,UAAU;AAG1B,eAAa;AACX,OAAI,gBAAgB,SAAS,UAAU;AACrC,oBAAgB,QAAQ,YAAY;AACpC,oBAAgB,UAAU;;;IAG7B;EAAC;EAAsB,cAAc;EAAS;EAAS,CAAC;AAG3D,KAAI,gBAAgB,SAAS,UAAU;AACrC,kBAAgB,QAAQ,YACtB,OACA,YACG,YAAY,QAAQ,OAAO,QAAQ;AACxC,kBAAgB,QAAQ,WAAW,qBAAqB"}
|
|
@@ -16,6 +16,11 @@ interface UseHotkeySequenceOptions extends Omit<SequenceOptions, 'target'> {
|
|
|
16
16
|
* This hook allows you to register multi-key sequences like 'g g' or 'd d'
|
|
17
17
|
* that trigger when the full sequence is pressed within a timeout.
|
|
18
18
|
*
|
|
19
|
+
* Each step may include modifiers. You can chain the same modifier across
|
|
20
|
+
* steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,
|
|
21
|
+
* Control, Alt, or Meta pressed alone) are ignored while matching—they do not
|
|
22
|
+
* advance the sequence or reset progress.
|
|
23
|
+
*
|
|
19
24
|
* @param sequence - Array of hotkey strings that form the sequence
|
|
20
25
|
* @param callback - Function to call when the sequence is completed
|
|
21
26
|
* @param options - Options for the sequence behavior
|
|
@@ -38,6 +43,11 @@ interface UseHotkeySequenceOptions extends Omit<SequenceOptions, 'target'> {
|
|
|
38
43
|
* deleteInnerWord()
|
|
39
44
|
* }, { timeout: 500 })
|
|
40
45
|
*
|
|
46
|
+
* // Same modifier on consecutive steps (bare Shift between chords is ignored)
|
|
47
|
+
* useHotkeySequence(['Shift+R', 'Shift+T'], () => {
|
|
48
|
+
* nextAction()
|
|
49
|
+
* })
|
|
50
|
+
*
|
|
41
51
|
* return <div>...</div>
|
|
42
52
|
* }
|
|
43
53
|
* ```
|
|
@@ -16,6 +16,11 @@ interface UseHotkeySequenceOptions extends Omit<SequenceOptions, 'target'> {
|
|
|
16
16
|
* This hook allows you to register multi-key sequences like 'g g' or 'd d'
|
|
17
17
|
* that trigger when the full sequence is pressed within a timeout.
|
|
18
18
|
*
|
|
19
|
+
* Each step may include modifiers. You can chain the same modifier across
|
|
20
|
+
* steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,
|
|
21
|
+
* Control, Alt, or Meta pressed alone) are ignored while matching—they do not
|
|
22
|
+
* advance the sequence or reset progress.
|
|
23
|
+
*
|
|
19
24
|
* @param sequence - Array of hotkey strings that form the sequence
|
|
20
25
|
* @param callback - Function to call when the sequence is completed
|
|
21
26
|
* @param options - Options for the sequence behavior
|
|
@@ -38,6 +43,11 @@ interface UseHotkeySequenceOptions extends Omit<SequenceOptions, 'target'> {
|
|
|
38
43
|
* deleteInnerWord()
|
|
39
44
|
* }, { timeout: 500 })
|
|
40
45
|
*
|
|
46
|
+
* // Same modifier on consecutive steps (bare Shift between chords is ignored)
|
|
47
|
+
* useHotkeySequence(['Shift+R', 'Shift+T'], () => {
|
|
48
|
+
* nextAction()
|
|
49
|
+
* })
|
|
50
|
+
*
|
|
41
51
|
* return <div>...</div>
|
|
42
52
|
* }
|
|
43
53
|
* ```
|
|
@@ -10,6 +10,11 @@ import { useEffect, useRef } from "preact/hooks";
|
|
|
10
10
|
* This hook allows you to register multi-key sequences like 'g g' or 'd d'
|
|
11
11
|
* that trigger when the full sequence is pressed within a timeout.
|
|
12
12
|
*
|
|
13
|
+
* Each step may include modifiers. You can chain the same modifier across
|
|
14
|
+
* steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,
|
|
15
|
+
* Control, Alt, or Meta pressed alone) are ignored while matching—they do not
|
|
16
|
+
* advance the sequence or reset progress.
|
|
17
|
+
*
|
|
13
18
|
* @param sequence - Array of hotkey strings that form the sequence
|
|
14
19
|
* @param callback - Function to call when the sequence is completed
|
|
15
20
|
* @param options - Options for the sequence behavior
|
|
@@ -32,6 +37,11 @@ import { useEffect, useRef } from "preact/hooks";
|
|
|
32
37
|
* deleteInnerWord()
|
|
33
38
|
* }, { timeout: 500 })
|
|
34
39
|
*
|
|
40
|
+
* // Same modifier on consecutive steps (bare Shift between chords is ignored)
|
|
41
|
+
* useHotkeySequence(['Shift+R', 'Shift+T'], () => {
|
|
42
|
+
* nextAction()
|
|
43
|
+
* })
|
|
44
|
+
*
|
|
35
45
|
* return <div>...</div>
|
|
36
46
|
* }
|
|
37
47
|
* ```
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHotkeySequence.js","names":[],"sources":["../src/useHotkeySequence.ts"],"sourcesContent":["import { useEffect, useRef } from 'preact/hooks'\nimport { formatHotkeySequence, getSequenceManager } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type { RefObject } from 'preact'\nimport type {\n HotkeyCallback,\n HotkeyCallbackContext,\n HotkeySequence,\n SequenceOptions,\n SequenceRegistrationHandle,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeySequenceOptions extends Omit<\n SequenceOptions,\n 'target'\n> {\n /**\n * The DOM element to attach the event listener to.\n * Can be a Preact ref, direct DOM element, or null.\n * Defaults to document.\n */\n target?:\n | RefObject<HTMLElement | null>\n | HTMLElement\n | Document\n | Window\n | null\n}\n\n/**\n * Preact hook for registering a keyboard shortcut sequence (Vim-style).\n *\n * This hook allows you to register multi-key sequences like 'g g' or 'd d'\n * that trigger when the full sequence is pressed within a timeout.\n *\n * @param sequence - Array of hotkey strings that form the sequence\n * @param callback - Function to call when the sequence is completed\n * @param options - Options for the sequence behavior\n *\n * @example\n * ```tsx\n * function VimEditor() {\n * // 'g g' to go to top\n * useHotkeySequence(['G', 'G'], () => {\n * scrollToTop()\n * })\n *\n * // 'd d' to delete line\n * useHotkeySequence(['D', 'D'], () => {\n * deleteLine()\n * })\n *\n * // 'd i w' to delete inner word\n * useHotkeySequence(['D', 'I', 'W'], () => {\n * deleteInnerWord()\n * }, { timeout: 500 })\n *\n * return <div>...</div>\n * }\n * ```\n */\nexport function useHotkeySequence(\n sequence: HotkeySequence,\n callback: HotkeyCallback,\n options: UseHotkeySequenceOptions = {},\n): void {\n const mergedOptions = {\n ...useDefaultHotkeysOptions().hotkeySequence,\n ...options,\n } as UseHotkeySequenceOptions\n\n const manager = getSequenceManager()\n\n // Stable ref for registration handle\n const registrationRef = useRef<SequenceRegistrationHandle | null>(null)\n\n // Refs to capture current values for use in effect without adding dependencies\n const callbackRef = useRef(callback)\n const optionsRef = useRef(mergedOptions)\n const managerRef = useRef(manager)\n\n // Update refs on every render\n callbackRef.current = callback\n optionsRef.current = mergedOptions\n managerRef.current = manager\n\n // Track previous target and sequence to detect changes requiring re-registration\n const prevTargetRef = useRef<HTMLElement | Document | Window | null>(null)\n const prevSequenceRef = useRef<string | null>(null)\n\n // Normalize to hotkey sequence string (join with spaces)\n const hotkeySequenceString = formatHotkeySequence(sequence)\n\n // Extract options without target (target is handled separately)\n const { target: _target, ...optionsWithoutTarget } = mergedOptions\n\n useEffect(() => {\n if (sequence.length === 0) {\n return\n }\n\n // Resolve target inside the effect so refs are already attached after mount\n const resolvedTarget = isRef(optionsRef.current.target)\n ? optionsRef.current.target.current\n : (optionsRef.current.target ??\n (typeof document !== 'undefined' ? document : null))\n\n // Skip if no valid target (SSR or ref still null)\n if (!resolvedTarget) {\n return\n }\n\n // Check if we need to re-register (target or sequence changed)\n const targetChanged =\n prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget\n const sequenceChanged =\n prevSequenceRef.current !== null &&\n prevSequenceRef.current !== hotkeySequenceString\n\n // If we have an active registration and target/sequence changed, unregister first\n if (\n registrationRef.current?.isActive &&\n (targetChanged || sequenceChanged)\n ) {\n registrationRef.current.unregister()\n registrationRef.current = null\n }\n\n // Register if needed (no active registration)\n if (!registrationRef.current || !registrationRef.current.isActive) {\n registrationRef.current = managerRef.current.register(\n sequence,\n (event, context) => callbackRef.current(event, context),\n {\n ...optionsRef.current,\n target: resolvedTarget,\n },\n )\n }\n\n // Update tracking refs\n prevTargetRef.current = resolvedTarget\n prevSequenceRef.current = hotkeySequenceString\n\n // Cleanup on unmount\n return () => {\n if (registrationRef.current?.isActive) {\n registrationRef.current.unregister()\n registrationRef.current = null\n }\n }\n }, [hotkeySequenceString, mergedOptions.enabled, sequence])\n\n // Sync callback and options on EVERY render (outside useEffect)\n if (registrationRef.current?.isActive) {\n registrationRef.current.callback = (\n event: KeyboardEvent,\n context: HotkeyCallbackContext,\n ) => callbackRef.current(event, context)\n registrationRef.current.setOptions(optionsWithoutTarget)\n }\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useHotkeySequence.js","names":[],"sources":["../src/useHotkeySequence.ts"],"sourcesContent":["import { useEffect, useRef } from 'preact/hooks'\nimport { formatHotkeySequence, getSequenceManager } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type { RefObject } from 'preact'\nimport type {\n HotkeyCallback,\n HotkeyCallbackContext,\n HotkeySequence,\n SequenceOptions,\n SequenceRegistrationHandle,\n} from '@tanstack/hotkeys'\n\nexport interface UseHotkeySequenceOptions extends Omit<\n SequenceOptions,\n 'target'\n> {\n /**\n * The DOM element to attach the event listener to.\n * Can be a Preact ref, direct DOM element, or null.\n * Defaults to document.\n */\n target?:\n | RefObject<HTMLElement | null>\n | HTMLElement\n | Document\n | Window\n | null\n}\n\n/**\n * Preact hook for registering a keyboard shortcut sequence (Vim-style).\n *\n * This hook allows you to register multi-key sequences like 'g g' or 'd d'\n * that trigger when the full sequence is pressed within a timeout.\n *\n * Each step may include modifiers. You can chain the same modifier across\n * steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,\n * Control, Alt, or Meta pressed alone) are ignored while matching—they do not\n * advance the sequence or reset progress.\n *\n * @param sequence - Array of hotkey strings that form the sequence\n * @param callback - Function to call when the sequence is completed\n * @param options - Options for the sequence behavior\n *\n * @example\n * ```tsx\n * function VimEditor() {\n * // 'g g' to go to top\n * useHotkeySequence(['G', 'G'], () => {\n * scrollToTop()\n * })\n *\n * // 'd d' to delete line\n * useHotkeySequence(['D', 'D'], () => {\n * deleteLine()\n * })\n *\n * // 'd i w' to delete inner word\n * useHotkeySequence(['D', 'I', 'W'], () => {\n * deleteInnerWord()\n * }, { timeout: 500 })\n *\n * // Same modifier on consecutive steps (bare Shift between chords is ignored)\n * useHotkeySequence(['Shift+R', 'Shift+T'], () => {\n * nextAction()\n * })\n *\n * return <div>...</div>\n * }\n * ```\n */\nexport function useHotkeySequence(\n sequence: HotkeySequence,\n callback: HotkeyCallback,\n options: UseHotkeySequenceOptions = {},\n): void {\n const mergedOptions = {\n ...useDefaultHotkeysOptions().hotkeySequence,\n ...options,\n } as UseHotkeySequenceOptions\n\n const manager = getSequenceManager()\n\n // Stable ref for registration handle\n const registrationRef = useRef<SequenceRegistrationHandle | null>(null)\n\n // Refs to capture current values for use in effect without adding dependencies\n const callbackRef = useRef(callback)\n const optionsRef = useRef(mergedOptions)\n const managerRef = useRef(manager)\n\n // Update refs on every render\n callbackRef.current = callback\n optionsRef.current = mergedOptions\n managerRef.current = manager\n\n // Track previous target and sequence to detect changes requiring re-registration\n const prevTargetRef = useRef<HTMLElement | Document | Window | null>(null)\n const prevSequenceRef = useRef<string | null>(null)\n\n // Normalize to hotkey sequence string (join with spaces)\n const hotkeySequenceString = formatHotkeySequence(sequence)\n\n // Extract options without target (target is handled separately)\n const { target: _target, ...optionsWithoutTarget } = mergedOptions\n\n useEffect(() => {\n if (sequence.length === 0) {\n return\n }\n\n // Resolve target inside the effect so refs are already attached after mount\n const resolvedTarget = isRef(optionsRef.current.target)\n ? optionsRef.current.target.current\n : (optionsRef.current.target ??\n (typeof document !== 'undefined' ? document : null))\n\n // Skip if no valid target (SSR or ref still null)\n if (!resolvedTarget) {\n return\n }\n\n // Check if we need to re-register (target or sequence changed)\n const targetChanged =\n prevTargetRef.current !== null && prevTargetRef.current !== resolvedTarget\n const sequenceChanged =\n prevSequenceRef.current !== null &&\n prevSequenceRef.current !== hotkeySequenceString\n\n // If we have an active registration and target/sequence changed, unregister first\n if (\n registrationRef.current?.isActive &&\n (targetChanged || sequenceChanged)\n ) {\n registrationRef.current.unregister()\n registrationRef.current = null\n }\n\n // Register if needed (no active registration)\n if (!registrationRef.current || !registrationRef.current.isActive) {\n registrationRef.current = managerRef.current.register(\n sequence,\n (event, context) => callbackRef.current(event, context),\n {\n ...optionsRef.current,\n target: resolvedTarget,\n },\n )\n }\n\n // Update tracking refs\n prevTargetRef.current = resolvedTarget\n prevSequenceRef.current = hotkeySequenceString\n\n // Cleanup on unmount\n return () => {\n if (registrationRef.current?.isActive) {\n registrationRef.current.unregister()\n registrationRef.current = null\n }\n }\n }, [hotkeySequenceString, mergedOptions.enabled, sequence])\n\n // Sync callback and options on EVERY render (outside useEffect)\n if (registrationRef.current?.isActive) {\n registrationRef.current.callback = (\n event: KeyboardEvent,\n context: HotkeyCallbackContext,\n ) => callbackRef.current(event, context)\n registrationRef.current.setOptions(optionsWithoutTarget)\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEA,SAAgB,kBACd,UACA,UACA,UAAoC,EAAE,EAChC;CACN,MAAM,gBAAgB;EACpB,GAAG,0BAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,UAAU,oBAAoB;CAGpC,MAAM,kBAAkB,OAA0C,KAAK;CAGvE,MAAM,cAAc,OAAO,SAAS;CACpC,MAAM,aAAa,OAAO,cAAc;CACxC,MAAM,aAAa,OAAO,QAAQ;AAGlC,aAAY,UAAU;AACtB,YAAW,UAAU;AACrB,YAAW,UAAU;CAGrB,MAAM,gBAAgB,OAA+C,KAAK;CAC1E,MAAM,kBAAkB,OAAsB,KAAK;CAGnD,MAAM,uBAAuB,qBAAqB,SAAS;CAG3D,MAAM,EAAE,QAAQ,SAAS,GAAG,yBAAyB;AAErD,iBAAgB;AACd,MAAI,SAAS,WAAW,EACtB;EAIF,MAAM,iBAAiB,MAAM,WAAW,QAAQ,OAAO,GACnD,WAAW,QAAQ,OAAO,UACzB,WAAW,QAAQ,WACnB,OAAO,aAAa,cAAc,WAAW;AAGlD,MAAI,CAAC,eACH;EAIF,MAAM,gBACJ,cAAc,YAAY,QAAQ,cAAc,YAAY;EAC9D,MAAM,kBACJ,gBAAgB,YAAY,QAC5B,gBAAgB,YAAY;AAG9B,MACE,gBAAgB,SAAS,aACxB,iBAAiB,kBAClB;AACA,mBAAgB,QAAQ,YAAY;AACpC,mBAAgB,UAAU;;AAI5B,MAAI,CAAC,gBAAgB,WAAW,CAAC,gBAAgB,QAAQ,SACvD,iBAAgB,UAAU,WAAW,QAAQ,SAC3C,WACC,OAAO,YAAY,YAAY,QAAQ,OAAO,QAAQ,EACvD;GACE,GAAG,WAAW;GACd,QAAQ;GACT,CACF;AAIH,gBAAc,UAAU;AACxB,kBAAgB,UAAU;AAG1B,eAAa;AACX,OAAI,gBAAgB,SAAS,UAAU;AACrC,oBAAgB,QAAQ,YAAY;AACpC,oBAAgB,UAAU;;;IAG7B;EAAC;EAAsB,cAAc;EAAS;EAAS,CAAC;AAG3D,KAAI,gBAAgB,SAAS,UAAU;AACrC,kBAAgB,QAAQ,YACtB,OACA,YACG,YAAY,QAAQ,OAAO,QAAQ;AACxC,kBAAgB,QAAQ,WAAW,qBAAqB"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
const require_HotkeysProvider = require('./HotkeysProvider.cjs');
|
|
2
|
+
let _tanstack_hotkeys = require("@tanstack/hotkeys");
|
|
3
|
+
let preact_hooks = require("preact/hooks");
|
|
4
|
+
let _tanstack_preact_store = require("@tanstack/preact-store");
|
|
5
|
+
|
|
6
|
+
//#region src/useHotkeySequenceRecorder.ts
|
|
7
|
+
/**
|
|
8
|
+
* Preact hook for recording multi-chord sequences (Vim-style shortcuts).
|
|
9
|
+
*/
|
|
10
|
+
function useHotkeySequenceRecorder(options) {
|
|
11
|
+
const mergedOptions = {
|
|
12
|
+
...require_HotkeysProvider.useDefaultHotkeysOptions().hotkeySequenceRecorder,
|
|
13
|
+
...options
|
|
14
|
+
};
|
|
15
|
+
const recorderRef = (0, preact_hooks.useRef)(null);
|
|
16
|
+
if (!recorderRef.current) recorderRef.current = new _tanstack_hotkeys.HotkeySequenceRecorder(mergedOptions);
|
|
17
|
+
recorderRef.current.setOptions(mergedOptions);
|
|
18
|
+
const isRecording = (0, _tanstack_preact_store.useStore)(recorderRef.current.store, (state) => state.isRecording);
|
|
19
|
+
const steps = (0, _tanstack_preact_store.useStore)(recorderRef.current.store, (state) => state.steps);
|
|
20
|
+
const recordedSequence = (0, _tanstack_preact_store.useStore)(recorderRef.current.store, (state) => state.recordedSequence);
|
|
21
|
+
(0, preact_hooks.useEffect)(() => {
|
|
22
|
+
return () => {
|
|
23
|
+
recorderRef.current?.destroy();
|
|
24
|
+
};
|
|
25
|
+
}, []);
|
|
26
|
+
return {
|
|
27
|
+
isRecording,
|
|
28
|
+
steps,
|
|
29
|
+
recordedSequence,
|
|
30
|
+
startRecording: () => recorderRef.current?.start(),
|
|
31
|
+
stopRecording: () => recorderRef.current?.stop(),
|
|
32
|
+
cancelRecording: () => recorderRef.current?.cancel(),
|
|
33
|
+
commitRecording: () => recorderRef.current?.commit()
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
//#endregion
|
|
38
|
+
exports.useHotkeySequenceRecorder = useHotkeySequenceRecorder;
|
|
39
|
+
//# sourceMappingURL=useHotkeySequenceRecorder.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useHotkeySequenceRecorder.cjs","names":["useDefaultHotkeysOptions","HotkeySequenceRecorder"],"sources":["../src/useHotkeySequenceRecorder.ts"],"sourcesContent":["import { useEffect, useRef } from 'preact/hooks'\nimport { useStore } from '@tanstack/preact-store'\nimport { HotkeySequenceRecorder } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport type {\n HotkeySequence,\n HotkeySequenceRecorderOptions,\n} from '@tanstack/hotkeys'\n\nexport interface PreactHotkeySequenceRecorder {\n isRecording: boolean\n steps: HotkeySequence\n recordedSequence: HotkeySequence | null\n startRecording: () => void\n stopRecording: () => void\n cancelRecording: () => void\n commitRecording: () => void\n}\n\n/**\n * Preact hook for recording multi-chord sequences (Vim-style shortcuts).\n */\nexport function useHotkeySequenceRecorder(\n options: HotkeySequenceRecorderOptions,\n): PreactHotkeySequenceRecorder {\n const mergedOptions = {\n ...useDefaultHotkeysOptions().hotkeySequenceRecorder,\n ...options,\n } as HotkeySequenceRecorderOptions\n\n const recorderRef = useRef<HotkeySequenceRecorder | null>(null)\n\n if (!recorderRef.current) {\n recorderRef.current = new HotkeySequenceRecorder(mergedOptions)\n }\n\n recorderRef.current.setOptions(mergedOptions)\n\n const isRecording = useStore(\n recorderRef.current.store,\n (state) => state.isRecording,\n )\n const steps = useStore(recorderRef.current.store, (state) => state.steps)\n const recordedSequence = useStore(\n recorderRef.current.store,\n (state) => state.recordedSequence,\n )\n\n useEffect(() => {\n return () => {\n recorderRef.current?.destroy()\n }\n }, [])\n\n return {\n isRecording,\n steps,\n recordedSequence,\n startRecording: () => recorderRef.current?.start(),\n stopRecording: () => recorderRef.current?.stop(),\n cancelRecording: () => recorderRef.current?.cancel(),\n commitRecording: () => recorderRef.current?.commit(),\n }\n}\n"],"mappings":";;;;;;;;;AAsBA,SAAgB,0BACd,SAC8B;CAC9B,MAAM,gBAAgB;EACpB,GAAGA,kDAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,uCAAoD,KAAK;AAE/D,KAAI,CAAC,YAAY,QACf,aAAY,UAAU,IAAIC,yCAAuB,cAAc;AAGjE,aAAY,QAAQ,WAAW,cAAc;CAE7C,MAAM,mDACJ,YAAY,QAAQ,QACnB,UAAU,MAAM,YAClB;CACD,MAAM,6CAAiB,YAAY,QAAQ,QAAQ,UAAU,MAAM,MAAM;CACzE,MAAM,wDACJ,YAAY,QAAQ,QACnB,UAAU,MAAM,iBAClB;AAED,mCAAgB;AACd,eAAa;AACX,eAAY,SAAS,SAAS;;IAE/B,EAAE,CAAC;AAEN,QAAO;EACL;EACA;EACA;EACA,sBAAsB,YAAY,SAAS,OAAO;EAClD,qBAAqB,YAAY,SAAS,MAAM;EAChD,uBAAuB,YAAY,SAAS,QAAQ;EACpD,uBAAuB,YAAY,SAAS,QAAQ;EACrD"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { HotkeySequence, HotkeySequenceRecorderOptions } from "@tanstack/hotkeys";
|
|
2
|
+
|
|
3
|
+
//#region src/useHotkeySequenceRecorder.d.ts
|
|
4
|
+
interface PreactHotkeySequenceRecorder {
|
|
5
|
+
isRecording: boolean;
|
|
6
|
+
steps: HotkeySequence;
|
|
7
|
+
recordedSequence: HotkeySequence | null;
|
|
8
|
+
startRecording: () => void;
|
|
9
|
+
stopRecording: () => void;
|
|
10
|
+
cancelRecording: () => void;
|
|
11
|
+
commitRecording: () => void;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* Preact hook for recording multi-chord sequences (Vim-style shortcuts).
|
|
15
|
+
*/
|
|
16
|
+
declare function useHotkeySequenceRecorder(options: HotkeySequenceRecorderOptions): PreactHotkeySequenceRecorder;
|
|
17
|
+
//#endregion
|
|
18
|
+
export { PreactHotkeySequenceRecorder, useHotkeySequenceRecorder };
|
|
19
|
+
//# sourceMappingURL=useHotkeySequenceRecorder.d.cts.map
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { HotkeySequence, HotkeySequenceRecorderOptions } from "@tanstack/hotkeys";
|
|
2
|
+
|
|
3
|
+
//#region src/useHotkeySequenceRecorder.d.ts
|
|
4
|
+
interface PreactHotkeySequenceRecorder {
|
|
5
|
+
isRecording: boolean;
|
|
6
|
+
steps: HotkeySequence;
|
|
7
|
+
recordedSequence: HotkeySequence | null;
|
|
8
|
+
startRecording: () => void;
|
|
9
|
+
stopRecording: () => void;
|
|
10
|
+
cancelRecording: () => void;
|
|
11
|
+
commitRecording: () => void;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* Preact hook for recording multi-chord sequences (Vim-style shortcuts).
|
|
15
|
+
*/
|
|
16
|
+
declare function useHotkeySequenceRecorder(options: HotkeySequenceRecorderOptions): PreactHotkeySequenceRecorder;
|
|
17
|
+
//#endregion
|
|
18
|
+
export { PreactHotkeySequenceRecorder, useHotkeySequenceRecorder };
|
|
19
|
+
//# sourceMappingURL=useHotkeySequenceRecorder.d.ts.map
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { useDefaultHotkeysOptions } from "./HotkeysProvider.js";
|
|
2
|
+
import { HotkeySequenceRecorder } from "@tanstack/hotkeys";
|
|
3
|
+
import { useEffect, useRef } from "preact/hooks";
|
|
4
|
+
import { useStore } from "@tanstack/preact-store";
|
|
5
|
+
|
|
6
|
+
//#region src/useHotkeySequenceRecorder.ts
|
|
7
|
+
/**
|
|
8
|
+
* Preact hook for recording multi-chord sequences (Vim-style shortcuts).
|
|
9
|
+
*/
|
|
10
|
+
function useHotkeySequenceRecorder(options) {
|
|
11
|
+
const mergedOptions = {
|
|
12
|
+
...useDefaultHotkeysOptions().hotkeySequenceRecorder,
|
|
13
|
+
...options
|
|
14
|
+
};
|
|
15
|
+
const recorderRef = useRef(null);
|
|
16
|
+
if (!recorderRef.current) recorderRef.current = new HotkeySequenceRecorder(mergedOptions);
|
|
17
|
+
recorderRef.current.setOptions(mergedOptions);
|
|
18
|
+
const isRecording = useStore(recorderRef.current.store, (state) => state.isRecording);
|
|
19
|
+
const steps = useStore(recorderRef.current.store, (state) => state.steps);
|
|
20
|
+
const recordedSequence = useStore(recorderRef.current.store, (state) => state.recordedSequence);
|
|
21
|
+
useEffect(() => {
|
|
22
|
+
return () => {
|
|
23
|
+
recorderRef.current?.destroy();
|
|
24
|
+
};
|
|
25
|
+
}, []);
|
|
26
|
+
return {
|
|
27
|
+
isRecording,
|
|
28
|
+
steps,
|
|
29
|
+
recordedSequence,
|
|
30
|
+
startRecording: () => recorderRef.current?.start(),
|
|
31
|
+
stopRecording: () => recorderRef.current?.stop(),
|
|
32
|
+
cancelRecording: () => recorderRef.current?.cancel(),
|
|
33
|
+
commitRecording: () => recorderRef.current?.commit()
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
//#endregion
|
|
38
|
+
export { useHotkeySequenceRecorder };
|
|
39
|
+
//# sourceMappingURL=useHotkeySequenceRecorder.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useHotkeySequenceRecorder.js","names":[],"sources":["../src/useHotkeySequenceRecorder.ts"],"sourcesContent":["import { useEffect, useRef } from 'preact/hooks'\nimport { useStore } from '@tanstack/preact-store'\nimport { HotkeySequenceRecorder } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport type {\n HotkeySequence,\n HotkeySequenceRecorderOptions,\n} from '@tanstack/hotkeys'\n\nexport interface PreactHotkeySequenceRecorder {\n isRecording: boolean\n steps: HotkeySequence\n recordedSequence: HotkeySequence | null\n startRecording: () => void\n stopRecording: () => void\n cancelRecording: () => void\n commitRecording: () => void\n}\n\n/**\n * Preact hook for recording multi-chord sequences (Vim-style shortcuts).\n */\nexport function useHotkeySequenceRecorder(\n options: HotkeySequenceRecorderOptions,\n): PreactHotkeySequenceRecorder {\n const mergedOptions = {\n ...useDefaultHotkeysOptions().hotkeySequenceRecorder,\n ...options,\n } as HotkeySequenceRecorderOptions\n\n const recorderRef = useRef<HotkeySequenceRecorder | null>(null)\n\n if (!recorderRef.current) {\n recorderRef.current = new HotkeySequenceRecorder(mergedOptions)\n }\n\n recorderRef.current.setOptions(mergedOptions)\n\n const isRecording = useStore(\n recorderRef.current.store,\n (state) => state.isRecording,\n )\n const steps = useStore(recorderRef.current.store, (state) => state.steps)\n const recordedSequence = useStore(\n recorderRef.current.store,\n (state) => state.recordedSequence,\n )\n\n useEffect(() => {\n return () => {\n recorderRef.current?.destroy()\n }\n }, [])\n\n return {\n isRecording,\n steps,\n recordedSequence,\n startRecording: () => recorderRef.current?.start(),\n stopRecording: () => recorderRef.current?.stop(),\n cancelRecording: () => recorderRef.current?.cancel(),\n commitRecording: () => recorderRef.current?.commit(),\n }\n}\n"],"mappings":";;;;;;;;;AAsBA,SAAgB,0BACd,SAC8B;CAC9B,MAAM,gBAAgB;EACpB,GAAG,0BAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,cAAc,OAAsC,KAAK;AAE/D,KAAI,CAAC,YAAY,QACf,aAAY,UAAU,IAAI,uBAAuB,cAAc;AAGjE,aAAY,QAAQ,WAAW,cAAc;CAE7C,MAAM,cAAc,SAClB,YAAY,QAAQ,QACnB,UAAU,MAAM,YAClB;CACD,MAAM,QAAQ,SAAS,YAAY,QAAQ,QAAQ,UAAU,MAAM,MAAM;CACzE,MAAM,mBAAmB,SACvB,YAAY,QAAQ,QACnB,UAAU,MAAM,iBAClB;AAED,iBAAgB;AACd,eAAa;AACX,eAAY,SAAS,SAAS;;IAE/B,EAAE,CAAC;AAEN,QAAO;EACL;EACA;EACA;EACA,sBAAsB,YAAY,SAAS,OAAO;EAClD,qBAAqB,YAAY,SAAS,MAAM;EAChD,uBAAuB,YAAY,SAAS,QAAQ;EACpD,uBAAuB,YAAY,SAAS,QAAQ;EACrD"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/preact-hotkeys",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
4
4
|
"description": "Preact adapter for TanStack Hotkeys",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
],
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"@tanstack/preact-store": "^0.11.2",
|
|
43
|
-
"@tanstack/hotkeys": "0.
|
|
43
|
+
"@tanstack/hotkeys": "0.5.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@preact/preset-vite": "^2.10.5",
|
package/src/HotkeysProvider.tsx
CHANGED
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
import { createContext } from 'preact'
|
|
2
2
|
import { useContext, useMemo } from 'preact/hooks'
|
|
3
3
|
import type { ComponentChildren } from 'preact'
|
|
4
|
-
import type {
|
|
4
|
+
import type {
|
|
5
|
+
HotkeyRecorderOptions,
|
|
6
|
+
HotkeySequenceRecorderOptions,
|
|
7
|
+
} from '@tanstack/hotkeys'
|
|
5
8
|
import type { UseHotkeyOptions } from './useHotkey'
|
|
6
9
|
import type { UseHotkeySequenceOptions } from './useHotkeySequence'
|
|
7
10
|
|
|
8
11
|
export interface HotkeysProviderOptions {
|
|
9
12
|
hotkey?: Partial<UseHotkeyOptions>
|
|
10
13
|
hotkeyRecorder?: Partial<HotkeyRecorderOptions>
|
|
14
|
+
hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>
|
|
11
15
|
hotkeySequence?: Partial<UseHotkeySequenceOptions>
|
|
12
16
|
}
|
|
13
17
|
|
package/src/index.ts
CHANGED
package/src/useHotkeySequence.ts
CHANGED
|
@@ -34,6 +34,11 @@ export interface UseHotkeySequenceOptions extends Omit<
|
|
|
34
34
|
* This hook allows you to register multi-key sequences like 'g g' or 'd d'
|
|
35
35
|
* that trigger when the full sequence is pressed within a timeout.
|
|
36
36
|
*
|
|
37
|
+
* Each step may include modifiers. You can chain the same modifier across
|
|
38
|
+
* steps (e.g. `Shift+R` then `Shift+T`). Modifier-only keydown events (Shift,
|
|
39
|
+
* Control, Alt, or Meta pressed alone) are ignored while matching—they do not
|
|
40
|
+
* advance the sequence or reset progress.
|
|
41
|
+
*
|
|
37
42
|
* @param sequence - Array of hotkey strings that form the sequence
|
|
38
43
|
* @param callback - Function to call when the sequence is completed
|
|
39
44
|
* @param options - Options for the sequence behavior
|
|
@@ -56,6 +61,11 @@ export interface UseHotkeySequenceOptions extends Omit<
|
|
|
56
61
|
* deleteInnerWord()
|
|
57
62
|
* }, { timeout: 500 })
|
|
58
63
|
*
|
|
64
|
+
* // Same modifier on consecutive steps (bare Shift between chords is ignored)
|
|
65
|
+
* useHotkeySequence(['Shift+R', 'Shift+T'], () => {
|
|
66
|
+
* nextAction()
|
|
67
|
+
* })
|
|
68
|
+
*
|
|
59
69
|
* return <div>...</div>
|
|
60
70
|
* }
|
|
61
71
|
* ```
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { useEffect, useRef } from 'preact/hooks'
|
|
2
|
+
import { useStore } from '@tanstack/preact-store'
|
|
3
|
+
import { HotkeySequenceRecorder } from '@tanstack/hotkeys'
|
|
4
|
+
import { useDefaultHotkeysOptions } from './HotkeysProvider'
|
|
5
|
+
import type {
|
|
6
|
+
HotkeySequence,
|
|
7
|
+
HotkeySequenceRecorderOptions,
|
|
8
|
+
} from '@tanstack/hotkeys'
|
|
9
|
+
|
|
10
|
+
export interface PreactHotkeySequenceRecorder {
|
|
11
|
+
isRecording: boolean
|
|
12
|
+
steps: HotkeySequence
|
|
13
|
+
recordedSequence: HotkeySequence | null
|
|
14
|
+
startRecording: () => void
|
|
15
|
+
stopRecording: () => void
|
|
16
|
+
cancelRecording: () => void
|
|
17
|
+
commitRecording: () => void
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Preact hook for recording multi-chord sequences (Vim-style shortcuts).
|
|
22
|
+
*/
|
|
23
|
+
export function useHotkeySequenceRecorder(
|
|
24
|
+
options: HotkeySequenceRecorderOptions,
|
|
25
|
+
): PreactHotkeySequenceRecorder {
|
|
26
|
+
const mergedOptions = {
|
|
27
|
+
...useDefaultHotkeysOptions().hotkeySequenceRecorder,
|
|
28
|
+
...options,
|
|
29
|
+
} as HotkeySequenceRecorderOptions
|
|
30
|
+
|
|
31
|
+
const recorderRef = useRef<HotkeySequenceRecorder | null>(null)
|
|
32
|
+
|
|
33
|
+
if (!recorderRef.current) {
|
|
34
|
+
recorderRef.current = new HotkeySequenceRecorder(mergedOptions)
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
recorderRef.current.setOptions(mergedOptions)
|
|
38
|
+
|
|
39
|
+
const isRecording = useStore(
|
|
40
|
+
recorderRef.current.store,
|
|
41
|
+
(state) => state.isRecording,
|
|
42
|
+
)
|
|
43
|
+
const steps = useStore(recorderRef.current.store, (state) => state.steps)
|
|
44
|
+
const recordedSequence = useStore(
|
|
45
|
+
recorderRef.current.store,
|
|
46
|
+
(state) => state.recordedSequence,
|
|
47
|
+
)
|
|
48
|
+
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
return () => {
|
|
51
|
+
recorderRef.current?.destroy()
|
|
52
|
+
}
|
|
53
|
+
}, [])
|
|
54
|
+
|
|
55
|
+
return {
|
|
56
|
+
isRecording,
|
|
57
|
+
steps,
|
|
58
|
+
recordedSequence,
|
|
59
|
+
startRecording: () => recorderRef.current?.start(),
|
|
60
|
+
stopRecording: () => recorderRef.current?.stop(),
|
|
61
|
+
cancelRecording: () => recorderRef.current?.cancel(),
|
|
62
|
+
commitRecording: () => recorderRef.current?.commit(),
|
|
63
|
+
}
|
|
64
|
+
}
|