diff --git a/demo_clean_editor.html b/demo_clean_editor.html
new file mode 100644
index 00000000..86a89fb9
--- /dev/null
+++ b/demo_clean_editor.html
@@ -0,0 +1,139 @@
+
+
+
+
+
๐ฏ Clean Section Editor Demo
+
This demonstrates the new TDD-driven, object-oriented section editor architecture.
+
+ - โ
Stable: No content bleeding between sections
+ - โ
Testable: Business logic separated from DOM
+ - โ
Reliable: Proper state management
+ - โ
User-friendly: Clear visual feedback and controls
+
+
Instructions:
+
+ - Click on any section below to start editing
+ - Make changes and notice the yellow background (modified state)
+ - Use the buttons on the right: Accept โ, Cancel โ, Reset ๐
+ - Try clicking between sections - your changes are preserved!
+ - Use the control panel on the left for document-level actions
+
+
Keyboard shortcuts: Ctrl+Enter (Accept), Escape (Cancel), Ctrl+S (Save), Ctrl+R (Reset All)
+
+
+
@@ -1233,86 +1830,11 @@ class DocumentManager:
// Define editor class first (if in edit mode)
{editor_scripts if edit_mode else ''}
- // Enhanced error reporting utility
- function reportEditModeError(errorMsg, technicalDetails, errorType = 'error') {{
- 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');
-
- // Log to console for debugging
- console.error('[MarkiTect Edit Mode Error]', errorMsg, technicalDetails);
-
- // Create error report object
- const errorReport = {{
- timestamp: new Date().toISOString(),
- error: errorMsg,
- details: technicalDetails,
- type: errorType,
- userAgent: navigator.userAgent,
- url: window.location.href,
- markdownContent: typeof markdownContent !== 'undefined' ? markdownContent.length + ' chars' : 'unavailable'
- }};
-
- // Store error for potential reporting
- if (!window.markitectErrors) window.markitectErrors = [];
- window.markitectErrors.push(errorReport);
-
- // Update UI
- if (statusMsg) {{
- const statusText = errorType === 'warning'
- ? 'Edit mode partially available - some features may not work'
- : 'Edit mode unavailable - content displayed in read-only mode';
- statusMsg.textContent = statusText;
- }}
-
- if (errorDiv) errorDiv.style.display = 'block';
- if (errorText) {{
- const fullError = errorMsg + (technicalDetails ? ' (' + technicalDetails + ')' : '');
- errorText.textContent = fullError;
- }}
- if (browserInfo) browserInfo.textContent = navigator.userAgent.split(' ').slice(-2).join(' ');
-
- // Auto-hide warnings after 10 seconds
- if (errorType === 'warning' && errorDiv) {{
- setTimeout(() => {{
- errorDiv.style.display = 'none';
- }}, 10000);
- }}
- }}
-
-
- // Status update utility
- function updateStatus(message, isError = false) {{
- const statusMsg = document.getElementById('status-message');
- const statusIndicator = document.getElementById('status-indicator');
- const statusIcon = document.querySelector('.markitect-status-icon');
-
- if (statusMsg) {{
- statusMsg.textContent = message;
- }}
-
- if (statusIndicator) {{
- // Remove all status classes
- statusIndicator.classList.remove('loading', 'error');
-
- if (isError) {{
- statusIndicator.classList.add('error');
- if (statusIcon) statusIcon.textContent = 'โ';
- }} else if (message.includes('Loading') || message.includes('Initializing')) {{
- statusIndicator.classList.add('loading');
- if (statusIcon) statusIcon.textContent = 'โณ';
- }} else {{
- // Success state
- if (statusIcon) statusIcon.textContent = 'โ
';
- }}
- }}
- }}
+ {utility_functions}
// Always render content first (graceful degradation)
document.addEventListener('DOMContentLoaded', function() {{
- updateStatus('Rendering content...');
+ {'console.log("Rendering content...");' if edit_type == 'clean' else 'updateStatus("Rendering content...");'}
const contentDiv = document.getElementById('markdown-content');
@@ -1321,12 +1843,12 @@ class DocumentManager:
if (typeof marked !== 'undefined') {{
try {{
contentDiv.innerHTML = marked.parse(markdownContent);
- updateStatus('Content rendered successfully โ');
+ {'console.log("โ Content rendered successfully");' if edit_type == 'clean' else 'updateStatus("Content rendered successfully โ");'}
console.log('โ Markdown rendered successfully');
}} catch (error) {{
contentDiv.innerHTML = '
Error rendering markdown: ' + error.message + '
';
- updateStatus('Content rendered with errors', true);
- {'reportEditModeError("Markdown parsing failed", error.message);' if edit_mode else ''}
+ {'console.error("Content rendered with errors");' if edit_type == 'clean' else 'updateStatus("Content rendered with errors", true);'}
+ {'console.error("Markdown parsing failed:", error.message);' if edit_type == 'clean' else 'reportEditModeError("Markdown parsing failed", error.message);' if edit_mode else ''}
}}
}} else {{
// Fallback: display raw markdown with basic formatting
@@ -1340,31 +1862,26 @@ class DocumentManager:
.replace(/\\n\\n/g, '
')
.replace(/\\n/g, '
');
contentDiv.innerHTML = '
' + fallbackHtml + '
';
- updateStatus('Content rendered with fallback parser', true);
- {'reportEditModeError("CDN library failed to load", "Using basic fallback rendering");' if edit_mode else ''}
+ {'console.warn("Content rendered with fallback parser");' if edit_type == 'clean' else 'updateStatus("Content rendered with fallback parser", true);'}
+ {'console.warn("CDN library failed to load - using basic fallback rendering");' if edit_type == 'clean' else '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 ''}
+ {f'''if (typeof MARKITECT_EDIT_MODE !== 'undefined' && MARKITECT_EDIT_MODE) {{
+ {'console.log("Initializing clean edit capabilities...");' if edit_type == 'clean' else 'updateStatus("Initializing legacy edit capabilities...");'}
+ try {{
+ {'console.log("Creating clean editor instance..."); initializeCleanEditor(); console.log("โ Clean edit mode active - click any section to edit");' if edit_type == 'clean' else 'updateStatus("Creating legacy editor instance..."); markitectEditor = new MarkitectEditor(); markitectEditor.initializeEditor(); updateStatus("โ Legacy edit mode active - click any section to edit"); console.log("โ Legacy edit mode initialized successfully");'}
+ }} catch (error) {{
+ {'console.error("Clean edit mode failed to initialize:", error);' if edit_type == 'clean' else 'updateStatus("Legacy edit mode failed to initialize", true); console.error("Legacy editor error:", error);'}
+ }}
+ }}''' if edit_mode else ''}
}});
// 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 ''}
+ {'console.error("CDN library failed to load - network or firewall blocking marked.js");' if edit_type == 'clean' else 'reportEditModeError("CDN library failed to load", "Network or firewall blocking marked.js");' if edit_mode else ''}
}}
}});
@@ -1375,7 +1892,7 @@ class DocumentManager:
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
+ }, 5000); // 5 second timeout''' if edit_mode and edit_type == 'legacy' else ''}