|
|
d0e70f81e7
|
Major code quality improvements: Fix XSS vulnerabilities and replace browser dialogs
Security Fixes:
- Add DOMPurify HTML sanitization for all dangerouslySetInnerHTML usage
- Create comprehensive HTML sanitization utility with configurable security levels
- Implement safe template rendering for slide content and layouts
- Add input validation for image sources and dangerous attributes
UI/UX Improvements:
- Replace browser alert() and confirm() with proper React modal components
- Create reusable Modal, AlertDialog, and ConfirmDialog components
- Add useDialog hook for easy dialog state management
- Implement proper accessibility with keyboard navigation and focus management
- Add smooth animations and responsive design for dialogs
Components Added:
- src/utils/htmlSanitizer.ts - Comprehensive HTML sanitization
- src/components/ui/Modal.tsx - Base modal component
- src/components/ui/AlertDialog.tsx - Alert dialog component
- src/components/ui/ConfirmDialog.tsx - Confirmation dialog component
- src/hooks/useDialog.ts - Dialog state management hook
Updated Components:
- SlideEditor.tsx - Now uses sanitized HTML rendering
- LayoutPreviewPage.tsx - Now uses sanitized HTML rendering
- PresentationEditor.tsx - Now uses React dialogs instead of browser dialogs
Benefits:
✅ Eliminates XSS vulnerabilities from unsafe HTML rendering
✅ Provides consistent, accessible user interface
✅ Improves user experience with proper modal dialogs
✅ Maintains security while preserving slide formatting capabilities
✅ Follows React best practices for component composition
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-08-20 17:41:15 -05:00 |
|
|
|
6e6c09b5ba
|
Add comprehensive theme routing and browsing system
- Add React Router with theme browser, theme detail, and layout detail pages
- Implement manifest-based theme discovery for better performance
- Add Welcome component as home page with feature overview
- Fix layout and styling issues with proper CSS centering
- Implement introspective theme browsing (dynamically discover colors/variables)
- Add layout preview system with iframe scaling
- Create comprehensive theme detail page with color palette display
- Fix TypeScript errors and build issues
- Remove hardcoded theme assumptions in favor of dynamic discovery
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-08-20 10:17:55 -05:00 |
|
