refactor(editor): attachment slash menu config extension (#10676)

2026-02-15 05:37:32 +00:00 · 2025-03-07 05:48:41 +00:00
parent 34e777e043
commit ea20751b9b
12 changed files with 122 additions and 143 deletions
--- 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",
--- 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),
 ];
--- a/blocksuite/affine/block-attachment/src/configs/slash-menu.ts
+++ 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);
+      },
+    },
+  ],
+};
--- a/blocksuite/affine/block-attachment/src/configs/tooltips.ts
+++ b/blocksuite/affine/block-attachment/src/configs/tooltips.ts
@@ -1,4 +1,45 @@
 import { html } from 'lit';
+// prettier-ignore
+export const AttachmentTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="170" height="68" rx="2" fill="white"/>
+<mask id="mask0_16460_1013" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
+<rect width="170" height="68" rx="2" fill="white"/>
+</mask>
+<g mask="url(#mask0_16460_1013)">
+<rect x="8.5" y="28.5" width="169" height="67" rx="3.5" fill="white" stroke="#E3E2E4"/>
+<mask id="mask1_16460_1013" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="8" y="28" width="170" height="68">
+<rect x="8" y="28" width="170" height="68" rx="4" fill="white"/>
+</mask>
+<g mask="url(#mask1_16460_1013)">
+<g filter="url(#filter0_d_16460_1013)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M149.686 42.516C149.796 41.7313 149.251 41.0057 148.47 40.8954L130.084 38.2995C128.913 38.1341 127.829 38.9542 127.665 40.1313L122.298 78.494C122.133 79.671 122.95 80.7593 124.121 80.9248L157.357 85.6174C158.529 85.7828 159.612 84.9627 159.777 83.7856L163.057 60.3418C163.166 59.5571 162.622 58.8315 161.841 58.7212L151.941 57.3234C149.598 56.9926 147.965 54.816 148.294 52.4619L149.686 42.516ZM133.567 59.8003C133.649 59.2118 134.191 58.8017 134.776 58.8844L152.455 61.3805C153.041 61.4632 153.449 62.0074 153.367 62.5959C153.284 63.1844 152.743 63.5945 152.157 63.5118L134.478 61.0157C133.892 60.933 133.484 60.3888 133.567 59.8003ZM133.932 64.923C133.346 64.8403 132.804 65.2504 132.722 65.8389C132.64 66.4274 133.048 66.9716 133.634 67.0543L151.312 69.5504C151.898 69.6331 152.44 69.223 152.522 68.6345C152.604 68.046 152.196 67.5018 151.61 67.4191L133.932 64.923Z" fill="white"/>
+<path d="M153.295 43.1135C152.819 42.4792 151.818 42.7394 151.708 43.5259L150.416 52.7614C150.251 53.9385 151.067 55.0268 152.239 55.1922L161.432 56.4901C162.215 56.6007 162.74 55.7051 162.264 55.0708L153.295 43.1135Z" fill="white"/>
+</g>
+<g clip-path="url(#clip0_16460_1013)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.1088 36.804L17.0887 39.8241C16.1371 40.7509 16.1371 42.2492 17.0886 43.1759C18.0457 44.108 19.6014 44.108 20.5584 43.1759L23.5034 40.3144C23.6519 40.1701 23.8893 40.1735 24.0337 40.322C24.178 40.4706 24.1746 40.708 24.026 40.8523L21.0817 43.7132C21.0817 43.7133 21.0818 43.7131 21.0817 43.7132C19.8334 44.9288 17.8136 44.9289 16.5653 43.7132C15.3122 42.4926 15.3116 40.5099 16.5635 39.2886L19.5838 36.2683C20.4645 35.4105 21.8884 35.4106 22.7691 36.2683C23.6548 37.1309 23.6554 38.5332 22.771 39.3965L19.7507 42.4169C19.2376 42.9167 18.4095 42.9166 17.8964 42.4168C17.3777 41.9116 17.3777 41.0884 17.8964 40.5832L20.9956 37.5647C21.1439 37.4202 21.3813 37.4233 21.5259 37.5717C21.6704 37.7201 21.6672 37.9575 21.5189 38.102L18.4197 41.1205C18.2033 41.3312 18.2033 41.6688 18.4197 41.8796C18.6411 42.0952 19.0038 42.0957 19.2259 41.881L22.2458 38.861C22.8298 38.2923 22.8298 37.3744 22.2459 36.8056C21.6569 36.232 20.6984 36.2315 20.1088 36.804Z" fill="#77757D"/>
+</g>
+<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" font-weight="600" letter-spacing="0em"><tspan x="30" y="43.6364">Rickroll.mp3</tspan></text>
+</g>
+<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="10" y="18.6364">Attach a file.</tspan></text>
+</g>
+<defs>
+<filter id="filter0_d_16460_1013" x="118.277" y="34.2783" width="48.7936" height="55.3602" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.258824 0 0 0 0 0.254902 0 0 0 0 0.286275 0 0 0 0.18 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_16460_1013"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_16460_1013" result="shape"/>
+</filter>
+<clipPath id="clip0_16460_1013">
+<rect width="12" height="12" fill="white" transform="translate(14 34)"/>
+</clipPath>
+</defs>
+</svg>
+`;
+
 // prettier-ignore
 export const PDFTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="170" height="68" rx="2" fill="white"/>
--- 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" },
--- 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:*",
--- 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.',
--- a/blocksuite/affine/widget-slash-menu/src/tooltips/attachment.ts
+++ b/blocksuite/affine/widget-slash-menu/src/tooltips/attachment.ts
@@ -1,41 +0,0 @@
-import { html } from 'lit';
-// prettier-ignore
-export const AttachmentTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="170" height="68" rx="2" fill="white"/>
-<mask id="mask0_16460_1013" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
-<rect width="170" height="68" rx="2" fill="white"/>
-</mask>
-<g mask="url(#mask0_16460_1013)">
-<rect x="8.5" y="28.5" width="169" height="67" rx="3.5" fill="white" stroke="#E3E2E4"/>
-<mask id="mask1_16460_1013" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="8" y="28" width="170" height="68">
-<rect x="8" y="28" width="170" height="68" rx="4" fill="white"/>
-</mask>
-<g mask="url(#mask1_16460_1013)">
-<g filter="url(#filter0_d_16460_1013)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M149.686 42.516C149.796 41.7313 149.251 41.0057 148.47 40.8954L130.084 38.2995C128.913 38.1341 127.829 38.9542 127.665 40.1313L122.298 78.494C122.133 79.671 122.95 80.7593 124.121 80.9248L157.357 85.6174C158.529 85.7828 159.612 84.9627 159.777 83.7856L163.057 60.3418C163.166 59.5571 162.622 58.8315 161.841 58.7212L151.941 57.3234C149.598 56.9926 147.965 54.816 148.294 52.4619L149.686 42.516ZM133.567 59.8003C133.649 59.2118 134.191 58.8017 134.776 58.8844L152.455 61.3805C153.041 61.4632 153.449 62.0074 153.367 62.5959C153.284 63.1844 152.743 63.5945 152.157 63.5118L134.478 61.0157C133.892 60.933 133.484 60.3888 133.567 59.8003ZM133.932 64.923C133.346 64.8403 132.804 65.2504 132.722 65.8389C132.64 66.4274 133.048 66.9716 133.634 67.0543L151.312 69.5504C151.898 69.6331 152.44 69.223 152.522 68.6345C152.604 68.046 152.196 67.5018 151.61 67.4191L133.932 64.923Z" fill="white"/>
-<path d="M153.295 43.1135C152.819 42.4792 151.818 42.7394 151.708 43.5259L150.416 52.7614C150.251 53.9385 151.067 55.0268 152.239 55.1922L161.432 56.4901C162.215 56.6007 162.74 55.7051 162.264 55.0708L153.295 43.1135Z" fill="white"/>
-</g>
-<g clip-path="url(#clip0_16460_1013)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M20.1088 36.804L17.0887 39.8241C16.1371 40.7509 16.1371 42.2492 17.0886 43.1759C18.0457 44.108 19.6014 44.108 20.5584 43.1759L23.5034 40.3144C23.6519 40.1701 23.8893 40.1735 24.0337 40.322C24.178 40.4706 24.1746 40.708 24.026 40.8523L21.0817 43.7132C21.0817 43.7133 21.0818 43.7131 21.0817 43.7132C19.8334 44.9288 17.8136 44.9289 16.5653 43.7132C15.3122 42.4926 15.3116 40.5099 16.5635 39.2886L19.5838 36.2683C20.4645 35.4105 21.8884 35.4106 22.7691 36.2683C23.6548 37.1309 23.6554 38.5332 22.771 39.3965L19.7507 42.4169C19.2376 42.9167 18.4095 42.9166 17.8964 42.4168C17.3777 41.9116 17.3777 41.0884 17.8964 40.5832L20.9956 37.5647C21.1439 37.4202 21.3813 37.4233 21.5259 37.5717C21.6704 37.7201 21.6672 37.9575 21.5189 38.102L18.4197 41.1205C18.2033 41.3312 18.2033 41.6688 18.4197 41.8796C18.6411 42.0952 19.0038 42.0957 19.2259 41.881L22.2458 38.861C22.8298 38.2923 22.8298 37.3744 22.2459 36.8056C21.6569 36.232 20.6984 36.2315 20.1088 36.804Z" fill="#77757D"/>
-</g>
-<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" font-weight="600" letter-spacing="0em"><tspan x="30" y="43.6364">Rickroll.mp3</tspan></text>
-</g>
-<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="10" y="18.6364">Attach a file.</tspan></text>
-</g>
-<defs>
-<filter id="filter0_d_16460_1013" x="118.277" y="34.2783" width="48.7936" height="55.3602" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.258824 0 0 0 0 0.254902 0 0 0 0 0.286275 0 0 0 0.18 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_16460_1013"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_16460_1013" result="shape"/>
-</filter>
-<clipPath id="clip0_16460_1013">
-<rect width="12" height="12" fill="white" transform="translate(14 34)"/>
-</clipPath>
-</defs>
-</svg>
-`;
--- 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<string, SlashMenuTooltip> = {
    caption: 'Link Doc',
  },

-  Attachment: {
-    figure: AttachmentTooltip,
-    caption: 'Attachment',
-  },
-
-  PDF: {
-    figure: PDFTooltip,
-    caption: 'PDF',
-  },
-
  Github: {
    figure: GithubRepoTooltip,
    caption: 'GitHub Repo',
--- 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" },