Joakim
3c4e83b302
- Add StyleAwareEditor class with intelligent editing strategy detection - Implement three editing modes: simple text, rich content, multi-property forms - Create dynamic formatting toolbar with buttons for detected styles - Add multi-property editing forms for complex elements (links, images, buttons) - Integrate contentEditable with style application/removal functionality - Replace markdown-based editor.js with style-aware architecture - Add comprehensive CSS styling for modern, responsive editor interface - Support fallback editing for error cases with graceful degradation - Enable real-time style application to selected text in rich editor - Preserve all element attributes and structure during editing workflow Complete implementation of CLASSES.md style preservation specification. Phase 2 foundation ready for final testing and refinement.
174 lines
7.0 KiB
HTML
174 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Style Preservation System Test</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
margin: 2rem;
|
|
line-height: 1.6;
|
|
}
|
|
.test-output {
|
|
background: #f5f5f5;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
font-family: 'Monaco', 'Courier New', monospace;
|
|
white-space: pre-wrap;
|
|
max-height: 500px;
|
|
overflow-y: auto;
|
|
}
|
|
.test-controls {
|
|
margin: 1rem 0;
|
|
}
|
|
button {
|
|
background: #007acc;
|
|
color: white;
|
|
border: none;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin-right: 0.5rem;
|
|
}
|
|
button:hover {
|
|
background: #005a9e;
|
|
}
|
|
.emph { color: #dc2626; font-weight: 700; }
|
|
.fancy { color: #7c3aed; text-decoration: none; border-bottom: 2px solid #a855f7; }
|
|
.highlight { background: #fef08a; padding: 0 0.25rem; border-radius: 3px; }
|
|
.brand { color: #059669; font-weight: 800; text-transform: uppercase; }
|
|
.btn { background: #3b82f6; color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🧪 Style Preservation System Test</h1>
|
|
<p>This page tests our new StyleDetectionEngine and HTMLPreservationEngine with actual DOM elements.</p>
|
|
|
|
<div class="test-controls">
|
|
<button onclick="runStyleTests()">Test Style Detection</button>
|
|
<button onclick="runHTMLTests()">Test HTML Preservation</button>
|
|
<button onclick="runAllTests()">Run All Tests</button>
|
|
<button onclick="clearOutput()">Clear Output</button>
|
|
</div>
|
|
|
|
<div id="test-output" class="test-output">Click a test button to run tests...</div>
|
|
|
|
<!-- Sample elements for testing (hidden) -->
|
|
<div style="display: none;">
|
|
<p id="example1" class="insertr">Hello <strong class="emph">world</strong> and welcome!</p>
|
|
<p id="example2" class="insertr">Visit our <a class="fancy" href="#about">about page</a> for more info.</p>
|
|
<p id="example4" class="insertr">Welcome to <strong class="brand">Acme Corp</strong> where we create <span class="highlight">innovative</span> solutions for <em class="emph">modern</em> businesses.</p>
|
|
<p id="example5" class="insertr">Ready to start? <button class="btn" data-action="signup" data-analytics="cta-main">Sign Up Now</button> and begin your journey!</p>
|
|
</div>
|
|
|
|
<script type="module">
|
|
// Import our style detection system
|
|
import { styleDetectionEngine } from './lib/src/utils/style-detection.js';
|
|
import { htmlPreservationEngine } from './lib/src/utils/html-preservation.js';
|
|
import { runStyleDetectionTests, runHTMLPreservationTests, runAllTests as runTestSuite } from './lib/src/utils/test-runner.js';
|
|
|
|
// Make functions available globally
|
|
window.styleDetectionEngine = styleDetectionEngine;
|
|
window.htmlPreservationEngine = htmlPreservationEngine;
|
|
|
|
// Store original console.log
|
|
const originalLog = console.log;
|
|
const output = document.getElementById('test-output');
|
|
|
|
// Override console.log to display in our output div
|
|
function captureOutput(callback) {
|
|
const logs = [];
|
|
console.log = (...args) => {
|
|
logs.push(args.join(' '));
|
|
originalLog(...args);
|
|
};
|
|
|
|
try {
|
|
const result = callback();
|
|
output.textContent = logs.join('\n');
|
|
return result;
|
|
} finally {
|
|
console.log = originalLog;
|
|
}
|
|
}
|
|
|
|
window.runStyleTests = () => {
|
|
captureOutput(() => runStyleDetectionTests());
|
|
};
|
|
|
|
window.runHTMLTests = () => {
|
|
captureOutput(() => runHTMLPreservationTests());
|
|
};
|
|
|
|
window.runAllTests = () => {
|
|
captureOutput(() => runTestSuite());
|
|
};
|
|
|
|
window.clearOutput = () => {
|
|
output.textContent = 'Output cleared. Click a test button to run tests...';
|
|
};
|
|
|
|
// Manual testing functions
|
|
window.testStyleDetection = (elementId) => {
|
|
const element = document.getElementById(elementId);
|
|
if (!element) {
|
|
console.log(`Element ${elementId} not found`);
|
|
return;
|
|
}
|
|
|
|
console.log(`\n🔍 Testing element: ${elementId}`);
|
|
console.log(`HTML: ${element.outerHTML}`);
|
|
|
|
const styles = styleDetectionEngine.detectStyles(element);
|
|
console.log(`\nDetected ${styles.size} styles:`);
|
|
|
|
for (const [id, style] of styles) {
|
|
console.log(` • ${style.name} (${style.tagName}.${style.classes.join('.')})`);
|
|
console.log(` Template: ${style.template}`);
|
|
if (Object.keys(style.attributes).length > 0) {
|
|
console.log(` Attributes: ${JSON.stringify(style.attributes)}`);
|
|
}
|
|
}
|
|
};
|
|
|
|
window.testHTMLPreservation = (elementId) => {
|
|
const element = document.getElementById(elementId);
|
|
if (!element) {
|
|
console.log(`Element ${elementId} not found`);
|
|
return;
|
|
}
|
|
|
|
console.log(`\n🔧 Testing HTML preservation: ${elementId}`);
|
|
console.log(`Original: ${element.outerHTML}`);
|
|
|
|
// Extract content
|
|
const extracted = htmlPreservationEngine.extractForEditing(element);
|
|
console.log(`\nExtracted HTML: ${extracted.html}`);
|
|
console.log(`Extracted Text: ${extracted.text}`);
|
|
console.log(`Container Attributes: ${JSON.stringify(extracted.containerAttributes)}`);
|
|
console.log(`Has Nested Elements: ${extracted.hasNestedElements}`);
|
|
|
|
// Test applying content
|
|
const testContent = 'Modified <strong class="emph">content</strong> for testing!';
|
|
const success = htmlPreservationEngine.applyFromEditing(element, testContent);
|
|
console.log(`\nApplication Success: ${success}`);
|
|
console.log(`Updated HTML: ${element.outerHTML}`);
|
|
};
|
|
|
|
// Show initial instructions
|
|
output.textContent = `🧪 Style Preservation System Test Ready!
|
|
|
|
Available manual tests:
|
|
• testStyleDetection('example1') - Test style detection on Example 1
|
|
• testStyleDetection('example2') - Test style detection on Example 2
|
|
• testHTMLPreservation('example1') - Test HTML preservation
|
|
• runStyleTests() - Run all style detection tests
|
|
• runHTMLTests() - Run all HTML preservation tests
|
|
• runAllTests() - Run complete test suite
|
|
|
|
Click the buttons above or open browser console and run these commands manually.`;
|
|
|
|
</script>
|
|
</body>
|
|
</html> |