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/blocks/FileBlock.tsx

@@ -0,0 +1,137 @@
+import { ChangeEvent, useRef } from 'react';
+import {
+  BlockFromConfig,
+  BlockNoteEditor,
+  InlineContentSchema,
+  PropSchema,
+  StyleSchema,
+} from '@blocknote/core';
+import { createReactBlockSpec } from '@blocknote/react';
+import styled from '@emotion/styled';
+
+import { Button } from '@/ui/input/button/components/Button';
+import { AppThemeProvider } from '@/ui/theme/components/AppThemeProvider';
+
+import { AttachmentIcon } from '../files/components/AttachmentIcon';
+import { AttachmentType } from '../files/types/Attachment';
+import { getFileType } from '../files/utils/getFileType';
+
+import { blockSpecs } from './spec';
+
+export const filePropSchema = {
+  // File url
+  url: {
+    default: '' as string,
+  },
+  name: {
+    default: '' as string,
+  },
+  fileType: {
+    default: 'Other' as AttachmentType,
+  },
+} satisfies PropSchema;
+
+const StyledFileInput = styled.input`
+  display: none;
+`;
+
+const FileBlockConfig = {
+  type: 'file' as const,
+  propSchema: filePropSchema,
+  content: 'none' as const,
+};
+
+const StyledFileLine = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledLink = styled.a`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.primary};
+  display: flex;
+  text-decoration: none;
+  :hover {
+    color: ${({ theme }) => theme.font.color.secondary};
+  }
+`;
+
+const StyledUploadFileContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;
+
+const FileBlockRenderer = ({
+  block,
+  editor,
+}: {
+  block: BlockFromConfig<
+    typeof FileBlockConfig,
+    InlineContentSchema,
+    StyleSchema
+  >;
+  editor: BlockNoteEditor<typeof blockSpecs, InlineContentSchema, StyleSchema>;
+}) => {
+  const inputFileRef = useRef<HTMLInputElement>(null);
+
+  const handleUploadAttachment = async (file: File) => {
+    if (!file) {
+      return '';
+    }
+    const fileUrl = await editor.uploadFile?.(file);
+
+    editor.updateBlock(block.id, {
+      props: {
+        ...block.props,
+        ...{ url: fileUrl, fileType: getFileType(file.name), name: file.name },
+      },
+    });
+  };
+  const handleUploadFileClick = () => {
+    inputFileRef?.current?.click?.();
+  };
+  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) handleUploadAttachment?.(e.target.files[0]);
+  };
+
+  if (block.props.url) {
+    return (
+      <AppThemeProvider>
+        <StyledFileLine>
+          <AttachmentIcon
+            attachmentType={block.props.fileType as AttachmentType}
+          ></AttachmentIcon>
+          <StyledLink href={block.props.url} target="__blank">
+            {block.props.name}
+          </StyledLink>
+        </StyledFileLine>
+      </AppThemeProvider>
+    );
+  }
+
+  return (
+    <AppThemeProvider>
+      <StyledUploadFileContainer>
+        <StyledFileInput
+          ref={inputFileRef}
+          onChange={handleFileChange}
+          type="file"
+        />
+        <Button onClick={handleUploadFileClick} title="Upload File"></Button>
+      </StyledUploadFileContainer>
+    </AppThemeProvider>
+  );
+};
+
+export const FileBlock = createReactBlockSpec(FileBlockConfig, {
+  render: (block) => {
+    return (
+      <FileBlockRenderer
+        block={block.block}
+        editor={block.editor}
+      ></FileBlockRenderer>
+    );
+  },
+});

packages/twenty-front/src/modules/activities/blocks/schema.ts

@@ -0,0 +1,8 @@
+import { BlockSchema, defaultBlockSchema } from '@blocknote/core';
+
+import { FileBlock } from './FileBlock';
+
+export const blockSchema: BlockSchema = {
+  ...defaultBlockSchema,
+  file: FileBlock.config,
+};

packages/twenty-front/src/modules/activities/blocks/slashMenu.tsx

@@ -0,0 +1,49 @@
+import {
+  BlockNoteEditor,
+  InlineContentSchema,
+  StyleSchema,
+} from '@blocknote/core';
+import { getDefaultReactSlashMenuItems } from '@blocknote/react';
+
+import { IconFile } from '@/ui/display/icon';
+
+import { blockSchema } from './schema';
+
+export const getSlashMenu = (imagesActivated: boolean) => {
+  let items = [
+    ...getDefaultReactSlashMenuItems(blockSchema),
+    {
+      name: 'File',
+      aliases: ['file', 'folder'],
+      group: 'Media',
+      icon: <IconFile size={16} />,
+      hint: 'Insert a file',
+      execute: (
+        editor: BlockNoteEditor<
+          typeof blockSchema,
+          InlineContentSchema,
+          StyleSchema
+        >,
+      ) => {
+        editor.insertBlocks(
+          [
+            {
+              type: 'file',
+              props: {
+                url: undefined,
+              },
+            },
+          ],
+          editor.getTextCursorPosition().block,
+          'before',
+        );
+      },
+    },
+  ];
+
+  if (!imagesActivated) {
+    items = items.filter((x) => x.name != 'Image');
+  }
+
+  return items;
+};

packages/twenty-front/src/modules/activities/blocks/spec.ts

@@ -0,0 +1,8 @@
+import { defaultBlockSpecs } from '@blocknote/core';
+
+import { FileBlock } from './FileBlock';
+
+export const blockSpecs: any = {
+  ...defaultBlockSpecs,
+  file: FileBlock,
+};

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

packages/twenty-front/src/modules/activities/files/components/AttachmentIcon.tsx

@@ -1,10 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import {
-  Attachment,
-  AttachmentType,
-} from '@/activities/files/types/Attachment';
+import { AttachmentType } from '@/activities/files/types/Attachment';
 import {
   IconFile,
   IconFileText,
@@ -40,7 +37,11 @@ const IconMapping: { [key in AttachmentType]: IconComponent } = {
   Other: IconFile,
 };
 
-export const AttachmentIcon = ({ attachment }: { attachment: Attachment }) => {
+export const AttachmentIcon = ({
+  attachmentType,
+}: {
+  attachmentType: AttachmentType;
+}) => {
   const theme = useTheme();
 
   const IconColors: { [key in AttachmentType]: string } = {
@@ -54,10 +55,10 @@ export const AttachmentIcon = ({ attachment }: { attachment: Attachment }) => {
     Other: theme.color.gray,
   };
 
-  const Icon = IconMapping[attachment.type];
+  const Icon = IconMapping[attachmentType];
 
   return (
-    <StyledIconContainer background={IconColors[attachment.type]}>
+    <StyledIconContainer background={IconColors[attachmentType]}>
       {Icon && <Icon size={theme.icon.size.sm} />}
     </StyledIconContainer>
   );

packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx

@@ -75,7 +75,7 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => {
     <FieldContext.Provider value={fieldContext as GenericFieldContextType}>
       <StyledRow>
         <StyledLeftContent>
-          <AttachmentIcon attachment={attachment} />
+          <AttachmentIcon attachmentType={attachment.type} />
           <StyledLink
             href={REACT_APP_SERVER_BASE_URL + '/files/' + attachment.fullPath}
             target="__blank"