From f8587af001dce27fc383fe32a5102c935331c6f2 Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Mon, 19 May 2025 16:20:29 +0000
Subject: [PATCH] fix(editor): incorrect height calculation of folded embed doc
 (#12348)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix [BS-3418](https://linear.app/affine-design/issue/BS-3418/折叠的embed-doc调整宽度时，会出现一个最小高度，不需要这个)

This PR keeps the content of embed-synced-doc rendered (but clipped) when it is collapsed, to ensure accuracy in height calculation of content.

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

- **Bug Fixes**
  - Improved the display logic for embedded synced document editors, ensuring the editor and overlay are always rendered regardless of the folded state.

- **Tests**
  - Updated test assertions to more accurately check whether embedded editor content is within the viewport, enhancing reliability of visibility checks.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../embed-edgeless-synced-doc-block.ts        | 29 ++++++++-----------
 .../e2e/blocksuite/embed/synced.spec.ts       | 16 +++++-----
 2 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/embed-edgeless-synced-doc-block.ts b/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/embed-edgeless-synced-doc-block.ts
index 176c186379..55d81238a1 100644
--- a/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/embed-edgeless-synced-doc-block.ts
+++ b/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/embed-edgeless-synced-doc-block.ts
@@ -20,7 +20,6 @@ import { choose } from 'lit/directives/choose.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { guard } from 'lit/directives/guard.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { when } from 'lit/directives/when.js';
 
 import { EmbedSyncedDocConfigExtension } from './configs';
 import { EmbedSyncedDocBlockComponent } from './embed-synced-doc-block';
@@ -123,22 +122,18 @@ export class EmbedEdgelessSyncedDocBlockComponent extends toEdgelessEmbedBlock(
           <div class="affine-embed-synced-doc-edgeless-header-wrapper">
             ${header}
           </div>
-          ${when(
-            !this.model.isFolded,
-            () =>
-              html`<div class="affine-embed-synced-doc-editor">
-                  ${this.isPageMode && this._isEmptySyncedDoc
-                    ? html`
-                        <div class="affine-embed-synced-doc-editor-empty">
-                          <span>
-                            This is a linked doc, you can add content here.
-                          </span>
-                        </div>
-                      `
-                    : guard([editorMode, syncedDoc], renderEditor)}
-                </div>
-                <div class="affine-embed-synced-doc-editor-overlay"></div>`
-          )}
+          <div class="affine-embed-synced-doc-editor">
+            ${this.isPageMode && this._isEmptySyncedDoc
+              ? html`
+                  <div class="affine-embed-synced-doc-editor-empty">
+                    <span>
+                      This is a linked doc, you can add content here.
+                    </span>
+                  </div>
+                `
+              : guard([editorMode, syncedDoc], renderEditor)}
+          </div>
+          <div class="affine-embed-synced-doc-editor-overlay"></div>
         </div>
       `
     );
diff --git a/tests/affine-local/e2e/blocksuite/embed/synced.spec.ts b/tests/affine-local/e2e/blocksuite/embed/synced.spec.ts
index 77a682d368..1eca8d4eaa 100644
--- a/tests/affine-local/e2e/blocksuite/embed/synced.spec.ts
+++ b/tests/affine-local/e2e/blocksuite/embed/synced.spec.ts
@@ -88,11 +88,11 @@ test.describe('edgeless', () => {
       const content = embedBlock.locator('editor-host');
 
       await expect(foldButton).toHaveAttribute('data-folded', 'false');
-      await expect(content).toBeVisible();
+      await expect(content).toBeInViewport();
 
       await foldButton.click();
 
-      await expect(content).toBeHidden();
+      await expect(content).not.toBeInViewport();
       await expect(foldButton).toHaveAttribute('data-folded', 'true');
     });
 
@@ -123,11 +123,11 @@ test.describe('edgeless', () => {
       const content = embedBlock.locator('editor-host');
 
       await expect(foldButton).toHaveAttribute('data-folded', 'true');
-      await expect(content).toBeHidden();
+      await expect(content).not.toBeInViewport();
 
       await foldButton.click();
       await expect(foldButton).toHaveAttribute('data-folded', 'false');
-      await expect(content).toBeVisible();
+      await expect(content).toBeInViewport();
 
       await embedBlock.click();
       const [, , , h2] = await getSelectedXYWH(page);
@@ -149,20 +149,20 @@ test.describe('edgeless', () => {
       await foldButton.click();
 
       await resizeElementByHandle(page, [50, 0], 'bottom-right');
-      await expect(content).toBeHidden();
+      await expect(content).not.toBeInViewport();
       await expect(foldButton).toHaveAttribute('data-folded', 'true');
 
       await resizeElementByHandle(page, [-50, 0], 'bottom-right');
-      await expect(content).toBeHidden();
+      await expect(content).not.toBeInViewport();
       await expect(foldButton).toHaveAttribute('data-folded', 'true');
 
       await resizeElementByHandle(page, [0, 50], 'bottom-right');
       await expect(
         content,
         'should unfold the embed synced doc when adjust height to greater'
-      ).toBeVisible();
+      ).toBeInViewport();
       await expect(foldButton).toHaveAttribute('data-folded', 'false');
-      await expect(content).toBeVisible();
+      await expect(content).toBeInViewport();
     });
   });
 });