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

fix: resolve accept, reset, and cancel buttons in image section editing

Browse Source 
Fixed image section editing button functionality:

1. **getCurrentEditingSectionId fix**: Updated to recognize both text editor containers
   (.ui-edit-editor-container) and image editor containers (.ui-edit-image-editor-container)

2. **Accept button fix**:
   - Properly handles alt text updates with immediate DOM reflection
   - Calls acceptChanges() and hideEditor() directly instead of generic handler
   - Ensures updateSectionContent() is called for immediate visual feedback

3. **Cancel button fix**:
   - Directly calls cancelChanges() and hideEditor() for proper flow
   - Removes dependency on generic handler that couldn't identify image containers

4. **Reset button fix**:
   - Calls resetSection() and refreshes image editor with reset content
   - Provides immediate visual feedback by reopening editor with original content

Added comprehensive test suite with 7 tests covering all button interactions.
All image section editing buttons now work correctly.

🤖 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:43:41 +01:00
parent 91291d727e
commit 4fa02cba52
2 changed files with 261 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
markitect/static/editor.js
View File

@@ -1932,11 +1932,31 @@ class DOMRenderer {
`![${altTextInput.value}]`
);
this.sectionManager.updateContent(sectionId, newMarkdown);
this.updateSectionContent(sectionId, newMarkdown);
}
this.handleAccept(e);
// Accept changes and hide editor
this.sectionManager.acceptChanges(sectionId);
this.hideEditor(sectionId);
});
const cancelBtn = this.createButton('✗ Cancel', 'ui-edit-cancel', (e) => {
// Cancel changes and hide editor
this.sectionManager.cancelChanges(sectionId);
this.hideEditor(sectionId);
});
const resetBtn = this.createButton('↺ Reset', 'ui-edit-reset', (e) => {
// Reset section to original content and refresh image 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);
});
const cancelBtn = this.createButton('✗ Cancel', 'ui-edit-cancel', this.handleCancel);
const resetBtn = this.createButton('↺ Reset', 'ui-edit-reset', this.handleReset);
acceptBtn.style.background = '#28a745';
cancelBtn.style.background = '#dc3545';
@@ -2132,7 +2152,7 @@ class DOMRenderer {
}
getCurrentEditingSectionId(button) {
const editorContainer = button.closest('.ui-edit-editor-container');
const editorContainer = button.closest('.ui-edit-editor-container, .ui-edit-image-editor-container');
if (!editorContainer) return null;
const sectionElement = editorContainer.parentElement;