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

tests/blocksuite/e2e/edgeless/note/drag-handle.spec.ts

@@ -0,0 +1,248 @@
+import { expect } from '@playwright/test';
+
+import {
+  addNote,
+  changeNoteDisplayModeWithId,
+  createNote,
+  dragBlockToPoint,
+  dragHandleFromBlockToBlockBottomById,
+  enterPlaygroundRoom,
+  focusRichText,
+  initEmptyEdgelessState,
+  initThreeParagraphs,
+  pressEnter,
+  pressEscape,
+  setEdgelessTool,
+  switchEditorMode,
+  type,
+  waitNextFrame,
+} from '../../utils/actions/index.js';
+import { assertRectExist, assertRichTexts } from '../../utils/asserts.js';
+import { NoteDisplayMode } from '../../utils/bs-alternative.js';
+import { test } from '../../utils/playwright.js';
+
+const CENTER_X = 450;
+const CENTER_Y = 450;
+
+test('drag handle should be shown when a note is activated in default mode or hidden in other modes', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await focusRichText(page);
+  await type(page, 'hello');
+  await assertRichTexts(page, ['hello']);
+
+  await switchEditorMode(page);
+  const noteBox = await page.locator('affine-edgeless-note').boundingBox();
+  if (!noteBox) {
+    throw new Error('Missing edgeless affine-note');
+  }
+
+  const [x, y] = [noteBox.x + 26, noteBox.y + noteBox.height / 2];
+
+  await page.mouse.move(x, y);
+  await expect(page.locator('.affine-drag-handle-container')).toBeHidden();
+  await page.mouse.dblclick(x, y);
+  await waitNextFrame(page);
+  await page.mouse.move(x, y);
+
+  await expect(page.locator('.affine-drag-handle-container')).toBeVisible();
+
+  await page.mouse.move(0, 0);
+  await setEdgelessTool(page, 'shape');
+  await page.mouse.move(x, y);
+  await expect(page.locator('.affine-drag-handle-container')).toBeHidden();
+
+  await page.mouse.move(0, 0);
+  await setEdgelessTool(page, 'default');
+  await page.mouse.move(x, y);
+  await page.mouse.click(x, y);
+  await expect(page.locator('.affine-drag-handle-container')).toBeVisible();
+});
+
+test('drag handle can drag note into another note', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  const { noteId } = await initEmptyEdgelessState(page);
+  await focusRichText(page);
+  await type(page, 'hello');
+  await assertRichTexts(page, ['hello']);
+
+  await switchEditorMode(page);
+  const noteRect = await page
+    .locator(`[data-block-id="${noteId}"]`)
+    .boundingBox();
+  assertRectExist(noteRect);
+
+  const secondNoteId = await addNote(page, 'hello world', 100, 100);
+  await waitNextFrame(page);
+  const secondNoteRect = await page
+    .locator(`[data-block-id="${secondNoteId}"]`)
+    .boundingBox();
+  assertRectExist(secondNoteRect);
+
+  {
+    const [x, y] = [
+      noteRect.x + noteRect.width / 2,
+      noteRect.y + noteRect.height / 2,
+    ];
+    await page.mouse.click(noteRect.x, noteRect.y + noteRect.height + 100);
+    await page.mouse.move(x, y);
+    await page.mouse.click(x, y);
+
+    const handlerRect = await page
+      .locator('.affine-drag-handle-container')
+      .boundingBox();
+    assertRectExist(handlerRect);
+
+    await page.mouse.move(
+      handlerRect.x + handlerRect.width / 2,
+      handlerRect.y + handlerRect.height / 2
+    );
+    await page.mouse.down();
+
+    const [targetX, targetY] = [
+      secondNoteRect.x + 10,
+      secondNoteRect.y + secondNoteRect.height / 2,
+    ];
+    await page.mouse.move(targetX, targetY);
+    await page.mouse.up();
+
+    await waitNextFrame(page);
+  }
+});
+
+test('drag handle should work inside one note', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await initThreeParagraphs(page);
+
+  await switchEditorMode(page);
+
+  await page.mouse.dblclick(CENTER_X, CENTER_Y);
+  await dragHandleFromBlockToBlockBottomById(page, '3', '5');
+  await waitNextFrame(page);
+  await expect(page.locator('affine-drag-handle-container')).toBeHidden();
+  await assertRichTexts(page, ['456', '789', '123']);
+});
+
+test('drag handle should work across multiple notes', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await initThreeParagraphs(page);
+  await assertRichTexts(page, ['123', '456', '789']);
+
+  await switchEditorMode(page);
+
+  await setEdgelessTool(page, 'note');
+
+  await page.mouse.click(200, 200);
+  await focusRichText(page, 3);
+  await waitNextFrame(page);
+
+  // block id 7
+  await type(page, '000');
+
+  await page.mouse.dblclick(CENTER_X, CENTER_Y - 20);
+  await dragHandleFromBlockToBlockBottomById(page, '3', '7');
+  await expect(page.locator('.affine-drag-handle-container')).toBeHidden();
+  await waitNextFrame(page);
+  await assertRichTexts(page, ['456', '789', '000', '123']);
+
+  const rect = await page
+    .locator('affine-edgeless-note')
+    .nth(1)
+    .locator('affine-paragraph')
+    .nth(1)
+    .boundingBox();
+
+  if (!rect) {
+    throw new Error('Missing bounding box for the paragraph');
+  }
+
+  await page.mouse.click(rect.x + 10, rect.y + 10, {
+    clickCount: 2,
+  });
+  await dragHandleFromBlockToBlockBottomById(page, '3', '4');
+  await waitNextFrame(page);
+  await expect(page.locator('.affine-drag-handle-container')).toBeHidden();
+  await assertRichTexts(page, ['456', '123', '789', '000']);
+
+  await expect(page.locator('selected > *')).toHaveCount(0);
+});
+
+test('should keep relative order of new note when a block is dragged from note to canvas', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await focusRichText(page);
+  await type(page, '3');
+  await switchEditorMode(page);
+
+  const note2 = await createNote(page, [0, -200], '5');
+  await pressEnter(page);
+  await type(page, '6');
+  await pressEnter(page);
+  await type(page, '7');
+  await pressEscape(page, 3);
+  await changeNoteDisplayModeWithId(
+    page,
+    note2,
+    NoteDisplayMode.DocAndEdgeless
+  );
+  await pressEscape(page);
+
+  const note3 = await createNote(page, [0, 200], '9');
+  await pressEscape(page, 3);
+  await changeNoteDisplayModeWithId(
+    page,
+    note3,
+    NoteDisplayMode.DocAndEdgeless
+  );
+  await pressEscape(page);
+
+  await assertRichTexts(page, ['3', '5', '6', '7', '9']);
+
+  const notes = page.locator('affine-edgeless-note');
+
+  await notes.nth(1).dblclick();
+  await dragBlockToPoint(page, '5', { x: 50, y: 100 });
+  await waitNextFrame(page);
+  await assertRichTexts(page, ['3', '5', '6', '7', '9']);
+
+  await notes.nth(2).dblclick();
+  await dragBlockToPoint(page, '7', { x: 50, y: 200 });
+  await waitNextFrame(page);
+  await assertRichTexts(page, ['3', '5', '6', '7', '9']);
+});
+
+test('drag handle should work when hover on the background of a selected edgeless note', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await focusRichText(page);
+  await type(page, 'hello');
+  await switchEditorMode(page);
+  await page.mouse.dblclick(CENTER_X, CENTER_Y);
+  // wait for the note animation
+  await waitNextFrame(page, 400);
+
+  const noteRect = await page.locator('affine-edgeless-note').boundingBox();
+  assertRectExist(noteRect);
+
+  const noteBackgroundRect = await page
+    .locator('edgeless-note-background')
+    .boundingBox();
+  assertRectExist(noteBackgroundRect);
+
+  const paragraphRect = await page.locator('affine-paragraph').boundingBox();
+  assertRectExist(paragraphRect);
+
+  // move to the area between note background and note block and before the paragraph
+  const x = (noteRect.x + noteBackgroundRect.x) / 2;
+  const y = paragraphRect.y + paragraphRect.height / 2;
+  await page.mouse.move(x, y, { steps: 2 });
+  await expect(page.locator('.affine-drag-handle-container')).toBeVisible();
+});

