feat: checkbox sync fix + comprehensive test suite

- Fix critical checkbox toggle sync bug in webview preview
- Implement controlled state pattern with optimistic UI
- Use WorkspaceEdit by URI to avoid stale editor references
- Improve scanner to skip fenced code blocks and support nested/ordered lists
- Add 34 comprehensive tests (17 unit scanner, 11 unit toggle, 6 integration)
- Add debug toggle command for verbose logging
- Migrate console.log to centralized Logger class
- Update CHANGELOG.md for v1.0.9 release

Author: GSejas

CHANGELOG.md

@@ -4,6 +4,49 @@ All notable changes to the "markdown-checkbox-preview" extension will be documen
 
 Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
 
+## [1.0.9] - 2025-10-15
+
+### 🐛 **Bug Fixes**
+
+- **Checkbox Toggle Sync** 🔄
+  - Fixed critical bug where checkbox toggles in webview preview were not persisting to markdown files
+  - Implemented controlled state pattern with optimistic UI for instant visual feedback
+  - Fixed stale editor reference issue by using URI-based editing via WorkspaceEdit API
+  - Added targeted checkbox synchronization to prevent visual glitches from full HTML rerenders
+
+- **Scanner Improvements** 🔍
+  - Fixed false positive checkbox detection in fenced code blocks (Mermaid diagrams, etc.)
+  - Added support for nested checkboxes and ordered list checkboxes (`1. [ ] Task`)
+  - Added case-insensitive checkbox detection (`[x]` and `[X]` both supported)
+  - Improved CRLF line ending compatibility
+
+### ✨ **Added**
+
+- **Debug Toggle Command** 🐛
+  - Added `checkboxPreview.toggleDebug` command to enable/disable verbose logging
+  - Debug logs now opt-in via command, reducing console noise by default
+  - Verbose logs written to "Markdown Checkbox Preview" output channel
+
+- **Comprehensive Test Suite** ✅
+  - Added 17 unit tests for checkbox scanner (fenced blocks, nested items, various formats)
+  - Added 11 unit tests for URI-based toggle function edge cases
+  - Added 6 integration tests for end-to-end webview toggle flow
+  - Total: 34 new tests added (144+ tests total)
+
+### 🛠️ **Enhanced**
+
+- **Logging Infrastructure** 📝
+  - Migrated all `console.log()` statements to centralized Logger class
+  - Added debug verbosity toggle for cleaner extension host console
+  - Improved diagnostic capabilities with structured logging (INFO/WARN/ERROR/DEBUG)
+
+### 🎯 **Technical**
+
+- Exported `toggleCheckboxInDocumentUri()` function for testability
+- Added `getCurrentDocumentUri()` getter to AutoPreviewManager
+- Implemented `extractCheckboxStates()` helper for state verification
+- Enhanced fenced code block detection with state tracking
+
 ## [1.0.8] - 2025-10-14
 
 ### 🚀 **CI/CD & Infrastructure**

media/main.js

@@ -12,6 +12,10 @@
           rootElement.innerHTML = message.html;
         }
         break;
+      case 'syncCheckboxes':
+        // Sync checkbox states without full rerender (preserves scroll, focus, etc.)
+        syncCheckboxStates(message.checkboxes);
+        break;
       case 'updateProgress':
         updateProgressBar(message.completed, message.total);
         break;
@@ -21,6 +25,16 @@
     }
   });
 
+  // Sync checkbox states from the editor
+  function syncCheckboxStates(checkboxes) {
+    checkboxes.forEach(({ line, checked }) => {
+      const checkbox = document.querySelector(`input.md-checkbox[data-line="${line}"]`);
+      if (checkbox && checkbox.checked !== checked) {
+        checkbox.checked = checked;
+      }
+    });
+  }
+
   // Synchronized scrolling: scroll preview to match editor line
   function scrollToLine(line) {
     // Find the element closest to the target line
@@ -60,17 +74,14 @@
     if (target.tagName === 'INPUT' && target.classList.contains('md-checkbox')) {
       const lineNumber = parseInt(target.dataset.line, 10);
       if (!isNaN(lineNumber)) {
+        // Allow the checkbox to change immediately (optimistic UI)
+        // The extension will send back a sync message to confirm the state
+        
         // Send toggle message to extension
         vscode.postMessage({
           type: 'toggle',
           line: lineNumber
         });
-        
-        // Disable the checkbox temporarily to prevent rapid clicking
-        target.disabled = true;
-        setTimeout(() => {
-          target.disabled = false;
-        }, 100);
       }
     }
 

package.json

@@ -2,7 +2,7 @@
   "name": "markdown-checkbox-preview",
   "displayName": "Markdown Checkbox Preview",
   "description": "Interactive Markdown checkbox codelens actions (toggle) support, preview with real-time sync, tree view navigation, and comprehensive task management for VS Code",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "publisher": "GSejas",
   "license": "MIT",
   "icon": "media/icon.png",
@@ -65,6 +65,11 @@
         "title": "Toggle Auto-Preview",
         "icon": "$(eye)"
       },
