From e8c0de233d419597e6bec97312a336a664c16171 Mon Sep 17 00:00:00 2001
From: Joakim <joakim@jnss.me>
Date: Sat, 30 Aug 2025 12:40:33 +0200
Subject: [PATCH] Fix marked.js API integration for UMD build
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐛 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! 🎯
---
 demo-site/insertr/insertr.js | 69 +++++++++++++++++++++++-------------
 1 file changed, 45 insertions(+), 24 deletions(-)

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 `<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');