Fix marked.js API integration for UMD build

🐛 Issue: marked is not a function error
 Fix: Properly access marked.js v16.x UMD API

🔧 Changes:
- Correctly access window.marked object from UMD build
- Find the parse function within the marked object
- Properly configure custom renderer with .use() method
- Add comprehensive error checking and logging

💡 UMD API Structure:
- UMD exposes: window.marked (object)
- Parse function: window.marked.marked or window.marked.parse
- Configuration: window.marked.use() method

Now ready to test the two-button scenario! 🎯
This commit is contained in:
2025-08-30 12:40:33 +02:00
parent 0d79ab1fef
commit e8c0de233d

View File

@@ -32,36 +32,52 @@ class Insertr {
}
initializeMarkdown() {
if (typeof marked === 'undefined') {
// Check if marked is available in different ways it might be exposed
if (typeof marked === 'undefined' && typeof window.marked === 'undefined') {
console.error('Marked.js not loaded! Please include marked.js before insertr.js');
return;
}
// Configure marked with custom renderer for layout preservation
const renderer = new marked.Renderer();
// Get the marked object (UMD build exposes it as window.marked)
this.marked = window.marked || marked;
// Custom link renderer - preserves button styling
renderer.link = (href, title, text) => {
const isButton = this.looksLikeButton(text);
const className = isButton ? ' class="btn-primary"' : '';
const titleAttr = title ? ` title="${title}"` : '';
return `<a href="${href}"${className}${titleAttr}>${text}</a>`;
};
if (!this.marked || typeof this.marked !== 'object') {
console.error('Cannot find marked object');
return;
}
// Custom paragraph renderer - preserves lead styling
renderer.paragraph = (text) => {
// Check if this should be a lead paragraph based on content/context
const isLead = this.isLeadParagraph(text);
const className = isLead ? ' class="lead"' : '';
return `<p${className}>${text}</p>`;
};
// Get the marked function from the object
this.markedParser = this.marked.marked || this.marked.parse || this.marked;
// Configure marked options
marked.setOptions({
renderer: renderer,
breaks: true,
gfm: true
});
if (typeof this.markedParser !== 'function') {
console.error('Cannot find marked parse function', typeof this.markedParser);
return;
}
console.log('✅ Marked.js loaded successfully', this.marked);
// For marked v16.x, we configure using the .use() method on the marked object
if (this.marked.use) {
this.marked.use({
renderer: {
link: (href, title, text) => {
const isButton = this.looksLikeButton(text);
const className = isButton ? ' class="btn-primary"' : '';
const titleAttr = title ? ` title="${title}"` : '';
return `<a href="${href}"${className}${titleAttr}>${text}</a>`;
},
paragraph: (text) => {
// Check if this should be a lead paragraph based on content/context
const isLead = this.isLeadParagraph(text);
const className = isLead ? ' class="lead"' : '';
return `<p${className}>${text}</p>`;
}
},
breaks: true,
gfm: true
});
}
}
async init() {
@@ -272,7 +288,12 @@ class Insertr {
updateRichContent(container, markdownContent) {
// Use marked.js to convert markdown to HTML with our custom renderer
const html = marked(markdownContent);
if (!this.markedParser) {
console.error('Marked parser not initialized');
return;
}
const html = this.markedParser(markdownContent);
// Create temporary container to parse the HTML
const tempDiv = document.createElement('div');