feat: Implement complete style-aware editor interface (Phase 2)
- 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.
This commit is contained in:
162
test-multi-property-elements.html
Normal file
162
test-multi-property-elements.html
Normal file
@@ -0,0 +1,162 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Multi-Property Elements 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: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.fancy { color: #7c3aed; text-decoration: none; border-bottom: 2px solid #a855f7; }
|
||||
.btn { background: #3b82f6; color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>🧪 Multi-Property Elements Test</h1>
|
||||
<p>Testing our enhanced system that handles elements with multiple editable properties like links (href + content).</p>
|
||||
|
||||
<div id="test-output" class="test-output">Loading...</div>
|
||||
|
||||
<!-- Test elements with multiple editable properties -->
|
||||
<div style="display: none;">
|
||||
<p id="link-example" class="insertr">Visit our <a class="fancy" href="https://example.com" title="Example Site" target="_blank">about page</a> for more info.</p>
|
||||
<p id="button-example" class="insertr">Ready to start? <button class="btn" type="button" data-action="signup">Sign Up Now</button> and begin!</p>
|
||||
<div id="image-example" class="insertr">Check out this image: <img src="https://via.placeholder.com/150" alt="Placeholder" title="Sample Image" class="responsive"></div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import { styleDetectionEngine } from './lib/src/utils/style-detection.js';
|
||||
|
||||
const output = document.getElementById('test-output');
|
||||
|
||||
function runMultiPropertyTests() {
|
||||
let results = '';
|
||||
|
||||
results += '🔍 TESTING MULTI-PROPERTY ELEMENTS\n';
|
||||
results += '==================================\n\n';
|
||||
|
||||
// Test Link Element with href + content + title + target
|
||||
results += testMultiPropertyElement('link-example', 'Link with Multiple Properties');
|
||||
|
||||
// Test Button Element with content + data attributes
|
||||
results += testMultiPropertyElement('button-example', 'Button with Data Attributes');
|
||||
|
||||
// Test Image Element with src + alt + title
|
||||
results += testMultiPropertyElement('image-example', 'Image with Multiple Attributes');
|
||||
|
||||
output.textContent = results;
|
||||
}
|
||||
|
||||
function testMultiPropertyElement(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 enhanced structure 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 += ` Template: ${JSON.stringify(style.template, null, 4)}\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.styleId}\n`;
|
||||
result += ` Properties: ${JSON.stringify(piece.properties, null, 6)}\n`;
|
||||
}
|
||||
});
|
||||
|
||||
// Test property extraction for complex elements
|
||||
const styledPieces = detection.structure.filter(p => p.type === 'styled');
|
||||
if (styledPieces.length > 0) {
|
||||
result += `\n🔧 Multi-Property Analysis:\n`;
|
||||
styledPieces.forEach((piece, index) => {
|
||||
const style = detection.styles.get(piece.styleId);
|
||||
result += ` Element ${index + 1}: ${style.tagName}\n`;
|
||||
result += ` Editable Properties: ${style.template.editableProperties?.join(', ') || 'content only'}\n`;
|
||||
result += ` Current Values:\n`;
|
||||
Object.entries(piece.properties).forEach(([key, value]) => {
|
||||
result += ` ${key}: "${value}"\n`;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Test reconstruction with modified properties
|
||||
result += `\n🔄 Testing Property Modification:\n`;
|
||||
const modifiedProperties = {};
|
||||
|
||||
if (styledPieces.length > 0) {
|
||||
const firstStyled = detection.structure.findIndex(p => p.type === 'styled');
|
||||
const originalProps = detection.structure[firstStyled].properties;
|
||||
|
||||
// Create modified properties for testing
|
||||
const newProps = { ...originalProps };
|
||||
if (newProps.content) newProps.content = 'MODIFIED TEXT';
|
||||
if (newProps.href) newProps.href = 'https://modified.com';
|
||||
if (newProps.title) newProps.title = 'Modified Title';
|
||||
if (newProps.alt) newProps.alt = 'Modified Alt Text';
|
||||
|
||||
modifiedProperties[firstStyled] = { properties: newProps };
|
||||
|
||||
result += ` Original Properties: ${JSON.stringify(originalProps, null, 4)}\n`;
|
||||
result += ` Modified Properties: ${JSON.stringify(newProps, null, 4)}\n`;
|
||||
}
|
||||
|
||||
// Test reconstruction
|
||||
const reconstructed = styleDetectionEngine.reconstructHTML(detection.structure, detection.styles, modifiedProperties);
|
||||
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;
|
||||
|
||||
result += `\n✅ Checks:\n`;
|
||||
result += ` Text preservation: ${preservesText ? '✅' : '❌'}\n`;
|
||||
result += ` Multi-property support: ${styledPieces.some(p => Object.keys(p.properties).length > 1) ? '✅' : '❌'}\n`;
|
||||
result += ` Template complexity: ${detection.styles.size > 0 && Array.from(detection.styles.values()).some(s => s.template.editableProperties?.length > 1) ? '✅' : '❌'}\n`;
|
||||
|
||||
if (!preservesText) {
|
||||
result += ` Expected text: "${originalText}"\n`;
|
||||
result += ` Got text: "${plainText}"\n`;
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
result += `❌ Error: ${error.message}\n`;
|
||||
result += `Stack: ${error.stack}\n`;
|
||||
}
|
||||
|
||||
return result + '\n';
|
||||
}
|
||||
|
||||
// Run tests when page loads
|
||||
runMultiPropertyTests();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user