fix(editor): some bugs of attachment column (#11031)

fix: BS-2838, BS-2837, BS-2836

packages/frontend/core/src/blocksuite/database-block/properties/file/define.ts

@@ -1,7 +1,7 @@
 import { propertyType, t } from '@blocksuite/affine/blocks/database';
 import zod from 'zod';
 
-export const fileColumnType = propertyType('file');
+export const fileColumnType = propertyType('attachment');
 
 export const FileItemSchema = zod.object({
   id: zod.string(),
@@ -20,7 +20,7 @@ export type FileCellJsonValueType = zod.TypeOf<
   typeof FileCellJsonValueTypeSchema
 >;
 export const filePropertyModelConfig = fileColumnType.modelConfig({
-  name: 'File',
+  name: 'Attachment',
   propertyData: {
     schema: zod.object({}),
     default: () => ({}),

packages/frontend/core/src/blocksuite/database-block/properties/file/style.css.ts

@@ -1,9 +1,14 @@
+import { cssVar } from '@toeverything/theme';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
+export const iconPrimary = style({
+  color: cssVarV2.icon.primary,
+});
+
 export const filePopoverContainer = style({
   padding: '8px 0 0 0',
-  width: '415px',
+  width: '340px',
 });
 
 export const filePopoverContent = style({
@@ -12,7 +17,7 @@ export const filePopoverContent = style({
 
 export const uploadButton = style({
   width: '100%',
-  fontSize: '16px',
+  fontSize: '12px',
 });
 
 export const fileInfoContainer = style({
@@ -20,6 +25,7 @@ export const fileInfoContainer = style({
   justifyContent: 'center',
   alignItems: 'center',
   fontSize: '14px',
+  fontWeight: cssVar('fontXs'),
   gap: '8px',
   overflow: 'hidden',
 });
@@ -146,22 +152,21 @@ export const imagePreviewContainer = style({
 export const uploadContainer = style({
   display: 'flex',
   alignItems: 'center',
-  padding: '8px 16px',
   borderTop: '1px solid',
   borderColor: cssVarV2.layer.insideBorder.border,
 });
 
 export const uploadButtonStyle = style({
+  flex: 1,
   display: 'flex',
   alignItems: 'center',
   gap: '8px',
-  padding: '4px',
+  padding: '8px',
   cursor: 'pointer',
 });
 
 export const uploadPopoverContainer = style({
   padding: '12px',
-  width: '415px',
   display: 'flex',
   flexDirection: 'column',
   gap: '10px',

packages/frontend/core/src/blocksuite/database-block/properties/file/view.tsx

@@ -23,7 +23,10 @@ import {
   type Signal,
   signal,
 } from '@preact/signals-core';
-import { generateFractionalIndexingKeyBetween } from '@toeverything/infra';
+import {
+  generateFractionalIndexingKeyBetween,
+  useService,
+} from '@toeverything/infra';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { fileTypeFromBuffer, type FileTypeResult } from 'file-type';
 import { nanoid } from 'nanoid';
@@ -36,6 +39,7 @@ import {
   useMemo,
 } from 'react';
 
+import { WorkspaceDialogService } from '../../../../modules/dialogs';
 import { useSignalValue } from '../../../../modules/doc-info/utils';
 import type {
   FileCellJsonValueType,
@@ -356,6 +360,13 @@ const FileCellComponent: ForwardRefRenderFunction<
   );
   const fileList = useSignalValue(manager.fileList);
   const isEditing = useSignalValue(manager.isEditing);
+  const workspaceDialogService = useService(WorkspaceDialogService);
+  const jumpToPricePlan = useCallback(() => {
+    workspaceDialogService.open('setting', {
+      activeTab: 'plans',
+      scrollAnchor: 'cloudPricingPlan',
+    });
+  }, [workspaceDialogService]);
   const renderPopoverContent = () => {
     if (fileList.length === 0) {
       return (
@@ -382,11 +393,7 @@ const FileCellComponent: ForwardRefRenderFunction<
             <div className={styles.fileSizeInfo}>
               The maximum size per file is 100MB
             </div>
-            <a
-              href="#"
-              className={styles.upgradeLink}
-              onClick={e => e.stopPropagation()}
-            >
+            <a className={styles.upgradeLink} onClick={jumpToPricePlan}>
               Upgrade to Pro
             </a>
           </div>
@@ -420,7 +427,7 @@ const FileCellComponent: ForwardRefRenderFunction<
             }}
             className={styles.uploadButtonStyle}
           >
-            <PlusIcon width={20} height={20} />
+            <PlusIcon className={styles.iconPrimary} width={20} height={20} />
             <span>Add a file or image</span>
           </div>
         </div>
@@ -504,7 +511,7 @@ const useFilePreview = (
   }
 
   return {
-    preview: <FileIcon width={18} height={18} />,
+    preview: <FileIcon className={styles.iconPrimary} width={18} height={18} />,
     fileType: 'file',
   };
 };
@@ -574,6 +581,7 @@ export const FileListItem = (props: {
         onClick={e => {
           handleRemoveFile(file, e);
         }}
+        type={'danger'}
         prefixIcon={<DeleteIcon width={20} height={20} />}
       >
         Delete

packages/frontend/core/src/components/context/index.tsx

@@ -1,8 +1,4 @@
-import {
-  ConfirmModalProvider,
-  PromptModalProvider,
-  uniReactRoot,
-} from '@affine/component';
+import { ConfirmModalProvider, PromptModalProvider } from '@affine/component';
 import { ProviderComposer } from '@affine/component/provider-composer';
 import { ThemeProvider } from '@affine/core/components/theme-provider';
 import type { createStore } from 'jotai';
@@ -29,7 +25,6 @@ export function AffineContext(props: AffineContextProps) {
       )}
     >
       {props.children}
-      <uniReactRoot.Root />
     </ProviderComposer>
   );
 }

packages/frontend/core/src/desktop/pages/workspace/layouts/workspace-layout.tsx

@@ -1,3 +1,4 @@
+import { uniReactRoot } from '@affine/component';
 import { WorkspaceAIOnboarding } from '@affine/core/components/affine/ai-onboarding';
 import { AiLoginRequiredModal } from '@affine/core/components/affine/auth/ai-login-required';
 import {
@@ -43,6 +44,7 @@ export const WorkspaceLayout = function WorkspaceLayout({
       {/* should show after workspace loaded */}
       <WorkspaceAIOnboarding />
       <AIIsland />
+      <uniReactRoot.Root />
     </SWRConfigProvider>
   );
 };

packages/frontend/core/src/mobile/pages/workspace/layout.tsx

@@ -1,3 +1,4 @@
+import { uniReactRoot } from '@affine/component';
 import { AffineErrorBoundary } from '@affine/core/components/affine/affine-error-boundary';
 import { AiLoginRequiredModal } from '@affine/core/components/affine/auth/ai-login-required';
 import {
@@ -151,6 +152,7 @@ export const WorkspaceLayout = ({
               <LocalQuotaModal />
             )}
             <AiLoginRequiredModal />
+            <uniReactRoot.Root />
             <WorkspaceSideEffects />
             {children}
           </SWRConfigProvider>