From 6b0639facd88b8b953ea134176bfff0683cd9d19 Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Mon, 10 Mar 2025 04:41:20 +0000
Subject: [PATCH] fix(editor): repeated instantiation of frame preview editor
 (#10729)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Close [BS-2774](https://linear.app/affine-design/issue/BS-2774/frame-preview-会重新创建editor)
---
 .../src/edgeless/components/frame/frame-preview.ts  | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/frame/frame-preview.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/frame/frame-preview.ts
index 2c4617d6d0..a43f9e4a9a 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/components/frame/frame-preview.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/components/frame/frame-preview.ts
@@ -14,6 +14,7 @@ import { DisposableGroup } from '@blocksuite/global/slot';
 import { type Query, type Store } from '@blocksuite/store';
 import { css, html, nothing, type PropertyValues } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
+import { guard } from 'lit/directives/guard.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import debounce from 'lodash-es/debounce';
 
@@ -151,7 +152,6 @@ export class FramePreview extends WithDisposable(ShadowlessElement) {
   }
 
   private _renderSurfaceContent() {
-    if (!this._previewDoc || !this.frame) return nothing;
     const { width, height } = this.frameViewportWH;
 
     const _previewSpec = this._previewSpec.value;
@@ -169,10 +169,13 @@ export class FramePreview extends WithDisposable(ShadowlessElement) {
           height: `${height}px`,
         })}
       >
-        ${new BlockStdScope({
-          store: this._previewDoc,
-          extensions: _previewSpec,
-        }).render()}
+        ${guard([this._previewDoc, this.frame], () => {
+          if (!this._previewDoc || !this.frame) return nothing;
+          return new BlockStdScope({
+            store: this._previewDoc,
+            extensions: _previewSpec,
+          }).render();
+        })}
       </div>
     </div>`;
   }