snapshot of https://github.com/toeverything/AFFiNE.git (canary, 2026-09-16; blobs > 131072B omitted)

tests/affine-local/e2e/blocksuite/edgeless/auto-complete.spec.ts

@@ -0,0 +1,100 @@
+import { test } from '@affine-test/kit/playwright';
+import {
+  clickEdgelessModeButton,
+  clickView,
+  dragView,
+  locateEditorContainer,
+  locateToolbar,
+  setEdgelessTool,
+  toViewCoord,
+} from '@affine-test/kit/utils/editor';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await waitForEditorLoad(page);
+  await clickNewPageButton(page);
+  await clickEdgelessModeButton(page);
+  const container = locateEditorContainer(page);
+  await container.click();
+});
+
+test('should hide toolbar when creating connector', async ({ page }) => {
+  await setEdgelessTool(page, 'shape');
+  await dragView(page, [100, 300], [200, 400]);
+  await clickView(page, [150, 350]);
+
+  const toolbar = locateToolbar(page);
+
+  await expect(toolbar).toBeVisible();
+
+  const autoComplete = page.locator('edgeless-auto-complete');
+  const rightArrowButton = autoComplete
+    .locator('.edgeless-auto-complete-arrow')
+    .nth(0);
+
+  const bounds = await rightArrowButton.boundingBox();
+  expect(bounds).not.toBeNull();
+
+  const { x, y, width: w, height: h } = bounds!;
+  const startPos = [x + w / 2, y + h / 2];
+  const endPos = [startPos[0] + 100, startPos[1] + 100];
+
+  await page.mouse.move(startPos[0], startPos[1]);
+  await page.mouse.down();
+  await page.mouse.move(endPos[0], endPos[1]);
+
+  await expect(toolbar).toBeHidden();
+
+  await page.mouse.up();
+
+  const autoCompletePanel = page
+    .locator('edgeless-auto-complete-panel')
+    .locator('.auto-complete-panel-container');
+
+  await expect(toolbar).toBeHidden();
+  await expect(autoCompletePanel).toBeVisible();
+});
+
+test('should toggle toolbar when connecting target', async ({ page }) => {
+  await setEdgelessTool(page, 'shape');
+  // source
+  await dragView(page, [100, 300], [200, 400]);
+
+  // target
+  await setEdgelessTool(page, 'shape');
+  await dragView(page, [300, 300], [400, 400]);
+
+  await clickView(page, [150, 350]);
+
+  const toolbar = locateToolbar(page);
+
+  await expect(toolbar).toBeVisible();
+
+  const autoComplete = page.locator('edgeless-auto-complete');
+  const rightArrowButton = autoComplete
+    .locator('.edgeless-auto-complete-arrow')
+    .nth(0);
+
+  const bounds = await rightArrowButton.boundingBox();
+  expect(bounds).not.toBeNull();
+
+  const { x, y, width: w, height: h } = bounds!;
+  const startPos = [x + w / 2, y + h / 2];
+  const endPos = await toViewCoord(page, [300, 350]);
+
+  await page.mouse.move(startPos[0], startPos[1]);
+  await page.mouse.down();
+  await page.mouse.move(endPos[0], endPos[1]);
+
+  await expect(toolbar).toBeHidden();
+
+  await page.mouse.up();
+
+  await expect(toolbar).toBeVisible();
+});

tests/affine-local/e2e/blocksuite/edgeless/canvas-renderer.perf.spec.ts

