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/components/ActivityBodyEditor.tsx

@@ -2,17 +2,24 @@ import { useCallback, useEffect, useState } from 'react';
 import { BlockNoteEditor } from '@blocknote/core';
 import { useBlockNote } from '@blocknote/react';
 import styled from '@emotion/styled';
-import { isNonEmptyString } from '@sniptt/guards';
+import { isArray, isNonEmptyString } from '@sniptt/guards';
 import { useRecoilState } from 'recoil';
+import { Key } from 'ts-key-enum';
 import { useDebouncedCallback } from 'use-debounce';
+import { v4 } from 'uuid';
 
 import { useUpsertActivity } from '@/activities/hooks/useUpsertActivity';
 import { activityTitleHasBeenSetFamilyState } from '@/activities/states/activityTitleHasBeenSetFamilyState';
 import { Activity } from '@/activities/types/Activity';
+import { ActivityEditorHotkeyScope } from '@/activities/types/ActivityEditorHotkeyScope';
 import { useObjectMetadataItemOnly } from '@/object-metadata/hooks/useObjectMetadataItemOnly';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useModifyRecordFromCache } from '@/object-record/cache/hooks/useModifyRecordFromCache';
 import { BlockEditor } from '@/ui/input/editor/components/BlockEditor';
+import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritingKey';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { FileFolder, useUploadFileMutation } from '~/generated/graphql';
 
