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." } }