+      {
+        "command": "checkboxPreview.toggleDebug",
+        "title": "Toggle Debug Logging",
+        "icon": "$(bug)"
+      },
       {
         "command": "checkboxTree.refresh",
         "title": "Refresh",

playwright-report/index.html

@@ -288,6 +288,21 @@ export class AutoPreviewManager {
     return this.currentPanel;
   }
 
+  /**
+   * Returns the currently-registered document URI for the preview panel, if any
+   */
+  public getCurrentDocumentUri(): vscode.Uri | undefined {
+    if (!this.currentDocumentUri) {
+      return undefined;
+    }
+    try {
+      return vscode.Uri.parse(this.currentDocumentUri);
+    } catch (err) {
+      Logger.error('Failed to parse currentDocumentUri', err);
+      return undefined;
+    }
+  }
+
   /**
    * Shows the status bar button if a markdown file is active
    * 

src/autoPreviewManager.ts

@@ -1,5 +1,5 @@
 import * as vscode from 'vscode';
-import { renderMarkdown, getTaskListCount } from './renderer';
+import { renderMarkdown, getTaskListCount, extractCheckboxStates } from './renderer';
 import { CheckboxTreeDataProvider, CheckboxItem } from './checkboxTree';
 import { CheckboxCodeLensProvider } from './providers/checkboxCodeLensProvider';
 import { CheckboxHoverProvider } from './providers/checkboxHoverProvider';
@@ -49,6 +49,17 @@ export function activate(context: vscode.ExtensionContext) {
     () => autoPreviewManager.toggleAutoPreview()
   );
 
+  const toggleDebugDisposable = vscode.commands.registerCommand(
+    'checkboxPreview.toggleDebug',
+    () => {
+      Logger.setVerbose(!Logger.isVerbose());
+      Logger.show();
+      vscode.window.showInformationMessage(
+        `Markdown Checkbox Preview: Debug logging ${Logger.isVerbose() ? 'enabled' : 'disabled'}`
+      );
+    }
+  );
+
   const refreshTreeDisposable = vscode.commands.registerCommand('checkboxTree.refresh', () => {
     treeDataProvider.refresh();
   });
@@ -109,6 +120,7 @@ export function activate(context: vscode.ExtensionContext) {
   context.subscriptions.push(
     openPreviewDisposable,
     toggleAutoPreviewDisposable,
+    toggleDebugDisposable,
     refreshTreeDisposable,
     toggleCheckboxDisposable,
     navigateToHeaderDisposable,
@@ -221,6 +233,8 @@ function openCheckboxPreview(
 
   // Handle document changes with debouncing to avoid flooding webview
   let updateTimeout: NodeJS.Timeout | undefined;
+  let isTogglingCheckbox = false;
+  
   const changeDisposable = vscode.workspace.onDidChangeTextDocument(event => {
     if (event.document.uri.toString() === document.uri.toString()) {
       Logger.debug(`Document change detected for ${document.uri.toString()} (${event.contentChanges.length} change(s))`);
@@ -230,17 +244,31 @@ function openCheckboxPreview(
         clearTimeout(updateTimeout);
       }
 
-      // Debounce updates by 150ms to batch rapid changes
+      // Use shorter debounce for checkbox toggles (faster feedback)
+      const debounceTime = isTogglingCheckbox ? 50 : 150;
+      
+      // Debounce updates to batch rapid changes
       updateTimeout = setTimeout(() => {
         const newContent = event.document.getText();
-        const html = renderMarkdown(newContent);
+        
+        if (isTogglingCheckbox) {
+          // For checkbox toggles, send only checkbox states (targeted update)
+          const checkboxStates = extractCheckboxStates(newContent);
+          sendMessage({
+            type: 'syncCheckboxes',
+            checkboxes: checkboxStates
+          });
+        } else {
+          // For other changes, do full rerender
+          const html = renderMarkdown(newContent);
+          sendMessage({
+            type: 'rerender',
+            html: html
+          });
+        }
+        
+        // Always update progress
         const stats = getTaskListCount(newContent);
-
-        sendMessage({
-          type: 'rerender',
-          html: html
-        });
-
         sendMessage({
           type: 'updateProgress',
           completed: stats.completed,
@@ -251,7 +279,10 @@ function openCheckboxPreview(
         if (treeDataProvider) {
           treeDataProvider.refresh();
         }
-      }, 150);
+        
+        // Reset checkbox toggle flag
+        isTogglingCheckbox = false;
+      }, debounceTime);
     }
   });
 
@@ -282,14 +313,43 @@ function openCheckboxPreview(
   // Handle messages from the webview
   panel.webview.onDidReceiveMessage(message => {
     Logger.debug(`Received webview message: ${message.type}`);
+    
+    // Prefer editing the document currently tracked by the preview manager
+    const previewUri = autoPreviewManager?.getCurrentDocumentUri();
+    
     switch (message.type) {
       case 'toggle':
         Logger.debug(`Toggling checkbox at line ${message.line}`);
-        toggleCheckboxAtLine(editor, message.line);
+        isTogglingCheckbox = true;
+        if (previewUri) {
+          toggleCheckboxInDocumentUri(previewUri, message.line);
+        } else {
+          // Fallback to active editor
+          const currentEditor = vscode.window.activeTextEditor;
+          if (currentEditor) {
+            toggleCheckboxAtLine(currentEditor, message.line);
+          } else {
+            Logger.error('No document available to toggle checkbox');
+          }
+        }
         break;
       case 'navigate':
         Logger.debug(`Navigating to line ${message.line}`);
-        navigateToLine(editor, message.line);
+        // Prefer to navigate in the previewed document if available
+        if (previewUri) {
+          const doc = vscode.workspace.textDocuments.find(d => d.uri.toString() === previewUri.toString());
+          const editor = vscode.window.visibleTextEditors.find(e => e.document === doc);
+          if (editor) {
+            navigateToLine(editor, message.line);
+          } else if (doc) {
+            vscode.window.showTextDocument(doc).then(ed => navigateToLine(ed, message.line));
+          }
+        } else {
+          const currentEditor = vscode.window.activeTextEditor;
+          if (currentEditor) {
+            navigateToLine(currentEditor, message.line);
+          }
+        }
         break;
     }
   });
@@ -320,6 +380,8 @@ function openCheckboxPreview(
 function toggleCheckboxAtLine(editor: vscode.TextEditor, lineNumber: number) {
   const document = editor.document;
 
+  Logger.info(`Toggle checkbox requested: line=${lineNumber}, documentUri=${document.uri.toString()}`);
+
   if (lineNumber >= document.lineCount) {
     Logger.warn(`Toggle requested for line ${lineNumber} beyond document length ${document.lineCount}`);
     return;
@@ -328,30 +390,39 @@ function toggleCheckboxAtLine(editor: vscode.TextEditor, lineNumber: number) {
   const line = document.lineAt(lineNumber);
   const lineText = line.text;
 
+  Logger.debug(`Current line text: "${lineText}"`);
+
   // Match different checkbox patterns
   let updatedText = lineText;
 
   // Handle [ ] -> [x]
   if (lineText.includes('[ ]')) {
     updatedText = lineText.replace(/\[ \]/, '[x]');
+    Logger.debug(`Toggling unchecked -> checked`);
   }
   // Handle [x] -> [ ] (both lowercase and uppercase)
   else if (lineText.match(/\[[xX]\]/)) {
     updatedText = lineText.replace(/\[[xX]\]/, '[ ]');
+    Logger.debug(`Toggling checked -> unchecked`);
+  } else {
+    Logger.warn(`No checkbox pattern found in line ${lineNumber}: "${lineText}"`);
   }
 
   // Apply the edit if there was a change
   if (updatedText !== lineText) {
+    Logger.info(`Applying edit to line ${lineNumber}: "${lineText}" -> "${updatedText}"`);
     editor.edit(editBuilder => {
       editBuilder.replace(line.range, updatedText);
     }).then(success => {
       if (!success) {
         vscode.window.showErrorMessage('Failed to update checkbox state');
         Logger.error(`Failed to apply checkbox toggle at line ${lineNumber}`);
       } else {
-        Logger.debug(`Checkbox toggled at line ${lineNumber}`);
+        Logger.info(`✅ Checkbox successfully toggled at line ${lineNumber}`);
       }
     });
+  } else {
+    Logger.warn(`No change needed for line ${lineNumber}`);
   }
 }
 
@@ -715,6 +786,45 @@ function getWebviewContent(webview: vscode.Webview, context: vscode.ExtensionCon
 </html>`;
 }
 
+/**
+ * Toggle a checkbox in a document by URI using WorkspaceEdit
+ * Exported for testing purposes
+ * 
+ * @param uri Document URI
+ * @param lineNumber Zero-based line number
+ */
+export async function toggleCheckboxInDocumentUri(uri: vscode.Uri, lineNumber: number): Promise<boolean> {
+  try {
+    const doc = await vscode.workspace.openTextDocument(uri);
+    const line = doc.lineAt(lineNumber);
+    const lineText = line.text;
+
+    let updatedText = lineText;
+    if (/\[ \]/.test(lineText)) {
+      updatedText = lineText.replace(/\[ \]/, '[x]');
+    } else if (/\[[xX]\]/.test(lineText)) {
+      updatedText = lineText.replace(/\[[xX]\]/, '[ ]');
+    } else {
+      Logger.warn(`No checkbox found at line ${lineNumber} in ${uri.toString()}`);
+      return false;
+    }
+
+    const edit = new vscode.WorkspaceEdit();
+    edit.replace(uri, line.range, updatedText);
+    const success = await vscode.workspace.applyEdit(edit);
+    if (!success) {
+      Logger.error(`WorkspaceEdit failed for ${uri.toString()} at line ${lineNumber}`);
+      return false;
+    } else {
+      Logger.info(`Checkbox toggled in document ${uri.toString()} at line ${lineNumber}`);
+      return true;
+    }
+  } catch (err) {
+    Logger.error('Failed to toggle checkbox by URI', err);
+    return false;
+  }
+}
+
 export function deactivate() {
   // Cleanup when extension is deactivated
 }