diff --git a/demo-site/insertr/insertr.js b/demo-site/insertr/insertr.js index 2c3dbd6..de91dfc 100644 --- a/demo-site/insertr/insertr.js +++ b/demo-site/insertr/insertr.js @@ -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 `${text}`; - }; + 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 `
${text}
`; - }; + // 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 `${text}`; + }, + + 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 `${text}
`; + } + }, + 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');