Activity Editor hot key scope management (#3568)

* on click focus on activity body editor

* acitivity editor hot key scope added

* classname prop added escape hot key scope call back added

* passing containerClassName prop for activity editor

* hot key scope added

* console log cleanup

* activity target escape hot key listener added

* tasks filter hot key scope refactor

* scope renaming refactor

* imports order linting refactor

* imports order linting refactor

* acitivity editor field focus state and body editor text listener added

* logic refactor removed state for activity editor fields focus

* removed conflicting click handler of inline cell creating new scope

* linting and formatting

* acitivity editor field focus state and body editor text listener added

* adding text at the end of line

* fix duplicate imports

* styling: gap fix activity editor

* format fix

* Added comments

* Fixes

* Remove useListenClickOutside, state, onFocus and onBlur

* Keep simplifying

* Complete review

* Fix lint

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx

@@ -73,7 +73,6 @@ export const ActivityTargetInlineCellEditMode = ({
 
   const handleSubmit = async (selectedRecords: ObjectRecordForSelect[]) => {
     closeEditableField();
-
     const activityTargetRecordsToDelete = activityTargetObjectRecords.filter(
       (activityTargetObjectRecord) =>
         !selectedRecords.some(

packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetsInlineCell.tsx

@@ -1,13 +1,15 @@
+import { Key } from 'ts-key-enum';
+
 import { ActivityTargetChips } from '@/activities/components/ActivityTargetChips';
 import { useActivityTargetObjectRecords } from '@/activities/hooks/useActivityTargetObjectRecords';
 import { ActivityTargetInlineCellEditMode } from '@/activities/inline-cell/components/ActivityTargetInlineCellEditMode';
 import { Activity } from '@/activities/types/Activity';
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { useFieldContext } from '@/object-record/hooks/useFieldContext';
+import { ActivityEditorHotkeyScope } from '@/activities/types/ActivityEditorHotkeyScope';
 import { RecordFieldInputScope } from '@/object-record/record-field/scopes/RecordFieldInputScope';
 import { RecordInlineCellContainer } from '@/object-record/record-inline-cell/components/RecordInlineCellContainer';
-import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
+import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
 import { IconArrowUpRight, IconPencil } from '@/ui/display/icon';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 
 type ActivityTargetsInlineCellProps = {
   activity: Activity;
@@ -19,40 +21,38 @@ export const ActivityTargetsInlineCell = ({
   const { activityTargetObjectRecords } = useActivityTargetObjectRecords({
     activityId: activity?.id ?? '',
   });
+  const { closeInlineCell } = useInlineCell();
 
-  const { FieldContextProvider } = useFieldContext({
-    objectNameSingular: CoreObjectNameSingular.Activity,
-    objectRecordId: activity?.id ?? '',
-    fieldMetadataName: 'activityTargets',
-    fieldPosition: 2,
-  });
-
-  if (!FieldContextProvider) return null;
+  useScopedHotkeys(
+    Key.Escape,
+    () => {
+      closeInlineCell();
+    },
+    ActivityEditorHotkeyScope.ActivityTargets,
+  );
 
   return (
     <RecordFieldInputScope recordFieldInputScopeId={activity?.id ?? ''}>
-      <FieldContextProvider>
-        <RecordInlineCellContainer
-          buttonIcon={IconPencil}
-          customEditHotkeyScope={{
-            scope: RelationPickerHotkeyScope.RelationPicker,
-          }}
-          IconLabel={IconArrowUpRight}
-          editModeContent={
-            <ActivityTargetInlineCellEditMode
-              activity={activity}
-              activityTargetObjectRecords={activityTargetObjectRecords}
-            />
-          }
-          label="Relations"
-          displayModeContent={
-            <ActivityTargetChips
-              activityTargetObjectRecords={activityTargetObjectRecords}
-            />
-          }
-          isDisplayModeContentEmpty={activityTargetObjectRecords.length === 0}
-        />
-      </FieldContextProvider>
+      <RecordInlineCellContainer
+        buttonIcon={IconPencil}
+        customEditHotkeyScope={{
+          scope: ActivityEditorHotkeyScope.ActivityTargets,
+        }}
+        IconLabel={IconArrowUpRight}
+        editModeContent={
+          <ActivityTargetInlineCellEditMode
+            activity={activity}
+            activityTargetObjectRecords={activityTargetObjectRecords}
+          />
+        }
+        label="Relations"
+        displayModeContent={
+          <ActivityTargetChips
+            activityTargetObjectRecords={activityTargetObjectRecords}
+          />
+        }
+        isDisplayModeContentEmpty={activityTargetObjectRecords.length === 0}
+      />
     </RecordFieldInputScope>
   );
 };