diff --git a/front/.eslintrc.js b/front/.eslintrc.js index c0c06a4d5..114b83b78 100644 --- a/front/.eslintrc.js +++ b/front/.eslintrc.js @@ -87,6 +87,11 @@ module.exports = { 'group': ['@tabler/icons-react'], 'message': 'Icon imports are only allowed for `@/ui/icon`', }, + { + 'group': ['react-hotkeys-hook'], + "importNames": ["useHotkeys"], + 'message': 'Please use the custom wrapper: `useScopedHotkeys`', + }, ], }, ], diff --git a/front/src/modules/ui/input/components/AutosizeTextInput.tsx b/front/src/modules/ui/input/components/AutosizeTextInput.tsx index 978d4cb54..cf758591a 100644 --- a/front/src/modules/ui/input/components/AutosizeTextInput.tsx +++ b/front/src/modules/ui/input/components/AutosizeTextInput.tsx @@ -1,5 +1,4 @@ import { useState } from 'react'; -import { useHotkeys } from 'react-hotkeys-hook'; import { HotkeysEvent } from 'react-hotkeys-hook/dist/types'; import TextareaAutosize from 'react-textarea-autosize'; import styled from '@emotion/styled'; @@ -7,6 +6,9 @@ import styled from '@emotion/styled'; import { Button } from '@/ui/button/components/Button'; import { RoundedIconButton } from '@/ui/button/components/RoundedIconButton'; import { IconArrowRight } from '@/ui/icon/index'; +import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; + +import { InputHotkeyScope } from '../text/types/InputHotkeyScope'; const MAX_ROWS = 5; @@ -122,7 +124,7 @@ export const AutosizeTextInput = ({ const isSendButtonDisabled = !text; const words = text.split(/\s|\n/).filter((word) => word).length; - useHotkeys( + useScopedHotkeys( ['shift+enter', 'enter'], (event: KeyboardEvent, handler: HotkeysEvent) => { if (handler.shift || !isFocused) { @@ -135,14 +137,15 @@ export const AutosizeTextInput = ({ setText(''); } }, + InputHotkeyScope.TextInput, + [onValidate, text, setText, isFocused], { enableOnContentEditable: true, enableOnFormTags: true, }, - [onValidate, text, setText, isFocused], ); - useHotkeys( + useScopedHotkeys( 'esc', (event: KeyboardEvent) => { if (!isFocused) { @@ -153,11 +156,12 @@ export const AutosizeTextInput = ({ setText(''); }, + InputHotkeyScope.TextInput, + [onValidate, setText, isFocused], { enableOnContentEditable: true, enableOnFormTags: true, }, - [onValidate, setText, isFocused], ); const handleInputChange = (event: React.FormEvent) => { diff --git a/front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeys.ts b/front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeys.ts index b8c7ff31d..e579349c6 100644 --- a/front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeys.ts +++ b/front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeys.ts @@ -1,3 +1,4 @@ +// eslint-disable-next-line no-restricted-imports import { useHotkeys } from 'react-hotkeys-hook'; import { HotkeyCallback, diff --git a/front/src/modules/ui/utilities/hotkey/hooks/useSequenceScopedHotkeys.ts b/front/src/modules/ui/utilities/hotkey/hooks/useSequenceScopedHotkeys.ts index 46e4ec21d..2b4fa4805 100644 --- a/front/src/modules/ui/utilities/hotkey/hooks/useSequenceScopedHotkeys.ts +++ b/front/src/modules/ui/utilities/hotkey/hooks/useSequenceScopedHotkeys.ts @@ -1,3 +1,4 @@ +// eslint-disable-next-line no-restricted-imports import { Options, useHotkeys } from 'react-hotkeys-hook'; import { Keys } from 'react-hotkeys-hook/dist/types'; import { useRecoilState } from 'recoil';