chore(editor): update slash menu tooltips of latex and loom (#11350)

Close [BS-2983](https://linear.app/affine-design/issue/BS-2983/slash-menu-loom没有tooltip) Close [BS-2953](https://linear.app/affine-design/issue/BS-2982/slash-menu中latex没有tooltip)
2025-04-02 01:11:18 +00:00
1 parent b759a22221
commit 8d9f5327a1
@@ -2,12 +2,18 @@ import { toggleEmbedCardCreateModal } from '@blocksuite/affine-components/embed-
 import type { SlashMenuConfig } from '@blocksuite/affine-widget-slash-menu';
 import { LoomLogoDuotoneIcon } from '@blocksuite/icons/lit';

+import { LoomTooltip } from './tooltips';
+
 export const embedLoomSlashMenuConfig: SlashMenuConfig = {
  items: [
    {
      name: 'Loom',
      icon: LoomLogoDuotoneIcon(),
      description: 'Embed a Loom video.',
+      tooltip: {
+        figure: LoomTooltip,
+        caption: 'loom',
+      },
      group: '4_Content & Media@9',
      when: ({ model }) =>
        model.doc.schema.flavourSchemaMap.has('affine:embed-loom'),
@@ -0,0 +1,30 @@
+import { html } from 'lit';
+
+// prettier-ignore
+export const LoomTooltip = html`<svg width="170" height="106" viewBox="0 0 170 106" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g clip-path="url(#clip0_5797_116775)">
+<rect width="170" height="106" rx="2" fill="white"/>
+<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="16.6364">Embed a loom video.</tspan></text>
+<mask id="path-3-inside-1_5797_116775" fill="white">
+<path d="M8 29C8 26.7909 9.79086 25 12 25H170V106H8V29Z"/>
+</mask>
+<path d="M8 29C8 26.7909 9.79086 25 12 25H170V106H8V29Z" fill="white"/>
+<path d="M7 29C7 26.2386 9.23858 24 12 24H170V26H12C10.3431 26 9 27.3431 9 29H7ZM170 106H8H170ZM7 106V29C7 26.2386 9.23858 24 12 24V26C10.3431 26 9 27.3431 9 29V106H7ZM170 25V106V25Z" fill="#E6E6E6" mask="url(#path-3-inside-1_5797_116775)"/>
+<path d="M18 37C18 35.8954 18.8954 35 20 35H170V106H18V37Z" fill="#050505"/>
+<rect x="46" y="35" width="124" height="83" fill="url(#pattern0_5797_116775)"/>
+<rect x="26" y="43" width="100" height="24" rx="2" fill="#313131" fill-opacity="0.65"/>
+<text fill="white" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="14" font-weight="500" letter-spacing="0px"><tspan x="33" y="60.1818">AFFiNE Team</tspan></text>
+<rect x="26" y="73" width="42" height="24" rx="2" fill="#313131" fill-opacity="0.65"/>
+<text fill="white" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="12" font-weight="500" letter-spacing="0px"><tspan x="33" y="88.7273">1 min</tspan></text>
+</g>
+<defs>
+<pattern id="pattern0_5797_116775" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_5797_116775" transform="matrix(0.00847458 0 0 0.0126608 0 -0.00643251)"/>
+</pattern>
+<clipPath id="clip0_5797_116775">
+<rect width="170" height="106" rx="2" fill="white"/>
+</clipPath>
+<image id="image0_5797_116775" width="118" height="80" preserveAspectRatio="none" xlink:href="data:image/png;base64,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
Line truncated
+</defs>
+</svg>
+`
@@ -7,6 +7,7 @@ import { type SlashMenuConfig } from '@blocksuite/affine-widget-slash-menu';
 import { TeXIcon } from '@blocksuite/icons/lit';

 import { insertLatexBlockCommand } from '../commands';
+import { LatexTooltip } from './tooltips';

 export const latexSlashMenuConfig: SlashMenuConfig = {
  items: [
@@ -15,6 +16,14 @@ export const latexSlashMenuConfig: SlashMenuConfig = {
      group: '0_Basic@8',
      description: 'Create a inline equation.',
      icon: TeXIcon(),
+      tooltip: {
+        figure: LatexTooltip(
+          'Energy. Mass. Light. In a single equation,',
+          'E=mc^2',
+          false
+        ),
+        caption: 'Inline equation',
+      },
      searchAlias: ['inlineMath, inlineEquation', 'inlineLatex'],
      action: ({ std }) => {
        std.command
@@ -28,6 +37,14 @@ export const latexSlashMenuConfig: SlashMenuConfig = {
      name: 'Equation',
      description: 'Create a equation block.',
      icon: TeXIcon(),
+      tooltip: {
+        figure: LatexTooltip(
+          'Create a equation via LaTeX.',
+          String.raw`\frac{a}{b} \pm \frac{c}{d} = \frac{ad \pm bc}{bd}`,
+          true
+        ),
+        caption: 'Equation',
+      },
      searchAlias: ['mathBlock, equationBlock', 'latexBlock'],
      group: '4_Content & Media@10',
      action: ({ std }) => {
@@ -0,0 +1,41 @@
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import katex from 'katex';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+
+export const LatexTooltip = (
+  str: string,
+  latex: string,
+  displayMode: boolean = false
+) =>
+  html` <style>
+      .latex-tooltip {
+        background: ${unsafeCSSVarV2('layer/pureWhite')};
+        border-radius: 2px;
+        width: 170px;
+        padding: 5px 5px 5px 6px;
+        box-sizing: border-box;
+      }
+      .latex-tooltip-content {
+        width: 159px;
+        color: #121212;
+        font-family: var(--affine-font-family);
+        font-size: 10px;
+        font-style: normal;
+
+        .katex > math[display='block'] {
+          margin-top: 1em;
+        }
+      }
+    </style>
+    <div class="latex-tooltip">
+      <div class="latex-tooltip-content">
+        <span>${str}</span>
+        ${unsafeHTML(
+          katex.renderToString(latex, {
+            displayMode,
+            output: 'mathml',
+          })
+        )}
+      </div>
+    </div>`;