feat(editor): add toolbar registry extension (#9572)

### What's Changed!

#### Added
Manage various types of toolbars uniformly in one place.

* `affine-toolbar-widget`
* `ToolbarRegistryExtension`

The toolbar currently supports and handles several scenarios:

1.  Select blocks: `BlockSelection`
2. Select text: `TextSelection` or `NativeSelection`
3. Hover a link: `affine-link` and `affine-reference`

#### Removed
Remove redundant toolbar implementations.

* `attachment` toolbar
* `bookmark` toolbar
* `embed` toolbar
* `formatting` toolbar
* `affine-link` toolbar
* `affine-reference` toolbar

### How to migrate?

Here is an example that can help us migrate some unrefactored toolbars:

Check out the more detailed types of [`ToolbarModuleConfig`](c178debf2d/blocksuite/affine/shared/src/services/toolbar-service/config.ts).

1.  Add toolbar configuration file to a block type, such as bookmark block: [`config.ts`](c178debf2d/blocksuite/affine/block-bookmark/src/configs/toolbar.ts)

```ts
export const builtinToolbarConfig = {
  actions: [
    {
      id: 'a.preview',
      content(ctx) {
        const model = ctx.getCurrentModelBy(BlockSelection, BookmarkBlockModel);
        if (!model) return null;

        const { url } = model;

        return html`<affine-link-preview .url=${url}></affine-link-preview>`;
      },
    },
    {
      id: 'b.conversions',
      actions: [
        {
          id: 'inline',
          label: 'Inline view',
          run(ctx) {
          },
        },
        {
          id: 'card',
          label: 'Card view',
          disabled: true,
        },
        {
          id: 'embed',
          label: 'Embed view',
          disabled(ctx) {
          },
          run(ctx) {
          },
        },
      ],
      content(ctx) {
      },
    } satisfies ToolbarActionGroup<ToolbarAction>,
    {
      id: 'c.style',
      actions: [
        {
          id: 'horizontal',
          label: 'Large horizontal style',
        },
        {
          id: 'list',
          label: 'Small horizontal style',
        },
      ],
      content(ctx) {
      },
    } satisfies ToolbarActionGroup<ToolbarAction>,
    {
      id: 'd.caption',
      tooltip: 'Caption',
      icon: CaptionIcon(),
      run(ctx) {
      },
    },
    {
      placement: ActionPlacement.More,
      id: 'a.clipboard',
      actions: [
        {
          id: 'copy',
          label: 'Copy',
          icon: CopyIcon(),
          run(ctx) {
          },
        },
        {
          id: 'duplicate',
          label: 'Duplicate',
          icon: DuplicateIcon(),
          run(ctx) {
          },
        },
      ],
    },
    {
      placement: ActionPlacement.More,
      id: 'b.refresh',
      label: 'Reload',
      icon: ResetIcon(),
      run(ctx) {
      },
    },
    {
      placement: ActionPlacement.More,
      id: 'c.delete',
      label: 'Delete',
      icon: DeleteIcon(),
      variant: 'destructive',
      run(ctx) {
      },
    },
  ],
} as const satisfies ToolbarModuleConfig;
```

2. Add configuration extension to a block spec: [bookmark's spec](c178debf2d/blocksuite/affine/block-bookmark/src/bookmark-spec.ts)

```ts
const flavour = BookmarkBlockSchema.model.flavour;

export const BookmarkBlockSpec: ExtensionType[] = [
  ...,
  ToolbarModuleExtension({
    id: BlockFlavourIdentifier(flavour),
    config: builtinToolbarConfig,
  }),
].flat();
```

3. If the bock type already has a toolbar configuration built in, we can customize it in the following ways:

Check out the [editor's config](c178debf2d/packages/frontend/core/src/blocksuite/extensions/editor-config/index.ts (L51C4-L54C8)) file.

```ts
// Defines a toolbar configuration for the bookmark block type
const customBookmarkToolbarConfig = {
  actions: [
    ...
  ]
} as const satisfies ToolbarModuleConfig;

// Adds it into the editor's config
 ToolbarModuleExtension({
    id: BlockFlavourIdentifier('custom:affine:bookmark'),
    config: customBookmarkToolbarConfig,
 }),
```

4. If we want to extend the global:

```ts
// Defines a toolbar configuration
const customWildcardToolbarConfig = {
  actions: [
    ...
  ]
} as const satisfies ToolbarModuleConfig;

// Adds it into the editor's config
 ToolbarModuleExtension({
    id: BlockFlavourIdentifier('custom:affine:*'),
    config: customWildcardToolbarConfig,
 }),
```

Currently, only most toolbars in page mode have been refactored. Next is edgeless mode.

blocksuite/tests-legacy/e2e/utils/actions/drag.ts

@@ -202,7 +202,9 @@ export async function dragBlockToPoint(
 
 export async function moveToImage(page: Page) {
   const { x, y } = await page.evaluate(() => {
-    const bottomRightButton = document.querySelector('img') as HTMLElement;
+    const bottomRightButton = document.querySelector(
+      'affine-image img'
+    ) as HTMLElement;
     const imageClient = bottomRightButton.getBoundingClientRect();
     const y = imageClient.top;
     return {

blocksuite/tests-legacy/e2e/utils/query.ts

@@ -4,7 +4,7 @@ import { waitNextFrame } from './actions/misc.js';
 import { assertAlmostEqual } from './asserts.js';
 
 export function getFormatBar(page: Page) {
-  const formatBar = page.locator('.affine-format-bar-widget');
+  const formatBar = page.locator('affine-toolbar-widget editor-toolbar');
   const boldBtn = formatBar.getByTestId('bold');
   const italicBtn = formatBar.getByTestId('italic');
   const underlineBtn = formatBar.getByTestId('underline');
@@ -12,28 +12,26 @@ export function getFormatBar(page: Page) {
   const codeBtn = formatBar.getByTestId('code');
   const linkBtn = formatBar.getByTestId('link');
   // highlight
-  const highlightBtn = formatBar.locator('.highlight-icon');
-  const redForegroundBtn = formatBar.getByTestId(
-    'var(--affine-text-highlight-foreground-red)'
-  );
+  const highlightBtn = formatBar.getByRole('button', { name: 'highlight' });
+  const redForegroundBtn = formatBar.getByTestId('foreground-red');
   const createLinkedDocBtn = formatBar.getByTestId('convert-to-linked-doc');
-  const defaultColorBtn = formatBar.getByTestId('unset');
+  const defaultColorBtn = formatBar.getByTestId('foreground-default');
   const highlight = {
     highlightBtn,
     redForegroundBtn,
     defaultColorBtn,
   };
 
-  const paragraphBtn = formatBar.locator(`.paragraph-button`);
+  const paragraphBtn = formatBar.getByRole('button', { name: 'Conversions' });
   const openParagraphMenu = async () => {
     await expect(formatBar).toBeVisible();
-    await paragraphBtn.hover();
+    await paragraphBtn.click();
   };
 
-  const textBtn = formatBar.getByTestId('affine:paragraph/text');
-  const h1Btn = formatBar.getByTestId('affine:paragraph/h1');
-  const bulletedBtn = formatBar.getByTestId('affine:list/bulleted');
-  const codeBlockBtn = formatBar.getByTestId('affine:code/');
+  const textBtn = formatBar.getByRole('button', { name: 'Text' });
+  const h1Btn = formatBar.getByRole('button', { name: 'Heading 1' });
+  const bulletedBtn = formatBar.getByRole('button', { name: 'Bulleted List' });
+  const codeBlockBtn = formatBar.getByRole('button', { name: 'Code Block' });
 
   const moreBtn = formatBar.getByRole('button', { name: 'More' });
   const copyBtn = formatBar.getByRole('button', { name: 'Copy' });
@@ -81,11 +79,11 @@ export function getFormatBar(page: Page) {
 }
 
 export function getEmbedCardToolbar(page: Page) {
-  const embedCardToolbar = page.locator('.embed-card-toolbar');
+  const embedCardToolbar = page.locator('affine-toolbar-widget editor-toolbar');
   function createButtonLocator(name: string) {
     return embedCardToolbar.getByRole('button', { name });
   }
-  const copyButton = createButtonLocator('copy');
+  const copyButton = createButtonLocator('copy-link');
   const editButton = createButtonLocator('edit');
   const cardStyleButton = createButtonLocator('card style');
   const captionButton = createButtonLocator('caption');