fix: resolve JavaScript syntax errors preventing edit mode initialization in Issue #154

- Fixed fragmented conditional blocks that were generating invalid JavaScript syntax
- Consolidated edit mode initialization logic into cohesive if/try/catch blocks
- Added proper class definition placement at script top level
- Implemented progressive enhancement with graceful degradation (content always displays)
- Added step-by-step status reporting and user-friendly error messaging
- Fixed timeout functionality for edit mode initialization tracking

The edit mode now properly initializes with transparent error reporting while maintaining
content visibility even when JavaScript fails, addressing user feedback for better
debugging and user experience.

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

Co-Authored-By: Claude <noreply@anthropic.com>

markitect/document_manager.py

@@ -575,6 +575,9 @@ class DocumentManager:
         const markdownContent = {js_markdown_content};
         {editor_config}
 
+        // 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');
@@ -589,8 +592,19 @@ class DocumentManager:
             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
@@ -598,9 +612,11 @@ class DocumentManager:
                 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 {{
@@ -615,22 +631,25 @@ class DocumentManager:
                         .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) {' if edit_mode else ''}
-                {'try {' if edit_mode else ''}
-                    {editor_scripts if edit_mode else ''}
-                    {'markitectEditor = new MarkitectEditor();' if edit_mode else ''}
-                    {'document.getElementById("status-message").textContent = "✓ Edit mode active - click any section to edit";' if edit_mode else ''}
-                    {'console.log("✓ Edit mode initialized successfully");' if edit_mode else ''}
-                {'} catch (error) {' if edit_mode else ''}
-                    {'reportEditModeError("Edit mode initialization failed", error.message);' if edit_mode else ''}
-                    {'console.error("Edit mode error:", error);' if edit_mode else ''}
-                {'}}' if edit_mode else ''}
-            {'}}' if edit_mode else ''}
+            {'''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 ''}
         }});
 
         // Handle CDN loading errors
@@ -639,6 +658,15 @@ class DocumentManager:
                 {'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>"""