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.
2026-07-15 18:48:34 -07:00 · 2026-07-15 18:48:34 -07:00 · 0da3d392dc
parent 84ca07d535
commit 0da3d392dc
4 changed files with 101 additions and 93 deletions
--- 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',
--- 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')
+    }
  }
 ]
--- 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
--- 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."
              }
            }