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! 🎯

demo-site/insertr/insertr.js

@@ -32,37 +32,53 @@ 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) => {
+        if (!this.marked || typeof this.marked !== 'object') {
+            console.error('Cannot find marked object');
+            return;
+        }
+        
+        // Get the marked function from the object
+        this.markedParser = this.marked.marked || this.marked.parse || this.marked;
+        
+        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>`;
-        };
+                    },
                     
-        // Custom paragraph renderer - preserves lead styling
-        renderer.paragraph = (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 `<p${className}>${text}</p>`;
-        };
-        
-        // Configure marked options
-        marked.setOptions({
-            renderer: renderer,
+                    }
+                },
                 breaks: true,
                 gfm: true
             });
         }
+    }
     
     async init() {
         console.log('🚀 Insertr initializing...');
@@ -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');