feat: implement container expansion and group editing functionality

- Add container element detection and child expansion in InsertrCore
- Implement .insertr descendant expansion matching CLI behavior
- Add .insertr-group collective editing with markdown editor
- Fix UX issue where div.insertr got text input instead of proper child editors
- Add comprehensive test cases for both features in about.html
- Enable live preview for group editing with proper content splitting
This commit is contained in:
2025-09-07 20:43:43 +02:00
parent 53762645e0
commit fdf9e1bb7e
3 changed files with 363 additions and 10 deletions

View File

@@ -33,7 +33,7 @@
<section class="services">
<div class="container">
<h2 class="insertr">Our Story</h2>
<div class="insertr">
<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't serving the needs of growing businesses. We set out to change that.</p>
@@ -96,6 +96,33 @@
</div>
</section>
<!-- Test Section for Insertr Features -->
<section class="testimonial">
<div class="container">
<h2 class="insertr">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 group.</p>
<p>Clicking anywhere in the group should open one markdown editor.</p>
<p>All content should be editable together as markdown.</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
@@ -108,4 +135,4 @@
<script type="text/javascript" src="insertr.js"></script>
</body>
</html>
</html>