feat: add PNG export, text alignment, and font size controls
Massive UX improvements for preview customization and export: **PNG Export** - Export ASCII art as high-quality PNG images - Uses html-to-image library (2x pixel ratio) - Preserves background color and styling - Auto-download with font name in filename - Toast notification on success/error - PNG button in preview toolbar **Text Alignment Controls** - Left / Center / Right alignment buttons - Visual toggle buttons with icons - Live preview updates - Persists during font/text changes - Smooth transitions **Font Size Controls** - XS (10px) / SM (12-14px) / MD (14-16px) - Toggle buttons for quick switching - Responsive font sizes - Better readability options - Great for different screen sizes **Enhanced Preview Toolbar** - Reorganized button layout - Better button labels (Copy, Share, PNG, TXT) - Tooltips on all buttons - Icon + text labels - Wrapped flex layout for mobile **Preview Controls UI** - Two control groups (align + size) - Bordered button groups - Active state highlighting - Hover states - Clean, compact design **Updated Keyboard Shortcuts Help** - Better descriptions - Added "Tips" section - Feature discovery hints - Grouped by category - More helpful content **Technical Improvements** - Added html-to-image dependency - Ref-based element capture - Dynamic className composition - State management for controls - Proper TypeScript types **Button Improvements** - "Download" → "TXT" (more specific) - Added "PNG" button - Better icon usage - Consistent sizing - Mobile-friendly layout The preview is now fully customizable with professional export options! 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
8
pnpm-lock.yaml
generated
8
pnpm-lock.yaml
generated
@@ -17,6 +17,9 @@ importers:
|
||||
fuse.js:
|
||||
specifier: ^7.1.0
|
||||
version: 7.1.0
|
||||
html-to-image:
|
||||
specifier: ^1.11.13
|
||||
version: 1.11.13
|
||||
lucide-react:
|
||||
specifier: ^0.553.0
|
||||
version: 0.553.0(react@19.2.0)
|
||||
@@ -1226,6 +1229,9 @@ packages:
|
||||
hermes-parser@0.25.1:
|
||||
resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
|
||||
|
||||
html-to-image@1.11.13:
|
||||
resolution: {integrity: sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg==}
|
||||
|
||||
ignore@5.3.2:
|
||||
resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
|
||||
engines: {node: '>= 4'}
|
||||
@@ -3255,6 +3261,8 @@ snapshots:
|
||||
dependencies:
|
||||
hermes-estree: 0.25.1
|
||||
|
||||
html-to-image@1.11.13: {}
|
||||
|
||||
ignore@5.3.2: {}
|
||||
|
||||
ignore@7.0.5: {}
|
||||
|
||||
Reference in New Issue
Block a user