joakim/insertr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix marked.js API integration for UMD build

Browse Source 
🐛 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:
Joakim
2025-08-30 12:40:33 +02:00
parent 0d79ab1fef
commit e8c0de233d
1 changed files with 45 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
demo-site/insertr/insertr.js
View File

@@ -32,36 +32,52 @@ class Insertr {
} }
initializeMarkdown() { 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'); console.error('Marked.js not loaded! Please include marked.js before insertr.js');
return; return;
} }
// Configure marked with custom renderer for layout preservation // Get the marked object (UMD build exposes it as window.marked)
const renderer = new marked.Renderer(); this.marked = window.marked || marked;
// Custom link renderer - preserves button styling if (!this.marked || typeof this.marked !== 'object') {
renderer.link = (href, title, text) => { console.error('Cannot find marked object');
const isButton = this.looksLikeButton(text); return;
const className = isButton ? ' class="btn-primary"' : ''; }
const titleAttr = title ? ` title="${title}"` : '';
return `<a href="${href}"${className}${titleAttr}>${text}</a>`;
};
// Custom paragraph renderer - preserves lead styling // Get the marked function from the object
renderer.paragraph = (text) => { this.markedParser = this.marked.marked || this.marked.parse || this.marked;
// 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>`;
};
// Configure marked options if (typeof this.markedParser !== 'function') {
marked.setOptions({ console.error('Cannot find marked parse function', typeof this.markedParser);
renderer: renderer, return;
breaks: true, }
gfm: true
}); 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() { async init() {
@@ -272,7 +288,12 @@ class Insertr {
updateRichContent(container, markdownContent) { updateRichContent(container, markdownContent) {
// Use marked.js to convert markdown to HTML with our custom renderer // 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 // Create temporary container to parse the HTML
const tempDiv = document.createElement('div'); const tempDiv = document.createElement('div');