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

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## 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.
<!-- 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

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

blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/embed-synced-doc-spec.ts

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

blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/init-height-extension.ts

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