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-embed/src/configs/toolbar.ts

@@ -0,0 +1,404 @@
+import { toast } from '@blocksuite/affine-components/toast';
+import {
+  BookmarkStyles,
+  EmbedGithubModel,
+  isExternalEmbedModel,
+} from '@blocksuite/affine-model';
+import {
+  ActionPlacement,
+  EmbedOptionProvider,
+  type ToolbarAction,
+  type ToolbarActionGroup,
+  type ToolbarModuleConfig,
+} from '@blocksuite/affine-shared/services';
+import { getBlockProps } from '@blocksuite/affine-shared/utils';
+import { BlockSelection } from '@blocksuite/block-std';
+import {
+  CaptionIcon,
+  CopyIcon,
+  DeleteIcon,
+  DuplicateIcon,
+  ResetIcon,
+} from '@blocksuite/icons/lit';
+import { Slice, Text } from '@blocksuite/store';
+import { signal } from '@preact/signals-core';
+import { html } from 'lit';
+import { keyed } from 'lit/directives/keyed.js';
+import * as Y from 'yjs';
+
+import type { EmbedFigmaBlockComponent } from '../embed-figma-block';
+import type { EmbedGithubBlockComponent } from '../embed-github-block';
+import type { EmbedLoomBlockComponent } from '../embed-loom-block';
+import type { EmbedYoutubeBlockComponent } from '../embed-youtube-block';
+
+const trackBaseProps = {
+  segment: 'doc',
+  page: 'doc editor',
+  module: 'toolbar',
+  category: 'link',
+  type: 'card view',
+};
+
+// External embed blocks
+export function createBuiltinToolbarConfigForExternal(
+  klass:
+    | typeof EmbedGithubBlockComponent
+    | typeof EmbedFigmaBlockComponent
+    | typeof EmbedLoomBlockComponent
+    | typeof EmbedYoutubeBlockComponent
+) {
+  return {
+    actions: [
+      {
+        id: 'a.preview',
+        content(ctx) {
+          const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+          if (!model || !isExternalEmbedModel(model)) return null;
+
+          const { url } = model;
+          const options = ctx.std
+            .get(EmbedOptionProvider)
+            .getEmbedBlockOptions(url);
+
+          if (options?.viewType !== 'card') return null;
+
+          return html`<affine-link-preview .url=${url}></affine-link-preview>`;
+        },
+      },
+      {
+        id: 'b.conversions',
+        actions: [
+          {
+            id: 'inline',
+            label: 'Inline view',
+            run(ctx) {
+              const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+              if (!model || !isExternalEmbedModel(model)) return;
+
+              const { title, caption, url: link, parent } = model;
+              const index = parent?.children.indexOf(model);
+
+              const yText = new Y.Text();
+              const insert = title || caption || link;
+              yText.insert(0, insert);
+              yText.format(0, insert.length, { link });
+
+              const text = new Text(yText);
+
+              ctx.store.addBlock('affine:paragraph', { text }, parent, index);
+
+              ctx.store.deleteBlock(model);
+
+              // Clears
+              ctx.select('note');
+              ctx.reset();
+
+              ctx.track('SelectedView', {
+                ...trackBaseProps,
+                control: 'select view',
+                type: 'inline view',
+              });
+            },
+          },
+          {
+            id: 'card',
+            label: 'Card view',
+            disabled(ctx) {
+              const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+              if (!model || !isExternalEmbedModel(model)) return true;
+
+              const { url } = model;
+              const options = ctx.std
+                .get(EmbedOptionProvider)
+                .getEmbedBlockOptions(url);
+
+              return options?.viewType === 'card';
+            },
+            run(ctx) {
+              const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+              if (!model || !isExternalEmbedModel(model)) return;
+
+              const { url, caption, parent } = model;
+              const index = parent?.children.indexOf(model);
+              const options = ctx.std
+                .get(EmbedOptionProvider)
+                .getEmbedBlockOptions(url);
+
+              let { style } = model;
+              let flavour = 'affine:bookmark';
+
+              if (options?.viewType === 'card') {
+                flavour = options.flavour;
+                if (!options.styles.includes(style)) {
+                  style = options.styles[0];
+                }
+              } else {
+                style =
+                  BookmarkStyles.find(s => s !== 'vertical' && s !== 'cube') ??
+                  BookmarkStyles[1];
+              }
+
+              const blockId = ctx.store.addBlock(
+                flavour,
+                { url, caption, style },
+                parent,
+                index
+              );
+
+              ctx.store.deleteBlock(model);
+
+              // Selects new block
+              ctx.select('note', [
+                ctx.selection.create(BlockSelection, { blockId }),
+              ]);
+
+              ctx.track('SelectedView', {
+                ...trackBaseProps,
+                control: 'select view',
+                type: 'card view',
+              });
+            },
+          },
+          {
+            id: 'embed',
+            label: 'Embed view',
+            disabled(ctx) {
+              const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+              if (!model || !isExternalEmbedModel(model)) return false;
+
+              const { url } = model;
+              const options = ctx.std
+                .get(EmbedOptionProvider)
+                .getEmbedBlockOptions(url);
+
+              return options?.viewType === 'embed';
+            },
+            when(ctx) {
+              const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+              if (!model || !isExternalEmbedModel(model)) return false;
+
+              const { url } = model;
+              const options = ctx.std
+                .get(EmbedOptionProvider)
+                .getEmbedBlockOptions(url);
+
+              return options?.viewType === 'embed';
+            },
+            run(ctx) {
+              const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+              if (!model || !isExternalEmbedModel(model)) return;
+
+              const { url, caption, parent } = model;
+              const index = parent?.children.indexOf(model);
+              const options = ctx.std
+                .get(EmbedOptionProvider)
+                .getEmbedBlockOptions(url);
+
+              if (options?.viewType !== 'embed') return;
+
+              const { flavour, styles } = options;
+              let { style } = model;
+
+              if (!styles.includes(style)) {
+                style =
+                  styles.find(s => s !== 'vertical' && s !== 'cube') ??
+                  styles[0];
+              }
+
+              const blockId = ctx.store.addBlock(
+                flavour,
+                { url, caption, style },
+                parent,
+                index
+              );
+
+              ctx.store.deleteBlock(model);
+
+              // Selects new block
+              ctx.select('note', [
+                ctx.selection.create(BlockSelection, { blockId }),
+              ]);
+
+              ctx.track('SelectedView', {
+                ...trackBaseProps,
+                control: 'select view',
+                type: 'embed view',
+              });
+            },
+          },
+        ],
+        content(ctx) {
+          const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+          if (!model || !isExternalEmbedModel(model)) return null;
+
+          const { url } = model;
+          const viewType =
+            ctx.std.get(EmbedOptionProvider).getEmbedBlockOptions(url)
+              ?.viewType ?? 'card';
+          const actions = this.actions.map(action => ({ ...action }));
+          const viewType$ = signal(
+            `${viewType === 'card' ? 'Card' : 'Embed'} view`
+          );
+
+          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>,
+      {
+        id: 'c.style',
+        actions: [
+          {
+            id: 'horizontal',
+            label: 'Large horizontal style',
+          },
+          {
+            id: 'list',
+            label: 'Small horizontal style',
+          },
+        ],
+        content(ctx) {
+          const model = ctx.getCurrentModelByType(
+            BlockSelection,
+            EmbedGithubModel
+          );
+          if (!model) return null;
+
+          const actions = this.actions.map(action => ({
+            ...action,
+            run: ({ store }) => {
+              store.updateBlock(model, { style: action.id });
+
+              ctx.track('SelectedCardStyle', {
+                ...trackBaseProps,
+                control: 'select card style',
+                type: action.id,
+              });
+            },
+          })) satisfies ToolbarAction[];
+
+          const toggle = (e: CustomEvent<boolean>) => {
+            const opened = e.detail;
+            if (!opened) return;
+
+            ctx.track('OpenedCardStyleSelector', {
+              ...trackBaseProps,
+              control: 'switch card style',
+            });
+          };
+
+          return html`${keyed(
+            model,
+            html`<affine-card-style-dropdown-menu
+              .actions=${actions}
+              .context=${ctx}
+              .toggle=${toggle}
+              .style$=${model.style$}
+            ></affine-card-style-dropdown-menu>`
+          )}`;
+        },
+      } satisfies ToolbarActionGroup<ToolbarAction>,
+      {
+        id: 'd.caption',
+        tooltip: 'Caption',
+        icon: CaptionIcon(),
+        run(ctx) {
+          const component = ctx.getCurrentBlockComponentBy(
+            BlockSelection,
+            klass
+          );
+          if (!component) return;
+
+          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) {
+              const model = ctx.getCurrentModelBy(BlockSelection);
+              if (!model || !isExternalEmbedModel(model)) return;
+
+              const slice = Slice.fromModels(ctx.store, [model]);
+              ctx.clipboard
+                .copySlice(slice)
+                .then(() => toast(ctx.host, 'Copied to clipboard'))
+                .catch(console.error);
+            },
+          },
+          {
+            id: 'duplicate',
+            label: 'Duplicate',
+            icon: DuplicateIcon(),
+            run(ctx) {
+              const model = ctx.getCurrentModelBy(BlockSelection);
+              if (!model || !isExternalEmbedModel(model)) return;
+
+              const { flavour, parent } = model;
+              const props = getBlockProps(model);
+              const index = parent?.children.indexOf(model);
+
+              ctx.store.addBlock(flavour, props, parent, index);
+            },
+          },
+        ],
+      },
+      {
+        placement: ActionPlacement.More,
+        id: 'b.reload',
+        label: 'Reload',
+        icon: ResetIcon(),
+        run(ctx) {
+          const component = ctx.getCurrentBlockComponentBy(
+            BlockSelection,
+            klass
+          );
+          component?.refreshData();
+        },
+      },
+      {
+        placement: ActionPlacement.More,
+        id: 'c.delete',
+        label: 'Delete',
+        icon: DeleteIcon(),
+        variant: 'destructive',
+        run(ctx) {
+          const model = ctx.getCurrentModelBy(BlockSelection);
+          if (!model || !isExternalEmbedModel(model)) return;
+
+          ctx.store.deleteBlock(model);
+
+          // Clears
+          ctx.select('note');
+          ctx.reset();
+        },
+      },
+    ],
+  } as const satisfies ToolbarModuleConfig;
+}

