From 4e80ecd59119f0d470498d2839b5fd8342d92864 Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Fri, 7 Mar 2025 05:48:39 +0000
Subject: [PATCH] refactor(editor): image slash menu config extension (#10674)

---
 .../block-callout/src/configs/slash-menu.ts   |  8 +++--
 blocksuite/affine/block-image/package.json    |  1 +
 .../block-image/src/configs/slash-menu.ts     | 32 +++++++++++++++++++
 .../src/configs/tooltips.ts}                  |  0
 .../affine/block-image/src/image-spec.ts      |  3 ++
 blocksuite/affine/block-image/tsconfig.json   |  1 +
 .../affine/widget-slash-menu/package.json     |  1 -
 .../affine/widget-slash-menu/src/config.ts    | 20 ------------
 .../widget-slash-menu/src/tooltips/index.ts   |  6 ----
 .../affine/widget-slash-menu/tsconfig.json    |  1 -
 tools/utils/src/workspace.gen.ts              |  2 +-
 yarn.lock                                     |  2 +-
 12 files changed, 45 insertions(+), 32 deletions(-)
 create mode 100644 blocksuite/affine/block-image/src/configs/slash-menu.ts
 rename blocksuite/affine/{widget-slash-menu/src/tooltips/photo.ts => block-image/src/configs/tooltips.ts} (100%)

diff --git a/blocksuite/affine/block-callout/src/configs/slash-menu.ts b/blocksuite/affine/block-callout/src/configs/slash-menu.ts
index 048eca860d..e4d984b395 100644
--- a/blocksuite/affine/block-callout/src/configs/slash-menu.ts
+++ b/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;
diff --git a/blocksuite/affine/block-image/package.json b/blocksuite/affine/block-image/package.json
index c172e6c8b5..7ef9c19d67 100644
--- a/blocksuite/affine/block-image/package.json
+++ b/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",
diff --git a/blocksuite/affine/block-image/src/configs/slash-menu.ts b/blocksuite/affine/block-image/src/configs/slash-menu.ts
new file mode 100644
index 0000000000..6f495d7b39
--- /dev/null
+++ b/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);
+      },
+    },
+  ],
+};
diff --git a/blocksuite/affine/widget-slash-menu/src/tooltips/photo.ts b/blocksuite/affine/block-image/src/configs/tooltips.ts
similarity index 100%
rename from blocksuite/affine/widget-slash-menu/src/tooltips/photo.ts
rename to blocksuite/affine/block-image/src/configs/tooltips.ts
diff --git a/blocksuite/affine/block-image/src/image-spec.ts b/blocksuite/affine/block-image/src/image-spec.ts
index ec020e9a3c..cd80484d25 100644
--- a/blocksuite/affine/block-image/src/image-spec.ts
+++ b/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];
diff --git a/blocksuite/affine/block-image/tsconfig.json b/blocksuite/affine/block-image/tsconfig.json
index 9c4f45635a..add7ccdadf 100644
--- a/blocksuite/affine/block-image/tsconfig.json
+++ b/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" },
diff --git a/blocksuite/affine/widget-slash-menu/package.json b/blocksuite/affine/widget-slash-menu/package.json
index d88bb24d4e..d7e5023fc7 100644
--- a/blocksuite/affine/widget-slash-menu/package.json
+++ b/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:*",
diff --git a/blocksuite/affine/widget-slash-menu/src/config.ts b/blocksuite/affine/widget-slash-menu/src/config.ts
index 47571b27b9..f364f54a34 100644
--- a/blocksuite/affine/widget-slash-menu/src/config.ts
+++ b/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.',
diff --git a/blocksuite/affine/widget-slash-menu/src/tooltips/index.ts b/blocksuite/affine/widget-slash-menu/src/tooltips/index.ts
index a8b2b2a91e..11ab92f2be 100644
--- a/blocksuite/affine/widget-slash-menu/src/tooltips/index.ts
+++ b/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',
diff --git a/blocksuite/affine/widget-slash-menu/tsconfig.json b/blocksuite/affine/widget-slash-menu/tsconfig.json
index 2c607f862c..35fb21bd24 100644
--- a/blocksuite/affine/widget-slash-menu/tsconfig.json
+++ b/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" },
diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts
index 9a868b04be..d9b8bbd525 100644
--- a/tools/utils/src/workspace.gen.ts
+++ b/tools/utils/src/workspace.gen.ts
@@ -169,6 +169,7 @@ export const PackageList = [
       'blocksuite/affine/components',
       'blocksuite/affine/model',
       'blocksuite/affine/shared',
+      'blocksuite/affine/widget-slash-menu',
       'blocksuite/framework/block-std',
       'blocksuite/framework/global',
       'blocksuite/framework/inline',
@@ -490,7 +491,6 @@ export const PackageList = [
     workspaceDependencies: [
       'blocksuite/affine/block-attachment',
       'blocksuite/affine/block-embed',
-      'blocksuite/affine/block-image',
       'blocksuite/affine/block-latex',
       'blocksuite/affine/block-note',
       'blocksuite/affine/block-surface',
diff --git a/yarn.lock b/yarn.lock
index e12dfae01a..b3c1290084 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2476,6 +2476,7 @@ __metadata:
     "@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": "npm:^2.2.1"
@@ -3034,7 +3035,6 @@ __metadata:
   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:*"