Multi-Property Editor Polish:
- Add comprehensive form styling (.insertr-form-group, .insertr-form-input, etc.)
- Professional layout with titles, validation, auto-focus, and help text
- Enhanced link/button/image editors with real-time validation
- Consistent spacing, colors, and visual hierarchy
Smart Default Formatting:
- Add Bold, Italic, Link options when not detected in content
- Intelligent detection respects existing developer styles
- Visual distinction for default vs detected styles with info-colored borders
- Content-aware: only adds to elements that benefit from text formatting
Link Interface Unification:
- Create shared createLinkConfigurationForm() component
- Eliminate code duplication between direct editing and popup creation
- Update createLinkEditor() and showLinkConfigPopup() to use shared component
- Fix link button styling to match other style buttons with preview content
Benefits:
- Consistent professional editing experience across all interfaces
- Reduced maintenance burden through code unification
- Enhanced UX with validation, keyboard shortcuts, and visual feedback
- Maintains CLASSES.md philosophy while improving out-of-box experience
## Library Code Cleanup (~1,200+ lines removed)
- Remove legacy markdown system (markdown.js, previewer.js)
- Delete unused EditContext code from ui/editor.js (~400 lines)
- Remove version history UI components from form-renderer.js (~180 lines)
- Clean unused CSS styles from insertr.css (~120 lines)
- Update package.json dependencies (remove marked, turndown)
## Documentation Updates
- README.md: Update from markdown to HTML-first approach
- AGENTS.md: Add current architecture guidance and HTML-first principles
- TODO.md: Complete rewrite with realistic roadmap and current status
- demos/README.md: Update for development demo server usage
## System Reality Alignment
- All documentation now reflects current working system
- Removed aspirational features in favor of actual capabilities
- Clear separation between development and production workflows
- Accurate description of style-aware editor with HTML preservation
## Code Cleanup Benefits
- Simplified codebase focused on HTML-first approach
- Removed markdown conversion complexity
- Cleaner build process without unused dependencies
- Better alignment between frontend capabilities and documentation
Ready for Phase 3a server updates with clean foundation.
- Add StyleDetectionEngine with one-layer-deep nested element analysis
- Add HTMLPreservationEngine for direct HTML manipulation without lossy conversion
- Implement structure-preserving content parsing that maintains element positions
- Add multi-property element support for links (href + content), images (src + alt), buttons
- Create comprehensive test suite with real DOM element validation
- Replace markdown-based system foundation with HTML-first architecture
- Preserve all element attributes (classes, IDs, data-*, aria-*) during editing
- Generate human-readable style names from detected nested elements
- Support template extraction with multiple insertion points for complex elements
Foundation complete for Phase 2 style-aware editor interface per CLASSES.md specification.
- Remove complex style preservation system from editor
- Simplify markdown conversion back to straightforward approach
- Remove StyleContext class and style-aware conversion methods
- Switch content type from 'html' back to 'markdown' for consistency
- Clean up editor workflow to focus on core markdown editing
- Remove ~500 lines of unnecessary style complexity
This completes the UI unification cleanup by removing the overly complex
style preservation system that was making the editor harder to maintain.
- Add StyleContext class for extracting and applying HTML attributes/styles
- Enhance MarkdownConverter with style-aware conversion methods
- Switch backend storage from markdown to HTML with 'html' content type
- Update editor workflow to preserve CSS classes, IDs, and attributes
- Maintain markdown editing UX while storing HTML for style preservation
- Support complex attributes like rel, data-*, aria-*, etc.
This enables editing styled content like <a class="fancy" rel="me">text</a>
while preserving all styling attributes through the markdown editing process.
Backend implementation:
- Add goldmark dependency for markdown processing
- Create MarkdownProcessor with minimal config (bold, italic, links only)
- Update content injector with HTML injection capabilities
- Add injectHTMLContent() for safe DOM manipulation
- Server now converts **bold**, *italic*, [links](url) to HTML during enhancement
Frontend alignment:
- Restrict marked.js to match server capabilities
- Disable unsupported features (headings, lists, code blocks, tables)
- Update turndown rules to prevent unsupported markdown generation
- Frontend editor preview now matches server output exactly
Server as source of truth:
- Build-time markdown→HTML conversion during enhancement
- Zero runtime overhead for end users
- Consistent formatting between editor preview and final output
- Raw markdown stored in database, HTML served to visitors
Tested features:
- **bold** → <strong>bold</strong> ✅
- *italic* → <em>italic</em> ✅
- [text](url) → <a href="url">text</a> ✅
- Add marked and turndown libraries for bidirectional conversion
- Create comprehensive MarkdownConverter utility with proper paragraph preservation
- Implement perfect round-trip HTML→Markdown→HTML conversion
- Add rich formatting support (bold, italic, paragraphs) with live preview
- Fix save handler conflict where general editor overwrote group changes
- Implement debounced live preview for group editing (500ms like regular elements)
- Enable dynamic paragraph creation/removal during markdown editing
- Add comprehensive test cases with HTML formatting examples
Result: World-class drop-in markdown editing with 29KB bundle size
