From 0a234fa26358d2a46624a6d8f053a35d1a6cedb7 Mon Sep 17 00:00:00 2001 From: L-Sun Date: Fri, 7 Mar 2025 04:24:09 +0000 Subject: [PATCH] refactor(editor): callout slash menu config extension (#10672) --- blocksuite/affine/block-callout/package.json | 2 + .../affine/block-callout/src/callout-spec.ts | 4 ++ .../block-callout/src/configs/slash-menu.ts | 52 +++++++++++++++++++ blocksuite/affine/block-callout/tsconfig.json | 1 + .../affine/widget-slash-menu/src/config.ts | 44 +--------------- tools/utils/src/workspace.gen.ts | 1 + yarn.lock | 2 + 7 files changed, 63 insertions(+), 43 deletions(-) create mode 100644 blocksuite/affine/block-callout/src/configs/slash-menu.ts diff --git a/blocksuite/affine/block-callout/package.json b/blocksuite/affine/block-callout/package.json index b57119c9e..c0678def9 100644 --- a/blocksuite/affine/block-callout/package.json +++ b/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", diff --git a/blocksuite/affine/block-callout/src/callout-spec.ts b/blocksuite/affine/block-callout/src/callout-spec.ts index 8f9cbe9d6..f4b047ac4 100644 --- a/blocksuite/affine/block-callout/src/callout-spec.ts +++ b/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), ]; diff --git a/blocksuite/affine/block-callout/src/configs/slash-menu.ts b/blocksuite/affine/block-callout/src/configs/slash-menu.ts new file mode 100644 index 000000000..048eca860 --- /dev/null +++ b/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); + }, + }, + ], +}; diff --git a/blocksuite/affine/block-callout/tsconfig.json b/blocksuite/affine/block-callout/tsconfig.json index c76a0cb85..170dff87e 100644 --- a/blocksuite/affine/block-callout/tsconfig.json +++ b/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" }, diff --git a/blocksuite/affine/widget-slash-menu/src/config.ts b/blocksuite/affine/widget-slash-menu/src/config.ts index 03fb0c8ee..1d7afd1a5 100644 --- a/blocksuite/affine/widget-slash-menu/src/config.ts +++ b/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++}`, diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts index 1a75310c5..ba2c339ec 100644 --- a/tools/utils/src/workspace.gen.ts +++ b/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', diff --git a/yarn.lock b/yarn.lock index 83586dfff..331315520 100644 --- a/yarn.lock +++ b/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"