coulomb/markitect-main
2
0
Fork 0
Code Issues 60 Pull Requests Actions 1 Projects 12 Releases 1 Wiki Activity

fix: ensure accept, cancel, and reset buttons properly close image editing UI

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Bernd Worsch
2025-11-02 16:49:58 +01:00
parent 4fa02cba52
commit ea632a2624
2 changed files with 244 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
markitect/static/editor.js
View File

@@ -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);