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/features/cuesheet/cuesheet-table-elements/EditableCell.tsx

@@ -1,4 +1,5 @@
-import { ChangeEvent, memo, useCallback, useEffect, useState } from 'react';
+import { ChangeEvent, memo, useCallback, useEffect, useRef, useState } from 'react';
+import { getHotkeyHandler } from '@mantine/hooks';
 
 import { AutoTextArea } from '../../../common/components/input/auto-text-area/AutoTextArea';
 
@@ -12,12 +13,24 @@ const EditableCell = (props: EditableCellProps) => {
 
   // We need to keep and update the state of the cell normally
   const [value, setValue] = useState(initialValue);
-
+  const ref = useRef<HTMLAreaElement>();
   const onChange = useCallback((event: ChangeEvent<HTMLTextAreaElement>) => setValue(event.target.value), []);
 
   // We'll only update the external data when the input is blurred
   const onBlur = useCallback(() => handleUpdate(value), [handleUpdate, value]);
 
+  //TODO: maybe we can unify this with `useReactiveTextInput`
+  const onKeyDown = getHotkeyHandler([
+    ['mod + Enter', () => ref.current?.blur()],
+    [
+      'Escape',
+      () => {
+        setValue(initialValue);
+        setTimeout(() => ref.current?.blur());
+      },
+    ],
+  ]);
+
   // If the initialValue is changed external, sync it up with our state
   useEffect(() => {
     setValue(initialValue);
@@ -27,9 +40,11 @@ const EditableCell = (props: EditableCellProps) => {
     <AutoTextArea
       size='sm'
       value={value}
+      inputref={ref}
       onChange={onChange}
       onBlur={onBlur}
       rows={1}
+      onKeyDown={onKeyDown}
       transition='none'
       spellCheck={false}
       style={{ padding: 0 }}