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,
+};