From ea20751b9be04962090f9eccaea28b363670d8f5 Mon Sep 17 00:00:00 2001 From: L-Sun Date: Fri, 7 Mar 2025 05:48:41 +0000 Subject: [PATCH] refactor(editor): attachment slash menu config extension (#10676) --- .../affine/block-attachment/package.json | 1 + .../block-attachment/src/attachment-spec.ts | 3 + .../src/configs/slash-menu.ts | 73 ++++++++++++++++ .../src/configs/tooltips.ts} | 41 +++++++++ .../affine/block-attachment/tsconfig.json | 1 + .../affine/widget-slash-menu/package.json | 1 - .../affine/widget-slash-menu/src/config.ts | 87 +------------------ .../src/tooltips/attachment.ts | 41 --------- .../widget-slash-menu/src/tooltips/index.ts | 12 --- .../affine/widget-slash-menu/tsconfig.json | 1 - tools/utils/src/workspace.gen.ts | 2 +- yarn.lock | 2 +- 12 files changed, 122 insertions(+), 143 deletions(-) create mode 100644 blocksuite/affine/block-attachment/src/configs/slash-menu.ts rename blocksuite/affine/{widget-slash-menu/src/tooltips/pdf.ts => block-attachment/src/configs/tooltips.ts} (54%) delete mode 100644 blocksuite/affine/widget-slash-menu/src/tooltips/attachment.ts diff --git a/blocksuite/affine/block-attachment/package.json b/blocksuite/affine/block-attachment/package.json index 4c33833d7c..686c48a8ba 100644 --- a/blocksuite/affine/block-attachment/package.json +++ b/blocksuite/affine/block-attachment/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-attachment/src/attachment-spec.ts b/blocksuite/affine/block-attachment/src/attachment-spec.ts index 40df90ab0a..9cbeb5333e 100644 --- a/blocksuite/affine/block-attachment/src/attachment-spec.ts +++ b/blocksuite/affine/block-attachment/src/attachment-spec.ts @@ -1,5 +1,6 @@ import { AttachmentBlockSchema } from '@blocksuite/affine-model'; import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services'; +import { SlashMenuConfigExtension } from '@blocksuite/affine-widget-slash-menu'; import { BlockFlavourIdentifier, BlockViewExtension, @@ -10,6 +11,7 @@ import { literal } from 'lit/static-html.js'; import { AttachmentBlockNotionHtmlAdapterExtension } from './adapters/notion-html.js'; import { AttachmentDropOption } from './attachment-service.js'; +import { attachmentSlashMenuConfig } from './configs/slash-menu.js'; import { builtinToolbarConfig } from './configs/toolbar'; import { AttachmentEmbedConfigExtension, @@ -33,4 +35,5 @@ export const AttachmentBlockSpec: ExtensionType[] = [ id: BlockFlavourIdentifier(flavour), config: builtinToolbarConfig, }), + SlashMenuConfigExtension(flavour, attachmentSlashMenuConfig), ]; diff --git a/blocksuite/affine/block-attachment/src/configs/slash-menu.ts b/blocksuite/affine/block-attachment/src/configs/slash-menu.ts new file mode 100644 index 0000000000..09bdb6ba2c --- /dev/null +++ b/blocksuite/affine/block-attachment/src/configs/slash-menu.ts @@ -0,0 +1,73 @@ +import { FileSizeLimitService } from '@blocksuite/affine-shared/services'; +import { openFileOrFiles } from '@blocksuite/affine-shared/utils'; +import { type SlashMenuConfig } from '@blocksuite/affine-widget-slash-menu'; +import { ExportToPdfIcon, FileIcon } from '@blocksuite/icons/lit'; + +import { addSiblingAttachmentBlocks } from '../utils'; +import { AttachmentTooltip, PDFTooltip } from './tooltips'; + +export const attachmentSlashMenuConfig: SlashMenuConfig = { + items: [ + { + name: 'Attachment', + description: 'Attach a file to document.', + icon: FileIcon(), + tooltip: { + figure: AttachmentTooltip, + caption: 'Attachment', + }, + searchAlias: ['file'], + group: '4_Content & Media@3', + when: ({ model }) => + model.doc.schema.flavourSchemaMap.has('affine:attachment'), + action: ({ std, model }) => { + (async () => { + const file = await openFileOrFiles(); + if (!file) return; + const maxFileSize = std.store.get(FileSizeLimitService).maxFileSize; + await addSiblingAttachmentBlocks( + std.host, + [file], + maxFileSize, + model + ); + if (model.text?.length === 0) { + std.store.deleteBlock(model); + } + })().catch(console.error); + }, + }, + { + name: 'PDF', + description: 'Upload a PDF to document.', + icon: ExportToPdfIcon(), + tooltip: { + figure: PDFTooltip, + caption: 'PDF', + }, + group: '4_Content & Media@4', + when: ({ model }) => + model.doc.schema.flavourSchemaMap.has('affine:attachment'), + action: ({ std, model }) => { + (async () => { + const file = await openFileOrFiles(); + if (!file) return; + + const maxFileSize = std.store.get(FileSizeLimitService).maxFileSize; + + await addSiblingAttachmentBlocks( + std.host, + [file], + maxFileSize, + model, + 'after', + true + ); + if (model.text?.length === 0) { + std.store.deleteBlock(model); + } + })().catch(console.error); + }, + }, + ], +}; diff --git a/blocksuite/affine/widget-slash-menu/src/tooltips/pdf.ts b/blocksuite/affine/block-attachment/src/configs/tooltips.ts similarity index 54% rename from blocksuite/affine/widget-slash-menu/src/tooltips/pdf.ts rename to blocksuite/affine/block-attachment/src/configs/tooltips.ts index 3f37191846..77b4c2074a 100644 --- a/blocksuite/affine/widget-slash-menu/src/tooltips/pdf.ts +++ b/blocksuite/affine/block-attachment/src/configs/tooltips.ts @@ -1,4 +1,45 @@ import { html } from 'lit'; +// prettier-ignore +export const AttachmentTooltip = html` + + + + + + + + + + + + + + + + + +Rickroll.mp3 + +Attach a file. + + + + + + + + + + + + + + + + + +`; + // prettier-ignore export const PDFTooltip = html` diff --git a/blocksuite/affine/block-attachment/tsconfig.json b/blocksuite/affine/block-attachment/tsconfig.json index 3f52439ca0..606d0cc818 100644 --- a/blocksuite/affine/block-attachment/tsconfig.json +++ b/blocksuite/affine/block-attachment/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 d7e5023fc7..2de2b2d46d 100644 --- a/blocksuite/affine/widget-slash-menu/package.json +++ b/blocksuite/affine/widget-slash-menu/package.json @@ -13,7 +13,6 @@ "author": "toeverything", "license": "MIT", "dependencies": { - "@blocksuite/affine-block-attachment": "workspace:*", "@blocksuite/affine-block-embed": "workspace:*", "@blocksuite/affine-block-latex": "workspace:*", "@blocksuite/affine-block-note": "workspace:*", diff --git a/blocksuite/affine/widget-slash-menu/src/config.ts b/blocksuite/affine/widget-slash-menu/src/config.ts index f364f54a34..3fb0e55557 100644 --- a/blocksuite/affine/widget-slash-menu/src/config.ts +++ b/blocksuite/affine/widget-slash-menu/src/config.ts @@ -1,4 +1,3 @@ -import { addSiblingAttachmentBlocks } from '@blocksuite/affine-block-attachment'; import { insertLatexBlockCommand } from '@blocksuite/affine-block-latex'; import { getSurfaceBlock } from '@blocksuite/affine-block-surface'; import { insertSurfaceRefBlockCommand } from '@blocksuite/affine-block-surface-ref'; @@ -20,26 +19,19 @@ import { getTextSelectionCommand, } from '@blocksuite/affine-shared/commands'; import { REFERENCE_NODE } from '@blocksuite/affine-shared/consts'; -import { FileSizeLimitService } from '@blocksuite/affine-shared/services'; -import { - createDefaultDoc, - openFileOrFiles, -} from '@blocksuite/affine-shared/utils'; +import { createDefaultDoc } from '@blocksuite/affine-shared/utils'; import { ArrowDownBigIcon, ArrowUpBigIcon, CopyIcon, DeleteIcon, DualLinkIcon, - ExportToPdfIcon, FigmaDuotoneIcon, - FileIcon, FrameIcon, GithubDuotoneIcon, GroupingIcon, HeadingsIcon, LinkedPageIcon, - LinkIcon, LoomLogoDuotoneIcon, NowIcon, PlusIcon, @@ -188,84 +180,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = { // --------------------------------------------------------- // { groupName: 'Content & Media' }, - { - name: 'Link', - description: 'Add a bookmark for reference.', - icon: LinkIcon(), - tooltip: slashMenuToolTips['Link'], - group: `4_Content & Media@${index++}`, - when: ({ model }) => - model.doc.schema.flavourSchemaMap.has('affine:bookmark'), - action: ({ std, model }) => { - const { host } = std; - const parentModel = host.doc.getParent(model); - if (!parentModel) { - return; - } - const index = parentModel.children.indexOf(model) + 1; - toggleEmbedCardCreateModal( - host, - 'Links', - 'The added link will be displayed as a card view.', - { mode: 'page', parentModel, index } - ) - .then(() => { - tryRemoveEmptyLine(model); - }) - .catch(console.error); - }, - }, - { - name: 'Attachment', - description: 'Attach a file to document.', - icon: FileIcon(), - tooltip: slashMenuToolTips['Attachment'], - searchAlias: ['file'], - group: `4_Content & Media@${index++}`, - when: ({ model }) => - model.doc.schema.flavourSchemaMap.has('affine:attachment'), - action: ({ std, model }) => { - (async () => { - const file = await openFileOrFiles(); - if (!file) return; - const maxFileSize = std.store.get(FileSizeLimitService).maxFileSize; - await addSiblingAttachmentBlocks( - std.host, - [file], - maxFileSize, - model - ); - tryRemoveEmptyLine(model); - })().catch(console.error); - }, - }, - { - name: 'PDF', - description: 'Upload a PDF to document.', - icon: ExportToPdfIcon(), - tooltip: slashMenuToolTips['PDF'], - group: `4_Content & Media@${index++}`, - when: ({ model }) => - model.doc.schema.flavourSchemaMap.has('affine:attachment'), - action: ({ std, model }) => { - (async () => { - const file = await openFileOrFiles(); - if (!file) return; - const maxFileSize = std.store.get(FileSizeLimitService).maxFileSize; - - await addSiblingAttachmentBlocks( - std.host, - [file], - maxFileSize, - model, - 'after', - true - ); - tryRemoveEmptyLine(model); - })().catch(console.error); - }, - }, { name: 'YouTube', description: 'Embed a YouTube video.', diff --git a/blocksuite/affine/widget-slash-menu/src/tooltips/attachment.ts b/blocksuite/affine/widget-slash-menu/src/tooltips/attachment.ts deleted file mode 100644 index 19d3841bcf..0000000000 --- a/blocksuite/affine/widget-slash-menu/src/tooltips/attachment.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { html } from 'lit'; -// prettier-ignore -export const AttachmentTooltip = html` - - - - - - - - - - - - - - - - - -Rickroll.mp3 - -Attach a file. - - - - - - - - - - - - - - - - - -`; diff --git a/blocksuite/affine/widget-slash-menu/src/tooltips/index.ts b/blocksuite/affine/widget-slash-menu/src/tooltips/index.ts index eff93623b1..b107500dd6 100644 --- a/blocksuite/affine/widget-slash-menu/src/tooltips/index.ts +++ b/blocksuite/affine/widget-slash-menu/src/tooltips/index.ts @@ -1,5 +1,4 @@ import type { SlashMenuTooltip } from '../types'; -import { AttachmentTooltip } from './attachment'; import { BoldTextTooltip } from './bold-text'; import { BulletedListTooltip } from './bulleted-list'; import { CodeBlockTooltip } from './code-block'; @@ -23,7 +22,6 @@ import { MoveUpTooltip } from './move-up'; import { NewDocTooltip } from './new-doc'; import { NowTooltip } from './now'; import { NumberedListTooltip } from './numbered-list'; -import { PDFTooltip } from './pdf'; import { QuoteTooltip } from './quote'; import { StrikethroughTooltip } from './strikethrough'; import { TextTooltip } from './text'; @@ -125,16 +123,6 @@ export const slashMenuToolTips: Record = { caption: 'Link Doc', }, - Attachment: { - figure: AttachmentTooltip, - caption: 'Attachment', - }, - - PDF: { - figure: PDFTooltip, - caption: 'PDF', - }, - Github: { figure: GithubRepoTooltip, caption: 'GitHub Repo', diff --git a/blocksuite/affine/widget-slash-menu/tsconfig.json b/blocksuite/affine/widget-slash-menu/tsconfig.json index 35fb21bd24..ea6d81ff3c 100644 --- a/blocksuite/affine/widget-slash-menu/tsconfig.json +++ b/blocksuite/affine/widget-slash-menu/tsconfig.json @@ -7,7 +7,6 @@ }, "include": ["./src"], "references": [ - { "path": "../block-attachment" }, { "path": "../block-embed" }, { "path": "../block-latex" }, { "path": "../block-note" }, diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts index 68e57e7bec..7c3d2acc85 100644 --- a/tools/utils/src/workspace.gen.ts +++ b/tools/utils/src/workspace.gen.ts @@ -22,6 +22,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 = [ location: 'blocksuite/affine/widget-slash-menu', name: '@blocksuite/affine-widget-slash-menu', workspaceDependencies: [ - 'blocksuite/affine/block-attachment', 'blocksuite/affine/block-embed', 'blocksuite/affine/block-latex', 'blocksuite/affine/block-note', diff --git a/yarn.lock b/yarn.lock index aace16ca52..3dc4c108b1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2224,6 +2224,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: version: 0.0.0-use.local resolution: "@blocksuite/affine-widget-slash-menu@workspace:blocksuite/affine/widget-slash-menu" dependencies: - "@blocksuite/affine-block-attachment": "workspace:*" "@blocksuite/affine-block-embed": "workspace:*" "@blocksuite/affine-block-latex": "workspace:*" "@blocksuite/affine-block-note": "workspace:*"