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

tests/affine-local/e2e/blocksuite/outline/outline-panel.spec.ts

@@ -0,0 +1,565 @@
+import { test } from '@affine-test/kit/playwright';
+import {
+  clickEdgelessModeButton,
+  clickPageModeButton,
+  clickView,
+  createEdgelessNoteBlock,
+  focusDocTitle,
+  getEdgelessSelectedIds,
+  getViewportCenter,
+  locateToolbar,
+  setViewportCenter,
+} from '@affine-test/kit/utils/editor';
+import {
+  pressBackspace,
+  pressEnter,
+  pressEscape,
+  selectAllByKeyboard,
+} 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 {
+  closeSettingModal,
+  confirmExperimentalPrompt,
+  openExperimentalFeaturesPanel,
+  openSettingModal,
+} from '@affine-test/kit/utils/setting';
+import { openRightSideBar } from '@affine-test/kit/utils/sidebar';
+import { expect, type Locator, type Page } from '@playwright/test';
+
+import {
+  createHeadings,
+  createTitle,
+  getVerticalCenterFromLocator,
+} from './utils';
+
+async function openTocPanel(page: Page) {
+  const toc = page.locator('affine-outline-panel');
+  if (await toc.isVisible()) return toc;
+
+  await openRightSideBar(page, 'outline');
+  await toc.waitFor({ state: 'visible' });
+  return toc;
+}
+
+function getTocHeading(panel: Locator, level: number) {
+  return panel.getByTestId(`outline-block-preview-h${level}`).locator('span');
+}
+
+// locate cards in outline panel
+// ! Please note that when any card mode changed, the locator will be mutated
+function locateCards(toc: Locator, mode?: 'both' | 'page' | 'edgeless') {
+  const cards = toc.locator('affine-outline-note-card');
+  return mode
+    ? cards.locator(`>div[data-visibility="${mode}"]`)
+    : cards.locator('>div');
+}
+
+function locateSortingButton(panel: Locator) {
+  return panel.getByTestId('toggle-notes-sorting-button');
+}
+
+async function changeNoteDisplayMode(
+  card: Locator,
+  mode: 'both' | 'doc' | 'edgeless'
+) {
+  await card.hover();
+  await card.getByTestId('display-mode-button').click();
+  await card.locator(`note-display-mode-panel .item.${mode}`).click();
+}
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await clickNewPageButton(page);
+  await waitForEditorLoad(page);
+});
+
+test.describe('TOC display', () => {
+  test('should display title and headings when there are non-empty headings in editor', async ({
+    page,
+  }) => {
+    await createTitle(page);
+    await createHeadings(page);
+
+    const toc = await openTocPanel(page);
+
+    await expect(toc.getByTestId('outline-block-preview-title')).toBeVisible();
+    for (let i = 1; i <= 6; i++) {
+      await expect(getTocHeading(toc, i)).toBeVisible();
+      await expect(getTocHeading(toc, i)).toContainText(`Heading ${i}`);
+    }
+  });
+
+  test('should display placeholder when no headings', async ({ page }) => {
+    const toc = await openTocPanel(page);
+    const noHeadingPlaceholder = toc.getByTestId('empty-panel-placeholder');
+
+    await createTitle(page);
+    await pressEnter(page);
+    await type(page, 'hello world');
+
+    await expect(noHeadingPlaceholder).toBeVisible();
+  });
+
+  test('should not display headings when there are only empty headings', async ({
+    page,
+  }) => {
+    await createTitle(page);
+
+    // create empty headings
+    for (let i = 1; i <= 6; i++) {
+      await type(page, `${'#'.repeat(i)} `);
+      await pressEnter(page);
+    }
+
+    const toc = await openTocPanel(page);
+
+    await expect(toc.getByTestId('outline-block-preview-title')).toBeHidden();
+    for (let i = 1; i <= 6; i++) {
+      await expect(getTocHeading(toc, i)).toBeHidden();
+    }
+  });
+
+  test('should update panel when modify or clear title or headings', async ({
+    page,
+  }) => {
+    const title = await createTitle(page);
+    const headings = await createHeadings(page);
+
+    const toc = await openTocPanel(page);
+
+    await title.scrollIntoViewIfNeeded();
+    await title.click();
+    await type(page, 'xxx');
+    await expect(toc.getByTestId('outline-block-preview-title')).toContainText([
+      'Titlexxx',
+    ]);
+    await selectAllByKeyboard(page);
+    await pressBackspace(page);
+    await expect(toc.getByTestId('outline-block-preview-title')).toBeHidden();
+
+    for (let i = 1; i <= 6; i++) {
+      await headings[i - 1].click();
+      await type(page, 'xxx');
+      await expect(getTocHeading(toc, i)).toContainText(`Heading ${i}xxx`);
+      await selectAllByKeyboard(page);
+      await pressBackspace(page);
+      await expect(getTocHeading(toc, i)).toBeHidden();
+    }
+  });
+
+  test('should update panel when switch doc', async ({ page }) => {
+    const toc = await openTocPanel(page);
+    await focusDocTitle(page);
+    await page.keyboard.press('ArrowDown');
+    await type(page, '# Heading 1');
+
+    await clickNewPageButton(page);
+    await expect(getTocHeading(toc, 1)).toBeHidden();
+    await page.goBack();
+    await expect(getTocHeading(toc, 1)).toBeVisible();
+  });
+
+  test('should add padding to sub-headings', async ({ page }) => {
+    await createHeadings(page);
+
+    const toc = await openTocPanel(page);
+
+    let prev = getTocHeading(toc, 1);
+    for (let i = 2; i <= 6; i++) {
+      const curr = getTocHeading(toc, i);
+
+      const prevRect = await prev.boundingBox();
+      const currRect = await curr.boundingBox();
+
+      expect(prevRect).not.toBeNull();
+      expect(currRect).not.toBeNull();
+
+      expect(prevRect!.x).toBeLessThan(currRect!.x);
+      prev = curr;
+    }
+  });
+
+  test('visibility sorting should be enabled in edgeless mode and disabled in page mode by default, and can be changed', async ({
+    page,
+  }) => {
+    await pressEnter(page);
+    await type(page, '# Heading 1');
+
+    const toc = await openTocPanel(page);
+    const sortingButton = locateSortingButton(toc);
+    await expect(sortingButton).not.toHaveClass(/active/);
+    await expect(toc.locator('[data-sortable="false"]')).toHaveCount(1);
+
+    await clickEdgelessModeButton(page);
+    await expect(sortingButton).toHaveClass(/active/);
+    await expect(toc.locator('[data-sortable="true"]')).toHaveCount(1);
+
+    await sortingButton.click();
+    await expect(sortingButton).not.toHaveClass(/active/);
+    await expect(toc.locator('[data-sortable="false"]')).toHaveCount(1);
+  });
+
+  test('should notify user when there are some page only notes and sorting is disabled', async ({
+    page,
+  }) => {
+    await clickEdgelessModeButton(page);
+    const toc = await openTocPanel(page);
+    const viewportCenter = await getViewportCenter(page);
+    await createEdgelessNoteBlock(page, [viewportCenter.x, viewportCenter.y]);
+    const card = locateCards(toc, 'edgeless');
+    await changeNoteDisplayMode(card, 'doc');
+
+    const notification = toc.getByTestId('affine-outline-notice');
+    await expect(notification).toBeHidden();
+
+    const sortingButton = locateSortingButton(toc);
+    await sortingButton.click();
+    await expect(notification).toBeVisible();
+
+    await notification.getByTestId('outline-notice-sort-button').click();
+    await expect(notification).toBeHidden();
+    await expect(sortingButton).toHaveClass(/active/);
+
+    await sortingButton.click();
+    await expect(notification).toBeVisible();
+    await notification.getByTestId('outline-notice-close-button').click();
+    await expect(notification).toBeHidden();
+  });
+});
+
+test.describe('TOC and editor scroll', () => {
+  test('should highlight heading when scroll to area before viewport center', async ({
+    page,
+  }) => {
+    const title = await createTitle(page);
+    for (let i = 0; i < 3; i++) {
+      await pressEnter(page);
+    }
+    const headings = await createHeadings(page, 10);
+    await title.scrollIntoViewIfNeeded();
+
+    const toc = await openTocPanel(page);
+
+    const viewportCenter = await getVerticalCenterFromLocator(
+      page.locator('body')
+    );
+
+    const activeHeadingContainer = toc.locator(
+      'affine-outline-panel-body .active'
+    );
+
+    await title.click();
+    await expect(activeHeadingContainer).toContainText('Title');
+
+    for (let i = 0; i < headings.length; i++) {
+      const lastHeadingCenter = await getVerticalCenterFromLocator(headings[i]);
+      await page.mouse.wheel(0, lastHeadingCenter - viewportCenter + 20);
+      await page.waitForTimeout(10);
+
+      await expect(activeHeadingContainer).toContainText(`Heading ${i + 1}`);
+    }
+  });
+
+  test('should scroll to heading and highlight heading when click item in outline panel', async ({
+    page,
+  }) => {
+    const headings = await createHeadings(page, 10);
+    const toc = await openTocPanel(page);
+
+    const activeHeadingContainer = toc.locator(
+      'affine-outline-panel-body .active'
+    );
+
+    const headingsInPanel = Array.from({ length: 6 }, (_, i) =>
+      getTocHeading(toc, i + 1)
+    );
+
+    await headingsInPanel[2].click();
+    await expect(headings[2]).toBeVisible();
+    await expect(activeHeadingContainer).toContainText('Heading 3');
+  });
+
+  test('should scroll to title when click title in outline panel', async ({
+    page,
+  }) => {
+    const title = await createTitle(page);
+    await pressEnter(page);
+    await createHeadings(page, 10);
+
+    const toc = await openTocPanel(page);
+
+    const titleInPanel = toc.getByTestId('outline-block-preview-title');
+
+    await expect(title).not.toBeInViewport();
+    await titleInPanel.click();
+    await expect(title).toBeVisible();
+  });
+});
+
+test.describe('TOC and edgeless selection', () => {
+  test('should select note blocks when selecting cards in TOC', async ({
+    page,
+  }) => {
+    const toc = await openTocPanel(page);
+    await clickEdgelessModeButton(page);
+
+    const cards = locateCards(toc);
+
+    await createEdgelessNoteBlock(page, [100, 100]);
+    await changeNoteDisplayMode(cards.last(), 'doc');
+    await createEdgelessNoteBlock(page, [200, 200]);
+
+    await cards.nth(0).click();
+    expect(await getEdgelessSelectedIds(page)).toHaveLength(1);
+    await cards.nth(0).click();
+    expect(await getEdgelessSelectedIds(page)).toHaveLength(0);
+
+    await cards.nth(1).click();
+    expect(
+      await getEdgelessSelectedIds(page),
+      'should not select doc only note'
+    ).toHaveLength(0);
+
+    await cards.nth(2).click();
+    expect(await getEdgelessSelectedIds(page)).toHaveLength(1);
+    await cards.nth(2).click();
+    expect(await getEdgelessSelectedIds(page)).toHaveLength(0);
+
+    await cards.nth(0).click({ modifiers: ['Shift'] });
+    await cards.nth(1).click({ modifiers: ['Shift'] });
+    await cards.nth(2).click({ modifiers: ['Shift'] });
+
+    expect(await getEdgelessSelectedIds(page)).toHaveLength(2);
+  });
+
+  test('should select note cards when select note blocks in canvas', async ({
+    page,
+  }) => {
+    await clickEdgelessModeButton(page);
+    await setViewportCenter(page, [0, 0]);
+    await selectAllByKeyboard(page);
+    await pressBackspace(page);
+    await createEdgelessNoteBlock(page, [100, 100]);
+    await createEdgelessNoteBlock(page, [200, 200]);
+    await clickView(page, [0, 0]);
+
+    const toc = await openTocPanel(page);
+    const cards = locateCards(toc);
+
+    await clickView(page, [100, 100]);
+    await expect(cards.nth(0)).toHaveAttribute('data-status', 'selected');
+
+    await clickView(page, [200, 200]);
+    await expect(cards.nth(1)).toHaveAttribute('data-status', 'selected');
+
+    await selectAllByKeyboard(page);
+    await expect(cards.nth(0)).toHaveAttribute('data-status', 'selected');
+    await expect(cards.nth(1)).toHaveAttribute('data-status', 'selected');
+
+    await pressEscape(page);
+    await expect(cards.nth(0)).toHaveAttribute('data-status', 'normal');
+    await expect(cards.nth(1)).toHaveAttribute('data-status', 'normal');
+  });
+});
+
+test.describe('drag and drop note in outline panel', () => {
+  const dragCard = async (
+    from: Locator,
+    to: Locator,
+    position: 'before' | 'after' = 'before'
+  ) => {
+    const fromRect = await from.boundingBox();
+    const fromCenter = {
+      x: fromRect!.width / 2,
+      y: fromRect!.height / 2,
+    };
+
+    const toRect = await to.boundingBox();
+    const toCenter = {
+      x: toRect!.width / 2,
+      y: toRect!.height / 2,
+    };
+
+    await from.dragTo(to, {
+      sourcePosition: fromCenter,
+      targetPosition:
+        position === 'before'
+          ? { x: toCenter.x, y: toCenter.y - 10 }
+          : { x: toCenter.x, y: toCenter.y + 10 },
+    });
+  };
+
+  // create 2 both cards, 2 page cards and 2 edgeless cards
+  test.beforeEach(async ({ page }) => {
+    const toc = await openTocPanel(page);
+    const edgelessCards = locateCards(toc, 'edgeless');
+
+    // 2 both cards
+    {
+      await focusDocTitle(page);
+      await page.keyboard.press('ArrowDown');
+      await type(page, '0');
+
+      await clickEdgelessModeButton(page);
+
+      await createEdgelessNoteBlock(page, [100, 100]);
+      await type(page, '1');
+      await changeNoteDisplayMode(edgelessCards.first(), 'both');
+    }
+    // 2 page cards
+    {
+      await createEdgelessNoteBlock(page, [150, 150]);
+      await type(page, '2');
+      await changeNoteDisplayMode(edgelessCards.first(), 'doc');
+      await createEdgelessNoteBlock(page, [200, 200]);
+      await type(page, '3');
+      await changeNoteDisplayMode(edgelessCards.first(), 'doc');
+    }
+    // 2 edgeless cards
+    {
+      await createEdgelessNoteBlock(page, [250, 250]);
+      await type(page, '4');
+      await createEdgelessNoteBlock(page, [300, 300]);
+      await type(page, '5');
+    }
+  });
+
+  test('should reorder notes when drag and drop a note in outline panel', async ({
+    page,
+  }) => {
+    const toc = await openTocPanel(page);
+    const cards = locateCards(toc);
+
+    await dragCard(cards.nth(3), cards.nth(1));
+
+    await clickPageModeButton(page);
+    const paragraphs = page
+      .locator('affine-paragraph')
+      .locator('[data-v-text="true"]');
+    await expect(paragraphs).toHaveCount(4);
+    await expect(paragraphs.nth(0)).toContainText('0');
+    await expect(paragraphs.nth(1)).toContainText('3');
+    await expect(paragraphs.nth(2)).toContainText('1');
+    await expect(paragraphs.nth(3)).toContainText('2');
+
+    // Note card should be able to drag and drop in page mode
+    await locateSortingButton(toc).click();
+    await dragCard(cards.nth(3), cards.nth(1));
+
+    await expect(paragraphs.nth(0)).toContainText('0');
+    await expect(paragraphs.nth(1)).toContainText('2');
+    await expect(paragraphs.nth(2)).toContainText('3');
+    await expect(paragraphs.nth(3)).toContainText('1');
+  });
+
+  test('multiple selected note cards can be dragged and dropped at same time', async ({
+    page,
+  }) => {
+    const toc = await openTocPanel(page);
+    const cards = locateCards(toc);
+
+    await cards.nth(2).click({ modifiers: ['Shift'] });
+    await cards.nth(3).click({ modifiers: ['Shift'] });
+
+    await dragCard(cards.nth(2), cards.nth(0));
+    await clickPageModeButton(page);
+
+    const paragraphs = page
+      .locator('affine-paragraph')
+      .locator('[data-v-text="true"]');
+
+    await expect(paragraphs).toHaveCount(4);
+    await expect(paragraphs.nth(0)).toContainText('2');
+    await expect(paragraphs.nth(1)).toContainText('3');
+    await expect(paragraphs.nth(2)).toContainText('0');
+    await expect(paragraphs.nth(3)).toContainText('1');
+  });
+});
+
+test.describe('advanced visibility control', () => {
+  test.beforeEach(async ({ page }) => {
+    await openSettingModal(page);
+    await openExperimentalFeaturesPanel(page);
+    await confirmExperimentalPrompt(page);
+    await page.getByTestId('enable_advanced_block_visibility').click();
+    await closeSettingModal(page);
+    await page.reload();
+  });
+
+  test('should update notes when change note display mode from note toolbar', async ({
+    page,
+  }) => {
+    await clickEdgelessModeButton(page);
+    await setViewportCenter(page, [0, 0]);
+    await createEdgelessNoteBlock(page, [100, 100]);
+    await type(page, 'hello');
+    await clickView(page, [200, 200]);
+
+    const toc = await openTocPanel(page);
+
+    const bothCard = locateCards(toc, 'both');
+    const edgelessCard = locateCards(toc, 'edgeless');
+
+    await expect(bothCard).toHaveCount(1);
+    await expect(edgelessCard).toHaveCount(1);
+
+    await clickView(page, [100, 100]);
+    const toolbar = locateToolbar(page);
+
+    await toolbar.getByRole('button', { name: 'Mode' }).click();
+    await toolbar.locator('note-display-mode-panel .item.both').click();
+
+    await expect(bothCard).toHaveCount(2);
+    await expect(edgelessCard).toHaveCount(0);
+  });
+
+  test('should update notes after slicing note', async ({ page }) => {
+    await clickEdgelessModeButton(page);
+    await createEdgelessNoteBlock(page, [200, 100]);
+    await type(page, 'hello');
+    await pressEnter(page);
+    await type(page, 'world');
+    await pressEscape(page, 3);
+    await createEdgelessNoteBlock(page, [200, 400]);
+
+    const toc = await openTocPanel(page);
+
+    const bothCard = locateCards(toc, 'both');
+    const edgelessCards = locateCards(toc, 'edgeless');
+
+    await expect(bothCard).toHaveCount(1);
+    await expect(edgelessCards).toHaveCount(2);
+
+    while ((await edgelessCards.count()) > 0) {
+      await edgelessCards.first().hover();
+      await edgelessCards.first().getByTestId('display-mode-button').click();
+      await edgelessCards
+        .first()
+        .locator('note-display-mode-panel .item.both')
+        .click();
+    }
+
+    await expect(bothCard).toHaveCount(3);
+
+    await clickView(page, [200, 100]);
+    const toolbar = locateToolbar(page);
+    await toolbar.getByRole('button', { name: 'Slicer' }).click();
+    await expect(page.locator('.note-slicer-button')).toBeVisible();
+    await page.locator('.note-slicer-button').click();
+
+    await expect(bothCard).toHaveCount(4);
+    await expect(
+      bothCard.nth(1),
+      'the sliced note card should keep the order in its parent'
+    ).toContainText('hello');
+    await expect(
+      bothCard.nth(2),
+      'the sliced note card should keep the order in its parent'
+    ).toContainText('world');
+  });
+});

