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

test_image_editor_debug.js

@@ -0,0 +1,202 @@
+#!/usr/bin/env node
+
+/**
+ * Debug Image Editor Issues
+ *
+ * Tests to identify why the image editor is not working
+ */
+
+const { TestRunner } = require('./test_runner.js');
+const runner = new TestRunner();
+
+runner.describe('Image Editor Debug Tests', () => {
+
+    runner.it('should successfully call showImageEditor method', async () => {
+        // Load editor
+        delete require.cache[require.resolve('/home/worsch/markitect_project/markitect/static/editor.js')];
+        require('/home/worsch/markitect_project/markitect/static/editor.js');
+
+        if (global.DOMRenderer && global.SectionManager) {
+            const container = document.createElement('div');
+            container.innerHTML = '<div id="markdown-content"></div>';
+            document.body.appendChild(container);
+
+            const manager = new global.SectionManager();
+            const renderer = new global.DOMRenderer(manager, container);
+
+            // Create image section
+            const imageMarkdown = '![Test Image](https://via.placeholder.com/400x200)';
+            const sections = manager.createSectionsFromMarkdown(imageMarkdown);
+            const imageSection = sections[0];
+
+            runner.expect(imageSection.isImage()).toBeTruthy();
+
+            const mockElement = document.createElement('div');
+            mockElement.setAttribute('data-section-id', imageSection.id);
+            Object.defineProperties(mockElement, {
+                getBoundingClientRect: {
+                    value: () => ({ top: 100, right: 400, bottom: 200, left: 50, width: 350, height: 100 })
+                }
+            });
+
+            renderer.findSectionElement = () => mockElement;
+
+            // Try to show image editor
+            try {
+                renderer.showImageEditor(imageSection.id, imageSection);
+
+                // Check if floating menu was created
+                const floatingMenu = document.querySelector('.ui-edit-floating-menu[data-edit-type="image"]');
+                runner.expect(floatingMenu).toBeTruthy();
+
+                // Check if it has image-specific content
+                const imagePreview = floatingMenu.querySelector('.ui-edit-image-preview');
+                const altTextInput = floatingMenu.querySelector('input[type="text"]');
+
+                runner.expect(imagePreview).toBeTruthy();
+                runner.expect(altTextInput).toBeTruthy();
+                runner.expect(altTextInput.value).toBe('Test Image');
+
+                // Cleanup
+                floatingMenu.remove();
+            } catch (error) {
+                console.error('Error in showImageEditor:', error);
+                runner.expect(false).toBeTruthy(); // Fail the test
+            }
+
+            // Cleanup
+            document.body.removeChild(container);
+        }
+    });
+
+    runner.it('should detect image sections correctly', async () => {
+        if (global.SectionManager) {
+            const manager = new global.SectionManager();
+
+            // Test various image formats
+            const imageMarkdowns = [
+                '![Alt text](image.jpg)',
+                '![](image.png)',
+                '![Long alt text description](https://example.com/image.gif)',
+                '![Test](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA)'
+            ];
+
+            imageMarkdowns.forEach((markdown, index) => {
+                const sections = manager.createSectionsFromMarkdown(markdown);
+                const section = sections[0];
+
+                console.log(`Testing markdown ${index}: ${markdown}`);
+                console.log(`Section type: ${section.constructor.name}`);
+                console.log(`isImage(): ${section.isImage()}`);
+
+                runner.expect(section.isImage()).toBeTruthy();
+            });
+        }
+    });
+
+    runner.it('should handle image editor button creation without errors', async () => {
+        if (global.DOMRenderer && global.SectionManager) {
+            const container = document.createElement('div');
+            container.innerHTML = '<div id="markdown-content"></div>';
+            document.body.appendChild(container);
+
+            const manager = new global.SectionManager();
+            const renderer = new global.DOMRenderer(manager, container);
+
+            // Test button creation methods
+            try {
+                const testBtn1 = renderer.createButton('Test', 'test-class', () => {});
+                runner.expect(testBtn1).toBeTruthy();
+                runner.expect(testBtn1.tagName).toBe('BUTTON');
+
+                const testBtn2 = renderer.createButton('✓ Accept', 'ui-edit-accept', () => {});
+                runner.expect(testBtn2).toBeTruthy();
+                runner.expect(testBtn2.textContent).toBe('✓ Accept');
+
+            } catch (error) {
+                console.error('Error creating buttons:', error);
+                runner.expect(false).toBeTruthy();
+            }
+
+            // Cleanup
+            document.body.removeChild(container);
+        }
+    });
+
+    runner.it('should check for syntax errors in image editor method', async () => {
+        if (global.DOMRenderer && global.SectionManager) {
+            const container = document.createElement('div');
+            container.innerHTML = '<div id="markdown-content"></div>';
+            document.body.appendChild(container);
+
+            const manager = new global.SectionManager();
+            const renderer = new global.DOMRenderer(manager, container);
+
+            // Verify method exists and is callable
+            runner.expect(typeof renderer.showImageEditor).toBe('function');
+
+            const imageMarkdown = '![Test](test.jpg)';
+            const sections = manager.createSectionsFromMarkdown(imageMarkdown);
+            const imageSection = sections[0];
+
+            const mockElement = document.createElement('div');
+            mockElement.setAttribute('data-section-id', imageSection.id);
+            Object.defineProperties(mockElement, {
+                getBoundingClientRect: {
+                    value: () => ({ top: 100, right: 400, bottom: 200, left: 50, width: 350, height: 100 })
+                }
+            });
+
+            renderer.findSectionElement = () => mockElement;
+
+            // Check if we can at least start the method without throwing
+            let methodStarted = false;
+            try {
+                // Mock createFloatingMenu to see if we get that far
+                const originalCreateFloatingMenu = renderer.createFloatingMenu;
+                renderer.createFloatingMenu = function() {
+                    methodStarted = true;
+                    return originalCreateFloatingMenu.apply(this, arguments);
+                };
+
+                renderer.showImageEditor(imageSection.id, imageSection);
+                runner.expect(methodStarted).toBeTruthy();
+
+            } catch (error) {
+                console.error('Method failed before reaching createFloatingMenu:', error);
+                console.error('Stack trace:', error.stack);
+                runner.expect(false).toBeTruthy();
+            }
+
+            // Cleanup
+            document.body.removeChild(container);
+            const floatingMenu = document.querySelector('.ui-edit-floating-menu');
+            if (floatingMenu) floatingMenu.remove();
+        }
+    });
+});
+
+// Run the tests
+if (require.main === module) {
+    console.log('🔍 Running Image Editor Debug Tests');
+    runner.run().then(() => {
+        const results = runner.results;
+        const failed = results.filter(r => r.status === 'FAIL').length;
+
+        if (failed > 0) {
+            console.log(`❌ ${failed} test(s) failed - image editor has issues`);
+            results.forEach(result => {
+                if (result.status === 'FAIL') {
+                    console.log(`\nFailed test: ${result.name}`);
+                    if (result.error) {
+                        console.log(`Error: ${result.error}`);
+                    }
+                }
+            });
+        } else {
+            console.log('✅ All image editor debug tests passed!');
+        }
+    });
+}
+
+module.exports = runner;