diff --git a/packages/paste-core/components/keyboard-key/src/hooks.ts b/packages/paste-core/components/keyboard-key/src/hooks.ts index 648e2a7aa0..48e8049c47 100644 --- a/packages/paste-core/components/keyboard-key/src/hooks.ts +++ b/packages/paste-core/components/keyboard-key/src/hooks.ts @@ -7,37 +7,26 @@ export interface useKeyCombinationProps { onCombinationPress: () => void; disabled?: boolean; enablePressStyles?: boolean; - disableBrowserShortcuts?: boolean; } interface useKeyCombinationReturn extends Omit { activeKeys: string[]; } -interface useKeyCombinationsReturn{ +interface useKeyCombinationsReturn { activeKeys: string[]; } export interface useKeyCombinationsProps { - combinations: Omit[]; - disableBrowserShortcuts?: boolean; + combinations: Omit[]; } -const useKeyEvents = (disableBrowserShortcuts: boolean): { activeKeys: string[] } => { +const useKeyEvents = (): { activeKeys: string[] } => { const [activeKeys, setActiveKeys] = React.useState([]); const handleKeyDown = (e: KeyboardEvent): void => { if (!e.repeat) { setActiveKeys((prev) => { - // ignore any system combination triggers - if ( - disableBrowserShortcuts && - prev.find((k) => k === "Meta" || k === "Control") && - /^(?:(?!\b(Meta|Control)\b).)*$/i.test(e.key) - ) { - e.preventDefault(); - e.stopPropagation(); - } return Array.from(new Set([...prev, e.key])); }); } @@ -45,7 +34,7 @@ const useKeyEvents = (disableBrowserShortcuts: boolean): { activeKeys: string[] const handleKeyUp = (e: KeyboardEvent): void => { /** - * Due to a weird behavior on macOS we need to clear the set if the user pressed down the meta key and presses another key. + * Due to a weird behavior on macOS we need to clear the set if the user pressed down the meta key and presses another key. * https://stackoverflow.com/questions/11818637/why-does-javascript-drop-keyup-events-when-the-metakey-is-pressed-on-mac-browser * Otherwise the set will hold all ever pressed keys while the meta key is down which leads to wrong results. */ @@ -77,9 +66,8 @@ export const useKeyCombination = ({ onCombinationPress, disabled, enablePressStyles, - disableBrowserShortcuts = false, }: useKeyCombinationProps): useKeyCombinationReturn => { - const { activeKeys } = useKeyEvents(disableBrowserShortcuts); + const { activeKeys } = useKeyEvents(); React.useEffect(() => { const combinationMatch = stringArrayMatches(keys, activeKeys); @@ -92,11 +80,8 @@ export const useKeyCombination = ({ return { activeKeys, disabled, enablePressStyles }; }; -export const useKeyCombinations = ({ - combinations, - disableBrowserShortcuts = false, -}: useKeyCombinationsProps): useKeyCombinationsReturn => { - const { activeKeys } = useKeyEvents(disableBrowserShortcuts); +export const useKeyCombinations = ({ combinations }: useKeyCombinationsProps): useKeyCombinationsReturn => { + const { activeKeys } = useKeyEvents(); React.useEffect(() => { const combinationMatch = combinations.find((combos) => stringArrayMatches(combos.keys, activeKeys)); diff --git a/packages/paste-core/components/keyboard-key/stories/index.stories.tsx b/packages/paste-core/components/keyboard-key/stories/index.stories.tsx index 40eda3abc8..31078098af 100644 --- a/packages/paste-core/components/keyboard-key/stories/index.stories.tsx +++ b/packages/paste-core/components/keyboard-key/stories/index.stories.tsx @@ -92,6 +92,76 @@ export const ForcePressed = (): React.ReactElement => { ); }; +export const MultipleCombinations = (): React.ReactElement => { + const [textToDisplay, setTextToDisplay] = React.useState(""); + + const stateCtrB = useKeyCombination({ + keys: ["Control", "b"], + onCombinationPress: (): void => { + setTextToDisplay("Control + B pressed"); + }, + enablePressStyles: true, + }); + const stateCtrK = useKeyCombination({ + keys: ["Control", "k"], + onCombinationPress: (): void => { + setTextToDisplay("Control + K pressed"); + }, + enablePressStyles: true, + }); + const stateCmdB = useKeyCombination({ + keys: ["Meta", "b"], + onCombinationPress: (): void => { + setTextToDisplay("Cmd + B pressed"); + }, + enablePressStyles: true, + }); + const stateCmdK = useKeyCombination({ + keys: ["Meta", "k"], + onCombinationPress: (): void => { + setTextToDisplay("Cmd + K pressed"); + }, + enablePressStyles: true, + }); + const stateCmdShiftB = useKeyCombination({ + keys: ["Meta", "Shift", "p"], + onCombinationPress: (): void => { + setTextToDisplay("Cmd + Shift + P pressed"); + }, + enablePressStyles: true, + }); + + return ( + + + + Control + B + + + Control + K + + + Cmd + B + + + Cmd + K + + + Cmd + Shift + P + + +
+ Combination pressed: {textToDisplay} +
+ ); +}; + export const TriggerModal = (): React.ReactElement => { const [isOpen, setIsOpen] = React.useState(false); const state = useKeyCombination({