tests/blocksuite/e2e/edgeless/note/mode.spec.ts

@@ -0,0 +1,79 @@
+import {
+  addNote,
+  changeNoteDisplayModeWithId,
+  enterPlaygroundRoom,
+  initEmptyEdgelessState,
+  switchEditorMode,
+  zoomResetByKeyboard,
+} from '../../utils/actions/index.js';
+import { assertBlockCount } from '../../utils/asserts.js';
+import { NoteDisplayMode } from '../../utils/bs-alternative.js';
+import { test } from '../../utils/playwright.js';
+
+test('Note added on doc mode should display on both modes by default', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+
+  // there should be 1 note in doc page
+  await assertBlockCount(page, 'note', 1);
+
+  await switchEditorMode(page);
+  // there should be 1 note in edgeless page as well
+  await assertBlockCount(page, 'edgeless-note', 1);
+});
+
+test('Note added on edgeless mode should display on edgeless only by default', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+
+  await switchEditorMode(page);
+  await zoomResetByKeyboard(page);
+  await addNote(page, 'note2', 100, 100);
+
+  // assert add note success, there should be 2 notes in edgeless page
+  await assertBlockCount(page, 'edgeless-note', 2);
+
+  await switchEditorMode(page);
+  // switch to doc mode, the note added on edgeless mode should not render on doc mode
+  // there should be only 1 note in doc page
+  await assertBlockCount(page, 'note', 1);
+});
+
+test('Note can be changed to display on doc and edgeless mode', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+
+  await switchEditorMode(page);
+  await zoomResetByKeyboard(page);
+  const noteId = await addNote(page, 'note2', 100, 200);
+  await page.mouse.click(200, 150);
+  // assert add note success, there should be 2 notes in edgeless page
+  await assertBlockCount(page, 'edgeless-note', 2);
+
+  // switch to doc mode
+  await switchEditorMode(page);
+  // there should be 1 notes in doc page
+  await assertBlockCount(page, 'note', 1);
+
+  // switch back to edgeless mode
+  await switchEditorMode(page);
+  // change note display mode to doc only
+  await changeNoteDisplayModeWithId(
+    page,
+    noteId,
+    NoteDisplayMode.DocAndEdgeless
+  );
+  // there should still be 2 notes in edgeless page
+  await assertBlockCount(page, 'edgeless-note', 2);
+
+  // switch to doc mode
+  await switchEditorMode(page);
+  // change successfully, there should be 2 notes in doc page
+  await assertBlockCount(page, 'note', 2);
+});

tests/blocksuite/e2e/edgeless/note/note.spec.ts