@@ -0,0 +1,197 @@
+import { test } from '@affine-test/kit/playwright';
+import {
+  type CanvasRendererPerfSnapshot,
+  deleteEdgelessElements,
+  getCanvasRendererPerfSnapshot,
+  resetCanvasRendererPerfMetrics,
+  seedEdgelessPerfScene,
+} from '@affine-test/kit/utils/edgeless-perf';
+import {
+  clickEdgelessModeButton,
+  dragView,
+  fitViewportToContent,
+  getEdgelessSelectedIds,
+  getSelectedXYWH,
+  locateEditorContainer,
+  setEdgelessTool,
+  setViewportZoom,
+} from '@affine-test/kit/utils/editor';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { expect } from '@playwright/test';
+
+const PERF_ENV = 'AFFINE_RUN_PERF_E2E';
+const perfEnabled = process.env[PERF_ENV] === '1';
+const modKey = process.platform === 'darwin' ? 'Meta' : 'Control';
+
+type PerfScenarioResult = {
+  name: string;
+  snapshot: CanvasRendererPerfSnapshot;
+};
+
+test.describe.serial('canvas renderer perf probes', () => {
+  test.skip(!perfEnabled, `Set ${PERF_ENV}=1 to run manual perf probes`);
+
+  test.beforeEach(async ({ page }) => {
+    await openHomePage(page);
+    await waitForEditorLoad(page);
+    await clickNewPageButton(page);
+    await clickEdgelessModeButton(page);
+    await locateEditorContainer(page).click();
+  });
+
+  test('collect metrics for common edgeless canvas scenarios', async ({
+    page,
+  }, testInfo) => {
+    test.slow();
+
+    const results: PerfScenarioResult[] = [];
+    let addedShapeIds: string[] = [];
+
+    const selectWholePerfScene = async () => {
+      await setEdgelessTool(page, 'default');
+      await dragView(page, [80, 140], [2300, 1500]);
+      await expect
+        .poll(async () => (await getEdgelessSelectedIds(page)).length)
+        .toBeGreaterThan(0);
+    };
+
+    const recordScenario = async (
+      name: string,
+      action: () => Promise<void>
+    ) => {
+      await resetCanvasRendererPerfMetrics(page);
+      await action();
+      await page.waitForTimeout(400);
+
+      const snapshot = await getCanvasRendererPerfSnapshot(page);
+      results.push({ name, snapshot });
+      console.log(
+        `[canvas-perf] ${name}: ${JSON.stringify(snapshot.metrics, null, 2)}`
+      );
+    };
+
+    const initial = await seedEdgelessPerfScene(page, {
+      shapeCount: 120,
+      rowLength: 12,
+      startX: 120,
+      startY: 180,
+      width: 160,
+      height: 120,
+    });
+    addedShapeIds = initial.shapeIds;
+
+    await fitViewportToContent(page);
+    await page.waitForTimeout(500);
+
+    await recordScenario('add-shapes', async () => {
+      const seeded = await seedEdgelessPerfScene(page, {
+        shapeCount: 40,
+        rowLength: 10,
+        startX: 160,
+        startY: 1720,
+        width: 160,
+        height: 120,
+      });
+      addedShapeIds = addedShapeIds.concat(seeded.shapeIds);
+      await fitViewportToContent(page);
+    });
+
+    await recordScenario('delete-shapes', async () => {
+      await deleteEdgelessElements(page, addedShapeIds.slice(-20));
+    });
+
+    await recordScenario('box-select', async () => {
+      await selectWholePerfScene();
+    });
+
+    await recordScenario('group-selection', async () => {
+      await selectWholePerfScene();
+      await page.keyboard.press(`${modKey}+g`);
+    });
+
+    await recordScenario('ungroup-selection', async () => {
+      await page.keyboard.press(`${modKey}+Shift+g`);
+    });
+
+    await recordScenario('large-drag-selection', async () => {
+      await selectWholePerfScene();
+      const [x, y, w, h] = await getSelectedXYWH(page);
+      const center: [number, number] = [x + w / 2, y + h / 2];
+      await dragView(page, center, [center[0] + 1200, center[1] + 900]);
+    });
+
+    await recordScenario('large-pan', async () => {
+      await setEdgelessTool(page, 'pan');
+      await dragView(page, [1200, 900], [200, 180]);
+    });
+
+    await recordScenario('large-zoom', async () => {
+      await setViewportZoom(page, 0.25);
+      await page.waitForTimeout(200);
+      await setViewportZoom(page, 2.2);
+      await page.waitForTimeout(200);
+      await fitViewportToContent(page);
+    });
+
+    const finalSnapshot = await getCanvasRendererPerfSnapshot(page);
+
+    expect(finalSnapshot.rendererType).toBe('CanvasRenderer');
+    expect(results.length).toBeGreaterThanOrEqual(7);
+
+    await testInfo.attach('canvas-renderer-perf-scenarios.json', {
+      body: JSON.stringify(results, null, 2),
+      contentType: 'application/json',
+    });
+  });
+
+  test('collect metrics for interleaved block and canvas layers', async ({
+    page,
+  }, testInfo) => {
+    test.slow();
+
+    await seedEdgelessPerfScene(page, {
+      interleaved: true,
+      noteCount: 21,
+      shapeCount: 20,
+      rowLength: 1,
+      startX: 120,
+      startY: 180,
+      width: 180,
+      height: 120,
+    });
+
+    await fitViewportToContent(page);
+    await page.waitForTimeout(500);
+
+    const snapshot = await getCanvasRendererPerfSnapshot(page);
+    const metrics = snapshot.metrics as {
+      canvasMemoryMegabytes?: number;
+      lastRenderMetrics?: {
+        renderByBoundCallCount?: number;
+      };
+      stackingCanvasCount?: number;
+      visibleStackingCanvasCount?: number;
+    } | null;
+    console.log(
+      `[canvas-perf] interleaved-layers: ${JSON.stringify(snapshot, null, 2)}`
+    );
+
+    expect(snapshot.rendererType).toBe('CanvasRenderer');
+    expect(metrics).not.toBeNull();
+    expect(metrics?.stackingCanvasCount ?? 0).toBeGreaterThan(0);
+    expect(
+      metrics?.lastRenderMetrics?.renderByBoundCallCount ?? 0
+    ).toBeGreaterThan(1);
+    expect(metrics?.visibleStackingCanvasCount ?? 0).toBeGreaterThan(0);
+    expect(metrics?.canvasMemoryMegabytes ?? 0).toBeLessThan(5);
+
+    await testInfo.attach('canvas-renderer-layering.json', {
+      body: JSON.stringify(snapshot, null, 2),
+      contentType: 'application/json',
+    });
+  });
+});

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

