feat(editor): make height of edgeless embed doc to fit content (#12089)

Close [BS-3388](https://linear.app/affine-design/issue/BS-3388/embed-doc-拖入后的初始高度不要超过800，不要限制用户随后的调整空间) This PR impl a extension which initialize the height of added `affine-embed-edgeless-synced-doc-block` to fit its content  ## Summary by CodeRabbit - **New Features** - Improved handling of embedded synced document block height to better fit content within edgeless mode. - **Tests** - Added an end-to-end test to verify correct height adjustment for embedded synced documents in edgeless mode.
2026-07-15 17:16:16 +08:00 · 2025-04-30 18:48:54 +00:00
parent 83e55fad1e
commit e0308c5815
5 changed files with 151 additions and 2 deletions
@@ -13,8 +13,9 @@ import {
  ThemeProvider,
 } from '@blocksuite/affine-shared/services';
 import { Bound } from '@blocksuite/global/gfx';
-import { BlockStdScope } from '@blocksuite/std';
+import { type BlockComponent, BlockStdScope } from '@blocksuite/std';
 import { html, nothing } from 'lit';
+import { query, queryAsync } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { guard } from 'lit/directives/guard.js';
@@ -27,6 +28,12 @@ import { EmbedSyncedDocBlockComponent } from './embed-synced-doc-block';
 export class EmbedEdgelessSyncedDocBlockComponent extends toEdgelessEmbedBlock(
  EmbedSyncedDocBlockComponent
 ) {
+  @query('.affine-embed-synced-doc-edgeless-header-wrapper')
+  accessor headerWrapper: HTMLDivElement | null = null;
+
+  @queryAsync('affine-preview-root')
+  accessor contentElement!: Promise<BlockComponent | null>;
+
  protected override _renderSyncedView = () => {
    const { syncedDoc, editorMode } = this;

@@ -5,6 +5,7 @@ import { literal } from 'lit/static-html.js';

 import { EmbedSyncedDocBlockAdapterExtensions } from './adapters/extension';
 import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
+import { HeightInitializationExtension } from './init-height-extension';

 const flavour = EmbedSyncedDocBlockSchema.model.flavour;

@@ -27,4 +28,5 @@ export const EmbedSyncedDocViewExtensions: ExtensionType[] = [
      : literal`affine-embed-synced-doc-block`;
  }),
  createBuiltinToolbarConfigExtension(flavour),
+  HeightInitializationExtension,
 ].flat();
@@ -0,0 +1,78 @@
+import {
+  EmbedSyncedDocBlockSchema,
+  SYNCED_DEFAULT_MAX_HEIGHT,
+  SYNCED_MIN_HEIGHT,
+} from '@blocksuite/affine-model';
+import { DisposableGroup } from '@blocksuite/global/disposable';
+import { clamp } from '@blocksuite/global/gfx';
+import { LifeCycleWatcher } from '@blocksuite/std';
+
+import { EmbedEdgelessSyncedDocBlockComponent } from './embed-edgeless-synced-doc-block';
+
+export class HeightInitializationExtension extends LifeCycleWatcher {
+  static override key = 'embed-synced-doc-block-height-initialization';
+
+  override mounted() {
+    super.mounted();
+
+    this._disposables.add(
+      this.std.store.slots.blockUpdated.subscribe(payload => {
+        if (
+          payload.type === 'add' &&
+          payload.isLocal &&
+          payload.flavour === EmbedSyncedDocBlockSchema.model.flavour &&
+          payload.model.parent?.flavour === 'affine:surface'
+        ) {
+          this._initQueue.add(payload.id);
+        }
+      })
+    );
+
+    this._disposables.add(
+      this.std.view.viewUpdated.subscribe(payload => {
+        if (
+          payload.type === 'block' &&
+          payload.method === 'add' &&
+          this._initQueue.has(payload.id)
+        ) {
+          this._initQueue.delete(payload.id);
+          if (!(payload.view instanceof EmbedEdgelessSyncedDocBlockComponent)) {
+            return;
+          }
+          const block = payload.view;
+
+          block.contentElement
+            .then(contentEl => {
+              if (!contentEl) return;
+
+              const resizeObserver = new ResizeObserver(() => {
+                const headerHeight =
+                  block.headerWrapper?.getBoundingClientRect().height ?? 0;
+                const contentHeight = contentEl.getBoundingClientRect().height;
+
+                const { x, y, w } = block.model.elementBound;
+                const h = clamp(
+                  (headerHeight + contentHeight) / block.gfx.viewport.zoom,
+                  SYNCED_MIN_HEIGHT,
+                  SYNCED_DEFAULT_MAX_HEIGHT
+                );
+                block.model.xywh$.value = `[${x},${y},${w},${h}]`;
+
+                resizeObserver.unobserve(contentEl);
+              });
+              resizeObserver.observe(contentEl);
+            })
+            .catch(console.error);
+        }
+      })
+    );
+  }
+
+  override unmounted(): void {
+    this._disposables.dispose();
+  }
+
+  private readonly _initQueue = new Set<string>();
+
+  private readonly _disposables = new DisposableGroup();
+}
@@ -9,6 +9,8 @@ import {

 export const SYNCED_MIN_WIDTH = 370;
 export const SYNCED_MIN_HEIGHT = 64;
+// the default max height of embed doc, user can adjust height by selected rect over this value
+export const SYNCED_DEFAULT_MAX_HEIGHT = 800;

 export const defaultEmbedSyncedDocBlockProps: EmbedSyncedDocBlockProps = {
  pageId: '',
@@ -1,4 +1,5 @@
 import type { AffineReference } from '@blocksuite/affine/inlines/reference';
+import type { EmbedSyncedDocBlockProps } from '@blocksuite/affine/model';
 import { expect, type Page } from '@playwright/test';

 import { clickView } from '../utils/actions/click.js';
@@ -12,7 +13,7 @@ import {
  isIntersected,
  switchEditorMode,
 } from '../utils/actions/edgeless';
-import { pressEscape } from '../utils/actions/keyboard.js';
+import { pressBackspace, pressEscape } from '../utils/actions/keyboard.js';
 import { enterPlaygroundRoom, waitNextFrame } from '../utils/actions/misc';
 import { test } from '../utils/playwright';
 import { initEmbedSyncedDocState } from './utils';
@@ -75,6 +76,65 @@ test.describe('Embed synced doc in edgeless mode', () => {
    }
  );

+  test('new edgeless embed synced doc should fit in height', async ({
+    page,
+  }) => {
+    const [_, embedDocId] = await initEmbedSyncedDocState(page, [
+      { title: 'Root Doc', content: 'hello root doc' },
+      { title: 'Page 1', content: '1\n2\n3\n4\n5\n6\n7' },
+    ]);
+    await switchEditorMode(page);
+
+    const paragraphHeight = (
+      await page
+        .locator('affine-embed-synced-doc-block affine-paragraph')
+        .boundingBox()
+    )?.height;
+    if (!paragraphHeight) {
+      test.fail();
+      return;
+    }
+
+    const createEmbedDocWithHeight = async (height: number) => {
+      await page.evaluate(
+        ({ embedDocId, height }) => {
+          const std = window.editor.std;
+          const surface = std.store.getModelsByFlavour('affine:surface')[0];
+          std.store.addBlock(
+            'affine:embed-synced-doc',
+            {
+              pageId: embedDocId,
+              xywh: `[0,100,370,${height}]`,
+            } satisfies Partial<EmbedSyncedDocBlockProps>,
+            surface.id
+          );
+        },
+        { embedDocId, height }
+      );
+    };
+
+    const embedSyncedBlockInNote = page.locator(
+      'affine-embed-edgeless-synced-doc-block'
+    );
+
+    {
+      const initHeight = paragraphHeight - 50;
+      await createEmbedDocWithHeight(initHeight);
+      const embedSyncedBoxInNote = await embedSyncedBlockInNote.boundingBox();
+      expect(embedSyncedBoxInNote?.height).toBeGreaterThan(initHeight);
+    }
+
+    await embedSyncedBlockInNote.click();
+    await pressBackspace(page);
+
+    {
+      const initHeight = paragraphHeight + 50;
+      await createEmbedDocWithHeight(initHeight);
+      const embedSyncedBoxInNote = await embedSyncedBlockInNote.boundingBox();
+      expect(embedSyncedBoxInNote?.height).toBeLessThan(initHeight);
+    }
+  });
+
  test.describe('edgeless element toolbar', () => {
    test.beforeEach(async ({ page }) => {
      await initEmbedSyncedDocState(page, [