fix: implement proper image rendering in modular architecture

- Fixed image sections displaying raw markdown instead of HTML img tags
- Updated renderSection to use simpleMarkdownRender for all content types
- Enhanced simpleMarkdownRender with image and link support:
  - ![alt](url) now renders as proper <img> tags with styling
  - [text](url) now renders as <a> tags with target="_blank"
- Added responsive image styling with max-width and auto margins

Root cause: Image sections were bypassing markdown rendering and showing
raw markdown text instead of converting to HTML.

Solution: Unified content rendering through enhanced markdown processor.

Verification: All image types now display correctly and remain editable.

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

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

markitect/static/js/components/dom-renderer.js

@@ -186,13 +186,9 @@ class DOMRenderer {
         element.setAttribute('data-section-id', section.id);
 
         // Add section content
-        if (section.isImage()) {
+        // Render all sections using markdown rendering (images need HTML conversion too)
-            element.innerHTML = section.currentMarkdown;
+        const content = this.simpleMarkdownRender(section.currentMarkdown);
-        } else {
+        element.innerHTML = content;
-            // Simple markdown rendering (can be enhanced later)
-            const content = this.simpleMarkdownRender(section.currentMarkdown);
-            element.innerHTML = content;
-        }
 
         // Add styling
         element.style.cssText = `
@@ -228,8 +224,10 @@ class DOMRenderer {
             .replace(/^# (.*$)/gim, '<h1>$1</h1>')
             .replace(/^## (.*$)/gim, '<h2>$1</h2>')
             .replace(/^### (.*$)/gim, '<h3>$1</h3>')
-            .replace(/\*\*(.*)\*\*/gim, '<strong>$1</strong>')
+            .replace(/!\[(.*?)\]\((.*?)\)/gim, '<img src="$2" alt="$1" style="max-width: 100%; height: auto; display: block; margin: 1rem auto;" />')
-            .replace(/\*(.*)\*/gim, '<em>$1</em>')
+            .replace(/\[([^\]]+)\]\(([^)]+)\)/gim, '<a href="$2" target="_blank">$1</a>')
+            .replace(/\*\*(.*?)\*\*/gim, '<strong>$1</strong>')
+            .replace(/\*(.*?)\*/gim, '<em>$1</em>')
             .replace(/\n/gim, '<br>');
     }
 
@@ -384,11 +382,13 @@ class DOMRenderer {
             this.sectionManager.updateContent(sectionId, textarea.value);
             this.sectionManager.acceptChanges(sectionId);
             floatingMenu.hide();
+            this.currentFloatingMenu = null; // Clear reference
         });
 
         cancelButton.addEventListener('click', () => {
             this.sectionManager.cancelChanges(sectionId);
             floatingMenu.hide();
+            this.currentFloatingMenu = null; // Clear reference
         });
 
         // Auto-focus textarea
@@ -429,11 +429,13 @@ class DOMRenderer {
             this.sectionManager.updateContent(sectionId, textarea.value);
             this.sectionManager.acceptChanges(sectionId);
             floatingMenu.hide();
+            this.currentFloatingMenu = null; // Clear reference
         });
 
         cancelBtn.addEventListener('click', () => {
             this.sectionManager.cancelChanges(sectionId);
             floatingMenu.hide();
+            this.currentFloatingMenu = null; // Clear reference
         });
     }