From ea632a262497b0d750c3620972f482f80b704c4e Mon Sep 17 00:00:00 2001 From: tegwick Date: Sun, 2 Nov 2025 16:49:58 +0100 Subject: [PATCH] fix: ensure accept, cancel, and reset buttons properly close image editing UI MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixed critical UI closure issue in image section editing: 1. **Root Issue**: The `hideEditor()` method was not removing editor containers from DOM, causing editing UI to remain visible after button clicks 2. **hideEditor() Enhancement**: - Now properly removes both `.ui-edit-editor-container` and `.ui-edit-image-editor-container` from DOM - Ensures complete UI cleanup when editors are closed - Handles cases where no containers exist gracefully 3. **Button Behavior Fixes**: - **Accept**: Saves alt text changes, accepts changes, and closes UI completely - **Cancel**: Discards changes and closes UI completely - **Reset**: Resets to original content, updates display, and closes UI completely - All buttons now provide immediate visual feedback with complete UI closure 4. **Reset Button Logic Fix**: - Removed reopening of image editor after reset (was keeping UI open) - Now properly closes UI and shows reset content in display mode - Provides better user experience with clear completion feedback Added comprehensive test suite with 7 tests covering DOM manipulation and UI closure. All image editing buttons now behave consistently with proper UI cleanup. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- markitect/static/editor.js | 25 ++-- test_image_ui_closure.js | 227 +++++++++++++++++++++++++++++++++++++ 2 files changed, 244 insertions(+), 8 deletions(-) create mode 100644 test_image_ui_closure.js diff --git a/markitect/static/editor.js b/markitect/static/editor.js index 5e080bb1..7ac4d7ab 100644 --- a/markitect/static/editor.js +++ b/markitect/static/editor.js @@ -1945,17 +1945,15 @@ class DOMRenderer { this.hideEditor(sectionId); }); const resetBtn = this.createButton('↺ Reset', 'ui-edit-reset', (e) => { - // Reset section to original content and refresh image editor + // Reset section to original content and close editor this.sectionManager.resetSection(sectionId); this.hideEditor(sectionId); - // Refresh the image editor with reset content - setTimeout(() => { - const resetSection = this.sectionManager.sections.get(sectionId); - if (resetSection) { - this.showImageEditor(sectionId, resetSection); - } - }, 100); + // Update the section content to reflect the reset immediately + const resetSection = this.sectionManager.sections.get(sectionId); + if (resetSection) { + this.updateSectionContent(sectionId, resetSection.currentMarkdown); + } }); acceptBtn.style.background = '#28a745'; @@ -2163,6 +2161,17 @@ class DOMRenderer { const element = this.findSectionElement(sectionId); if (!element) return; + // Remove any editor UI containers from the DOM + const textEditorContainer = element.querySelector('.ui-edit-editor-container'); + if (textEditorContainer) { + textEditorContainer.remove(); + } + + const imageEditorContainer = element.querySelector('.ui-edit-image-editor-container'); + if (imageEditorContainer) { + imageEditorContainer.remove(); + } + const section = this.sectionManager.sections.get(sectionId); if (section) { this.updateSectionContent(sectionId, section.currentMarkdown); diff --git a/test_image_ui_closure.js b/test_image_ui_closure.js new file mode 100644 index 00000000..def25310 --- /dev/null +++ b/test_image_ui_closure.js @@ -0,0 +1,227 @@ +#!/usr/bin/env node + +/** + * Test Image UI Closure + * + * Tests to verify that accept, cancel, and reset buttons properly close the image editing UI + */ + +const { TestRunner } = require('./test_runner.js'); +const runner = new TestRunner(); + +runner.describe('Image UI Closure Tests', () => { + + runner.it('should remove image editor container when hideEditor is called', 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'); + const manager = new global.SectionManager(); + const renderer = new global.DOMRenderer(manager, container); + + // Create a section element with an image editor container + const sectionElement = document.createElement('div'); + sectionElement.setAttribute('data-section-id', 'test-section'); + + const imageEditorContainer = document.createElement('div'); + imageEditorContainer.className = 'ui-edit-image-editor-container'; + sectionElement.appendChild(imageEditorContainer); + + // Mock findSectionElement to return our test element + renderer.findSectionElement = () => sectionElement; + + // Verify container exists before hiding + runner.expect(sectionElement.querySelector('.ui-edit-image-editor-container')).toBeTruthy(); + + // Call hideEditor + renderer.hideEditor('test-section'); + + // Verify container was removed + runner.expect(sectionElement.querySelector('.ui-edit-image-editor-container')).toBeFalsy(); + } + }); + + runner.it('should remove text editor container when hideEditor is called', async () => { + if (global.DOMRenderer && global.SectionManager) { + const container = document.createElement('div'); + const manager = new global.SectionManager(); + const renderer = new global.DOMRenderer(manager, container); + + // Create a section element with a text editor container + const sectionElement = document.createElement('div'); + sectionElement.setAttribute('data-section-id', 'test-section'); + + const textEditorContainer = document.createElement('div'); + textEditorContainer.className = 'ui-edit-editor-container'; + sectionElement.appendChild(textEditorContainer); + + // Mock findSectionElement to return our test element + renderer.findSectionElement = () => sectionElement; + + // Verify container exists before hiding + runner.expect(sectionElement.querySelector('.ui-edit-editor-container')).toBeTruthy(); + + // Call hideEditor + renderer.hideEditor('test-section'); + + // Verify container was removed + runner.expect(sectionElement.querySelector('.ui-edit-editor-container')).toBeFalsy(); + } + }); + + runner.it('should handle case where no editor containers exist', async () => { + if (global.DOMRenderer && global.SectionManager) { + const container = document.createElement('div'); + const manager = new global.SectionManager(); + const renderer = new global.DOMRenderer(manager, container); + + // Create a section element with no editor containers + const sectionElement = document.createElement('div'); + sectionElement.setAttribute('data-section-id', 'test-section'); + + // Mock findSectionElement to return our test element + renderer.findSectionElement = () => sectionElement; + + // Call hideEditor - should not throw error + try { + renderer.hideEditor('test-section'); + runner.expect(true).toBeTruthy(); // Should reach here without error + } catch (error) { + runner.expect(false).toBeTruthy(); // Should not throw + } + } + }); + + runner.it('should handle both editor types in same element', async () => { + if (global.DOMRenderer && global.SectionManager) { + const container = document.createElement('div'); + const manager = new global.SectionManager(); + const renderer = new global.DOMRenderer(manager, container); + + // Create a section element with both editor containers + const sectionElement = document.createElement('div'); + sectionElement.setAttribute('data-section-id', 'test-section'); + + const textEditorContainer = document.createElement('div'); + textEditorContainer.className = 'ui-edit-editor-container'; + sectionElement.appendChild(textEditorContainer); + + const imageEditorContainer = document.createElement('div'); + imageEditorContainer.className = 'ui-edit-image-editor-container'; + sectionElement.appendChild(imageEditorContainer); + + // Mock findSectionElement to return our test element + renderer.findSectionElement = () => sectionElement; + + // Verify both containers exist before hiding + runner.expect(sectionElement.querySelector('.ui-edit-editor-container')).toBeTruthy(); + runner.expect(sectionElement.querySelector('.ui-edit-image-editor-container')).toBeTruthy(); + + // Call hideEditor + renderer.hideEditor('test-section'); + + // Verify both containers were removed + runner.expect(sectionElement.querySelector('.ui-edit-editor-container')).toBeFalsy(); + runner.expect(sectionElement.querySelector('.ui-edit-image-editor-container')).toBeFalsy(); + } + }); + + runner.it('should verify accept button closes UI by calling hideEditor', async () => { + if (global.DOMRenderer && global.SectionManager) { + const container = document.createElement('div'); + const manager = new global.SectionManager(); + const renderer = new global.DOMRenderer(manager, container); + + // Create section with image + const imageMarkdown = '![Test Alt](https://via.placeholder.com/400x200)'; + const sections = manager.createSectionsFromMarkdown(imageMarkdown); + const imageSection = sections[0]; + + // Start editing + manager.startEditing(imageSection.id); + + // Test that hideEditor is available and can be called + runner.expect(typeof renderer.hideEditor).toBe('function'); + + // Simulate what accept button does + try { + manager.acceptChanges(imageSection.id); + renderer.hideEditor(imageSection.id); + runner.expect(true).toBeTruthy(); // Should complete without error + } catch (error) { + runner.expect(false).toBeTruthy(); // Should not throw + } + } + }); + + runner.it('should verify cancel button closes UI by calling hideEditor', async () => { + if (global.DOMRenderer && global.SectionManager) { + const container = document.createElement('div'); + const manager = new global.SectionManager(); + const renderer = new global.DOMRenderer(manager, container); + + // Create section with image + const imageMarkdown = '![Test Alt](https://via.placeholder.com/400x200)'; + const sections = manager.createSectionsFromMarkdown(imageMarkdown); + const imageSection = sections[0]; + + // Start editing + manager.startEditing(imageSection.id); + + // Simulate what cancel button does + try { + manager.cancelChanges(imageSection.id); + renderer.hideEditor(imageSection.id); + runner.expect(true).toBeTruthy(); // Should complete without error + } catch (error) { + runner.expect(false).toBeTruthy(); // Should not throw + } + } + }); + + runner.it('should verify reset button closes UI by calling hideEditor', async () => { + if (global.DOMRenderer && global.SectionManager) { + const container = document.createElement('div'); + const manager = new global.SectionManager(); + const renderer = new global.DOMRenderer(manager, container); + + // Create section with image + const imageMarkdown = '![Test Alt](https://via.placeholder.com/400x200)'; + const sections = manager.createSectionsFromMarkdown(imageMarkdown); + const imageSection = sections[0]; + + // Start editing + manager.startEditing(imageSection.id); + + // Simulate what reset button does + try { + manager.resetSection(imageSection.id); + renderer.hideEditor(imageSection.id); + // Should also update content + renderer.updateSectionContent(imageSection.id, imageSection.currentMarkdown); + runner.expect(true).toBeTruthy(); // Should complete without error + } catch (error) { + runner.expect(false).toBeTruthy(); // Should not throw + } + } + }); +}); + +// Run the tests +if (require.main === module) { + console.log('🎭 Running Image UI Closure 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 - UI closure needs attention`); + } else { + console.log('✅ All image UI closure tests passed!'); + } + }); +} + +module.exports = runner; \ No newline at end of file