Add tab hotkey on table page (#457)

* wip

* wip

* - Added scopes on useHotkeys
- Use new EditableCellV2
- Implemented Recoil Scoped State with specific context
- Implemented soft focus position
- Factorized open/close editable cell
- Removed editable relation old components
- Broke down entity table into multiple components
- Added Recoil Scope by CellContext
- Added Recoil Scope by RowContext

* First working version

* Use a new EditableCellSoftFocusMode

* Fixed initialize soft focus

* Fixed enter mode

* Added TODO

* Fix

* Fixes

* Fix tests

* Fix lint

* Fixes

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

front/src/modules/ui/components/editable-cell/EditableCellSoftFocusMode.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { useRecoilState } from 'recoil';
+
+import { captureHotkeyTypeInFocusState } from '@/hotkeys/states/captureHotkeyTypeInFocusState';
+import { isNonTextWritingKey } from '@/utils/hotkeys/isNonTextWritingKey';
+
+import { useEditableCell } from './hooks/useCloseEditableCell';
+import { EditableCellDisplayMode } from './EditableCellDisplayMode';
+
+export function EditableCellSoftFocusMode({
+  children,
+}: React.PropsWithChildren<unknown>) {
+  const { closeEditableCell, openEditableCell } = useEditableCell();
+  const [captureHotkeyTypeInFocus] = useRecoilState(
+    captureHotkeyTypeInFocusState,
+  );
+
+  useHotkeys(
+    'enter',
+    () => {
+      openEditableCell();
+    },
+    {
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+      preventDefault: true,
+    },
+    [closeEditableCell],
+  );
+
+  useHotkeys(
+    '*',
+    (keyboardEvent) => {
+      const isWritingText =
+        !isNonTextWritingKey(keyboardEvent.key) &&
+        !keyboardEvent.ctrlKey &&
+        !keyboardEvent.metaKey;
+
+      if (!isWritingText) {
+        return;
+      }
+
+      if (captureHotkeyTypeInFocus) {
+        return;
+      }
+      openEditableCell();
+    },
+    {
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+      preventDefault: false,
+    },
+  );
+
+  return <EditableCellDisplayMode>{children}</EditableCellDisplayMode>;
+}