From d30ff2898fbed0ae346d98fd2c2fa8b5c81d4f60 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Tue, 4 Nov 2025 09:25:15 +0800
Subject: [PATCH] fix(web): correct task checkbox toggling in multi-section
 memos
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed a bug where clicking checkboxes in task lists would toggle the wrong
checkbox when a memo contained multiple sections with separate task lists.

The issue was that TaskListItem was counting tasks only within the immediate
parent list (ul/ol), but the toggleTaskAtIndex function counts all tasks
globally across the entire memo. This caused index misalignment.

Changes:
- Add containerRef to MemoContentContext for proper task scoping
- Pass memoContentContainerRef through context in MemoContent component
- Update TaskListItem to count all tasks within the container scope

This ensures task indices are calculated consistently with the markdown
manipulation logic, fixing checkbox toggling in complex multi-section memos.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 web/src/components/MemoContent/MemoContentContext.tsx |  3 +++
 web/src/components/MemoContent/TaskListItem.tsx       | 10 ++++++++--
 web/src/components/MemoContent/index.tsx              |  1 +
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/web/src/components/MemoContent/MemoContentContext.tsx b/web/src/components/MemoContent/MemoContentContext.tsx
index e2e36f943..3be3eeb97 100644
--- a/web/src/components/MemoContent/MemoContentContext.tsx
+++ b/web/src/components/MemoContent/MemoContentContext.tsx
@@ -19,6 +19,9 @@ export interface MemoContentContextType {
 
   /** Parent page path (for navigation) */
   parentPage?: string;
+
+  /** Reference to the container element for the memo content */
+  containerRef?: React.RefObject<HTMLDivElement>;
 }
 
 export const MemoContentContext = createContext<MemoContentContextType>({
diff --git a/web/src/components/MemoContent/TaskListItem.tsx b/web/src/components/MemoContent/TaskListItem.tsx
index e9365a2a5..eeebf1444 100644
--- a/web/src/components/MemoContent/TaskListItem.tsx
+++ b/web/src/components/MemoContent/TaskListItem.tsx
@@ -44,8 +44,14 @@ export const TaskListItem: React.FC<TaskListItemProps> = ({ checked, ...props })
     if (taskIndexStr !== null) {
       taskIndex = parseInt(taskIndexStr);
     } else {
-      // Fallback: Calculate index by counting previous task list items
-      const allTaskItems = listItem.closest("ul, ol")?.querySelectorAll("li.task-list-item") || [];
+      // Fallback: Calculate index by counting ALL task list items in the memo
+      // Use the container ref from context for proper scoping
+      const container = context.containerRef?.current;
+      if (!container) {
+        return;
+      }
+
+      const allTaskItems = container.querySelectorAll("li.task-list-item");
       for (let i = 0; i < allTaskItems.length; i++) {
         if (allTaskItems[i] === listItem) {
           taskIndex = i;
diff --git a/web/src/components/MemoContent/index.tsx b/web/src/components/MemoContent/index.tsx
index e1b510ce2..a1483fe9e 100644
--- a/web/src/components/MemoContent/index.tsx
+++ b/web/src/components/MemoContent/index.tsx
@@ -49,6 +49,7 @@ const MemoContent = observer((props: Props) => {
     readonly: !allowEdit,
     disableFilter: props.disableFilter,
     parentPage: props.parentPage,
+    containerRef: memoContentContainerRef,
   };
 
   // Initial compact mode.