feat: add Reset All button to EditControl panel

Add the missing "Reset All" functionality from Legacy Document Control to the enhanced EditControl panel for complete feature parity. ## New Functionality - Added "Reset All" button in Document Actions section - Comprehensive reset functionality with user confirmation - Resets font size, editing mode, unsaved changes, highlights - Integrates with SectionManager, DocumentControls, and DebugControl - Offers page reload as ultimate fallback for complete reset ## Implementation Details - Button styled consistently with Legacy Document Control (🔄 Reset All) - Uses #ffc107 background with #212529 text to match legacy styling - Comprehensive confirmation dialog explains all actions - Safe operation wrapper with proper error handling - Graceful fallbacks when integrated components are unavailable ## Integration - Deployed to both markitect system and deployment source - Compatible with existing enhanced ControlBase architecture - Maintains consistency with other EditControl actions - Ready for immediate use in production environment Users now have access to the familiar Reset All functionality within the modern enhanced control panel system. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-14 15:25:29 +01:00
parent 79c6c9d4e4
commit ca431ac11f
5 changed files with 360 additions and 0 deletions
--- a/TODO.html
+++ b/TODO.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="generator" content="TestDrive JSUI Markitect 1.0.0">
+    <title>TestDrive JSUI Document</title>
+
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 2rem;
+            line-height: 1.6;
+            color: #333333;
+            background-color: #ffffff;
+        }
+        #markdown-content {
+            min-height: 200px;
+        }
+        h1, h2, h3, h4, h5, h6 {
+            color: #333333;
+        }
+        pre {
+            background-color: #f6f8fa;
+            color: #333333;
+            padding: 1rem;
+            border-radius: 6px;
+            overflow-x: auto;
+            border: 1px solid #d0d7de;
+        }
+        code {
+            background-color: #f6f8fa;
+            color: #333333;
+            padding: 0.2em 0.4em;
+            border-radius: 3px;
+            font-size: 0.9em;
+        }
+        pre code {
+            background: none;
+            padding: 0;
+        }
+        blockquote {
+            border-left: 4px solid #dfe2e5;
+            margin: 0;
+            padding-left: 1rem;
+            color: #6a737d;
+        }
+        table {
+            font-size: 0.85em;
+            border-collapse: collapse;
+            margin: 1rem 0;
+            width: 100%;
+            border: 1px solid #d0d7de;
+        }
+        th, td {
+            font-size: inherit;
+            border: 1px solid #d0d7de;
+            padding: 0.5rem;
+            text-align: left;
+        }
+        th {
+            background-color: #f6f8fa;
+            font-weight: 600;
+        }
+        img {
+            max-width: 12cm;
+            max-height: 20cm;
+            height: auto;
+            display: block;
+            margin: 1rem auto;
+        }
+    </style>
+
+    <!-- Plugin-specific CSS -->
+    <link rel="stylesheet" href="_markitect/plugins/testdrive-jsui/static/css/editor.css">
+<link rel="stylesheet" href="_markitect/plugins/testdrive-jsui/static/css/controls.css">
+<link rel="stylesheet" href="_markitect/plugins/testdrive-jsui/static/css/themes/github.css">
+
+    <!-- External dependencies -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"
+            onload="window.markitectMarkedLoaded = true"
+            onerror="console.error('CDN library failed to load - network or firewall blocking marked.js'); window.markitectMarkedError = true;"></script>
+</head>
+<body class="markitect-edit-mode">
+
+    <!-- Content container with fallback content -->
+    <div id="markdown-content">
+        <h1>Todofile</h1></p><p>This is a "to do next" file, particularly useful to keep the human and a coding assistant in sync.</p><p>The format is based on [Keep a Todofile V0.0.1](https://coulomb.social/open/KeepaTodofile).</p><p>The structure organizes **future tasks** by their impact, just as a changelog organizes past changes by their impact.</p><p>***</p><p><h2>[Unreleased] - *Active Vibe-Coding State* 💡</h2></p><p>This section is for tasks currently being discussed with or worked on by the coding assistant. These are the ephemeral, flow-of-thought tasks.</p><p>*No active tasks at this time.*</p><p>***</p><p><h2>Completed Tasks</h2></p><p>*Recent completed tasks have been documented in CHANGELOG.md following Keep a Changelog format.*
+    </div>
+
+    <!-- Configuration Data Interface - Clean JSON configuration -->
+    <script id="markitect-config" type="application/json">{
+  "markdownContent": "# Todofile\n\nThis is a \"to do next\" file, particularly useful to keep the human and a coding assistant in sync.\n\nThe format is based on [Keep a Todofile V0.0.1](https://coulomb.social/open/KeepaTodofile).\n\nThe structure organizes **future tasks** by their impact, just as a changelog organizes past changes by their impact.\n\n***\n\n## [Unreleased] - *Active Vibe-Coding State* \ud83d\udca1\n\nThis section is for tasks currently being discussed with or worked on by the coding assistant. These are the ephemeral, flow-of-thought tasks.\n\n*No active tasks at this time.*\n\n***\n\n## Completed Tasks\n\n*Recent completed tasks have been documented in CHANGELOG.md following Keep a Changelog format.*",
+  "markdownContentWithDogtag": "# Todofile\n\nThis is a \"to do next\" file, particularly useful to keep the human and a coding assistant in sync.\n\nThe format is based on [Keep a Todofile V0.0.1](https://coulomb.social/open/KeepaTodofile).\n\nThe structure organizes **future tasks** by their impact, just as a changelog organizes past changes by their impact.\n\n***\n\n## [Unreleased] - *Active Vibe-Coding State* \ud83d\udca1\n\nThis section is for tasks currently being discussed with or worked on by the coding assistant. These are the ephemeral, flow-of-thought tasks.\n\n*No active tasks at this time.*\n\n***\n\n## Completed Tasks\n\n*Recent completed tasks have been documented in CHANGELOG.md following Keep a Changelog format.*",
+  "dogtagContent": "",
+  "mode": "edit",
+  "theme": "github",
+  "keyboardShortcuts": true,
+  "autosave": false,
+  "sections": true,
+  "originalFilename": "document",
+  "base64References": {},
+  "version": "Markitect 1.0.0",
+  "repoName": "Markitect"
+}</script>
+
+    <!-- Plugin JavaScript Assets -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<script src="_markitect/plugins/testdrive-jsui/static/js/core/debug-system.js"></script>
+<script src="_markitect/plugins/testdrive-jsui/static/js/core/section-manager.js"></script>
+<script src="_markitect/plugins/testdrive-jsui/static/js/components/debug-panel.js"></script>
+<script src="_markitect/plugins/testdrive-jsui/static/js/components/document-controls.js"></script>
+<script src="_markitect/plugins/testdrive-jsui/static/js/components/dom-renderer.js"></script>
+<script src="_markitect/plugins/testdrive-jsui/static/js/controls/control-base.js"></script>
+<script src="_markitect/plugins/testdrive-jsui/static/js/controls/contents-control.js"></script>
+<script src="_markitect/plugins/testdrive-jsui/static/js/controls/status-control.js"></script>
+<script src="_markitect/plugins/testdrive-jsui/static/js/controls/debug-control.js"></script>
+<script src="_markitect/plugins/testdrive-jsui/static/js/controls/edit-control.js"></script>
+<script src="_markitect/plugins/testdrive-jsui/static/js/config-loader.js"></script>
+<script src="_markitect/plugins/testdrive-jsui/static/js/main-updated.js"></script>
+
+    <!-- Initialization Script -->
+    <script>
+        window.addEventListener('load', function() {
+            console.log('🎯 TestDrive JSUI loading complete, initializing...');
+
+            // Handle CDN loading errors
+            if (window.markitectMarkedError) {
+                console.error("CDN library failed to load - network or firewall blocking marked.js");
+            }
+
+            // Initialize main application
+            try {
+                if (typeof MarkitectMain !== 'undefined') {
+                    console.log('🚀 Starting MarkitectMain initialization...');
+                    MarkitectMain.initialize();
+                } else {
+                    console.warn('⚠️ MarkitectMain not available, edit functionality may be limited');
+                }
+            } catch (error) {
+                console.error('❌ TestDrive JSUI initialization failed:', error);
+                console.log('📄 Content should still be visible in fallback mode');
+            }
+        });
+    </script>
+</body>
+</html>
--- a/capabilities/testdrive-jsui/js/controls/edit-control.js
+++ b/capabilities/testdrive-jsui/js/controls/edit-control.js
@@ -88,6 +88,11 @@ class EditControl extends ControlBase {
                                style="width: 100%; padding: 0.5rem; margin-bottom: 0.3rem; background: #17a2b8; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.8rem;">
                            📄 Export Document
                        </button>
+
+                        <button onclick="this.closest('.edit-control').editControl.resetAll()"
+                                style="width: 100%; padding: 0.5rem; margin-bottom: 0.3rem; background: #ffc107; color: #212529; border: none; border-radius: 3px; cursor: pointer; font-size: 0.8rem;">
+                            🔄 Reset All
+                        </button>
                    </div>

                    <!-- Navigation Tools -->
@@ -296,6 +301,69 @@ class EditControl extends ControlBase {
        URL.revokeObjectURL(url);
    }

+    /**
+     * Reset all changes and restore document to original state
+     */
+    resetAll() {
+        return this.safeOperation(() => {
+            // Show confirmation dialog
+            const confirmed = window.confirm(
+                'Reset all changes?\n\nThis will:\n' +
+                '• Restore document to original state\n' +
+                '• Clear all unsaved changes\n' +
+                '• Reset font size and other settings\n\n' +
+                'This action cannot be undone.'
+            );
+
+            if (!confirmed) {
+                this.showActionFeedback('🚫 Reset cancelled', '#6c757d');
+                return;
+            }
+
+            // Reset edit control state
+            this.fontSize = 16;
+            this.editingMode = 'view';
+            this.unsavedChanges = false;
+            this.lastSaveTime = null;
+
+            // Reset font size
+            this.applyFontSize();
+
+            // Clear any highlights
+            document.querySelectorAll('.edit-highlight').forEach(el => {
+                el.outerHTML = el.innerHTML;
+            });
+
+            // Try to reset sections if SectionManager is available
+            if (window.sectionManager && typeof window.sectionManager.resetAllSections === 'function') {
+                window.sectionManager.resetAllSections();
+            }
+
+            // Try to reset document controls if available
+            if (window.documentControls && typeof window.documentControls.resetAllChanges === 'function') {
+                window.documentControls.resetAllChanges();
+            }
+
+            // Clear any debug messages if debug control is available
+            if (window.debugControl && typeof window.debugControl.clearMessages === 'function') {
+                window.debugControl.clearMessages();
+            }
+
+            // Reload the page as ultimate fallback
+            if (window.confirm('Reload page to complete reset?')) {
+                window.location.reload();
+                return;
+            }
+
+            // Update the control display
+            this.buildContent();
+
+            // Show feedback
+            this.showActionFeedback('🔄 All changes reset', '#ffc107', '#212529');
+
+        }, null, 'resetAll');
+    }
+
    /**
     * Scroll to top of document
     */
--- a/cost_notes/25114-botched_refactoring_recovery.md
+++ b/cost_notes/25114-botched_refactoring_recovery.md
@@ -0,0 +1,7 @@
+Total cost:            $18.34
+Total duration (API):  49m 10.0s
+Total duration (wall): 10h 38m 0.7s
+Total code changes:    6105 lines added, 186 lines removed
+Usage by model:
+    claude-3-5-haiku:  58.3k input, 7.3k output, 0 cache read, 0 cache write ($0.0760)
+       claude-sonnet:  9.1k input, 141.0k output, 31.7m cache read, 1.8m cache write ($18.27)
--- a/markitect/static/js/controls/edit-control.js
+++ b/markitect/static/js/controls/edit-control.js
@@ -88,6 +88,11 @@ class EditControl extends ControlBase {
                                style="width: 100%; padding: 0.5rem; margin-bottom: 0.3rem; background: #17a2b8; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.8rem;">
                            📄 Export Document
                        </button>
+
+                        <button onclick="this.closest('.edit-control').editControl.resetAll()"
+                                style="width: 100%; padding: 0.5rem; margin-bottom: 0.3rem; background: #ffc107; color: #212529; border: none; border-radius: 3px; cursor: pointer; font-size: 0.8rem;">
+                            🔄 Reset All
+                        </button>
                    </div>

                    <!-- Navigation Tools -->
@@ -296,6 +301,69 @@ class EditControl extends ControlBase {
        URL.revokeObjectURL(url);
    }

+    /**
+     * Reset all changes and restore document to original state
+     */
+    resetAll() {
+        return this.safeOperation(() => {
+            // Show confirmation dialog
+            const confirmed = window.confirm(
+                'Reset all changes?\n\nThis will:\n' +
+                '• Restore document to original state\n' +
+                '• Clear all unsaved changes\n' +
+                '• Reset font size and other settings\n\n' +
+                'This action cannot be undone.'
+            );
+
+            if (!confirmed) {
+                this.showActionFeedback('🚫 Reset cancelled', '#6c757d');
+                return;
+            }
+
+            // Reset edit control state
+            this.fontSize = 16;
+            this.editingMode = 'view';
+            this.unsavedChanges = false;
+            this.lastSaveTime = null;
+
+            // Reset font size
+            this.applyFontSize();
+
+            // Clear any highlights
+            document.querySelectorAll('.edit-highlight').forEach(el => {
+                el.outerHTML = el.innerHTML;
+            });
+
+            // Try to reset sections if SectionManager is available
+            if (window.sectionManager && typeof window.sectionManager.resetAllSections === 'function') {
+                window.sectionManager.resetAllSections();
+            }
+
+            // Try to reset document controls if available
+            if (window.documentControls && typeof window.documentControls.resetAllChanges === 'function') {
+                window.documentControls.resetAllChanges();
+            }
+
+            // Clear any debug messages if debug control is available
+            if (window.debugControl && typeof window.debugControl.clearMessages === 'function') {
+                window.debugControl.clearMessages();
+            }
+
+            // Reload the page as ultimate fallback
+            if (window.confirm('Reload page to complete reset?')) {
+                window.location.reload();
+                return;
+            }
+
+            // Update the control display
+            this.buildContent();
+
+            // Show feedback
+            this.showActionFeedback('🔄 All changes reset', '#ffc107', '#212529');
+
+        }, null, 'resetAll');
+    }
+
    /**
     * Scroll to top of document
     */
--- a/testdrive-jsui/static/js/controls/edit-control.js
+++ b/testdrive-jsui/static/js/controls/edit-control.js
@@ -88,6 +88,11 @@ class EditControl extends ControlBase {
                                style="width: 100%; padding: 0.5rem; margin-bottom: 0.3rem; background: #17a2b8; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.8rem;">
                            📄 Export Document
                        </button>
+
+                        <button onclick="this.closest('.edit-control').editControl.resetAll()"
+                                style="width: 100%; padding: 0.5rem; margin-bottom: 0.3rem; background: #ffc107; color: #212529; border: none; border-radius: 3px; cursor: pointer; font-size: 0.8rem;">
+                            🔄 Reset All
+                        </button>
                    </div>

                    <!-- Navigation Tools -->
@@ -296,6 +301,69 @@ class EditControl extends ControlBase {
        URL.revokeObjectURL(url);
    }

+    /**
+     * Reset all changes and restore document to original state
+     */
+    resetAll() {
+        return this.safeOperation(() => {
+            // Show confirmation dialog
+            const confirmed = window.confirm(
+                'Reset all changes?\n\nThis will:\n' +
+                '• Restore document to original state\n' +
+                '• Clear all unsaved changes\n' +
+                '• Reset font size and other settings\n\n' +
+                'This action cannot be undone.'
+            );
+
+            if (!confirmed) {
+                this.showActionFeedback('🚫 Reset cancelled', '#6c757d');
+                return;
+            }
+
+            // Reset edit control state
+            this.fontSize = 16;
+            this.editingMode = 'view';
+            this.unsavedChanges = false;
+            this.lastSaveTime = null;
+
+            // Reset font size
+            this.applyFontSize();
+
+            // Clear any highlights
+            document.querySelectorAll('.edit-highlight').forEach(el => {
+                el.outerHTML = el.innerHTML;
+            });
+
+            // Try to reset sections if SectionManager is available
+            if (window.sectionManager && typeof window.sectionManager.resetAllSections === 'function') {
+                window.sectionManager.resetAllSections();
+            }
+
+            // Try to reset document controls if available
+            if (window.documentControls && typeof window.documentControls.resetAllChanges === 'function') {
+                window.documentControls.resetAllChanges();
+            }
+
+            // Clear any debug messages if debug control is available
+            if (window.debugControl && typeof window.debugControl.clearMessages === 'function') {
+                window.debugControl.clearMessages();
+            }
+
+            // Reload the page as ultimate fallback
+            if (window.confirm('Reload page to complete reset?')) {
+                window.location.reload();
+                return;
+            }
+
+            // Update the control display
+            this.buildContent();
+
+            // Show feedback
+            this.showActionFeedback('🔄 All changes reset', '#ffc107', '#212529');
+
+        }, null, 'resetAll');
+    }
+
    /**
     * Scroll to top of document
     */