cleanup: move remaining JavaScript development artifacts to history
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>
This commit is contained in:
182
history/javascript-dev-tests/test_dom_integration.html
Normal file
182
history/javascript-dev-tests/test_dom_integration.html
Normal file
@@ -0,0 +1,182 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>DOM Integration Test</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: system-ui, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.test-container {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.markitect-section-editable {
|
||||
margin: 16px 0;
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
.markitect-section-editable:hover {
|
||||
background-color: rgba(33, 150, 243, 0.05);
|
||||
}
|
||||
.section-editing {
|
||||
background-color: rgba(33, 150, 243, 0.1);
|
||||
border-color: #2196f3;
|
||||
}
|
||||
.section-modified {
|
||||
background-color: rgba(255, 235, 59, 0.1);
|
||||
border-left: 4px solid #ffc107;
|
||||
}
|
||||
.section-saved {
|
||||
background-color: rgba(76, 175, 80, 0.1);
|
||||
border-left: 4px solid #4caf50;
|
||||
}
|
||||
.markitect-edit-container {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.markitect-textarea-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
.edit-mode {
|
||||
width: 100%;
|
||||
min-height: 60px;
|
||||
font-family: monospace;
|
||||
border: 2px solid #007acc;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
font-size: 14px;
|
||||
resize: vertical;
|
||||
}
|
||||
.markitect-section-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.markitect-section-btn {
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
min-width: 80px;
|
||||
}
|
||||
.accept { background: #4caf50; color: white; }
|
||||
.cancel { background: #f44336; color: white; }
|
||||
.reset { background: #ff9800; color: white; }
|
||||
|
||||
.test-info {
|
||||
background: #e3f2fd;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test-info">
|
||||
<h2>🧪 DOM Renderer Integration Test</h2>
|
||||
<p><strong>Testing the new action semantics with DOM integration:</strong></p>
|
||||
<ul>
|
||||
<li>✅ Original content preserved</li>
|
||||
<li>✅ Cancel returns to state before editing</li>
|
||||
<li>✅ Accept saves changes as new current content</li>
|
||||
<li>✅ Reset returns to original render-time content</li>
|
||||
<li>✅ Multiple sections can be edited independently</li>
|
||||
</ul>
|
||||
<p><strong>Instructions:</strong> Click on sections below to test the editing behavior!</p>
|
||||
</div>
|
||||
|
||||
<div id="test-container" class="test-container"></div>
|
||||
|
||||
<!-- Include our clean architecture -->
|
||||
<script src="src/section_editor.js"></script>
|
||||
<script src="src/dom_renderer.js"></script>
|
||||
|
||||
<script>
|
||||
// Test markdown content
|
||||
const TEST_MARKDOWN = `# Test Document
|
||||
|
||||
This is the introduction paragraph. Click to edit it!
|
||||
|
||||
## First Section
|
||||
|
||||
This is the content of the first section. Try editing this content.
|
||||
|
||||
## Second Section
|
||||
|
||||
This is the content of the second section. You can edit multiple sections independently.
|
||||
|
||||
### Subsection
|
||||
|
||||
This is a nested subsection that demonstrates the section hierarchy.`;
|
||||
|
||||
// Initialize the system
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const container = document.getElementById('test-container');
|
||||
|
||||
// Create section manager and DOM renderer
|
||||
const sectionManager = new MarkitectEditor.SectionManager();
|
||||
const domRenderer = new MarkitectEditor.DOMRenderer(sectionManager, container);
|
||||
|
||||
// Create sections from markdown
|
||||
const sections = sectionManager.createSectionsFromMarkdown(TEST_MARKDOWN);
|
||||
|
||||
console.log('🧪 DOM Integration Test initialized');
|
||||
console.log(`✓ Created ${sections.length} sections`);
|
||||
console.log('✓ DOM renderer connected');
|
||||
|
||||
// Test the action semantics
|
||||
window.testActions = {
|
||||
getSections: () => sections,
|
||||
getManager: () => sectionManager,
|
||||
testWorkflow: () => {
|
||||
console.log('\n🧪 Testing complete workflow...');
|
||||
|
||||
// Start editing first section
|
||||
const section1 = sections[1];
|
||||
console.log('1. Starting edit on section:', section1.id);
|
||||
sectionManager.startEditing(section1.id);
|
||||
|
||||
// Update content
|
||||
sectionManager.updateContent(section1.id, 'Modified introduction content');
|
||||
console.log('2. Updated content');
|
||||
|
||||
// Start editing another section (should preserve first as pending)
|
||||
const section3 = sections[3];
|
||||
console.log('3. Starting edit on another section:', section3.id);
|
||||
sectionManager.startEditing(section3.id);
|
||||
|
||||
// Check that first section has pending changes
|
||||
console.log('4. First section state:', section1.state, 'Has pending:', !!section1.pendingMarkdown);
|
||||
|
||||
// Accept changes on second section
|
||||
sectionManager.updateContent(section3.id, 'Modified first section content');
|
||||
sectionManager.acceptChanges(section3.id);
|
||||
console.log('5. Accepted changes on second section');
|
||||
|
||||
console.log('✓ Workflow test complete - check the UI!');
|
||||
}
|
||||
};
|
||||
|
||||
// Add test button
|
||||
const testBtn = document.createElement('button');
|
||||
testBtn.textContent = 'Run Workflow Test';
|
||||
testBtn.style.cssText = 'margin-top: 20px; padding: 10px 20px; background: #2196f3; color: white; border: none; border-radius: 4px; cursor: pointer;';
|
||||
testBtn.onclick = window.testActions.testWorkflow;
|
||||
document.body.appendChild(testBtn);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user