Activity editor add File block (#3146)

* - added file block

* fised auth useeffect

* - add cmd v for file block

* remove feature flag for attachment upload in blockeditor

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

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

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { BlockNoteEditor } from '@blocknote/core';
-import { getDefaultReactSlashMenuItems, useBlockNote } from '@blocknote/react';
+import { useBlockNote } from '@blocknote/react';
 import styled from '@emotion/styled';
 import { isNonEmptyString } from '@sniptt/guards';
 import debounce from 'lodash.debounce';
@@ -13,6 +13,10 @@ import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { FileFolder, useUploadFileMutation } from '~/generated/graphql';
 
+import { getSlashMenu } from '../blocks/slashMenu';
+import { blockSpecs } from '../blocks/spec';
+import { getFileType } from '../files/utils/getFileType';
+
 const StyledBlockNoteStyledContainer = styled.div`
   width: 100%;
 `;
@@ -51,12 +55,8 @@ export const ActivityBodyEditor = ({
     return debounce(onInternalChange, 200);
   }, [updateOneRecord, activity.id]);
 
-  let slashMenuItems = [...getDefaultReactSlashMenuItems()];
   const imagesActivated = useIsFeatureEnabled('IS_NOTE_CREATE_IMAGES_ENABLED');
-
-  if (!imagesActivated) {
-    slashMenuItems = slashMenuItems.filter((x) => x.name !== 'Image');
-  }
+  const slashMenuItems = getSlashMenu(imagesActivated);
 
   const [uploadFile] = useUploadFileMutation();
 
@@ -78,7 +78,7 @@ export const ActivityBodyEditor = ({
     return imageUrl;
   };
 
-  const editor: BlockNoteEditor | null = useBlockNote({
+  const editor: BlockNoteEditor<typeof blockSpecs> | null = useBlockNote({
     initialContent:
       isNonEmptyString(activity.body) && activity.body !== '{}'
         ? JSON.parse(activity.body)
@@ -88,7 +88,8 @@ export const ActivityBodyEditor = ({
       debounceOnChange(JSON.stringify(editor.topLevelBlocks) ?? '');
     },
     slashMenuItems,
-    uploadFile: imagesActivated ? handleUploadAttachment : undefined,
+    blockSpecs: blockSpecs,
+    uploadFile: handleUploadAttachment,
     onEditorReady: (editor: BlockNoteEditor) => {
       editor.domElement.addEventListener('paste', handleImagePaste);
     },
@@ -99,23 +100,41 @@ export const ActivityBodyEditor = ({
 
     if (clipboardItems) {
       for (let i = 0; i < clipboardItems.length; i++) {
-        if (
-          clipboardItems[i].kind === 'file' &&
-          clipboardItems[i].type.match('^image/')
-        ) {
+        if (clipboardItems[i].kind === 'file') {
+          const isImage = clipboardItems[i].type.match('^image/');
           const pastedFile = clipboardItems[i].getAsFile();
           if (!pastedFile) {
             return;
           }
 
-          const imageUrl = await handleUploadAttachment(pastedFile);
-          if (imageUrl) {
+          const attachmentUrl = await handleUploadAttachment(pastedFile);
+
+          if (!attachmentUrl) {
+            return;
+          }
+
+          if (isImage) {
             editor?.insertBlocks(
               [
                 {
                   type: 'image',
                   props: {
-                    url: imageUrl,
+                    url: attachmentUrl,
+                  },
+                },
+              ],
+              editor?.getTextCursorPosition().block,
+              'after',
+            );
+          } else {
+            editor?.insertBlocks(
+              [
+                {
+                  type: 'file',
+                  props: {
+                    url: attachmentUrl,
+                    fileType: getFileType(pastedFile.name),
+                    name: pastedFile.name,
                   },
                 },
               ],

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

@@ -36,10 +36,8 @@ const StyledThreadItemListContainer = styled.div`
 const StyledCommentActionBar = styled.div`
   background: ${({ theme }) => theme.background.primary};
   border-top: 1px solid ${({ theme }) => theme.border.color.light};
-  bottom: 0;
   display: flex;
   padding: 16px 24px 16px 48px;
-  position: absolute;
   width: calc(
     ${({ theme }) => (useIsMobile() ? '100%' : theme.rightDrawerWidth)} - 72px
   );