From 9364a584774aafd626d1c53bbcbcedbba743e19c Mon Sep 17 00:00:00 2001
From: kikoleitao <92337535+kikoleitao@users.noreply.github.com>
Date: Tue, 2 Apr 2024 15:31:18 +0100
Subject: [PATCH] Fix #4160: fix upload image bug (#4734)

# Context
This PR addresses the solving of the upload image issue.
(Fixes #4160)

# Cause
The `<StyledBlockNoteStyledContainer onClick={() => editor.focus()}>`
handler was the origin of the problem, after removing it the issue
disappeared, maintaining all the other functionalities.

# Outcome
_Videos before and after removal:_


https://github.com/twentyhq/twenty/assets/92337535/9d8eb635-4164-4fea-a763-19becabf44ac


https://github.com/twentyhq/twenty/assets/92337535/8fedb50f-5306-42ad-be21-58d89ff7d1c7
---
 .../components/ActivityBodyEditor.tsx         | 22 ++++++-------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/components/ActivityBodyEditor.tsx b/packages/twenty-front/src/modules/activities/components/ActivityBodyEditor.tsx
index c8ef2611f..2dcde447e 100644
--- a/packages/twenty-front/src/modules/activities/components/ActivityBodyEditor.tsx
+++ b/packages/twenty-front/src/modules/activities/components/ActivityBodyEditor.tsx
@@ -1,7 +1,6 @@
 import { ClipboardEvent, useCallback, useMemo } from 'react';
 import { useApolloClient } from '@apollo/client';
 import { useCreateBlockNote } from '@blocknote/react';
-import styled from '@emotion/styled';
 import { isArray, isNonEmptyString } from '@sniptt/guards';
 import { useRecoilCallback, useRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
@@ -33,11 +32,6 @@ import { getFileType } from '../files/utils/getFileType';
 
 import '@blocknote/react/style.css';
 
-const StyledBlockNoteStyledContainer = styled.div`
-  height: 100%;
-  width: 100%;
-`;
-
 type ActivityBodyEditorProps = {
   activityId: string;
   fillTitleFromBody: boolean;
@@ -388,14 +382,12 @@ export const ActivityBodyEditor = ({
   };
 
   return (
-    <StyledBlockNoteStyledContainer onClick={() => editor.focus()}>
-      <BlockEditor
-        onFocus={handleBlockEditorFocus}
-        onBlur={handlerBlockEditorBlur}
-        onPaste={handleImagePaste}
-        onChange={handleEditorChange}
-        editor={editor}
-      />
-    </StyledBlockNoteStyledContainer>
+    <BlockEditor
+      onFocus={handleBlockEditorFocus}
+      onBlur={handlerBlockEditorBlur}
+      onPaste={handleImagePaste}
+      onChange={handleEditorChange}
+      editor={editor}
+    />
   );
 };