@@ -0,0 +1,689 @@
+import { expect } from '@playwright/test';
+import { lightThemeV2 } from '@toeverything/theme/v2';
+
+import {
+  activeNoteInEdgeless,
+  addNote,
+  assertEdgelessTool,
+  changeEdgelessNoteBackground,
+  changeNoteDisplayMode,
+  dragBetweenViewCoords,
+  getSelectedBound,
+  getSelectedBoundCount,
+  getViewportCenter,
+  locatorComponentToolbar,
+  locatorEdgelessZoomToolButton,
+  resizeElementByHandle,
+  selectNoteInEdgeless,
+  setEdgelessTool,
+  setViewportCenter,
+  switchEditorMode,
+  triggerComponentToolbarAction,
+  zoomOutByKeyboard,
+  zoomResetByKeyboard,
+} from '../../utils/actions/edgeless.js';
+import {
+  click,
+  clickBlockById,
+  clickView,
+  dragBetweenCoords,
+  dragBetweenIndices,
+  enterPlaygroundRoom,
+  focusRichText,
+  focusRichTextEnd,
+  initEmptyEdgelessState,
+  initThreeParagraphs,
+  pressArrowDown,
+  pressArrowUp,
+  pressBackspace,
+  pressEnter,
+  pressEscape,
+  pressTab,
+  selectAllByKeyboard,
+  type,
+  undoByKeyboard,
+  waitForInlineEditorStateUpdated,
+  waitNextFrame,
+} from '../../utils/actions/index.js';
+import {
+  assertBlockChildrenIds,
+  assertBlockCount,
+  assertEdgelessNonSelectedRect,
+  assertEdgelessNoteBackground,
+  assertEdgelessSelectedRect,
+  assertNoteSequence,
+  assertNoteXYWH,
+  assertRichTextInlineRange,
+  assertRichTexts,
+  assertTextSelection,
+} from '../../utils/asserts.js';
+import {
+  DEFAULT_NOTE_HEIGHT,
+  DEFAULT_NOTE_WIDTH,
+  NoteDisplayMode,
+} from '../../utils/bs-alternative.js';
+import { test } from '../../utils/playwright.js';
+
+const CENTER_X = 450;
+const CENTER_Y = 450;
+
+test('can drag selected non-active note', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await focusRichText(page);
+  await type(page, 'hello');
+  await assertRichTexts(page, ['hello']);
+
+  await switchEditorMode(page);
+  await zoomResetByKeyboard(page);
+  await assertNoteXYWH(page, [0, 0, DEFAULT_NOTE_WIDTH, DEFAULT_NOTE_HEIGHT]);
+
+  // selected, non-active
+  await page.mouse.click(CENTER_X, CENTER_Y);
+  await dragBetweenCoords(
+    page,
+    { x: CENTER_X, y: CENTER_Y },
+    { x: CENTER_X, y: CENTER_Y + 100 }
+  );
+  await assertNoteXYWH(page, [0, 100, DEFAULT_NOTE_WIDTH, DEFAULT_NOTE_HEIGHT]);
+
+  await undoByKeyboard(page);
+  await waitNextFrame(page);
+  await assertNoteXYWH(page, [0, 0, DEFAULT_NOTE_WIDTH, DEFAULT_NOTE_HEIGHT]);
+});
+
+test('add Note', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+
+  await switchEditorMode(page);
+  await zoomResetByKeyboard(page);
+  await addNote(page, 'hello', 300, 300);
+
+  await assertEdgelessTool(page, 'default');
+  await assertRichTexts(page, ['', 'hello']);
+  await page.mouse.click(300, 200);
+  await page.mouse.click(350, 320);
+  await assertEdgelessSelectedRect(page, [
+    270,
+    260,
+    DEFAULT_NOTE_WIDTH,
+    DEFAULT_NOTE_HEIGHT,
+  ]);
+});
+
+test('add empty Note', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+
+  await switchEditorMode(page);
+  await zoomResetByKeyboard(page);
+  await setEdgelessTool(page, 'note');
+  // add note at 300,300
+  await page.mouse.click(300, 300);
+  await waitForInlineEditorStateUpdated(page);
+  // should wait for inline editor update and resizeObserver callback
+  await waitNextFrame(page);
+
+  // assert add note success
+  await assertBlockCount(page, 'edgeless-note', 2);
+
+  // click out of note
+  await page.mouse.click(250, 200);
+
+  // assert empty note is note removed
+  await page.mouse.move(320, 320);
+  await assertBlockCount(page, 'edgeless-note', 2);
+});
+
+test('always keep at least 1 note block', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+
+  await switchEditorMode(page);
+  await setEdgelessTool(page, 'default');
+
+  // clicking in default mode will try to remove empty note block
+  await page.mouse.click(0, 0);
+
+  const notes = await page.locator('affine-edgeless-note').all();
+  expect(notes.length).toEqual(1);
+});
+
+test('edgeless arrow up/down', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  const { paragraphId, noteId } = await initEmptyEdgelessState(page);
+  await switchEditorMode(page);
+  await activeNoteInEdgeless(page, noteId);
+  await waitNextFrame(page, 400);
+
+  await type(page, 'aaaaa');
+  await pressEnter(page);
+  await type(page, 'aaaaa');
+  await pressEnter(page);
+  await type(page, 'aaa');
+
+  await waitForInlineEditorStateUpdated(page);
+  // 0 for page, 1 for surface, 2 for note, 3 for paragraph
+  expect(paragraphId).toBe('3');
+  await clickBlockById(page, paragraphId);
+  await assertRichTextInlineRange(page, 0, 5, 0);
+
+  await pressArrowDown(page);
+  await waitNextFrame(page);
+  await assertRichTextInlineRange(page, 1, 5, 0);
+
+  await pressArrowUp(page);
+  await waitNextFrame(page);
+  await assertRichTextInlineRange(page, 0, 5, 0);
+
+  await pressArrowUp(page);
+  await waitNextFrame(page);
+  await assertRichTextInlineRange(page, 0, 0, 0);
+});
+
+test('dragging un-selected note', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await focusRichText(page);
+  await type(page, 'hello');
+  await assertRichTexts(page, ['hello']);
+
+  await switchEditorMode(page);
+
+  const noteBox = await page.locator('affine-edgeless-note').boundingBox();
+  if (!noteBox) {
+    throw new Error('Missing edgeless affine-note');
+  }
+  await page.mouse.click(noteBox.x + 5, noteBox.y + 5);
+  await assertEdgelessSelectedRect(page, [
+    noteBox.x,
+    noteBox.y,
+    noteBox.width,
+    noteBox.height,
+  ]);
+
+  await dragBetweenCoords(
+    page,
+    { x: noteBox.x + 10, y: noteBox.y + 15 },
+    { x: noteBox.x + 10, y: noteBox.y + 35 },
+    { steps: 10 }
+  );
+
+  await assertEdgelessSelectedRect(page, [
+    noteBox.x,
+    noteBox.y + 20,
+    noteBox.width,
+    noteBox.height,
+  ]);
+});
+
+test('format quick bar should show up when double-clicking on text', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await initThreeParagraphs(page);
+  await switchEditorMode(page);
+
+  await page.mouse.dblclick(CENTER_X, CENTER_Y);
+  await waitNextFrame(page);
+
+  await page
+    .locator('rich-text')
+    .nth(1)
+    .dblclick({
+      position: { x: 10, y: 10 },
+      delay: 20,
+    });
+  await page.waitForTimeout(200);
+  const formatBar = page.locator('affine-toolbar-widget editor-toolbar');
+  await expect(formatBar).toBeVisible();
+});
+
+test('when editing text in edgeless, should hide component toolbar', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  const { noteId } = await initEmptyEdgelessState(page);
+  await initThreeParagraphs(page);
+  await switchEditorMode(page);
+
+  await selectNoteInEdgeless(page, noteId);
+
+  const toolbar = locatorComponentToolbar(page);
+  await expect(toolbar).toBeVisible();
+
+  await page.mouse.click(0, 0);
+  await activeNoteInEdgeless(page, noteId);
+  await expect(toolbar).toBeHidden();
+});
+
+test('duplicate note should work correctly', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  const { noteId } = await initEmptyEdgelessState(page);
+  await initThreeParagraphs(page);
+  await assertRichTexts(page, ['123', '456', '789']);
+
+  await switchEditorMode(page);
+
+  await selectNoteInEdgeless(page, noteId);
+
+  await triggerComponentToolbarAction(page, 'duplicate');
+  await waitNextFrame(page, 200); // wait viewport fit animation
+  const moreActionsContainer = page.getByLabel('More menu').getByRole('menu');
+  await expect(moreActionsContainer).toBeHidden();
+
+  const noteLocator = page.locator('affine-edgeless-note');
+  await expect(noteLocator).toHaveCount(2);
+  const [firstNote, secondNote] = await noteLocator.all();
+
+  // content should be same
+  expect(await firstNote.innerText()).toEqual(await secondNote.innerText());
+
+  // size should be same
+  const firstNoteBox = await firstNote.boundingBox();
+  const secondNoteBox = await secondNote.boundingBox();
+  expect(firstNoteBox!.width).toBeCloseTo(secondNoteBox!.width);
+  expect(firstNoteBox!.height).toBeCloseTo(secondNoteBox!.height);
+});
+
+test('double click toolbar zoom button, should not add text', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await switchEditorMode(page);
+
+  const zoomOutButton = await locatorEdgelessZoomToolButton(
+    page,
+    'zoomOut',
+    false
+  );
+  await zoomOutButton.dblclick();
+  await assertEdgelessNonSelectedRect(page);
+});
+
+test('change note color', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  const { noteId } = await initEmptyEdgelessState(page);
+  await initThreeParagraphs(page);
+  await switchEditorMode(page);
+
+  await assertEdgelessNoteBackground(
+    page,
+    noteId,
+    lightThemeV2['edgeless/note/white']
+  );
+
+  await selectNoteInEdgeless(page, noteId);
+  await triggerComponentToolbarAction(page, 'changeNoteStyle');
+  await changeEdgelessNoteBackground(page, 'Green');
+  await assertEdgelessNoteBackground(
+    page,
+    noteId,
+    lightThemeV2['edgeless/note/green']
+  );
+});
+
+test('cursor for active and inactive state', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await focusRichText(page);
+  await type(page, 'hello');
+  await pressEnter(page);
+  await pressEnter(page);
+  await assertRichTexts(page, ['hello', '', '']);
+
+  await switchEditorMode(page);
+
+  await page.mouse.click(CENTER_X, CENTER_Y);
+  await waitNextFrame(page);
+  await assertTextSelection(page);
+  await page.mouse.dblclick(CENTER_X, CENTER_Y);
+  await waitNextFrame(page);
+  await assertTextSelection(page, {
+    blockId: '3',
+    index: 5,
+    length: 0,
+  });
+});
+
+test('when no visible note block, clicking in page mode will auto add a new note block', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await switchEditorMode(page);
+
+  await assertBlockCount(page, 'edgeless-note', 1);
+  // select note
+  await selectNoteInEdgeless(page, '2');
+  await assertNoteSequence(page, '1');
+  await assertBlockCount(page, 'edgeless-note', 1);
+  // hide note
+  await triggerComponentToolbarAction(page, 'changeNoteDisplayMode');
+  await waitNextFrame(page);
+  await changeNoteDisplayMode(page, NoteDisplayMode.EdgelessOnly);
+
+  await switchEditorMode(page);
+  let note = await page.evaluate(() => {
+    return document.querySelector('affine-note');
+  });
+  expect(note).toBeNull();
+  await click(page, { x: 200, y: 280 });
+
+  note = await page.evaluate(() => {
+    return document.querySelector('affine-note');
+  });
+  expect(note).not.toBeNull();
+});
+
+test.fixme('Click at empty note should add a paragraph block', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await focusRichText(page);
+  await type(page, '123');
+  await assertRichTexts(page, ['123']);
+
+  await switchEditorMode(page);
+
+  // Drag paragraph out of note block
+  const paragraphBlock = await page
+    .locator(`[data-block-id="3"]`)
+    .boundingBox();
+  if (!paragraphBlock) {
+    throw new Error('paragraphBlock is not found');
+  }
+  await page.mouse.dblclick(paragraphBlock.x, paragraphBlock.y);
+  await waitNextFrame(page);
+  await page.mouse.move(
+    paragraphBlock.x + paragraphBlock.width / 2,
+    paragraphBlock.y + paragraphBlock.height / 2
+  );
+  await waitNextFrame(page);
+  const handle = await page
+    .locator('.affine-drag-handle-container')
+    .boundingBox();
+  if (!handle) {
+    throw new Error('handle is not found');
+  }
+  await page.mouse.move(
+    handle.x + handle.width / 2,
+    handle.y + handle.height / 2,
+    { steps: 10 }
+  );
+  await page.mouse.down();
+  await page.mouse.move(100, 200, { steps: 30 });
+  await page.mouse.up();
+
+  // There should be two note blocks and one paragraph block
+  await assertRichTexts(page, ['123']);
+  await assertBlockCount(page, 'edgeless-note', 2);
+  await assertBlockCount(page, 'paragraph', 1);
+
+  // Click at empty note block to add a paragraph block
+  const emptyNote = await page.locator(`[data-block-id="2"]`).boundingBox();
+  if (!emptyNote) {
+    throw new Error('emptyNote is not found');
+  }
+  await page.mouse.click(
+    emptyNote.x + emptyNote.width / 2,
+    emptyNote.y + emptyNote.height / 2
+  );
+  await waitNextFrame(page, 300);
+  await type(page, '456');
+  await waitNextFrame(page, 400);
+
+  await page.mouse.click(100, 100);
+  await waitNextFrame(page, 400);
+  await assertBlockCount(page, 'paragraph', 2);
+});
+
+test('Should focus at closest text block when note collapse', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+
+  // Make sure there is no rich text content
+  await switchEditorMode(page);
+  await zoomResetByKeyboard(page);
+  await assertRichTexts(page, ['']);
+
+  // Select the note
+  await zoomOutByKeyboard(page);
+  const notePortalBox = await page
+    .locator('affine-edgeless-note')
+    .boundingBox();
+  if (!notePortalBox) {
+    throw new Error('notePortalBox is not found');
+  }
+  await page.mouse.click(notePortalBox.x + 10, notePortalBox.y + 10);
+  await waitNextFrame(page, 200);
+  const selectedRect = page
+    .locator('edgeless-selected-rect')
+    .locator('.affine-edgeless-selected-rect');
+  await expect(selectedRect).toBeVisible();
+
+  // Collapse the note
+  const selectedBox = await selectedRect.boundingBox();
+  if (!selectedBox) {
+    throw new Error('selectedBox is not found');
+  }
+  await page.mouse.move(
+    selectedBox.x + selectedBox.width / 2,
+    selectedBox.y + selectedBox.height
+  );
+  await page.mouse.down();
+  await page.mouse.move(
+    selectedBox.x + selectedBox.width / 2,
+    selectedBox.y + selectedBox.height + 200,
+    { steps: 10 }
+  );
+  await page.mouse.up();
+  await expect(selectedRect).toBeVisible();
+
+  // Click at the bottom of note to focus at the closest text block
+  await page.mouse.click(
+    selectedBox.x + selectedBox.width / 2,
+    selectedBox.y + selectedBox.height - 20
+  );
+  await waitNextFrame(page, 200);
+
+  // Should be enter edit mode and there are no selected rect
+  await expect(selectedRect).toBeHidden();
+
+  // Focus at the closest text block and make sure can type
+  await type(page, 'hello');
+  await waitNextFrame(page, 200);
+  await assertRichTexts(page, ['hello']);
+});
+
+test('delete first block in edgeless note', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await switchEditorMode(page);
+  await zoomResetByKeyboard(page);
+  await assertNoteXYWH(page, [0, 0, DEFAULT_NOTE_WIDTH, DEFAULT_NOTE_HEIGHT]);
+  await page.mouse.dblclick(CENTER_X, CENTER_Y);
+
+  // first block without children, nothing should happen
+  await assertRichTexts(page, ['']);
+  await assertBlockChildrenIds(page, '3', []);
+  await pressBackspace(page);
+
+  await type(page, 'aaa');
+  await pressEnter(page);
+  await type(page, 'bbb');
+  await pressTab(page);
+  await assertRichTexts(page, ['aaa', 'bbb']);
+  await assertBlockChildrenIds(page, '3', ['4']);
+
+  // first block with children, need to bring children to parent
+  await focusRichTextEnd(page);
+  await pressBackspace(page, 3);
+  await assertRichTexts(page, ['', 'bbb']);
+  await pressBackspace(page);
+  await assertRichTexts(page, ['bbb']);
+  await assertBlockChildrenIds(page, '4', []);
+});
+
+test('select text cross blocks in edgeless note', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  const { noteId } = await initEmptyEdgelessState(page);
+  await switchEditorMode(page);
+  await activeNoteInEdgeless(page, noteId);
+  await waitNextFrame(page, 400);
+
+  await type(page, 'aaa');
+  await pressEnter(page);
+  await type(page, 'bbb');
+  await pressEnter(page);
+  await type(page, 'ccc');
+  await assertRichTexts(page, ['aaa', 'bbb', 'ccc']);
+
+  await dragBetweenIndices(page, [0, 1], [2, 2]);
+  await pressBackspace(page);
+  await assertRichTexts(page, ['ac']);
+});
+
+test('should not select doc only note', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await switchEditorMode(page);
+  await clickView(page, [0, 0]);
+
+  await selectAllByKeyboard(page);
+  const noteBound = await getSelectedBound(page);
+
+  await triggerComponentToolbarAction(page, 'changeNoteDisplayMode');
+  await waitNextFrame(page);
+  await changeNoteDisplayMode(page, NoteDisplayMode.DocOnly);
+
+  await selectAllByKeyboard(page);
+  expect(await getSelectedBoundCount(page)).toBe(0);
+
+  await clickView(page, [
+    0.5 * (noteBound[0] + noteBound[2]),
+    0.5 * (noteBound[1] + noteBound[3]),
+  ]);
+  expect(await getSelectedBoundCount(page)).toBe(0);
+
+  await dragBetweenViewCoords(
+    page,
+    [noteBound[0] - 10, noteBound[1] - 10],
+    [noteBound[0] + noteBound[2] + 10, noteBound[1] + noteBound[3] + 10]
+  );
+  expect(await getSelectedBoundCount(page)).toBe(0);
+});
+
+test.describe('visibility of hidden content of edgeless note', () => {
+  test.beforeEach(async ({ page }) => {
+    await enterPlaygroundRoom(page);
+    await initEmptyEdgelessState(page);
+    await switchEditorMode(page);
+
+    const note = page.locator('affine-edgeless-note');
+    await note.click({ clickCount: 3 });
+    await type(page, 'hello');
+    await pressEnter(page, 30);
+    await type(page, 'world');
+    await pressEscape(page, 3);
+
+    const vpCenter = await getViewportCenter(page);
+    vpCenter[1] += 1000;
+    await setViewportCenter(page, vpCenter);
+
+    await note.click();
+    await resizeElementByHandle(page, { x: 0, y: -300 }, 'bottom-right');
+  });
+
+  test('should hide content when note is not selected or hovered when selected', async ({
+    page,
+  }) => {
+    const note = page.locator('affine-edgeless-note');
+    const lastParagraph = page.locator('affine-paragraph').last();
+
+    await pressEscape(page, 3);
+    await expect(lastParagraph).not.toBeInViewport();
+
+    const noteBound = await note.boundingBox();
+    if (!noteBound) {
+      test.fail();
+      return;
+    }
+    await note.click();
+    // move out to right side
+    await page.mouse.move(
+      noteBound.x + noteBound.width + 10,
+      noteBound.y + noteBound.height - 10
+    );
+    await expect(lastParagraph).not.toBeInViewport();
+  });
+
+  test('should show hidden content when hover on selected note', async ({
+    page,
+  }) => {
+    const note = page.locator('affine-edgeless-note');
+    const lastParagraph = page.locator('affine-paragraph').last();
+
+    const noteBound = await note.boundingBox();
+    if (!noteBound) {
+      test.fail();
+      return;
+    }
+
+    // move in right side
+    await page.mouse.move(
+      noteBound.x + noteBound.width - 10,
+      noteBound.y + noteBound.height - 10
+    );
+    await expect(lastParagraph).toBeInViewport();
+
+    // move to hidden content
+    await page.mouse.move(
+      noteBound.x + noteBound.width - 10,
+      noteBound.y + noteBound.height + 100
+    );
+    await expect(lastParagraph).toBeInViewport();
+  });
+
+  test('should show hidden content when the note is being edited', async ({
+    page,
+  }) => {
+    const note = page.locator('affine-edgeless-note');
+    const lastParagraph = page.locator('affine-paragraph').last();
+
+    await note.click({ clickCount: 3 });
+    await page.locator('affine-paragraph').nth(22).click();
+    await type(page, 'test');
+
+    await expect(lastParagraph).toBeInViewport();
+
+    await note.click({ clickCount: 3 });
+    await page.locator('affine-paragraph').nth(22).click();
+
+    const noteBound = await note.boundingBox();
+    if (!noteBound) {
+      test.fail();
+      return;
+    }
+    await page.mouse.move(
+      noteBound.x + noteBound.width - 10,
+      noteBound.y + noteBound.height - 10
+    );
+    await expect(lastParagraph).toBeInViewport();
+
+    await note.click({ clickCount: 3 });
+    await page.locator('affine-paragraph').nth(22).click();
+
+    await page.mouse.wheel(0, 200);
+    await expect(
+      lastParagraph,
+      'editing note but out of viewport should also show hidden content'
+    ).toBeInViewport();
+  });
+});

