feat(editor): insert embed doc with quick search by default (#12165)

Close [BS-3404](https://linear.app/affine-design/issue/BS-3404/通过embed-doc时，插入的doc还是card-view，应该要默认embed-view)

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

- **New Features**
  - Added the ability to insert and display embedded synced documents, supporting different link types based on editor mode and user preferences.
  - Introduced new UI interactions and view options for embedded synced documents in edgeless mode.

- **Bug Fixes**
  - Updated UI selectors and preference keys to ensure consistent behavior and correct application of user settings.

- **Tests**
  - Added and updated end-to-end tests for embedding synced documents, including header interactions and viewport fitting.
  - Improved test coverage for quick search insertion and edgeless embed synced doc features.

- **Chores**
  - Renamed settings and updated exports to align with new embedding functionality.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -29,6 +29,8 @@ test('should close embed editing modal when editor switching to page mode by sho
   await page.keyboard.press('@');
   await page.getByTestId('cmdk-label').getByText('Getting Started').click();
   const toolbar = locateToolbar(page);
+  await toolbar.getByLabel('Switch view').click();
+  await toolbar.getByLabel('Card view').click();
   await toolbar.getByLabel('Edit').click();
 
   const editingModal = page.locator('embed-card-edit-modal');

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

@@ -1,9 +1,12 @@
 import { test } from '@affine-test/kit/playwright';
 import {
   clickEdgelessModeButton,
+  clickView,
   createEdgelessNoteBlock,
+  fitViewportToContent,
   locateEditorContainer,
 } from '@affine-test/kit/utils/editor';
+import { pressEnter } from '@affine-test/kit/utils/keyboard';
 import { openHomePage } from '@affine-test/kit/utils/load-page';
 import {
   clickNewPageButton,
@@ -18,6 +21,8 @@ test.beforeEach(async ({ page }) => {
   await openHomePage(page);
   await waitForEditorLoad(page);
   await clickNewPageButton(page, title);
+  await pressEnter(page);
+  await page.keyboard.type('test content');
   await clickEdgelessModeButton(page);
   const container = locateEditorContainer(page);
   await container.click();
@@ -56,3 +61,43 @@ test('should not show hidden note in embed view page mode', async ({
   await expect(embedLink.getByText(/visible content/)).toBeVisible();
   await expect(embedLink.getByText(/hidden content/)).toBeHidden();
 });
+
+test.describe('edgeless', () => {
+  test.beforeEach(async ({ page }) => {
+    await clickNewPageButton(page);
+    await clickEdgelessModeButton(page);
+    await clickView(page, [0, 0]);
+    await page.keyboard.type('@' + title);
+    await page
+      .getByTestId('cmdk-quick-search')
+      .getByText(/^Synced Block Test$/)
+      .click();
+    await fitViewportToContent(page);
+  });
+
+  test.describe('header of edgeless embed synced doc', () => {
+    test('should fold button works', async ({ page }) => {
+      const embedBlock = page.locator('affine-embed-edgeless-synced-doc-block');
+      const foldButton = embedBlock.getByTestId(
+        'edgeless-embed-synced-doc-fold-button'
+      );
+      const content = embedBlock.locator('editor-host');
+
+      await expect(foldButton).toHaveAttribute('data-folded', 'false');
+      await expect(content).toBeVisible();
+
+      await foldButton.click();
+
+      await expect(content).toBeHidden();
+      await expect(foldButton).toHaveAttribute('data-folded', 'true');
+    });
+
+    test('should show title in header', async ({ page }) => {
+      const embedBlock = page.locator('affine-embed-edgeless-synced-doc-block');
+      const headerTitle = embedBlock.getByTestId(
+        'edgeless-embed-synced-doc-title'
+      );
+      await expect(headerTitle).toHaveText(title);
+    });
+  });
+});

tests/affine-local/e2e/quick-search.spec.ts

@@ -484,21 +484,21 @@ test('can use @ to open quick search to search for doc and insert into canvas',
   // press enter to insert the page to canvas
   await page.keyboard.press('Enter');
   await expect(
-    page.locator('affine-embed-edgeless-linked-doc-block')
+    page.locator('affine-embed-edgeless-synced-doc-block')
   ).toBeVisible();
   await expect(
-    page.locator('.affine-embed-linked-doc-content-title')
+    page.getByTestId('edgeless-embed-synced-doc-title')
   ).toContainText(docTitle);
 
   // focus on the note block
   await page.waitForTimeout(500);
   await page
-    .locator('affine-embed-edgeless-linked-doc-block')
+    .locator('affine-embed-edgeless-synced-doc-block')
     .click({ force: true });
   await page.waitForTimeout(500);
   // double clock to show peek view
   await page
-    .locator('affine-embed-edgeless-linked-doc-block')
+    .locator('affine-embed-edgeless-synced-doc-block')
     .dblclick({ force: true });
   await expect(page.getByTestId('peek-view-modal')).toBeVisible();
 });

tests/kit/src/utils/editor.ts

@@ -163,6 +163,17 @@ export async function setViewportZoom(page: Page, zoom = 1, editorIndex = 0) {
   }, zoom);
 }
 
+export async function fitViewportToContent(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');
+    }
+    root.gfx.fitToScreen();
+  });
+}
+
 /**
  * Convert a canvas point to view coordinate
  * @param point the coordinate on the canvas