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/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?.();
-                setIsFocused(true);
-              }}
-              onBlur={() => setIsFocused(false)}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
               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>
   );
 };