tests/blocksuite/e2e/edgeless/note/resize.spec.ts

@@ -0,0 +1,223 @@
+import { expect } from '@playwright/test';
+
+import {
+  activeNoteInEdgeless,
+  enterPlaygroundRoom,
+  getNoteRect,
+  initEmptyEdgelessState,
+  redoByClick,
+  resizeElementByHandle,
+  selectNoteInEdgeless,
+  setEdgelessTool,
+  switchEditorMode,
+  triggerComponentToolbarAction,
+  type,
+  undoByClick,
+  waitForInlineEditorStateUpdated,
+  waitNextFrame,
+  zoomResetByKeyboard,
+} from '../../utils/actions/index.js';
+import {
+  assertBlockCount,
+  assertEdgelessSelectedRect,
+  assertNoteRectEqual,
+  assertRectEqual,
+  assertRichTexts,
+} from '../../utils/asserts.js';
+import { NOTE_MIN_HEIGHT, NOTE_MIN_WIDTH } from '../../utils/bs-alternative.js';
+import { test } from '../../utils/playwright.js';
+
+test('resize note in edgeless mode', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  const { noteId } = await initEmptyEdgelessState(page);
+  await switchEditorMode(page);
+  await zoomResetByKeyboard(page);
+  await activeNoteInEdgeless(page, noteId);
+  await waitNextFrame(page, 400);
+  await type(page, 'hello');
+  await assertRichTexts(page, ['hello']);
+
+  // unselect note
+  await page.mouse.click(50, 50);
+
+  expect(noteId).toBe('2'); // 0 for page, 1 for surface
+  await selectNoteInEdgeless(page, noteId);
+
+  const initRect = await getNoteRect(page, noteId);
+  await resizeElementByHandle(page, { x: -100, y: 0 }, 'bottom-left');
+
+  const draggedRect = await getNoteRect(page, noteId);
+  assertRectEqual(draggedRect, {
+    x: initRect.x - 100,
+    y: initRect.y,
+    w: initRect.w + 100,
+    h: initRect.h,
+  });
+
+  await switchEditorMode(page);
+  await switchEditorMode(page);
+  const newRect = await getNoteRect(page, noteId);
+  assertRectEqual(newRect, draggedRect);
+});
+
+test('resize note then collapse note', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  const { noteId } = await initEmptyEdgelessState(page);
+  await switchEditorMode(page);
+  await zoomResetByKeyboard(page);
+  await activeNoteInEdgeless(page, noteId);
+  await waitNextFrame(page, 400);
+  await type(page, 'hello');
+  await assertRichTexts(page, ['hello']);
+
+  // unselect note
+  await page.mouse.click(50, 50);
+
+  expect(noteId).toBe('2'); // 0 for page, 1 for surface
+  await selectNoteInEdgeless(page, noteId);
+
+  const initRect = await getNoteRect(page, noteId);
+
+  await resizeElementByHandle(page, { x: 0, y: 100 }, 'bottom-right');
+  let noteRect = await getNoteRect(page, noteId);
+  await expect(page.getByTestId('edgeless-note-collapse-button')).toBeVisible();
+  assertRectEqual(noteRect, {
+    x: initRect.x,
+    y: initRect.y,
+    w: initRect.w,
+    h: initRect.h + 100,
+  });
+
+  await page.getByTestId('edgeless-note-collapse-button')!.click();
+  let domRect = await page.locator('affine-edgeless-note').boundingBox();
+  expect(domRect!.height).toBeCloseTo(NOTE_MIN_HEIGHT);
+
+  await page.getByTestId('edgeless-note-collapse-button')!.click();
+  domRect = await page.locator('affine-edgeless-note').boundingBox();
+  expect(domRect!.height).toBeCloseTo(initRect.h + 100);
+
+  await selectNoteInEdgeless(page, noteId);
+  await resizeElementByHandle(page, { x: 0, y: -150 }, 'bottom-right');
+
+  noteRect = await getNoteRect(page, noteId);
+  assertRectEqual(noteRect, {
+    x: initRect.x,
+    y: initRect.y,
+    w: initRect.w,
+    h: NOTE_MIN_HEIGHT,
+  });
+
+  await switchEditorMode(page);
+  await switchEditorMode(page);
+  const newRect = await getNoteRect(page, noteId);
+  assertRectEqual(newRect, noteRect);
+});
+
+test('resize note then auto size and custom size', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  const { noteId } = await initEmptyEdgelessState(page);
+  await switchEditorMode(page);
+  await zoomResetByKeyboard(page);
+  await activeNoteInEdgeless(page, noteId);
+  await waitNextFrame(page, 400);
+  await type(page, 'hello');
+  await assertRichTexts(page, ['hello']);
+  // unselect note
+  await page.mouse.click(50, 50);
+  await selectNoteInEdgeless(page, noteId);
+
+  const initRect = await getNoteRect(page, noteId);
+
+  await resizeElementByHandle(page, { x: 0, y: 100 }, 'bottom-right');
+
+  const draggedRect = await getNoteRect(page, noteId);
+  assertRectEqual(draggedRect, {
+    x: initRect.x,
+    y: initRect.y,
+    w: initRect.w,
+    h: initRect.h + 100,
+  });
+
+  await triggerComponentToolbarAction(page, 'autoSize');
+  await waitNextFrame(page, 200);
+  const autoSizeRect = await getNoteRect(page, noteId);
+  assertRectEqual(autoSizeRect, initRect);
+
+  await triggerComponentToolbarAction(page, 'autoSize');
+  await waitNextFrame(page, 200);
+  await assertNoteRectEqual(page, noteId, draggedRect);
+
+  await undoByClick(page);
+  await page.mouse.click(50, 50);
+  await waitNextFrame(page, 200);
+  await assertNoteRectEqual(page, noteId, initRect);
+
+  await redoByClick(page);
+  await waitNextFrame(page, 200);
+  await assertNoteRectEqual(page, noteId, draggedRect);
+});
+
+test('drag to add customized size note', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+
+  await switchEditorMode(page);
+  await zoomResetByKeyboard(page);
+  await setEdgelessTool(page, 'note');
+  // add note at 300,300
+  await page.mouse.move(300, 300);
+  await page.mouse.down();
+  await page.mouse.move(900, 600, { steps: 10 });
+  await page.mouse.up();
+  // should wait for inline editor update and resizeObserver callback
+  await waitForInlineEditorStateUpdated(page);
+
+  // assert add note success
+  await assertBlockCount(page, 'edgeless-note', 2);
+
+  // click out of note
+  await page.mouse.click(250, 200);
+  // click on note to select it
+  await page.mouse.click(600, 500);
+  // assert selected note
+  // note add on edgeless mode will have a offsetX of 30 and offsetY of 40
+  await assertEdgelessSelectedRect(page, [270, 260, 600, 300]);
+});
+
+test('drag to add customized size note: should clamp to min width and min height', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+
+  await switchEditorMode(page);
+  await zoomResetByKeyboard(page);
+  await setEdgelessTool(page, 'note');
+
+  // add note at 300,300
+  await page.mouse.move(300, 300);
+  await page.mouse.down();
+  await page.mouse.move(400, 360, { steps: 10 });
+  await page.mouse.up();
+  await waitNextFrame(page);
+
+  await waitNextFrame(page);
+
+  // should wait for inline editor update and resizeObserver callback
+  await waitForInlineEditorStateUpdated(page);
+  // assert add note success
+  await assertBlockCount(page, 'edgeless-note', 2);
+
+  // click out of note
+  await page.mouse.click(250, 200);
+  // click on note to select it
+  await page.mouse.click(320, 300);
+  // assert selected note
+  // note add on edgeless mode will have a offsetX of 30 and offsetY of 40
+  await assertEdgelessSelectedRect(page, [
+    270,
+    260,
+    NOTE_MIN_WIDTH,
+    NOTE_MIN_HEIGHT,
+  ]);
+});

