Michael Mainguy
d0e70f81e7
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>
68 lines
3.5 KiB
Markdown
68 lines
3.5 KiB
Markdown
# Slide authoring and presentation tool
|
|
- Should run with no backend server required
|
|
- Data should be stored in indexdb in the browser
|
|
- leverage existing react and npm libraries
|
|
|
|
# Features
|
|
- Create new presentation
|
|
- Select theme for presentation
|
|
- Add slides to presentation and select layout for each slide based on the selected theme and it's layouts
|
|
- Add text to slide in theme layout "slots"
|
|
- Add images to slide in theme layout "slots"
|
|
- Add presentation notes to slide
|
|
- Present slides in a full screen mode
|
|
|
|
|
|
# Themes
|
|
- Themes should be baked into the app, but should be customizable
|
|
- Themes should be selectable when creating a new presentation
|
|
- Themes should be applied to all slides in the presentation
|
|
- Themes should be able to be updated after the presentation is created and presentations will be updated to reflect the new theme
|
|
- Themes should allow multiple layouts for slides that are selectable when creating a new slide
|
|
- Themes should allow for custom CSS to be applied to the presentation
|
|
- Themes should allow for custom fonts to be applied to the presentation
|
|
- Themes should allow for custom colors to be applied to the presentation
|
|
- Themes should allow for custom images to be applied to the presentation
|
|
- Themes should allow for "master slides" that have content that slide authors cannot override or change
|
|
|
|
# ROADMAP
|
|
- [x] build themeing system creating initial default theme
|
|
- [x] build theme selection system
|
|
- [ ] build theme browsing module
|
|
- [ ] build presentation creation system
|
|
- [ ] build slide creation system
|
|
- [ ] build slide authoring system
|
|
- [ ] build presentation system
|
|
|
|
# CURRENT FOCUS
|
|
## determine structure and approach for theming system
|
|
- [x] it should be flexible and allow for custom themes to be created using only html templates and css
|
|
- [x] themes and templates should be very close to native html and css so that they can be easily created and modified
|
|
-
|
|
|
|
# Code Standards
|
|
- Strongly prefer convention over configuration versus configuration over convention
|
|
- Use React for the UI, but allow for other libraries if needed and try to keep as close to html/js/css as possible
|
|
- Use functional components and hooks
|
|
- Use TypeScript for type safety, but allow for JavaScript in some cases
|
|
- **No inline styles** - All styling should be in CSS files with semantic class names
|
|
- Theme structure should be simple and easy to understand for someone familiar with html and ccss
|
|
- Theme structure should not repeat the same information in multiple places
|
|
- Theme structure should be flexible and allow for custom themes to be created using only html templates and css
|
|
- Metadata for themes should be stored as comments in the html and css files
|
|
|
|
# General Claude Guidelines
|
|
- Don't run npm commands, just tell me what to run and I'll run them myself
|
|
- generally tsx files should be used for React components and they should be less than 200 lines of code
|
|
- if a file I should be warned when I ask for a code audit
|
|
- if a function or method is more than 50 lines of code, I should be warned
|
|
|
|
# Architecture
|
|
## Themes
|
|
- Themes should be stored in a directory structure under public directory that allows for easy access and modification by browser
|
|
- Themes should be stored in a directory structure that allows for easy access
|
|
|
|
- don't try to run command to restart, just tell me the command when necessary
|
|
- Add to memory. Just tell me to run build, I'll paste in results, don't try to run the command
|
|
- Add to memory. I want to make sure this approach is generally followed
|
|
- remember to always use introspection when browsing themes and details |