joakim/insertr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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:
Joakim
2025-09-21 19:17:12 +02:00
parent 4ef032cad6
commit b5e601d09f
16 changed files with 568 additions and 1407 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
demos/default/about.html
View File

@@ -1,19 +1,20 @@
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About - Acme Consulting Services</title>
<link rel="stylesheet" href="assets/style.css"/>
<script src="http://localhost:8080/insertr.js" data-insertr-injected="true" data-site-id="demo" data-api-endpoint="http://localhost:8080/api/content" data-mock-auth="true" data-debug="true"></script></head>
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="container">
<h1 class="logo insertr" data-content-id="about-logo-bf9558" data-content-type="text">Acme Consulting</h1>
<h1 class="logo insertr">Acme Consulting</h1>
<ul class="nav-links">
<li class="insertr" data-content-id="about-li-0babbf" data-content-type="text"><a href="index.html">Home</a></li>
<li class="insertr" data-content-id="about-li-2-0babbf" data-content-type="text"><a href="about.html">About</a></li>
<li class="insertr" data-content-id="about-li-3-0babbf" data-content-type="text"><a href="contact.html">Contact</a></li>
<li class="insertr"><a href="index.html">Home</a></li>
<li class="insertr"><a href="about.html">About</a></li>
<li class="insertr"><a href="contact.html">Contact</a></li>
</ul>
</div>
@@ -22,21 +23,21 @@
<!-- Hero Section -->
<section class="hero">
<div class="container">
<h1 class="insertr" data-content-id="about-h1-b0851a" data-content-type="text">About Acme Consulting</h1>
<p class="lead insertr" data-content-id="about-lead-ccc316" data-content-type="markdown">We&#39;re a team of experienced consultants dedicated to helping small businesses thrive in today&#39;s competitive marketplace.</p>
<h1 class="insertr">About Acme Consulting</h1>
<p class="lead insertr">We're a team of experienced consultants dedicated to helping small businesses thrive in today's competitive marketplace.</p>
</div>
</section>
<!-- Story Section -->
<section class="services">
<div class="container">
<h2 class="insertr" data-content-id="about-h2-246854" data-content-type="text">Our Story</h2>
<h2 class="insertr">Our Story</h2>
<div class="insertr-group">
<p class="insertr" data-content-id="about-p-b2f44a" data-content-type="markdown">Founded in 2020, Acme Consulting emerged from a simple observation: small businesses needed access to the same high-quality strategic advice that large corporations receive, but in a format that was accessible, affordable, and actionable.</p>
<p class="insertr">Founded in 2020, Acme Consulting emerged from a simple observation: small businesses needed access to the same high-quality strategic advice that large corporations receive, but in a format that was accessible, affordable, and actionable.</p>
<p class="insertr" data-content-id="about-p-2-b2f44a" data-content-type="markdown">Our founders, with combined experience of over 30 years in business strategy, operations, and technology, recognized that the traditional consulting model wasn&#39;t serving the needs of growing businesses. We set out to change that.</p>
<p class="insertr">Our founders, with combined experience of over 30 years in business strategy, operations, and technology, recognized that the traditional consulting model wasn't serving the needs of growing businesses. We set out to change that.</p>
<p class="insertr" data-content-id="about-p-3-b2f44a" data-content-type="markdown">Today, we&#39;ve helped over **200 businesses** streamline their operations, clarify their strategy, and achieve sustainable growth. Our approach combines proven methodologies with a deep understanding of the unique challenges facing small to medium-sized businesses.</p>
<p class="insertr">Today, we've helped over **200 businesses** streamline their operations, clarify their strategy, and achieve sustainable growth. Our approach combines proven methodologies with a deep understanding of the unique challenges facing small to medium-sized businesses.</p>
</div>
</div>
</section>
@@ -44,26 +45,26 @@
<!-- Team Section -->
<section class="cta">
<div class="container">
<h2 class="insertr" data-content-id="about-h2-2-f16ab1" data-content-type="text">Our Team</h2>
<p class="insertr" data-content-id="about-p-0e26bc" data-content-type="markdown">We&#39;re a diverse group of strategists, operators, and technology experts united by our passion for helping businesses succeed.</p>
<h2 class="insertr">Our Team</h2>
<p class="insertr">We're a diverse group of strategists, operators, and technology experts united by our passion for helping businesses succeed.</p>
<div class="services-grid" style="margin-top: 3rem;">
<div class="service-card">
<div class="insertr" data-content-id="about-div-dac2cd" data-content-type="markdown">
<div class="insertr">
<h3>Sarah Chen</h3>
<p><strong>Founder &amp; CEO</strong></p>
<p><strong>Founder & CEO</strong></p>
<p>Former <strong>McKinsey consultant</strong> with 15 years of experience in strategy and operations. MBA from Stanford.</p>
</div>
</div>
<div class="service-card">
<div class="insertr" data-content-id="about-div-2-dac2cd" data-content-type="markdown">
<div class="insertr">
<h3>Michael Rodriguez</h3>
<p><strong>Head of Operations</strong></p>
<p>20 years in manufacturing and supply chain optimization. Expert in <strong>lean methodologies</strong> and process improvement.</p>
</div>
</div>
<div class="service-card">
<div class="insertr" data-content-id="about-div-3-dac2cd" data-content-type="markdown">
<div class="insertr">
<h3>Emma Thompson</h3>
<p><strong>Digital Strategy Lead</strong></p>
<p>Former tech startup founder turned consultant. Specializes in <em>digital transformation</em> and technology adoption.</p>
@@ -76,19 +77,19 @@
<!-- Values Section -->
<section class="testimonial">
<div class="container">
<h2 class="insertr" style="margin-bottom: 2rem;" data-content-id="about-h2-3-893efa" data-content-type="text">Our Values</h2>
<h2 class="insertr" style="margin-bottom: 2rem;">Our Values</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; text-align: left;">
<div>
<h3 class="insertr" data-content-id="about-h3-4-07ce1b" data-content-type="text">Client-First</h3>
<p class="insertr" data-content-id="about-p-2-9f60dd" data-content-type="markdown">Every recommendation we make is designed with your specific business context and goals in mind.</p>
<h3 class="insertr">Client-First</h3>
<p class="insertr">Every recommendation we make is designed with your specific business context and goals in mind.</p>
</div>
<div>
<h3 class="insertr" data-content-id="about-h3-5-07ce1b" data-content-type="text">Practical Solutions</h3>
<p class="insertr" data-content-id="about-p-3-9f60dd" data-content-type="markdown">We believe in strategies that you can actually implement with your current resources and capabilities.</p>
<h3 class="insertr">Practical Solutions</h3>
<p class="insertr">We believe in strategies that you can actually implement with your current resources and capabilities.</p>
</div>
<div>
<h3 class="insertr" data-content-id="about-h3-6-07ce1b" data-content-type="text">Long-term Partnership</h3>
<p class="insertr" data-content-id="about-p-4-9f60dd" data-content-type="markdown">We&#39;re not just consultants; we&#39;re partners in your business success for the long haul.</p>
<h3 class="insertr">Long-term Partnership</h3>
<p class="insertr">We're not just consultants; we're partners in your business success for the long haul.</p>
</div>
</div>
</div>
@@ -97,12 +98,12 @@
<!-- Test Section for Insertr Features -->
<section class="testimonial">
<div class="container">
<h2 class="insertr" data-content-id="about-h2-4-893efa" data-content-type="text">Feature Tests</h2>
<h2 class="insertr">Feature Tests</h2>
<!-- Test 1: .insertr container expansion (should make each p individually editable) -->
<div style="margin-bottom: 2rem;">
<h3 class="insertr" data-content-id="about-h3-ea6b29" data-content-type="text">Test 1: Container Expansion (.insertr)</h3>
<div class="insertr" style="border: 2px dashed #ccc; padding: 1rem;" data-content-id="about-div-4-e2aa93" data-content-type="markdown">
<h3 class="insertr">Test 1: Container Expansion (.insertr)</h3>
<div class="insertr" style="border: 2px dashed #ccc; padding: 1rem;">
<p>This paragraph should be individually editable with a textarea.</p>
<p>This second paragraph should also be individually editable.</p>
<p>Each paragraph should get its own modal when clicked.</p>
@@ -111,26 +112,31 @@
<!-- Test 2: .insertr-group collective editing (should edit all together) -->
<div>
<h3 class="insertr" data-content-id="about-h3-2-ea6b29" data-content-type="text">Test 2: Group Editing (.insertr-group)</h3>
<h3 class="insertr">Test 2: Group Editing (.insertr-group)</h3>
<div class="insertr-group" style="border: 2px solid #007cba; padding: 1rem;">
<p class="insertr" data-content-id="about-p-4-dcfaf1" data-content-type="markdown">This paragraph is part of a <strong>group</strong>.</p>
<p class="insertr" data-content-id="about-p-5-dcfaf1" data-content-type="markdown">Clicking anywhere should open one markdown editor with <em>rich formatting</em>.</p>
<p class="insertr" data-content-id="about-p-6-dcfaf1" data-content-type="markdown">All content should be <strong>editable together</strong> as markdown with proper <em>HTML conversion</em>.</p>
<p class="insertr">This paragraph is part of a <strong>group</strong>.</p>
<p class="insertr">Clicking anywhere should open one markdown editor with <em>rich formatting</em>.</p>
<p class="insertr">All content should be <strong>editable together</strong> as markdown with proper <em>HTML conversion</em>.</p>
</div>
</div>
<!-- Test 3: Link formatting options -->
<div style="margin-top: 2rem;">
<h3 class="insertr">Test 3: Link Formatting Styles</h3>
<p class="insertr">Visit our <a href="index.html" class="link-primary">home page</a> to learn more about our services. You can also check our <a href="#services" class="link-secondary">services section</a> for detailed information. For special offers, see our <a href="#cta" class="link-accent">consultation page</a>.</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p class="insertr" data-content-id="about-p-8-c093f3" data-content-type="markdown">© 2024 Acme Consulting Services. All rights reserved.</p>
<p class="insertr" data-content-id="about-p-9-c093f3" data-content-type="markdown">📧 info@acmeconsulting.com | 📞 (555) 123-4567 | <button class="insertr-gate" style="background: none; border: 1px solid #ccc; padding: 4px 8px; margin-left: 10px; border-radius: 3px; font-size: 11px;">🔧 Edit</button></p>
<p class="insertr">© 2024 Acme Consulting Services. All rights reserved.</p>
<p class="insertr">📧 info@acmeconsulting.com | 📞 (555) 123-4567</p>
</div>
</footer>
<!-- Insertr JavaScript Library -->
<script type="text/javascript" src="insertr.js"></script>

