📝 TestDrive-JSUI Full Editor

Complete interactive markdown editor demonstrating the full TestDrive-JSUI library. Click any section to edit, use the toolbar for document operations.

✨ Full Library Integration: This demo uses the complete TestDriveJSUI class with all components (SectionManager, DOMRenderer, DocumentControls) working together.
Mode: edit
Sections: 0
Words: 0
Characters: 0

TestDrive-JSUI â€ĸ JavaScript-First Architecture â€ĸ Full Featured Editor

Uses: marked.js (markdown) + TestDriveJSUI library

\`\`\` ## API Reference ### Constructor Options - \`container\` (required): CSS selector or DOM element - \`markdown\` (optional): Initial markdown content - \`mode\` (optional): 'edit' or 'view' (default: 'edit') - \`theme\` (optional): Theme name (default: 'github') - \`autosave\` (optional): Enable auto-save (default: false) - \`shortcuts\` (optional): Enable keyboard shortcuts (default: true) - \`sections\` (optional): Enable section-based editing (default: true) - \`debug\` (optional): Enable debug mode (default: false) ### Methods - \`getMarkdown()\`: Get current document content - \`setMarkdown(markdown)\`: Set document content - \`getStatus()\`: Get editor status (sections, words, etc.) - \`save()\`: Trigger save event - \`download(filename)\`: Download as markdown file - \`resetAll()\`: Reset all sections to original content - \`destroy()\`: Clean up and destroy editor ### Events - \`initialized\`: Editor finished initializing - \`save\`: Document save triggered - \`content-changed\`: Content was modified - \`autosave\`: Auto-save occurred - \`download\`: Document downloaded - \`reset\`: Document reset - \`destroyed\`: Editor destroyed ## Benefits ### For Users - **Intuitive**: Click to edit, visual feedback - **Fast**: No page reloads, instant updates - **Reliable**: Undo/reset functionality - **Flexible**: Works in any browser, no installation ### For Developers - **Easy Integration**: Simple API, minimal setup - **Customizable**: Event system for custom behavior - **Extensible**: Plugin architecture (coming soon) - **Language Agnostic**: Use with any backend --- **Ready to build?** Check out the [documentation](../README.md) or browse the [source code](../js/) to learn more! `; // Global editor instance let editor; // Initialize editor on page load window.addEventListener('DOMContentLoaded', function() { // Create editor instance editor = new TestDriveJSUI({ container: '#editor-container', markdown: defaultMarkdown, mode: 'edit', theme: 'github', autosave: false, shortcuts: true, sections: true, debug: false }); // Set up event listeners editor.on('initialized', (data) => { console.log('✅ Editor initialized:', data); updateStatusBar(); }); editor.on('save', (data) => { console.log('💾 Document saved:', data.markdown.length, 'characters'); updateStatusBar(); }); editor.on('content-changed', (data) => { console.log('📝 Content changed'); updateStatusBar(); }); editor.on('reset', () => { console.log('🔄 Document reset'); updateStatusBar(); }); // Update status bar initially updateStatusBar(); // Update status bar periodically setInterval(updateStatusBar, 2000); console.log('✅ TestDrive-JSUI Full Editor initialized!'); console.log('📝 Global editor instance available as window.editor'); }); // Toolbar functions function saveDocument() { editor.save(); alert('✅ Document saved to browser localStorage!'); } function loadDocument() { const loaded = editor.loadFromLocalStorage(); if (loaded) { alert('📂 Document loaded from localStorage!'); } else { alert('ℹī¸ No saved document found.'); } } function downloadDocument() { const filename = prompt('Enter filename:', 'document.md'); if (filename) { editor.download(filename); } } function showStatus() { const status = editor.getStatus(); const message = [ `📊 Document Status`, ``, `Mode: ${status.mode}`, `Total Sections: ${status.totalSections || 0}`, `Currently Editing: ${status.editingSections || 0}`, `Modified Sections: ${status.modifiedSections || 0}`, `Word Count: ${status.wordCount}`, `Character Count: ${status.characterCount}` ].join('\n'); alert(message); } function resetDocument() { if (confirm('Reset all sections to original content?\n\nThis cannot be undone.')) { editor.resetAll(); alert('🔄 Document reset to original content!'); } } function switchToViewMode() { const markdown = editor.getMarkdown(); editor.destroy(); editor = new TestDriveJSUI({ container: '#editor-container', markdown: markdown, mode: 'view', theme: 'github' }); updateStatusBar(); alert('👁ī¸ Switched to view mode. Click "Edit Mode" to return.'); } function switchToEditMode() { const markdown = editor.getMarkdown(); editor.destroy(); editor = new TestDriveJSUI({ container: '#editor-container', markdown: markdown, mode: 'edit', theme: 'github', autosave: false, shortcuts: true }); updateStatusBar(); alert('✏ī¸ Switched to edit mode. Click sections to edit them.'); } function updateStatusBar() { const status = editor.getStatus(); document.getElementById('status-mode').textContent = status.mode; document.getElementById('status-sections').textContent = status.totalSections || 0; document.getElementById('status-words').textContent = status.wordCount || 0; document.getElementById('status-chars').textContent = status.characterCount || 0; } // Expose editor for debugging window.editor = editor;