Commit d30ff289 authored by Steven's avatar Steven

fix(web): correct task checkbox toggling in multi-section memos

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: 's avatarClaude <noreply@anthropic.com>
parent 9b72963e
...@@ -19,6 +19,9 @@ export interface MemoContentContextType { ...@@ -19,6 +19,9 @@ export interface MemoContentContextType {
/** Parent page path (for navigation) */ /** Parent page path (for navigation) */
parentPage?: string; parentPage?: string;
/** Reference to the container element for the memo content */
containerRef?: React.RefObject<HTMLDivElement>;
} }
export const MemoContentContext = createContext<MemoContentContextType>({ export const MemoContentContext = createContext<MemoContentContextType>({
......
...@@ -44,8 +44,14 @@ export const TaskListItem: React.FC<TaskListItemProps> = ({ checked, ...props }) ...@@ -44,8 +44,14 @@ export const TaskListItem: React.FC<TaskListItemProps> = ({ checked, ...props })
if (taskIndexStr !== null) { if (taskIndexStr !== null) {
taskIndex = parseInt(taskIndexStr); taskIndex = parseInt(taskIndexStr);
} else { } else {
// Fallback: Calculate index by counting previous task list items // Fallback: Calculate index by counting ALL task list items in the memo
const allTaskItems = listItem.closest("ul, ol")?.querySelectorAll("li.task-list-item") || []; // 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++) { for (let i = 0; i < allTaskItems.length; i++) {
if (allTaskItems[i] === listItem) { if (allTaskItems[i] === listItem) {
taskIndex = i; taskIndex = i;
......
...@@ -49,6 +49,7 @@ const MemoContent = observer((props: Props) => { ...@@ -49,6 +49,7 @@ const MemoContent = observer((props: Props) => {
readonly: !allowEdit, readonly: !allowEdit,
disableFilter: props.disableFilter, disableFilter: props.disableFilter,
parentPage: props.parentPage, parentPage: props.parentPage,
containerRef: memoContentContainerRef,
}; };
// Initial compact mode. // Initial compact mode.
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment