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.

blocksuite/affine/block-attachment/src/attachment-block.ts

@@ -1,6 +1,5 @@
 import { getEmbedCardIcons } from '@blocksuite/affine-block-embed';
 import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption';
-import { HoverController } from '@blocksuite/affine-components/hover';
 import {
   AttachmentIcon16,
   getAttachmentFileIcon,
@@ -16,19 +15,16 @@ import {
   ThemeProvider,
 } from '@blocksuite/affine-shared/services';
 import { humanFileSize } from '@blocksuite/affine-shared/utils';
-import { BlockSelection, TextSelection } from '@blocksuite/block-std';
+import { BlockSelection } from '@blocksuite/block-std';
 import { Slice } from '@blocksuite/store';
-import { flip, offset } from '@floating-ui/dom';
-import { html, nothing } from 'lit';
+import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { AttachmentOptionsTemplate } from './components/options.js';
-import { AttachmentEmbedProvider } from './embed.js';
-import { styles } from './styles.js';
-import { checkAttachmentBlob, downloadAttachmentBlob } from './utils.js';
+import { AttachmentEmbedProvider } from './embed';
+import { styles } from './styles';
+import { checkAttachmentBlob, downloadAttachmentBlob } from './utils';
 
 @Peekable({
   enableOn: ({ model }: AttachmentBlockComponent) => {
@@ -42,43 +38,6 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
 
   protected _isResizing = false;
 
-  protected _whenHover: HoverController | null = new HoverController(
-    this,
-    ({ abortController }) => {
-      const selection = this.host.selection;
-      const textSelection = selection.find(TextSelection);
-      if (
-        !!textSelection &&
-        (!!textSelection.to || !!textSelection.from.length)
-      ) {
-        return null;
-      }
-
-      const blockSelections = selection.filter(BlockSelection);
-      if (
-        blockSelections.length > 1 ||
-        (blockSelections.length === 1 &&
-          blockSelections[0].blockId !== this.blockId)
-      ) {
-        return null;
-      }
-
-      return {
-        template: AttachmentOptionsTemplate({
-          block: this,
-          model: this.model,
-          abortController,
-        }),
-        computePosition: {
-          referenceElement: this,
-          placement: 'top-start',
-          middleware: [flip(), offset(4)],
-          autoUpdate: true,
-        },
-      };
-    }
-  );
-
   blockDraggable = true;
 
   protected containerStyleMap = styleMap({
@@ -227,11 +186,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
     const embedView = this.embedView;
 
     return html`
-      <div
-        ${this._whenHover ? ref(this._whenHover.setReference) : nothing}
-        class="affine-attachment-container"
-        style=${this.containerStyleMap}
-      >
+      <div class="affine-attachment-container" style=${this.containerStyleMap}>
         ${embedView
           ? html`<div class="affine-attachment-embed-container">
               ${embedView}

blocksuite/affine/block-attachment/src/attachment-edgeless-block.ts

@@ -1,5 +1,4 @@
 import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
-import type { HoverController } from '@blocksuite/affine-components/hover';
 import { AttachmentBlockStyles } from '@blocksuite/affine-model';
 import {
   EMBED_CARD_HEIGHT,
@@ -13,8 +12,6 @@ import { AttachmentBlockComponent } from './attachment-block.js';
 export class AttachmentEdgelessBlockComponent extends toGfxBlockComponent(
   AttachmentBlockComponent
 ) {
-  protected override _whenHover: HoverController | null = null;
-
   override blockDraggable = false;
 
   get slots() {

blocksuite/affine/block-attachment/src/attachment-spec.ts

@@ -1,17 +1,26 @@
-import { BlockViewExtension, FlavourExtension } from '@blocksuite/block-std';
+import { AttachmentBlockSchema } from '@blocksuite/affine-model';
+import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
+import {
+  BlockFlavourIdentifier,
+  BlockViewExtension,
+  FlavourExtension,
+} from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
 import { AttachmentBlockNotionHtmlAdapterExtension } from './adapters/notion-html.js';
 import { AttachmentDropOption } from './attachment-service.js';
+import { builtinToolbarConfig } from './configs/toolbar';
 import {
   AttachmentEmbedConfigExtension,
   AttachmentEmbedService,
-} from './embed.js';
+} from './embed';
+
+const flavour = AttachmentBlockSchema.model.flavour;
 
 export const AttachmentBlockSpec: ExtensionType[] = [
-  FlavourExtension('affine:attachment'),
-  BlockViewExtension('affine:attachment', model => {
+  FlavourExtension(flavour),
+  BlockViewExtension(flavour, model => {
     return model.parent?.flavour === 'affine:surface'
       ? literal`affine-edgeless-attachment`
       : literal`affine-attachment`;
@@ -20,4 +29,8 @@ export const AttachmentBlockSpec: ExtensionType[] = [
   AttachmentEmbedConfigExtension(),
   AttachmentEmbedService,
   AttachmentBlockNotionHtmlAdapterExtension,
+  ToolbarModuleExtension({
+    id: BlockFlavourIdentifier(flavour),
+    config: builtinToolbarConfig,
+  }),
 ];

blocksuite/affine/block-attachment/src/components/config.ts

@@ -1,77 +0,0 @@
-import {
-  CopyIcon,
-  DeleteIcon,
-  DownloadIcon,
-  DuplicateIcon,
-  RefreshIcon,
-} from '@blocksuite/affine-components/icons';
-import type { MenuItemGroup } from '@blocksuite/affine-components/toolbar';
-
-import { cloneAttachmentProperties } from '../utils.js';
-import type { AttachmentToolbarMoreMenuContext } from './context.js';
-
-export const BUILT_IN_GROUPS: MenuItemGroup<AttachmentToolbarMoreMenuContext>[] =
-  [
-    {
-      type: 'clipboard',
-      items: [
-        {
-          type: 'copy',
-          label: 'Copy',
-          icon: CopyIcon,
-          disabled: ({ doc }) => doc.readonly,
-          action: ctx => ctx.blockComponent.copy(),
-        },
-        {
-          type: 'duplicate',
-          label: 'Duplicate',
-          icon: DuplicateIcon,
-          disabled: ({ doc }) => doc.readonly,
-          action: ({ doc, blockComponent, close }) => {
-            const model = blockComponent.model;
-            const prop: { flavour: 'affine:attachment' } = {
-              flavour: 'affine:attachment',
-              ...cloneAttachmentProperties(model),
-            };
-            doc.addSiblingBlocks(model, [prop]);
-            close();
-          },
-        },
-        {
-          type: 'reload',
-          label: 'Reload',
-          icon: RefreshIcon,
-          disabled: ({ doc }) => doc.readonly,
-          action: ({ blockComponent, close }) => {
-            blockComponent.refreshData();
-            close();
-          },
-        },
-        {
-          type: 'download',
-          label: 'Download',
-          icon: DownloadIcon,
-          disabled: ({ doc }) => doc.readonly,
-          action: ({ blockComponent, close }) => {
-            blockComponent.download();
-            close();
-          },
-        },
-      ],
-    },
-    {
-      type: 'delete',
-      items: [
-        {
-          type: 'delete',
-          label: 'Delete',
-          icon: DeleteIcon,
-          disabled: ({ doc }) => doc.readonly,
-          action: ({ doc, blockComponent, close }) => {
-            doc.deleteBlock(blockComponent.model);
-            close();
-          },
-        },
-      ],
-    },
-  ];

blocksuite/affine/block-attachment/src/components/context.ts

@@ -1,45 +0,0 @@
-import { MenuContext } from '@blocksuite/affine-components/toolbar';
-
-import type { AttachmentBlockComponent } from '../attachment-block.js';
-
-export class AttachmentToolbarMoreMenuContext extends MenuContext {
-  override close = () => {
-    this.abortController.abort();
-  };
-
-  get doc() {
-    return this.blockComponent.doc;
-  }
-
-  get host() {
-    return this.blockComponent.host;
-  }
-
-  get selectedBlockModels() {
-    if (this.blockComponent.model) return [this.blockComponent.model];
-    return [];
-  }
-
-  get std() {
-    return this.blockComponent.std;
-  }
-
-  constructor(
-    public blockComponent: AttachmentBlockComponent,
-    public abortController: AbortController
-  ) {
-    super();
-  }
-
-  isEmpty() {
-    return false;
-  }
-
-  isMultiple() {
-    return false;
-  }
-
-  isSingle() {
-    return true;
-  }
-}

blocksuite/affine/block-attachment/src/components/options.ts

@@ -1,229 +0,0 @@
-import {
-  CaptionIcon,
-  DownloadIcon,
-  EditIcon,
-} from '@blocksuite/affine-components/icons';
-import { createLitPortal } from '@blocksuite/affine-components/portal';
-import {
-  cloneGroups,
-  getMoreMenuConfig,
-  renderGroups,
-  renderToolbarSeparator,
-} from '@blocksuite/affine-components/toolbar';
-import {
-  type AttachmentBlockModel,
-  defaultAttachmentProps,
-} from '@blocksuite/affine-model';
-import {
-  EMBED_CARD_HEIGHT,
-  EMBED_CARD_WIDTH,
-} from '@blocksuite/affine-shared/consts';
-import { Bound } from '@blocksuite/global/gfx';
-import { ArrowDownSmallIcon, MoreVerticalIcon } from '@blocksuite/icons/lit';
-import { flip, offset } from '@floating-ui/dom';
-import { html, nothing } from 'lit';
-import { join } from 'lit/directives/join.js';
-import { repeat } from 'lit/directives/repeat.js';
-
-import type { AttachmentBlockComponent } from '../attachment-block.js';
-import { BUILT_IN_GROUPS } from './config.js';
-import { AttachmentToolbarMoreMenuContext } from './context.js';
-import { RenameModal } from './rename-model.js';
-import { styles } from './styles.js';
-
-export function attachmentViewToggleMenu({
-  block,
-  callback,
-}: {
-  block: AttachmentBlockComponent;
-  callback?: () => void;
-}) {
-  const model = block.model;
-  const readonly = model.doc.readonly;
-  const embedded = model.embed;
-  const viewType = embedded ? 'embed' : 'card';
-  const viewActions = [
-    {
-      type: 'card',
-      label: 'Card view',
-      disabled: readonly || !embedded,
-      action: () => {
-        const style = defaultAttachmentProps.style!;
-        const width = EMBED_CARD_WIDTH[style];
-        const height = EMBED_CARD_HEIGHT[style];
-        const bound = Bound.deserialize(model.xywh);
-        bound.w = width;
-        bound.h = height;
-        model.doc.updateBlock(model, {
-          style,
-          embed: false,
-          xywh: bound.serialize(),
-        });
-        callback?.();
-      },
-    },
-    {
-      type: 'embed',
-      label: 'Embed view',
-      disabled: readonly || embedded || !block.embedded(),
-      action: () => {
-        block.convertTo();
-        callback?.();
-      },
-    },
-  ];
-
-  return html`
-    <editor-menu-button
-      .contentPadding=${'8px'}
-      .button=${html`
-        <editor-icon-button
-          aria-label="Switch view"
-          .justify=${'space-between'}
-          .labelHeight=${'20px'}
-          .iconContainerWidth=${'110px'}
-        >
-          <div class="label">
-            <span style="text-transform: capitalize">${viewType}</span>
-            view
-          </div>
-          ${ArrowDownSmallIcon({ width: '16px', height: '16px' })}
-        </editor-icon-button>
-      `}
-    >
-      <div data-size="small" data-orientation="vertical">
-        ${repeat(
-          viewActions,
-          button => button.type,
-          ({ type, label, action, disabled }) => html`
-            <editor-menu-action
-              aria-label=${label}
-              data-testid=${`link-to-${type}`}
-              ?data-selected=${type === viewType}
-              ?disabled=${disabled}
-              @click=${action}
-            >
-              ${label}
-            </editor-menu-action>
-          `
-        )}
-      </div>
-    </editor-menu-button>
-  `;
-}
-
-export function AttachmentOptionsTemplate({
-  block,
-  model,
-  abortController,
-}: {
-  block: AttachmentBlockComponent;
-  model: AttachmentBlockModel;
-  abortController: AbortController;
-}) {
-  const std = block.std;
-  const editorHost = block.host;
-  const readonly = model.doc.readonly;
-  const context = new AttachmentToolbarMoreMenuContext(block, abortController);
-  const groups = getMoreMenuConfig(std).configure(cloneGroups(BUILT_IN_GROUPS));
-  const moreMenuActions = renderGroups(groups, context);
-
-  const buttons = [
-    // preview
-    // html`
-    //   <editor-icon-button aria-label="Preview" .tooltip=${'Preview'}>
-    //     ${ViewIcon}
-    //   </editor-icon-button>
-    // `,
-
-    readonly
-      ? nothing
-      : html`
-          <editor-icon-button
-            aria-label="Rename"
-            .tooltip=${'Rename'}
-            @click=${() => {
-              abortController.abort();
-              const renameAbortController = new AbortController();
-              createLitPortal({
-                template: RenameModal({
-                  model,
-                  editorHost,
-                  abortController: renameAbortController,
-                }),
-                computePosition: {
-                  referenceElement: block,
-                  placement: 'top-start',
-                  middleware: [flip(), offset(4)],
-                  // It has a overlay mask, so we don't need to update the position.
-                  // autoUpdate: true,
-                },
-                abortController: renameAbortController,
-              });
-            }}
-          >
-            ${EditIcon}
-          </editor-icon-button>
-        `,
-
-    attachmentViewToggleMenu({
-      block,
-      callback: () => abortController.abort(),
-    }),
-
-    readonly
-      ? nothing
-      : html`
-          <editor-icon-button
-            aria-label="Download"
-            .tooltip=${'Download'}
-            @click=${() => block.download()}
-          >
-            ${DownloadIcon}
-          </editor-icon-button>
-        `,
-
-    readonly
-      ? nothing
-      : html`
-          <editor-icon-button
-            aria-label="Caption"
-            .tooltip=${'Caption'}
-            @click=${() => block.captionEditor?.show()}
-          >
-            ${CaptionIcon}
-          </editor-icon-button>
-        `,
-
-    html`
-      <editor-menu-button
-        .contentPadding=${'8px'}
-        .button=${html`
-          <editor-icon-button
-            aria-label="More"
-            .tooltip=${'More'}
-            .iconSize=${'20px'}
-          >
-            ${MoreVerticalIcon()}
-          </editor-icon-button>
-        `}
-      >
-        <div data-size="large" data-orientation="vertical">
-          ${moreMenuActions}
-        </div>
-      </editor-menu-button>
-    `,
-  ];
-
-  return html`
-    <style>
-      ${styles}
-    </style>
-    <editor-toolbar class="affine-attachment-toolbar">
-      ${join(
-        buttons.filter(button => button !== nothing),
-        renderToolbarSeparator
-      )}
-    </editor-toolbar>
-  `;
-}

blocksuite/affine/block-attachment/src/components/rename-model.ts

@@ -5,7 +5,7 @@ import type { EditorHost } from '@blocksuite/block-std';
 import { html } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
 
-import { renameStyles } from './styles.js';
+import { renameStyles } from './styles';
 
 export const RenameModal = ({
   editorHost,
@@ -34,6 +34,7 @@ export const RenameModal = ({
   let fileName = includeExtension ? nameWithoutExtension : originalName;
   const extension = includeExtension ? originalExtension : '';
 
+  const abort = () => abortController.abort();
   const onConfirm = () => {
     const newFileName = fileName + extension;
     if (!newFileName) {
@@ -43,7 +44,7 @@ export const RenameModal = ({
     model.doc.updateBlock(model, {
       name: newFileName,
     });
-    abortController.abort();
+    abort();
   };
   const onInput = (e: InputEvent) => {
     fileName = (e.target as HTMLInputElement).value;
@@ -52,7 +53,7 @@ export const RenameModal = ({
     e.stopPropagation();
 
     if (e.key === 'Escape' && !e.isComposing) {
-      abortController.abort();
+      abort();
       return;
     }
     if (e.key === 'Enter' && !e.isComposing) {
@@ -65,10 +66,7 @@ export const RenameModal = ({
     <style>
       ${renameStyles}
     </style>
-    <div
-      class="affine-attachment-rename-overlay-mask"
-      @click="${() => abortController.abort()}"
-    ></div>
+    <div class="affine-attachment-rename-overlay-mask" @click="${abort}"></div>
     <div class="affine-attachment-rename-container">
       <div class="affine-attachment-rename-input-wrapper">
         <input

blocksuite/affine/block-attachment/src/components/styles.ts

@@ -57,43 +57,6 @@ export const renameStyles = css`
   }
 `;
 
-export const moreMenuStyles = css`
-  .affine-attachment-options-more {
-    box-sizing: border-box;
-    padding-bottom: 4px;
-  }
-
-  .affine-attachment-options-more-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    color: var(--affine-text-primary-color);
-
-    border-radius: 8px;
-    padding: 8px;
-    background: var(--affine-background-overlay-panel-color);
-    box-shadow: var(--affine-shadow-2);
-  }
-
-  .affine-attachment-options-more-container > icon-button {
-    display: flex;
-    align-items: center;
-    padding: 8px;
-    gap: 8px;
-  }
-  .affine-attachment-options-more-container > icon-button[hidden] {
-    display: none;
-  }
-
-  .affine-attachment-options-more-container > icon-button:hover.danger {
-    background: var(--affine-background-error-color);
-    color: var(--affine-error-color);
-  }
-  .affine-attachment-options-more-container > icon-button:hover.danger > svg {
-    color: var(--affine-error-color);
-  }
-`;
-
 export const styles = css`
   :host {
     z-index: 1;

blocksuite/affine/block-attachment/src/configs/toolbar.ts

@@ -0,0 +1,278 @@
+import { createLitPortal } from '@blocksuite/affine-components/portal';
+import {
+  AttachmentBlockModel,
+  defaultAttachmentProps,
+} from '@blocksuite/affine-model';
+import {
+  EMBED_CARD_HEIGHT,
+  EMBED_CARD_WIDTH,
+} from '@blocksuite/affine-shared/consts';
+import {
+  ActionPlacement,
+  type ToolbarAction,
+  type ToolbarActionGroup,
+  type ToolbarContext,
+  type ToolbarModuleConfig,
+} from '@blocksuite/affine-shared/services';
+import { BlockSelection, SurfaceSelection } from '@blocksuite/block-std';
+import { Bound } from '@blocksuite/global/gfx';
+import {
+  CaptionIcon,
+  CopyIcon,
+  DeleteIcon,
+  DownloadIcon,
+  DuplicateIcon,
+  EditIcon,
+  ResetIcon,
+} from '@blocksuite/icons/lit';
+import type { SelectionConstructor } from '@blocksuite/store';
+import { flip, offset } from '@floating-ui/dom';
+import { computed } from '@preact/signals-core';
+import { html } from 'lit';
+import { keyed } from 'lit/directives/keyed.js';
+
+import { AttachmentBlockComponent } from '../attachment-block';
+import { RenameModal } from '../components/rename-model';
+import { AttachmentEmbedProvider } from '../embed';
+import { cloneAttachmentProperties } from '../utils';
+
+const trackBaseProps = {
+  segment: 'doc',
+  page: 'doc editor',
+  module: 'toolbar',
+  category: 'attachment',
+  type: 'card view',
+};
+
+const createAttachmentViewDropdownMenuWith = <T extends SelectionConstructor>(
+  t: T
+) => {
+  return {
+    id: 'b.conversions',
+    actions: [
+      {
+        id: 'card',
+        label: 'Card view',
+        run(ctx) {
+          const model = ctx.getCurrentModelByType(t, AttachmentBlockModel);
+          if (!model) return;
+
+          const style = defaultAttachmentProps.style!;
+          const width = EMBED_CARD_WIDTH[style];
+          const height = EMBED_CARD_HEIGHT[style];
+          const bound = Bound.deserialize(model.xywh);
+          bound.w = width;
+          bound.h = height;
+
+          ctx.store.updateBlock(model, {
+            style,
+            embed: false,
+            xywh: bound.serialize(),
+          });
+        },
+      },
+      {
+        id: 'embed',
+        label: 'Embed view',
+        run(ctx) {
+          const model = ctx.getCurrentModelByType(t, AttachmentBlockModel);
+          if (!model) return;
+
+          // Clears
+          ctx.reset();
+          ctx.select('note');
+
+          ctx.std.get(AttachmentEmbedProvider).convertTo(model);
+
+          ctx.track('SelectedView', {
+            ...trackBaseProps,
+            control: 'select view',
+            type: 'embed view',
+          });
+        },
+      },
+    ],
+    content(ctx) {
+      const model = ctx.getCurrentModelByType(t, AttachmentBlockModel);
+      if (!model) return null;
+
+      const embedProvider = ctx.std.get(AttachmentEmbedProvider);
+      const actions = this.actions.map(action => ({ ...action }));
+      const viewType$ = computed(() => {
+        const [cardAction, embedAction] = actions;
+        const embed = model.embed$.value ?? false;
+
+        cardAction.disabled = !embed;
+        embedAction.disabled = embed && embedProvider.embedded(model);
+
+        return embed ? embedAction.label : cardAction.label;
+      });
+      const toggle = (e: CustomEvent<boolean>) => {
+        const opened = e.detail;
+        if (!opened) return;
+
+        ctx.track('OpenedViewSelector', {
+          ...trackBaseProps,
+          control: 'switch view',
+        });
+      };
+
+      return html`${keyed(
+        model,
+        html`<affine-view-dropdown-menu
+          .actions=${actions}
+          .context=${ctx}
+          .toggle=${toggle}
+          .viewType$=${viewType$}
+        ></affine-view-dropdown-menu>`
+      )}`;
+    },
+  } satisfies ToolbarActionGroup<ToolbarAction>;
+};
+
+export const builtinToolbarConfig = {
+  actions: [
+    {
+      id: 'a.rename',
+      content(cx) {
+        const component = cx.getCurrentBlockComponentBy(
+          BlockSelection,
+          AttachmentBlockComponent
+        );
+        if (!component) return null;
+
+        const abortController = new AbortController();
+        abortController.signal.onabort = () => cx.show();
+
+        return html`
+          <editor-icon-button
+            aria-label="Rename"
+            .tooltip="${'Rename'}"
+            @click=${() => {
+              cx.hide();
+
+              createLitPortal({
+                template: RenameModal({
+                  model: component.model,
+                  editorHost: cx.host,
+                  abortController,
+                }),
+                computePosition: {
+                  referenceElement: component,
+                  placement: 'top-start',
+                  middleware: [flip(), offset(4)],
+                },
+                abortController,
+              });
+            }}
+          >
+            ${EditIcon()}
+          </editor-icon-button>
+        `;
+      },
+    },
+    createAttachmentViewDropdownMenuWith(BlockSelection),
+    {
+      id: 'c.download',
+      tooltip: 'Download',
+      icon: DownloadIcon(),
+      run(ctx) {
+        const component = ctx.getCurrentBlockComponentBy(
+          BlockSelection,
+          AttachmentBlockComponent
+        );
+        component?.download();
+      },
+    },
+    {
+      id: 'd.caption',
+      tooltip: 'Caption',
+      icon: CaptionIcon(),
+      run(ctx) {
+        const component = ctx.getCurrentBlockComponentBy(
+          BlockSelection,
+          AttachmentBlockComponent
+        );
+        component?.captionEditor?.show();
+
+        ctx.track('OpenedCaptionEditor', {
+          ...trackBaseProps,
+          control: 'add caption',
+        });
+      },
+    },
+    {
+      placement: ActionPlacement.More,
+      id: 'a.clipboard',
+      actions: [
+        {
+          id: 'copy',
+          label: 'Copy',
+          icon: CopyIcon(),
+          run(ctx) {
+            // TODO(@fundon): unify `clone` method
+            const component = ctx.getCurrentBlockComponentBy(
+              BlockSelection,
+              AttachmentBlockComponent
+            );
+            component?.copy();
+          },
+        },
+        {
+          id: 'duplicate',
+          label: 'Duplicate',
+          icon: DuplicateIcon(),
+          run(ctx) {
+            const model = ctx.getCurrentBlockComponentBy(
+              BlockSelection,
+              AttachmentBlockComponent
+            )?.model;
+            if (!model) return;
+
+            // TODO(@fundon): unify `duplicate` method
+            ctx.store.addSiblingBlocks(model, [
+              {
+                flavour: model.flavour,
+                ...cloneAttachmentProperties(model),
+              },
+            ]);
+          },
+        },
+      ],
+    },
+    {
+      placement: ActionPlacement.More,
+      id: 'b.refresh',
+      label: 'Reload',
+      icon: ResetIcon(),
+      run(ctx) {
+        const component = ctx.getCurrentBlockComponentBy(
+          BlockSelection,
+          AttachmentBlockComponent
+        );
+        component?.refreshData();
+      },
+    },
+    {
+      placement: ActionPlacement.More,
+      id: 'c.delete',
+      label: 'Delete',
+      icon: DeleteIcon(),
+      variant: 'destructive',
+      run(ctx) {
+        const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+        if (!model) return;
+
+        ctx.store.deleteBlock(model);
+
+        // Clears
+        ctx.select('note');
+        ctx.reset();
+      },
+    },
+  ],
+} as const satisfies ToolbarModuleConfig;
+
+export const attachmentViewDropdownMenu = (ctx: ToolbarContext) => {
+  return createAttachmentViewDropdownMenuWith(SurfaceSelection).content(ctx);
+};

blocksuite/affine/block-attachment/src/index.ts

@@ -2,7 +2,7 @@ export * from './adapters/notion-html';
 export * from './attachment-block';
 export * from './attachment-service';
 export * from './attachment-spec';
-export { attachmentViewToggleMenu } from './components/options';
+export { attachmentViewDropdownMenu } from './configs/toolbar';
 export {
   type AttachmentEmbedConfig,
   AttachmentEmbedConfigIdentifier,