From 8d9f5327a19f8f641163699b4001569b68b681ed Mon Sep 17 00:00:00 2001 From: L-Sun Date: Wed, 2 Apr 2025 01:11:18 +0000 Subject: [PATCH] chore(editor): update slash menu tooltips of latex and loom (#11350) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- .../embed-loom-block/configs/slash-menu.ts | 6 +++ .../src/embed-loom-block/configs/tooltips.ts | 30 ++++++++++++++ .../block-latex/src/configs/slash-menu.ts | 17 ++++++++ .../block-latex/src/configs/tooltips.ts | 41 +++++++++++++++++++ 4 files changed, 94 insertions(+) create mode 100644 blocksuite/affine/blocks/block-embed/src/embed-loom-block/configs/tooltips.ts create mode 100644 blocksuite/affine/blocks/block-latex/src/configs/tooltips.ts diff --git a/blocksuite/affine/blocks/block-embed/src/embed-loom-block/configs/slash-menu.ts b/blocksuite/affine/blocks/block-embed/src/embed-loom-block/configs/slash-menu.ts index dd565c77f7..fe63cca223 100644 --- a/blocksuite/affine/blocks/block-embed/src/embed-loom-block/configs/slash-menu.ts +++ b/blocksuite/affine/blocks/block-embed/src/embed-loom-block/configs/slash-menu.ts @@ -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'), diff --git a/blocksuite/affine/blocks/block-embed/src/embed-loom-block/configs/tooltips.ts b/blocksuite/affine/blocks/block-embed/src/embed-loom-block/configs/tooltips.ts new file mode 100644 index 0000000000..251bf10305 --- /dev/null +++ b/blocksuite/affine/blocks/block-embed/src/embed-loom-block/configs/tooltips.ts @@ -0,0 +1,30 @@ +import { html } from 'lit'; + +// prettier-ignore +export const LoomTooltip = html` + + +Embed a loom video. + + + + + + + + +AFFiNE Team + +1 min + + + + + + + + + + + +` diff --git a/blocksuite/affine/blocks/block-latex/src/configs/slash-menu.ts b/blocksuite/affine/blocks/block-latex/src/configs/slash-menu.ts index df5e179f1a..b7d639ff74 100644 --- a/blocksuite/affine/blocks/block-latex/src/configs/slash-menu.ts +++ b/blocksuite/affine/blocks/block-latex/src/configs/slash-menu.ts @@ -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 }) => { diff --git a/blocksuite/affine/blocks/block-latex/src/configs/tooltips.ts b/blocksuite/affine/blocks/block-latex/src/configs/tooltips.ts new file mode 100644 index 0000000000..9c49fcc468 --- /dev/null +++ b/blocksuite/affine/blocks/block-latex/src/configs/tooltips.ts @@ -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` +
+
+ ${str} + ${unsafeHTML( + katex.renderToString(latex, { + displayMode, + output: 'mathml', + }) + )} +
+
`;