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

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

@@ -3,6 +3,7 @@ import { focusBlockEnd } from '@blocksuite/affine-shared/commands';
 import { FeatureFlagService } from '@blocksuite/affine-shared/services';
 import {
   findAncestorModel,
+  isInsideBlockByFlavour,
   matchModels,
 } from '@blocksuite/affine-shared/utils';
 import { type SlashMenuConfig } from '@blocksuite/affine-widget-slash-menu';
@@ -23,8 +24,11 @@ export const calloutSlashMenuConfig: SlashMenuConfig = {
       icon: FontIcon(),
       searchAlias: ['callout'],
       group: '0_Basic@9',
-      when: ({ std }) => {
-        return std.get(FeatureFlagService).getFlag('enable_callout');
+      when: ({ std, model }) => {
+        return (
+          std.get(FeatureFlagService).getFlag('enable_callout') &&
+          !isInsideBlockByFlavour(model.doc, model, 'affine:edgeless-text')
+        );
       },
       action: ({ model, std }) => {
         const { doc } = model;

blocksuite/affine/block-image/package.json

@@ -18,6 +18,7 @@
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/affine-widget-slash-menu": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/global": "workspace:*",
     "@blocksuite/icons": "^2.2.1",

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

blocksuite/affine/block-image/tsconfig.json

@@ -12,6 +12,7 @@
     { "path": "../components" },
     { "path": "../model" },
     { "path": "../shared" },
+    { "path": "../widget-slash-menu" },
     { "path": "../../framework/block-std" },
     { "path": "../../framework/global" },
     { "path": "../../framework/inline" },

blocksuite/affine/widget-slash-menu/package.json

@@ -15,7 +15,6 @@
   "dependencies": {
     "@blocksuite/affine-block-attachment": "workspace:*",
     "@blocksuite/affine-block-embed": "workspace:*",
-    "@blocksuite/affine-block-image": "workspace:*",
     "@blocksuite/affine-block-latex": "workspace:*",
     "@blocksuite/affine-block-note": "workspace:*",
     "@blocksuite/affine-block-surface": "workspace:*",

blocksuite/affine/widget-slash-menu/src/config.ts

@@ -1,5 +1,4 @@
 import { addSiblingAttachmentBlocks } from '@blocksuite/affine-block-attachment';
-import { insertImagesCommand } from '@blocksuite/affine-block-image';
 import { insertLatexBlockCommand } from '@blocksuite/affine-block-latex';
 import { getSurfaceBlock } from '@blocksuite/affine-block-surface';
 import { insertSurfaceRefBlockCommand } from '@blocksuite/affine-block-surface-ref';
@@ -39,7 +38,6 @@ import {
   GithubDuotoneIcon,
   GroupingIcon,
   HeadingsIcon,
-  ImageIcon,
   LinkedPageIcon,
   LinkIcon,
   LoomLogoDuotoneIcon,
@@ -190,24 +188,6 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
 
     // ---------------------------------------------------------
     // { groupName: 'Content & Media' },
-    {
-      name: 'Image',
-      description: 'Insert an image.',
-      icon: ImageIcon(),
-      tooltip: slashMenuToolTips['Image'],
-      group: `4_Content & Media@${index++}`,
-      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);
-      },
-    },
     {
       name: 'Link',
       description: 'Add a bookmark for reference.',

blocksuite/affine/widget-slash-menu/src/tooltips/index.ts

@@ -25,7 +25,6 @@ import { NewDocTooltip } from './new-doc';
 import { NowTooltip } from './now';
 import { NumberedListTooltip } from './numbered-list';
 import { PDFTooltip } from './pdf';
-import { PhotoTooltip } from './photo';
 import { QuoteTooltip } from './quote';
 import { StrikethroughTooltip } from './strikethrough';
 import { TextTooltip } from './text';
@@ -152,11 +151,6 @@ export const slashMenuToolTips: Record<string, SlashMenuTooltip> = {
     caption: 'YouTube Video',
   },
 
-  Image: {
-    figure: PhotoTooltip,
-    caption: 'Photo',
-  },
-
   'X (Twitter)': {
     figure: TweetTooltip,
     caption: 'Tweet',

blocksuite/affine/widget-slash-menu/tsconfig.json

@@ -9,7 +9,6 @@
   "references": [
     { "path": "../block-attachment" },
     { "path": "../block-embed" },
-    { "path": "../block-image" },
     { "path": "../block-latex" },
     { "path": "../block-note" },
     { "path": "../block-surface" },