Compare commits
4 Commits
567f01121e
...
36e113903d
| Author | SHA1 | Date | |
|---|---|---|---|
| 36e113903d | |||
| a350b96dd2 | |||
| 0d60dc73bd | |||
| be8bbbb537 |
@@ -533,6 +533,27 @@ class DocumentManager:
|
||||
|
||||
let markitectEditor;"""
|
||||
|
||||
# Edit mode status and error reporting section
|
||||
edit_mode_html = ""
|
||||
if edit_mode:
|
||||
edit_mode_html = f"""
|
||||
<div id="markitect-status" style="background: #e3f2fd; border-left: 4px solid #2196f3; padding: 12px; margin-bottom: 20px; font-family: monospace; font-size: 14px;">
|
||||
<div style="font-weight: bold; color: #1976d2;">📝 Markitect Edit Mode</div>
|
||||
<div id="status-message" style="margin-top: 8px;">Loading edit capabilities...</div>
|
||||
<div id="error-details" style="display: none; background: #ffebee; border: 1px solid #f44336; padding: 8px; margin-top: 8px; border-radius: 4px;">
|
||||
<div style="font-weight: bold; color: #c62828;">❌ Edit Mode Failed</div>
|
||||
<div id="error-text" style="margin-top: 4px; color: #666;"></div>
|
||||
<details style="margin-top: 8px;">
|
||||
<summary style="cursor: pointer; color: #1976d2;">🐛 Help us fix this issue</summary>
|
||||
<div style="margin-top: 8px; font-size: 12px; color: #666;">
|
||||
Please report this error with your browser info:
|
||||
<br>📋 Browser: <span id="browser-info"></span>
|
||||
<br>🔗 Create issue: <a href="https://github.com/anthropics/markitect/issues/new" target="_blank" style="color: #1976d2;">GitHub Issues</a>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>"""
|
||||
|
||||
html_template = f"""<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
@@ -542,30 +563,110 @@ class DocumentManager:
|
||||
{css_content}
|
||||
{default_css}
|
||||
{editor_css}
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"
|
||||
onload="window.markitectMarkedLoaded = true"
|
||||
onerror="window.markitectMarkedError = true"></script>
|
||||
</head>
|
||||
<body{body_classes}>
|
||||
{edit_mode_html}
|
||||
<div id="markdown-content"></div>
|
||||
|
||||
<script>
|
||||
const markdownContent = {js_markdown_content};
|
||||
{editor_config}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {{
|
||||
const contentDiv = document.getElementById('markdown-content');
|
||||
if (contentDiv && typeof marked !== 'undefined') {{
|
||||
contentDiv.innerHTML = marked.parse(markdownContent);
|
||||
}} else {{
|
||||
console.error('Failed to render markdown: marked library not loaded');
|
||||
contentDiv.innerHTML = '<p>Error: Markdown parser not available</p>';
|
||||
// Define editor class first (if in edit mode)
|
||||
{editor_scripts if edit_mode else ''}
|
||||
|
||||
// Error reporting utility
|
||||
function reportEditModeError(errorMsg, technicalDetails) {{
|
||||
const statusDiv = document.getElementById('markitect-status');
|
||||
const errorDiv = document.getElementById('error-details');
|
||||
const errorText = document.getElementById('error-text');
|
||||
const statusMsg = document.getElementById('status-message');
|
||||
const browserInfo = document.getElementById('browser-info');
|
||||
|
||||
if (statusMsg) statusMsg.textContent = 'Edit mode unavailable - content displayed in read-only mode';
|
||||
if (errorDiv) errorDiv.style.display = 'block';
|
||||
if (errorText) errorText.textContent = errorMsg + (technicalDetails ? ' (' + technicalDetails + ')' : '');
|
||||
if (browserInfo) browserInfo.textContent = navigator.userAgent.split(' ').slice(-2).join(' ');
|
||||
}}
|
||||
|
||||
// Status update utility
|
||||
function updateStatus(message, isError = false) {{
|
||||
const statusMsg = document.getElementById('status-message');
|
||||
if (statusMsg) {{
|
||||
statusMsg.textContent = message;
|
||||
statusMsg.style.color = isError ? '#c62828' : '#1976d2';
|
||||
}}
|
||||
{'// Initialize editor if in edit mode' if edit_mode else ''}
|
||||
{'if (typeof MARKITECT_EDIT_MODE !== \'undefined\' && MARKITECT_EDIT_MODE) {' if edit_mode else ''}
|
||||
{'markitectEditor = new MarkitectEditor();' if edit_mode else ''}
|
||||
{'}}' if edit_mode else ''}
|
||||
}}
|
||||
|
||||
// Always render content first (graceful degradation)
|
||||
document.addEventListener('DOMContentLoaded', function() {{
|
||||
updateStatus('Rendering content...');
|
||||
|
||||
const contentDiv = document.getElementById('markdown-content');
|
||||
|
||||
// Step 1: Ensure content is always displayed
|
||||
if (contentDiv) {{
|
||||
if (typeof marked !== 'undefined') {{
|
||||
try {{
|
||||
contentDiv.innerHTML = marked.parse(markdownContent);
|
||||
updateStatus('Content rendered successfully ✓');
|
||||
console.log('✓ Markdown rendered successfully');
|
||||
}} catch (error) {{
|
||||
contentDiv.innerHTML = '<p>Error rendering markdown: ' + error.message + '</p>';
|
||||
updateStatus('Content rendered with errors', true);
|
||||
{'reportEditModeError("Markdown parsing failed", error.message);' if edit_mode else ''}
|
||||
}}
|
||||
}} else {{
|
||||
// Fallback: display raw markdown with basic formatting
|
||||
const fallbackHtml = markdownContent
|
||||
.replace(/^# (.*$)/gim, '<h1>$1</h1>')
|
||||
.replace(/^## (.*$)/gim, '<h2>$1</h2>')
|
||||
.replace(/^### (.*$)/gim, '<h3>$1</h3>')
|
||||
.replace(/\\*\\*(.*?)\\*\\*/g, '<strong>$1</strong>')
|
||||
.replace(/\\*(.*?)\\*/g, '<em>$1</em>')
|
||||
.replace(/^- (.*$)/gim, '<li>$1</li>')
|
||||
.replace(/\\n\\n/g, '<br><br>')
|
||||
.replace(/\\n/g, '<br>');
|
||||
contentDiv.innerHTML = '<div style="white-space: pre-wrap;">' + fallbackHtml + '</div>';
|
||||
updateStatus('Content rendered with fallback parser', true);
|
||||
{'reportEditModeError("CDN library failed to load", "Using basic fallback rendering");' if edit_mode else ''}
|
||||
}}
|
||||
}}
|
||||
|
||||
// Step 2: Try to enhance with edit capabilities (if in edit mode)
|
||||
{'''if (typeof MARKITECT_EDIT_MODE !== 'undefined' && MARKITECT_EDIT_MODE) {
|
||||
updateStatus("Initializing edit capabilities...");
|
||||
try {
|
||||
updateStatus("Creating editor instance...");
|
||||
markitectEditor = new MarkitectEditor();
|
||||
updateStatus("✓ Edit mode active - click any section to edit");
|
||||
console.log("✓ Edit mode initialized successfully");
|
||||
} catch (error) {
|
||||
updateStatus("Edit mode failed to initialize", true);
|
||||
reportEditModeError("Edit mode initialization failed", error.message);
|
||||
console.error("Edit mode error:", error);
|
||||
}
|
||||
}''' if edit_mode else ''}
|
||||
}});
|
||||
|
||||
{editor_scripts}
|
||||
// Handle CDN loading errors
|
||||
window.addEventListener('load', function() {{
|
||||
if (window.markitectMarkedError) {{
|
||||
{'reportEditModeError("CDN library failed to load", "Network or firewall blocking marked.js");' if edit_mode else ''}
|
||||
}}
|
||||
}});
|
||||
|
||||
// Safety timeout for edit mode initialization
|
||||
{'''setTimeout(function() {
|
||||
const statusMsg = document.getElementById("status-message");
|
||||
if (statusMsg && (statusMsg.textContent.includes("Loading") || statusMsg.textContent.includes("Initializing"))) {
|
||||
updateStatus("Edit mode initialization timeout", true);
|
||||
reportEditModeError("Edit mode took too long to initialize", "Possible JavaScript performance issue");
|
||||
}
|
||||
}, 5000);''' if edit_mode else ''} // 5 second timeout
|
||||
</script>
|
||||
</body>
|
||||
</html>"""
|
||||
|
||||
Reference in New Issue
Block a user