@@ -53,6 +60,10 @@ export const ActivityBodyEditor = ({
   const modifyActivityFromCache = useModifyRecordFromCache({
     objectMetadataItem: objectMetadataItemActivity,
   });
+  const {
+    goBackToPreviousHotkeyScope,
+    setHotkeyScopeAndMemorizePreviousScope,
+  } = usePreviousHotkeyScope();
 
   const { upsertActivity } = useUpsertActivity();
 
@@ -212,9 +223,93 @@ export const ActivityBodyEditor = ({
     }
   };
 
+  useScopedHotkeys(
+    Key.Escape,
+    () => {
+      editor.domElement?.blur();
+    },
+    ActivityEditorHotkeyScope.ActivityBody,
+  );
+
+  useScopedHotkeys(
+    '*',
+    (keyboardEvent) => {
+      if (keyboardEvent.key === Key.Escape) {
+        return;
+      }
+
+      const isWritingText =
+        !isNonTextWritingKey(keyboardEvent.key) &&
+        !keyboardEvent.ctrlKey &&
+        !keyboardEvent.metaKey;
+
+      if (!isWritingText) {
+        return;
+      }
+
+      keyboardEvent.preventDefault();
+      keyboardEvent.stopPropagation();
+      keyboardEvent.stopImmediatePropagation();
+
+      const blockIdentifier = editor.getTextCursorPosition().block;
+      const currentBlockContent = blockIdentifier?.content;
+
+      if (
+        currentBlockContent &&
+        isArray(currentBlockContent) &&
+        currentBlockContent.length === 0
+      ) {
+        // Empty block case
+        editor.updateBlock(blockIdentifier, {
+          content: keyboardEvent.key,
+        });
+        return;
+      }
+
+      if (
+        currentBlockContent &&
+        isArray(currentBlockContent) &&
+        currentBlockContent[0] &&
+        currentBlockContent[0].type === 'text'
+      ) {
+        // Text block case
+        editor.updateBlock(blockIdentifier, {
+          content: currentBlockContent[0].text + keyboardEvent.key,
+        });
+        return;
+      }
+
+      const newBlockId = v4();
+      const newBlock = {
+        id: newBlockId,
+        type: 'paragraph',
+        content: keyboardEvent.key,
+      };
+      editor.insertBlocks([newBlock], blockIdentifier, 'after');
+
+      editor.setTextCursorPosition(newBlockId, 'end');
+      editor.focus();
+    },
+    RightDrawerHotkeyScope.RightDrawer,
+  );
+
+  const handleBlockEditorFocus = () => {
+    setHotkeyScopeAndMemorizePreviousScope(
+      ActivityEditorHotkeyScope.ActivityBody,
+    );
+  };
+
+  const handlerBlockEditorBlur = () => {
+    goBackToPreviousHotkeyScope();
+  };
+
   return (
-    <StyledBlockNoteStyledContainer>
-      <BlockEditor editor={editor} />
+    <StyledBlockNoteStyledContainer onClick={() => editor.focus()}>
+      <BlockEditor
+        onFocus={handleBlockEditorFocus}
+        onBlur={handlerBlockEditorBlur}
+        editor={editor}
+      />
     </StyledBlockNoteStyledContainer>
   );
 };

packages/twenty-front/src/modules/activities/components/ActivityComments.tsx

@@ -28,7 +28,6 @@ const StyledThreadItemListContainer = styled.div`
 
   justify-content: flex-start;
   padding: ${({ theme }) => theme.spacing(8)};
-  padding-bottom: ${({ theme }) => theme.spacing(32)};
   padding-left: ${({ theme }) => theme.spacing(12)};
   width: 100%;
 `;

packages/twenty-front/src/modules/activities/components/ActivityEditor.tsx

@@ -33,6 +33,7 @@ const StyledContainer = styled.div`
   height: 100%;
   justify-content: space-between;
   overflow-y: auto;
+  gap: ${({ theme }) => theme.spacing(4)};
 `;
 
 const StyledUpperPartContainer = styled.div`
@@ -41,7 +42,6 @@ const StyledUpperPartContainer = styled.div`
   display: flex;
   flex-direction: column;
 
-  gap: ${({ theme }) => theme.spacing(4)};
   justify-content: flex-start;
 `;
 
@@ -104,12 +104,18 @@ export const ActivityEditor = ({
       customUseUpdateOneObjectHook: useUpsertOneActivityMutation,
     });
 
+  const { FieldContextProvider: ActivityTargetsContextProvider } =
+    useFieldContext({
+      objectNameSingular: CoreObjectNameSingular.Activity,
+      objectRecordId: activity?.id ?? '',
+      fieldMetadataName: 'activityTargets',
+      fieldPosition: 2,
+    });
+
   const [isCreatingActivity, setIsCreatingActivity] = useRecoilState(
     isCreatingActivityState,
   );
 
-  // TODO: remove
-
   useRegisterClickOutsideListenerCallback({
     callbackId: 'activity-editor',
     callbackFunction: () => {
@@ -143,14 +149,18 @@ export const ActivityEditor = ({
                   </AssigneeFieldContextProvider>
                 </>
               )}
-            <ActivityTargetsInlineCell activity={activity} />
+            {ActivityTargetsContextProvider && (
+              <ActivityTargetsContextProvider>
+                <ActivityTargetsInlineCell activity={activity} />
+              </ActivityTargetsContextProvider>
+            )}
           </PropertyBox>
         </StyledTopContainer>
-        <ActivityBodyEditor
-          activity={activity}
-          fillTitleFromBody={fillTitleFromBody}
-        />
       </StyledUpperPartContainer>
+      <ActivityBodyEditor
+        activity={activity}
+        fillTitleFromBody={fillTitleFromBody}
+      />
       {showComment && (
         <ActivityComments
           activity={activity}

packages/twenty-front/src/modules/activities/components/ActivityTitle.tsx

@@ -1,11 +1,14 @@
+import { useRef } from 'react';
 import { useState } from 'react';
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
+import { Key } from 'ts-key-enum';
 import { useDebouncedCallback } from 'use-debounce';
 
 import { useUpsertActivity } from '@/activities/hooks/useUpsertActivity';
 import { activityTitleHasBeenSetFamilyState } from '@/activities/states/activityTitleHasBeenSetFamilyState';
 import { Activity } from '@/activities/types/Activity';
+import { ActivityEditorHotkeyScope } from '@/activities/types/ActivityEditorHotkeyScope';
 import { useObjectMetadataItemOnly } from '@/object-metadata/hooks/useObjectMetadataItemOnly';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useModifyRecordFromCache } from '@/object-record/cache/hooks/useModifyRecordFromCache';
@@ -14,6 +17,8 @@ import {
   CheckboxShape,
   CheckboxSize,
 } from '@/ui/input/components/Checkbox';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { isDefined } from '~/utils/isDefined';
 
 const StyledEditableTitleInput = styled.input<{
@@ -56,6 +61,31 @@ export const ActivityTitle = ({ activity }: ActivityTitleProps) => {
 
   const { upsertActivity } = useUpsertActivity();
 
+  const {
+    setHotkeyScopeAndMemorizePreviousScope,
+    goBackToPreviousHotkeyScope,
+  } = usePreviousHotkeyScope();
+  const titleInputRef = useRef<HTMLInputElement>(null);
+
+  useScopedHotkeys(
+    Key.Escape,
+    () => {
+      handleBlur();
+    },
+    ActivityEditorHotkeyScope.ActivityTitle,
+  );
+
+  const handleBlur = () => {
+    goBackToPreviousHotkeyScope();
+    titleInputRef.current?.blur();
+  };
+
+  const handleFocus = () => {
+    setHotkeyScopeAndMemorizePreviousScope(
+      ActivityEditorHotkeyScope.ActivityTitle,
+    );
+  };
+
   const [activityTitleHasBeenSet, setActivityTitleHasBeenSet] = useRecoilState(
     activityTitleHasBeenSetFamilyState({
       activityId: activity.id,
@@ -120,10 +150,13 @@ export const ActivityTitle = ({ activity }: ActivityTitleProps) => {
       <StyledEditableTitleInput
         autoComplete="off"
         autoFocus
+        ref={titleInputRef}
         placeholder={`${activity.type} title`}
         onChange={(event) => handleTitleChange(event.target.value)}
         value={internalTitle}
         completed={completed}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
       />
     </StyledContainer>
   );