tests/affine-local/e2e/blocksuite/outline/outline-viewer.spec.ts

@@ -0,0 +1,279 @@
+import { test } from '@affine-test/kit/playwright';
+import {
+  clickEdgelessModeButton,
+  clickPageModeButton,
+  createEdgelessNoteBlock,
+} from '@affine-test/kit/utils/editor';
+import {
+  pressBackspace,
+  pressEnter,
+  selectAllByKeyboard,
+} from '@affine-test/kit/utils/keyboard';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  createLinkedPage,
+  type,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { expect, type Locator, type Page } from '@playwright/test';
+
+import {
+  createHeadings,
+  createTitle,
+  getVerticalCenterFromLocator,
+} from './utils';
+
+function getIndicators(container: Page | Locator) {
+  return container.locator('affine-outline-viewer .outline-viewer-indicator');
+}
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await clickNewPageButton(page);
+  await waitForEditorLoad(page);
+});
+
+test('should display indicators when non-empty headings exists', async ({
+  page,
+}) => {
+  const indicators = getIndicators(page);
+  await createHeadings(page);
+
+  await expect(indicators).toHaveCount(6);
+  for (let i = 0; i < 6; i++) {
+    await expect(indicators.nth(i)).toBeVisible();
+  }
+});
+
+test('should be hidden when only empty headings exists', async ({ page }) => {
+  const indicators = getIndicators(page);
+  await expect(indicators).toHaveCount(0);
+
+  for (let i = 1; i <= 6; i++) {
+    // empty heading
+    await type(page, `${'#'.repeat(i)} `);
+    await pressEnter(page);
+  }
+
+  await expect(indicators).toHaveCount(0);
+});
+
+test('should update indicator when clear title or headings', async ({
+  page,
+}) => {
+  const indicators = getIndicators(page);
+  const title = await createTitle(page);
+  const headings = await createHeadings(page);
+
+  await expect(indicators).toHaveCount(7);
+
+  await title.scrollIntoViewIfNeeded();
+  await title.click();
+  await selectAllByKeyboard(page);
+  await pressBackspace(page);
+  await expect(indicators).toHaveCount(6);
+
+  for (let i = 1; i <= 6; i++) {
+    await headings[i - 1].click();
+    await selectAllByKeyboard(page);
+    await pressBackspace(page);
+    await expect(indicators).toHaveCount(6 - i);
+  }
+});
+
+test('should display simple outline panel when hovering over indicators', async ({
+  page,
+}) => {
+  const indicators = getIndicators(page);
+  await createTitle(page);
+  await createHeadings(page);
+  await indicators.first().hover({ force: true });
+
+  const items = page.locator('.outline-viewer-item');
+  await expect(items).toHaveCount(8);
+  await expect(items.nth(0)).toContainText(['Table of Contents']);
+  await expect(items.nth(1)).toContainText(['Title']);
+  for (let i = 2; i <= 7; i++) {
+    await expect(items.nth(i)).toContainText([`Heading ${i - 1}`]);
+  }
+});
+
+test('should highlight indicator when scrolling', async ({ page }) => {
+  const indicators = getIndicators(page);
+  const title = await createTitle(page);
+  for (let i = 1; i <= 3; i++) {
+    await pressEnter(page);
+  }
+  const headings = await createHeadings(page, 10);
+  await title.scrollIntoViewIfNeeded();
+
+  const viewportCenter = await getVerticalCenterFromLocator(
+    page.locator('body')
+  );
+  for (let i = 0; i < headings.length; i++) {
+    const lastHeadingCenter = await getVerticalCenterFromLocator(headings[i]);
+    await expect(indicators.nth(i)).toHaveClass(/active/);
+    await page.mouse.wheel(0, lastHeadingCenter - viewportCenter + 20);
+    await page.waitForTimeout(10);
+  }
+});
+
+test('should highlight indicator when click item in outline panel', async ({
+  page,
+}) => {
+  const viewer = page.locator('affine-outline-viewer');
+  const indicators = getIndicators(page);
+  const headings = await createHeadings(page, 10);
+
+  await indicators.first().hover({ force: true });
+
+  const headingsInPanel = Array.from({ length: 6 }, (_, i) =>
+    viewer.getByTestId(`outline-block-preview-h${i + 1}`)
+  );
+  await headingsInPanel[2].click();
+  await expect(headings[2]).toBeVisible();
+  await expect(indicators.nth(2)).toHaveClass(/active/);
+});
+
+test('outline viewer should hide in edgeless mode', async ({ page }) => {
+  await createTitle(page);
+  await pressEnter(page);
+
+  await type(page, '# ');
+  await type(page, 'Heading 1');
+
+  const indicators = getIndicators(page);
+  await expect(indicators).toHaveCount(2);
+
+  await clickEdgelessModeButton(page);
+  await expect(indicators).toHaveCount(0);
+
+  await clickPageModeButton(page);
+  await expect(indicators).toHaveCount(2);
+});
+
+test('should hide edgeless-only note headings', async ({ page }) => {
+  await createTitle(page);
+  await pressEnter(page);
+  await type(page, '# Heading 1');
+  await pressEnter(page);
+  await type(page, '## Heading 2');
+
+  await clickEdgelessModeButton(page);
+  await createEdgelessNoteBlock(page, [100, 100]);
+  await type(page, '# Edgeless');
+
+  await clickPageModeButton(page);
+  await waitForEditorLoad(page);
+  const indicators = getIndicators(page);
+  await expect(indicators).toHaveCount(3);
+  await indicators.first().hover({ force: true });
+
+  const viewer = page.locator('affine-outline-viewer');
+  await expect(viewer).toBeVisible();
+  const h1InPanel = viewer
+    .getByTestId('outline-block-preview-h1')
+    .locator('span');
+  await h1InPanel.waitFor({ state: 'visible' });
+  await expect(h1InPanel).toContainText(['Heading 1']);
+});
+
+test('outline viewer should update after change heading in edgeless mode', async ({
+  page,
+}) => {
+  await createTitle(page);
+  await pressEnter(page);
+
+  await type(page, '# ');
+  await type(page, 'Heading 1');
+
+  await clickEdgelessModeButton(page);
+  const note = page.locator('affine-edgeless-note');
+  await note.dblclick();
+  await type(page, '# New Heading');
+  await clickPageModeButton(page);
+
+  const indicators = getIndicators(page);
+  await expect(indicators).toHaveCount(3);
+});
+
+test('outline viewer should be useable in doc peek preview', async ({
+  page,
+}) => {
+  await pressEnter(page);
+  await createLinkedPage(page, 'Test Page');
+
+  await page.locator('affine-reference').hover();
+
+  const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
+  await expect(toolbar).toBeVisible();
+
+  await toolbar.getByLabel(/^Open doc with$/).click();
+  await toolbar
+    .getByLabel('Open doc menu')
+    .getByLabel('Open in center peek')
+    .click();
+
+  const peekView = page.getByTestId('peek-view-modal');
+  await expect(peekView).toBeVisible();
+
+  const title = peekView.locator('doc-title .inline-editor');
+  await title.click();
+  await pressEnter(page);
+
+  await type(page, '# Heading 1');
+
+  for (let i = 0; i < 10; i++) {
+    await pressEnter(page);
+  }
+
+  await type(page, '## Heading 2');
+
+  const outlineViewer = peekView.locator('affine-outline-viewer');
+  const outlineViewerBound = await outlineViewer.boundingBox();
+  expect(outlineViewerBound).not.toBeNull();
+
+  const indicators = getIndicators(peekView);
+  await expect(indicators).toHaveCount(3);
+  await expect(indicators.nth(0)).toBeVisible();
+  await expect(indicators.nth(1)).toBeVisible();
+  await expect(indicators.nth(2)).toBeVisible();
+
+  await indicators.first().hover({ force: true });
+  const viewer = peekView.locator('affine-outline-viewer');
+  await expect(viewer).toBeVisible();
+
+  // position of outline viewer should be fixed
+  {
+    const headingButtons = peekView.locator(
+      'affine-outline-viewer .outline-viewer-item:not(.outline-viewer-header)'
+    );
+    await expect(headingButtons).toHaveCount(3);
+    await expect(headingButtons.nth(0)).toBeVisible();
+    await expect(headingButtons.nth(1)).toBeVisible();
+    await expect(headingButtons.nth(2)).toBeVisible();
+
+    await headingButtons.last().click();
+    await page.mouse.move(0, 0);
+    await headingButtons.last().waitFor({ state: 'hidden' });
+
+    const currentOutlineViewerBound = await outlineViewer.boundingBox();
+    expect(currentOutlineViewerBound).not.toBeNull();
+    expect(outlineViewerBound).toEqual(currentOutlineViewerBound);
+  }
+
+  // outline viewer should be hidden when clicking the outline panel toggle button
+  {
+    await indicators.first().hover({ force: true });
+    const toggleButton = peekView.locator(
+      '.outline-viewer-header edgeless-tool-icon-button'
+    );
+    await toggleButton.click();
+
+    await page.waitForTimeout(500);
+    await expect(peekView).toBeHidden();
+    await expect(viewer).toBeHidden();
+    await expect(page.locator('affine-outline-panel')).toBeVisible();
+  }
+});

