generated from coulomb/repo-seed
tegwick
7759f9e427
Created full-editor-standalone.html that embeds all JavaScript inline. This file can be copied anywhere and opened directly without needing any other files or dependencies (except marked.js from CDN). Perfect for distribution and testing. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
TestDrive-JSUI Examples
This directory contains examples demonstrating TestDrive-JSUI as a standalone JavaScript library.
📁 Examples
standalone.html - Proof of Concept
Purpose: Minimal proof that TestDrive-JSUI can work as a pure JavaScript library.
Features:
- ✅ Runs directly in browser (no server needed)
- ✅ Markdown rendering using marked.js
- ✅ Save/load to browser localStorage
- ✅ Download markdown files
- ✅ Zero dependencies on Python/Ruby/Java
How to Use:
# Option 1: Open directly in browser
open examples/standalone.html
# Option 2: From file system (works!)
# Just double-click the file
# Option 3: Serve with any static server
python3 -m http.server 8000
# Then visit: http://localhost:8000/examples/standalone.html
What It Demonstrates:
- JavaScript can handle all rendering
- No backend is required for core functionality
- Language adapters (Python/Ruby/Java) are truly optional
full-editor.html - Complete Library Demo
Purpose: Demonstrates the full TestDriveJSUI library with all features.
Features:
- ✅ Full Library Integration: Uses complete
TestDriveJSUIclass - ✅ Section-Based Editing: Click sections to edit them independently
- ✅ Interactive Controls: Floating control panel with document operations
- ✅ Event System: Listen to save, content-changed, and other events
- ✅ Multiple Modes: Switch between edit and view modes
- ✅ Auto-save: Optional automatic saving (currently disabled)
- ✅ Keyboard Shortcuts: Ctrl+S to save, Escape to close editor
- ✅ Status Bar: Real-time document statistics
- ✅ Image Editing: Advanced image editing with drag & drop
How to Use:
# Serve with any static server (required for proper module loading)
python3 -m http.server 8000
# Then visit: http://localhost:8000/examples/full-editor.html
What It Demonstrates:
- Complete TestDriveJSUI API usage
- Integration of all components (SectionManager, DOMRenderer, DocumentControls)
- Event-driven architecture
- Mode switching (edit/view)
- Document operations (save, load, download, reset)
- Real-time status updates
API Example from Demo:
// Initialize editor
const editor = new TestDriveJSUI({
container: '#editor-container',
markdown: '# Hello World',
mode: 'edit',
theme: 'github',
autosave: false,
shortcuts: true
});
// Listen to events
editor.on('save', (data) => {
console.log('Saved:', data.markdown);
});
// Get/set content
const markdown = editor.getMarkdown();
editor.setMarkdown('# Updated content');
// Get status
const status = editor.getStatus();
console.log('Sections:', status.totalSections);
🎯 Architecture Validation
These examples validate the JavaScript-first architecture:
✅ Implemented Features
- Markdown parsing (marked.js)
- HTML rendering
- UI display and styling
- Content management
- Save/load (localStorage)
- File download
- Interactive editing UI ✅
- Section-based editing ✅
- Control panels (edit, debug, status) ✅
- Keyboard shortcuts ✅
- Themes ✅
- Event system ✅
🚧 Future Enhancements
- Plugin system
- Additional themes
- Collaborative editing
- Cloud storage adapters
- Mobile-optimized UI
🔧 What Backend Adapters Provide (Optional)
- Asset serving at scale
- Server-side storage
- User authentication
- Multi-user collaboration
- Testing infrastructure
🚀 Getting Started
1. Try the Proof of Concept
# Open standalone.html in any browser
open examples/standalone.html
# Test basic functionality:
# - Markdown rendering
# - Save/load/download buttons
2. Explore the Full Editor
# Serve the examples directory
cd examples
python3 -m http.server 8000
# Open in browser:
# http://localhost:8000/full-editor.html
# Test advanced features:
# - Click sections to edit
# - Use toolbar buttons
# - Try keyboard shortcuts (Ctrl+S, Escape)
# - Switch between edit/view modes
3. Integrate Into Your Project
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="path/to/testdrive-jsui.js"></script>
</head>
<body>
<div id="editor"></div>
<script>
const editor = new TestDriveJSUI({
container: '#editor',
markdown: '# Start writing...',
mode: 'edit'
});
</script>
</body>
</html>
📝 Notes
Performance: Loading from CDN (marked.js) means internet connection required. For fully offline use, download marked.js locally.
Browser Support: Works in all modern browsers (Chrome, Firefox, Safari, Edge). Requires ES6 support.
File Size: The standalone example loads individual JS files. Production version would use bundled testdrive-jsui.min.js (~50KB).
🤝 Contributing Examples
Want to add an example? Please ensure it:
- Works standalone (no complex build required)
- Demonstrates a specific use case
- Includes inline documentation
- Works by just opening in browser
Status: Full Implementation Complete ✅ Last Updated: 2025-12-16 Library Version: 1.0.0