@@ -0,0 +1,65 @@
+import { test } from '@affine-test/kit/playwright';
+import {
+  clickEdgelessModeButton,
+  clickView,
+  dblclickView,
+  dragView,
+  locateEditorContainer,
+  locateToolbar,
+  setEdgelessTool,
+} from '@affine-test/kit/utils/editor';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  switchEdgelessTheme,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await waitForEditorLoad(page);
+  await clickNewPageButton(page);
+  await clickEdgelessModeButton(page);
+  const container = locateEditorContainer(page);
+  await container.click();
+});
+
+test('should correct text color on toolbar', async ({ page }) => {
+  await setEdgelessTool(page, 'connector');
+  await dragView(page, [100, 300], [200, 400]);
+  await dblclickView(page, [150, 350]);
+
+  await expect(
+    page.locator('edgeless-connector-label-editor rich-text')
+  ).toBeVisible();
+  await page.keyboard.type('label');
+  await page.keyboard.press('Escape');
+
+  const toolbar = locateToolbar(page);
+  const textColorContainer = toolbar.locator(
+    'edgeless-color-picker-button.text-color'
+  );
+  const textColorBtn = textColorContainer.getByLabel('Text color');
+  const blackBtn = textColorContainer
+    .locator('edgeless-color-button[active]')
+    .getByLabel('Black');
+
+  await expect(textColorContainer).toBeVisible();
+
+  await textColorBtn.click();
+  await expect(blackBtn).toHaveCount(1);
+
+  const svgFillColor = await blackBtn.locator('svg').getAttribute('fill');
+  expect(svgFillColor).toBe('#000000');
+
+  await switchEdgelessTheme(page, 'dark');
+
+  await clickView(page, [150, 350]);
+  await textColorBtn.click();
+
+  await expect(blackBtn).toHaveCount(1);
+
+  const svgFillColor2 = await blackBtn.locator('svg').getAttribute('fill');
+  expect(svgFillColor2).toBe('#ffffff');
+});

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

@@ -0,0 +1,60 @@
+import { test } from '@affine-test/kit/playwright';
+import {
+  clickEdgelessModeButton,
+  dblclickNoteBody,
+  locateEditorContainer,
+  locateToolbar,
+} 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,
+  type,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { isContainedInBoundingBox } from '@affine-test/kit/utils/utils';
+import { expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await waitForEditorLoad(page);
+  await clickNewPageButton(page);
+  await clickEdgelessModeButton(page);
+  const container = locateEditorContainer(page);
+  await container.click();
+});
+
+test('should close embed editing modal when editor switching to page mode by short cut', async ({
+  page,
+}) => {
+  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');
+  await expect(editingModal).toBeVisible();
+
+  await page.keyboard.press('Alt+s');
+  await waitForEditorLoad(page);
+  await expect(editingModal).toBeHidden();
+});
+
+test('embed card should not overflow the edgeless note', async ({ page }) => {
+  const note = page.locator('affine-edgeless-note');
+  await dblclickNoteBody(page);
+  await type(page, '/github');
+  await pressEnter(page);
+  await page
+    .locator('.embed-card-modal-input')
+    .fill('https://github.com/toeverything/AFFiNE/pull/10442');
+  await pressEnter(page);
+
+  const embedCard = page.locator('affine-embed-github-block');
+  await embedCard
+    .locator('.affine-embed-github-block:not(.loading)')
+    .waitFor({ state: 'visible' });
+  expect(await isContainedInBoundingBox(note, embedCard, true)).toBe(true);
+});

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

@@ -0,0 +1,64 @@
+import { test } from '@affine-test/kit/playwright';
+import {
+  clickEdgelessModeButton,
+  clickView,
+  createEdgelessNoteBlock,
+  dragView,
+  locateEditorContainer,
+  locateToolbar,
+  toViewCoord,
+} from '@affine-test/kit/utils/editor';
+import {
+  pressBackspace,
+  pressEscape,
+  selectAllByKeyboard,
+} from '@affine-test/kit/utils/keyboard';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await waitForEditorLoad(page);
+  await clickNewPageButton(page);
+  await clickEdgelessModeButton(page);
+  const container = locateEditorContainer(page);
+  await container.click();
+  await selectAllByKeyboard(page);
+  await pressBackspace(page);
+});
+
+test('should update zindex of element when moving it into frame', async ({
+  page,
+}) => {
+  const toolbar = locateToolbar(page);
+
+  // create a top frame
+  await page.keyboard.press('f');
+  await dragView(page, [0, 100], [300, 400]);
+  await toolbar.getByLabel('Background').click();
+  await toolbar.getByLabel('LightRed').click();
+  await pressEscape(page);
+
+  // create a note
+  await createEdgelessNoteBlock(page, [500, 500]);
+  await clickView(page, [0, 100]);
+  await clickView(page, [500, 500]);
+  await toolbar.getByLabel('More menu').click();
+  await toolbar.getByLabel('Send to Back').click();
+  await pressEscape(page);
+
+  await dragView(page, [500, 500], [100, 200]);
+
+  const point = await toViewCoord(page, [100, 200]);
+
+  const isNoteAboveFrame = await page.evaluate(point => {
+    return !!document
+      .elementFromPoint(point[0], point[1])
+      ?.closest('affine-edgeless-note');
+  }, point);
+  expect(isNoteAboveFrame).toBe(true);
+});

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

