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>
   );
 };