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

tests/blocksuite/e2e/bookmark.spec.ts

@@ -0,0 +1,561 @@
+import './utils/declare-test-window.js';
+
+import type { BookmarkBlockComponent } from '@blocksuite/affine/blocks/bookmark';
+import type { EmbedYoutubeBlockComponent } from '@blocksuite/affine/blocks/embed';
+import type { BlockSnapshot } from '@blocksuite/store';
+import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import {
+  activeNoteInEdgeless,
+  clickView,
+  copyByKeyboard,
+  createNote,
+  dragBlockToPoint,
+  edgelessCommonSetup,
+  enterPlaygroundRoom,
+  expectConsoleMessage,
+  focusRichText,
+  getPageSnapshot,
+  initEmptyEdgelessState,
+  initEmptyParagraphState,
+  pasteByKeyboard,
+  pasteContent,
+  pressArrowDown,
+  pressArrowRight,
+  pressArrowUp,
+  pressBackspace,
+  pressEnter,
+  pressShiftTab,
+  pressTab,
+  selectAllByKeyboard,
+  setInlineRangeInSelectedRichText,
+  SHORT_KEY,
+  switchEditorMode,
+  type,
+  waitForInlineEditorStateUpdated,
+  waitNextFrame,
+} from './utils/actions/index.js';
+import {
+  assertAlmostEqual,
+  assertBlockChildrenIds,
+  assertBlockCount,
+  assertBlockFlavour,
+  assertBlockSelections,
+  assertParentBlockFlavour,
+  assertRichTextInlineRange,
+} from './utils/asserts.js';
+import { ignoreSnapshotId } from './utils/ignore.js';
+import { scoped, test } from './utils/playwright.js';
+import { getEmbedCardToolbar } from './utils/query.js';
+
+const LOCAL_HOST_URL = 'http://localhost';
+
+const YOUTUBE_URL = 'https://www.youtube.com/watch?v=fakeid';
+
+const FIGMA_URL = 'https://www.figma.com/design/JuXs6uOAICwf4I4tps0xKZ123';
+
+test.beforeEach(async ({ page }) => {
+  await page.route(
+    'https://affine-worker.toeverything.workers.dev/api/worker/link-preview',
+    async route => {
+      await route.fulfill({
+        json: {},
+      });
+    }
+  );
+});
+
+const createBookmarkBlockBySlashMenu = async (
+  page: Page,
+  url = LOCAL_HOST_URL
+) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyParagraphState(page);
+  await focusRichText(page);
+  await page.waitForTimeout(100);
+  await type(page, '/link', 100);
+  await pressEnter(page);
+  await page.waitForTimeout(100);
+  await type(page, url);
+  await pressEnter(page);
+};
+
+test(scoped`create bookmark by slash menu`, async ({ page }, testInfo) => {
+  await createBookmarkBlockBySlashMenu(page);
+  expect(await getPageSnapshot(page, true)).toMatchSnapshot(
+    `${testInfo.title}_final.json`
+  );
+});
+
+test(scoped`covert bookmark block to link text`, async ({ page }, testInfo) => {
+  await createBookmarkBlockBySlashMenu(page);
+  const bookmark = page.locator('affine-bookmark');
+  await bookmark.click();
+  await page.waitForTimeout(100);
+  await page.getByRole('button', { name: 'Switch view' }).click();
+  await page.getByRole('button', { name: 'Inline view' }).click();
+  expect(await getPageSnapshot(page, true)).toMatchSnapshot(
+    `${testInfo.title}_final.json`
+  );
+});
+
+test(
+  scoped`copy url to create bookmark in page mode`,
+  async ({ page }, testInfo) => {
+    await enterPlaygroundRoom(page);
+    await initEmptyParagraphState(page);
+    await focusRichText(page);
+
+    await type(page, LOCAL_HOST_URL);
+    await setInlineRangeInSelectedRichText(page, 0, LOCAL_HOST_URL.length);
+    await copyByKeyboard(page);
+    await focusRichText(page);
+    await type(page, '/link');
+    await pressEnter(page);
+    await page.keyboard.press(`${SHORT_KEY}+v`);
+    await pressEnter(page);
+    expect(await getPageSnapshot(page, true)).toMatchSnapshot(
+      `${testInfo.title}_final.json`
+    );
+  }
+);
+
+test(
+  scoped`copy url to create bookmark in edgeless mode`,
+  async ({ page }, testInfo) => {
+    await enterPlaygroundRoom(page);
+    const ids = await initEmptyEdgelessState(page);
+    await focusRichText(page);
+    await type(page, LOCAL_HOST_URL);
+
+    await switchEditorMode(page);
+
+    await activeNoteInEdgeless(page, ids.noteId);
+    await waitForInlineEditorStateUpdated(page);
+    await focusRichText(page);
+    await selectAllByKeyboard(page);
+    await copyByKeyboard(page);
+    await pressArrowRight(page);
+    await waitNextFrame(page);
+    await type(page, '/link', 100);
+    await pressEnter(page);
+    await page.waitForTimeout(100);
+    await waitNextFrame(page);
+    await page.keyboard.press(`${SHORT_KEY}+v`);
+    await pressEnter(page);
+    expect(await getPageSnapshot(page, true)).toMatchSnapshot(
+      `${testInfo.title}_final.json`
+    );
+  }
+);
+
+test.fixme(
+  scoped`support dragging bookmark block directly`,
+  async ({ page }, testInfo) => {
+    await createBookmarkBlockBySlashMenu(page);
+    expect(await getPageSnapshot(page, true)).toMatchSnapshot(
+      `${testInfo.title}_init.json`
+    );
+
+    const bookmark = page.locator('affine-bookmark');
+    const rect = await bookmark.boundingBox();
+    if (!rect) {
+      throw new Error('image not found');
+    }
+
+    // add new paragraph blocks
+    await page.mouse.click(rect.x + 20, rect.y + rect.height + 20);
+    await focusRichText(page);
+    await type(page, '111');
+    await page.waitForTimeout(200);
+    await pressEnter(page);
+
+    await type(page, '222');
+    await page.waitForTimeout(200);
+    await pressEnter(page);
+
+    await type(page, '333');
+    await page.waitForTimeout(200);
+
+    await page.waitForTimeout(200);
+    expect(await getPageSnapshot(page, true)).toMatchSnapshot(
+      `${testInfo.title}_after_add_paragraph.json`
+    );
+
+    // drag bookmark block
+    await page.mouse.move(rect.x + 20, rect.y + 20);
+    await page.mouse.down();
+    await page.waitForTimeout(200);
+
+    await page.mouse.move(rect.x + 40, rect.y + rect.height + 80, {
+      steps: 5,
+    });
+    await page.waitForTimeout(200);
+
+    await page.mouse.up();
+    await page.waitForTimeout(200);
+
+    const rects = page
+      .locator('affine-block-selection')
+      .locator('visible=true');
+    await expect(rects).toHaveCount(1);
+
+    expect(await getPageSnapshot(page, true)).toMatchSnapshot(
+      `${testInfo.title}_after_drag.json`
+    );
+  }
+);
+
+test('press backspace after bookmark block can select bookmark block', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyParagraphState(page);
+  await focusRichText(page);
+
+  await pressEnter(page);
+  await pressArrowUp(page);
+  await type(page, '/link');
+  await pressEnter(page);
+  await page.waitForTimeout(100);
+  await type(page, LOCAL_HOST_URL);
+  await pressEnter(page);
+
+  await focusRichText(page);
+  await assertBlockCount(page, 'paragraph', 1);
+  await assertRichTextInlineRange(page, 0, 0);
+  await pressBackspace(page);
+  await assertBlockSelections(page, ['4']);
+  await assertBlockCount(page, 'paragraph', 0);
+});
+
+test.describe('embed card toolbar', () => {
+  async function showEmbedCardToolbar(page: Page) {
+    await createBookmarkBlockBySlashMenu(page);
+    const bookmark = page.locator('affine-bookmark');
+    await bookmark.click();
+    await page.waitForTimeout(100);
+    const { embedCardToolbar } = getEmbedCardToolbar(page);
+    await expect(embedCardToolbar).toBeVisible();
+  }
+
+  test('show toolbar when bookmark selected', async ({ page }) => {
+    await showEmbedCardToolbar(page);
+  });
+
+  // TODO(@fundon): should move to affine side
+  test.skip('copy bookmark url by copy button', async ({ page }, testInfo) => {
+    await showEmbedCardToolbar(page);
+    const { copyButton } = getEmbedCardToolbar(page);
+    await copyButton.click();
+    await page.mouse.click(600, 600);
+    await waitNextFrame(page);
+
+    await pasteByKeyboard(page);
+    expect(await getPageSnapshot(page, true)).toMatchSnapshot(
+      `${testInfo.title}_final.json`
+    );
+  });
+
+  test('change card style', async ({ page }) => {
+    await showEmbedCardToolbar(page);
+    const bookmark = page.locator('affine-bookmark');
+    const { openCardStyleMenu } = getEmbedCardToolbar(page);
+    await openCardStyleMenu();
+    const { cardStyleHorizontalButton, cardStyleListButton } =
+      getEmbedCardToolbar(page);
+    await cardStyleListButton.click();
+    await waitNextFrame(page);
+    const listStyleBookmarkBox = await bookmark
+      .locator('.affine-bookmark-card')
+      .boundingBox();
+    if (!listStyleBookmarkBox) {
+      throw new Error('listStyleBookmarkBox is not found');
+    }
+    assertAlmostEqual(listStyleBookmarkBox.width, 752, 2);
+    assertAlmostEqual(listStyleBookmarkBox.height, 48, 2);
+
+    await openCardStyleMenu();
+    await cardStyleHorizontalButton.click();
+    await waitNextFrame(page);
+    const horizontalStyleBookmarkBox = await bookmark
+      .locator('.affine-bookmark-card')
+      .boundingBox();
+    if (!horizontalStyleBookmarkBox) {
+      throw new Error('horizontalStyleBookmarkBox is not found');
+    }
+    assertAlmostEqual(horizontalStyleBookmarkBox.width, 752, 2);
+    assertAlmostEqual(horizontalStyleBookmarkBox.height, 116, 2);
+  });
+});
+
+test('indent bookmark block to paragraph', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyParagraphState(page);
+
+  await focusRichText(page);
+  await pressEnter(page);
+  await type(page, '/link', 100);
+  await pressEnter(page);
+  await type(page, LOCAL_HOST_URL);
+  await pressEnter(page);
+
+  await assertBlockChildrenIds(page, '1', ['2', '4']);
+  await assertBlockFlavour(page, '1', 'affine:note');
+  await assertBlockFlavour(page, '2', 'affine:paragraph');
+  await assertBlockFlavour(page, '4', 'affine:bookmark');
+
+  await focusRichText(page);
+  await pressArrowDown(page);
+  await assertBlockSelections(page, ['4']);
+  await pressTab(page);
+  await assertBlockChildrenIds(page, '1', ['2']);
+  await assertBlockChildrenIds(page, '2', ['4']);
+
+  await pressShiftTab(page);
+  await assertBlockChildrenIds(page, '1', ['2', '4']);
+});
+
+test('indent bookmark block to list', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyParagraphState(page);
+
+  await focusRichText(page);
+  await type(page, '- a');
+  await pressEnter(page);
+  await type(page, '/link', 100);
+  await pressEnter(page);
+  await type(page, LOCAL_HOST_URL);
+  await pressEnter(page);
+
+  await assertBlockChildrenIds(page, '1', ['3', '5']);
+  await assertBlockFlavour(page, '1', 'affine:note');
+  await assertBlockFlavour(page, '3', 'affine:list');
+  await assertBlockFlavour(page, '5', 'affine:bookmark');
+
+  await focusRichText(page);
+  await pressArrowDown(page);
+  await assertBlockSelections(page, ['5']);
+  await pressTab(page);
+  await assertBlockChildrenIds(page, '1', ['3']);
+  await assertBlockChildrenIds(page, '3', ['5']);
+
+  await pressShiftTab(page);
+  await assertBlockChildrenIds(page, '1', ['3', '5']);
+});
+
+test('bookmark can be dragged from note to surface top level block', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await focusRichText(page);
+  await page.waitForTimeout(100);
+  await type(page, '/link', 100);
+  await pressEnter(page);
+  await page.waitForTimeout(100);
+  await type(page, LOCAL_HOST_URL);
+  await pressEnter(page);
+
+  await switchEditorMode(page);
+  await page.mouse.dblclick(450, 450);
+
+  await dragBlockToPoint(page, '4', { x: 200, y: 200 });
+
+  await waitNextFrame(page);
+  await assertParentBlockFlavour(page, '4', 'affine:surface');
+});
+
+test('bookmark card should show banner in edgeless mode', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await switchEditorMode(page);
+
+  const url = 'https://github.com/toeverything/AFFiNE/pull/11796';
+
+  await page.locator('edgeless-link-tool-button').click();
+  await page.locator('.embed-card-modal-input').fill(url);
+  await pressEnter(page);
+
+  const banner = page.locator('.affine-bookmark-banner');
+  await expect(banner).toBeVisible();
+});
+
+test.describe('embed youtube card', () => {
+  test(scoped`create youtube card by slash menu`, async ({ page }) => {
+    expectConsoleMessage(page, /Unrecognized feature/, 'warning');
+    expectConsoleMessage(page, /Failed to load resource/);
+    await createBookmarkBlockBySlashMenu(page, YOUTUBE_URL);
+    const snapshot = (await getPageSnapshot(page)) as BlockSnapshot;
+    expect(ignoreSnapshotId(snapshot)).toMatchSnapshot('embed-youtube.json');
+    await page.evaluate(() => {
+      const block = document.querySelector<EmbedYoutubeBlockComponent>(
+        'affine-embed-youtube-block'
+      )!;
+      block.store.updateBlock(block.model, {
+        creatorUrl: 'https://www.youtube.com/@original',
+      });
+      block.service.queryUrlData = async () => ({ title: 'Refreshed title' });
+      block.refreshData();
+    });
+    await expect
+      .poll(() =>
+        page.evaluate(() => {
+          const block = document.querySelector<EmbedYoutubeBlockComponent>(
+            'affine-embed-youtube-block'
+          )!;
+          return {
+            title: block.model.props.title,
+            creatorUrl: block.model.props.creatorUrl,
+          };
+        })
+      )
+      .toEqual({
+        title: 'Refreshed title',
+        creatorUrl: 'https://www.youtube.com/@original',
+      });
+  });
+
+  test(scoped`change youtube card style`, async ({ page }) => {
+    expectConsoleMessage(page, /Unrecognized feature/, 'warning');
+    expectConsoleMessage(page, /Failed to load resource/);
+
+    await createBookmarkBlockBySlashMenu(page, YOUTUBE_URL);
+    const youtube = page.locator('affine-embed-youtube-block');
+    await youtube.click();
+    await page.waitForTimeout(100);
+
+    // change to card view
+    const embedToolbar = page.locator('affine-toolbar-widget editor-toolbar');
+    await expect(embedToolbar).toBeVisible();
+    const embedView = page.locator('editor-menu-button', {
+      hasText: 'embed view',
+    });
+    await expect(embedView).toBeVisible();
+    await embedView.click();
+    const cardView = page.locator('editor-menu-action', {
+      hasText: 'card view',
+    });
+    await expect(cardView).toBeVisible();
+    await cardView.click();
+    const snapshot = (await getPageSnapshot(page)) as BlockSnapshot;
+    expect(ignoreSnapshotId(snapshot)).toMatchSnapshot(
+      'horizontal-youtube.json'
+    );
+
+    // change to embed view
+    const bookmark = page.locator('affine-bookmark');
+    await bookmark.click();
+    await page.waitForTimeout(100);
+    const cardView2 = page.locator('editor-icon-button', {
+      hasText: 'card view',
+    });
+    await expect(cardView2).toBeVisible();
+    await cardView2.click();
+    const embedView2 = page.locator('editor-menu-action', {
+      hasText: 'embed view',
+    });
+    await expect(embedView2).toBeVisible();
+    await embedView2.click();
+    const snapshot2 = (await getPageSnapshot(page)) as BlockSnapshot;
+    expect(ignoreSnapshotId(snapshot2)).toMatchSnapshot('embed-youtube.json');
+  });
+});
+
+test.describe('embed figma card', () => {
+  test(scoped`create figma card by slash menu`, async ({ page }) => {
+    expectConsoleMessage(page, /Failed to load resource/);
+    expectConsoleMessage(page, /Refused to frame/);
+    await createBookmarkBlockBySlashMenu(page, FIGMA_URL);
+    const snapshot = (await getPageSnapshot(page)) as BlockSnapshot;
+    expect(ignoreSnapshotId(snapshot)).toMatchSnapshot('embed-figma.json');
+  });
+
+  test(scoped`change figma card style`, async ({ page }) => {
+    expectConsoleMessage(page, /Failed to load resource/);
+    expectConsoleMessage(page, /Refused to frame/);
+    expectConsoleMessage(page, /Running frontend commit/, 'log');
+    await createBookmarkBlockBySlashMenu(page, FIGMA_URL);
+    const youtube = page.locator('affine-embed-figma-block');
+    await youtube.click();
+    await page.waitForTimeout(100);
+
+    // change to card view
+    const embedToolbar = page.locator('affine-toolbar-widget editor-toolbar');
+    await expect(embedToolbar).toBeVisible();
+    const embedView = page.locator('editor-menu-button', {
+      hasText: 'embed view',
+    });
+    await expect(embedView).toBeVisible();
+    await embedView.click();
+    const cardView = page.locator('editor-menu-action', {
+      hasText: 'card view',
+    });
+    await expect(cardView).toBeVisible();
+    await cardView.click();
+    const snapshot = (await getPageSnapshot(page)) as BlockSnapshot;
+    expect(ignoreSnapshotId(snapshot)).toMatchSnapshot('horizontal-figma.json');
+
+    // change to embed view
+    const bookmark = page.locator('affine-bookmark');
+    await bookmark.click();
+    await page.waitForTimeout(100);
+    const cardView2 = page.locator('editor-icon-button', {
+      hasText: 'card view',
+    });
+    await expect(cardView2).toBeVisible();
+    await cardView2.click();
+    const embedView2 = page.locator('editor-menu-action', {
+      hasText: 'embed view',
+    });
+    await expect(embedView2).toBeVisible();
+    await embedView2.click();
+    const snapshot2 = (await getPageSnapshot(page)) as BlockSnapshot;
+    expect(ignoreSnapshotId(snapshot2)).toMatchSnapshot('embed-figma.json');
+  });
+});
+
+test.describe('embed github card', () => {
+  test('github embed card should show banner in edgeless mode', async ({
+    page,
+  }) => {
+    await enterPlaygroundRoom(page);
+    await initEmptyEdgelessState(page);
+    await switchEditorMode(page);
+    await clickView(page, [0, 0]);
+    const url = 'https://github.com/toeverything/AFFiNE/pull/11796';
+
+    await pasteContent(page, {
+      'text/plain': url,
+    });
+
+    const banner = page.locator('.affine-embed-github-banner');
+    await expect(banner).toBeVisible();
+  });
+});
+
+test('drag a card from canvas to note should not change the style of the card', async ({
+  page,
+}) => {
+  const url = 'https://github.com/toeverything/AFFiNE/pull/12660';
+
+  await edgelessCommonSetup(page);
+  await createNote(page, [-100, -300]);
+  await page.locator('edgeless-link-tool-button').click();
+  await page.locator('.embed-card-modal-input').fill(url);
+  await pressEnter(page);
+
+  const edgelessBookmark = page.locator('affine-edgeless-bookmark');
+  await edgelessBookmark.click();
+  await waitNextFrame(page);
+  const dragHandle = page.locator('.affine-drag-handle-container');
+  await dragHandle.dragTo(page.locator('affine-edgeless-note'));
+
+  const noteBookmark = page.locator('affine-bookmark');
+  await expect(noteBookmark).toBeVisible();
+  const style = await noteBookmark.evaluate(
+    (el: BookmarkBlockComponent) => el.model.props.style
+  );
+  expect(style).toBe('horizontal');
+});