@@ -0,0 +1,85 @@
+import { test } from '@affine-test/kit/playwright';
+import {
+  clickEdgelessModeButton,
+  clickView,
+  dragView,
+  locateEditorContainer,
+  locateToolbar,
+  setEdgelessTool,
+} from '@affine-test/kit/utils/editor';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await waitForEditorLoad(page);
+  await clickNewPageButton(page);
+  await clickEdgelessModeButton(page);
+  const container = locateEditorContainer(page);
+  await container.click();
+});
+
+test('should add highlighter', async ({ page }) => {
+  await setEdgelessTool(page, 'highlighter');
+  await dragView(page, [100, 300], [200, 400]);
+
+  await setEdgelessTool(page, 'default');
+  await clickView(page, [150, 350]);
+
+  const toolbar = locateToolbar(page);
+
+  await page.waitForTimeout(250);
+
+  await expect(toolbar).toBeVisible();
+
+  const lineWidthButton = toolbar
+    .locator('affine-slider')
+    .locator('.point-button[data-selected]')
+    .last();
+  const defaultLineWidth = await lineWidthButton.getAttribute('aria-label');
+
+  expect(defaultLineWidth).toBe('22');
+});
+
+test('should exit drawing tools menu when Escape is pressed', async ({
+  page,
+}) => {
+  await setEdgelessTool(page, 'highlighter');
+
+  const drawingToolsMenu = page.locator('edgeless-pen-menu');
+
+  await expect(drawingToolsMenu).toBeVisible();
+
+  await page.keyboard.press('Escape');
+
+  await expect(drawingToolsMenu).toBeHidden();
+});
+
+test('should enter highlighter tool when `Shift + P` is pressed', async ({
+  page,
+}) => {
+  const drawingToolButton = page.locator('.edgeless-pen-button');
+  const drawingToolsMenu = page.locator('edgeless-pen-menu');
+
+  await expect(drawingToolButton).toHaveAttribute('data-drawing-tool', 'brush');
+  await expect(drawingToolsMenu).toBeHidden();
+
+  await page.keyboard.press('Shift+P');
+
+  await expect(drawingToolButton).toHaveAttribute(
+    'data-drawing-tool',
+    'highlighter'
+  );
+  await expect(drawingToolsMenu).toBeVisible();
+
+  await page.keyboard.press('Escape');
+  await expect(drawingToolsMenu).toBeHidden();
+  await expect(drawingToolButton).toHaveAttribute(
+    'data-drawing-tool',
+    'highlighter'
+  );
+});

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