blocksuite/affine/block-embed/src/embed-figma-block/embed-figma-spec.ts

@@ -1,17 +1,31 @@
-import { BlockViewExtension, FlavourExtension } from '@blocksuite/block-std';
+import { EmbedFigmaBlockSchema } from '@blocksuite/affine-model';
+import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
+import {
+  BlockServiceIdentifier,
+  BlockViewExtension,
+  FlavourExtension,
+} from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
-import { EmbedFigmaBlockAdapterExtensions } from './adapters/extension.js';
-import { EmbedFigmaBlockOptionConfig } from './embed-figma-service.js';
+import { createBuiltinToolbarConfigForExternal } from '../configs/toolbar';
+import { EmbedFigmaBlockAdapterExtensions } from './adapters/extension';
+import { EmbedFigmaBlockComponent } from './embed-figma-block';
+import { EmbedFigmaBlockOptionConfig } from './embed-figma-service';
+
+const flavour = EmbedFigmaBlockSchema.model.flavour;
 
 export const EmbedFigmaBlockSpec: ExtensionType[] = [
-  FlavourExtension('affine:embed-figma'),
-  BlockViewExtension('affine:embed-figma', model => {
+  FlavourExtension(flavour),
+  BlockViewExtension(flavour, model => {
     return model.parent?.flavour === 'affine:surface'
       ? literal`affine-embed-edgeless-figma-block`
       : literal`affine-embed-figma-block`;
   }),
   EmbedFigmaBlockAdapterExtensions,
   EmbedFigmaBlockOptionConfig,
+  ToolbarModuleExtension({
+    id: BlockServiceIdentifier(flavour),
+    config: createBuiltinToolbarConfigForExternal(EmbedFigmaBlockComponent),
+  }),
 ].flat();

blocksuite/affine/block-embed/src/embed-github-block/embed-github-spec.ts

@@ -1,21 +1,35 @@
-import { BlockViewExtension, FlavourExtension } from '@blocksuite/block-std';
+import { EmbedGithubBlockSchema } from '@blocksuite/affine-model';
+import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
+import {
+  BlockServiceIdentifier,
+  BlockViewExtension,
+  FlavourExtension,
+} from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
-import { EmbedGithubBlockAdapterExtensions } from './adapters/extension.js';
+import { createBuiltinToolbarConfigForExternal } from '../configs/toolbar';
+import { EmbedGithubBlockAdapterExtensions } from './adapters/extension';
+import { EmbedGithubBlockComponent } from './embed-github-block';
 import {
   EmbedGithubBlockOptionConfig,
   EmbedGithubBlockService,
-} from './embed-github-service.js';
+} from './embed-github-service';
+
+const flavour = EmbedGithubBlockSchema.model.flavour;
 
 export const EmbedGithubBlockSpec: ExtensionType[] = [
-  FlavourExtension('affine:embed-github'),
+  FlavourExtension(flavour),
   EmbedGithubBlockService,
-  BlockViewExtension('affine:embed-github', model => {
+  BlockViewExtension(flavour, model => {
     return model.parent?.flavour === 'affine:surface'
       ? literal`affine-embed-edgeless-github-block`
       : literal`affine-embed-github-block`;
   }),
   EmbedGithubBlockAdapterExtensions,
   EmbedGithubBlockOptionConfig,
+  ToolbarModuleExtension({
+    id: BlockServiceIdentifier(flavour),
+    config: createBuiltinToolbarConfigForExternal(EmbedGithubBlockComponent),
+  }),
 ].flat();

blocksuite/affine/block-embed/src/embed-html-block/configs/toolbar.ts

@@ -0,0 +1,167 @@
+import { toast } from '@blocksuite/affine-components/toast';
+import { EmbedHtmlModel } from '@blocksuite/affine-model';
+import {
+  ActionPlacement,
+  type ToolbarAction,
+  type ToolbarActionGroup,
+  type ToolbarModuleConfig,
+} from '@blocksuite/affine-shared/services';
+import { getBlockProps } from '@blocksuite/affine-shared/utils';
+import { BlockSelection } from '@blocksuite/block-std';
+import {
+  CaptionIcon,
+  CopyIcon,
+  DeleteIcon,
+  DuplicateIcon,
+  ExpandFullIcon,
+} from '@blocksuite/icons/lit';
+import { Slice } from '@blocksuite/store';
+import { html } from 'lit';
+import { keyed } from 'lit/directives/keyed.js';
+
+import { EmbedHtmlBlockComponent } from '../embed-html-block';
+
+const trackBaseProps = {
+  segment: 'doc',
+  page: 'doc editor',
+  module: 'toolbar',
+  category: 'html',
+  type: 'card view',
+};
+
+export const builtinToolbarConfig = {
+  actions: [
+    {
+      id: 'a.open-doc',
+      icon: ExpandFullIcon(),
+      tooltip: 'Open this doc',
+      run(ctx) {
+        const component = ctx.getCurrentBlockComponentBy(
+          BlockSelection,
+          EmbedHtmlBlockComponent
+        );
+        component?.open();
+      },
+    },
+    {
+      id: 'b.style',
+      actions: [
+        {
+          id: 'horizontal',
+          label: 'Large horizontal style',
+        },
+        {
+          id: 'list',
+          label: 'Small horizontal style',
+        },
+      ],
+      content(ctx) {
+        const model = ctx.getCurrentModelByType(BlockSelection, EmbedHtmlModel);
+        if (!model) return null;
+
+        const actions = this.actions.map<ToolbarAction>(action => ({
+          ...action,
+          run: ({ store }) => {
+            store.updateBlock(model, { style: action.id });
+
+            ctx.track('SelectedCardStyle', {
+              ...trackBaseProps,
+              control: 'select card style',
+              type: action.id,
+            });
+          },
+        }));
+
+        const toggle = (e: CustomEvent<boolean>) => {
+          const opened = e.detail;
+          if (!opened) return;
+
+          ctx.track('OpenedCardStyleSelector', {
+            ...trackBaseProps,
+            control: 'switch card style',
+          });
+        };
+
+        return html`${keyed(
+          model,
+          html`<affine-card-style-dropdown-menu
+            .actions=${actions}
+            .context=${ctx}
+            .toggle=${toggle}
+            .style$=${model.style$}
+          ></affine-card-style-dropdown-menu>`
+        )}`;
+      },
+    } satisfies ToolbarActionGroup<ToolbarAction>,
+    {
+      id: 'c.caption',
+      tooltip: 'Caption',
+      icon: CaptionIcon(),
+      run(ctx) {
+        const component = ctx.getCurrentBlockComponentBy(
+          BlockSelection,
+          EmbedHtmlBlockComponent
+        );
+        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) {
+            const model = ctx.getCurrentModelBy(BlockSelection);
+            if (!model) return;
+
+            const slice = Slice.fromModels(ctx.store, [model]);
+            ctx.clipboard
+              .copySlice(slice)
+              .then(() => toast(ctx.host, 'Copied to clipboard'))
+              .catch(console.error);
+          },
+        },
+        {
+          id: 'duplicate',
+          label: 'Duplicate',
+          icon: DuplicateIcon(),
+          run(ctx) {
+            const model = ctx.getCurrentModelBy(BlockSelection);
+            if (!model) return;
+
+            const { flavour, parent } = model;
+            const props = getBlockProps(model);
+            const index = parent?.children.indexOf(model);
+
+            ctx.store.addBlock(flavour, props, parent, index);
+          },
+        },
+      ],
+    },
+    {
+      placement: ActionPlacement.More,
+      id: 'c.delete',
+      label: 'Delete',
+      icon: DeleteIcon(),
+      variant: 'destructive',
+      run(ctx) {
+        const model = ctx.getCurrentModelBy(BlockSelection);
+        if (!model) return;
+
+        ctx.store.deleteBlock(model);
+
+        // Clears
+        ctx.select('note');
+        ctx.reset();
+      },
+    },
+  ],
+} as const satisfies ToolbarModuleConfig;

blocksuite/affine/block-embed/src/embed-html-block/embed-html-spec.ts

@@ -1,11 +1,24 @@
-import { BlockViewExtension } from '@blocksuite/block-std';
+import { EmbedHtmlBlockSchema } from '@blocksuite/affine-model';
+import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
+import {
+  BlockFlavourIdentifier,
+  BlockViewExtension,
+} from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
+import { builtinToolbarConfig } from './configs/toolbar';
+
+const flavour = EmbedHtmlBlockSchema.model.flavour;
+
 export const EmbedHtmlBlockSpec: ExtensionType[] = [
-  BlockViewExtension('affine:embed-html', model => {
+  BlockViewExtension(flavour, model => {
     return model.parent?.flavour === 'affine:surface'
       ? literal`affine-embed-edgeless-html-block`
       : literal`affine-embed-html-block`;
   }),
+  ToolbarModuleExtension({
+    id: BlockFlavourIdentifier(flavour),
+    config: builtinToolbarConfig,
+  }),
 ];

blocksuite/affine/block-embed/src/embed-linked-doc-block/configs/toolbar.ts

@@ -0,0 +1,276 @@
+import { toast } from '@blocksuite/affine-components/toast';
+import { EmbedLinkedDocModel } from '@blocksuite/affine-model';
+import {
+  ActionPlacement,
+  type ToolbarAction,
+  type ToolbarActionGroup,
+  type ToolbarModuleConfig,
+} from '@blocksuite/affine-shared/services';
+import {
+  getBlockProps,
+  referenceToNode,
+} from '@blocksuite/affine-shared/utils';
+import { BlockSelection } from '@blocksuite/block-std';
+import {
+  CaptionIcon,
+  CopyIcon,
+  DeleteIcon,
+  DuplicateIcon,
+} from '@blocksuite/icons/lit';
+import { Slice } from '@blocksuite/store';
+import { signal } from '@preact/signals-core';
+import { html } from 'lit';
+import { keyed } from 'lit/directives/keyed.js';
+
+import { EmbedLinkedDocBlockComponent } from '../embed-linked-doc-block';
+
+const trackBaseProps = {
+  segment: 'doc',
+  page: 'doc editor',
+  module: 'toolbar',
+  category: 'linked doc',
+  type: 'card view',
+};
+
+export const builtinToolbarConfig = {
+  actions: [
+    {
+      id: 'a.doc-title',
+      content(ctx) {
+        const component = ctx.getCurrentBlockComponentBy(
+          BlockSelection,
+          EmbedLinkedDocBlockComponent
+        );
+        if (!component) return null;
+
+        const model = component.model;
+        if (!model.title) return null;
+
+        const originalTitle =
+          ctx.workspace.getDoc(model.pageId)?.meta?.title || 'Untitled';
+
+        return html`<affine-linked-doc-title
+          .title=${originalTitle}
+          .open=${(event: MouseEvent) => component.open({ event })}
+        ></affine-linked-doc-title>`;
+      },
+    },
+    {
+      id: 'b.conversions',
+      actions: [
+        {
+          id: 'inline',
+          label: 'Inline view',
+          run(ctx) {
+            const component = ctx.getCurrentBlockComponentBy(
+              BlockSelection,
+              EmbedLinkedDocBlockComponent
+            );
+            component?.covertToInline();
+
+            // Clears
+            ctx.select('note');
+            ctx.reset();
+
+            ctx.track('SelectedView', {
+              ...trackBaseProps,
+              control: 'select view',
+              type: 'inline view',
+            });
+          },
+        },
+        {
+          id: 'card',
+          label: 'Card view',
+          disabled: true,
+        },
+        {
+          id: 'embed',
+          label: 'Embed view',
+          disabled(ctx) {
+            const component = ctx.getCurrentBlockComponentBy(
+              BlockSelection,
+              EmbedLinkedDocBlockComponent
+            );
+            if (!component) return true;
+
+            if (component.closest('affine-embed-synced-doc-block')) return true;
+
+            const model = component.model;
+
+            // same doc
+            if (model.pageId === ctx.store.id) return true;
+
+            // linking to block
+            if (referenceToNode(model)) return true;
+
+            return false;
+          },
+          run(ctx) {
+            const component = ctx.getCurrentBlockComponentBy(
+              BlockSelection,
+              EmbedLinkedDocBlockComponent
+            );
+            component?.convertToEmbed();
+
+            ctx.track('SelectedView', {
+              ...trackBaseProps,
+              control: 'select view',
+              type: 'embed view',
+            });
+          },
+        },
+      ],
+      content(ctx) {
+        const model = ctx.getCurrentModelByType(
+          BlockSelection,
+          EmbedLinkedDocModel
+        );
+        if (!model) return null;
+
+        const actions = this.actions.map(action => ({ ...action }));
+        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$=${signal(actions[1].label)}
+          ></affine-view-dropdown-menu>`
+        )}`;
+      },
+    } satisfies ToolbarActionGroup<ToolbarAction>,
+    {
+      id: 'c.style',
+      actions: [
+        {
+          id: 'horizontal',
+          label: 'Large horizontal style',
+        },
+        {
+          id: 'list',
+          label: 'Small horizontal style',
+        },
+      ],
+      content(ctx) {
+        const model = ctx.getCurrentModelByType(
+          BlockSelection,
+          EmbedLinkedDocModel
+        );
+        if (!model) return null;
+
+        const actions = this.actions.map(action => ({
+          ...action,
+          run: ({ store }) => {
+            store.updateBlock(model, { style: action.id });
+
+            ctx.track('SelectedCardStyle', {
+              ...trackBaseProps,
+              control: 'select card style',
+              type: action.id,
+            });
+          },
+        })) satisfies ToolbarAction[];
+        const toggle = (e: CustomEvent<boolean>) => {
+          const opened = e.detail;
+          if (!opened) return;
+
+          ctx.track('OpenedCardStyleSelector', {
+            ...trackBaseProps,
+            control: 'switch card style',
+          });
+        };
+
+        return html`${keyed(
+          model,
+          html`<affine-card-style-dropdown-menu
+            .actions=${actions}
+            .context=${ctx}
+            .toggle=${toggle}
+            .style$=${model.style$}
+          ></affine-card-style-dropdown-menu>`
+        )}`;
+      },
+    } satisfies ToolbarActionGroup<ToolbarAction>,
+    {
+      id: 'd.caption',
+      tooltip: 'Caption',
+      icon: CaptionIcon(),
+      run(ctx) {
+        const component = ctx.getCurrentBlockComponentBy(
+          BlockSelection,
+          EmbedLinkedDocBlockComponent
+        );
+        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) {
+            const model = ctx.getCurrentModelBy(BlockSelection);
+            if (!model) return;
+
+            const slice = Slice.fromModels(ctx.store, [model]);
+            ctx.clipboard
+              .copySlice(slice)
+              .then(() => toast(ctx.host, 'Copied to clipboard'))
+              .catch(console.error);
+          },
+        },
+        {
+          id: 'duplicate',
+          label: 'Duplicate',
+          icon: DuplicateIcon(),
+          run(ctx) {
+            const model = ctx.getCurrentModelBy(BlockSelection);
+            if (!model) return;
+
+            const { flavour, parent } = model;
+            const props = getBlockProps(model);
+            const index = parent?.children.indexOf(model);
+
+            ctx.store.addBlock(flavour, props, parent, index);
+          },
+        },
+      ],
+    },
+    {
+      placement: ActionPlacement.More,
+      id: 'c.delete',
+      label: 'Delete',
+      icon: DeleteIcon(),
+      variant: 'destructive',
+      run(ctx) {
+        const model = ctx.getCurrentModelBy(BlockSelection);
+        if (!model) return;
+
+        ctx.store.deleteBlock(model);
+
+        // Clears
+        ctx.select('note');
+        ctx.reset();
+      },
+    },
+  ],
+} as const satisfies ToolbarModuleConfig;

blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-block.ts

@@ -109,7 +109,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
   };
 
   private readonly _selectBlock = () => {
-    const selectionManager = this.host.selection;
+    const selectionManager = this.std.selection;
     const blockSelection = selectionManager.create(BlockSelection, {
       blockId: this.blockId,
     });
@@ -129,15 +129,10 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
   convertToEmbed = () => {
     if (this._referenceToNode) return;
 
-    const { doc, caption } = this.model;
+    const { doc, caption, parent } = this.model;
+    const index = parent?.children.indexOf(this.model);
 
-    const parent = doc.getParent(this.model);
-    if (!parent) {
-      return;
-    }
-    const index = parent.children.indexOf(this.model);
-
-    doc.addBlock(
+    const blockId = doc.addBlock(
       'affine:embed-synced-doc',
       {
         caption,
@@ -147,8 +142,11 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
       index
     );
 
-    this.std.selection.setGroup('note', []);
     doc.deleteBlock(this.model);
+
+    this.std.selection.setGroup('note', [
+      this.std.selection.create(BlockSelection, { blockId }),
+    ]);
   };
 
   covertToInline = () => {

blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-spec.ts

@@ -1,14 +1,26 @@
-import { BlockViewExtension } from '@blocksuite/block-std';
+import { EmbedLinkedDocBlockSchema } from '@blocksuite/affine-model';
+import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
+import {
+  BlockServiceIdentifier,
+  BlockViewExtension,
+} from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
-import { EmbedLinkedDocBlockAdapterExtensions } from './adapters/extension.js';
+import { EmbedLinkedDocBlockAdapterExtensions } from './adapters/extension';
+import { builtinToolbarConfig } from './configs/toolbar';
+
+const flavour = EmbedLinkedDocBlockSchema.model.flavour;
 
 export const EmbedLinkedDocBlockSpec: ExtensionType[] = [
-  BlockViewExtension('affine:embed-linked-doc', model => {
+  BlockViewExtension(flavour, model => {
     return model.parent?.flavour === 'affine:surface'
       ? literal`affine-embed-edgeless-linked-doc-block`
       : literal`affine-embed-linked-doc-block`;
   }),
   EmbedLinkedDocBlockAdapterExtensions,
+  ToolbarModuleExtension({
+    id: BlockServiceIdentifier(flavour),
+    config: builtinToolbarConfig,
+  }),
 ].flat();

blocksuite/affine/block-embed/src/embed-loom-block/embed-loom-spec.ts

@@ -1,21 +1,35 @@
-import { BlockViewExtension, FlavourExtension } from '@blocksuite/block-std';
+import { EmbedLoomBlockSchema } from '@blocksuite/affine-model';
+import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
+import {
+  BlockServiceIdentifier,
+  BlockViewExtension,
+  FlavourExtension,
+} from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
-import { EmbedLoomBlockAdapterExtensions } from './adapters/extension.js';
+import { createBuiltinToolbarConfigForExternal } from '../configs/toolbar';
+import { EmbedLoomBlockAdapterExtensions } from './adapters/extension';
+import { EmbedLoomBlockComponent } from './embed-loom-block';
 import {
   EmbedLoomBlockOptionConfig,
   EmbedLoomBlockService,
-} from './embed-loom-service.js';
+} from './embed-loom-service';
+
+const flavour = EmbedLoomBlockSchema.model.flavour;
 
 export const EmbedLoomBlockSpec: ExtensionType[] = [
-  FlavourExtension('affine:embed-loom'),
+  FlavourExtension(flavour),
   EmbedLoomBlockService,
-  BlockViewExtension('affine:embed-loom', model => {
+  BlockViewExtension(flavour, model => {
     return model.parent?.flavour === 'affine:surface'
       ? literal`affine-embed-edgeless-loom-block`
       : literal`affine-embed-loom-block`;
   }),
   EmbedLoomBlockAdapterExtensions,
   EmbedLoomBlockOptionConfig,
+  ToolbarModuleExtension({
+    id: BlockServiceIdentifier(flavour),
+    config: createBuiltinToolbarConfigForExternal(EmbedLoomBlockComponent),
+  }),
 ].flat();

blocksuite/affine/block-embed/src/embed-synced-doc-block/configs/toolbar.ts

@@ -0,0 +1,259 @@
+import { toast } from '@blocksuite/affine-components/toast';
+import { EmbedSyncedDocModel } from '@blocksuite/affine-model';
+import {
+  ActionPlacement,
+  type OpenDocMode,
+  type ToolbarAction,
+  type ToolbarActionGroup,
+  type ToolbarContext,
+  type ToolbarModuleConfig,
+} from '@blocksuite/affine-shared/services';
+import { getBlockProps } from '@blocksuite/affine-shared/utils';
+import { BlockSelection } from '@blocksuite/block-std';
+import {
+  ArrowDownSmallIcon,
+  CaptionIcon,
+  CopyIcon,
+  DeleteIcon,
+  DuplicateIcon,
+  ExpandFullIcon,
+  OpenInNewIcon,
+} from '@blocksuite/icons/lit';
+import { Slice } from '@blocksuite/store';
+import { signal } from '@preact/signals-core';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { keyed } from 'lit/directives/keyed.js';
+import { repeat } from 'lit/directives/repeat.js';
+
+import { EmbedSyncedDocBlockComponent } from '../embed-synced-doc-block';
+
+const trackBaseProps = {
+  segment: 'doc',
+  page: 'doc editor',
+  module: 'toolbar',
+  category: 'linked doc',
+  type: 'embed view',
+};
+
+export const builtinToolbarConfig = {
+  actions: [
+    {
+      placement: ActionPlacement.Start,
+      id: 'A.open-doc',
+      actions: [
+        {
+          id: 'open-in-active-view',
+          label: 'Open this doc',
+          icon: ExpandFullIcon(),
+        },
+      ],
+      content(ctx) {
+        const component = ctx.getCurrentBlockComponentBy(
+          BlockSelection,
+          EmbedSyncedDocBlockComponent
+        );
+        if (!component) return null;
+
+        const actions = this.actions
+          .map<ToolbarAction>(action => {
+            const shouldOpenInActiveView = action.id === 'open-in-active-view';
+            const allowed =
+              typeof action.when === 'function'
+                ? action.when(ctx)
+                : (action.when ?? true);
+            return {
+              ...action,
+              disabled: shouldOpenInActiveView
+                ? component.model.pageId === ctx.store.id
+                : false,
+              when: allowed,
+              run: (_ctx: ToolbarContext) =>
+                component.open({
+                  openMode: action.id as OpenDocMode,
+                }),
+            };
+          })
+          .filter(action => {
+            if (typeof action.when === 'function') return action.when(ctx);
+            return action.when ?? true;
+          });
+
+        return html`
+          <editor-menu-button
+            .contentPadding="${'8px'}"
+            .button=${html`
+              <editor-icon-button aria-label="Open doc" .tooltip=${'Open doc'}>
+                ${OpenInNewIcon()} ${ArrowDownSmallIcon()}
+              </editor-icon-button>
+            `}
+          >
+            <div data-size="small" data-orientation="vertical">
+              ${repeat(
+                actions,
+                action => action.id,
+                ({ label, icon, run, disabled }) => html`
+                  <editor-menu-action
+                    aria-label=${ifDefined(label)}
+                    ?disabled=${ifDefined(
+                      typeof disabled === 'function' ? disabled(ctx) : disabled
+                    )}
+                    @click=${() => run?.(ctx)}
+                  >
+                    ${icon}<span class="label">${label}</span>
+                  </editor-menu-action>
+                `
+              )}
+            </div>
+          </editor-menu-button>
+        `;
+      },
+    } satisfies ToolbarActionGroup<ToolbarAction>,
+    {
+      id: 'a.conversions',
+      actions: [
+        {
+          id: 'inline',
+          label: 'Inline view',
+          run(ctx) {
+            const component = ctx.getCurrentBlockComponentBy(
+              BlockSelection,
+              EmbedSyncedDocBlockComponent
+            );
+            component?.covertToInline();
+
+            // Clears
+            ctx.reset();
+            ctx.select('note');
+
+            ctx.track('SelectedView', {
+              ...trackBaseProps,
+              control: 'select view',
+              type: 'inline view',
+            });
+          },
+        },
+        {
+          id: 'card',
+          label: 'Card view',
+          run(ctx) {
+            const component = ctx.getCurrentBlockComponentBy(
+              BlockSelection,
+              EmbedSyncedDocBlockComponent
+            );
+            component?.convertToCard();
+
+            ctx.track('SelectedView', {
+              ...trackBaseProps,
+              control: 'select view',
+              type: 'card view',
+            });
+          },
+        },
+        {
+          id: 'embed',
+          label: 'Embed view',
+          disabled: true,
+        },
+      ],
+      content(ctx) {
+        const model = ctx.getCurrentModelByType(
+          BlockSelection,
+          EmbedSyncedDocModel
+        );
+        if (!model) return null;
+
+        const actions = this.actions.map(action => ({ ...action }));
+
+        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$=${signal(actions[2].label)}
+          ></affine-view-dropdown-menu>`
+        )}`;
+      },
+    } satisfies ToolbarActionGroup<ToolbarAction>,
+    {
+      id: 'b.caption',
+      tooltip: 'Caption',
+      icon: CaptionIcon(),
+      run(ctx) {
+        const component = ctx.getCurrentBlockComponentBy(
+          BlockSelection,
+          EmbedSyncedDocBlockComponent
+        );
+        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) {
+            const model = ctx.getCurrentModelBy(BlockSelection);
+            if (!model) return;
+
+            const slice = Slice.fromModels(ctx.store, [model]);
+            ctx.clipboard
+              .copySlice(slice)
+              .then(() => toast(ctx.host, 'Copied to clipboard'))
+              .catch(console.error);
+          },
+        },
+        {
+          id: 'duplicate',
+          label: 'Duplicate',
+          icon: DuplicateIcon(),
+          run(ctx) {
+            const model = ctx.getCurrentModelBy(BlockSelection);
+            if (!model) return;
+
+            const { flavour, parent } = model;
+            const props = getBlockProps(model);
+            const index = parent?.children.indexOf(model);
+
+            ctx.store.addBlock(flavour, props, parent, index);
+          },
+        },
+      ],
+    },
+    {
+      placement: ActionPlacement.More,
+      id: 'c.delete',
+      label: 'Delete',
+      icon: DeleteIcon(),
+      variant: 'destructive',
+      run(ctx) {
+        const model = ctx.getCurrentModelBy(BlockSelection);
+        if (!model) return;
+
+        ctx.store.deleteBlock(model);
+
+        // Clears
+        ctx.select('note');
+        ctx.reset();
+      },
+    },
+  ],
+} as const satisfies ToolbarModuleConfig;

blocksuite/affine/block-embed/src/embed-synced-doc-block/embed-synced-doc-block.ts

@@ -291,15 +291,18 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
     }
     const index = parent.children.indexOf(this.model);
 
-    doc.addBlock(
+    const blockId = doc.addBlock(
       'affine:embed-linked-doc',
       { caption, ...this.referenceInfo, ...aliasInfo },
       parent,
       index
     );
 
-    this.std.selection.setGroup('note', []);
     doc.deleteBlock(this.model);
+
+    this.std.selection.setGroup('note', [
+      this.std.selection.create(BlockSelection, { blockId }),
+    ]);
   };
 
   covertToInline = () => {
@@ -469,7 +472,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
   }
 
   private _selectBlock() {
-    const selectionManager = this.host.selection;
+    const selectionManager = this.std.selection;
     const blockSelection = selectionManager.create(BlockSelection, {
       blockId: this.blockId,
     });

blocksuite/affine/block-embed/src/embed-synced-doc-block/embed-synced-doc-spec.ts

@@ -1,17 +1,30 @@
-import { BlockViewExtension, FlavourExtension } from '@blocksuite/block-std';
+import { EmbedSyncedDocBlockSchema } from '@blocksuite/affine-model';
+import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
+import {
+  BlockServiceIdentifier,
+  BlockViewExtension,
+  FlavourExtension,
+} from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
-import { EmbedSyncedDocBlockAdapterExtensions } from './adapters/extension.js';
-import { EmbedSyncedDocBlockService } from './embed-synced-doc-service.js';
+import { EmbedSyncedDocBlockAdapterExtensions } from './adapters/extension';
+import { builtinToolbarConfig } from './configs/toolbar';
+import { EmbedSyncedDocBlockService } from './embed-synced-doc-service';
+
+const flavour = EmbedSyncedDocBlockSchema.model.flavour;
 
 export const EmbedSyncedDocBlockSpec: ExtensionType[] = [
-  FlavourExtension('affine:embed-synced-doc'),
+  FlavourExtension(flavour),
   EmbedSyncedDocBlockService,
-  BlockViewExtension('affine:embed-synced-doc', model => {
+  BlockViewExtension(flavour, model => {
     return model.parent?.flavour === 'affine:surface'
       ? literal`affine-embed-edgeless-synced-doc-block`
       : literal`affine-embed-synced-doc-block`;
   }),
   EmbedSyncedDocBlockAdapterExtensions,
+  ToolbarModuleExtension({
+    id: BlockServiceIdentifier(flavour),
+    config: builtinToolbarConfig,
+  }),
 ].flat();

blocksuite/affine/block-embed/src/embed-youtube-block/embed-youtube-spec.ts

@@ -1,21 +1,35 @@
-import { BlockViewExtension, FlavourExtension } from '@blocksuite/block-std';
+import { EmbedYoutubeBlockSchema } from '@blocksuite/affine-model';
+import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
+import {
+  BlockServiceIdentifier,
+  BlockViewExtension,
+  FlavourExtension,
+} from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
-import { EmbedYoutubeBlockAdapterExtensions } from './adapters/extension.js';
+import { createBuiltinToolbarConfigForExternal } from '../configs/toolbar';
+import { EmbedYoutubeBlockAdapterExtensions } from './adapters/extension';
+import { EmbedYoutubeBlockComponent } from './embed-youtube-block';
 import {
   EmbedYoutubeBlockOptionConfig,
   EmbedYoutubeBlockService,
-} from './embed-youtube-service.js';
+} from './embed-youtube-service';
+
+const flavour = EmbedYoutubeBlockSchema.model.flavour;
 
 export const EmbedYoutubeBlockSpec: ExtensionType[] = [
-  FlavourExtension('affine:embed-youtube'),
+  FlavourExtension(flavour),
   EmbedYoutubeBlockService,
-  BlockViewExtension('affine:embed-youtube', model => {
+  BlockViewExtension(flavour, model => {
     return model.parent?.flavour === 'affine:surface'
       ? literal`affine-embed-edgeless-youtube-block`
       : literal`affine-embed-youtube-block`;
   }),
   EmbedYoutubeBlockAdapterExtensions,
   EmbedYoutubeBlockOptionConfig,
+  ToolbarModuleExtension({
+    id: BlockServiceIdentifier(flavour),
+    config: createBuiltinToolbarConfigForExternal(EmbedYoutubeBlockComponent),
+  }),
 ].flat();

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

@@ -9,11 +9,14 @@ import { EmbedSyncedDocBlockSpec } from './embed-synced-doc-block';
 import { EmbedYoutubeBlockSpec } from './embed-youtube-block';
 
 export const EmbedExtensions: ExtensionType[] = [
+  // External embed blocks
   EmbedFigmaBlockSpec,
   EmbedGithubBlockSpec,
-  EmbedHtmlBlockSpec,
   EmbedLoomBlockSpec,
   EmbedYoutubeBlockSpec,
+
+  // Internal embed blocks
+  EmbedHtmlBlockSpec,
   EmbedLinkedDocBlockSpec,
   EmbedSyncedDocBlockSpec,
 ].flat();
@@ -22,7 +25,7 @@ export { createEmbedBlockHtmlAdapterMatcher } from './common/adapters/html';
 export { createEmbedBlockMarkdownAdapterMatcher } from './common/adapters/markdown';
 export { createEmbedBlockPlainTextAdapterMatcher } from './common/adapters/plain-text';
 export { EmbedBlockComponent } from './common/embed-block-element';
-export { insertEmbedCard } from './common/insert-embed-card.js';
+export { insertEmbedCard } from './common/insert-embed-card';
 export * from './common/render-linked-doc';
 export { toEdgelessEmbedBlock } from './common/to-edgeless-embed-block';
 export * from './common/utils';
@@ -33,3 +36,4 @@ export * from './embed-linked-doc-block';
 export * from './embed-loom-block';
 export * from './embed-synced-doc-block';
 export * from './embed-youtube-block';
+export * from './types';

blocksuite/affine/block-embed/src/types.ts

@@ -0,0 +1,33 @@
+import type { BlockComponent } from '@blocksuite/block-std';
+
+import { EmbedFigmaBlockComponent } from './embed-figma-block';
+import { EmbedGithubBlockComponent } from './embed-github-block';
+import type { EmbedLinkedDocBlockComponent } from './embed-linked-doc-block';
+import { EmbedLoomBlockComponent } from './embed-loom-block';
+import type { EmbedSyncedDocBlockComponent } from './embed-synced-doc-block';
+import { EmbedYoutubeBlockComponent } from './embed-youtube-block';
+
+export type ExternalEmbedBlockComponent =
+  | EmbedFigmaBlockComponent
+  | EmbedGithubBlockComponent
+  | EmbedLoomBlockComponent
+  | EmbedYoutubeBlockComponent;
+
+export type InternalEmbedBlockComponent =
+  | EmbedLinkedDocBlockComponent
+  | EmbedSyncedDocBlockComponent;
+
+export type LinkableEmbedBlockComponent =
+  | ExternalEmbedBlockComponent
+  | InternalEmbedBlockComponent;
+
+export function isExternalEmbedBlockComponent(
+  block: BlockComponent
+): block is ExternalEmbedBlockComponent {
+  return (
+    block instanceof EmbedFigmaBlockComponent ||
+    block instanceof EmbedGithubBlockComponent ||
+    block instanceof EmbedLoomBlockComponent ||
+    block instanceof EmbedYoutubeBlockComponent
+  );
+}