From 5396c126b8ee023b30c1483bd0a580580eb896ad Mon Sep 17 00:00:00 2001
From: Johnny <johnnyjoygg@gmail.com>
Date: Sat, 31 Jan 2026 20:53:55 +0800
Subject: [PATCH] chore: extract task list class names to constants

- Add TASK_LIST_CLASS and TASK_LIST_ITEM_CLASS constants
- Replace hardcoded 'contains-task-list' and 'task-list-item' strings
- Improve maintainability and prevent typos
---
 web/src/components/MemoContent/TaskListItem.tsx  | 5 +++--
 web/src/components/MemoContent/constants.ts      | 4 ++++
 web/src/components/MemoContent/markdown/List.tsx | 7 ++++---
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/web/src/components/MemoContent/TaskListItem.tsx b/web/src/components/MemoContent/TaskListItem.tsx
index 9f5d3c646..379824e01 100644
--- a/web/src/components/MemoContent/TaskListItem.tsx
+++ b/web/src/components/MemoContent/TaskListItem.tsx
@@ -3,6 +3,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { useUpdateMemo } from "@/hooks/useMemoQueries";
 import { toggleTaskAtIndex } from "@/utils/markdown-manipulation";
 import { useMemoViewContext, useMemoViewDerived } from "../MemoView/MemoViewContext";
+import { TASK_LIST_CLASS, TASK_LIST_ITEM_CLASS } from "./constants";
 import type { ReactMarkdownProps } from "./markdown/types";
 
 interface TaskListItemProps extends React.InputHTMLAttributes<HTMLInputElement>, ReactMarkdownProps {
@@ -37,7 +38,7 @@ export const TaskListItem: React.FC<TaskListItemProps> = ({ checked, node: _node
       // Fallback: Calculate index by counting task list items
       // Walk up to find the parent element with all task items
       let searchRoot = listItem.parentElement;
-      while (searchRoot && !searchRoot.classList.contains("contains-task-list")) {
+      while (searchRoot && !searchRoot.classList.contains(TASK_LIST_CLASS)) {
         searchRoot = searchRoot.parentElement;
       }
 
@@ -46,7 +47,7 @@ export const TaskListItem: React.FC<TaskListItemProps> = ({ checked, node: _node
         searchRoot = document.body;
       }
 
-      const allTaskItems = searchRoot.querySelectorAll("li.task-list-item");
+      const allTaskItems = searchRoot.querySelectorAll(`li.${TASK_LIST_ITEM_CLASS}`);
       for (let i = 0; i < allTaskItems.length; i++) {
         if (allTaskItems[i] === listItem) {
           taskIndex = i;
diff --git a/web/src/components/MemoContent/constants.ts b/web/src/components/MemoContent/constants.ts
index c7a95fc7c..237b1e6b8 100644
--- a/web/src/components/MemoContent/constants.ts
+++ b/web/src/components/MemoContent/constants.ts
@@ -1,5 +1,9 @@
 import { defaultSchema } from "rehype-sanitize";
 
+// Class names added by remark-gfm for task lists
+export const TASK_LIST_CLASS = "contains-task-list";
+export const TASK_LIST_ITEM_CLASS = "task-list-item";
+
 // Compact mode display settings
 export const COMPACT_MODE_CONFIG = {
   maxHeightVh: 60, // 60% of viewport height
diff --git a/web/src/components/MemoContent/markdown/List.tsx b/web/src/components/MemoContent/markdown/List.tsx
index 76a0c5012..b9969bfcf 100644
--- a/web/src/components/MemoContent/markdown/List.tsx
+++ b/web/src/components/MemoContent/markdown/List.tsx
@@ -1,4 +1,5 @@
 import { cn } from "@/lib/utils";
+import { TASK_LIST_CLASS, TASK_LIST_ITEM_CLASS } from "../constants";
 import type { ReactMarkdownProps } from "./types";
 
 interface ListProps extends React.HTMLAttributes<HTMLUListElement | HTMLOListElement>, ReactMarkdownProps {
@@ -12,7 +13,7 @@ interface ListProps extends React.HTMLAttributes<HTMLUListElement | HTMLOListEle
  */
 export const List = ({ ordered, children, className, node: _node, ...domProps }: ListProps) => {
   const Component = ordered ? "ol" : "ul";
-  const isTaskList = className?.includes("contains-task-list");
+  const isTaskList = className?.includes(TASK_LIST_CLASS);
 
   return (
     <Component
@@ -38,7 +39,7 @@ interface ListItemProps extends React.LiHTMLAttributes<HTMLLIElement>, ReactMark
  * Applies specialized styling for task checkboxes
  */
 export const ListItem = ({ children, className, node: _node, ...domProps }: ListItemProps) => {
-  const isTaskListItem = className?.includes("task-list-item");
+  const isTaskListItem = className?.includes(TASK_LIST_ITEM_CLASS);
 
   if (isTaskListItem) {
     return (
@@ -48,7 +49,7 @@ export const ListItem = ({ children, className, node: _node, ...domProps }: List
           // Task item styles: checkbox margins, inline paragraph, nested list indent
           "[&>button]:mr-2 [&>button]:align-middle",
           "[&>p]:inline [&>p]:m-0",
-          "[&>.contains-task-list]:pl-6",
+          `[&>.${TASK_LIST_CLASS}]:pl-6`,
           className,
         )}
         {...domProps}