chore(editor): remove edgeless element toolbar (#10900)

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

@@ -2,7 +2,7 @@ import { test } from '@affine-test/kit/playwright';
 import {
   clickEdgelessModeButton,
   locateEditorContainer,
-  locateElementToolbar,
+  locateToolbar,
 } from '@affine-test/kit/utils/editor';
 import { pressEnter } from '@affine-test/kit/utils/keyboard';
 import { openHomePage } from '@affine-test/kit/utils/load-page';
@@ -31,7 +31,7 @@ test('should close embed editing modal when editor switching to page mode by sho
     .getByTestId('cmdk-label')
     .getByText('Write, Draw, Plan all at Once.')
     .click();
-  const toolbar = locateElementToolbar(page);
+  const toolbar = locateToolbar(page);
   await toolbar.getByLabel('Edit').click();
 
   const editingModal = page.locator('embed-card-edit-modal');

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

@@ -5,7 +5,7 @@ import {
   createEdgelessNoteBlock,
   dragView,
   locateEditorContainer,
-  locateElementToolbar,
+  locateToolbar,
   toViewCoord,
 } from '@affine-test/kit/utils/editor';
 import {
@@ -34,7 +34,7 @@ test.beforeEach(async ({ page }) => {
 test('should update zindex of element when moving it into frame', async ({
   page,
 }) => {
-  const toolbar = locateElementToolbar(page);
+  const toolbar = locateToolbar(page);
 
   // create a top frame
   await page.keyboard.press('f');
@@ -47,7 +47,7 @@ test('should update zindex of element when moving it into frame', async ({
   await createEdgelessNoteBlock(page, [500, 500]);
   await clickView(page, [0, 100]);
   await clickView(page, [500, 500]);
-  await toolbar.getByLabel('More').click();
+  await toolbar.getByLabel('more-menu').click();
   await toolbar.getByLabel('Send to Back').click();
   await pressEscape(page);
 

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

@@ -7,8 +7,8 @@ import {
   getPageMode,
   getSelectedXYWH,
   locateEditorContainer,
-  locateElementToolbar,
   locateModeSwitchButton,
+  locateToolbar,
   moveToView,
   resizeElementByHandle,
   toViewCoord,
@@ -201,8 +201,8 @@ test.describe('edgeless note element toolbar', () => {
     page,
   }) => {
     await selectAllByKeyboard(page);
-    const toolbar = locateElementToolbar(page);
-    const autoHeight = toolbar.getByTestId('edgeless-note-auto-height');
+    const toolbar = locateToolbar(page);
+    const autoHeight = toolbar.getByTestId('auto-height');
     const displayInPage = toolbar.getByTestId('display-in-page');
 
     await expect(toolbar).toBeVisible();
@@ -218,8 +218,8 @@ test.describe('edgeless note element toolbar', () => {
     await clickView(page, [0, 0]);
     await clickView(page, [100, 100]);
 
-    const toolbar = locateElementToolbar(page);
-    const autoHeight = toolbar.getByTestId('edgeless-note-auto-height');
+    const toolbar = locateToolbar(page);
+    const autoHeight = toolbar.getByTestId('auto-height');
     const displayInPage = toolbar.getByTestId('display-in-page');
 
     await expect(toolbar).toBeVisible();
@@ -237,7 +237,7 @@ test.describe('edgeless note element toolbar', () => {
     await clickView(page, [0, 0]);
     await clickView(page, [100, 100]);
 
-    const toolbar = locateElementToolbar(page);
+    const toolbar = locateToolbar(page);
     const displayInPage = toolbar.getByTestId('display-in-page');
 
     await displayInPage.click();
@@ -300,7 +300,7 @@ test.describe('edgeless note element toolbar', () => {
       }, noteId);
     };
 
-    const toolbar = locateElementToolbar(page);
+    const toolbar = locateToolbar(page);
 
     await selectAllByKeyboard(page);
     const noteId = (await getEdgelessSelectedIds(page))[0];
@@ -329,7 +329,11 @@ test.describe('edgeless note element toolbar', () => {
     await toolbar.getByRole('button', { name: 'Border style' }).click();
     await toolbar.locator('.mode-solid').click();
     await toolbar.getByRole('button', { name: 'Border style' }).click();
-    await toolbar.locator('edgeless-line-width-panel').getByLabel('8').click();
+    // TODO(@fundon): delete duplicate components
+    await toolbar
+      .locator('affine-edgeless-line-width-panel')
+      .getByLabel('8')
+      .click();
 
     expect(await getNoteEdgelessProps(page, noteId)).toEqual({
       style: {
@@ -341,7 +345,11 @@ test.describe('edgeless note element toolbar', () => {
     });
 
     await toolbar.getByRole('button', { name: 'Corners' }).click();
-    await toolbar.locator('edgeless-size-panel').getByText('Large').click();
+    // TODO(@fundon): delete duplicate components
+    await toolbar
+      .locator('affine-size-dropdown-menu')
+      .getByText('Large')
+      .click();
 
     expect(await getNoteEdgelessProps(page, noteId)).toEqual({
       style: {

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

@@ -35,9 +35,7 @@ test('should add text to shape, default to pure black', async ({ page }) => {
   await page.keyboard.type('text');
   await page.keyboard.press('Escape');
 
-  const toolbar = page.locator(
-    'edgeless-element-toolbar-widget editor-toolbar'
-  );
+  const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
   const textColorContainer = toolbar.locator(
     'edgeless-color-picker-button.text-color'
   );
@@ -76,9 +74,7 @@ test('should add text to shape with pure white', async ({ page }) => {
   await page.keyboard.type('text');
   await page.keyboard.press('Escape');
 
-  const toolbar = page.locator(
-    'edgeless-element-toolbar-widget editor-toolbar'
-  );
+  const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
   const textColorContainer = toolbar.locator(
     'edgeless-color-picker-button.text-color'
   );