feat: implement professional modal editing forms (Phase 1.2)

Browse Source

MAJOR UX IMPROVEMENT: Replace basic prompt() with professional forms

New Features:
- Professional modal overlays with backdrop and ESC/click-outside cancel
- Dynamic form generation based on content type and HTML element
- Smart field detection: H1-H6→text, P→textarea, A→link with URL
- Mobile-responsive form positioning and widths
- Complete CSS styling with focus states and transitions
- Proper save/cancel event handling

Technical Implementation:
- Created lib/src/ui/form-renderer.js with modern ES6+ modules
- Integrated into core editor.js with form renderer instance
- Support for text, textarea, markdown, and link field types
- XSS protection with HTML escaping
- Responsive design: mobile-first form sizing
- Professional styling matching prototype quality

Before: Basic browser prompt() for all editing
After: Content-aware professional modal forms

This brings the library from proof-of-concept to professional-grade
editing experience, closing the major UX gap with the archived prototype.

Phase 1.2 ✅ COMPLETED - Next: Authentication system (Phase 1.1)

...

This commit is contained in:

Joakim

2025-09-03 19:32:01 +02:00

parent ca3df47451

commit 3f90bf9c3b

5 changed files with 1010 additions and 40 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

2

insertr-cli/pkg/content/assets/insertr.min.js vendored

File diff suppressed because one or more lines are too long