tests/blocksuite/e2e/edgeless/note/scale.spec.ts

@@ -0,0 +1,149 @@
+import { expect, type Page } from '@playwright/test';
+
+import {
+  addNote,
+  locatorScalePanelButton,
+  selectNoteInEdgeless,
+  switchEditorMode,
+  triggerComponentToolbarAction,
+  zoomResetByKeyboard,
+} from '../../utils/actions/edgeless.js';
+import {
+  copyByKeyboard,
+  pasteByKeyboard,
+  selectAllByKeyboard,
+} from '../../utils/actions/keyboard.js';
+import {
+  enterPlaygroundRoom,
+  initEmptyEdgelessState,
+  waitNextFrame,
+} from '../../utils/actions/misc.js';
+import { assertRectExist } from '../../utils/asserts.js';
+import { test } from '../../utils/playwright.js';
+
+async function setupAndAddNote(page: Page) {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await switchEditorMode(page);
+  await zoomResetByKeyboard(page);
+  const noteId = await addNote(page, 'hello world', 100, 200);
+  await page.mouse.click(0, 0);
+  return noteId;
+}
+
+async function openScalePanel(page: Page, noteId: string) {
+  await selectNoteInEdgeless(page, noteId);
+  await triggerComponentToolbarAction(page, 'changeNoteScale');
+  await waitNextFrame(page);
+  const scalePanel = page.locator('.scale-menu');
+  await expect(scalePanel).toBeVisible();
+  return scalePanel;
+}
+
+async function checkNoteScale(
+  page: Page,
+  noteId: string,
+  expectedScale: number,
+  expectedType: 'equal' | 'greater' | 'less' = 'equal'
+) {
+  const edgelessNote = page.locator(
+    `affine-edgeless-note[data-block-id="${noteId}"]`
+  );
+  const style = await edgelessNote.getAttribute('style');
+
+  if (!style) {
+    throw new Error('Style attribute not found');
+  }
+
+  const scaleMatch = style.match(/transform:[^;]*scale\(([\d.]+)\)/);
+  if (!scaleMatch) {
+    throw new Error('Scale transform not found in style');
+  }
+
+  const actualScale = parseFloat(scaleMatch[1]);
+
+  switch (expectedType) {
+    case 'equal':
+      expect(actualScale).toBeCloseTo(expectedScale, 2);
+      break;
+    case 'greater':
+      expect(actualScale).toBeGreaterThan(expectedScale);
+      break;
+    case 'less':
+      expect(actualScale).toBeLessThan(expectedScale);
+  }
+}
+
+test.describe('note scale', () => {
+  test('Note scale can be changed by scale panel button', async ({ page }) => {
+    const noteId = await setupAndAddNote(page);
+    await openScalePanel(page, noteId);
+
+    const scale150 = locatorScalePanelButton(page, 50);
+    await scale150.click();
+
+    await checkNoteScale(page, noteId, 0.5);
+  });
+
+  test('Note scale can be changed by scale panel input', async ({ page }) => {
+    const noteId = await setupAndAddNote(page);
+    const scalePanel = await openScalePanel(page, noteId);
+
+    const scaleInput = scalePanel.locator('input');
+    await scaleInput.click();
+    await page.keyboard.type('50');
+    await page.keyboard.press('Enter');
+
+    await checkNoteScale(page, noteId, 0.5);
+  });
+
+  test('Note scale input support copy paste', async ({ page }) => {
+    const noteId = await setupAndAddNote(page);
+    const scalePanel = await openScalePanel(page, noteId);
+
+    const scaleInput = scalePanel.locator('input');
+    await scaleInput.click();
+    await page.keyboard.type('50');
+    await selectAllByKeyboard(page);
+    await copyByKeyboard(page);
+    await page.mouse.click(0, 0);
+
+    await selectNoteInEdgeless(page, noteId);
+    await triggerComponentToolbarAction(page, 'changeNoteScale');
+    await waitNextFrame(page);
+
+    await scaleInput.click();
+    await pasteByKeyboard(page);
+    await page.keyboard.press('Enter');
+
+    await checkNoteScale(page, noteId, 0.5);
+  });
+
+  test('Note scale can be changed by shift drag', async ({ page }) => {
+    const noteId = await setupAndAddNote(page);
+    await selectNoteInEdgeless(page, noteId);
+
+    const edgelessNote = page.locator(
+      `affine-edgeless-note[data-block-id="${noteId}"]`
+    );
+    const noteRect = await edgelessNote.boundingBox();
+    assertRectExist(noteRect);
+    await page.mouse.move(
+      noteRect.x + noteRect.width,
+      noteRect.y + noteRect.height
+    );
+    await page.keyboard.down('Shift');
+    await page.mouse.down();
+    await page.mouse.move(
+      noteRect.x + noteRect.width * 2,
+      noteRect.y + noteRect.height * 2,
+      {
+        steps: 10,
+      }
+    );
+    await page.mouse.up();
+
+    // expect style scale to be greater than 1
+    await checkNoteScale(page, noteId, 1, 'greater');
+  });
+});

