From c3caeef43adf7775008f7b79034081f2f2153832 Mon Sep 17 00:00:00 2001
From: tegwick <bernd.worsch@gmail.com>
Date: Tue, 4 Nov 2025 09:49:23 +0100
Subject: [PATCH] fix: implement proper image rendering in modular architecture
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 .../static/js/components/dom-renderer.js      | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/markitect/static/js/components/dom-renderer.js b/markitect/static/js/components/dom-renderer.js
index f4300cbe..d0e8bdcd 100644
--- a/markitect/static/js/components/dom-renderer.js
+++ b/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()) {
-            element.innerHTML = section.currentMarkdown;
-        } else {
-            // Simple markdown rendering (can be enhanced later)
-            const content = this.simpleMarkdownRender(section.currentMarkdown);
-            element.innerHTML = content;
-        }
+        // Render all sections using markdown rendering (images need HTML conversion too)
+        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, '<em>$1</em>')
+            .replace(/!\[(.*?)\]\((.*?)\)/gim, '<img src="$2" alt="$1" style="max-width: 100%; height: auto; display: block; margin: 1rem auto;" />')
+            .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
         });
     }