refactor(editor): callout slash menu config extension (#10672)

blocksuite/affine/block-callout/package.json

@@ -17,8 +17,10 @@
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/affine-widget-slash-menu": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.2.1",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
     "@emoji-mart/data": "^1.2.1",

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

@@ -1,8 +1,12 @@
+import { SlashMenuConfigExtension } from '@blocksuite/affine-widget-slash-menu';
 import { BlockViewExtension, FlavourExtension } from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
+import { calloutSlashMenuConfig } from './configs/slash-menu';
+
 export const CalloutBlockSpec: ExtensionType[] = [
   FlavourExtension('affine:callout'),
   BlockViewExtension('affine:callout', literal`affine-callout`),
+  SlashMenuConfigExtension('affine:callout', calloutSlashMenuConfig),
 ];

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

@@ -0,0 +1,52 @@
+import { CalloutBlockModel } from '@blocksuite/affine-model';
+import { focusBlockEnd } from '@blocksuite/affine-shared/commands';
+import { FeatureFlagService } from '@blocksuite/affine-shared/services';
+import {
+  findAncestorModel,
+  matchModels,
+} from '@blocksuite/affine-shared/utils';
+import { type SlashMenuConfig } from '@blocksuite/affine-widget-slash-menu';
+import { FontIcon } from '@blocksuite/icons/lit';
+
+export const calloutSlashMenuConfig: SlashMenuConfig = {
+  disableWhen: ({ model }) => {
+    return (
+      findAncestorModel(model, ancestor =>
+        matchModels(ancestor, [CalloutBlockModel])
+      ) !== null
+    );
+  },
+  items: [
+    {
+      name: 'Callout',
+      description: 'Let your words stand out.',
+      icon: FontIcon(),
+      searchAlias: ['callout'],
+      group: '0_Basic@9',
+      when: ({ std }) => {
+        return std.get(FeatureFlagService).getFlag('enable_callout');
+      },
+      action: ({ model, std }) => {
+        const { doc } = model;
+        const parent = doc.getParent(model);
+        if (!parent) return;
+
+        const index = parent.children.indexOf(model);
+        if (index === -1) return;
+        const calloutId = doc.addBlock('affine:callout', {}, parent, index + 1);
+        if (!calloutId) return;
+        const paragraphId = doc.addBlock('affine:paragraph', {}, calloutId);
+        if (!paragraphId) return;
+        std.host.updateComplete
+          .then(() => {
+            const paragraph = std.view.getBlock(paragraphId);
+            if (!paragraph) return;
+            std.command.exec(focusBlockEnd, {
+              focusBlock: paragraph,
+            });
+          })
+          .catch(console.error);
+      },
+    },
+  ],
+};

blocksuite/affine/block-callout/tsconfig.json

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

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

@@ -18,19 +18,16 @@ import {
   textFormatConfigs,
 } from '@blocksuite/affine-rich-text';
 import {
-  focusBlockEnd,
   getSelectedModelsCommand,
   getTextSelectionCommand,
 } from '@blocksuite/affine-shared/commands';
 import { REFERENCE_NODE } from '@blocksuite/affine-shared/consts';
 import {
-  FeatureFlagService,
   FileSizeLimitService,
   TelemetryProvider,
 } from '@blocksuite/affine-shared/services';
 import {
   createDefaultDoc,
-  findAncestorModel,
   openFileOrFiles,
 } from '@blocksuite/affine-shared/utils';
 import {
@@ -42,7 +39,6 @@ import {
   ExportToPdfIcon,
   FigmaDuotoneIcon,
   FileIcon,
-  FontIcon,
   FrameIcon,
   GithubDuotoneIcon,
   GroupingIcon,
@@ -79,13 +75,7 @@ let index = 0;
 
 export const defaultSlashMenuConfig: SlashMenuConfig = {
   disableWhen: ({ model }) => {
-    return (
-      ['affine:code'].includes(model.flavour) ||
-      !!findAncestorModel(
-        model,
-        ancestor => ancestor.flavour === 'affine:callout'
-      )
-    );
+    return model.flavour === 'affine:code';
   },
   items: [
     // TODO(@L-Sun): move this to rich-text when it has been remove from blocksuite/affine-components
@@ -116,38 +106,6 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
           }) satisfies SlashMenuActionItem
       ),
 
-    {
-      name: 'Callout',
-      description: 'Let your words stand out.',
-      icon: FontIcon(),
-      searchAlias: ['callout'],
-      group: `0_Basic@${index++}`,
-      when: ({ model }) => {
-        return model.doc.get(FeatureFlagService).getFlag('enable_callout');
-      },
-      action: ({ model, std }) => {
-        const { doc } = model;
-        const parent = doc.getParent(model);
-        if (!parent) return;
-
-        const index = parent.children.indexOf(model);
-        if (index === -1) return;
-        const calloutId = doc.addBlock('affine:callout', {}, parent, index + 1);
-        if (!calloutId) return;
-        const paragraphId = doc.addBlock('affine:paragraph', {}, calloutId);
-        if (!paragraphId) return;
-        std.host.updateComplete
-          .then(() => {
-            const paragraph = std.view.getBlock(paragraphId);
-            if (!paragraph) return;
-            std.command.exec(focusBlockEnd, {
-              focusBlock: paragraph,
-            });
-          })
-          .catch(console.error);
-      },
-    },
-
     {
       name: 'Inline equation',
       group: `0_Basic@${index++}`,

tools/utils/src/workspace.gen.ts

@@ -50,6 +50,7 @@ export const PackageList = [
       'blocksuite/affine/model',
       'blocksuite/affine/rich-text',
       'blocksuite/affine/shared',
+      'blocksuite/affine/widget-slash-menu',
       'blocksuite/framework/block-std',
       'blocksuite/framework/global',
       'blocksuite/framework/inline',

yarn.lock

@@ -2271,8 +2271,10 @@ __metadata:
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/affine-rich-text": "workspace:*"
     "@blocksuite/affine-shared": "workspace:*"
+    "@blocksuite/affine-widget-slash-menu": "workspace:*"
     "@blocksuite/block-std": "workspace:*"
     "@blocksuite/global": "workspace:*"
+    "@blocksuite/icons": "npm:^2.2.1"
     "@blocksuite/inline": "workspace:*"
     "@blocksuite/store": "workspace:*"
     "@emoji-mart/data": "npm:^1.2.1"