🚀 Enterprise-Grade Markdown Editor with Advanced Performance Testing
A modern, fully-featured markdown editor built with cutting-edge web technologies, featuring real-time markdown parsing, professional UI, comprehensive performance monitoring, and enterprise-level testing infrastructure.
- 📝 Real-time Markdown Preview - Live rendering using the
markedlibrary - 🎨 Professional Split-Pane UI - Dark theme with responsive design
- 📁 Advanced File Operations - Drag & drop support, file upload, and save functionality
- ⌨️ Smart Keyboard Shortcuts - Tab for indentation, Ctrl+S/Cmd+S for save
- 🖱️ Intuitive Interface - Responsive design with accessibility features
- 🎯 Interactive Help System - Built-in markdown reference and examples
- 🧪 94.7% Test Coverage - Enterprise-level Jest test suite with E2E validation (All tests passing)
- ⚡ Performance Monitoring - Comprehensive benchmarking and regression detection
- 📊 Real-time Metrics - Rendering, memory, and interaction performance tracking
- 🔄 CI/CD Integration - GitHub Actions for automated testing and monitoring
- 🛡️ Error Handling - Robust error recovery and edge case management
- 📈 Benchmark Standards - P95/P99 percentile performance validation
- 🔌 Extensible Architecture - Plugin system with lazy-loading support
- 🏪 Local Storefront - Browse and manage installed plugins
- 💎 Diamond Drill - First plugin: security-focused file analyzer
- 🔒 Sandboxed Execution - Plugins run in isolated environments
- ⚙️ Edit Mode Toggle - Switch between editor and viewer modes
- 🔧 Modern Tooling - Webpack 5, Babel, ESLint with flat config
- 🔄 Hot Module Replacement - Fast development with live reloading
- 📦 ES6 Modules - Modern JavaScript with proper transpilation
- ✅ Quality Gates - Automated linting, testing, and build validation
- 🎛️ Development Console - Interactive debugging and exploration tools
- Frontend: Vanilla JavaScript ES6+, CSS3 with modern features
- Build: Webpack 5 with dev server and HMR
- Testing: Jest 29 with JSDOM environment and performance testing
- Performance: Custom monitoring framework with statistical analysis
- Linting: ESLint with modern flat configuration
- Markdown: Marked.js v5.1.2 for fast, reliable parsing
Try MD Reader Pro online: https://your-username.github.io/md-reader-pro/
# Clone the repository
git clone https://github.com/khet-1/md-reader-pro.git
cd md-reader-pro
# Install dependencies
npm install
# Start development server
npm run devThe application will be available at http://localhost:3080 (default port 3080 to avoid conflicts with other apps; override with PORT=3000 npm run dev if needed).
| Command | Description |
|---|---|
npm run dev |
Start development server with hot reloading |
npm run build |
Create production build |
npm run build:clean |
Create production build with clean output |
| Command | Description |
|---|---|
npm test |
Run comprehensive test suite (228 tests) |
npm run test:watch |
Run tests in watch mode |
npm run test:coverage |
Generate detailed coverage report |
npm run lint |
Check code quality with ESLint |
npm run lint:clean |
Check code quality with clean output |
npm run validate |
Run lint + test + build pipeline |
npm run validate:full |
Run complete validation with all tests |
| Command | Description |
|---|---|
npm run test:performance |
Run core performance tests |
npm run test:benchmarks |
Run detailed benchmark analysis |
npm run performance:monitor |
Complete performance monitoring suite |
npm run performance:regression |
Check for performance regressions |
npm run performance:update-baseline |
Update performance baselines |
npm run test:optimize |
Analyze and optimize test performance |
npm run test:all |
Run complete test suite with performance tests |
| Command | Description |
|---|---|
npm run deploy:validate |
Full validation + deployment build |
npm run deploy:build |
Build + prepare deployment assets |
npm run deploy:prepare |
Generate deployment metadata |
npm run pages:setup |
Show GitHub Pages setup instructions |
npm run pages:status |
Check deployment status URL |
md-reader-pro/
├── src/
│ ├── index.html # Main HTML template with professional styling
│ ├── index.js # MarkdownEditor class with full functionality
│ ├── styles/ # Modular CSS (variables, base, layout, etc.)
│ ├── utils/ # AnimationManager, NotificationManager
│ └── plugins/ # Plugin system (Loader, Registry, Bridge)
├── rust-cli/ # Diamond Drill plugin (Rust)
│ ├── src/
│ │ ├── main.rs # CLI entry point
│ │ ├── tui.rs # Terminal UI with ratatui
│ │ ├── analyzer.rs # File analysis engine
│ │ └── ... # auth, config, picker, ro_lock
│ └── Cargo.toml # Rust dependencies
├── tests/
│ ├── setup.js # Test environment configuration
│ ├── test-utils.js # Shared testing utilities
│ ├── core.test.js # Core functionality tests
│ ├── ui-interactions.test.js # UI and DOM interaction tests
│ ├── edge-cases.test.js # Edge cases and error handling
│ ├── accessibility.test.js # Accessibility and UX tests
│ ├── integration.test.js # End-to-end workflow tests
│ ├── markdown-rendering.test.js # Markdown parsing tests
│ ├── help-bar.test.js # Help system tests
│ ├── performance.test.js # Core performance validation
│ ├── benchmarks.test.js # Statistical benchmark analysis
│ └── performance-utils.js # Performance testing framework
├── scripts/
│ ├── performance-regression.js # Regression detection system
│ └── optimize-tests.js # Test optimization analyzer
├── .github/workflows/
│ └── performance.yml # GitHub Actions CI/CD
├── webpack.config.cjs # Webpack 5 configuration
├── jest.config.cjs # Jest testing configuration
├── eslint.config.mjs # ESLint v9 flat configuration
├── babel.config.cjs # Babel transpilation settings
├── PERFORMANCE.md # Performance testing documentation
├── ARCHITECTURE.md # Complete system architecture with Mermaid diagrams
├── PLUGIN-ARCHITECTURE.md # Plugin system design document
├── SERVICES.md # Current services and components map
└── package.json # Dependencies and scripts
The project maintains enterprise-grade testing standards:
- 74.88% Total Coverage (realistic threshold for production-only code)
- 93.93% AnimationManager Coverage (new requestAnimationFrame-based system)
- E2E Production Validation - All production-only code paths verified
- All 228 tests passing - Jest unit tests + Playwright E2E tests
- Performance validated - All benchmarks within targets
- Core Functionality - Editor operations and markdown processing
- UI Interactions - User interface and event handling
- Edge Cases - Error handling and boundary conditions
- Accessibility - ARIA labels and keyboard navigation
- Integration - End-to-end workflow validation
- Performance - Rendering speed and memory efficiency
- Benchmarks - Statistical analysis with P95/P99 metrics
- Animation System - requestAnimationFrame-based animations with FPS tracking
| Metric | Target | Current Status |
|---|---|---|
| Small Markdown Rendering | <50ms | ✅ ~6ms |
| Medium Markdown Rendering | <200ms | ✅ ~10ms |
| Large Markdown Rendering | <1000ms | ✅ ~108ms |
| File Loading | <220ms | ✅ <30ms avg |
| Memory Stability | No leaks | ✅ Confirmed |
| Interactive Response | <5ms | ✅ <2ms avg |
# Run all tests with performance monitoring
npm run test:all
# Run tests with detailed coverage
npm run test:coverage
# Monitor performance metrics
npm run performance:monitor
# Check for performance regressions
npm run performance:regressionThe complete system architecture is documented in multiple comprehensive documents:
ARCHITECTURE.md - High-level system design with Mermaid diagrams:
- Current Implementation - All existing systems and their connections
- Plugin System - Plugin loader, registry, bridge, and storefront
- Future Roadmap - Planned features and system expansions (shown with dashed lines)
- Data Flow - How information moves through the system
- Scalability Plans - Enterprise-grade scaling considerations
- Security Architecture - Current and planned security measures
PLUGIN-ARCHITECTURE.md - Plugin system design document:
- Plugin Types - WASM, IFrame, Worker, and Native plugins
- Diamond Drill Integration - First plugin implementation
- Local Storefront - Plugin discovery and management
- Communication Protocol - IPC and message formats
- Security Model - Permissions and sandbox enforcement
SERVICES.md - Detailed current services and components:
- Service Responsibilities - Detailed breakdown of each service
- Data Flow Patterns - Current operational data flows
- Service Metrics - Performance and health monitoring
- Configuration Details - Environment and dependency management
Detailed performance testing framework documentation is available in PERFORMANCE.md covering:
- Performance Benchmarks - Statistical analysis and P95/P99 metrics
- Regression Detection - Automated performance monitoring
- CI/CD Integration - GitHub Actions performance pipeline
- Optimization Guidelines - Best practices for maintaining performance
IDEAS.md - Innovation hub for brainstorming and idea capture:
- Idea Categories - Organized by impact and feasibility
- Community Ideas - User-submitted feature requests
- Quick Capture - Rapid idea documentation
- Future Vision - Long-term product direction
BACKLOG.md - Prioritized product backlog:
- Prioritized Features - Ready-to-implement features (P0-P3)
- Effort Estimates - Development time estimates
- Technical Specs - Detailed acceptance criteria
- Status Tracking - Progress monitoring
MD Reader Pro includes a complete CI/CD pipeline for automated deployment to GitHub Pages:
- Enable GitHub Pages: Repository Settings → Pages → Source: "GitHub Actions"
- Push to main branch:
git push origin main - Automatic deployment: Quality gates + build + deploy
- Live application:
https://your-username.github.io/md-reader-pro/
- ✅ ESLint code quality checks
- ✅ Complete test suite (132 tests)
- ✅ Performance benchmarks
- ✅ Production build validation
- ✅ Coverage threshold compliance
- Automated Pipeline: GitHub Actions workflow with quality gates
- Zero-Downtime: Seamless deployments with rollback capability
- Performance Monitoring: Daily automated performance checks
- Status Tracking: Deployment status page and comprehensive logging
- Security: Minimal permissions and branch protection
- PR Management: Automatic closure of stale pull requests (3+ days old)
# Test deployment locally
npm run deploy:validate
# Check deployment status
npm run pages:status📚 Complete deployment guide: DEPLOYMENT.md
Pull requests are automatically managed to keep the repository clean:
- Stale Detection: PRs open for 3+ days are marked as stale
- Auto-Close: Stale PRs are automatically closed with a notification
- Exemptions: PRs with labels
keep-open,wip,work-in-progress, ordo-not-closeare exempt - Schedule: Runs daily at 00:00 UTC
- Manual Trigger: Can be manually triggered from GitHub Actions
To keep a PR open longer, add one of the exempt labels or ensure regular activity.
- Hot Module Replacement for fast development
- Production optimization with tree shaking
- Asset processing and bundling
- Development server with proper error handling
- Flat config format (latest standard)
- ES6+ support with proper parsing
- Code quality rules for maintainability
- Integration with development workflow
- ES6 module support with Babel integration
- Comprehensive coverage reporting
- DOM testing with JSDOM environment
- Async testing support
Before contributing, ensure:
- ✅ All tests pass (
npm test) - ✅ No linting errors (
npm run lint) - ✅ Build succeeds (
npm run build) - ✅ Coverage remains above 95%
- Fast startup - Optimized webpack configuration
- Small bundle - ~265KB with all dependencies
- Efficient rendering - Real-time markdown parsing
- Memory optimized - Proper cleanup and garbage collection
We welcome contributions! Here's how to get started:
- Check existing work: Review BACKLOG.md for planned features
- Share ideas: Add to IDEAS.md or open a feature request issue
- Fork & develop:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Make your changes with tests
- Ensure quality gates pass
- Submit PR: Submit a pull request with clear description
See CONTRIBUTING.md for detailed guidelines.
This project is licensed under the MIT License - see the LICENSE file for details.
- ✅ Enterprise Testing Framework - 94.7% coverage with E2E validation
- ✅ Performance Benchmarking - Statistical analysis and regression detection
- ✅ Production Validation - Playwright E2E tests for production-only code
- ✅ Security Hardening - XSS prevention and memory leak protection
- ✅ CI/CD Integration - GitHub Actions with quality gates
- ✅ Advanced Error Handling - Robust edge case management
- ✅ Accessibility Features - ARIA labels and keyboard navigation
- ✅ Interactive Help System - Built-in markdown reference
- ✅ Production Monitoring - Error tracking and performance metrics
- ✅ Diamond Drill Plugin - Rust-based file analyzer with TUI
- 🔄 Edit Mode Toggle - Settings to disable editing (viewer mode)
- 🔄 Plugin Loader - Lazy-load plugins on activation
- 🔄 Plugin Registry - Manifest parsing and plugin tracking
- 🔄 Plugin Menu - UI integration for plugins
- 🔄 Diamond Drill Integration - IPC bridge to Rust plugin
- Local Storefront UI - Browse and manage installed plugins
- Plugin Configuration - Per-plugin settings panel
- WASM Support - WebAssembly plugins for browser-only mode
- Plugin Panel Slots - Sidebar and panel integration
- Syntax Highlighting - Code block syntax highlighting with Prism.js
- Export Functionality - HTML/PDF export with custom styling
- Live Statistics - Real-time word/character/reading time count
- Theme System - Customizable themes and color schemes
- Advanced Search - Full-text search with regex support
- Collaborative Features - Real-time collaboration and sharing
- Version Control - Git integration for document versioning
- AI Integration - Smart writing assistance and suggestions
- Cloud Sync - Cross-device document synchronization
- Mobile App - Native mobile applications
- Desktop App - Electron-based desktop version
- Advanced Analytics - Writing patterns and productivity insights
Built with ❤️ using modern 2025 development practices and cutting-edge web technologies.