@@ -0,0 +1,535 @@
+import { test } from '@affine-test/kit/playwright';
+import {
+  assertTitle,
+  clickEdgelessModeButton,
+  clickView,
+  createEdgelessNoteBlock,
+  getEdgelessSelectedIds,
+  getPageMode,
+  getSelectedXYWH,
+  isDocTitleFocused,
+  locateEditorContainer,
+  locateModeSwitchButton,
+  locateToolbar,
+  moveToView,
+  resizeElementByHandle,
+  toViewCoord,
+} from '@affine-test/kit/utils/editor';
+import {
+  pasteByKeyboard,
+  pressBackspace,
+  pressEnter,
+  pressEscape,
+  selectAllByKeyboard,
+  undoByKeyboard,
+} from '@affine-test/kit/utils/keyboard';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  type,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { clickLocatorByRatio } from '@affine-test/kit/utils/utils';
+import type { EdgelessRootBlockComponent } from '@blocksuite/affine/blocks/root';
+import type { IVec } from '@blocksuite/affine/global/gfx';
+import type { NoteBlockModel } from '@blocksuite/affine/model';
+import { expect, type Page } from '@playwright/test';
+
+const title = 'Edgeless Note Header Test';
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await waitForEditorLoad(page);
+  await clickNewPageButton(page, title);
+  await page.keyboard.press('Enter');
+  await page.keyboard.type('Hello');
+  await page.keyboard.press('Enter');
+  await page.keyboard.type('World');
+  await clickEdgelessModeButton(page);
+  const container = locateEditorContainer(page);
+  await container.click();
+});
+
+// the first note block is called page block
+test.describe('edgeless page block', () => {
+  const locateHeaderToolbar = (page: Page) =>
+    page.getByTestId('edgeless-page-block-header');
+
+  test('only first note block has header toolbar and its element toolbar', async ({
+    page,
+  }) => {
+    const toolbar = locateHeaderToolbar(page);
+    await expect(toolbar).toHaveCount(1);
+    await expect(toolbar).toBeVisible();
+
+    await createEdgelessNoteBlock(page, [100, 100]);
+
+    await expect(toolbar).toHaveCount(1);
+    await expect(toolbar).toBeVisible();
+  });
+
+  test('should shrink note block when clicking on the toggle button', async ({
+    page,
+  }) => {
+    const toolbar = locateHeaderToolbar(page);
+    const toolBox = await toolbar.boundingBox();
+    const noteBox = await page.locator('affine-edgeless-note').boundingBox();
+    if (!noteBox || !toolBox) throw new Error('Bounding box not found');
+    expect(noteBox.height).toBeGreaterThan(toolBox.height);
+
+    const toggleButton = toolbar.getByTestId('edgeless-note-toggle-button');
+    await toggleButton.click();
+
+    const newNoteBox = await page.locator('affine-edgeless-note').boundingBox();
+    if (!newNoteBox) throw new Error('Bounding box not found');
+    expect(newNoteBox.height).toBe(toolBox.height);
+
+    await toggleButton.click();
+    const newNoteBox2 = await page
+      .locator('affine-edgeless-note')
+      .boundingBox();
+    if (!newNoteBox2) throw new Error('Bounding box not found');
+    expect(newNoteBox2).toEqual(noteBox);
+  });
+
+  test('page title in toolbar should be displayed when page block is collapsed and hidden when page block is not collapsed', async ({
+    page,
+  }) => {
+    const toolbar = locateHeaderToolbar(page);
+    const toolbarTitle = toolbar.getByTestId('edgeless-note-title');
+    await expect(toolbarTitle).toHaveText('');
+
+    const toggleButton = toolbar.getByTestId('edgeless-note-toggle-button');
+    await toggleButton.click();
+    await expect(toolbarTitle).toHaveText(title);
+
+    await toggleButton.click();
+    await expect(toolbarTitle).toHaveText('');
+  });
+
+  test('should switch to page mode when expand button is clicked', async ({
+    page,
+  }) => {
+    const toolbar = locateHeaderToolbar(page);
+    const viewInPageButton = toolbar.getByTestId(
+      'edgeless-note-view-in-page-button'
+    );
+    await viewInPageButton.click();
+
+    expect(await getPageMode(page)).toBe('page');
+  });
+
+  test('should open doc properties dialog when info button is clicked', async ({
+    page,
+  }) => {
+    const toolbar = locateHeaderToolbar(page);
+    const infoButton = toolbar.getByTestId('edgeless-note-info-button');
+    await infoButton.click();
+    const infoModal = page.getByTestId('info-modal');
+    await expect(infoModal).toBeVisible();
+  });
+
+  test('should copy note edgeless link to clipboard when link button is clicked', async ({
+    page,
+  }) => {
+    const toolbar = locateHeaderToolbar(page);
+    await selectAllByKeyboard(page);
+    const noteId = (await getEdgelessSelectedIds(page))[0];
+
+    const linkButton = toolbar.getByTestId('edgeless-note-link-button');
+    await linkButton.click();
+
+    const url = page.url();
+    const link = await page.evaluate(() => navigator.clipboard.readText());
+    expect(link).toBe(`${url}&blockIds=${noteId}`);
+  });
+
+  test('info button should hidden in peek view', async ({ page }) => {
+    const url = page.url();
+    await page.evaluate(url => navigator.clipboard.writeText(url), url);
+
+    await clickNewPageButton(page);
+    await page.keyboard.press('Enter');
+    await pasteByKeyboard(page);
+    const reference = page.locator('affine-reference');
+    await reference.click({ modifiers: ['Shift'] });
+
+    const toolbar = locateHeaderToolbar(page);
+    const infoButton = toolbar.getByTestId('edgeless-note-info-button');
+
+    await expect(toolbar).toBeVisible();
+    await expect(infoButton).toBeHidden();
+  });
+
+  test('caret on focusing', async ({ page }) => {
+    const note = page.locator('affine-edgeless-note');
+    await note.click(); // focus note
+
+    // click on title's rear
+    const docTitle = note.locator('edgeless-page-block-title');
+    await expect(docTitle).toBeVisible();
+    await clickLocatorByRatio(page, docTitle, { xRatio: 0.9, yRatio: 0.8 });
+
+    const hasCaretInTitle = await page.evaluate(
+      hasCaretIn,
+      'edgeless-page-block-title'
+    );
+    expect(hasCaretInTitle).toBe(true);
+
+    await clickLocatorByRatio(page, note, { xRatio: 1.1, yRatio: 0.1 }); // cancel note focus
+    await note.click(); // focus note again
+
+    // click on firstParagraph's rear
+    const firstParagraph = note.locator('affine-paragraph:first-child');
+    await expect(firstParagraph).toBeVisible();
+
+    await clickLocatorByRatio(page, firstParagraph, {
+      xRatio: 0.9,
+      yRatio: 0.5,
+    });
+
+    const hasCaretInParagraph = await page.evaluate(
+      hasCaretIn,
+      'affine-paragraph'
+    );
+    expect(hasCaretInParagraph).toBe(true);
+
+    function hasCaretIn(elemSelector: string) {
+      const sel = document.getSelection();
+      if (!sel || sel.rangeCount === 0) return false;
+
+      const startContainer = sel.getRangeAt(0).startContainer;
+      const selContainer =
+        startContainer.nodeType === Node.TEXT_NODE
+          ? startContainer.parentElement
+          : startContainer;
+
+      if (!selContainer) return false;
+
+      const closestDstElem = (selContainer as HTMLElement)?.closest(
+        elemSelector
+      );
+      if (!closestDstElem) return false;
+      return true;
+    }
+  });
+
+  test('page title should be editable', async ({ page }) => {
+    const note = page.locator('affine-edgeless-note');
+    const docTitle = note.locator('edgeless-page-block-title');
+    await expect(docTitle).toBeVisible();
+    await assertTitle(page, title);
+
+    await note.dblclick();
+    await docTitle.click();
+
+    // clear the title
+    await selectAllByKeyboard(page);
+    await pressBackspace(page);
+    await assertTitle(page, '');
+
+    // type new title
+    await type(page, 'New Title');
+    await assertTitle(page, 'New Title');
+
+    // cursor could move between doc title and note content
+    await page.keyboard.press('ArrowDown');
+    await type(page, 'xx');
+
+    const paragraphs = note.locator('affine-paragraph v-line');
+    const numParagraphs = await paragraphs.count();
+    await expect(paragraphs.first()).toHaveText('xxHello');
+
+    await page.keyboard.press('ArrowUp');
+    await type(page, 'yy');
+    await assertTitle(page, 'yyNew Title');
+
+    await pressEnter(page);
+    await assertTitle(page, 'yy');
+    await expect(paragraphs).toHaveCount(numParagraphs + 1);
+    await expect(paragraphs.nth(0)).toHaveText('New Title');
+    await expect(paragraphs.nth(1)).toHaveText('xxHello');
+  });
+});
+
+test.describe('edgeless note element toolbar', () => {
+  test('the toolbar of page block should not contains auto-height button and display in page button', async ({
+    page,
+  }) => {
+    await selectAllByKeyboard(page);
+    const toolbar = locateToolbar(page);
+    const autoHeight = toolbar.getByTestId('auto-height');
+    const displayInPage = toolbar.getByTestId('display-in-page');
+
+    await expect(toolbar).toBeVisible();
+    await expect(autoHeight).toHaveCount(0);
+    await expect(displayInPage).toHaveCount(0);
+  });
+
+  test('the toolbar of note block should contains auto-height button and display in page button', async ({
+    page,
+  }) => {
+    await createEdgelessNoteBlock(page, [100, 100]);
+    await page.waitForSelector('.affine-paragraph-placeholder.visible');
+    await clickView(page, [0, 0]);
+    await clickView(page, [100, 100]);
+
+    const toolbar = locateToolbar(page);
+    const autoHeight = toolbar.getByTestId('auto-height');
+    const displayInPage = toolbar.getByTestId('display-in-page');
+
+    await expect(toolbar).toBeVisible();
+    await expect(autoHeight).toBeVisible();
+    await expect(displayInPage).toBeVisible();
+  });
+
+  test('display in page button', async ({ page }) => {
+    const editorContainer = locateEditorContainer(page);
+    const notes = editorContainer.locator('affine-note');
+
+    await createEdgelessNoteBlock(page, [100, 100]);
+    await page.waitForSelector('.affine-paragraph-placeholder.visible');
+    await page.keyboard.type('Note 2');
+    await clickView(page, [0, 300]);
+    await clickView(page, [100, 100]);
+
+    const toolbar = locateToolbar(page);
+    const displayInPage = toolbar.getByTestId('display-in-page');
+
+    await displayInPage.click();
+    await locateModeSwitchButton(page, 'page').click();
+    await expect(notes).toHaveCount(2);
+
+    await clickEdgelessModeButton(page);
+    await clickView(page, [100, 100]);
+    await displayInPage.click();
+    await locateModeSwitchButton(page, 'page').click();
+    await waitForEditorLoad(page);
+    await expect(notes).toHaveCount(1);
+
+    const undoButton = page.getByTestId('notification-card-undo');
+    const viewTocButton = page.getByTestId('view-in-toc');
+
+    await clickEdgelessModeButton(page);
+    await waitForEditorLoad(page);
+    await clickView(page, [100, 100]);
+    await displayInPage.click();
+    await expect(undoButton).toBeVisible();
+    await expect(viewTocButton).toBeVisible();
+
+    await undoButton.click();
+    await expect(undoButton).toBeHidden();
+    await locateModeSwitchButton(page, 'page').click();
+    await waitForEditorLoad(page);
+    await expect(notes).toHaveCount(1);
+
+    await clickEdgelessModeButton(page);
+    await waitForEditorLoad(page);
+    await clickView(page, [100, 100]);
+    await displayInPage.click();
+    await undoByKeyboard(page);
+    await page.waitForTimeout(500);
+    await expect(
+      undoButton,
+      'the toast should be hidden immediately when undo by keyboard'
+    ).toBeHidden();
+
+    await displayInPage.click();
+    await viewTocButton.click();
+    const toc = page.locator('affine-outline-panel');
+    await toc.waitFor({ state: 'visible' });
+    const highlightNoteCards = toc.locator(
+      'affine-outline-note-card > [data-status="selected"]'
+    );
+    await expect(highlightNoteCards).toHaveCount(1);
+  });
+
+  test('note edgeless styles', async ({ page }) => {
+    const getNoteEdgelessProps = async (page: Page, noteId: string) => {
+      const container = locateEditorContainer(page);
+      return await container.evaluate((container: HTMLElement, noteId) => {
+        const root = container.querySelector(
+          'affine-edgeless-root'
+        ) as EdgelessRootBlockComponent;
+        const note = root.gfx.getElementById(noteId) as NoteBlockModel;
+        return note.props.edgeless;
+      }, noteId);
+    };
+
+    const toolbar = locateToolbar(page);
+
+    await selectAllByKeyboard(page);
+    const noteId = (await getEdgelessSelectedIds(page))[0];
+
+    expect(await getNoteEdgelessProps(page, noteId)).toEqual({
+      style: {
+        borderRadius: 8,
+        borderSize: 4,
+        borderStyle: 'none',
+        shadowType: '--affine-note-shadow-box',
+      },
+    });
+
+    await toolbar.getByRole('button', { name: 'Note Style' }).click();
+    const noteStylePanel = page.locator('edgeless-note-style-panel');
+    await noteStylePanel.getByTestId('affine-note-shadow-film').click();
+
+    expect(await getNoteEdgelessProps(page, noteId)).toEqual({
+      style: {
+        borderRadius: 8,
+        borderSize: 4,
+        borderStyle: 'none',
+        shadowType: '--affine-note-shadow-film',
+      },
+    });
+
+    const borderStylePanel = noteStylePanel.getByTestId(
+      'affine-note-border-style-panel'
+    );
+    await borderStylePanel.locator('.mode-solid').click();
+    await borderStylePanel.locator('affine-slider').getByLabel('8').click();
+
+    expect(await getNoteEdgelessProps(page, noteId)).toEqual({
+      style: {
+        borderRadius: 8,
+        borderSize: 8,
+        borderStyle: 'solid',
+        shadowType: '--affine-note-shadow-film',
+      },
+    });
+
+    const cornerPanel = noteStylePanel.getByTestId(
+      'affine-note-corner-radius-panel'
+    );
+    await cornerPanel.locator('affine-slider').getByLabel('24').click();
+
+    expect(await getNoteEdgelessProps(page, noteId)).toEqual({
+      style: {
+        borderRadius: 24,
+        borderSize: 8,
+        borderStyle: 'solid',
+        shadowType: '--affine-note-shadow-film',
+      },
+    });
+
+    await pressEscape(page);
+
+    const headerToolbar = page.getByTestId('edgeless-page-block-header');
+    const toggleButton = headerToolbar.getByTestId(
+      'edgeless-note-toggle-button'
+    );
+    await toggleButton.click();
+
+    expect(await getNoteEdgelessProps(page, noteId)).toEqual({
+      collapse: true,
+      collapsedHeight: 48,
+      style: {
+        borderRadius: 24,
+        borderSize: 8,
+        borderStyle: 'solid',
+        shadowType: '--affine-note-shadow-film',
+      },
+    });
+  });
+});
+
+test.describe('note block rendering', () => {
+  test('collapsed content rendering', async ({ page }) => {
+    await createEdgelessNoteBlock(page, [50, 50]);
+
+    await type(page, 'paragraph 1');
+    for (let i = 0; i < 5; i++) {
+      await pressEnter(page);
+    }
+    await type(page, 'paragraph 2');
+    await pressEscape(page, 3);
+    await clickView(page, [50, 50]);
+    await resizeElementByHandle(page, [0, -50], 'bottom-right');
+    const xywh = await getSelectedXYWH(page);
+    const center: IVec = [xywh[0] + xywh[2] / 2, xywh[1] + xywh[3] / 2];
+
+    const note = page
+      .locator('affine-edgeless-note')
+      .getByTestId('edgeless-note-clip-container')
+      .nth(1);
+
+    await expect(note, 'should hide collapsed content').toHaveCSS(
+      'overflow-y',
+      'clip'
+    );
+    await moveToView(page, center);
+    await expect(note, 'should show collapsed content when hover').toHaveCSS(
+      'overflow-y',
+      'visible'
+    );
+
+    const [x1, y1] = await toViewCoord(page, center);
+    const [x2, y2] = await toViewCoord(page, [center[0], center[1] + 25]);
+    const [x3, y3] = await toViewCoord(page, [center[0], center[1] + 50]);
+    await page.mouse.move(x1, y1);
+    await page.mouse.down();
+
+    await page.mouse.move(x2, y2, { steps: 10 });
+    await expect(
+      note,
+      'should hide collapsed content during dragging'
+    ).toHaveCSS('overflow-y', 'clip');
+    await page.mouse.move(x3, y3, { steps: 10 });
+    await page.mouse.up();
+    await page.mouse.move(x3, y3);
+    await expect(
+      note,
+      'should show collapsed content when dragging is finished'
+    ).toHaveCSS('overflow-y', 'visible');
+  });
+
+  test('cursor should not jump to page block title from note block', async ({
+    page,
+  }) => {
+    await createEdgelessNoteBlock(page, [50, 50]);
+    await pressBackspace(page);
+    expect(await isDocTitleFocused(page)).toBeFalsy();
+  });
+});
+
+test('should convert note block to linked doc when clicking turn into linked doc button', async ({
+  page,
+}) => {
+  await createEdgelessNoteBlock(page, [100, 100]);
+  await type(page, '# Two Questions');
+  await pressEnter(page);
+  await type(page, 'Is this the real life?');
+  await pressEnter(page);
+  await type(page, 'Is this just fantasy?');
+
+  await pressEscape(page, 3);
+
+  const note = page.locator('affine-edgeless-note', {
+    hasText: 'Is this just fantasy?',
+  });
+  await note.click();
+  const toolbar = locateToolbar(page);
+  const moreBtn = toolbar.getByRole('button', { name: 'More' });
+  await moreBtn.click();
+  const turnIntoLinkedDocBtn = toolbar.getByRole('button', {
+    name: 'Turn into linked doc',
+  });
+  await turnIntoLinkedDocBtn.click();
+  const inputModal = page.getByRole('dialog').locator('input');
+  await expect(inputModal).toHaveValue('Two Questions');
+  await type(page, 'Bohemian Rhapsody');
+
+  const confirmBtn = page.getByTestId('confirm-modal-confirm');
+  await confirmBtn.click();
+
+  const syncedDoc = page.locator('affine-embed-edgeless-synced-doc-block');
+  await expect(syncedDoc).toBeVisible();
+
+  const noteInSyncedDoc = syncedDoc.locator('affine-note');
+  await expect(noteInSyncedDoc).toBeVisible();
+
+  const paragraphs = noteInSyncedDoc.locator('affine-paragraph');
+  await expect(paragraphs.nth(0)).toContainText('Two Questions');
+  await expect(paragraphs.nth(1)).toContainText('Is this the real life?');
+  await expect(paragraphs.nth(2)).toContainText('Is this just fantasy?');
+});

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

