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.
134 lines
5.7 KiB
HTML
134 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Structure Preservation 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;
|
|
}
|
|
.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; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🧪 Structure Preservation Test</h1>
|
|
<p>Testing if our new system preserves WHERE styles are positioned, not just WHAT styles exist.</p>
|
|
|
|
<div id="test-output" class="test-output">Loading...</div>
|
|
|
|
<!-- Test elements -->
|
|
<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="example3" class="insertr">Save up to <strong class="highlight">50%</strong> today only!</p>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import { styleDetectionEngine } from './lib/src/utils/style-detection.js';
|
|
|
|
const output = document.getElementById('test-output');
|
|
|
|
function runStructureTests() {
|
|
let results = '';
|
|
|
|
results += '🔍 TESTING STRUCTURE PRESERVATION\n';
|
|
results += '================================\n\n';
|
|
|
|
// Test Example 1: <p>Hello <strong class="emph">world</strong> and welcome!</p>
|
|
results += testStructurePreservation('example1', 'Example 1: Styled Strong Element');
|
|
|
|
// Test Example 2: <p>Visit our <a class="fancy" href="#about">about page</a> for more info.</p>
|
|
results += testStructurePreservation('example2', 'Example 2: Styled Link Element');
|
|
|
|
// Test Example 3: <p>Save up to <strong class="highlight">50%</strong> today only!</p>
|
|
results += testStructurePreservation('example3', 'Example 3: Highlighted Text');
|
|
|
|
output.textContent = results;
|
|
}
|
|
|
|
function testStructurePreservation(elementId, testName) {
|
|
let result = `📝 ${testName}\n`;
|
|
|
|
const element = document.getElementById(elementId);
|
|
if (!element) {
|
|
return result + `❌ Element ${elementId} not found\n\n`;
|
|
}
|
|
|
|
result += `Original HTML: ${element.innerHTML}\n`;
|
|
|
|
try {
|
|
// Test our new structure-preserving detection
|
|
const detection = styleDetectionEngine.detectStylesAndStructure(element);
|
|
|
|
result += `\n🎨 Detected Styles (${detection.styles.size}):\n`;
|
|
for (const [id, style] of detection.styles) {
|
|
result += ` • ${style.name} (${id})\n`;
|
|
}
|
|
|
|
result += `\n📍 Content Structure (${detection.structure.length} pieces):\n`;
|
|
detection.structure.forEach((piece, index) => {
|
|
if (piece.type === 'text') {
|
|
result += ` ${index}: TEXT: "${piece.content}"\n`;
|
|
} else if (piece.type === 'styled') {
|
|
result += ` ${index}: STYLED: "${piece.content}" (${piece.styleId})\n`;
|
|
}
|
|
});
|
|
|
|
// Test reconstruction
|
|
const reconstructed = styleDetectionEngine.reconstructHTML(detection.structure, detection.styles);
|
|
result += `\n🔄 Reconstructed HTML: ${reconstructed}\n`;
|
|
|
|
// Test plain text extraction
|
|
const plainText = styleDetectionEngine.extractTextFromStructure(detection.structure);
|
|
result += `📝 Plain Text: "${plainText}"\n`;
|
|
|
|
// Verify structure preservation
|
|
const originalText = element.textContent;
|
|
const preservesText = plainText === originalText;
|
|
const preservesHTML = reconstructed === element.innerHTML;
|
|
|
|
result += `\n✅ Checks:\n`;
|
|
result += ` Text preservation: ${preservesText ? '✅' : '❌'}\n`;
|
|
result += ` HTML reconstruction: ${preservesHTML ? '✅' : '❌'}\n`;
|
|
|
|
if (preservesText && preservesHTML) {
|
|
result += ` 🎉 PERFECT STRUCTURE PRESERVATION!\n`;
|
|
} else {
|
|
result += ` ⚠️ Structure not perfectly preserved\n`;
|
|
if (!preservesText) {
|
|
result += ` Expected text: "${originalText}"\n`;
|
|
result += ` Got text: "${plainText}"\n`;
|
|
}
|
|
if (!preservesHTML) {
|
|
result += ` Expected HTML: ${element.innerHTML}\n`;
|
|
result += ` Got HTML: ${reconstructed}\n`;
|
|
}
|
|
}
|
|
|
|
} catch (error) {
|
|
result += `❌ Error: ${error.message}\n`;
|
|
}
|
|
|
|
return result + '\n';
|
|
}
|
|
|
|
// Run tests when page loads
|
|
runStructureTests();
|
|
</script>
|
|
</body>
|
|
</html> |