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];

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

@@ -1,11 +0,0 @@
-import type { ToolbarModuleConfig } from '@blocksuite/affine-shared/services';
-
-export const builtinImageToolbarConfig = {
-  actions: [
-    {
-      id: 'a.test',
-      label: 'Image',
-      run() {},
-    },
-  ],
-} as const satisfies ToolbarModuleConfig;

blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/index.ts

@@ -6,7 +6,6 @@ import { builtinBrushToolbarConfig } from './brush';
 import { builtinConnectorToolbarConfig } from './connector';
 import { builtinFrameToolbarConfig } from './frame';
 import { builtinGroupToolbarConfig } from './group';
-import { builtinImageToolbarConfig } from './image';
 import { builtinMindmapToolbarConfig } from './mindmap';
 import { builtinMiscToolbarConfig } from './misc';
 import { builtinNoteToolbarConfig } from './note';
@@ -14,11 +13,6 @@ import { builtinShapeToolbarConfig } from './shape';
 import { builtinTextToolbarConfig } from './text';
 
 export const EdgelessElementToolbarExtension: ExtensionType[] = [
-  ToolbarModuleExtension({
-    id: BlockFlavourIdentifier('affine:surface:image'),
-    config: builtinImageToolbarConfig,
-  }),
-
   ToolbarModuleExtension({
     id: BlockFlavourIdentifier('affine:surface:brush'),
     config: builtinBrushToolbarConfig,