tegwick
7dd39ddfca
Some checks failed
Test Suite / unit-tests (3.11) (push) Has been cancelled
Test Suite / unit-tests (3.12) (push) Has been cancelled
Test Suite / code-quality (push) Has been cancelled
Test Suite / security-scan (push) Has been cancelled
Test Suite / integration-tests (push) Has been cancelled
Test Suite / e2e-tests (push) Has been cancelled
Test Suite / performance-tests (push) Has been cancelled
Test Suite / test-summary (push) Has been cancelled
- Updated asset_registry.json with latest asset information - Added test_status.html for test execution reporting 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
303 lines
12 KiB
HTML
303 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Status 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: #333;
|
|
}
|
|
#markdown-content {
|
|
min-height: 200px;
|
|
}
|
|
pre {
|
|
background: #f6f8fa;
|
|
padding: 1rem;
|
|
border-radius: 6px;
|
|
overflow-x: auto;
|
|
}
|
|
code {
|
|
background: #f6f8fa;
|
|
padding: 0.2em 0.4em;
|
|
border-radius: 3px;
|
|
font-size: 0.9em;
|
|
}
|
|
pre code {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
blockquote {
|
|
border-left: 4px solid #dfe2e5;
|
|
margin: 0;
|
|
padding-left: 1rem;
|
|
color: #6a737d;
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
<style>
|
|
.markitect-floating-header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-bottom: 1px solid #ddd;
|
|
padding: 10px;
|
|
z-index: 1000;
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
.markitect-section-editable {
|
|
border: 1px dashed transparent;
|
|
padding: 8px;
|
|
margin: 4px 0;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.markitect-section-editable:hover {
|
|
border-color: #007acc;
|
|
background: rgba(0, 122, 204, 0.05);
|
|
}
|
|
.edit-mode textarea {
|
|
width: 100%;
|
|
min-height: 100px;
|
|
font-family: monospace;
|
|
border: 2px solid #007acc;
|
|
border-radius: 4px;
|
|
padding: 8px;
|
|
}
|
|
</style>
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"
|
|
onload="window.markitectMarkedLoaded = true"
|
|
onerror="window.markitectMarkedError = true"></script>
|
|
</head>
|
|
<body class="markitect-edit-mode">
|
|
|
|
<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>
|
|
<div id="markdown-content"></div>
|
|
|
|
<script>
|
|
const markdownContent = "# Status Test\n\nThis tests the **enhanced status reporting**.\n\n- You should see step-by-step status updates\n- If edit mode fails, you'll know exactly where\n- Content is always visible";
|
|
|
|
const MARKITECT_EDIT_MODE = true;
|
|
const MARKITECT_EDITOR_CONFIG = {
|
|
theme: 'github',
|
|
keyboardShortcuts: true,
|
|
autosave: true,
|
|
sections: true
|
|
};
|
|
|
|
// 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';
|
|
}
|
|
}
|
|
|
|
// 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);
|
|
}
|
|
} 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");
|
|
}
|
|
}
|
|
|
|
// 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("Loading editor class...");
|
|
|
|
class MarkitectEditor {
|
|
constructor() {
|
|
this.initializeEditor();
|
|
this.setupKeyboardShortcuts();
|
|
}
|
|
|
|
initializeEditor() {
|
|
const header = document.createElement('div');
|
|
header.className = 'markitect-floating-header';
|
|
header.innerHTML = `
|
|
<button onclick="markitectEditor.save()">Save</button>
|
|
<button onclick="markitectEditor.togglePreview()">Toggle Preview</button>
|
|
<span id="save-status">Ready</span>
|
|
`;
|
|
document.body.insertBefore(header, document.body.firstChild);
|
|
|
|
this.makeContentEditable();
|
|
}
|
|
|
|
makeContentEditable() {
|
|
const content = document.getElementById('markdown-content');
|
|
if (content) {
|
|
content.addEventListener('click', this.handleSectionClick.bind(this));
|
|
this.markSections(content);
|
|
}
|
|
}
|
|
|
|
markSections(element) {
|
|
const sections = element.querySelectorAll('h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol');
|
|
sections.forEach((section, index) => {
|
|
section.classList.add('markitect-section-editable');
|
|
section.setAttribute('data-section', index);
|
|
});
|
|
}
|
|
|
|
handleSectionClick(event) {
|
|
const section = event.target.closest('.markitect-section-editable');
|
|
if (section && !section.querySelector('textarea')) {
|
|
this.editSection(section);
|
|
}
|
|
}
|
|
|
|
editSection(section) {
|
|
const originalContent = section.innerHTML;
|
|
const textarea = document.createElement('textarea');
|
|
textarea.value = this.htmlToMarkdown(originalContent);
|
|
textarea.className = 'edit-mode';
|
|
|
|
textarea.addEventListener('blur', () => {
|
|
section.innerHTML = marked.parse(textarea.value);
|
|
this.markSections(section.parentElement);
|
|
});
|
|
|
|
section.innerHTML = '';
|
|
section.appendChild(textarea);
|
|
textarea.focus();
|
|
}
|
|
|
|
htmlToMarkdown(html) {
|
|
// Simple HTML to Markdown conversion
|
|
return html.replace(/<[^>]*>/g, '').trim();
|
|
}
|
|
|
|
setupKeyboardShortcuts() {
|
|
if (MARKITECT_EDITOR_CONFIG.keyboardShortcuts) {
|
|
document.addEventListener('keydown', (event) => {
|
|
if (event.ctrlKey || event.metaKey) {
|
|
switch(event.key) {
|
|
case 's':
|
|
event.preventDefault();
|
|
this.save();
|
|
break;
|
|
case 'e':
|
|
event.preventDefault();
|
|
this.togglePreview();
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
save() {
|
|
document.getElementById('save-status').textContent = 'Saved!';
|
|
setTimeout(() => {
|
|
document.getElementById('save-status').textContent = 'Ready';
|
|
}, 2000);
|
|
}
|
|
|
|
togglePreview() {
|
|
console.log('Toggle preview mode');
|
|
}
|
|
}
|
|
|
|
let markitectEditor;
|
|
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);
|
|
}}
|
|
}}
|
|
});
|
|
|
|
// Handle CDN loading errors
|
|
window.addEventListener('load', function() {
|
|
if (window.markitectMarkedError) {
|
|
reportEditModeError("CDN library failed to load", "Network or firewall blocking marked.js");
|
|
}
|
|
});
|
|
|
|
// 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); // 5 second timeout
|
|
</script>
|
|
</body>
|
|
</html> |