fix(editor): incorrect edgeless viewport in peek view (#11040)

### What Changes
- Fixed incorrect edgeless viewport display in peek view
  - Moved page block viewport fit animation logic from `EdgelessRootBlockComponent` to note config extension
  - Disabled page block viewport fit animation in peek view, using default `fitToScreen` instead
  - @doodlewind Fixed viewport resizing issues by adding a immediate update mechanism to ensure proper rendering during peek view operations.  The setViewportByBound is only called once during peek view initialization, so there are barely perf overhead.
- Updated related test cases
  - Refactored peek view test cases to make them clearer and more reliable
  - Added new test helper function `getViewportBound` for getting viewport boundary information

tests/affine-local/e2e/peek-view.spec.ts

@@ -1,12 +1,14 @@
 import { test } from '@affine-test/kit/playwright';
 import {
-  clickEdgelessModeButton,
-  clickPageModeButton,
+  getSelectedXYWH,
+  getViewportBound,
 } from '@affine-test/kit/utils/editor';
+import { pressEnter, pressEscape } from '@affine-test/kit/utils/keyboard';
 import { openHomePage } from '@affine-test/kit/utils/load-page';
 import {
   clickNewPageButton,
   createLinkedPage,
+  type,
   waitForEmptyEditor,
 } from '@affine-test/kit/utils/page-logic';
 import { expect } from '@playwright/test';
@@ -103,78 +105,66 @@ test('can open peek view via db+click link card', async ({ page }) => {
 });
 
 test('can open peek view for embedded frames', async ({ page }) => {
-  await page.keyboard.press('Enter');
+  const frameInViewport = async () => {
+    const peekView = page.locator('[data-testid="peek-view-modal"]');
+    // wait for peek view ani
+    const frameTitle = peekView.locator('edgeless-editor affine-frame-title');
+    await frameTitle.waitFor({ state: 'visible' });
 
-  // create a frame
-  await page.keyboard.insertText('```frame\nTest Frame\n```');
+    await frameTitle.click();
+    const frameXYWH = await getSelectedXYWH(page, 0, 1);
+    const viewportBound = await getViewportBound(page, 1);
+    return (
+      frameXYWH[0] >= viewportBound[0] &&
+      frameXYWH[1] >= viewportBound[1] &&
+      frameXYWH[0] + frameXYWH[2] <= viewportBound[0] + viewportBound[2] &&
+      frameXYWH[1] + frameXYWH[3] <= viewportBound[1] + viewportBound[3]
+    );
+  };
 
-  await clickEdgelessModeButton(page);
+  await pressEnter(page);
 
-  // select the note
-  await page
-    .locator('affine-edgeless-note:has-text("Test Frame")')
-    .click({ force: true });
-  // enter F to create a frame
-  await page.keyboard.press('f');
+  // create a blank frame using slash command
+  await type(page, '/frame');
+  await pressEnter(page);
 
-  // close affine-banner
-  await page.locator('[data-testid=local-demo-tips-close-button]').click();
-
-  const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
-
-  // insert the frame to page
-  await toolbar.getByLabel('Insert into Page').click();
-
-  // switch back to page mode
-  await clickPageModeButton(page);
-
-  // hover the frame to trigger surface-ref-toolbar
-  await page.locator('affine-surface-ref .affine-surface-ref').hover();
+  const surfaceRef = page.locator('affine-surface-ref');
+  const peekView = page.locator('[data-testid="peek-view-modal"]');
 
+  await expect(surfaceRef).toBeVisible();
+  await surfaceRef.hover();
   await page
     .locator('affine-surface-ref-toolbar editor-menu-button[aria-label="Open"]')
     .click();
-
   await page
     .locator(
       'affine-surface-ref-toolbar editor-menu-action[aria-label="Open in center peek"]'
     )
     .click();
 
-  // verify peek view is opened
-  await expect(page.getByTestId('peek-view-modal')).toBeVisible();
-
-  // check if page is in edgeless mode
-  await expect(
-    page.locator('edgeless-editor').locator('affine-frame')
-  ).toBeInViewport();
-
-  // close peek view
-  await page.keyboard.press('Escape');
+  await expect(peekView).toBeVisible();
+  expect(await frameInViewport()).toBe(true);
+  await pressEscape(page);
+  await expect(peekView).toBeHidden();
 
   // check if can open peek view by shift+click
-  await page
-    .locator('affine-surface-ref .affine-surface-ref')
-    .click({ modifiers: ['Shift'] });
+  await surfaceRef.click({ modifiers: ['Shift'] });
 
-  // check if page is in edgeless mode
-  await expect(
-    page.locator('edgeless-editor').locator('affine-frame')
-  ).toBeInViewport();
-
-  // close peek view
-  await page.keyboard.press('Escape');
+  await expect(peekView).toBeVisible();
+  expect(await frameInViewport()).toBe(true);
+  await pressEscape(page);
+  await expect(peekView).toBeHidden();
 
   // check if can open peek view by double click
-  await page.locator('affine-surface-ref .affine-surface-ref').dblclick();
-  // check if page is in edgeless mode
-  await expect(
-    page.locator('edgeless-editor').locator('affine-frame')
-  ).toBeInViewport();
+  await surfaceRef.dblclick();
+  await expect(peekView).toBeVisible();
+  expect(await frameInViewport()).toBe(true);
+  await pressEscape(page);
+  await expect(peekView).toBeHidden();
 
   // can close modal when navigate
   await openHomePage(page);
-  await expect(page.getByTestId('peek-view-modal')).not.toBeVisible();
+  await expect(peekView).toBeHidden();
 });
 
 test.skip('can open peek view for fav link', async ({ page }) => {

tests/kit/src/utils/editor.ts

@@ -109,6 +109,17 @@ export async function getViewportCenter(page: Page, editorIndex = 0) {
   });
 }
 
+export async function getViewportBound(page: Page, editorIndex = 0) {
+  const container = locateEditorContainer(page, editorIndex);
+  return container.evaluate(container => {
+    const root = container.querySelector('affine-edgeless-root');
+    if (!root) {
+      throw new Error('Edgeless root not found');
+    }
+    return root.gfx.viewport.viewportBounds.toXYWH();
+  });
+}
+
 export async function setViewportCenter(
   page: Page,
   center: IVec,