feat(editor): append note to page button (#9762)

Close [BS-2310](https://linear.app/affine-design/issue/BS-2310/note-display-in-page-%E7%9A%84%E8%A1%8C%E4%B8%BA), [BS-2312](https://linear.app/affine-design/issue/BS-2312/edgeless-note-%E7%9A%84-element-toolbar-%E6%B7%BB%E5%8A%A0display-in-page%E6%8C%89%E9%92%AE) and [BS-2313](https://linear.app/affine-design/issue/BS-2313/添加display-in-page的toast提示，以及打开toc的按钮)

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

@@ -1,15 +1,18 @@
 import { test } from '@affine-test/kit/playwright';
 import {
   clickEdgelessModeButton,
+  clickView,
   createEdgelessNoteBlock,
   getEdgelessSelectedIds,
   getPageMode,
   locateEditorContainer,
   locateElementToolbar,
+  locateModeSwitchButton,
 } from '@affine-test/kit/utils/editor';
 import {
   pasteByKeyboard,
   selectAllByKeyboard,
+  undoByKeyboard,
 } from '@affine-test/kit/utils/keyboard';
 import { openHomePage } from '@affine-test/kit/utils/load-page';
 import {
@@ -143,14 +146,90 @@ test.describe('edgeless page header toolbar', () => {
 });
 
 test.describe('edgeless note element toolbar', () => {
-  test('the toolbar of page block should not contains auto-height', async ({
+  test('the toolbar of page block should not contains auto-height button and display in page button', async ({
     page,
   }) => {
     await selectAllByKeyboard(page);
     const toolbar = locateElementToolbar(page);
     const autoHeight = toolbar.getByTestId('edgeless-note-auto-height');
+    const displayInPage = toolbar.getByTestId('display-in-page');
 
     await expect(toolbar).toBeVisible();
     await expect(autoHeight).toHaveCount(0);
+    await expect(displayInPage).toHaveCount(0);
+  });
+
+  test('the toolbar of note block should contains auto-height button and display in page button', async ({
+    page,
+  }) => {
+    await createEdgelessNoteBlock(page, [100, 100]);
+    await page.waitForSelector('.affine-paragraph-placeholder.visible');
+    await clickView(page, [0, 0]);
+    await clickView(page, [100, 100]);
+
+    const toolbar = locateElementToolbar(page);
+    const autoHeight = toolbar.getByTestId('edgeless-note-auto-height');
+    const displayInPage = toolbar.getByTestId('display-in-page');
+
+    await expect(toolbar).toBeVisible();
+    await expect(autoHeight).toBeVisible();
+    await expect(displayInPage).toBeVisible();
+  });
+
+  test('display in page button', async ({ page }) => {
+    const editorContainer = locateEditorContainer(page);
+    const notes = editorContainer.locator('affine-note');
+
+    await createEdgelessNoteBlock(page, [100, 100]);
+    await page.waitForSelector('.affine-paragraph-placeholder.visible');
+    await page.keyboard.type('Note 2');
+    await clickView(page, [0, 0]);
+    await clickView(page, [100, 100]);
+
+    const toolbar = locateElementToolbar(page);
+    const displayInPage = toolbar.getByTestId('display-in-page');
+
+    await displayInPage.click();
+    await locateModeSwitchButton(page, 'page').click();
+    expect(notes).toHaveCount(2);
+
+    await locateModeSwitchButton(page, 'edgeless').click();
+    await clickView(page, [100, 100]);
+    await displayInPage.click();
+    await locateModeSwitchButton(page, 'page').click();
+    await waitForEditorLoad(page);
+    expect(notes).toHaveCount(1);
+
+    const undoButton = page.getByTestId('undo-display-in-page');
+    const viewTocButton = page.getByTestId('view-in-toc');
+
+    await locateModeSwitchButton(page, 'edgeless').click();
+    await waitForEditorLoad(page);
+    await clickView(page, [100, 100]);
+    await displayInPage.click();
+    expect(undoButton).toBeVisible();
+    expect(viewTocButton).toBeVisible();
+
+    await undoButton.click();
+    await expect(undoButton).toBeHidden();
+    await locateModeSwitchButton(page, 'page').click();
+    await waitForEditorLoad(page);
+    expect(notes).toHaveCount(1);
+
+    await locateModeSwitchButton(page, 'edgeless').click();
+    await waitForEditorLoad(page);
+    await clickView(page, [100, 100]);
+    await displayInPage.click();
+    await undoByKeyboard(page);
+    await page.waitForTimeout(500);
+    expect(
+      undoButton,
+      'the toast should be hidden immediately when undo by keyboard'
+    ).toBeHidden();
+
+    await displayInPage.click();
+    await viewTocButton.click();
+    await page.waitForSelector('affine-outline-panel');
+    expect(page.locator('affine-outline-panel')).toBeVisible();
   });
 });

tests/kit/src/utils/keyboard.ts

@@ -70,6 +70,12 @@ export async function selectAllByKeyboard(page: Page) {
   await keyUpCtrlOrMeta(page);
 }
 
+export async function undoByKeyboard(page: Page) {
+  await keyDownCtrlOrMeta(page);
+  await page.keyboard.press('z', { delay: 50 });
+  await keyUpCtrlOrMeta(page);
+}
+
 export async function writeTextToClipboard(page: Page, text: string) {
   // paste the url
   await page.evaluate(