fix: preserve element attributes and styling during markdown injection

Critical fixes:
- Fixed HTML injection to preserve original element attributes, classes, and styling
- Updated markdown processor to generate inline content instead of wrapped paragraphs
- Enhanced content type handling: database type now takes precedence over parser detection
- Eliminated nested <p> tags issue that was causing invalid HTML

Key improvements:
- Elements like <p class='lead insertr' style='color: blue;'> now maintain all attributes
- Markdown **bold**, *italic*, [links](url) inject as inline formatted content
- Database content type (markdown/text/link) overrides parser auto-detection
- Clean HTML output without structural corruption

Before: <p class='lead'><p>**bold**</p></p> (broken)
After:  <p class='lead'>**bold text**</p> (clean)

Server remains source of truth for markdown processing with zero runtime overhead.
This commit is contained in:
2025-09-11 16:53:05 +02:00
parent 350c3f6160
commit 1980b8d305
5 changed files with 222 additions and 204 deletions

View File

@@ -1,136 +1,136 @@
<!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"/>
<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"/>
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="container">
<h1 class="logo insertr" data-content-id="navbar-logo-2b10ad" data-content-type="text">Acme Consulting</h1>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- Navigation -->
<nav class="navbar">
<div class="container">
<h1 class="logo insertr" data-content-id="hero-title-c70343" data-content-type="text">Acme Consulting</h1>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<h1 class="insertr" data-content-id="hero-title-c70343" data-content-type="text">About Acme Consulting</h1>
<p class="lead insertr" data-content-id="hero-lead-673026" 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>
</div>
</section>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<h1 class="insertr" data-content-id="hero-title-c70343" data-content-type="text">About Acme Consulting</h1>
<p class="lead insertr" data-content-id="footer-text-a44170" 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>
</div>
</section>
<!-- Story Section -->
<section class="services">
<div class="container">
<h2 class="insertr" data-content-id="services-subtitle-c8927c" data-content-type="text">Our Story</h2>
<div class="insertr-group">
<p>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>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>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>
</div>
</div>
</section>
<!-- Story Section -->
<section class="services">
<div class="container">
<h2 class="insertr" data-content-id="testimonial-subtitle-648b88" data-content-type="text">Our Story</h2>
<div class="insertr-group">
<p>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>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>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>
</div>
</div>
</section>
<!-- Team Section -->
<section class="cta">
<div class="container">
<h2 class="insertr" data-content-id="subtitle-ba6444" data-content-type="text">Our Team</h2>
<p class="insertr" data-content-id="text-8b3502" 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>
<div class="services-grid" style="margin-top: 3rem;">
<div class="service-card">
<div class="insertr">
<h3>Sarah Chen</h3>
<p><strong>Founder &amp; 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">
<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">
<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>
</div>
</div>
</div>
</div>
</section>
<!-- Team Section -->
<section class="cta">
<div class="container">
<h2 class="insertr" data-content-id="subtitle-ba6444" data-content-type="text">Our Team</h2>
<p class="insertr" data-content-id="text-8b3502" 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>
<div class="services-grid" style="margin-top: 3rem;">
<div class="service-card">
<div class="insertr">
<h3>Sarah Chen</h3>
<p><strong>Founder &amp; 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">
<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">
<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>
</div>
</div>
</div>
</div>
</section>
<!-- Values Section -->
<section class="testimonial">
<div class="container">
<h2 class="insertr" style="margin-bottom: 2rem;" data-content-id="testimonial-subtitle-dce35b" data-content-type="text">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="testimonial-heading-f7eefa" data-content-type="text">Client-First</h3>
<p class="insertr" data-content-id="testimonial-text-f7e46f" data-content-type="markdown">Every recommendation we make is designed with your specific business context and goals in mind.</p>
</div>
<div>
<h3 class="insertr" data-content-id="testimonial-heading-fd4293" data-content-type="text">Practical Solutions</h3>
<p class="insertr" data-content-id="testimonial-text-c12023" data-content-type="markdown">We believe in strategies that you can actually implement with your current resources and capabilities.</p>
</div>
<div>
<h3 class="insertr" data-content-id="testimonial-heading-957cc8" data-content-type="text">Long-term Partnership</h3>
<p class="insertr" data-content-id="testimonial-text-45dae2" data-content-type="markdown">We&#39;re not just consultants; we&#39;re partners in your business success for the long haul.</p>
</div>
</div>
</div>
</section>
<!-- Values Section -->
<section class="testimonial">
<div class="container">
<h2 class="insertr" style="margin-bottom: 2rem;" data-content-id="testimonial-subtitle-dce35b" data-content-type="text">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="testimonial-heading-957cc8" data-content-type="text">Client-First</h3>
<p class="insertr" data-content-id="testimonial-text-f7e46f" data-content-type="markdown">Every recommendation we make is designed with your specific business context and goals in mind.</p>
</div>
<div>
<h3 class="insertr" data-content-id="testimonial-heading-fd4293" data-content-type="text">Practical Solutions</h3>
<p class="insertr" data-content-id="testimonial-text-c12023" data-content-type="markdown">We believe in strategies that you can actually implement with your current resources and capabilities.</p>
</div>
<div>
<h3 class="insertr" data-content-id="testimonial-heading-957cc8" data-content-type="text">Long-term Partnership</h3>
<p class="insertr" data-content-id="testimonial-text-45dae2" data-content-type="markdown">We&#39;re not just consultants; we&#39;re partners in your business success for the long haul.</p>
</div>
</div>
</div>
</section>
<!-- Test Section for Insertr Features -->
<section class="testimonial">
<div class="container">
<h2 class="insertr" data-content-id="testimonial-subtitle-648b88" data-content-type="text">Feature Tests</h2>
<!-- Test 1: .insertr container expansion (should make each p individually editable) -->
<div style="margin-bottom: 2rem;">
<h3>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>
</div>
</div>
<!-- Test 2: .insertr-group collective editing (should edit all together) -->
<div>
<h3>Test 2: Group Editing (.insertr-group)</h3>
<div class="insertr-group" style="border: 2px solid #007cba; padding: 1rem;">
<p>This paragraph is part of a <strong>group</strong>.</p>
<p>Clicking anywhere should open one markdown editor with <em>rich formatting</em>.</p>
<p>All content should be <strong>editable together</strong> as markdown with proper <em>HTML conversion</em>.</p>
</div>
</div>
</div>
</section>
<!-- Test Section for Insertr Features -->
<section class="testimonial">
<div class="container">
<h2 class="insertr" data-content-id="testimonial-subtitle-648b88" data-content-type="text">Feature Tests</h2>
<!-- Test 1: .insertr container expansion (should make each p individually editable) -->
<div style="margin-bottom: 2rem;">
<h3>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>
</div>
</div>
<!-- Test 2: .insertr-group collective editing (should edit all together) -->
<div>
<h3>Test 2: Group Editing (.insertr-group)</h3>
<div class="insertr-group" style="border: 2px solid #007cba; padding: 1rem;">
<p>This paragraph is part of a <strong>group</strong>.</p>
<p>Clicking anywhere should open one markdown editor with <em>rich formatting</em>.</p>
<p>All content should be <strong>editable together</strong> as markdown with proper <em>HTML conversion</em>.</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p class="insertr" data-content-id="footer-text-a2b6a8" data-content-type="markdown">© 2024 Acme Consulting Services. All rights reserved.</p>
<p class="insertr" data-content-id="footer-text-a44170" 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>
</div>
</footer>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p class="insertr" data-content-id="footer-text-a2b6a8" data-content-type="markdown">© 2024 Acme Consulting Services. All rights reserved.</p>
<p class="insertr" data-content-id="footer-text-a44170" 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>
</div>
</footer>
<!-- Insertr JavaScript Library -->
<script type="text/javascript" src="insertr.js"></script>
<!-- Insertr JavaScript Library -->
<script type="text/javascript" src="insertr.js"></script>