tests/affine-local/e2e/blocksuite/outline/utils.ts

@@ -0,0 +1,34 @@
+import { locateEditorContainer } from '@affine-test/kit/utils/editor';
+import { pressEnter } from '@affine-test/kit/utils/keyboard';
+import {
+  getBlockSuiteEditorTitle,
+  type,
+} from '@affine-test/kit/utils/page-logic';
+import type { Locator, Page } from '@playwright/test';
+
+export async function createTitle(page: Page) {
+  const title = getBlockSuiteEditorTitle(page);
+  await title.scrollIntoViewIfNeeded();
+  await title.click();
+  await type(page, 'Title');
+  await pressEnter(page);
+  return title;
+}
+
+export async function createHeadings(page: Page, gap = 0) {
+  const editorContainer = locateEditorContainer(page);
+
+  const headings: Locator[] = [];
+  await pressEnter(page, gap + 1);
+  for (let i = 1; i <= 6; i++) {
+    await type(page, `${'#'.repeat(i)} Heading ${i}`);
+    headings.push(editorContainer.locator(`.h${i}`));
+    await pressEnter(page, gap + 1);
+  }
+  return headings;
+}
+
+export async function getVerticalCenterFromLocator(locator: Locator) {
+  const rect = await locator.boundingBox();
+  return rect!.y + rect!.height / 2;
+}