fix(editor): adjustment of scaled and folded synced doc (#12294)

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

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

## Summary by CodeRabbit

- **New Features**
  - Added support for dynamically scaling the height of embedded synced document blocks, including proper handling when folding and unfolding.
  - Introduced a new property to track the scaled height of folded synced document blocks.

- **Bug Fixes**
  - Improved accuracy of height calculations for synced document blocks by accounting for both viewport zoom and block scale.

- **Tests**
  - Enhanced end-to-end tests to consistently apply scaling before running size adjustment checks.
  - Added a utility function to simulate scaling elements with keyboard shortcuts during test execution.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/configs/edgeless-interaction.ts

@@ -52,23 +52,25 @@ export const EmbedSyncedDocInteraction =
               scale = newBound.w / realWidth;
             }
 
-            const newWidth = newBound.w / scale;
-
             newBound.w =
-              clamp(newWidth, constraint.minWidth, constraint.maxWidth) * scale;
+              clamp(
+                newBound.w / scale,
+                constraint.minWidth,
+                constraint.maxWidth
+              ) * scale;
             newBound.h =
-              clamp(newBound.h, constraint.minHeight, constraint.maxHeight) *
-              scale;
+              clamp(
+                newBound.h / scale,
+                constraint.minHeight,
+                constraint.maxHeight
+              ) * scale;
 
             const newHeight = newBound.h / scale;
 
-            // only adjust height check the fold state
-            if (originalBound.w === newBound.w) {
-              let preFoldHeight = 0;
-              if (newHeight === constraint.minHeight) {
-                preFoldHeight = initHeight;
-              }
-              model.props.preFoldHeight = preFoldHeight;
+            if (model.isFolded && newHeight > constraint.minHeight) {
+              model.props.preFoldHeight = 0;
+            } else if (!model.isFolded && newHeight <= constraint.minHeight) {
+              model.props.preFoldHeight = initHeight;
             }
 
             model.props.scale = scale;

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

@@ -76,6 +76,8 @@ export function calcSyncedDocFullHeight(block: BlockComponent) {
   const bottomPadding = 8;
 
   return (
-    (headerHeight + contentHeight + bottomPadding) / block.gfx.viewport.zoom
+    (headerHeight + contentHeight + bottomPadding) /
+    block.gfx.viewport.zoom /
+    (block.model.props.scale ?? 1)
   );
 }

blocksuite/affine/model/src/blocks/embed/synced-doc/synced-doc-model.ts

@@ -11,6 +11,10 @@ export type EmbedSyncedDocBlockProps = {
   style: EmbedCardStyle;
   caption?: string | null;
   scale?: number;
+  /**
+   * Record the scaled height of the synced doc block when it is folded,
+   * a.k.a the fourth number of the `xywh`
+   */
   preFoldHeight?: number;
 } & ReferenceInfo &
   GfxCompatibleProps;

packages/frontend/core/src/blocksuite/view-extensions/edgeless-block-header/edgeless-embed-synced-doc-header.tsx

@@ -43,7 +43,7 @@ const ToggleButton = ({ model }: { model: EmbedSyncedDocModel }) => {
         model.props.preFoldHeight$.value = 0;
       } else {
         model.props.preFoldHeight$.value = h;
-        model.props.xywh$.value = `[${x},${y},${w},${styles.headerHeight}]`;
+        model.props.xywh$.value = `[${x},${y},${w},${styles.headerHeight * (model.props.scale ?? 1)}]`;
       }
     });
   }, [model]);

tests/affine-local/e2e/blocksuite/embed/synced.spec.ts

@@ -7,6 +7,7 @@ import {
   getSelectedXYWH,
   locateEditorContainer,
   resizeElementByHandle,
+  scaleElementByHandle,
 } from '@affine-test/kit/utils/editor';
 import { pressEnter } from '@affine-test/kit/utils/keyboard';
 import { openHomePage } from '@affine-test/kit/utils/load-page';
@@ -105,6 +106,10 @@ test.describe('edgeless', () => {
   });
 
   test.describe('size adjustment of embed synced doc', () => {
+    test.beforeEach(async ({ page }) => {
+      await scaleElementByHandle(page, [10, 10], 'bottom-right');
+    });
+
     test('should fold embed synced doc when adjust height to smallest', async ({
       page,
     }) => {

tests/kit/src/utils/editor.ts

@@ -476,6 +476,25 @@ export async function resizeElementByHandle(
   await dragView(page, from, to, editorIndex);
 }
 
+export async function scaleElementByHandle(
+  page: Page,
+  delta: IVec,
+  corner:
+    | 'right'
+    | 'left'
+    | 'top'
+    | 'bottom'
+    | 'top-left'
+    | 'top-right'
+    | 'bottom-right'
+    | 'bottom-left' = 'top-left',
+  editorIndex = 0
+) {
+  await page.keyboard.down('Shift');
+  await resizeElementByHandle(page, delta, corner, editorIndex);
+  await page.keyboard.up('Shift');
+}
+
 /**
  * Create a not block in canvas
  * @param position the position or xwyh of the note block in canvas