Files
markitect-main/capabilities/testdrive-jsui/test.html
tegwick ab3f0db86f feat: consolidate testdrive-jsui to capabilities and implement plugin self-declaration
## Major Changes
- Moved all testdrive-jsui assets from root to capabilities/testdrive-jsui/
- Consolidated directory structure: js/, static/css/, static/images/, static/templates/
- Implemented plugin self-declaration (get_plugin_source_dir, get_asset_paths)
- Removed hardcoded plugin discovery from rendering.py
- Updated all asset paths to be relative to capability root

## Architecture Improvements
- Single source of truth for all testdrive-jsui assets
- Plugin declares its own location (no hardcoded paths)
- Generic plugin discovery using hasattr check
- Clean separation: all JS in .js files, no code mixing
- Standalone capability ready for independent use

## Files Changed
- markitect/plugins/testdrive_jsui.py: Added self-declaration methods
- markitect/plugins/rendering.py: Removed hardcoded discovery
- capabilities/testdrive-jsui/README.md: Added standalone usage documentation
- Moved 17 asset files to consolidated structure
- Deleted obsolete /testdrive-jsui/ root directory

## Testing
- All 17 assets verified and working
- Tested via CLI: markitect md-render --engine testdrive-jsui
- Full document rendering successful

Prepares testdrive-jsui to become a git submodule with proper dependency management.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-15 23:42:54 +01:00

149 lines
6.7 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 - Standalone Test</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 2rem;
line-height: 1.6;
color: #333333;
background-color: #ffffff;
}
#markdown-content {
min-height: 200px;
}
h1, h2, h3, h4, h5, h6 {
color: #333333;
}
pre {
background-color: #f6f8fa;
color: #333333;
padding: 1rem;
border-radius: 6px;
overflow-x: auto;
border: 1px solid #d0d7de;
}
code {
background-color: #f6f8fa;
color: #333333;
padding: 0.2em 0.4em;
border-radius: 3px;
font-size: 0.9em;
}
pre code {
background: none;
padding: 0;
}
.test-banner {
background: #e3f2fd;
border: 1px solid #1976d2;
border-radius: 4px;
padding: 1rem;
margin-bottom: 2rem;
text-align: center;
}
</style>
<!-- External dependencies -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"
onload="window.markitectMarkedLoaded = true"
onerror="console.error('CDN library failed to load'); window.markitectMarkedError = true;"></script>
</head>
<body class="markitect-edit-mode">
<div class="test-banner">
<h2>🧪 TestDrive JSUI - Standalone Test Environment</h2>
<p>This is a standalone test page for developing JavaScript UI components.</p>
<p><strong>Development Mode:</strong> Assets loaded directly from static/ directory</p>
</div>
<!-- Content container with test content -->
<div id="markdown-content">
<h1>TestDrive JSUI Sample Document</h1>
<p>This is a sample markdown document for testing the TestDrive JavaScript UI plugin.</p>
<h2>Features to Test</h2>
<h3>Basic Editing</h3>
<ul>
<li>Click any section to edit it</li>
<li>Use the save button to download your changes</li>
<li>Reset button restores original content</li>
</ul>
<h3>Control Panels</h3>
<ul>
<li><strong>Contents Control</strong> (Northwest): Document outline and navigation</li>
<li><strong>Status Control</strong> (East): Current document statistics</li>
<li><strong>Debug Control</strong> (Southeast): Development information and logs</li>
<li><strong>Edit Control</strong> (Northeast): Main editing actions</li>
</ul>
</div>
<!-- Configuration for JavaScript -->
<script id="markitect-config" type="application/json">
{
"pluginName": "testdrive-jsui",
"assetBaseUrl": ".",
"developmentMode": true,
"markdownContent": "# TestDrive JSUI Sample Document\n\nThis is a sample markdown document for testing the TestDrive JavaScript UI plugin.\n\n## Features to Test\n\n### Basic Editing\n- Click any section to edit it\n- Use the save button to download your changes\n- Reset button restores original content\n\n### Control Panels\n- **Contents Control** (Northwest): Document outline and navigation\n- **Status Control** (East): Current document statistics\n- **Debug Control** (Southeast): Development information and logs\n- **Edit Control** (Northeast): Main editing actions",
"markdownContentWithDogtag": "# TestDrive JSUI Sample Document\n\nThis is a sample markdown document for testing the TestDrive JavaScript UI plugin.\n\n## Features to Test\n\n### Basic Editing\n- Click any section to edit it\n- Use the save button to download your changes\n- Reset button restores original content\n\n### Control Panels\n- **Contents Control** (Northwest): Document outline and navigation\n- **Status Control** (East): Current document statistics\n- **Debug Control** (Southeast): Development information and logs\n- **Edit Control** (Northeast): Main editing actions\n\n---\n*TestDrive JSUI Standalone Test*",
"dogtagContent": "\n\n---\n*TestDrive JSUI Standalone Test*",
"mode": "edit",
"theme": "github",
"keyboardShortcuts": true,
"autosave": false,
"sections": true,
"originalFilename": "test-document",
"base64References": {},
"version": "TestDrive JSUI v1.0.0",
"repoName": "testdrive-jsui"
}
</script>
<!-- JavaScript Assets - Development Mode (direct file references) -->
<script src="static/js/core/debug-system.js"></script>
<script src="static/js/core/section-manager.js"></script>
<script src="static/js/components/debug-panel.js"></script>
<script src="static/js/components/document-controls.js"></script>
<script src="static/js/components/dom-renderer.js"></script>
<script src="../capabilities/testdrive-jsui/js/controls/control-base.js"></script>
<script src="../capabilities/testdrive-jsui/js/controls/contents-control.js"></script>
<script src="../capabilities/testdrive-jsui/js/controls/status-control.js"></script>
<script src="../capabilities/testdrive-jsui/js/controls/debug-control.js"></script>
<script src="../capabilities/testdrive-jsui/js/controls/edit-control.js"></script>
<script src="static/js/config-loader.js"></script>
<script src="static/js/main-updated.js"></script>
<!-- Initialization -->
<script>
window.addEventListener('load', function() {
console.log('🧪 TestDrive JSUI standalone test loading...');
// Handle CDN loading errors
if (window.markitectMarkedError) {
console.error("CDN library failed to load");
}
// Initialize main application
try {
if (typeof MarkitectMain !== 'undefined') {
console.log('🚀 Starting MarkitectMain initialization...');
MarkitectMain.initialize();
} else {
console.warn('⚠️ MarkitectMain not available');
// Show helpful debug information
console.log('Available globals:', Object.keys(window).filter(k => k.includes('Markitect') || k.includes('Section') || k.includes('Control')));
}
} catch (error) {
console.error('❌ TestDrive JSUI initialization failed:', error);
console.log('📄 Content should still be visible in fallback mode');
}
});
</script>
</body>
</html>