38
demos/default/assets/style.css
View File

@@ -211,6 +211,44 @@ body {
margin-right: auto;
}
/* Default Link Formatting Styles */
.link-primary {
color: #2563eb;
text-decoration: underline;
font-weight: 500;
transition: color 0.3s;
}
.link-primary:hover {
color: #1d4ed8;
}
.link-secondary {
color: #6b7280;
text-decoration: none;
border-bottom: 1px solid #d1d5db;
transition: border-color 0.3s;
}
.link-secondary:hover {
border-bottom-color: #374151;
}
.link-accent {
color: #7c3aed;
text-decoration: none;
background: linear-gradient(120deg, #7c3aed 0%, #7c3aed 100%);
background-repeat: no-repeat;
background-size: 100% 0.2em;
background-position: 0 88%;
transition: background-size 0.25s ease-in;
}
.link-accent:hover {
background-size: 100% 88%;
color: white;
}
/* Footer */
.footer {
background: #1f2937;

58
demos/default/index.html
View File

@@ -1,18 +1,20 @@
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Acme Consulting Services - Live Reload Test</title>
<link rel="stylesheet" href="assets/style.css"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Acme Consulting Services</title>
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="container">
<h1 class="logo insertr" data-content-id="index-logo-c176ba" data-content-type="text">Acme Consulting</h1>
<h1 class="logo">Acme Consulting</h1>
<ul class="nav-links">
<li class="insertr" data-content-id="index-li-bf7136" data-content-type="text"><a href="index.html">Home</a></li>
<li class="insertr" data-content-id="index-li-2-bf7136" data-content-type="text"><a href="about.html">About</a></li>
<li class="insertr" data-content-id="index-li-3-bf7136" data-content-type="text"><a href="contact.html">Contact</a></li>
<li class=""><a href="index.html">Home</a></li>
<li class=""><a href="about.html">About</a></li>
<li class=""><a href="contact.html">Contact</a></li>
</ul>
</div>
@@ -21,30 +23,30 @@
<!-- Hero Section -->
<section class="hero">
<div class="container">
<h1 class="insertr" data-content-id="index-h1-1b83cf" data-content-type="text">Transform Your Business with Expert Consulting</h1>
<p class="lead insertr" data-content-id="index-lead-c7070a" data-content-type="markdown"><strong>We help small</strong> businesses grow through strategic planning, process optimization, and digital transformation. Our team brings 15+ years of experience to drive your success.</p>
<a href="contact.html" class="btn-primary insertr" data-content-id="index-btn-primary-088a84" data-content-type="link">Get Started Today</a>
<h1 class="insertr">Transform Your Business with Expert Consulting</h1>
<p class="lead insertr"><strong>We help small</strong> businesses grow through strategic planning, process optimization, and digital transformation. Our team brings 15+ years of experience to drive your success.</p>
<a href="contact.html" class="btn-primary insertr">Get Started Today</a>
</div>
</section>
<!-- Services Section -->
<section class="services">
<div class="container">
<h2 class="insertr" data-content-id="index-h2-7e9e73" data-content-type="text">Our Services</h2>
<p class="section-subtitle insertr" data-content-id="index-section-subtitle-bf0683" data-content-type="markdown">Comprehensive solutions tailored to your business needs. We are flexible as willow sticks</p>
<h2 class="insertr">Our <em>Services</em></h2>
<p class="section-subtitle insertr">Comprehensive solutions tailored to your business needs</p>
<div class="services-grid">
<div class="service-card">
<h3 class="insertr" data-content-id="index-h3-2c6736" data-content-type="text">Strategic Planning</h3>
<p class="insertr" data-content-id="index-p-a935d2" data-content-type="markdown">Develop clear roadmaps and actionable strategies that align with your business goals and drive sustainable growth.</p>
<h3 class="insertr">Strategic Planning</h3>
<p class="insertr">Develop clear roadmaps and actionable strategies that align with your business goals and drive sustainable growth.</p>
</div>
<div class="service-card">
<h3 class="insertr" data-content-id="index-h3-2-2c6736" data-content-type="text">Operations Optimization</h3>
<p class="insertr" data-content-id="index-p-2-a935d2" data-content-type="markdown">Streamline processes, reduce costs, and improve efficiency through proven methodologies and best practices.</p>
<h3 class="insertr">Operations Optimization</h3>
<p class="insertr">Streamline processes, reduce costs, and improve efficiency through proven methodologies and best practices.</p>
</div>
<div class="service-card">
<h3 class="insertr" data-content-id="index-h3-3-2c6736" data-content-type="text">Digital Transformation</h3>
<p class="insertr" data-content-id="index-p-3-a935d2" data-content-type="markdown">Modernize your technology stack and digital presence to compete effectively in today&#39;s marketplace.</p>
<h3 class="insertr">Digital Transformation</h3>
<p class="insertr">Modernize your technology stack and digital presence to compete effectively in today's marketplace.</p>
</div>
</div>
</div>
@@ -54,8 +56,8 @@
<section class="testimonial">
<div class="container">
<blockquote>
<p class="insertr" data-content-id="index-p-4-0a9466" data-content-type="markdown">&#34;Acme Consulting transformed our operations completely. We saw a 40% increase in efficiency within 6 months of implementing their recommendations.&#34;</p>
<cite class="insertr" data-content-id="index-cite-24152c" data-content-type="text">Sarah Johnson, CEO of TechStart Inc.</cite>
<p class="insertr">"Acme Consulting transformed our operations completely. We saw a 40% increase in efficiency within 6 months of implementing their recommendations."</p>
<cite class="insertr">Sarah Johnson, CEO of TechStart Inc.</cite>
</blockquote>
</div>
</section>
@@ -63,17 +65,17 @@
<!-- Call to Action -->
<section class="cta">
<div class="container">
<h2 class="insertr" data-content-id="index-h2-2-9b9baa" data-content-type="text">Ready to Transform Your Business?</h2>
<p class="insertr" data-content-id="index-p-5-e960fe" data-content-type="markdown">Contact us today for a free consultation and discover how we can help you achieve your goals.</p>
<a href="contact.html" class="btn-primary insertr" data-content-id="index-btn-primary-2-a33c64" data-content-type="link">Schedule Consultation</a>
<h2 class="insertr">Ready to Transform Your Business?</h2>
<p class="insertr">Contact us today for a free consultation and discover how we can help you achieve your goals.</p>
<a href="contact.html" class="btn-primary insertr">Schedule Consultation</a>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p class="insertr" data-content-id="index-p-6-9b47e7" data-content-type="markdown">© 2024 Acme Consulting Services. All rights reserved.</p>
<p class="insertr" data-content-id="index-p-7-9b47e7" data-content-type="markdown">📧 info@acmeconsulting.com | 📞 (555) 123-4567 | Located in downtown Springfield | <button class="insertr-gate" style="background: none; border: 1px solid #ccc; padding: 4px 8px; margin-left: 10px; border-radius: 3px; font-size: 11px;">🔧 Edit</button></p>
<p class="insertr">© 2024 Acme Consulting Services. All rights reserved.</p>
<p class="insertr">📧 info@acmeconsulting.com | 📞 (555) 123-4567 | Located in downtown Springfield</p>
</div>
</footer>

26
demos/simple/index.html
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>