fix(editor): incorrect height calculation of folded embed doc (#12348)

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 -->

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(
+          <div class="affine-embed-synced-doc-editor">
-            !this.model.isFolded,
+            ${this.isPageMode && this._isEmptySyncedDoc
-            () =>
+              ? html`
-              html`<div class="affine-embed-synced-doc-editor">
+                  <div class="affine-embed-synced-doc-editor-empty">
-                  ${this.isPageMode && this._isEmptySyncedDoc
+                    <span>
-                    ? html`
+                      This is a linked doc, you can add content here.
-                        <div class="affine-embed-synced-doc-editor-empty">
+                    </span>
-                          <span>
+                  </div>
-                            This is a linked doc, you can add content here.
+                `
-                          </span>
+              : guard([editorMode, syncedDoc], renderEditor)}
-                        </div>
+          </div>
-                      `
+          <div class="affine-embed-synced-doc-editor-overlay"></div>
-                    : guard([editorMode, syncedDoc], renderEditor)}
-                </div>
-                <div class="affine-embed-synced-doc-editor-overlay"></div>`
-          )}
         </div>
       `
     );

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();
     });
   });
 });