From 2a2c4921a764568b0425bfe49c66f70791d7c6dd Mon Sep 17 00:00:00 2001
From: Vipin Chaudhary <VipinChaudhary1809@gmail.com>
Date: Thu, 13 Nov 2025 15:20:07 +0530
Subject: [PATCH] [WIKI-768] fix: ordering and grouping of list-related toolbar
 and slash commands #8104

---
 .../pages/editor/toolbar/toolbar.tsx          |  9 +++--
 apps/web/core/constants/editor.ts             | 16 ++++-----
 .../slash-commands/command-items-list.tsx     | 33 ++++++++++---------
 3 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/apps/web/core/components/pages/editor/toolbar/toolbar.tsx b/apps/web/core/components/pages/editor/toolbar/toolbar.tsx
index af6603dd2..71baffebf 100644
--- a/apps/web/core/components/pages/editor/toolbar/toolbar.tsx
+++ b/apps/web/core/components/pages/editor/toolbar/toolbar.tsx
@@ -46,9 +46,12 @@ const ToolbarButton: React.FC<ToolbarButtonProps> = React.memo((props) => {
             ...item.extraProps,
           })
         }
-        className={cn("grid size-7 place-items-center rounded text-custom-text-300 hover:bg-custom-background-80", {
-          "bg-custom-background-80 text-custom-text-100": isActive,
-        })}
+        className={cn(
+          "shrink-0 grid size-7 place-items-center rounded text-custom-text-300 hover:bg-custom-background-80",
+          {
+            "bg-custom-background-80 text-custom-text-100": isActive,
+          }
+        )}
       >
         <item.icon
           className={cn("size-4", {
diff --git a/apps/web/core/constants/editor.ts b/apps/web/core/constants/editor.ts
index 5be1075bf..dc6d70f29 100644
--- a/apps/web/core/constants/editor.ts
+++ b/apps/web/core/constants/editor.ts
@@ -128,19 +128,19 @@ const BASIC_MARK_ITEMS: ToolbarMenuItem<"bold" | "italic" | "underline" | "strik
 ];
 
 const LIST_ITEMS: ToolbarMenuItem<"bulleted-list" | "numbered-list" | "to-do-list">[] = [
-  {
-    itemKey: "bulleted-list",
-    renderKey: "bulleted-list",
-    name: "Bulleted list",
-    icon: List,
-    shortcut: ["Cmd", "Shift", "7"],
-    editors: ["lite", "document"],
-  },
   {
     itemKey: "numbered-list",
     renderKey: "numbered-list",
     name: "Numbered list",
     icon: ListOrdered,
+    shortcut: ["Cmd", "Shift", "7"],
+    editors: ["lite", "document"],
+  },
+  {
+    itemKey: "bulleted-list",
+    renderKey: "bulleted-list",
+    name: "Bulleted list",
+    icon: List,
     shortcut: ["Cmd", "Shift", "8"],
     editors: ["lite", "document"],
   },
diff --git a/packages/editor/src/core/extensions/slash-commands/command-items-list.tsx b/packages/editor/src/core/extensions/slash-commands/command-items-list.tsx
index a0e299438..81e6038d2 100644
--- a/packages/editor/src/core/extensions/slash-commands/command-items-list.tsx
+++ b/packages/editor/src/core/extensions/slash-commands/command-items-list.tsx
@@ -119,32 +119,33 @@ export const getSlashCommandFilteredSections =
             icon: <Heading6 className="size-3.5" />,
             command: ({ editor, range }) => toggleHeading(editor, 6, range),
           },
+
           {
-            commandKey: "to-do-list",
-            key: "to-do-list",
-            title: "To do",
-            description: "Track tasks with a to-do list.",
-            searchTerms: ["todo", "task", "list", "check", "checkbox"],
-            icon: <ListTodo className="size-3.5" />,
-            command: ({ editor, range }) => toggleTaskList(editor, range),
+            commandKey: "numbered-list",
+            key: "numbered-list",
+            title: "Numbered list",
+            description: "Create a numbered list.",
+            searchTerms: ["ordered"],
+            icon: <ListOrdered className="size-3.5" />,
+            command: ({ editor, range }) => toggleOrderedList(editor, range),
           },
           {
             commandKey: "bulleted-list",
             key: "bulleted-list",
-            title: "Bullet list",
-            description: "Create a simple bullet list.",
+            title: "Bulleted list",
+            description: "Create a bulleted list.",
             searchTerms: ["unordered", "point"],
             icon: <List className="size-3.5" />,
             command: ({ editor, range }) => toggleBulletList(editor, range),
           },
           {
-            commandKey: "numbered-list",
-            key: "numbered-list",
-            title: "Numbered list",
-            description: "Create a list with numbering.",
-            searchTerms: ["ordered"],
-            icon: <ListOrdered className="size-3.5" />,
-            command: ({ editor, range }) => toggleOrderedList(editor, range),
+            commandKey: "to-do-list",
+            key: "to-do-list",
+            title: "To-do list",
+            description: "Create a to-do list.",
+            searchTerms: ["todo", "task", "list", "check", "checkbox"],
+            icon: <ListTodo className="size-3.5" />,
+            command: ({ editor, range }) => toggleTaskList(editor, range),
           },
           {
             commandKey: "table",