@@ -0,0 +1,110 @@
+import { test } from '@affine-test/kit/playwright';
+import {
+  clickEdgelessModeButton,
+  clickView,
+  dblclickView,
+  dragView,
+  locateEditorContainer,
+  locateToolbar,
+  setEdgelessTool,
+} from '@affine-test/kit/utils/editor';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  switchEdgelessTheme,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await waitForEditorLoad(page);
+  await clickNewPageButton(page);
+  await clickEdgelessModeButton(page);
+  const container = locateEditorContainer(page);
+  await container.click();
+});
+
+test('should add text to shape, default to pure black', async ({ page }) => {
+  await setEdgelessTool(page, 'shape');
+  await dragView(page, [100, 300], [200, 400]);
+  await dblclickView(page, [150, 350]);
+
+  await expect(
+    page.locator('edgeless-shape-text-editor rich-text')
+  ).toBeVisible();
+  await page.keyboard.type('text');
+  await page.keyboard.press('Escape');
+
+  const toolbar = locateToolbar(page);
+  const textColorContainer = toolbar.locator(
+    'edgeless-color-picker-button.text-color'
+  );
+  const textColorBtn = textColorContainer.getByLabel('Text color');
+  const blackBtn = textColorContainer
+    .locator('edgeless-color-button[active]')
+    .getByLabel('Black');
+
+  await expect(textColorContainer).toBeVisible();
+
+  await textColorBtn.click();
+  await expect(blackBtn).toHaveCount(1);
+
+  const svgFillColor = await blackBtn.locator('svg').getAttribute('fill');
+  expect(svgFillColor).toBe('#000000');
+
+  await switchEdgelessTheme(page, 'dark');
+
+  await clickView(page, [150, 350]);
+  await textColorBtn.click();
+
+  await expect(blackBtn).toHaveCount(1);
+
+  const svgFillColor2 = await blackBtn.locator('svg').getAttribute('fill');
+  expect(svgFillColor2).toBe('#000000');
+});
+
+test('should add text to shape with pure white', async ({ page }) => {
+  await setEdgelessTool(page, 'shape');
+  await dragView(page, [100, 300], [200, 400]);
+  await dblclickView(page, [150, 350]);
+
+  await expect(
+    page.locator('edgeless-shape-text-editor rich-text')
+  ).toBeVisible();
+  await page.keyboard.type('text');
+  await page.keyboard.press('Escape');
+
+  const toolbar = locateToolbar(page);
+  const textColorContainer = toolbar.locator(
+    'edgeless-color-picker-button.text-color'
+  );
+  const textColorBtn = textColorContainer.getByLabel('Text color');
+
+  let currentColor = await textColorBtn
+    .locator('svg rect')
+    .getAttribute('fill');
+  expect(currentColor).toBe('#000000');
+
+  await textColorBtn.click();
+
+  const blackBtn = textColorContainer
+    .locator('edgeless-color-button[active]')
+    .getByLabel('Black');
+  await expect(blackBtn).toHaveCount(1);
+
+  const whiteBtn = textColorContainer
+    .locator('edgeless-color-button')
+    .getByLabel('White');
+  await whiteBtn.click();
+
+  currentColor = await textColorBtn.locator('svg rect').getAttribute('fill');
+  expect(currentColor).toBe('#ffffff');
+
+  await switchEdgelessTheme(page, 'dark');
+
+  await clickView(page, [150, 350]);
+
+  currentColor = await textColorBtn.locator('svg rect').getAttribute('fill');
+  expect(currentColor).toBe('#ffffff');
+});

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