tests/blocksuite/e2e/edgeless/note/slicer.spec.ts

@@ -0,0 +1,156 @@
+import { expect } from '@playwright/test';
+
+import {
+  enterPlaygroundRoom,
+  initEmptyEdgelessState,
+  initSixParagraphs,
+  initThreeParagraphs,
+  selectNoteInEdgeless,
+  switchEditorMode,
+  triggerComponentToolbarAction,
+} from '../../utils/actions/index.js';
+import { assertRectExist, assertRichTexts } from '../../utils/asserts.js';
+import { test } from '../../utils/playwright.js';
+
+test.describe('note slicer', () => {
+  test('could enable and disenable note slicer', async ({ page }) => {
+    await enterPlaygroundRoom(page);
+    const { noteId } = await initEmptyEdgelessState(page);
+    await initSixParagraphs(page);
+
+    await switchEditorMode(page);
+    await selectNoteInEdgeless(page, noteId);
+    // note slicer button should not be visible when note slicer setting is disenabled
+    await expect(page.locator('.note-slicer-button')).toBeHidden();
+    await expect(page.locator('.note-slicer-dividing-line')).toHaveCount(0);
+
+    await triggerComponentToolbarAction(page, 'changeNoteSlicerSetting');
+    // note slicer button should be visible when note slicer setting is enabled
+    await expect(page.locator('.note-slicer-button')).toBeVisible();
+    await expect(page.locator('.note-slicer-dividing-line')).toHaveCount(5);
+  });
+
+  test('note slicer will add new note', async ({ page }) => {
+    await enterPlaygroundRoom(page);
+    const { noteId } = await initEmptyEdgelessState(page);
+    await initSixParagraphs(page);
+
+    await switchEditorMode(page);
+    await expect(page.locator('affine-edgeless-note')).toHaveCount(1);
+
+    await selectNoteInEdgeless(page, noteId);
+    await triggerComponentToolbarAction(page, 'changeNoteSlicerSetting');
+    await expect(page.locator('.note-slicer-button')).toBeVisible();
+
+    await page.locator('.note-slicer-button').click();
+
+    await expect(page.locator('affine-edgeless-note')).toHaveCount(2);
+  });
+
+  test('note slicer button should appears at right position', async ({
+    page,
+  }) => {
+    await enterPlaygroundRoom(page);
+    const { noteId } = await initEmptyEdgelessState(page);
+    await initThreeParagraphs(page);
+    await assertRichTexts(page, ['123', '456', '789']);
+
+    await switchEditorMode(page);
+    await selectNoteInEdgeless(page, noteId);
+    await triggerComponentToolbarAction(page, 'changeNoteSlicerSetting');
+
+    const blocks = await page
+      .locator(`[data-block-id="${noteId}"] [data-block-id]`)
+      .all();
+    expect(blocks.length).toBe(3);
+
+    const firstBlockRect = await blocks[0].boundingBox();
+    assertRectExist(firstBlockRect);
+    const secondBlockRect = await blocks[1].boundingBox();
+    assertRectExist(secondBlockRect);
+    await page.mouse.move(
+      secondBlockRect.x + 1,
+      secondBlockRect.y + secondBlockRect.height / 2
+    );
+
+    let slicerButtonRect = await page
+      .locator('.note-slicer-button')
+      .boundingBox();
+    assertRectExist(slicerButtonRect);
+
+    let buttonRectMiddle = slicerButtonRect.y + slicerButtonRect.height / 2;
+
+    expect(buttonRectMiddle).toBeGreaterThan(
+      firstBlockRect.y + firstBlockRect.height
+    );
+    expect(buttonRectMiddle).toBeGreaterThan(secondBlockRect.y);
+
+    const thirdBlockRect = await blocks[2].boundingBox();
+    assertRectExist(thirdBlockRect);
+    await page.mouse.move(
+      thirdBlockRect.x + 1,
+      thirdBlockRect.y + thirdBlockRect.height / 2
+    );
+
+    slicerButtonRect = await page.locator('.note-slicer-button').boundingBox();
+    assertRectExist(slicerButtonRect);
+
+    buttonRectMiddle = slicerButtonRect.y + slicerButtonRect.height / 2;
+    expect(buttonRectMiddle).toBeGreaterThan(
+      secondBlockRect.y + secondBlockRect.height
+    );
+    expect(buttonRectMiddle).toBeLessThan(thirdBlockRect.y);
+  });
+
+  test('note slicer button should appears at right position when editor is not located at left top corner', async ({
+    page,
+  }) => {
+    await enterPlaygroundRoom(page);
+    const { noteId } = await initEmptyEdgelessState(page);
+    await initThreeParagraphs(page);
+    await assertRichTexts(page, ['123', '456', '789']);
+
+    await switchEditorMode(page);
+    await selectNoteInEdgeless(page, noteId);
+
+    await page.evaluate(() => {
+      const el = document.createElement('div');
+      const app = document.querySelector('#app') as HTMLElement;
+
+      el.style.height = '100px';
+      el.style.background = 'red';
+
+      app!.style.paddingLeft = '80px';
+
+      document.body.insertBefore(el, app);
+    });
+
+    const blocks = await page
+      .locator(`[data-block-id="${noteId}"] [data-block-id]`)
+      .all();
+    expect(blocks.length).toBe(3);
+
+    const firstBlockRect = await blocks[0].boundingBox();
+    assertRectExist(firstBlockRect);
+    const secondBlockRect = await blocks[1].boundingBox();
+    assertRectExist(secondBlockRect);
+
+    await triggerComponentToolbarAction(page, 'changeNoteSlicerSetting');
+    await page.mouse.move(
+      secondBlockRect.x + 1,
+      secondBlockRect.y + secondBlockRect.height / 2
+    );
+
+    const slicerButtonRect = await page
+      .locator('.note-slicer-button')
+      .boundingBox();
+    assertRectExist(slicerButtonRect);
+
+    const buttonRectMiddle = slicerButtonRect.y + slicerButtonRect.height / 2;
+
+    expect(buttonRectMiddle).toBeGreaterThan(
+      firstBlockRect.y + firstBlockRect.height
+    );
+    expect(buttonRectMiddle).toBeGreaterThan(secondBlockRect.y);
+  });
+});

