coulomb/markitect-main
2
0
Fork 0
Code Issues 61 Pull Requests Actions Projects 12 Releases 1 Wiki Activity

feat: implement clean JavaScript-Python separation for edit mode

Browse Source 
- Created JSON configuration interface eliminating JavaScript-Python code mixing
- Added external script references following non-edit mode patterns
- Implemented edit-mode-fixed.html template with proper fallback content
- Added config-loader.js for clean data transfer via JSON
- Updated main-updated.js with simplified initialization (no infinite retry loops)
- Added comprehensive test suite for JavaScript syntax validation
- Achieved full GUARDRAILS.md compliance with clean separation of concerns

Fixes infinite retry loops and JavaScript syntax errors caused by
template literal escaping issues in Python f-strings.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Bernd Worsch
2025-11-14 06:41:53 +01:00
parent 26c235e296
commit 55c61a7f2d
6 changed files with 1383 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
markitect/templates/edit-mode-fixed.html Normal file
View File

@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Markitect {version}">
<title>{title}</title>
{css_content}
<!-- External dependencies - same as non-edit mode -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"
onload="window.markitectMarkedLoaded = true"
onerror="console.error('CDN library failed to load - network or firewall blocking marked.js'); window.markitectMarkedError = true;"></script>
</head>
<body class="{mode_class}">
<!-- Content container with fallback content -->
<div id="markdown-content">
{fallback_content}
</div>
<!-- Configuration Data Interface - ONLY place where Python data enters JavaScript -->
<script id="markitect-config" type="application/json">{config_json}</script>
<!-- External JavaScript References - same pattern as non-edit mode -->
<script src="markitect/static/js/core/debug-system.js"></script>
<script src="markitect/static/js/core/section-manager.js"></script>
<script src="markitect/static/js/components/debug-panel.js"></script>
<script src="markitect/static/js/components/document-controls.js"></script>
<script src="markitect/static/js/components/dom-renderer.js"></script>
<script src="markitect/static/js/controls/control-base.js"></script>
<script src="markitect/static/js/controls/contents-control.js"></script>
<script src="markitect/static/js/controls/status-control.js"></script>
<script src="markitect/static/js/controls/debug-control.js"></script>
<script src="markitect/static/js/controls/edit-control.js"></script>
<script src="markitect/static/js/config-loader.js"></script>
<script src="markitect/static/js/main-updated.js"></script>
<!-- Simple initialization - same pattern as non-edit mode -->
<script>
window.addEventListener('load', function() {
console.log('🎯 Edit mode loading complete, initializing...');
// Handle CDN loading errors (same as non-edit mode)
if (window.markitectMarkedError) {
console.error("CDN library failed to load - network or firewall blocking marked.js");
}
// Simple initialization without retries
try {
if (typeof MarkitectMain !== 'undefined') {
console.log('🚀 Starting MarkitectMain initialization...');
MarkitectMain.initialize();
} else {
console.warn('⚠️ MarkitectMain not available, edit functionality may be limited');
}
} catch (error) {
console.error('❌ Edit mode initialization failed:', error);
console.log('📄 Content should still be visible in fallback mode');
}
});
</script>
</body>
</html>