@@ -0,0 +1,102 @@
+import { test } from '@affine-test/kit/playwright';
+import {
+  clickEdgelessModeButton,
+  locateEditorContainer,
+  locateToolbar,
+} from '@affine-test/kit/utils/editor';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  type,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { expect, type Locator } from '@playwright/test';
+
+function getEdgelessTextColor(text: Locator) {
+  return text
+    .locator('.affine-block-children-container')
+    .first()
+    .evaluate(e => e.style.getPropertyValue('--edgeless-text-color'));
+}
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await waitForEditorLoad(page);
+  await clickNewPageButton(page);
+  await clickEdgelessModeButton(page);
+  const container = locateEditorContainer(page);
+  await container.click();
+});
+
+test('should update color of edgeless text when switching theme', async ({
+  page,
+}) => {
+  const container = locateEditorContainer(page);
+  await container.dblclick();
+
+  await page.waitForSelector('affine-edgeless-text');
+
+  await type(page, 'text color');
+
+  await page.keyboard.press('Escape');
+  await page.keyboard.press('Escape');
+
+  const text = page.locator('affine-edgeless-text');
+
+  await text.click();
+
+  const toolbar = locateToolbar(page);
+
+  await expect(toolbar).toBeVisible();
+
+  const colorPicker = toolbar.locator('edgeless-color-picker-button');
+  const colorButton = toolbar.getByLabel('Text color');
+
+  await colorButton.click();
+
+  const pickedColorButton = colorPicker.locator(
+    'edgeless-color-button[active]'
+  );
+
+  let pickedColor = await pickedColorButton.locator('svg').getAttribute('fill');
+  let textColor = await getEdgelessTextColor(text);
+
+  await expect(pickedColorButton.getByLabel('Black')).toHaveCount(1);
+  expect(pickedColor).toBe(textColor);
+
+  const blackColorButton = colorPicker
+    .locator('edgeless-color-button')
+    .filter({
+      has: page.locator('.color-unit'),
+    })
+    .filter({
+      has: page.getByLabel('Black'),
+    });
+  await blackColorButton.click();
+
+  pickedColor = await blackColorButton.locator('svg').getAttribute('fill');
+  textColor = await getEdgelessTextColor(text);
+
+  expect(pickedColor).toBe(textColor);
+  expect(pickedColor).toBe('#000000');
+
+  await page.getByTestId('header-info-button').click();
+
+  await page
+    .locator('[data-info-id="edgelessTheme"]')
+    .locator('[data-property-value="true"]')
+    .locator('button[value="dark"]')
+    .click();
+
+  await page.keyboard.press('Escape');
+
+  await expect(page.getByTestId('property-collapsible-section')).toBeHidden();
+
+  await colorButton.click();
+
+  pickedColor = await blackColorButton.locator('svg').getAttribute('fill');
+  textColor = await getEdgelessTextColor(text);
+
+  expect(pickedColor).toBe(textColor);
+  expect(pickedColor).toBe('#ffffff');
+});