View File

@@ -1,85 +1,87 @@
<!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"/>
<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"/>
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="container">
<h1 class="logo insertr" data-content-id="navbar-logo-200530" data-content-type="text">Acme Consulting</h1>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- Navigation -->
<nav class="navbar">
<div class="container">
<h1 class="logo insertr" data-content-id="navbar-logo-2b10ad" data-content-type="text">Acme Consulting</h1>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<h1 class="insertr" data-content-id="hero-title-a1de7b" data-content-type="text">Transform Your Business with Expert Consulting!</h1>
<p class="lead insertr" data-content-id="hero-lead-abb35f" data-content-type="markdown">We help small 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="hero-link-20f13f" data-content-type="link">Get Started Today</a>
</div>
</section>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<h1 class="insertr" data-content-id="hero-title-7cfeea" data-content-type="text">Transform Your Business with Expert Consulting</h1>
<p class="lead insertr" data-content-id="footer-text-d73f32" data-content-type="markdown"><p>We help small businesses <strong>grow</strong> through strategic planning, process optimization, and digital transformation. Our team brings 15+ years of experience to drive your success. Superb</p>
</p>
<a href="contact.html" class="btn-primary insertr" data-content-id="link-d11ae9" data-content-type="link">Get Started Today?</a>
</div>
</section>
<!-- Services Section -->
<section class="services">
<div class="container">
<h2 class="insertr" data-content-id="services-subtitle-7a7725" data-content-type="text">Our Offers</h2>
<p class="section-subtitle insertr" data-content-id="services-title-66a36e" data-content-type="markdown">Comprehensive solutions tailored to your business needs</p>
<div class="services-grid">
<div class="service-card">
<h3 class="insertr" data-content-id="services-heading-6dd5f2" data-content-type="text">Strategic Planning</h3>
<p class="insertr" data-content-id="services-text-3a002f" data-content-type="markdown">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="services-heading-fdebeb" data-content-type="text">Operations Optimization</h3>
<p class="insertr" data-content-id="services-text-31ddbd" data-content-type="markdown">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="services-heading-0d6ef9" data-content-type="text">Digital Transformation</h3>
<p class="insertr" data-content-id="services-text-bd1837" data-content-type="markdown">Modernize your technology stack and digital presence to compete effectively in today&#39;s marketplace.</p>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section class="services">
<div class="container">
<h2 class="insertr" data-content-id="subtitle-d0ebd3" data-content-type="text">Our Services</h2>
<p class="section-subtitle insertr" data-content-id="services-title-66a36e" data-content-type="markdown">Comprehensive solutions tailored to your business needs</p>
<div class="services-grid">
<div class="service-card">
<h3 class="insertr" data-content-id="services-heading-0d6ef9" data-content-type="text">Strategic Planning</h3>
<p class="insertr" data-content-id="services-text-3a002f" data-content-type="markdown">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="services-heading-fdebeb" data-content-type="text">Operations Optimization</h3>
<p class="insertr" data-content-id="services-text-31ddbd" data-content-type="markdown">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="services-heading-0d6ef9" data-content-type="text">Digital Transformation</h3>
<p class="insertr" data-content-id="services-text-bd1837" data-content-type="markdown">Modernize your technology stack and digital presence to compete effectively in today&#39;s marketplace.</p>
</div>
</div>
</div>
</section>
<!-- Testimonial Section -->
<section class="testimonial">
<div class="container">
<blockquote>
<p class="insertr" data-content-id="testimonial-text-69de1a" 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="testimonial-content-dfd023" data-content-type="text">Sarah Johnson, CEO of TechStart Inc.</cite>
</blockquote>
</div>
</section>
<!-- Testimonial Section -->
<section class="testimonial">
<div class="container">
<blockquote>
<p class="insertr" data-content-id="testimonial-text-69de1a" 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="testimonial-content-dfd023" data-content-type="text">Sarah Johnson, CEO of TechStart Inc.</cite>
</blockquote>
</div>
</section>
<!-- Call to Action -->
<section class="cta">
<div class="container">
<h2 class="insertr" data-content-id="subtitle-d0ebd3" data-content-type="text">Ready to Transform Your Business?</h2>
<p class="insertr" data-content-id="text-a588c5" 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="link-d11ae9" data-content-type="link">Schedule Consultation</a>
</div>
</section>
<!-- Call to Action -->
<section class="cta">
<div class="container">
<h2 class="insertr" data-content-id="subtitle-d0ebd3" data-content-type="text">Ready to Transform Your Business?</h2>
<p class="insertr" data-content-id="text-a588c5" 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="link-d11ae9" data-content-type="link">Schedule Consultation</a>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p class="insertr" data-content-id="footer-text-a2b6a8-22fbf8" data-content-type="markdown">© 2024 Acme Consulting Services. All rights reserved.</p>
<p class="insertr" data-content-id="footer-text-d73f32" data-content-type="markdown">📧 info@acmeconsulting.com | 📞 (555) 123-4567 | <a href="#" class="insertr-gate">Editor</a></p>
</div>
</footer>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p class="insertr" data-content-id="footer-text-a2b6a8-22fbf8" data-content-type="markdown">© 2024 Acme Consulting Services. All rights reserved.</p>
<p class="insertr" data-content-id="footer-text-d73f32" data-content-type="markdown"><p>We help small businesses <strong>grow</strong> through strategic planning, process optimization, and digital transformation. Our team brings 15+ years of experience to drive your success. Superb</p>
</p>
</div>
</footer>
<!-- Insertr JavaScript Library -->
<script type="text/javascript" src="insertr.js"></script>
<!-- Insertr JavaScript Library -->
<script type="text/javascript" src="insertr.js"></script>
</body></html>

