From c13d4c575f3889026cfbc7384b6bb0dcbb989171 Mon Sep 17 00:00:00 2001 From: L-Sun Date: Mon, 10 Mar 2025 12:38:59 +0000 Subject: [PATCH] chore(editor): update slash menu tooltips (#10746) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Close [BS-2676](https://linear.app/affine-design/issue/BS-2676/loom入口增加简介) [BS-2767](https://linear.app/affine-design/issue/BS-2767/table的tooltip需要更新，现在用的是database的) --- blocksuite/affine/all/tsconfig.json | 1 + .../block-callout/src/configs/slash-menu.ts | 6 ++ .../block-callout/src/configs/tooltips.ts | 28 ++++++++ .../embed-loom-block/configs/slash-menu.ts | 1 + .../block-table/src/configs/slash-menu.ts | 5 ++ .../block-table/src/configs/tooltips.ts | 68 +++++++++++++++++++ tools/utils/src/workspace.gen.ts | 1 + 7 files changed, 110 insertions(+) create mode 100644 blocksuite/affine/blocks/block-callout/src/configs/tooltips.ts create mode 100644 blocksuite/affine/blocks/block-table/src/configs/tooltips.ts diff --git a/blocksuite/affine/all/tsconfig.json b/blocksuite/affine/all/tsconfig.json index e17dc06db0..77ab74d165 100644 --- a/blocksuite/affine/all/tsconfig.json +++ b/blocksuite/affine/all/tsconfig.json @@ -30,6 +30,7 @@ { "path": "../fragments/fragment-doc-title" }, { "path": "../fragments/fragment-frame-panel" }, { "path": "../fragments/fragment-outline" }, + { "path": "../gfx/text" }, { "path": "../model" }, { "path": "../rich-text" }, { "path": "../shared" }, diff --git a/blocksuite/affine/blocks/block-callout/src/configs/slash-menu.ts b/blocksuite/affine/blocks/block-callout/src/configs/slash-menu.ts index e4d984b395..095fa5d7e4 100644 --- a/blocksuite/affine/blocks/block-callout/src/configs/slash-menu.ts +++ b/blocksuite/affine/blocks/block-callout/src/configs/slash-menu.ts @@ -9,6 +9,8 @@ import { import { type SlashMenuConfig } from '@blocksuite/affine-widget-slash-menu'; import { FontIcon } from '@blocksuite/icons/lit'; +import { calloutTooltip } from './tooltips'; + export const calloutSlashMenuConfig: SlashMenuConfig = { disableWhen: ({ model }) => { return ( @@ -22,6 +24,10 @@ export const calloutSlashMenuConfig: SlashMenuConfig = { name: 'Callout', description: 'Let your words stand out.', icon: FontIcon(), + tooltip: { + figure: calloutTooltip, + caption: 'Callout', + }, searchAlias: ['callout'], group: '0_Basic@9', when: ({ std, model }) => { diff --git a/blocksuite/affine/blocks/block-callout/src/configs/tooltips.ts b/blocksuite/affine/blocks/block-callout/src/configs/tooltips.ts new file mode 100644 index 0000000000..f1900c85b0 --- /dev/null +++ b/blocksuite/affine/blocks/block-callout/src/configs/tooltips.ts @@ -0,0 +1,28 @@ +import { html } from 'lit'; + +// prettier-ignore +export const calloutTooltip = html` + + +Highlight important notes. + + + +👋 + + +A storyboard is a visual representation of a story, typically presented in the form of sequential panels. Each panel features illustrations or images accompanied by notes describing key scenes or shots, including details of action and dialogue. + + + + + + + + + + + + + +` 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 37c3883bca..9b28154370 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 @@ -7,6 +7,7 @@ export const embedLoomSlashMenuConfig: SlashMenuConfig = { { name: 'Loom', icon: LoomLogoDuotoneIcon(), + description: 'Embed a Loom video.', group: '4_Content & Media@8', when: ({ model }) => model.doc.schema.flavourSchemaMap.has('affine:embed-loom'), diff --git a/blocksuite/affine/blocks/block-table/src/configs/slash-menu.ts b/blocksuite/affine/blocks/block-table/src/configs/slash-menu.ts index b6cd24f82e..07dfea63f2 100644 --- a/blocksuite/affine/blocks/block-table/src/configs/slash-menu.ts +++ b/blocksuite/affine/blocks/block-table/src/configs/slash-menu.ts @@ -5,6 +5,7 @@ import type { SlashMenuConfig } from '@blocksuite/affine-widget-slash-menu'; import { TableIcon } from '@blocksuite/icons/lit'; import { insertTableBlockCommand } from '../commands'; +import { tableTooltip } from './tooltips'; export const tableSlashMenuConfig: SlashMenuConfig = { disableWhen: ({ model }) => model.flavour === 'affine:table', @@ -13,6 +14,10 @@ export const tableSlashMenuConfig: SlashMenuConfig = { name: 'Table', description: 'Create a simple table.', icon: TableIcon(), + tooltip: { + figure: tableTooltip, + caption: 'Table', + }, group: '4_Content & Media@0', when: ({ model }) => !isInsideBlockByFlavour(model.doc, model, 'affine:edgeless-text'), diff --git a/blocksuite/affine/blocks/block-table/src/configs/tooltips.ts b/blocksuite/affine/blocks/block-table/src/configs/tooltips.ts new file mode 100644 index 0000000000..cc877825d8 --- /dev/null +++ b/blocksuite/affine/blocks/block-table/src/configs/tooltips.ts @@ -0,0 +1,68 @@ +import { html } from 'lit'; + +// prettier-ignore +export const tableTooltip = html` + + + + + +Ranking + + + + +🥇 First + + + + +🥈 Second + + + + +🥉 Third + + + + +Country + + + + +China + + + + +Japan + + + + +USA + + + + +Weekly Overtime (Hrs) + + + + +10+ + + + + +8 + + + + +3 +Insert editable tabular data. + +`; diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts index 4bfe568d15..24162023d8 100644 --- a/tools/utils/src/workspace.gen.ts +++ b/tools/utils/src/workspace.gen.ts @@ -28,6 +28,7 @@ export const PackageList = [ 'blocksuite/affine/fragments/fragment-doc-title', 'blocksuite/affine/fragments/fragment-frame-panel', 'blocksuite/affine/fragments/fragment-outline', + 'blocksuite/affine/gfx/text', 'blocksuite/affine/model', 'blocksuite/affine/rich-text', 'blocksuite/affine/shared',