From b4f56c0a78cc0efb4d6f4ab1237b9b8d5593458f Mon Sep 17 00:00:00 2001
From: fundon <fundon@pindash.io>
Date: Wed, 7 May 2025 13:20:51 +0000
Subject: [PATCH] fix(editor): attachment size in embed view (#12177)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes: [BS-3434](https://linear.app/affine-design/issue/BS-3434/修复-attachment-从-card-切换为-embed-尺寸问题)

<img width="1073" alt="Screenshot 2025-05-07 at 20 38 53" src="https://github.com/user-attachments/assets/9fbb7e40-3c01-4473-88d8-3469758ed06b" />

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Added dedicated embed actions for PDF and video attachments, ensuring consistent sizing and improved rendering for these media types.

- **Refactor**
  - Centralized PDF and video embed card dimensions using shared constants for more consistent and maintainable sizing.
  - Improved styling for video embeds, including better layout and responsive sizing.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../affine/blocks/attachment/src/embed.ts     | 54 +++++++++++++++----
 .../extensions/attachment-embed-view.tsx      |  8 ++-
 2 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/blocksuite/affine/blocks/attachment/src/embed.ts b/blocksuite/affine/blocks/attachment/src/embed.ts
index 6a44d9ee94..f2f91fcecb 100644
--- a/blocksuite/affine/blocks/attachment/src/embed.ts
+++ b/blocksuite/affine/blocks/attachment/src/embed.ts
@@ -3,6 +3,10 @@ import {
   type ImageBlockProps,
   MAX_IMAGE_WIDTH,
 } from '@blocksuite/affine-model';
+import {
+  EMBED_CARD_HEIGHT,
+  EMBED_CARD_WIDTH,
+} from '@blocksuite/affine-shared/consts';
 import { FileSizeLimitProvider } from '@blocksuite/affine-shared/services';
 import {
   readImageSize,
@@ -17,6 +21,7 @@ import type { ExtensionType } from '@blocksuite/store';
 import { Extension } from '@blocksuite/store';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
 
 import { getAttachmentBlob } from './utils';
 
@@ -97,11 +102,13 @@ export class AttachmentEmbedService extends Extension {
   // Converts to embed view.
   convertTo(model: AttachmentBlockModel, maxFileSize = this._maxFileSize) {
     const config = this.values.find(config => config.check(model, maxFileSize));
-    if (!config?.action) {
-      model.store.updateBlock(model, { embed: true });
+
+    if (config?.action) {
+      config.action(model, this.std)?.catch(console.error);
       return;
     }
-    config.action(model, this.std)?.catch(console.error);
+
+    model.store.updateBlock(model, { embed: true });
   }
 
   embedded(model: AttachmentBlockModel, maxFileSize = this._maxFileSize) {
@@ -142,14 +149,27 @@ const embedConfig: AttachmentEmbedConfig[] = [
     name: 'pdf',
     check: (model, maxFileSize) =>
       model.props.type === 'application/pdf' && model.props.size <= maxFileSize,
+    action: model => {
+      const bound = Bound.deserialize(model.props.xywh);
+      bound.w = EMBED_CARD_WIDTH.pdf;
+      bound.h = EMBED_CARD_HEIGHT.pdf;
+      model.store.updateBlock(model, {
+        embed: true,
+        style: 'pdf',
+        xywh: bound.serialize(),
+      });
+    },
     template: (_, blobUrl) => {
       // More options: https://tinytip.co/tips/html-pdf-params/
       // https://chromium.googlesource.com/chromium/src/+/refs/tags/121.0.6153.1/chrome/browser/resources/pdf/open_pdf_params_parser.ts
       const parameters = '#toolbar=0';
       return html`
         <iframe
-          style="width: 100%; color-scheme: auto;"
-          height="480"
+          style=${styleMap({
+            width: '100%',
+            minHeight: '480px',
+            colorScheme: 'auto',
+          })}
           src=${blobUrl + parameters}
           loading="lazy"
           scrolling="no"
@@ -167,13 +187,29 @@ const embedConfig: AttachmentEmbedConfig[] = [
     name: 'video',
     check: (model, maxFileSize) =>
       model.props.type.startsWith('video/') && model.props.size <= maxFileSize,
+    action: model => {
+      const bound = Bound.deserialize(model.props.xywh);
+      bound.w = EMBED_CARD_WIDTH.video;
+      bound.h = EMBED_CARD_HEIGHT.video;
+      model.store.updateBlock(model, {
+        embed: true,
+        style: 'video',
+        xywh: bound.serialize(),
+      });
+    },
     template: (_, blobUrl) =>
       html`<video
-        style="max-height: max-content;"
-        width="100%;"
-        height="480"
-        controls
+        style=${styleMap({
+          display: 'flex',
+          objectFit: 'cover',
+          backgroundSize: 'cover',
+          width: '100%',
+          height: '100%',
+        })}
         src=${blobUrl}
+        width="100%"
+        height="100%"
+        controls
       ></video>`,
   },
   {
diff --git a/packages/frontend/core/src/blocksuite/extensions/attachment-embed-view.tsx b/packages/frontend/core/src/blocksuite/extensions/attachment-embed-view.tsx
index ed375c8388..2a1a1eb16e 100644
--- a/packages/frontend/core/src/blocksuite/extensions/attachment-embed-view.tsx
+++ b/packages/frontend/core/src/blocksuite/extensions/attachment-embed-view.tsx
@@ -2,6 +2,10 @@ import type { ReactToLit } from '@affine/component';
 import { AttachmentEmbedPreview } from '@affine/core/blocksuite/attachment-viewer/attachment-embed-preview';
 import { AttachmentEmbedConfigIdentifier } from '@blocksuite/affine/blocks/attachment';
 import { Bound } from '@blocksuite/affine/global/gfx';
+import {
+  EMBED_CARD_HEIGHT,
+  EMBED_CARD_WIDTH,
+} from '@blocksuite/affine/shared/consts';
 import type { ExtensionType } from '@blocksuite/affine/store';
 
 export function patchForPDFEmbedView(reactToLit: ReactToLit): ExtensionType {
@@ -14,8 +18,8 @@ export function patchForPDFEmbedView(reactToLit: ReactToLit): ExtensionType {
           model.props.size <= maxFileSize,
         action: model => {
           const bound = Bound.deserialize(model.props.xywh);
-          bound.w = 537 + 24 + 2;
-          bound.h = 759 + 46 + 24 + 2;
+          bound.w = EMBED_CARD_WIDTH.pdf;
+          bound.h = EMBED_CARD_HEIGHT.pdf;
           model.store.updateBlock(model, {
             embed: true,
             style: 'pdf',