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/affine/components/src/embed-card-modal/embed-card-edit-modal.ts

@@ -20,7 +20,11 @@ import type {
   BlockStdScope,
   EditorHost,
 } from '@blocksuite/block-std';
-import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
+import {
+  nextTick,
+  SignalWatcher,
+  WithDisposable,
+} from '@blocksuite/global/utils';
 import { autoUpdate, computePosition, flip, offset } from '@floating-ui/dom';
 import { computed, signal } from '@preact/signals-core';
 import { css, html, LitElement } from 'lit';
@@ -137,6 +141,7 @@ export class EmbedCardEditModal extends SignalWatcher(
 
   private readonly _hide = () => {
     this.remove();
+    this.abortController?.abort();
   };
 
   private readonly _onKeydown = (e: KeyboardEvent) => {
@@ -146,7 +151,7 @@ export class EmbedCardEditModal extends SignalWatcher(
     }
     if (e.key === 'Escape') {
       e.preventDefault();
-      this.remove();
+      this._hide();
     }
   };
 
@@ -154,7 +159,7 @@ export class EmbedCardEditModal extends SignalWatcher(
     const blockComponent = this._blockComponent;
 
     if (!blockComponent) {
-      this.remove();
+      this._hide();
       return;
     }
 
@@ -168,14 +173,14 @@ export class EmbedCardEditModal extends SignalWatcher(
 
     track(std, this.model, this.viewType, 'ResetedAlias', { control: 'reset' });
 
-    this.remove();
+    this._hide();
   };
 
   private readonly _onSave = () => {
     const blockComponent = this._blockComponent;
 
     if (!blockComponent) {
-      this.remove();
+      this._hide();
       return;
     }
 
@@ -196,7 +201,7 @@ export class EmbedCardEditModal extends SignalWatcher(
 
     track(std, this.model, this.viewType, 'SavedAlias', { control: 'save' });
 
-    this.remove();
+    this._hide();
   };
 
   private readonly _updateDescription = (e: InputEvent) => {
@@ -278,7 +283,10 @@ export class EmbedCardEditModal extends SignalWatcher(
       })
     );
 
-    this.disposables.add(listenClickAway(this, this._hide));
+    // Resolves the click event is triggered after the first rendering.
+    nextTick()
+      .then(() => this.disposables.add(listenClickAway(this, this._hide)))
+      .catch(console.error);
     this.disposables.addFromEvent(this, 'keydown', this._onKeydown);
     this.disposables.addFromEvent(this, 'pointerdown', stopPropagation);
     this.disposables.addFromEvent(this, 'cut', stopPropagation);
@@ -401,6 +409,9 @@ export class EmbedCardEditModal extends SignalWatcher(
 
   @property({ attribute: false })
   accessor viewType!: string;
+
+  @property({ attribute: false })
+  accessor abortController: AbortController | undefined = undefined;
 }
 
 export function toggleEmbedCardEditModal(
@@ -413,7 +424,8 @@ export function toggleEmbedCardEditModal(
     std: BlockStdScope,
     component: BlockComponent,
     props: AliasInfo
-  ) => void
+  ) => void,
+  abortController?: AbortController
 ) {
   document.body.querySelector('embed-card-edit-modal')?.remove();
 
@@ -424,6 +436,7 @@ export function toggleEmbedCardEditModal(
   embedCardEditModal.originalDocInfo = originalDocInfo;
   embedCardEditModal.onReset = onReset;
   embedCardEditModal.onSave = onSave;
+  embedCardEditModal.abortController = abortController;
   document.body.append(embedCardEditModal);
 }