Add toolbar, themes, toast notifications, image upload, and PWA support

[Nir-Bhay]

Implements 5 high-priority UX enhancements: formatting toolbar, theme switching, toast notifications, image upload with drag-drop, and PWA offline support.

Changes

Formatting Toolbar

• 16-button toolbar for instant markdown insertion: Bold, Italic, Strikethrough, Headers (H1-H3), Links, Images, Code blocks, Lists (bullet/numbered/task), Blockquotes, Tables, Emoji
• Keyboard shortcuts: Ctrl+B (Bold), Ctrl+I (Italic), Ctrl+D (cycle themes)

Theme System

• 3 Monaco themes: Light (vs), Dark (vs-dark), High Contrast (hc-black)
• Dropdown selector with localStorage persistence
• Body class sync for preview pane styling

Toast Notifications

• Replaces window.confirm() and alerts with slide-in notifications
• 4 types (success/error/warning/info) with auto-dismiss and manual close
• Event-driven close handler (no inline onclick)

Image Upload

• Toolbar button triggers file picker or handles drag-drop onto editor
• Base64 encoding with configurable size limit (5MB default)
• Visual drag-over feedback with validation

PWA Support

• Service worker with offline caching
• Manifest for installability on mobile/desktop
• 30-minute update interval (configurable via APP_CONFIG.SERVICE_WORKER_UPDATE_INTERVAL_MS)

Additional Features

• Copy HTML button exports rendered preview
• Reading time estimate (200 WPM, configurable via APP_CONFIG.READING_SPEED_WPM)

Implementation

// Configuration object for easy tuning
const APP_CONFIG = {
    MAX_IMAGE_SIZE_MB: 5,
    READING_SPEED_WPM: 200,
    SERVICE_WORKER_UPDATE_INTERVAL_MS: 30 * 60 * 1000
};

// Toast system with proper event handling
let showToast = (message, type = 'info', duration = 3000) => {
    const toast = document.createElement('div');
    toast.className = `toast toast-${type}`;
    // ... innerHTML setup
    toast.querySelector('.toast-close').addEventListener('click', () => toast.remove());
    container.appendChild(toast);
    if (duration > 0) setTimeout(() => toast.remove(), duration);
};

Screenshots

Before:

After:

Dark Theme:

Files Modified

• index.html - Toolbar UI, theme selector, PWA meta tags
• src/main.js - Feature implementations (~800 LOC added)
• public/css/style.css - Toolbar, toast, drag-drop styles
• public/manifest.json (new) - PWA manifest
• public/sw.js (new) - Service worker with caching strategy

Original prompt

🎯 Markdown Live Preview - Code Review & Enhancement Suggestions
Hey! I've thoroughly analyzed your Markdown Live Preview project. Here's what I found and some exciting suggestions to make it even better! 🚀

📊 Current State - What You Have
Your project is a feature-rich markdown editor with:

✅ Existing Features
Live Preview with Monaco Editor (professional code editor)
Split View with resizable divider
Sync Scrolling between editor and preview
Dark Mode support
Export Options: Download as MD, Export to PDF
Import Files (.md, .markdown, .txt)
Auto-save to local storage
Word/Character Count
Help Modal with markdown syntax reference
Responsive Design for mobile devices
Keyboard Shortcuts (Ctrl+S, Ctrl+P, etc.)
🎨 Enhancement Suggestions to Make It More Alive & User-Friendly

1. 🎭 Enhanced UI/UX Improvements
   Modern Visual Enhancements
   Smooth Animations: Add subtle fade-in/slide transitions when toggling panels
   Better Loading States: Add skeleton loaders or progress indicators
   Toast Notifications: Replace alerts with elegant toast messages for actions (saved, exported, copied)
   Floating Action Button (FAB): Quick access to common actions on mobile
   Glassmorphism Effects: Modern frosted-glass effect for modals and overlays
   Color Themes
   Add multiple theme options (GitHub Dark, Dracula, Monokai, Solarized)
   Custom theme builder where users can pick their own colors
   Syntax highlighting themes that match the editor theme
