coulomb/markitect-main
2
0
Fork 0
Code Issues 60 Pull Requests Actions 1 Projects 12 Releases 1 Wiki Activity

fix: implement proper image rendering in modular architecture

Browse Source 
- 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>
This commit is contained in:
Bernd Worsch
2025-11-04 09:49:23 +01:00
parent 35fb0445ca
commit c3caeef43a
1 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
markitect/static/js/components/dom-renderer.js
View File

@@ -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
});
}