refactor(editor): bookmark slash menu config extension (#10675)

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

@@ -1,5 +1,6 @@
 import { BookmarkBlockSchema } from '@blocksuite/affine-model';
 import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
+import { SlashMenuConfigExtension } from '@blocksuite/affine-widget-slash-menu';
 import {
   BlockFlavourIdentifier,
   BlockViewExtension,
@@ -9,6 +10,7 @@ import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
 import { BookmarkBlockAdapterExtensions } from './adapters/extension';
+import { bookmarkSlashMenuConfig } from './configs/slash-menu';
 import { builtinToolbarConfig } from './configs/toolbar';
 
 const flavour = BookmarkBlockSchema.model.flavour;
@@ -25,4 +27,5 @@ export const BookmarkBlockSpec: ExtensionType[] = [
     id: BlockFlavourIdentifier(flavour),
     config: builtinToolbarConfig,
   }),
+  SlashMenuConfigExtension(flavour, bookmarkSlashMenuConfig),
 ].flat();

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

@@ -0,0 +1,42 @@
+import { toggleEmbedCardCreateModal } from '@blocksuite/affine-components/embed-card-modal';
+import { type SlashMenuConfig } from '@blocksuite/affine-widget-slash-menu';
+import { LinkIcon } from '@blocksuite/icons/lit';
+
+import { LinkTooltip } from './tooltips';
+
+export const bookmarkSlashMenuConfig: SlashMenuConfig = {
+  items: [
+    {
+      name: 'Link',
+      description: 'Add a bookmark for reference.',
+      icon: LinkIcon(),
+      tooltip: {
+        figure: LinkTooltip,
+        caption: 'Link',
+      },
+      group: '4_Content & Media@2',
+      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(() => {
+            if (model.text?.length === 0) {
+              model.doc.deleteBlock(model);
+            }
+          })
+          .catch(console.error);
+      },
+    },
+  ],
+};

blocksuite/affine/block-bookmark/src/configs/tooltips.ts

@@ -0,0 +1,13 @@
+import { html } from 'lit';
+// prettier-ignore
+export const LinkTooltip = 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_1007" 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_1007)">
+<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="15.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="27.6364">complexity to our data.&#10;</tspan><tspan x="8" y="63.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="75.6364">either have, choose to share, or accept.&#10;</tspan><tspan x="8" y="111.636">For example, one user&#x2019;s edits to a document might be on </tspan><tspan x="8" y="123.636">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="135.636">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="147.636">other users.&#10;</tspan><tspan x="8" y="183.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="195.636">those changes to their version of the document.</tspan></text>
+<text fill="#1E67AF" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="11" letter-spacing="0em"><tspan x="8" y="45.5">Learn about AFFiNE</tspan></text>
+</g>
+</svg>
+`;