tests/blocksuite/e2e/edgeless/note/undo-redo.spec.ts

@@ -0,0 +1,200 @@
+import { expect } from '@playwright/test';
+
+import {
+  activeNoteInEdgeless,
+  click,
+  copyByKeyboard,
+  countBlock,
+  dragBetweenCoords,
+  enterPlaygroundRoom,
+  fillLine,
+  focusRichText,
+  getNoteRect,
+  initEmptyEdgelessState,
+  initSixParagraphs,
+  pasteByKeyboard,
+  pressEscape,
+  redoByClick,
+  redoByKeyboard,
+  selectNoteInEdgeless,
+  switchEditorMode,
+  triggerComponentToolbarAction,
+  type,
+  undoByClick,
+  undoByKeyboard,
+  waitNextFrame,
+  zoomResetByKeyboard,
+} from '../../utils/actions/index.js';
+import { assertRectEqual } from '../../utils/asserts.js';
+import { test } from '../../utils/playwright.js';
+
+test('undo/redo should work correctly after clipping', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  const { noteId } = await initEmptyEdgelessState(page);
+  await initSixParagraphs(page);
+
+  await switchEditorMode(page);
+  await expect(page.locator('affine-edgeless-note')).toHaveCount(1);
+
+  await selectNoteInEdgeless(page, noteId);
+  await triggerComponentToolbarAction(page, 'changeNoteSlicerSetting');
+
+  const button = page.locator('.note-slicer-button');
+  await button.click();
+  await expect(page.locator('affine-edgeless-note')).toHaveCount(2);
+
+  await undoByKeyboard(page);
+  await waitNextFrame(page);
+  await expect(page.locator('affine-edgeless-note')).toHaveCount(1);
+  await redoByKeyboard(page);
+  await waitNextFrame(page);
+  await expect(page.locator('affine-edgeless-note')).toHaveCount(2);
+});
+
+test('undo/redo should work correctly after resizing', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  const { noteId } = await initEmptyEdgelessState(page);
+  await switchEditorMode(page);
+  await zoomResetByKeyboard(page);
+  await activeNoteInEdgeless(page, noteId);
+  await waitNextFrame(page, 600);
+  // current implementation may be a little inefficient
+  await fillLine(page, true);
+  await page.mouse.click(0, 0);
+  await waitNextFrame(page, 600);
+  await selectNoteInEdgeless(page, noteId);
+
+  const initRect = await getNoteRect(page, noteId);
+  const rightHandle = page.locator('.handle[aria-label="right"] .resize');
+  const box = await rightHandle.boundingBox();
+  if (box === null) throw new Error();
+  await dragBetweenCoords(
+    page,
+    { x: box.x + 5, y: box.y + 5 },
+    { x: box.x + 105, y: box.y + 5 }
+  );
+  const draggedRect = await getNoteRect(page, noteId);
+  assertRectEqual(draggedRect, {
+    x: initRect.x,
+    y: initRect.y,
+    w: initRect.w + 100,
+    h: draggedRect.h, // not assert `h` here
+  });
+  expect(draggedRect.h).toBe(initRect.h);
+
+  await undoByKeyboard(page);
+  await waitNextFrame(page);
+  const undoRect = await getNoteRect(page, noteId);
+  assertRectEqual(undoRect, initRect);
+
+  await redoByKeyboard(page);
+  await waitNextFrame(page);
+  const redoRect = await getNoteRect(page, noteId);
+  assertRectEqual(redoRect, draggedRect);
+});
+
+test('continuous undo and redo (note block add operation) should work', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await focusRichText(page);
+  await type(page, 'hello');
+  await switchEditorMode(page);
+  await click(page, { x: 260, y: 450 });
+  await copyByKeyboard(page);
+
+  let count = await countBlock(page, 'affine-edgeless-note');
+  expect(count).toBe(1);
+
+  await page.mouse.move(100, 100);
+  await pasteByKeyboard(page, false);
+  await waitNextFrame(page, 1000);
+
+  await page.mouse.move(200, 200);
+  await pasteByKeyboard(page, false);
+  await waitNextFrame(page, 1000);
+
+  await page.mouse.move(300, 300);
+  await pasteByKeyboard(page, false);
+  await waitNextFrame(page, 1000);
+
+  count = await countBlock(page, 'affine-edgeless-note');
+  expect(count).toBe(4);
+
+  await undoByClick(page);
+  count = await countBlock(page, 'affine-edgeless-note');
+  expect(count).toBe(3);
+
+  await undoByClick(page);
+  count = await countBlock(page, 'affine-edgeless-note');
+  expect(count).toBe(2);
+
+  await redoByClick(page);
+  count = await countBlock(page, 'affine-edgeless-note');
+  expect(count).toBe(3);
+
+  await redoByClick(page);
+  count = await countBlock(page, 'affine-edgeless-note');
+  expect(count).toBe(4);
+});
+
+test('undo/redo should work when change note custom background', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  const { noteId } = await initEmptyEdgelessState(page);
+  await switchEditorMode(page);
+  await selectNoteInEdgeless(page, noteId);
+
+  const getNoteBackground = async () => {
+    return page.locator('edgeless-note-background').evaluate(el => {
+      return getComputedStyle(el).backgroundColor;
+    });
+  };
+
+  const stylePanel = page.locator('edgeless-note-style-panel');
+
+  let prevBackground = await getNoteBackground();
+
+  // preset color
+  {
+    await stylePanel.click();
+    await stylePanel.getByLabel('Red').click();
+    await pressEscape(page);
+
+    expect(await getNoteBackground()).not.toBe(prevBackground);
+    await undoByKeyboard(page);
+    await waitNextFrame(page);
+    expect(await getNoteBackground()).toBe(prevBackground);
+
+    await redoByKeyboard(page);
+    await waitNextFrame(page);
+    expect(await getNoteBackground()).not.toBe(prevBackground);
+  }
+
+  prevBackground = await getNoteBackground();
+
+  // custom color
+  {
+    await selectNoteInEdgeless(page, noteId);
+    await stylePanel.click();
+    await stylePanel.locator('edgeless-color-custom-button').click();
+    await stylePanel.locator('.color-palette').click({
+      position: {
+        x: 100,
+        y: 100,
+      },
+    });
+    await pressEscape(page);
+
+    expect(await getNoteBackground()).not.toBe(prevBackground);
+    await undoByKeyboard(page);
+    await waitNextFrame(page);
+    expect(await getNoteBackground()).toBe(prevBackground);
+
+    await redoByKeyboard(page);
+    await waitNextFrame(page);
+    expect(await getNoteBackground()).not.toBe(prevBackground);
+  }
+});