diff --git a/packages/keystrokes/src/browser-bindings.ts b/packages/keystrokes/src/browser-bindings.ts index 9bac192..e8d2000 100644 --- a/packages/keystrokes/src/browser-bindings.ts +++ b/packages/keystrokes/src/browser-bindings.ts @@ -134,19 +134,11 @@ export const browserOnKeyPressedBinder: OnKeyEventBinder< handler({ key: e.key, + aliases: [`@${e.code}`], originalEvent: e, composedPath: () => e.composedPath(), preventDefault: () => e.preventDefault(), }) - - if (e.code) { - handler({ - key: `@${e.code}`, - originalEvent: e, - composedPath: () => e.composedPath(), - preventDefault: () => e.preventDefault(), - }) - } } getDoc().addEventListener('keydown', handlerWrapper) return () => getDoc().removeEventListener('keydown', handlerWrapper) @@ -164,19 +156,11 @@ export const browserOnKeyReleasedBinder: OnKeyEventBinder< handler({ key: e.key, + aliases: [`@${e.code}`], originalEvent: e, composedPath: () => e.composedPath(), preventDefault: () => e.preventDefault(), }) - - if (e.code) { - handler({ - key: `@${e.code}`, - originalEvent: e, - composedPath: () => e.composedPath(), - preventDefault: () => e.preventDefault(), - }) - } } getDoc().addEventListener('keyup', handlerWrapper) return () => getDoc().removeEventListener('keyup', handlerWrapper) diff --git a/packages/keystrokes/src/handler-state.ts b/packages/keystrokes/src/handler-state.ts index 0e446cd..d9db721 100644 --- a/packages/keystrokes/src/handler-state.ts +++ b/packages/keystrokes/src/handler-state.ts @@ -1,5 +1,6 @@ export type KeyEvent = KeyEventProps & { key: string + aliases?: string[] originalEvent?: OriginalEvent } diff --git a/packages/keystrokes/src/key-combo-state.ts b/packages/keystrokes/src/key-combo-state.ts index 221a7c8..7506313 100644 --- a/packages/keystrokes/src/key-combo-state.ts +++ b/packages/keystrokes/src/key-combo-state.ts @@ -180,14 +180,22 @@ export class KeyComboState { executePressed(event: KeyEvent) { if (!this._isPressedWithFinalUnit?.has(event.key)) return this._handlerState.executePressed( - this._wrapEvent(this._lastActiveKeyPresses, { key: event.key, event }), + this._wrapEvent(this._lastActiveKeyPresses, { + key: event.key, + aliases: new Set(event.aliases), + event, + }), ) } executeReleased(event: KeyEvent) { if (!this._isPressedWithFinalUnit?.has(event.key)) return this._handlerState.executeReleased( - this._wrapEvent(this._lastActiveKeyPresses, { key: event.key, event }), + this._wrapEvent(this._lastActiveKeyPresses, { + key: event.key, + aliases: new Set(event.aliases), + event, + }), ) this._isPressedWithFinalUnit = null } @@ -245,7 +253,10 @@ export class KeyComboState { i < activeKeyIndex + previousUnit.length; i += 1 ) { - if (activeKeyPresses[i].key === key) { + if ( + activeKeyPresses[i].key === key || + activeKeyPresses[i].aliases.has(key) + ) { keyFound = true break } @@ -271,7 +282,10 @@ export class KeyComboState { i < activeKeyPresses.length && i < activeKeyIndex + unit.length; i += 1 ) { - if (activeKeyPresses[i].key === key) { + if ( + activeKeyPresses[i].key === key || + activeKeyPresses[i].aliases.has(key) + ) { keyFound = true break } diff --git a/packages/keystrokes/src/keystrokes.ts b/packages/keystrokes/src/keystrokes.ts index 4ed5028..544d301 100644 --- a/packages/keystrokes/src/keystrokes.ts +++ b/packages/keystrokes/src/keystrokes.ts @@ -27,6 +27,7 @@ export type KeyComboEventMapper< export type KeyPress = { key: string + aliases: Set event: KeyEvent } @@ -317,8 +318,12 @@ export class Keystrokes< event = { ...event, key: event.key.toLowerCase() } const remappedKey = this._keyRemap[event.key] - if (remappedKey) { - event.key = remappedKey + if (remappedKey) event.key = remappedKey + if (event.aliases) { + for (let i = 0; i < event.aliases.length; i += 1) { + const remappedAlias = this._keyRemap[event.aliases[i]] + if (remappedAlias) event.aliases[i] = remappedAlias + } } const keyPressHandlerStates = this._handlerStates[event.key] @@ -332,6 +337,7 @@ export class Keystrokes< } else { const keypress = { key: event.key, + aliases: new Set(event.aliases), event, } this._activeKeyMap.set(event.key, keypress) @@ -348,8 +354,12 @@ export class Keystrokes< event = { ...event, key: event.key.toLowerCase() } const remappedKey = this._keyRemap[event.key] - if (remappedKey) { - event.key = remappedKey + if (remappedKey) event.key = remappedKey + if (event.aliases) { + for (let i = 0; i < event.aliases.length; i += 1) { + const remappedAlias = this._keyRemap[event.aliases[i]] + if (remappedAlias) event.aliases[i] = remappedAlias + } } const keyPressHandlerStates = this._handlerStates[event.key] diff --git a/packages/keystrokes/src/tests/browser-bindings.spec.ts b/packages/keystrokes/src/tests/browser-bindings.spec.ts index 0dde0e1..bb04bf0 100644 --- a/packages/keystrokes/src/tests/browser-bindings.spec.ts +++ b/packages/keystrokes/src/tests/browser-bindings.spec.ts @@ -155,10 +155,11 @@ describe('browserOnKeyPressedBinder(handler) -> void', () => { handler(keydownEvent) expect(handlerStub).nthCalledWith( - 2, + 1, expect.objectContaining({ composedPath: expect.any(Function), - key: '@KeyA', + key: 'a', + aliases: ['@KeyA'], originalEvent: keydownEvent, }), ) @@ -226,7 +227,7 @@ describe('browserOnKeyPressedBinder(handler) -> void', () => { }), ) expect(keyPressedHandlerStub).nthCalledWith( - 3, + 2, expect.objectContaining({ composedPath: expect.any(Function), key: 'a',