generated from coulomb/repo-seed
tegwick
1aea8b0d7d
Phase 6 Complete: - ✅ Created test/umd-test.html (UMD bundle verification) - ✅ Created test/minified-test.html (production build test) - ✅ Created test/esm-test.html (ES Module format test) Each test file demonstrates: - Bundle loading and initialization - marked.js peer dependency integration - Control panels and event system - Complete feature showcase - Usage examples and code snippets Tests verify all build outputs work correctly in browsers. Open any test/*.html file in a browser to verify functionality.
145 lines
4.2 KiB
HTML
145 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TestDrive-JSUI - UMD Bundle Test</title>
|
|
<link rel="stylesheet" href="../dist/testdrive-jsui.css">
|
|
<style>
|
|
body {
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 40px auto;
|
|
padding: 20px;
|
|
background: #f5f5f5;
|
|
}
|
|
#editor {
|
|
background: white;
|
|
min-height: 400px;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
}
|
|
h1 { color: #333; }
|
|
.status {
|
|
background: #e3f2fd;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.info {
|
|
background: #fff3cd;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
margin-bottom: 20px;
|
|
border-left: 4px solid #ffc107;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🚀 TestDrive-JSUI UMD Bundle Test</h1>
|
|
|
|
<div class="info">
|
|
<strong>📍 Testing:</strong> UMD build from <code>dist/testdrive-jsui.js</code><br>
|
|
<strong>💾 File Size:</strong> ~217KB (unminified)<br>
|
|
<strong>🎯 Purpose:</strong> Verify bundle works in browser with UMD format
|
|
</div>
|
|
|
|
<div class="status">
|
|
<strong>Status:</strong> <span id="status">Loading...</span>
|
|
</div>
|
|
|
|
<div id="editor"></div>
|
|
|
|
<!-- Peer dependency: marked.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/marked@11/marked.min.js"></script>
|
|
|
|
<!-- TestDrive-JSUI UMD build -->
|
|
<script src="../dist/testdrive-jsui.js"></script>
|
|
|
|
<script>
|
|
document.getElementById('status').textContent = 'Initializing...';
|
|
|
|
try {
|
|
console.log('TestDriveJSUI available:', typeof TestDriveJSUI);
|
|
console.log('marked available:', typeof marked);
|
|
|
|
const editor = new TestDriveJSUI({
|
|
container: '#editor',
|
|
markdown: `# UMD Bundle Test ✅
|
|
|
|
## Success! 🎉
|
|
|
|
This page is using the **UMD distribution** build of TestDrive-JSUI.
|
|
|
|
### What's being tested:
|
|
- ✅ UMD bundle loading (\`dist/testdrive-jsui.js\`)
|
|
- ✅ CSS bundle loading (\`dist/testdrive-jsui.css\`)
|
|
- ✅ Peer dependency (marked.js from CDN)
|
|
- ✅ All components initialized correctly
|
|
- ✅ Event system working
|
|
- ✅ Control panels visible
|
|
|
|
### File Information
|
|
- **Bundle Size**: 217KB (unminified)
|
|
- **Format**: UMD (Universal Module Definition)
|
|
- **Supports**: Browser globals, AMD, CommonJS
|
|
|
|
### Try These Features:
|
|
1. Click any section to edit it
|
|
2. Press **Ctrl+Enter** to apply changes
|
|
3. Press **Escape** to cancel editing
|
|
4. Use the control panels positioned around the edges
|
|
|
|
## Code Example
|
|
|
|
\`\`\`javascript
|
|
const editor = new TestDriveJSUI({
|
|
container: '#editor',
|
|
markdown: '# Hello World',
|
|
mode: 'edit',
|
|
autosave: true
|
|
});
|
|
|
|
editor.on('save', (data) => {
|
|
console.log('Saved:', data.markdown);
|
|
});
|
|
\`\`\`
|
|
|
|
---
|
|
|
|
**Built with ❤️ by the MarkiTect Team**`,
|
|
mode: 'edit',
|
|
theme: 'github',
|
|
controls: {
|
|
editControl: true,
|
|
statusControl: true,
|
|
contentsControl: true,
|
|
debugControl: false
|
|
}
|
|
});
|
|
|
|
editor.on('initialized', (data) => {
|
|
document.getElementById('status').innerHTML = '✅ Successfully initialized!';
|
|
console.log('✅ Editor initialized:', data);
|
|
console.log('📊 Status:', editor.getStatus());
|
|
});
|
|
|
|
editor.on('save', (data) => {
|
|
console.log('💾 Save event:', data);
|
|
alert('Save triggered! Content:\n\n' + data.markdown.substring(0, 100) + '...');
|
|
});
|
|
|
|
editor.on('content-changed', (data) => {
|
|
console.log('📝 Content changed');
|
|
});
|
|
|
|
} catch (error) {
|
|
document.getElementById('status').innerHTML = '❌ Error: ' + error.message;
|
|
console.error('❌ Initialization error:', error);
|
|
console.error('Stack:', error.stack);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|