[WIKI-768] fix: ordering and grouping of list-related toolbar and slash commands #8104

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", {
+        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", {

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"],
   },

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",
+            commandKey: "numbered-list",
-            key: "to-do-list",
+            key: "numbered-list",
-            title: "To do",
+            title: "Numbered list",
-            description: "Track tasks with a to-do list.",
+            description: "Create a numbered list.",
-            searchTerms: ["todo", "task", "list", "check", "checkbox"],
+            searchTerms: ["ordered"],
-            icon: <ListTodo className="size-3.5" />,
+            icon: <ListOrdered className="size-3.5" />,
-            command: ({ editor, range }) => toggleTaskList(editor, range),
+            command: ({ editor, range }) => toggleOrderedList(editor, range),
           },
           {
             commandKey: "bulleted-list",
             key: "bulleted-list",
-            title: "Bullet list",
+            title: "Bulleted list",
-            description: "Create a simple bullet list.",
+            description: "Create a bulleted list.",
             searchTerms: ["unordered", "point"],
             icon: <List className="size-3.5" />,
             command: ({ editor, range }) => toggleBulletList(editor, range),
           },
           {
-            commandKey: "numbered-list",
+            commandKey: "to-do-list",
-            key: "numbered-list",
+            key: "to-do-list",
-            title: "Numbered list",
+            title: "To-do list",
-            description: "Create a list with numbering.",
+            description: "Create a to-do list.",
-            searchTerms: ["ordered"],
+            searchTerms: ["todo", "task", "list", "check", "checkbox"],
-            icon: <ListOrdered className="size-3.5" />,
+            icon: <ListTodo className="size-3.5" />,
-            command: ({ editor, range }) => toggleOrderedList(editor, range),
+            command: ({ editor, range }) => toggleTaskList(editor, range),
           },
           {
             commandKey: "table",