Joakim
00c2ba34e6
- Add syntactic sugar for container transformation: .insertr containers → children get .insertr - Fix discovery auto-running when disabled with site-specific config loading - Add comprehensive styling test examples for HTML attribute preservation - Include test input for syntactic sugar validation - Update discovery defaults to respect developer intent (disabled by default)
183 lines
6.3 KiB
HTML
183 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Insertr Styling Test Examples</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
max-width: 800px;
|
|
margin: 2rem auto;
|
|
padding: 1rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.example {
|
|
border: 2px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
margin: 2rem 0;
|
|
background: #f9fafb;
|
|
}
|
|
|
|
.example h3 {
|
|
color: #374151;
|
|
margin-top: 0;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.example-description {
|
|
background: #fef3c7;
|
|
padding: 0.75rem;
|
|
border-radius: 4px;
|
|
font-size: 0.9rem;
|
|
color: #92400e;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Styled elements for testing */
|
|
.emph {
|
|
color: #dc2626;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.fancy {
|
|
color: #7c3aed;
|
|
text-decoration: none;
|
|
border-bottom: 2px solid #a855f7;
|
|
}
|
|
|
|
.fancy:hover {
|
|
background: #ede9fe;
|
|
}
|
|
|
|
.highlight {
|
|
background: #fef08a;
|
|
padding: 0 0.25rem;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.brand {
|
|
color: #059669;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.btn {
|
|
background: #3b82f6;
|
|
color: white;
|
|
border: none;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 6px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: #2563eb;
|
|
}
|
|
|
|
.card {
|
|
background: white;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.title {
|
|
color: #1f2937;
|
|
font-size: 1.25rem;
|
|
margin: 0 0 0.5rem 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1 class="insertr">Insertr Styling Preservation Test Examples</h1>
|
|
<p class="insertr">These examples test how well Insertr preserves styling during the markdown editing process.</p>
|
|
|
|
<!-- Example 1: Styled Strong Element -->
|
|
<div class="example">
|
|
<h3>Example 1: Styled Strong Element</h3>
|
|
<div class="example-description">
|
|
Tests preservation of class styling on bold elements. Original has "emph" class for red styling.
|
|
</div>
|
|
<p class="insertr">Hello <strong class="emph">world</strong> and welcome!</p>
|
|
</div>
|
|
|
|
<!-- Example 2: Styled Link Element -->
|
|
<div class="example">
|
|
<h3>Example 2: Styled Link Element</h3>
|
|
<div class="example-description">
|
|
Tests preservation of link classes and styles. The "fancy" class adds purple color and bottom border.
|
|
</div>
|
|
<p class="insertr">Visit our <a class="fancy" href="#about">about page</a> for more info.</p>
|
|
</div>
|
|
|
|
<!-- Example 3: Mixed Content Types -->
|
|
<div class="example">
|
|
<h3>Example 3: Mixed Content with Complex Attributes</h3>
|
|
<div class="example-description">
|
|
Tests preservation of rel, target attributes and multiple styled elements.
|
|
</div>
|
|
<p class="insertr">Visit <a href="https://example.com" rel="noopener" target="_blank" class="fancy">our site</a> for <span class="highlight">amazing</span> content!</p>
|
|
</div>
|
|
|
|
<!-- Example 4: Multiple Styled Elements -->
|
|
<div class="example">
|
|
<h3>Example 4: Multiple Styled Elements</h3>
|
|
<div class="example-description">
|
|
Tests handling of multiple different styled elements in one paragraph.
|
|
</div>
|
|
<p class="insertr">Welcome to <strong class="brand">Acme Corp</strong> where we create <span class="highlight">innovative</span> solutions for <em class="emph">modern</em> businesses.</p>
|
|
</div>
|
|
|
|
<!-- Example 5: Button in Text -->
|
|
<div class="example">
|
|
<h3>Example 5: Button with Data Attributes</h3>
|
|
<div class="example-description">
|
|
Tests preservation of button elements and data attributes for analytics.
|
|
</div>
|
|
<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 -->
|
|
<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>
|
|
<div class="example-description">
|
|
Tests editing of a more complex structure with multiple elements. This might be too complex for markdown.
|
|
</div>
|
|
<div class="insertr card">
|
|
<h3 class="title">Welcome Back!</h3>
|
|
<p>Hello <strong class="brand">valued</strong> customer, ready to explore our <span class="highlight">new features</span>?</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Example 8: Simple Text for Comparison -->
|
|
<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>
|
|
<div class="example-description">
|
|
Tests preservation of multiple attributes including id, class, and title.
|
|
</div>
|
|
<p class="insertr">Need help? Contact our <a id="support-link" class="fancy" href="mailto:support@example.com" title="Email our support team">support team</a> anytime.</p>
|
|
</div>
|
|
</body>
|
|
</html> |