From 10d86fee9f623dbad170753105672156b303aea2 Mon Sep 17 00:00:00 2001 From: L-Sun Date: Tue, 1 Apr 2025 05:51:59 +0000 Subject: [PATCH] chore(editor): update slash menu ui (#11305) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Close [BS-2954](https://linear.app/affine-design/issue/BS-2954/menu长宽为280390) Close [BS-2955](https://linear.app/affine-design/issue/BS-2955/frame-与mind-map的tooltips) Close [BS-2956](https://linear.app/affine-design/issue/BS-2956/to-do-list-tooltip缺失) ### What Changes - update size of slash menu - updare tooltips in slash menu - frame - mindmap --- .../blocks/block-note/src/configs/tooltips.ts | 20 +++++ .../src/configs/slash-menu.ts | 6 +- .../block-surface-ref/src/configs/tooltips.ts | 83 +++++++++++++++++++ .../widgets/widget-slash-menu/src/consts.ts | 2 +- .../widgets/widget-slash-menu/src/styles.ts | 2 +- 5 files changed, 108 insertions(+), 5 deletions(-) diff --git a/blocksuite/affine/blocks/block-note/src/configs/tooltips.ts b/blocksuite/affine/blocks/block-note/src/configs/tooltips.ts index 1cf9b6788c..2a5c79b19c 100644 --- a/blocksuite/affine/blocks/block-note/src/configs/tooltips.ts +++ b/blocksuite/affine/blocks/block-note/src/configs/tooltips.ts @@ -227,6 +227,21 @@ export const UnderlineTooltip = html` + + + + + + +Here is an example of todo list. + +Make a list for building preview. + + +` + export const tooltips: Record = { Text: { figure: TextTooltip, @@ -307,4 +322,9 @@ export const tooltips: Record = { figure: StrikethroughTooltip, caption: 'Strikethrough', }, + + 'To-do List': { + figure: TodoTooltip, + caption: 'To-do List', + }, }; diff --git a/blocksuite/affine/blocks/block-surface-ref/src/configs/slash-menu.ts b/blocksuite/affine/blocks/block-surface-ref/src/configs/slash-menu.ts index 408e5bdae9..a79d5cb84e 100644 --- a/blocksuite/affine/blocks/block-surface-ref/src/configs/slash-menu.ts +++ b/blocksuite/affine/blocks/block-surface-ref/src/configs/slash-menu.ts @@ -13,7 +13,7 @@ import { BlockSelection } from '@blocksuite/std'; import { GfxControllerIdentifier } from '@blocksuite/std/gfx'; import { insertSurfaceRefBlockCommand } from '../commands'; -import { EdgelessTooltip } from './tooltips'; +import { EdgelessTooltip, FrameTooltip, MindMapTooltip } from './tooltips'; const surfaceRefSlashMenuConfig: SlashMenuConfig = { items: ({ std, model }) => { @@ -56,7 +56,7 @@ const surfaceRefSlashMenuConfig: SlashMenuConfig = { description: 'Insert a blank frame', icon: FrameIcon(), tooltip: { - figure: EdgelessTooltip, + figure: FrameTooltip, caption: 'Frame', }, group: `5_Edgeless Element@${index++}`, @@ -72,7 +72,7 @@ const surfaceRefSlashMenuConfig: SlashMenuConfig = { description: 'Insert a mind map', icon: MindmapIcon(), tooltip: { - figure: EdgelessTooltip, + figure: MindMapTooltip, caption: 'Edgeless', }, group: `5_Edgeless Element@${index++}`, diff --git a/blocksuite/affine/blocks/block-surface-ref/src/configs/tooltips.ts b/blocksuite/affine/blocks/block-surface-ref/src/configs/tooltips.ts index ff718bab30..d2b37c2c9c 100644 --- a/blocksuite/affine/blocks/block-surface-ref/src/configs/tooltips.ts +++ b/blocksuite/affine/blocks/block-surface-ref/src/configs/tooltips.ts @@ -26,3 +26,86 @@ export const EdgelessTooltip = html` + + +Create a blank frame in Edgeless + + +Frame + + + + + + + +` + +// prettier-ignore +export const MindMapTooltip = html` + + +Create a mind map in Edgeless + + +Mind Map + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +` diff --git a/blocksuite/affine/widgets/widget-slash-menu/src/consts.ts b/blocksuite/affine/widgets/widget-slash-menu/src/consts.ts index 7104dda9b4..c3e6f78448 100644 --- a/blocksuite/affine/widgets/widget-slash-menu/src/consts.ts +++ b/blocksuite/affine/widgets/widget-slash-menu/src/consts.ts @@ -1,4 +1,4 @@ export const AFFINE_SLASH_MENU_WIDGET = 'affine-slash-menu-widget'; export const AFFINE_SLASH_MENU_TRIGGER_KEY = '/'; export const AFFINE_SLASH_MENU_TOOLTIP_TIMEOUT = 800; -export const AFFINE_SLASH_MENU_MAX_HEIGHT = 334; +export const AFFINE_SLASH_MENU_MAX_HEIGHT = 390; diff --git a/blocksuite/affine/widgets/widget-slash-menu/src/styles.ts b/blocksuite/affine/widgets/widget-slash-menu/src/styles.ts index c0a960f2be..fab27ae951 100644 --- a/blocksuite/affine/widgets/widget-slash-menu/src/styles.ts +++ b/blocksuite/affine/widgets/widget-slash-menu/src/styles.ts @@ -20,7 +20,7 @@ export const styles = css` top: 0; box-sizing: border-box; padding: 8px 4px 8px 8px; - width: 258px; + width: 280px; overflow-y: auto; font-family: ${unsafeCSS(baseTheme.fontSansFamily)};