From c355644d477fd4f2314e38a13e39da1da49894cc Mon Sep 17 00:00:00 2001
From: zzj3720 <17165520+zzj3720@users.noreply.github.com>
Date: Thu, 20 Mar 2025 07:48:26 +0000
Subject: [PATCH] fix(editor): some bugs of attachment column (#11031)
fix: BS-2838, BS-2837, BS-2836
---
.../database-block/properties/file/define.ts | 4 ++--
.../properties/file/style.css.ts | 15 ++++++++----
.../database-block/properties/file/view.tsx | 24 ++++++++++++-------
.../core/src/components/context/index.tsx | 7 +-----
.../workspace/layouts/workspace-layout.tsx | 2 ++
.../src/mobile/pages/workspace/layout.tsx | 2 ++
6 files changed, 33 insertions(+), 21 deletions(-)
diff --git a/packages/frontend/core/src/blocksuite/database-block/properties/file/define.ts b/packages/frontend/core/src/blocksuite/database-block/properties/file/define.ts
index 2b3a5ee5a3..d7c447bd59 100644
--- a/packages/frontend/core/src/blocksuite/database-block/properties/file/define.ts
+++ b/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: () => ({}),
diff --git a/packages/frontend/core/src/blocksuite/database-block/properties/file/style.css.ts b/packages/frontend/core/src/blocksuite/database-block/properties/file/style.css.ts
index 757e15af4f..b89219e8bf 100644
--- a/packages/frontend/core/src/blocksuite/database-block/properties/file/style.css.ts
+++ b/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',
diff --git a/packages/frontend/core/src/blocksuite/database-block/properties/file/view.tsx b/packages/frontend/core/src/blocksuite/database-block/properties/file/view.tsx
index d0e60b561d..0dc47279dc 100644
--- a/packages/frontend/core/src/blocksuite/database-block/properties/file/view.tsx
+++ b/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<
The maximum size per file is 100MB
- e.stopPropagation()}
- >
+
Upgrade to Pro
@@ -420,7 +427,7 @@ const FileCellComponent: ForwardRefRenderFunction<
}}
className={styles.uploadButtonStyle}
>
-
+
Add a file or image
@@ -504,7 +511,7 @@ const useFilePreview = (
}
return {
- preview: ,
+ preview: ,
fileType: 'file',
};
};
@@ -574,6 +581,7 @@ export const FileListItem = (props: {
onClick={e => {
handleRemoveFile(file, e);
}}
+ type={'danger'}
prefixIcon={}
>
Delete
diff --git a/packages/frontend/core/src/components/context/index.tsx b/packages/frontend/core/src/components/context/index.tsx
index e9683f7808..2e9bec4ffd 100644
--- a/packages/frontend/core/src/components/context/index.tsx
+++ b/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}
-
);
}
diff --git a/packages/frontend/core/src/desktop/pages/workspace/layouts/workspace-layout.tsx b/packages/frontend/core/src/desktop/pages/workspace/layouts/workspace-layout.tsx
index 3b4d570989..05b9c8d597 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/layouts/workspace-layout.tsx
+++ b/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 */}
+
);
};
diff --git a/packages/frontend/core/src/mobile/pages/workspace/layout.tsx b/packages/frontend/core/src/mobile/pages/workspace/layout.tsx
index 411741d155..10ca926f5e 100644
--- a/packages/frontend/core/src/mobile/pages/workspace/layout.tsx
+++ b/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 = ({
)}
+
{children}