fix(editor): missing doc mode extension in frame preview (#11348)

Close [BS-2777](https://linear.app/affine-design/issue/BS-2777/frame-preview里的embed-card展示的doc-mode不对)

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)

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;
 

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 {
+  .frame-preview-viewport
-      background-color: transparent;
+    > editor-host
-      background-image: none;
+    > 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;
 

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;
 

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]);