fix: resolve accept and cancel button functionality in floating editor
Fixed critical issue where Accept and Cancel buttons in the floating editor were not properly clearing the currentFloatingMenu reference after hiding. PROBLEM IDENTIFIED: - Accept/Cancel buttons called floatingMenu.hide() but left stale reference - DOMRenderer.currentFloatingMenu remained pointing to hidden menu object - This caused incorrect state tracking and prevented proper menu lifecycle SOLUTION IMPLEMENTED: - Added this.currentFloatingMenu = null after floatingMenu.hide() calls - Applied fix to both text editor and image editor accept/cancel buttons - Ensures clean menu state management and proper reference cleanup TESTING: - Added comprehensive test for Accept button functionality - Added comprehensive test for Cancel button functionality - Both tests verify menu is properly hidden and references cleared - All 12 integration tests now pass with button functionality validated This fix ensures users can properly save or discard changes when editing sections, restoring the expected click-to-edit workflow behavior. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -123,6 +123,110 @@ Content for second subsection.`;
|
||||
document.body.removeChild(container);
|
||||
});
|
||||
|
||||
runner.it('should support accept/cancel button functionality', () => {
|
||||
const SectionManager = global.ExtractedSectionManager;
|
||||
const DOMRenderer = global.ExtractedDOMRenderer;
|
||||
|
||||
// Setup
|
||||
const container = document.createElement('div');
|
||||
container.innerHTML = '<div id="markdown-content"></div>';
|
||||
document.body.appendChild(container);
|
||||
|
||||
const sectionManager = new SectionManager();
|
||||
const domRenderer = new DOMRenderer(sectionManager, container);
|
||||
|
||||
// Create and render sections
|
||||
const testMarkdown = '# Test Heading\nOriginal content here.';
|
||||
const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
|
||||
domRenderer.renderAllSections(sections);
|
||||
|
||||
const sectionId = sections[0].id;
|
||||
const section = sectionManager.sections.get(sectionId);
|
||||
|
||||
// Start editing to trigger floating menu with buttons
|
||||
sectionManager.startEditing(sectionId);
|
||||
|
||||
// Check if floating menu exists
|
||||
runner.expect(domRenderer.currentFloatingMenu).toBeTruthy();
|
||||
runner.expect(domRenderer.currentFloatingMenu.isVisible).toBeTruthy();
|
||||
|
||||
// Find buttons in the floating menu
|
||||
const menuElement = domRenderer.currentFloatingMenu.element;
|
||||
runner.expect(menuElement).toBeTruthy();
|
||||
|
||||
const buttons = menuElement.querySelectorAll('button');
|
||||
runner.expect(buttons.length >= 2).toBeTruthy(); // At least Accept and Cancel buttons
|
||||
|
||||
const acceptBtn = Array.from(buttons).find(btn => btn.textContent === 'Accept');
|
||||
const cancelBtn = Array.from(buttons).find(btn => btn.textContent === 'Cancel');
|
||||
|
||||
runner.expect(acceptBtn).toBeTruthy();
|
||||
runner.expect(cancelBtn).toBeTruthy();
|
||||
|
||||
// Test Accept button functionality
|
||||
runner.expect(section.isEditing()).toBeTruthy();
|
||||
|
||||
// Simulate updating content and clicking Accept
|
||||
const textarea = menuElement.querySelector('textarea');
|
||||
runner.expect(textarea).toBeTruthy();
|
||||
textarea.value = '# Updated Heading\nUpdated content via button.';
|
||||
|
||||
acceptBtn.click();
|
||||
|
||||
// After clicking Accept, section should be saved and menu hidden
|
||||
runner.expect(section.isEditing()).toBeFalsy();
|
||||
runner.expect(section.currentMarkdown).toContain('Updated Heading');
|
||||
runner.expect(domRenderer.currentFloatingMenu).toBeFalsy();
|
||||
|
||||
// Cleanup
|
||||
document.body.removeChild(container);
|
||||
});
|
||||
|
||||
runner.it('should support cancel button functionality', () => {
|
||||
const SectionManager = global.ExtractedSectionManager;
|
||||
const DOMRenderer = global.ExtractedDOMRenderer;
|
||||
|
||||
// Setup
|
||||
const container = document.createElement('div');
|
||||
container.innerHTML = '<div id="markdown-content"></div>';
|
||||
document.body.appendChild(container);
|
||||
|
||||
const sectionManager = new SectionManager();
|
||||
const domRenderer = new DOMRenderer(sectionManager, container);
|
||||
|
||||
// Create and render sections
|
||||
const testMarkdown = '# Original Heading\nOriginal content here.';
|
||||
const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
|
||||
domRenderer.renderAllSections(sections);
|
||||
|
||||
const sectionId = sections[0].id;
|
||||
const section = sectionManager.sections.get(sectionId);
|
||||
|
||||
// Start editing
|
||||
sectionManager.startEditing(sectionId);
|
||||
|
||||
// Find buttons in the floating menu
|
||||
const menuElement = domRenderer.currentFloatingMenu.element;
|
||||
const cancelBtn = Array.from(menuElement.querySelectorAll('button')).find(btn => btn.textContent === 'Cancel');
|
||||
|
||||
runner.expect(cancelBtn).toBeTruthy();
|
||||
runner.expect(section.isEditing()).toBeTruthy();
|
||||
|
||||
// Simulate changing content but then canceling
|
||||
const textarea = menuElement.querySelector('textarea');
|
||||
textarea.value = '# Changed Heading\nThis should be discarded.';
|
||||
|
||||
cancelBtn.click();
|
||||
|
||||
// After clicking Cancel, section should not be saved and menu hidden
|
||||
runner.expect(section.isEditing()).toBeFalsy();
|
||||
runner.expect(section.currentMarkdown).toContain('Original Heading'); // Original content preserved
|
||||
runner.expect(domRenderer.currentFloatingMenu).toBeFalsy();
|
||||
|
||||
// Cleanup
|
||||
document.body.removeChild(container);
|
||||
});
|
||||
|
||||
runner.it('should support event-driven communication', () => {
|
||||
const SectionManager = global.ExtractedSectionManager;
|
||||
const DOMRenderer = global.ExtractedDOMRenderer;
|
||||
|
||||
Reference in New Issue
Block a user