Feat/harmonize chips cell fields (#724)

* Wip

* Finished

* Fix lint

front/src/modules/ui/editable-field/hooks/useBindFieldHotkeyScope.ts

@@ -0,0 +1,52 @@
+import { useEffect } from 'react';
+
+import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
+import { isSameHotkeyScope } from '@/ui/hotkey/utils/isSameHotkeyScope';
+import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+
+import { customEditHotkeyScopeForFieldScopedState } from '../states/customEditHotkeyScopeForFieldScopedState';
+import { FieldContext } from '../states/FieldContext';
+import { parentHotkeyScopeForFieldScopedState } from '../states/parentHotkeyScopeForFieldScopedState';
+
+export function useBindFieldHotkeyScope({
+  customEditHotkeyScope,
+  parentHotkeyScope,
+}: {
+  customEditHotkeyScope?: HotkeyScope;
+  parentHotkeyScope?: HotkeyScope;
+}) {
+  const [customEditHotkeyScopeForField, setCustomEditHotkeyScopeForField] =
+    useRecoilScopedState(
+      customEditHotkeyScopeForFieldScopedState,
+      FieldContext,
+    );
+
+  const [parentHotkeyScopeForField, setParentHotkeyScopeForField] =
+    useRecoilScopedState(parentHotkeyScopeForFieldScopedState, FieldContext);
+
+  useEffect(() => {
+    if (
+      customEditHotkeyScope &&
+      !isSameHotkeyScope(customEditHotkeyScope, customEditHotkeyScopeForField)
+    ) {
+      setCustomEditHotkeyScopeForField(customEditHotkeyScope);
+    }
+  }, [
+    customEditHotkeyScope,
+    customEditHotkeyScopeForField,
+    setCustomEditHotkeyScopeForField,
+  ]);
+
+  useEffect(() => {
+    if (
+      parentHotkeyScope &&
+      !isSameHotkeyScope(parentHotkeyScope, parentHotkeyScopeForField)
+    ) {
+      setParentHotkeyScopeForField(parentHotkeyScope);
+    }
+  }, [
+    parentHotkeyScope,
+    parentHotkeyScopeForField,
+    setParentHotkeyScopeForField,
+  ]);
+}

front/src/modules/ui/editable-field/hooks/useEditableField.ts

@@ -1,33 +1,50 @@
 import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope';
-import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
 import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
 
+import { customEditHotkeyScopeForFieldScopedState } from '../states/customEditHotkeyScopeForFieldScopedState';
 import { FieldContext } from '../states/FieldContext';
 import { isFieldInEditModeScopedState } from '../states/isFieldInEditModeScopedState';
+import { parentHotkeyScopeForFieldScopedState } from '../states/parentHotkeyScopeForFieldScopedState';
 import { EditableFieldHotkeyScope } from '../types/EditableFieldHotkeyScope';
 
 // TODO: use atoms for hotkey scopes
-export function useEditableField(parentHotkeyScope?: HotkeyScope) {
+export function useEditableField() {
   const [isFieldInEditMode, setIsFieldInEditMode] = useRecoilScopedState(
     isFieldInEditModeScopedState,
     FieldContext,
   );
 
+  const [customEditHotkeyScopeForField] = useRecoilScopedState(
+    customEditHotkeyScopeForFieldScopedState,
+    FieldContext,
+  );
+
+  const [parentHotkeyScopeForField] = useRecoilScopedState(
+    parentHotkeyScopeForFieldScopedState,
+    FieldContext,
+  );
+
   const setHotkeyScope = useSetHotkeyScope();
 
   function closeEditableField() {
     setIsFieldInEditMode(false);
 
-    if (parentHotkeyScope) {
-      setHotkeyScope(parentHotkeyScope.scope, parentHotkeyScope.customScopes);
+    if (parentHotkeyScopeForField) {
+      setHotkeyScope(
+        parentHotkeyScopeForField.scope,
+        parentHotkeyScopeForField.customScopes,
+      );
     }
   }
 
-  function openEditableField(customHotkeyScope?: HotkeyScope) {
+  function openEditableField() {
     setIsFieldInEditMode(true);
 
-    if (customHotkeyScope) {
-      setHotkeyScope(customHotkeyScope.scope, customHotkeyScope.customScopes);
+    if (customEditHotkeyScopeForField) {
+      setHotkeyScope(
+        customEditHotkeyScopeForField.scope,
+        customEditHotkeyScopeForField.customScopes,
+      );
     } else {
       setHotkeyScope(EditableFieldHotkeyScope.EditableField);
     }