- Replace content-hash based ID generation with position-based algorithm
- Use file + element identity + position index + hash for unique IDs
- Generate human-readable prefixes (e.g. index-lead-, index-p-2-)
- Add collision-resistant hash suffixes for guaranteed uniqueness
- Update Generate() to accept filePath parameter for context
- Fix ID collisions where hero and footer elements shared same ID
- Clean demo site files removing all data-content-id attributes
- Preserve insertr-gate elements for authentication functionality
Results: Hero gets 'index-lead-2-fc31f2', footer gets 'index-p-13-99fd13'
No more content cross-contamination between different elements.
Backend changes:
- Updated parser to treat <span> elements as markdown by default
- Changed span content type detection from ContentText to ContentMarkdown
- Spans now support **bold**, *italic*, and [links](url) formatting
Frontend changes:
- Updated content type detection to match backend behavior
- Frontend now treats spans as markdown elements for consistent processing
- Editor preview behavior now matches server-side enhancement
Benefits:
- <span class='highlight'>**bold** text</span> now processes markdown correctly
- Inline elements maintain all styling while supporting rich formatting
- Complete frontend/backend consistency for span element handling
- Expands markdown support to common inline wrapper elements
Tested and verified:
- Span elements preserve all classes, IDs, and styles
- Bold, italic, and link formatting works in span elements
- Content type properly detected as 'markdown' in both systems
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.
- Replace separate POST/PUT endpoints with unified POST upsert
- Add automatic content ID generation from element context when no ID provided
- Implement version history preservation before content updates
- Add element context support for backend ID generation
- Update frontend to use single endpoint for all content operations
- Enhanced demo site with latest database content including proper content IDs
- Problem: Element ID collisions between similar elements (logo h1 vs hero h1)
causing content to be injected into wrong elements
- Root cause: Enhancer used naive tag+class matching instead of parser's
sophisticated semantic analysis for element identification
Systematic solution:
- Enhanced parser architecture with exported utilities (GetClasses, ContainsClass)
- Added FindElementInDocument() with content-based semantic matching
- Replaced naive findAndInjectNodes() with parser-based element matching
- Removed code duplication between parser and enhancer packages
Backend improvements:
- Moved ID generation to backend for single source of truth
- Added ElementContext struct for frontend-backend communication
- Updated API handlers to support context-based content ID generation
Frontend improvements:
- Enhanced getElementMetadata() to extract semantic context
- Updated save flow to handle both enhanced and non-enhanced elements
- Improved API client to use backend-generated content IDs
Result:
- Unique content IDs: navbar-logo-200530 vs hero-title-a1de7b
- Precise element matching using content validation
- Single source of truth for DOM utilities in parser package
- Eliminated 40+ lines of duplicate code while fixing core bug
- Add script tags to demo-site HTML files for manual development
- Disable CLI inline script injection to prevent duplicate scripts
- Add library serving endpoints to servedev command
- Update build process to auto-copy library to demo-site
- Add CDN URL helpers for future production deployment
- Update .gitignore for generated demo-site files
Fixes .insertr-gate authentication for manual npm run serve workflow
while maintaining clean separation between CLI and manual setups.
- Replace automatic auth controls with developer-placed .insertr-gate elements
- Add OAuth-ready authentication flow with mock implementation
- Support any HTML element as gate with custom styling
- Implement proper gate restoration after authentication
- Move auth controls to bottom-right corner for better UX
- Add editor gates to demo pages (footer link and styled button)
- Maintain gates visible by default with hideGatesAfterAuth option
- Prevent duplicate authentication attempts with loading states
This enables small business owners to access editor via discrete
footer links or custom-styled elements placed anywhere by developers.
- Remove all manual data-content-id attributes from HTML files
- Archive old insertr JS/CSS assets to demo-site/archive/
- Remove hardcoded script includes and CSS links
- Remove old authentication controls and mock API
- Enable pure zero-config approach with class='insertr' only
- Parser now generates all 40 content IDs automatically
- Implement Go-based CLI for build-time HTML enhancement
- Add container expansion: div.insertr auto-expands to viable children
- Create servedev command with live development workflow
- Add Air configuration for automatic rebuilds and serving
- Enable transition from runtime JS to build-time enhancement approach
- Split monolithic insertr.js (932 lines) into 6 focused modules
- Extract configuration system for extensible field types and validation
- Separate validation, form rendering, content management, and markdown processing
- Maintain same API surface while improving maintainability and testability
- Update demo pages to use modular system
- Remove legacy support for cleaner codebase
Add UX-focused validation to prevent user accidents and provide immediate feedback. Includes DOMPurify integration for basic content sanitization and real-time form validation.
Features:
- Real-time input validation with visual feedback
- Field-type specific validation (text, URL, markdown)
- DOMPurify integration for display sanitization
- Validation messages with auto-dismiss
- Prevents common user mistakes (HTML in text fields, invalid URLs)
- Client-side sanitization for markdown rendering
- Maintains security awareness while focusing on user experience
Note: This is UX-focused validation - server-side validation remains the primary security boundary.
Implement markdown collection support alongside existing element-level editing. Users can now choose between individual element editing (headlines, buttons) and rich markdown editing (stories, bios). Includes responsive overlay forms, smart field detection, and comprehensive documentation updates.
Features:
- Markdown collections with data-field-type="markdown"
- Responsive overlay forms that adapt to element width
- Element-level editing for granular control
- Updated documentation and integration guide
- Fixed marked.js renderer configuration issues
- Enhanced about.html to demonstrate both approaches
Replace container-based blob editing approach with individual element editing. Each .insertr element now gets appropriate field type (text, textarea, link) based on HTML tag and classes. Provides much better UX with separate inputs for headlines, paragraphs, and buttons while preserving HTML structure and styling.
🚀 Major Upgrade: Professional markdown handling with marked.js
✅ Fixed Issues:
- No more recursion errors or browser crashes
- Proper handling of complex markdown (multiple links per line)
- Robust parsing of edge cases and nested formatting
🔧 Implementation:
- Added marked.js v16.2.1 via CDN to both HTML pages
- Custom renderer preserves button styling (btn-primary)
- Smart lead paragraph detection for styling preservation
- Intelligent element merging to maintain layout
- Removed all buggy custom parsing code (100+ lines)
🎯 New Capabilities:
- Multiple buttons per line: [Get Started](link1) [Or tomorrow](link2)
- Full CommonMark support (tables, lists, formatting)
- Better performance with optimized C-like parsing
- Extensible renderer system for future enhancements
✨ User Experience:
- Edit forms now handle complex markdown perfectly
- Layout and styling fully preserved after saves
- No more crashes when editing rich content
- Professional markdown processing
Ready to test the two-button hero scenario! 🚀
✨ Features implemented:
- Complete demo website (Acme Consulting Services)
- Core insertr.js library with edit-in-place functionality
- Support for simple text and rich markdown content
- Mock authentication system (login/logout simulation)
- Edit mode toggle for client interface
- Local storage persistence
- Visual feedback for saving content
- Multi-page support (index.html, about.html)
- Responsive design with clean UI
🎯 Three user experiences:
- Customer: Clean website with no edit interface
- Client: Same website + edit buttons when authenticated
- Developer: Simple class-based integration
🏗️ Architecture:
- Vanilla JavaScript (no framework dependencies)
- Alpine.js ready for enhanced interactivity
- CSS-only styling for edit indicators
- Mock API structure for backend planning
Next: Connect to Go backend with real persistence
