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>
+    <StyledBlockNoteStyledContainer onClick={() => editor.focus()}>
-      <BlockEditor editor={editor} />
+      <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>
   );

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 { ActivityEditorHotkeyScope } from '@/activities/types/ActivityEditorHotkeyScope';
-import { useFieldContext } from '@/object-record/hooks/useFieldContext';
 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({
+  useScopedHotkeys(
-    objectNameSingular: CoreObjectNameSingular.Activity,
+    Key.Escape,
-    objectRecordId: activity?.id ?? '',
+    () => {
-    fieldMetadataName: 'activityTargets',
+      closeInlineCell();
-    fieldPosition: 2,
+    },
-  });
+    ActivityEditorHotkeyScope.ActivityTargets,
-
+  );
-  if (!FieldContextProvider) return null;
 
   return (
     <RecordFieldInputScope recordFieldInputScopeId={activity?.id ?? ''}>
-      <FieldContextProvider>
+      <RecordInlineCellContainer
-        <RecordInlineCellContainer
+        buttonIcon={IconPencil}
-          buttonIcon={IconPencil}
+        customEditHotkeyScope={{
-          customEditHotkeyScope={{
+          scope: ActivityEditorHotkeyScope.ActivityTargets,
-            scope: RelationPickerHotkeyScope.RelationPicker,
+        }}
-          }}
+        IconLabel={IconArrowUpRight}
-          IconLabel={IconArrowUpRight}
+        editModeContent={
-          editModeContent={
+          <ActivityTargetInlineCellEditMode
-            <ActivityTargetInlineCellEditMode
+            activity={activity}
-              activity={activity}
+            activityTargetObjectRecords={activityTargetObjectRecords}
-              activityTargetObjectRecords={activityTargetObjectRecords}
+          />
-            />
+        }
-          }
+        label="Relations"
-          label="Relations"
+        displayModeContent={
-          displayModeContent={
+          <ActivityTargetChips
-            <ActivityTargetChips
+            activityTargetObjectRecords={activityTargetObjectRecords}
-              activityTargetObjectRecords={activityTargetObjectRecords}
+          />
-            />
+        }
-          }
+        isDisplayModeContentEmpty={activityTargetObjectRecords.length === 0}
-          isDisplayModeContentEmpty={activityTargetObjectRecords.length === 0}
+      />
-        />
-      </FieldContextProvider>
     </RecordFieldInputScope>
   );
 };

packages/twenty-front/src/modules/activities/types/ActivityEditorHotkeyScope.ts

@@ -0,0 +1,5 @@
+export enum ActivityEditorHotkeyScope {
+  ActivityTitle = 'activity-title',
+  ActivityBody = 'activity-body',
+  ActivityTargets = 'activity-targets',
+}

packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx

@@ -1,19 +1,10 @@
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton';
 
-import { useInlineCell } from '../hooks/useInlineCell';
-
 export const RecordInlineCellButton = ({ Icon }: { Icon: IconComponent }) => {
-  const { openInlineCell } = useInlineCell();
-
-  const handleClick = () => {
-    openInlineCell();
-  };
-
   return (
     <FloatingIconButton
       size="small"
-      onClick={handleClick}
       Icon={Icon}
       data-testid="inline-cell-edit-mode-container"
     />

packages/twenty-front/src/modules/ui/input/components/AutosizeTextInput.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { HotkeysEvent } from 'react-hotkeys-hook/dist/types';
 import TextareaAutosize from 'react-textarea-autosize';
 import styled from '@emotion/styled';
@@ -7,6 +7,7 @@ import { Key } from 'ts-key-enum';
 import { IconArrowRight } from '@/ui/display/icon/index';
 import { Button } from '@/ui/input/button/components/Button';
 import { RoundedIconButton } from '@/ui/input/button/components/RoundedIconButton';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 
 import { InputHotkeyScope } from '../types/InputHotkeyScope';
@@ -28,6 +29,7 @@ type AutosizeTextInputProps = {
   buttonTitle?: string;
   value?: string;
   className?: string;
+  onBlur?: () => void;
 };
 
 const StyledContainer = styled.div`
@@ -120,13 +122,18 @@ export const AutosizeTextInput = ({
   buttonTitle,
   value = '',
   className,
+  onBlur,
 }: AutosizeTextInputProps) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isHidden, setIsHidden] = useState(
     variant === AutosizeTextInputVariant.Button,
   );
   const [text, setText] = useState(value);
-
+  const textInputRef = useRef<HTMLTextAreaElement>(null);
+  const {
+    setHotkeyScopeAndMemorizePreviousScope,
+    goBackToPreviousHotkeyScope,
+  } = usePreviousHotkeyScope();
   const isSendButtonDisabled = !text;
   const words = text.split(/\s|\n/).filter((word) => word).length;
 
@@ -161,6 +168,8 @@ export const AutosizeTextInput = ({
       event.preventDefault();
 
       setText('');
+      goBackToPreviousHotkeyScope();
+      textInputRef.current?.blur();
     },
     InputHotkeyScope.TextInput,
     [onValidate, setText, isFocused],
@@ -182,6 +191,18 @@ export const AutosizeTextInput = ({
     setText('');
   };
 
+  const handleFocus = () => {
+    onFocus?.();
+    setIsFocused(true);
+    setHotkeyScopeAndMemorizePreviousScope(InputHotkeyScope.TextInput);
+  };
+
+  const handleBlur = () => {
+    onBlur?.();
+    setIsFocused(false);
+    goBackToPreviousHotkeyScope();
+  };
+
   const computedMinRows = minRows > MAX_ROWS ? MAX_ROWS : minRows;
 
   return (
@@ -190,17 +211,15 @@ export const AutosizeTextInput = ({
         <StyledInputContainer>
           {!isHidden && (
             <StyledTextArea
+              ref={textInputRef}
               autoFocus={variant === AutosizeTextInputVariant.Button}
               placeholder={placeholder ?? 'Write a comment'}
               maxRows={MAX_ROWS}
               minRows={computedMinRows}
               onChange={handleInputChange}
               value={text}
-              onFocus={() => {
+              onFocus={handleFocus}
-                onFocus?.();
+              onBlur={handleBlur}
-                setIsFocused(true);
-              }}
-              onBlur={() => setIsFocused(false)}
               variant={variant}
             />
           )}

packages/twenty-front/src/modules/ui/input/editor/components/BlockEditor.tsx

@@ -5,10 +5,11 @@ import styled from '@emotion/styled';
 
 interface BlockEditorProps {
   editor: BlockNoteEditor;
+  onFocus?: () => void;
+  onBlur?: () => void;
 }
 
 const StyledEditor = styled.div`
-  min-height: 200px;
   width: 100%;
   & .editor {
     background: ${({ theme }) => theme.background.primary};
@@ -21,12 +22,26 @@ const StyledEditor = styled.div`
   }
 `;
 
-export const BlockEditor = ({ editor }: BlockEditorProps) => {
+export const BlockEditor = ({ editor, onFocus, onBlur }: BlockEditorProps) => {
   const theme = useTheme();
   const blockNoteTheme = theme.name === 'light' ? 'light' : 'dark';
+
+  const handleFocus = () => {
+    onFocus?.();
+  };
+
+  const handleBlur = () => {
+    onBlur?.();
+  };
+
   return (
     <StyledEditor>
-      <BlockNoteView editor={editor} theme={blockNoteTheme} />
+      <BlockNoteView
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        editor={editor}
+        theme={blockNoteTheme}
+      />
     </StyledEditor>
   );
 };