2. 📝 Editor Enhancements
   Advanced Editing Features
   Toolbar with Quick Actions: Bold, Italic, Headers, Links, Images, Code blocks
   Markdown Templates: Pre-built templates (README, Blog Post, Documentation)
   Table Generator: Visual table builder/editor
   Emoji Picker: 😊 Quick emoji insertion
   Image Upload: Drag & drop images (convert to base64 or upload to imgur/cloudinary)
   Auto-formatting: Format on save option
   Line Numbers Toggle: Show/hide line numbers
   Smart Features
   Auto-complete: Suggest markdown syntax as you type
   Spell Check: Built-in spell checker
   Find & Replace: Search functionality within the editor
   Multiple Tabs: Work on multiple documents simultaneously
3. 💾 File Management
   Recent Files List: Quick access to recently edited documents
   File History/Versions: Save multiple versions with timestamps
   Cloud Sync: Google Drive, Dropbox, or GitHub Gist integration
   Export to Multiple Formats: HTML, DOCX, TXT, RTF
   Print Preview: Better print formatting
4. 🔥 Collaboration & Sharing
   Share Link: Generate shareable links (with expiration)
   QR Code Generator: Quick share via QR code
   Collaborative Editing: Real-time collaboration (using WebSockets)
   Comments/Annotations: Add comments to specific sections
5. ⚡ Performance & Accessibility
   Progressive Web App (PWA): Install as desktop/mobile app
   Offline Mode: Full functionality without internet
   Accessibility: ARIA labels, keyboard navigation, screen reader support
   Performance: Lazy loading, code splitting for faster initial load
6. 🎮 User Experience Features
   Customization
   Font Options: Multiple font choices (JetBrains Mono, Fira Code, etc.)
   Font Size Control: Increase/decrease text size
   Editor Width: Adjustable editor/preview split ratio presets
   Custom CSS: Let users add their own CSS for preview
   Productivity
   Focus Mode: Hide toolbar, distraction-free writing
   Zen Mode: Fullscreen with minimal UI
   Pomodoro Timer: Built-in writing timer
   Word Goals: Set daily word count goals with progress tracking
   Reading Time Estimate: Show estimated reading time
7. 📊 Analytics & Insights
   Writing Statistics: Track words written per day/week/month
   Readability Score: Flesch-Kincaid reading level
   Markdown Lint: Show markdown syntax issues/suggestions
   Document Outline: Auto-generated table of contents navigation
8. 🔧 Technical Improvements
   Code Quality
   TypeScript: Migrate to TypeScript for better type safety
   Testing: Add unit tests (Vitest) and E2E tests (Playwright)
   Error Boundaries: Better error handling and recovery
   Performance Monitoring: Add analytics to track usage
   Features
   Plugin System: Allow users to create/install plugins
   API: Expose an API for integrations
   Webhook Support: Trigger actions on save/export
   Markdown Extensions: Support for extended markdown (tables, task lists, footnotes, math equations with KaTeX)
9. 🎯 Quick Wins (Easy to Implement)
   These can be done quickly for immediate impact:

Copy HTML Button: Copy rendered HTML to clipboard
Preview-Only Mode: Hide editor, show only preview
Vertical/Horizontal Layout Toggle: Switch split orientation
Sample Documents: Load example documents (resume, blog post, etc.)
Export Preview as Image: Screenshot the preview as PNG
Markdown Cheat Sheet: Expandable sidebar reference
URL Import: Load markdown from a URL
GitHub Flavored Markdown: Full GFM support (task lists, strikethrough)
Mermaid Diagrams: Support for flowcharts and diagrams
Code Syntax Highlighting Options: Different highlight.js themes
🎨 Modern UI Mockup Suggestions
Code
┌─────────────────────────────────────────────────────────┐
│ 🎨 Markdown Live Preview [Theme ▼] [⚙️]...

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.