From cad4dde4b151e11a62dec55d599f75755effb677 Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Tue, 1 Apr 2025 11:57:53 +0000
Subject: [PATCH] fix(editor): missing doc mode extension in frame preview
 (#11348)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Close [BS-2777](https://linear.app/affine-design/issue/BS-2777/frame-preview里的embed-card展示的doc-mode不对)
---
 .../src/body/frame-panel-body.ts              |  1 +
 .../src/card/frame-card.ts                    | 20 ++++++++++------
 .../src/card/frame-preview.ts                 | 23 +++++++++++++++----
 .../fragment-frame-panel/src/utils/drag.ts    |  1 +
 .../e2e/edgeless/presentation.spec.ts         |  2 +-
 5 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/blocksuite/affine/fragments/fragment-frame-panel/src/body/frame-panel-body.ts b/blocksuite/affine/fragments/fragment-frame-panel/src/body/frame-panel-body.ts
index b2527a087..d9d07033e 100644
--- a/blocksuite/affine/fragments/fragment-frame-panel/src/body/frame-panel-body.ts
+++ b/blocksuite/affine/fragments/fragment-frame-panel/src/body/frame-panel-body.ts
@@ -265,6 +265,7 @@ export class FramePanelBody extends SignalWatcher(
         html`<affine-frame-card
           data-frame-id=${frame.id}
           .frame=${frame}
+          .std=${this.editorHost.std}
           .cardIndex=${cardIndex}
           .frameIndex=${frameIndex}
           .status=${selectedFrames.has(frame.id)
diff --git a/blocksuite/affine/fragments/fragment-frame-panel/src/card/frame-card.ts b/blocksuite/affine/fragments/fragment-frame-panel/src/card/frame-card.ts
index 6f8e8c3b5..1ff5b4662 100644
--- a/blocksuite/affine/fragments/fragment-frame-panel/src/card/frame-card.ts
+++ b/blocksuite/affine/fragments/fragment-frame-panel/src/card/frame-card.ts
@@ -1,7 +1,7 @@
 import type { FrameBlockModel } from '@blocksuite/affine-model';
 import { on, once } from '@blocksuite/affine-shared/utils';
 import { WithDisposable } from '@blocksuite/global/lit';
-import { ShadowlessElement } from '@blocksuite/std';
+import { type BlockStdScope, ShadowlessElement } from '@blocksuite/std';
 import { css, html, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -177,18 +177,18 @@ export class FrameCard extends WithDisposable(ShadowlessElement) {
 
   override render() {
     const { pos, stackOrder, width } = this;
-    const containerStyle =
+    const containerStyle = styleMap(
       this.status === 'dragging'
-        ? styleMap({
+        ? {
             transform: `${
               stackOrder === 0
                 ? `translate(${pos.x - 16}px, ${pos.y - 8}px)`
                 : `translate(${pos.x - 10}px, ${pos.y - 16}px) scale(0.96)`
             }`,
             width: width ? `${width}px` : undefined,
-          })
-        : {};
-
+          }
+        : {}
+    );
     return html`<div
       class="frame-card-container ${this.status ?? ''}"
       style=${containerStyle}
@@ -207,12 +207,18 @@ export class FrameCard extends WithDisposable(ShadowlessElement) {
       >
         ${this.status === 'dragging' && stackOrder !== 0
           ? nothing
-          : html`<frame-preview .frame=${this.frame}></frame-preview>`}
+          : html`<frame-preview
+              .frame=${this.frame}
+              .std=${this.std}
+            ></frame-preview>`}
         ${this._DraggingCardNumber()}
       </div>
     </div>`;
   }
 
+  @property({ attribute: false })
+  accessor std!: BlockStdScope;
+
   @property({ attribute: false })
   accessor cardIndex!: number;
 
diff --git a/blocksuite/affine/fragments/fragment-frame-panel/src/card/frame-preview.ts b/blocksuite/affine/fragments/fragment-frame-panel/src/card/frame-preview.ts
index 26d9e9d7e..3db44beac 100644
--- a/blocksuite/affine/fragments/fragment-frame-panel/src/card/frame-preview.ts
+++ b/blocksuite/affine/fragments/fragment-frame-panel/src/card/frame-preview.ts
@@ -1,5 +1,9 @@
 import type { FrameBlockModel } from '@blocksuite/affine-model';
-import { ViewportElementExtension } from '@blocksuite/affine-shared/services';
+import {
+  DocModeExtension,
+  DocModeProvider,
+  ViewportElementExtension,
+} from '@blocksuite/affine-shared/services';
 import { SpecProvider } from '@blocksuite/affine-shared/utils';
 import { DisposableGroup } from '@blocksuite/global/disposable';
 import { Bound, deserializeXYWH } from '@blocksuite/global/gfx';
@@ -47,11 +51,14 @@ const styles = css`
     overflow: hidden;
     pointer-events: none;
     user-select: none;
+  }
 
-    .edgeless-background {
-      background-color: transparent;
-      background-image: none;
-    }
+  .frame-preview-viewport
+    > editor-host
+    > affine-edgeless-root-preview
+    > .edgeless-background {
+    background-color: transparent;
+    background-image: none;
   }
 `;
 
@@ -134,9 +141,12 @@ export class FramePreview extends WithDisposable(ShadowlessElement) {
         });
       }
     }
+
+    const docModeService = this.std.get(DocModeProvider);
     this._previewSpec.extend([
       ViewportElementExtension('.frame-preview-viewport'),
       FramePreviewWatcher,
+      DocModeExtension(docModeService),
     ]);
   }
 
@@ -220,6 +230,9 @@ export class FramePreview extends WithDisposable(ShadowlessElement) {
     }
   }
 
+  @property({ attribute: false })
+  accessor std!: BlockStdScope;
+
   @state()
   accessor fillScreen = false;
 
diff --git a/blocksuite/affine/fragments/fragment-frame-panel/src/utils/drag.ts b/blocksuite/affine/fragments/fragment-frame-panel/src/utils/drag.ts
index 1b1e5b62e..8a5b21438 100644
--- a/blocksuite/affine/fragments/fragment-frame-panel/src/utils/drag.ts
+++ b/blocksuite/affine/fragments/fragment-frame-panel/src/utils/drag.ts
@@ -55,6 +55,7 @@ export function startDragging(
       el.stackOrder = arr.length - 1 - idx;
       el.pos = start;
       el.width = options.width;
+      el.std = container.editorHost.std;
       if (frames.length > 1 && el.stackOrder === 0)
         el.draggingCardNumber = frames.length;
 
diff --git a/tests/blocksuite/e2e/edgeless/presentation.spec.ts b/tests/blocksuite/e2e/edgeless/presentation.spec.ts
index fea1b3ec0..743eb9bee 100644
--- a/tests/blocksuite/e2e/edgeless/presentation.spec.ts
+++ b/tests/blocksuite/e2e/edgeless/presentation.spec.ts
@@ -148,7 +148,7 @@ test.describe('presentation', () => {
   }) => {
     await edgelessCommonSetup(page);
 
-    await createFrame(page, [100, 100], [100, 200]);
+    await createFrame(page, [100, 100], [200, 200]);
     await createFrame(page, [200, 100], [300, 200]);
     await createFrame(page, [300, 100], [400, 200]);
     await createFrame(page, [400, 100], [500, 200]);