refactor(editor): edgeless image toolbar config extension (#10718)

blocksuite/affine/blocks/block-image/src/configs/toolbar.ts

@@ -0,0 +1,58 @@
+import { ImageBlockModel } from '@blocksuite/affine-model';
+import {
+  type ToolbarModuleConfig,
+  ToolbarModuleExtension,
+} from '@blocksuite/affine-shared/services';
+import { BlockFlavourIdentifier } from '@blocksuite/block-std';
+import { CaptionIcon, DownloadIcon } from '@blocksuite/icons/lit';
+import type { ExtensionType } from '@blocksuite/store';
+
+import { ImageEdgelessBlockComponent } from '../image-edgeless-block';
+
+const trackBaseProps = {
+  category: 'image',
+  type: 'card view',
+};
+
+const builtinSurfaceToolbarConfig = {
+  actions: [
+    {
+      id: 'a.download',
+      tooltip: 'Download',
+      icon: DownloadIcon(),
+      run(ctx) {
+        const block = ctx.getCurrentBlockByType(ImageEdgelessBlockComponent);
+        block?.download();
+      },
+    },
+    {
+      id: 'b.caption',
+      tooltip: 'Caption',
+      icon: CaptionIcon(),
+      run(ctx) {
+        const block = ctx.getCurrentBlockByType(ImageEdgelessBlockComponent);
+        block?.captionEditor?.show();
+
+        ctx.track('OpenedCaptionEditor', {
+          ...trackBaseProps,
+          control: 'add caption',
+        });
+      },
+    },
+  ],
+
+  when: ctx => ctx.getSurfaceModelsByType(ImageBlockModel).length === 1,
+} as const satisfies ToolbarModuleConfig;
+
+export const createBuiltinToolbarConfigExtension = (
+  flavour: string
+): ExtensionType[] => {
+  const name = flavour.split(':').pop();
+
+  return [
+    ToolbarModuleExtension({
+      id: BlockFlavourIdentifier(`affine:surface:${name}`),
+      config: builtinSurfaceToolbarConfig,
+    }),
+  ];
+};

blocksuite/affine/blocks/block-image/src/image-spec.ts

@@ -1,3 +1,4 @@
+import { ImageBlockSchema } from '@blocksuite/affine-model';
 import { SlashMenuConfigExtension } from '@blocksuite/affine-widget-slash-menu';
 import {
   BlockViewExtension,
@@ -8,14 +9,15 @@ import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
 import { ImageBlockAdapterExtensions } from './adapters/extension';
-import { imageSlashMenuConfig } from './configs/slash-menu.js';
+import { imageSlashMenuConfig } from './configs/slash-menu';
+import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
 import { ImageProxyService } from './image-proxy-service';
 import { ImageBlockService, ImageDropOption } from './image-service';
 
-const flavour = 'affine:image';
+const flavour = ImageBlockSchema.model.flavour;
 
 export const imageToolbarWidget = WidgetViewExtension(
-  'affine:image',
+  flavour,
   'imageToolbar',
   literal`affine-image-toolbar-widget`
 );
@@ -35,7 +37,8 @@ export const ImageBlockSpec: ExtensionType[] = [
   imageToolbarWidget,
   ImageDropOption,
   ImageBlockAdapterExtensions,
-  SlashMenuConfigExtension('affine:image', imageSlashMenuConfig),
+  createBuiltinToolbarConfigExtension(flavour),
+  SlashMenuConfigExtension(flavour, imageSlashMenuConfig),
 ].flat();
 
 export const ImageStoreSpec: ExtensionType[] = [ImageProxyService];