refactor: Still trying to reorganize edit mode to be more robust

test_image_reset_debug.js

@@ -0,0 +1,120 @@
+#!/usr/bin/env node
+
+/**
+ * Debug the image reset button functionality with detailed logging
+ */
+
+const fs = require('fs');
+const { JSDOM } = require('jsdom');
+
+// Load the generated HTML file
+const htmlContent = fs.readFileSync('/tmp/test_image_reset_debug.html', 'utf8');
+
+// Create JSDOM environment
+const dom = new JSDOM(htmlContent, {
+    runScripts: "dangerously",
+    resources: "usable",
+    pretendToBeVisual: true
+});
+
+const { window } = dom;
+const { document } = window;
+
+// Add console methods to window for debugging
+window.console = console;
+
+// Mock viewport dimensions
+window.innerWidth = 1200;
+window.innerHeight = 800;
+
+// Wait for DOM to load and components to initialize
+setTimeout(() => {
+    try {
+        console.log('🔍 Debugging Image Reset Button...\n');
+
+        const components = window.markitectComponents;
+        if (!components) {
+            console.error('❌ Components not initialized');
+            return;
+        }
+
+        const sections = document.querySelectorAll('.ui-edit-section');
+        console.log(`Found ${sections.length} sections`);
+
+        // Find the image section
+        const imageSection = Array.from(sections).find(section => {
+            const sectionId = section.getAttribute('data-section-id');
+            const sectionObj = components.sectionManager.sections.get(sectionId);
+            return sectionObj && sectionObj.isImage();
+        });
+
+        if (!imageSection) {
+            console.error('❌ No image section found');
+            return;
+        }
+
+        const sectionId = imageSection.getAttribute('data-section-id');
+        const sectionObj = components.sectionManager.sections.get(sectionId);
+
+        console.log('📝 Image Section Details:');
+        console.log(`  Section ID: ${sectionId}`);
+        console.log(`  Current markdown: "${sectionObj.currentMarkdown}"`);
+        console.log(`  Original markdown: "${sectionObj.originalMarkdown}"`);
+
+        // Click image section to open editor
+        console.log('\n🖱️  Clicking image section...');
+        imageSection.click();
+
+        setTimeout(() => {
+            const floatingMenu = document.querySelector('.ui-edit-floating-menu');
+
+            if (floatingMenu) {
+                console.log('✅ Image editor opened');
+
+                const altTextInput = floatingMenu.querySelector('input[type="text"]');
+                const resetButton = Array.from(floatingMenu.querySelectorAll('button'))
+                    .find(btn => btn.textContent.includes('Reset'));
+
+                if (altTextInput && resetButton) {
+                    const originalAltText = altTextInput.value;
+                    console.log(`📝 Original alt text: "${originalAltText}"`);
+
+                    // Modify alt text
+                    console.log('\n✏️  Modifying alt text...');
+                    altTextInput.value = "MODIFIED ALT TEXT";
+                    altTextInput.dispatchEvent(new window.Event('input'));
+                    console.log(`Modified alt text: "${altTextInput.value}"`);
+
+                    // Wait for staging state to update
+                    setTimeout(() => {
+                        console.log('\n🔄 Clicking reset button...');
+                        resetButton.click();
+
+                        setTimeout(() => {
+                            const finalAltText = altTextInput.value;
+                            console.log(`\n📝 Final alt text: "${finalAltText}"`);
+
+                            if (finalAltText === originalAltText) {
+                                console.log('✅ Image reset worked correctly!');
+                            } else {
+                                console.log('❌ Image reset failed!');
+                                console.log(`  Expected: "${originalAltText}"`);
+                                console.log(`  Got: "${finalAltText}"`);
+                            }
+
+                        }, 200);
+                    }, 200);
+
+                } else {
+                    console.log(`❌ Missing elements - Alt Input: ${!!altTextInput}, Reset Button: ${!!resetButton}`);
+                }
+            } else {
+                console.log('❌ Image editor failed to open');
+            }
+        }, 300);
+
+    } catch (error) {
+        console.error('❌ Test failed:', error.message);
+        console.error(error.stack);
+    }
+}, 1000);