refactor(editor): image slash menu config extension (#10674)

blocksuite/affine/block-image/src/configs/slash-menu.ts

@@ -0,0 +1,32 @@
+import { getSelectedModelsCommand } from '@blocksuite/affine-shared/commands';
+import { type SlashMenuConfig } from '@blocksuite/affine-widget-slash-menu';
+import { ImageIcon } from '@blocksuite/icons/lit';
+
+import { insertImagesCommand } from '../commands';
+import { PhotoTooltip } from './tooltips';
+
+export const imageSlashMenuConfig: SlashMenuConfig = {
+  items: [
+    {
+      name: 'Image',
+      description: 'Insert an image.',
+      icon: ImageIcon(),
+      tooltip: {
+        figure: PhotoTooltip,
+        caption: 'Photo',
+      },
+      group: '4_Content & Media@1',
+      when: ({ model }) =>
+        model.doc.schema.flavourSchemaMap.has('affine:image'),
+      action: ({ std }) => {
+        const [success, ctx] = std.command
+          .chain()
+          .pipe(getSelectedModelsCommand)
+          .pipe(insertImagesCommand, { removeEmptyLine: true })
+          .run();
+
+        if (success) ctx.insertedImageIds.catch(console.error);
+      },
+    },
+  ],
+};

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

@@ -1,3 +1,4 @@
+import { SlashMenuConfigExtension } from '@blocksuite/affine-widget-slash-menu';
 import {
   BlockViewExtension,
   FlavourExtension,
@@ -7,6 +8,7 @@ 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 { ImageProxyService } from './image-proxy-service';
 import { ImageBlockService, ImageDropOption } from './image-service';
 
@@ -33,6 +35,7 @@ export const ImageBlockSpec: ExtensionType[] = [
   imageToolbarWidget,
   ImageDropOption,
   ImageBlockAdapterExtensions,
+  SlashMenuConfigExtension('affine:image', imageSlashMenuConfig),
 ].flat();
 
 export const ImageStoreSpec: ExtensionType[] = [ImageProxyService];