From bcc892c8ec2ff4d88e0fbf89b3db6c76cd135c38 Mon Sep 17 00:00:00 2001
From: congzhou09 <yuancongzhou@yeah.net>
Date: Thu, 27 Nov 2025 23:29:19 +0800
Subject: [PATCH] fix(editor): one-time size mismatch during surface-block
 resize after zoom change in edgeless mode (#14019)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### Problem

There's a one-time content-size mismatch during surface-block resize
after a zoom change in edgeless mode, as shown in the image and video
below.

<img width="885" height="359" alt="图片"
src="https://github.com/user-attachments/assets/97a85924-1ca1-4b48-b334-6f19c7c41f49"
/>



https://github.com/user-attachments/assets/1c0e854c-b12e-4edc-9266-6358e0cf9d5a


### Reason and resolve

`Viewport` maintains a `_cachedBoundingClientRect` that stores the
synced-doc-block’s bounding box size. This cache is cleared by a
ResizeObserver on resizing.

In `EmbedSyncedDocBlockComponent`, `fitToContent()` depends on this
cache, and is triggered by another ResizeObserver registered in
`_initEdgelessFitEffect()`.

Since `_initEdgelessFitEffect()` is invoked before the `Viewport`’s
ResizeObserver is registered — dut to `_renderSyncedView()` not being
called for the first-time in `renderBlock()` — `fitToContent()` reads a
stale cached value at the beginning of the resize, resulting in the
one-time content-size mismatch.

This PR ensures that `_initEdgelessFitEffect()` is called after the
registration of the ResizeObserver in `Viewport`.

### After



https://github.com/user-attachments/assets/e95815e2-0575-4108-a366-ea5c00efe482



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

## Summary by CodeRabbit

* **Bug Fixes**
* Improved initialization sequence for embedded synced documents to
ensure proper rendering and resize handling, preventing potential issues
with stale data during component setup.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../embed-synced-doc-block.ts                      | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/embed-synced-doc-block.ts b/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/embed-synced-doc-block.ts
index 7560dc564f..7b759429b8 100644
--- a/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/embed-synced-doc-block.ts
+++ b/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/embed-synced-doc-block.ts
@@ -56,6 +56,9 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
   // Caches total bounds, includes all blocks and elements.
   private _cachedBounds: Bound | null = null;
 
+  private _hasRenderedSyncedView = false;
+  private _hasInitedFitEffect = false;
+
   private readonly _initEdgelessFitEffect = () => {
     const fitToContent = () => {
       if (this.isPageMode) return;
@@ -558,8 +561,6 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
         this._selectBlock();
       }
     });
-
-    this._initEdgelessFitEffect();
   }
 
   override renderBlock() {
@@ -587,12 +588,21 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
       );
     }
 
+    !this._hasRenderedSyncedView && (this._hasRenderedSyncedView = true);
+
     return this._renderSyncedView();
   }
 
   override updated(changedProperties: PropertyValues) {
     super.updated(changedProperties);
     this.syncedDocCard?.requestUpdate();
+
+    if (!this._hasInitedFitEffect && this._hasRenderedSyncedView) {
+      /* Register the resizeObserver AFTER syncdView viewport's own resizeObserver
+       * so that viewport.onResize() use up-to-date boundingClientRect values */
+      this._hasInitedFitEffect = true;
+      this._initEdgelessFitEffect();
+    }
   }
 
   @state()