tegwick
b512842aaf
Complete the cleanup by moving the final 6 JavaScript development files (4 debug tools + 2 demo HTML pages) to history archive. Additional Files Moved: - debug_buttons.js: Button functionality debugging tool - debug_floating_menu.js: Floating menu structure inspection - e2e_tests.js: End-to-end test runner with custom framework - final_functionality_verification.js: Final verification script - demo_clean_editor.html: Clean section editor demonstration - test_dom_integration.html: DOM integration testing page Documentation Updates: - Updated history/javascript-dev-tests/README.md to document all 59 archived files - Added categorization for debug tools and demo pages - Complete project root directory cleanup achieved Project Status: - ✅ Main directory now clean of all development artifacts - ✅ All 59 JavaScript development files properly archived - ✅ Comprehensive documentation of archived functionality - ✅ 79 automated tests providing equivalent coverage 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
139 lines
5.1 KiB
HTML
139 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Clean Section Editor Demo</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
line-height: 1.6;
|
|
}
|
|
#markdown-content {
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
min-height: 400px;
|
|
}
|
|
.demo-info {
|
|
background: #e3f2fd;
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.demo-info h2 {
|
|
margin-top: 0;
|
|
color: #1976d2;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="demo-info">
|
|
<h2>🎯 Clean Section Editor Demo</h2>
|
|
<p><strong>This demonstrates the new TDD-driven, object-oriented section editor architecture.</strong></p>
|
|
<ul>
|
|
<li>✅ <strong>Stable</strong>: No content bleeding between sections</li>
|
|
<li>✅ <strong>Testable</strong>: Business logic separated from DOM</li>
|
|
<li>✅ <strong>Reliable</strong>: Proper state management</li>
|
|
<li>✅ <strong>User-friendly</strong>: Clear visual feedback and controls</li>
|
|
</ul>
|
|
<p><strong>Instructions:</strong></p>
|
|
<ol>
|
|
<li>Click on any section below to start editing</li>
|
|
<li>Make changes and notice the yellow background (modified state)</li>
|
|
<li>Use the buttons on the right: Accept ✓, Cancel ✗, Reset 🔄</li>
|
|
<li>Try clicking between sections - your changes are preserved!</li>
|
|
<li>Use the control panel on the left for document-level actions</li>
|
|
</ol>
|
|
<p><strong>Keyboard shortcuts:</strong> Ctrl+Enter (Accept), Escape (Cancel), Ctrl+S (Save), Ctrl+R (Reset All)</p>
|
|
</div>
|
|
|
|
<div id="markdown-content"></div>
|
|
|
|
<!-- Include our clean architecture -->
|
|
<script src="src/section_editor.js"></script>
|
|
<script src="src/dom_renderer.js"></script>
|
|
<script src="src/clean_editor_integration.js"></script>
|
|
|
|
<script>
|
|
// Sample markdown content for demo
|
|
const DEMO_MARKDOWN = `# Clean Section Editor Demo
|
|
|
|
This is the introduction paragraph. Click on this text to start editing it!
|
|
|
|
## Key Features
|
|
|
|
The new architecture provides several improvements:
|
|
|
|
- **Stable editing**: No more content bleeding between sections
|
|
- **Reliable state management**: Clear separation of concerns
|
|
- **Test-driven development**: Every component is thoroughly tested
|
|
- **User-friendly interface**: Visual feedback and intuitive controls
|
|
|
|
## How It Works
|
|
|
|
### Section Class
|
|
Each section has its own state management with clear transitions between original, editing, modified, and saved states.
|
|
|
|
### SectionManager
|
|
Coordinates all sections and handles the business logic for document-level operations.
|
|
|
|
### DOMRenderer
|
|
Handles all DOM manipulation and UI events, keeping the business logic clean and testable.
|
|
|
|
## Try It Out
|
|
|
|
Click on any section above to start editing. Notice how:
|
|
|
|
1. **Visual feedback**: Sections change color based on their state
|
|
2. **Preserved content**: Switch between sections without losing changes
|
|
3. **Granular controls**: Accept, cancel, or reset individual sections
|
|
4. **Keyboard shortcuts**: Use Ctrl+Enter to accept, Escape to cancel
|
|
|
|
## Benefits
|
|
|
|
This architecture is:
|
|
|
|
- **Maintainable**: Clear separation of concerns
|
|
- **Testable**: Business logic can be tested without DOM
|
|
- **Reliable**: Proper state management prevents bugs
|
|
- **Extensible**: Easy to add new features
|
|
|
|
Try editing multiple sections and see how the state is properly managed!`;
|
|
|
|
// Initialize the clean editor when page loads
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const container = document.getElementById('markdown-content');
|
|
|
|
// Create the clean editor
|
|
const editor = new MarkitectEditor.MarkitectCleanEditor(DEMO_MARKDOWN, container, {
|
|
theme: 'github',
|
|
keyboardShortcuts: true,
|
|
autosave: false
|
|
});
|
|
|
|
// Add control panel
|
|
editor.addControlPanel();
|
|
|
|
// Set up event handlers for demo
|
|
editor.onDocumentChange = (status) => {
|
|
console.log('Document changed:', status);
|
|
};
|
|
|
|
editor.onSectionChange = (data) => {
|
|
console.log('Section changed:', data.sectionId, data.section.state);
|
|
};
|
|
|
|
console.log('🎯 Clean editor demo ready!');
|
|
console.log('✓ No more content bleeding');
|
|
console.log('✓ Reliable state management');
|
|
console.log('✓ Test-driven development');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |