From 0da3d392dc6e3f4bcf4978c18fa5388ba5f2104f Mon Sep 17 00:00:00 2001 From: Jinjing <6427696+AmethystLiang@users.noreply.github.com> Date: Wed, 15 Jul 2026 18:48:34 -0700 Subject: [PATCH] Reorganize heading slash commands and rename toggle heading labels (#8917) Move toggle heading commands (toggle-h1..h4) into their own "Toggle headings" group, separate from plain heading commands, so the slash menu distinguishes static headings from collapsible toggle headings. Also shorten toggle heading labels from "Toggle Heading N" to "Toggle HN" for consistency with the plain heading labels. --- .../editor/rich-markdown-commands.test.ts | 8 +- .../rich-markdown-heading-slash-commands.tsx | 170 +++++++++--------- .../rich-markdown-slash-command-primitives.ts | 8 +- src/renderer/src/i18n/locales/en.json | 8 +- 4 files changed, 101 insertions(+), 93 deletions(-) diff --git a/src/renderer/src/components/editor/rich-markdown-commands.test.ts b/src/renderer/src/components/editor/rich-markdown-commands.test.ts index d04b1de08..5caffa90e 100644 --- a/src/renderer/src/components/editor/rich-markdown-commands.test.ts +++ b/src/renderer/src/components/editor/rich-markdown-commands.test.ts @@ -40,14 +40,14 @@ describe('rich markdown slash commands', () => { it('orders commands under section headers', () => { expect(slashCommands.map((command) => `${command.group}:${command.id}`)).toEqual([ 'Headings:heading-1', - 'Headings:toggle-h1', 'Headings:heading-2', - 'Headings:toggle-h2', 'Headings:heading-3', - 'Headings:toggle-h3', 'Headings:heading-4', - 'Headings:toggle-h4', 'Headings:heading-5', + 'Toggle headings:toggle-h1', + 'Toggle headings:toggle-h2', + 'Toggle headings:toggle-h3', + 'Toggle headings:toggle-h4', 'Basic blocks:blockquote', 'Basic blocks:ordered-list', 'Basic blocks:bullet-list', diff --git a/src/renderer/src/components/editor/rich-markdown-heading-slash-commands.tsx b/src/renderer/src/components/editor/rich-markdown-heading-slash-commands.tsx index b71b79f1e..16d256c5f 100644 --- a/src/renderer/src/components/editor/rich-markdown-heading-slash-commands.tsx +++ b/src/renderer/src/components/editor/rich-markdown-heading-slash-commands.tsx @@ -25,27 +25,6 @@ export const headingSlashCommands: SlashCommand[] = [ editor.chain().focus().setHeading({ level: 1 }).run() } }, - { - id: 'toggle-h1', - get label() { - return translate( - 'auto.components.editor.rich.markdown.slash.commands.41482b15ce', - 'Toggle Heading 1' - ) - }, - aliases: ['toggle-h1', 'toggle heading', 'details heading', 'collapse heading'], - icon: icon(ChevronRight), - group: 'Headings', - get description() { - return translate( - 'auto.components.editor.rich.markdown.slash.commands.3294a2c0cc', - 'Create a collapsible section with a large heading summary.' - ) - }, - run: (editor) => { - insertToggle(editor, 'heading-1') - } - }, { id: 'heading-2', get label() { @@ -68,27 +47,6 @@ export const headingSlashCommands: SlashCommand[] = [ editor.chain().focus().setHeading({ level: 2 }).run() } }, - { - id: 'toggle-h2', - get label() { - return translate( - 'auto.components.editor.rich.markdown.slash.commands.7a2c1f9b04', - 'Toggle Heading 2' - ) - }, - aliases: ['toggle-h2'], - icon: icon(ChevronRight), - group: 'Headings', - get description() { - return translate( - 'auto.components.editor.rich.markdown.slash.commands.b3e5d8a1c6', - 'Create a collapsible section with a medium heading summary.' - ) - }, - run: (editor) => { - insertToggle(editor, 'heading-2') - } - }, { id: 'heading-3', get label() { @@ -111,27 +69,6 @@ export const headingSlashCommands: SlashCommand[] = [ editor.chain().focus().setHeading({ level: 3 }).run() } }, - { - id: 'toggle-h3', - get label() { - return translate( - 'auto.components.editor.rich.markdown.slash.commands.2f9d6b4e10', - 'Toggle Heading 3' - ) - }, - aliases: ['toggle-h3'], - icon: icon(ChevronRight), - group: 'Headings', - get description() { - return translate( - 'auto.components.editor.rich.markdown.slash.commands.8c1a3e7d52', - 'Create a collapsible section with a small heading summary.' - ) - }, - run: (editor) => { - insertToggle(editor, 'heading-3') - } - }, { id: 'heading-4', get label() { @@ -154,27 +91,6 @@ export const headingSlashCommands: SlashCommand[] = [ editor.chain().focus().setHeading({ level: 4 }).run() } }, - { - id: 'toggle-h4', - get label() { - return translate( - 'auto.components.editor.rich.markdown.slash.commands.5e0b9c2a71', - 'Toggle Heading 4' - ) - }, - aliases: ['toggle-h4'], - icon: icon(ChevronRight), - group: 'Headings', - get description() { - return translate( - 'auto.components.editor.rich.markdown.slash.commands.d4f16a8b39', - 'Create a collapsible section with a nested heading summary.' - ) - }, - run: (editor) => { - insertToggle(editor, 'heading-4') - } - }, { id: 'heading-5', get label() { @@ -196,5 +112,91 @@ export const headingSlashCommands: SlashCommand[] = [ // Use setHeading (not toggleHeading) so "/h5" is idempotent. editor.chain().focus().setHeading({ level: 5 }).run() } + }, + // Grouped separately (Notion-style) so plain headings and collapsible + // toggle headings are easy to scan as distinct families in the slash menu. + { + id: 'toggle-h1', + get label() { + return translate( + 'auto.components.editor.rich.markdown.slash.commands.41482b15ce', + 'Toggle H1' + ) + }, + aliases: ['toggle-h1', 'toggle heading', 'details heading', 'collapse heading'], + icon: icon(ChevronRight), + group: 'Toggle headings', + get description() { + return translate( + 'auto.components.editor.rich.markdown.slash.commands.3294a2c0cc', + 'Create a collapsible section with a large heading summary.' + ) + }, + run: (editor) => { + insertToggle(editor, 'heading-1') + } + }, + { + id: 'toggle-h2', + get label() { + return translate( + 'auto.components.editor.rich.markdown.slash.commands.7a2c1f9b04', + 'Toggle H2' + ) + }, + aliases: ['toggle-h2'], + icon: icon(ChevronRight), + group: 'Toggle headings', + get description() { + return translate( + 'auto.components.editor.rich.markdown.slash.commands.b3e5d8a1c6', + 'Create a collapsible section with a medium heading summary.' + ) + }, + run: (editor) => { + insertToggle(editor, 'heading-2') + } + }, + { + id: 'toggle-h3', + get label() { + return translate( + 'auto.components.editor.rich.markdown.slash.commands.2f9d6b4e10', + 'Toggle H3' + ) + }, + aliases: ['toggle-h3'], + icon: icon(ChevronRight), + group: 'Toggle headings', + get description() { + return translate( + 'auto.components.editor.rich.markdown.slash.commands.8c1a3e7d52', + 'Create a collapsible section with a small heading summary.' + ) + }, + run: (editor) => { + insertToggle(editor, 'heading-3') + } + }, + { + id: 'toggle-h4', + get label() { + return translate( + 'auto.components.editor.rich.markdown.slash.commands.5e0b9c2a71', + 'Toggle H4' + ) + }, + aliases: ['toggle-h4'], + icon: icon(ChevronRight), + group: 'Toggle headings', + get description() { + return translate( + 'auto.components.editor.rich.markdown.slash.commands.d4f16a8b39', + 'Create a collapsible section with a nested heading summary.' + ) + }, + run: (editor) => { + insertToggle(editor, 'heading-4') + } } ] diff --git a/src/renderer/src/components/editor/rich-markdown-slash-command-primitives.ts b/src/renderer/src/components/editor/rich-markdown-slash-command-primitives.ts index 447a7c08a..3f982d9bb 100644 --- a/src/renderer/src/components/editor/rich-markdown-slash-command-primitives.ts +++ b/src/renderer/src/components/editor/rich-markdown-slash-command-primitives.ts @@ -40,7 +40,13 @@ export type SlashCommandIcon = | { kind: 'component'; component: React.ComponentType<{ className?: string }> } | { kind: 'text'; value: string } -export type SlashCommandGroup = 'Headings' | 'Basic blocks' | 'Advanced' | 'Media' | 'Others' +export type SlashCommandGroup = + | 'Headings' + | 'Toggle headings' + | 'Basic blocks' + | 'Advanced' + | 'Media' + | 'Others' export type SlashCommand = { id: SlashCommandId diff --git a/src/renderer/src/i18n/locales/en.json b/src/renderer/src/i18n/locales/en.json index 997b1ca6c..1abdf8130 100644 --- a/src/renderer/src/i18n/locales/en.json +++ b/src/renderer/src/i18n/locales/en.json @@ -11845,18 +11845,18 @@ "45cf7ceb3f": "Medium section heading.", "c209a116b7": "Heading 2", "3294a2c0cc": "Create a collapsible section with a large heading summary.", - "41482b15ce": "Toggle Heading 1", + "41482b15ce": "Toggle H1", "570611864e": "Large section heading.", "e66e7f04c6": "Heading 1", "5f9a0ed7c4": "Heading 4", "01a71dbbdd": "Nested section heading.", "8440fa4acf": "Heading 5", "b287b93c66": "Deep section heading.", - "7a2c1f9b04": "Toggle Heading 2", + "7a2c1f9b04": "Toggle H2", "b3e5d8a1c6": "Create a collapsible section with a medium heading summary.", - "2f9d6b4e10": "Toggle Heading 3", + "2f9d6b4e10": "Toggle H3", "8c1a3e7d52": "Create a collapsible section with a small heading summary.", - "5e0b9c2a71": "Toggle Heading 4", + "5e0b9c2a71": "Toggle H4", "d4f16a8b39": "Create a collapsible section with a nested heading summary." } }