shortcuts using useHotkeys from mantine/hooks (#907)

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Co-authored-by: Carlos Valente <carlosvalente@pm.me>

apps/client/src/common/components/input/text-input/TextInput.tsx

@@ -1,58 +0,0 @@
-import { useCallback, useRef } from 'react';
-import { Input, Textarea } from '@chakra-ui/react';
-
-import { EventEditorSubmitActions } from '../../../../features/rundown/event-editor/EventEditor';
-import { Size } from '../../../models/Util.type';
-
-import useReactiveTextInput from './useReactiveTextInput';
-
-interface BaseProps {
-  isTextArea?: boolean;
-  isFullHeight?: boolean;
-  size?: Size;
-  field: EventEditorSubmitActions;
-  initialText?: string;
-  submitHandler: (field: EventEditorSubmitActions, newValue: string) => void;
-}
-
-interface TextInputProps extends BaseProps {
-  isTextArea?: false;
-}
-
-type ResizeOptions = 'horizontal' | 'vertical' | 'none';
-
-interface TextAreaProps extends BaseProps {
-  isTextArea: true;
-  resize?: ResizeOptions;
-}
-
-type InputProps = TextInputProps | TextAreaProps;
-
-export default function TextInput(props: InputProps) {
-  const { isTextArea, isFullHeight, size = 'sm', field, initialText = '', submitHandler } = props;
-  const inputRef = useRef(null);
-
-  const submitCallback = useCallback((newValue: string) => submitHandler(field, newValue), [field, submitHandler]);
-
-  const textInputProps = useReactiveTextInput(initialText, submitCallback, { submitOnEnter: true });
-  const textAreaProps = useReactiveTextInput(initialText, submitCallback);
-
-  let resize: ResizeOptions = 'none';
-  if (isTextArea) {
-    resize = (props as TextAreaProps)?.resize ?? 'none';
-  }
-
-  return isTextArea ? (
-    <Textarea
-      ref={inputRef}
-      size={size}
-      resize={resize}
-      variant='ontime-filled'
-      {...textAreaProps}
-      style={{ height: isFullHeight ? '100%' : undefined }}
-      data-testid='input-textarea'
-    />
-  ) : (
-    <Input ref={inputRef} size={size} variant='ontime-filled' {...textInputProps} data-testid='input-textfield' />
-  );
-}

apps/client/src/common/components/input/text-input/useReactiveTextInput.tsx

@@ -1,17 +1,20 @@
-import { ChangeEvent, KeyboardEvent, useCallback, useEffect, useState } from 'react';
+import { ChangeEvent, KeyboardEvent, RefObject, useCallback, useEffect, useMemo, useState } from 'react';
+import { getHotkeyHandler, HotkeyItem } from '@mantine/hooks';
 
 interface UseReactiveTextInputReturn {
   value: string;
   onChange: (event: ChangeEvent) => void;
   onBlur: (event: ChangeEvent) => void;
-  onKeyDown: (event: KeyboardEvent) => void;
+  onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
 }
 
 export default function useReactiveTextInput(
   initialText: string,
   submitCallback: (newValue: string) => void,
+  ref: RefObject<HTMLInputElement>,
   options?: {
     submitOnEnter?: boolean;
+    submitOnCtrlEnter?: boolean;
   },
 ): UseReactiveTextInputReturn {
   const [text, setText] = useState<string>(initialText);
@@ -44,43 +47,45 @@ export default function useReactiveTextInput(
   const handleSubmit = useCallback(
     (valueToSubmit: string) => {
       // No need to update if it hasn't changed
-      if (valueToSubmit === initialText) {
-        return;
-      }
-      const cleanVal = valueToSubmit.trim();
-      submitCallback(cleanVal);
-
-      if (cleanVal !== valueToSubmit) {
-        setText(cleanVal);
+      if (valueToSubmit !== initialText) {
+        const cleanVal = valueToSubmit.trim();
+        submitCallback(cleanVal);
+        if (cleanVal !== valueToSubmit) {
+          setText(cleanVal);
+        }
       }
+      setTimeout(() => ref.current?.blur()); // Immediate timeout to ensure text is set before bluring
     },
-    [initialText, submitCallback],
+    [initialText, ref, submitCallback],
   );
 
   /**
-   * @description Handles common keys for submit and cancel
-   * @param {string} key
+   * @description Handles escape events
+   * @param {string} valueToSubmit
    */
-  const keyHandler = useCallback(
-    (key: string) => {
-      switch (key) {
-        case 'Escape':
-          setText(initialText);
-          break;
-        case 'Enter':
-          if (options?.submitOnEnter) {
-            handleSubmit(text);
-          }
-          break;
-      }
-    },
-    [initialText, options?.submitOnEnter, handleSubmit, text],
-  );
+  const handleEscape = useCallback(() => {
+    // No need to update if it hasn't changed
+    setText(initialText);
+    setTimeout(() => ref.current?.blur()); // Immediate timeout to ensure text is set before bluring
+  }, [initialText, ref]);
+
+  const keyHandler = useMemo(() => {
+    const hotKeys: HotkeyItem[] = [['Escape', handleEscape, { preventDefault: true }]];
+
+    if (options?.submitOnEnter) {
+      hotKeys.push(['Enter', () => handleSubmit(text)]);
+    }
+
+    if (options?.submitOnCtrlEnter) {
+      hotKeys.push(['mod + Enter', () => handleSubmit(text)]);
+    }
+    return getHotkeyHandler(hotKeys);
+  }, [handleEscape, handleSubmit, options?.submitOnCtrlEnter, options?.submitOnEnter, text]);
 
   return {
     value: text,
     onChange: (event: ChangeEvent) => handleChange((event.target as HTMLInputElement).value),
     onBlur: (event: ChangeEvent) => handleSubmit((event.target as HTMLInputElement).value),
-    onKeyDown: (event: KeyboardEvent) => keyHandler(event.key),
+    onKeyDown: keyHandler,
   };
 }