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`](https://github.com/toeverything/AFFiNE/blob/c178debf2d49c40b753e1bcaa6f07270bdde7401/blocksuite/affine/shared/src/services/toolbar-service/config.ts).

1.  Add toolbar configuration file to a block type, such as bookmark block: [`config.ts`](https://github.com/toeverything/AFFiNE/blob/c178debf2d49c40b753e1bcaa6f07270bdde7401/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](https://github.com/toeverything/AFFiNE/blob/c178debf2d49c40b753e1bcaa6f07270bdde7401/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](https://github.com/toeverything/AFFiNE/blob/c178debf2d49c40b753e1bcaa6f07270bdde7401/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.

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

@@ -47,9 +47,9 @@ test('should not show hidden note in embed view page mode', async ({
 
   // switch to embed view
   await inlineLink.hover();
-  const inlineToolbar = page.locator('reference-popup');
-  await inlineToolbar.getByLabel('Switch view').click();
-  await inlineToolbar.getByLabel('Embed view').click();
+  const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
+  await toolbar.getByLabel('Switch view').click();
+  await toolbar.getByLabel('Embed view').click();
 
   // check the content
   const embedLink = page.locator('affine-embed-synced-doc-block');

tests/affine-local/e2e/blocksuite/outline/outline-viewer.spec.ts

@@ -187,16 +187,11 @@ test('outline viewer should be useable in doc peek preview', async ({
 
   await page.locator('affine-reference').hover();
 
-  await expect(
-    page.locator('.affine-reference-popover-container')
-  ).toBeVisible();
+  const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
+  await expect(toolbar).toBeVisible();
 
-  await page
-    .locator('editor-menu-button editor-icon-button[aria-label="Open doc"]')
-    .click();
-  await page
-    .locator('editor-menu-action:has-text("Open in center peek")')
-    .click();
+  await toolbar.getByLabel('Open doc').click();
+  await toolbar.getByLabel('Open in center peek').click();
 
   const peekView = page.getByTestId('peek-view-modal');
   await expect(peekView).toBeVisible();

tests/affine-local/e2e/blocksuite/paragraph.spec.ts

@@ -34,15 +34,15 @@ test('heading icon should be updated after change heading level', async ({
 
   await selectAllByKeyboard(page);
   const formatBar = locateFormatBar(page);
-  await formatBar.locator('.paragraph-button').hover();
-  await formatBar.getByTestId('affine:paragraph/h1').click();
+  await formatBar.getByLabel('Conversions').click();
+  await formatBar.getByLabel('Heading 1').click();
 
   await paragraph.hover();
   await expect(page.getByTestId('heading-icon-1')).toBeVisible();
 
   await selectAllByKeyboard(page);
-  await formatBar.locator('.paragraph-button').hover();
-  await formatBar.getByTestId('affine:paragraph/h2').click();
+  await formatBar.getByLabel('Conversions').click();
+  await formatBar.getByLabel('Heading 2').click();
 
   await paragraph.hover();
   await expect(page.getByTestId('heading-icon-1')).toBeHidden();

tests/affine-local/e2e/blocksuite/toolbar.spec.ts

@@ -7,6 +7,27 @@ import {
 } from '@affine-test/kit/utils/page-logic';
 import { expect } from '@playwright/test';
 
+function hexToRGB(hex: string) {
+  hex = hex.replace(/^#/, '');
+  const len = hex.length;
+  let arr: string[] = [];
+
+  if (len === 3 || len === 4) {
+    arr = hex.split('').map(s => s.repeat(2));
+  } else if (len === 6 || len === 8) {
+    arr = Array.from<number>({ length: len / 2 })
+      .fill(0)
+      .map((n, i) => n + i * 2)
+      .map(n => hex.substring(n, n + 2));
+  }
+
+  const values = arr
+    .map(s => parseInt(s, 16))
+    .map((n, i) => (i === 3 ? (n % 255) / 255 : n));
+
+  return `rgb${values.length === 4 ? 'a' : ''}(${values.join(', ')})`;
+}
+
 test.beforeEach(async ({ page }) => {
   await openHomePage(page);
   await clickNewPageButton(page);
@@ -23,26 +44,25 @@ test.describe('Formatting', () => {
     await page.keyboard.press('Shift+ArrowLeft');
 
     const formatBar = locateFormatBar(page);
-    await formatBar.locator('.highlight-icon').hover();
-    const fgGreenButton = formatBar.locator(
-      '[data-testid="var(--affine-text-highlight-foreground-green)"]'
-    );
+    const highlightButton = formatBar.locator('affine-highlight-duotone-icon');
+
+    await highlightButton.click();
+
+    const fgGreenButton = formatBar.locator('[data-testid="foreground-green"]');
     await fgGreenButton.click();
-    const fgColor1 = await fgGreenButton
-      .locator('span')
-      .evaluate(e => window.getComputedStyle(e).getPropertyValue('color'));
+    const fgColor = await fgGreenButton
+      .locator('affine-text-duotone-icon')
+      .evaluate(e => window.getComputedStyle(e).getPropertyValue('--color'));
 
     const paragraph = page.locator('affine-paragraph');
     const textSpan = paragraph
       .locator('affine-text:has-text("rld")')
       .locator('span')
       .first();
-    await expect(textSpan).toBeVisible();
-    const fgColor2 = await textSpan.evaluate(e =>
-      window.getComputedStyle(e).getPropertyValue('color')
-    );
 
-    expect(fgColor1).toBe(fgColor2);
+    await expect(textSpan).toBeVisible();
+
+    await expect(textSpan).toHaveCSS('color', hexToRGB(fgColor));
   });
 
   test('should change text background color', async ({ page }) => {
@@ -54,26 +74,26 @@ test.describe('Formatting', () => {
     await page.keyboard.press('Shift+ArrowLeft');
 
     const formatBar = locateFormatBar(page);
-    await formatBar.locator('.highlight-icon').hover();
+    const highlightButton = formatBar.locator('affine-highlight-duotone-icon');
 
-    const fgGreenButton = formatBar.locator(
-      '[data-testid="var(--affine-text-highlight-foreground-green)"]'
-    );
+    await highlightButton.click();
+
+    const fgGreenButton = formatBar.locator('[data-testid="foreground-green"]');
     await fgGreenButton.click();
-    const fgColor1 = await fgGreenButton
-      .locator('span')
-      .evaluate(e => window.getComputedStyle(e).getPropertyValue('color'));
+
+    await page.waitForTimeout(200);
+
+    const fgColor = await fgGreenButton
+      .locator('affine-text-duotone-icon')
+      .evaluate(e => window.getComputedStyle(e).getPropertyValue('--color'));
 
     const paragraph = page.locator('affine-paragraph');
     const textSpan1 = paragraph
       .locator('affine-text:has-text("rld")')
       .locator('span')
       .first();
-    const fgColor2 = await textSpan1.evaluate(e =>
-      window.getComputedStyle(e).getPropertyValue('color')
-    );
 
-    expect(fgColor1).toBe(fgColor2);
+    await expect(textSpan1).toHaveCSS('color', hexToRGB(fgColor));
 
     await page.keyboard.press('ArrowRight');
 
@@ -81,10 +101,12 @@ test.describe('Formatting', () => {
       await page.keyboard.press('Shift+ArrowLeft');
     }
 
-    await formatBar.locator('.highlight-icon').hover();
+    await highlightButton.click();
 
     const yellow = 'var(--affine-text-highlight-yellow)';
-    const bgYellowButton = formatBar.locator(`[data-testid="${yellow}"]`);
+    const bgYellowButton = formatBar.locator(
+      '[data-testid="background-yellow"]'
+    );
     await bgYellowButton.click();
 
     const textSpan2 = paragraph
@@ -95,10 +117,18 @@ test.describe('Formatting', () => {
     await expect(textSpan2).toBeVisible();
 
     const bgColor1 = await textSpan1.evaluate(e => e.style.backgroundColor);
-
     const bgColor2 = await textSpan2.evaluate(e => e.style.backgroundColor);
 
     expect(yellow).toBe(bgColor1);
     expect(yellow).toBe(bgColor2);
+
+    const bgColor = await bgYellowButton
+      .locator('affine-text-duotone-icon')
+      .evaluate(e =>
+        window.getComputedStyle(e).getPropertyValue('--background')
+      );
+
+    await expect(textSpan1).toHaveCSS('background-color', hexToRGB(bgColor));
+    await expect(textSpan2).toHaveCSS('background-color', hexToRGB(bgColor));
   });
 });