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:
2025-11-03 20:24:54 +01:00
parent 6efd59568c
commit 0cedcaf5c8

View File

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