View File

@@ -107,17 +107,23 @@ func (e *Enhancer) findAndInjectNodes(rootNode *html.Node, elem parser.Element,
return
}
// Determine content type: use database type if available, otherwise parser type
contentType := string(elem.Type)
if contentItem != nil {
contentType = contentItem.Type // Database is source of truth
}
// Inject content attributes for the correctly matched node
e.injector.AddContentAttributes(targetNode, elem.ContentID, string(elem.Type))
e.injector.AddContentAttributes(targetNode, elem.ContentID, contentType)
// Inject content if available
if contentItem != nil {
switch elem.Type {
case parser.ContentText:
switch contentItem.Type { // Use database type, not parser type
case "text":
e.injector.injectTextContent(targetNode, contentItem.Value)
case parser.ContentMarkdown:
case "markdown":
e.injector.injectMarkdownContent(targetNode, contentItem.Value)
case parser.ContentLink:
case "link":
e.injector.injectLinkContent(targetNode, contentItem.Value)
}
}

View File

@@ -142,15 +142,16 @@ func (i *Injector) injectLinkContent(node *html.Node, content string) {
}
// injectHTMLContent safely injects HTML content into a DOM node
// Preserves the original element and only replaces its content
func (i *Injector) injectHTMLContent(node *html.Node, htmlContent string) {
// Clear existing content
// Clear existing content but preserve the element itself
i.clearNode(node)
if htmlContent == "" {
return
}
// Wrap content to create valid HTML document for parsing
// Wrap content for safe parsing
wrappedHTML := "<div>" + htmlContent + "</div>"
// Parse HTML string
@@ -168,7 +169,7 @@ func (i *Injector) injectHTMLContent(node *html.Node, htmlContent string) {
return
}
// Move parsed nodes to target element
// Move parsed nodes to target element (preserving original element)
for child := wrapper.FirstChild; child != nil; {
next := child.NextSibling
wrapper.RemoveChild(child)

View File

@@ -3,6 +3,7 @@ package content
import (
"bytes"
"log"
"strings"
"github.com/yuin/goldmark"
"github.com/yuin/goldmark/parser"
@@ -57,11 +58,19 @@ func (mp *MarkdownProcessor) ToHTML(markdown string) (string, error) {
html := buf.String()
// Clean up goldmark's paragraph wrapping - we want inline content
// Remove <p> and </p> tags if the content is wrapped in a single paragraph
if len(html) > 7 && html[:3] == "<p>" && html[len(html)-4:] == "</p>" {
html = html[3 : len(html)-4]
// Clean up goldmark's paragraph wrapping for inline content
// If content is wrapped in a single <p> tag, extract just the inner content
html = strings.TrimSpace(html)
if strings.HasPrefix(html, "<p>") && strings.HasSuffix(html, "</p>") {
// Check if this is a single paragraph (no other <p> tags inside)
inner := html[3 : len(html)-4] // Remove <p> and </p>
if !strings.Contains(inner, "<p>") {
// Single paragraph - return just the inner content for inline injection
return inner, nil
}
}
// Multiple paragraphs or other block content - return as-is
return html, nil
}