tegwick
77415bfad7
Some checks failed
Test Suite / unit-tests (3.11) (push) Has been cancelled
Test Suite / unit-tests (3.12) (push) Has been cancelled
Test Suite / integration-tests (push) Has been cancelled
Test Suite / e2e-tests (push) Has been cancelled
Test Suite / performance-tests (push) Has been cancelled
Test Suite / code-quality (push) Has been cancelled
Test Suite / security-scan (push) Has been cancelled
Test Suite / test-summary (push) Has been cancelled
182 lines
6.6 KiB
HTML
182 lines
6.6 KiB
HTML
<!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> |