feat: implement Phase 3 container transformation with CLASSES.md compliance

- Add backend container transformation in engine.go following syntactic sugar specification
- Containers with .insertr get class removed and viable children get .insertr added
- Remove incorrect frontend container expansion - frontend only finds enhanced elements
- Fix StyleAwareEditor hasMultiPropertyElements runtime error
- Add addClass/removeClass methods to ContentEngine for class manipulation
- Update frontend to match HTML-first approach with no runtime container logic
- Test verified: container <section class='insertr'> transforms to individual h1.insertr, p.insertr, button.insertr

This completes the container expansion functionality per CLASSES.md:
Developer convenience (one .insertr enables section editing) + granular control (individual element editing)
This commit is contained in:
2025-09-21 19:17:12 +02:00
parent 4ef032cad6
commit b5e601d09f
16 changed files with 568 additions and 1407 deletions

View File

@@ -146,18 +146,9 @@
<p 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>
<!-- Example 6: Nested Styled Elements -->
<!-- Example 6: Card Structure (Complex) -->
<div class="example">
<h3>Example 6: Nested Styled Elements</h3>
<div class="example-description">
Tests complex nesting with multiple levels of styling.
</div>
<p class="insertr">Check out our <a href="#products" class="fancy">latest <strong class="emph">products</strong> and <span class="highlight">deals</span></a> today!</p>
</div>
<!-- Example 7: Card Structure (Complex) -->
<div class="example">
<h3>Example 7: Complex Structure</h3>
<h3>Example 6: Complex Structure</h3>
<div class="example-description">
Tests editing of a more complex structure with multiple elements. This might be too complex for markdown.
</div>
@@ -167,18 +158,9 @@
</div>
</div>
<!-- Example 8: Simple Text for Comparison -->
<!-- Example 7: Link with Class and ID -->
<div class="example">
<h3>Example 8: Simple Text (Control)</h3>
<div class="example-description">
Simple text without any styling - should work perfectly with markdown.
</div>
<p class="insertr">This is just plain text with some basic markdown formatting like bold and italic.</p>
</div>
<!-- Example 9: Link with Class and ID -->
<div class="example">
<h3>Example 9: Link with Multiple Attributes</h3>
<h3>Example 7: Link with Multiple Attributes</h3>
<div class="example-description">
Tests preservation of multiple attributes including id, class, and title.
</div>