Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-14 16:46:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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 -->
This commit is contained in:
L-Sun
2025-05-19 16:20:29 +00:00
parent eb185255a3
commit f8587af001
2 changed files with 20 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/embed-edgeless-synced-doc-block.ts
+12 -17
View File
@@ -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>
`
);
tests/affine-local/e2e/blocksuite/embed/synced.spec.ts
+8 -8
View File
@@ -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();
});
});
});