quikdown 1.1.0 → 1.2.2

package/dist/quikdown_edit.cjs

@@ -1,6 +1,6 @@
 /**
  * Quikdown Editor - Drop-in Markdown Parser
- * @version 1.1.0
+ * @version 1.2.2
  * @license BSD-2-Clause
  * @copyright DeftIO 2025
  */
@@ -20,7 +20,7 @@
  */
 
 // Version will be injected at build time  
-const quikdownVersion = '1.1.0';
+const quikdownVersion = '1.2.2';
 
 // Constants for reuse
 const CLASS_PREFIX = 'quikdown-';
@@ -270,7 +270,7 @@ function quikdown(markdown, options = {}) {
         html = '<p>' + html + '</p>';
     } else {
         // Standard: two spaces at end of line for line breaks
-        html = html.replace(/  $/gm, `<br${getAttr('br')}>`);
+        html = html.replace(/ {2}$/gm, `<br${getAttr('br')}>`);
         
         // Paragraphs (double newlines)
         // Don't add </p> after block elements (they're not in paragraphs)
@@ -299,7 +299,7 @@ function quikdown(markdown, options = {}) {
         [/(<\/table>)<\/p>/g, '$1'],
         [/<p>(<pre[^>]*>)/g, '$1'],
         [/(<\/pre>)<\/p>/g, '$1'],
-        [new RegExp(`<p>(${PLACEHOLDER_CB}\\d+§)<\/p>`, 'g'), '$1']
+        [new RegExp(`<p>(${PLACEHOLDER_CB}\\d+§)</p>`, 'g'), '$1']
     ];
     
     cleanupPatterns.forEach(([pattern, replacement]) => {
@@ -505,7 +505,7 @@ function processLists(text, getAttr, inline_styles, bidirectional) {
     
     const lines = text.split('\n');
     const result = [];
-    let listStack = []; // Track nested lists
+    const listStack = []; // Track nested lists
     
     // Helper to escape HTML for data-qd attributes
     const escapeHtml = (text) => text.replace(/[&<>"']/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[m]);
@@ -715,7 +715,7 @@ quikdown_bd.toMarkdown = function(htmlOrElement, options = {}) {
         
         // Process children with context
         let childContent = '';
-        for (let child of node.childNodes) {
+        for (const child of node.childNodes) {
             childContent += walkNode(child, { parentTag: tag, ...parentContext });
         }
         
@@ -949,7 +949,7 @@ quikdown_bd.toMarkdown = function(htmlOrElement, options = {}) {
         let index = 1;
         const indent = '  '.repeat(depth);
         
-        for (let child of listNode.children) {
+        for (const child of listNode.children) {
             if (child.tagName !== 'LI') continue;
             
             const dataQd = child.getAttribute('data-qd');
@@ -962,7 +962,7 @@ quikdown_bd.toMarkdown = function(htmlOrElement, options = {}) {
                 marker = '-';
                 // Get text without the checkbox
                 let text = '';
-                for (let node of child.childNodes) {
+                for (const node of child.childNodes) {
                     if (node.nodeType === Node.TEXT_NODE) {
                         text += node.textContent;
                     } else if (node.tagName && node.tagName !== 'INPUT') {
@@ -973,7 +973,7 @@ quikdown_bd.toMarkdown = function(htmlOrElement, options = {}) {
             } else {
                 let itemContent = '';
                 
-                for (let node of child.childNodes) {
+                for (const node of child.childNodes) {
                     if (node.tagName === 'UL' || node.tagName === 'OL') {
                         itemContent += walkList(node, node.tagName === 'OL', depth + 1);
                     } else {
@@ -1002,7 +1002,7 @@ quikdown_bd.toMarkdown = function(htmlOrElement, options = {}) {
             const headerRow = thead.querySelector('tr');
             if (headerRow) {
                 const headers = [];
-                for (let th of headerRow.querySelectorAll('th')) {
+                for (const th of headerRow.querySelectorAll('th')) {
                     headers.push(th.textContent.trim());
                 }
                 result += '| ' + headers.join(' | ') + ' |\n';
@@ -1021,9 +1021,9 @@ quikdown_bd.toMarkdown = function(htmlOrElement, options = {}) {
         // Process body
         const tbody = table.querySelector('tbody');
         if (tbody) {
-            for (let row of tbody.querySelectorAll('tr')) {
+            for (const row of tbody.querySelectorAll('tr')) {
                 const cells = [];
-                for (let td of row.querySelectorAll('td')) {
+                for (const td of row.querySelectorAll('td')) {
                     cells.push(td.textContent.trim());
                 }
                 if (cells.length > 0) {
@@ -1066,6 +1066,1472 @@ if (typeof window !== 'undefined') {
     window.quikdown_bd = quikdown_bd;
 }
 
+/**
+ * Rich copy functionality for QuikdownEditor
+ * Handles copying rendered content with proper formatting for pasting into rich text editors
+ */
+
+/**
+ * Get platform information
+ * @returns {string} The detected platform: 'macos', 'windows', 'linux', or 'unknown'
+ */
+function getPlatform() {
+    const platform = navigator.platform?.toLowerCase() || '';
+    const userAgent = navigator.userAgent?.toLowerCase() || '';
+    
+    if (platform.includes('mac') || userAgent.includes('mac')) {
+        return 'macos';
+    } else if (userAgent.includes('windows')) {
+        return 'windows';
+    } else if (userAgent.includes('linux')) {
+        return 'linux';
+    }
+    return 'unknown';
+}
+
+/**
+ * Copy to clipboard using HTML selection fallback (for Safari)
+ * Uses div with selection to preserve HTML formatting
+ * @param {string} html - HTML content to copy
+ * @returns {boolean} Success status
+ */
+function copyToClipboard(html) {
+    let tempDiv;
+    let result;
+    
+    try {
+        // Use a div instead of textarea to preserve HTML formatting
+        tempDiv = document.createElement('div');
+        tempDiv.style.position = 'fixed';
+        tempDiv.style.left = '-9999px';
+        tempDiv.style.top = '0';
+        tempDiv.style.width = '1px';
+        tempDiv.style.height = '1px';
+        tempDiv.style.overflow = 'hidden';
+        tempDiv.innerHTML = html;
+        
+        document.body.appendChild(tempDiv);
+        
+        // Select the HTML content
+        const range = document.createRange();
+        range.selectNodeContents(tempDiv);
+        const selection = window.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(range);
+        
+        // Try to copy
+        result = document.execCommand('copy');
+        
+        // Clear selection
+        selection.removeAllRanges();
+    } catch (err) {
+        console.error('Fallback copy failed:', err);
+        result = false;
+    } finally {
+        if (tempDiv && tempDiv.parentNode) {
+            document.body.removeChild(tempDiv);
+        }
+    }
+    
+    return result;
+}
+
+/**
+ * Convert SVG to PNG blob (based on squibview's implementation)
+ * @param {SVGElement} svgElement - The SVG element to convert
+ * @returns {Promise<Blob>} A promise that resolves with the PNG blob
+ */
+async function svgToPng(svgElement, needsWhiteBackground = false) {
+    return new Promise((resolve, reject) => {
+        const svgString = new XMLSerializer().serializeToString(svgElement);
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        const img = new Image();
+        
+        const scale = 2;
+        
+        // Check if this is a Mermaid-generated SVG (they don't have explicit width/height attributes)
+        const isMermaidSvg = svgElement.closest('.mermaid') || svgElement.classList.contains('mermaid');
+        const hasExplicitDimensions = svgElement.getAttribute('width') && svgElement.getAttribute('height');
+        
+        let svgWidth, svgHeight;
+        
+        if (isMermaidSvg || !hasExplicitDimensions) {
+            // For Mermaid or other generated SVGs, prioritize computed dimensions
+            svgWidth = svgElement.clientWidth || 
+                       (svgElement.viewBox && svgElement.viewBox.baseVal.width) || 
+                       parseFloat(svgElement.getAttribute('width')) || 400;
+            svgHeight = svgElement.clientHeight || 
+                        (svgElement.viewBox && svgElement.viewBox.baseVal.height) || 
+                        parseFloat(svgElement.getAttribute('height')) || 300;
+        } else {
+            // For explicit SVGs (like fenced SVG blocks), prioritize explicit attributes
+            svgWidth = parseFloat(svgElement.getAttribute('width')) || 
+                       (svgElement.viewBox && svgElement.viewBox.baseVal.width) || 
+                       svgElement.clientWidth || 400;
+            svgHeight = parseFloat(svgElement.getAttribute('height')) || 
+                        (svgElement.viewBox && svgElement.viewBox.baseVal.height) || 
+                        svgElement.clientHeight || 300;
+        }
+        
+        // Ensure the SVG string has explicit dimensions by modifying it if necessary
+        let modifiedSvgString = svgString;
+        if (svgWidth && svgHeight) {
+            // Create a temporary SVG element to modify the serialized string
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = svgString;
+            const tempSvg = tempDiv.querySelector('svg');
+            if (tempSvg) {
+                tempSvg.setAttribute('width', svgWidth.toString());
+                tempSvg.setAttribute('height', svgHeight.toString());
+                modifiedSvgString = new XMLSerializer().serializeToString(tempSvg);
+            }
+        }
+        
+        canvas.width = svgWidth * scale;
+        canvas.height = svgHeight * scale;
+        ctx.scale(scale, scale);
+        
+        img.onload = () => {
+            try {
+                // Add white background for math equations (they often have transparent backgrounds)
+                if (needsWhiteBackground) {
+                    ctx.fillStyle = 'white';
+                    ctx.fillRect(0, 0, canvas.width, canvas.height);
+                }
+                
+                ctx.drawImage(img, 0, 0, svgWidth, svgHeight);
+                canvas.toBlob(blob => {
+                    resolve(blob);
+                }, 'image/png', 1.0);
+            } catch (err) {
+                reject(err);
+            }
+        };
+        
+        img.onerror = reject;
+        // Use data URI instead of blob URL to avoid tainting the canvas
+        const svgDataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(modifiedSvgString)}`;
+        img.src = svgDataUrl;
+    });
+}
+
+/**
+ * Rasterize a GeoJSON Leaflet map to PNG data URL (following Gem's guide)
+ * @param {HTMLElement} liveContainer - The live map container element
+ * @returns {Promise<string|null>} PNG data URL or null if failed
+ */
+async function rasterizeGeoJSONMap(liveContainer) {
+    try {
+        const map = liveContainer._map;
+        if (!map) {
+            console.warn('No map found on container');
+            return null;
+        }
+        
+        // Get container dimensions
+        const mapRect = liveContainer.getBoundingClientRect();
+        const width = Math.round(mapRect.width);
+        const height = Math.round(mapRect.height);
+        
+        if (width === 0 || height === 0) {
+            console.warn('Map container has zero dimensions');
+            return null;
+        }
+        
+        // Create canvas sized to the map container
+        const canvas = document.createElement('canvas');
+        const dpr = window.devicePixelRatio || 1;
+        
+        // Set canvas size with DPR for sharpness
+        canvas.width = width * dpr;
+        canvas.height = height * dpr;
+        canvas.style.width = width + 'px';
+        canvas.style.height = height + 'px';
+        
+        const ctx = canvas.getContext('2d');
+        ctx.scale(dpr, dpr);
+        
+        // White background
+        ctx.fillStyle = '#FFFFFF';
+        ctx.fillRect(0, 0, width, height);
+        
+        // 1. Draw tiles from THIS container only
+        const tiles = liveContainer.querySelectorAll('.leaflet-tile');
+        
+        const tilePromises = [];
+        for (const tile of tiles) {
+            tilePromises.push(new Promise((resolve) => {
+                const img = new Image();
+                img.crossOrigin = 'anonymous';
+                
+                img.onload = () => {
+                    try {
+                        // Calculate tile position relative to container
+                        const tileRect = tile.getBoundingClientRect();
+                        const offsetX = tileRect.left - mapRect.left;
+                        const offsetY = tileRect.top - mapRect.top;
+                        
+                        // Draw tile at correct position
+                        ctx.drawImage(img, offsetX, offsetY, tileRect.width, tileRect.height);
+                    } catch (err) {
+                        console.warn('Failed to draw tile:', err);
+                    }
+                    resolve();
+                };
+                
+                img.onerror = () => {
+                    console.warn('Failed to load tile:', tile.src);
+                    resolve();
+                };
+                
+                img.src = tile.src;
+            }));
+        }
+        
+        // Wait for all tiles to load
+        await Promise.all(tilePromises);
+        
+        // 2. Draw vector overlays (SVG paths for GeoJSON features)
+        const svgOverlays = liveContainer.querySelectorAll('svg:not(.leaflet-attribution-flag)');
+        
+        for (const svg of svgOverlays) {
+            // Skip attribution/control overlays
+            if (svg.closest('.leaflet-control')) continue;
+            
+            try {
+                const svgRect = svg.getBoundingClientRect();
+                const offsetX = svgRect.left - mapRect.left;
+                const offsetY = svgRect.top - mapRect.top;
+                
+                // Serialize SVG
+                const serializer = new XMLSerializer();
+                const svgStr = serializer.serializeToString(svg);
+                const svgBlob = new Blob([svgStr], { type: 'image/svg+xml;charset=utf-8' });
+                const url = URL.createObjectURL(svgBlob);
+                
+                // Draw SVG overlay
+                await new Promise((resolve, reject) => {
+                    const img = new Image();
+                    img.onload = () => {
+                        ctx.drawImage(img, offsetX, offsetY, svgRect.width, svgRect.height);
+                        URL.revokeObjectURL(url);
+                        resolve();
+                    };
+                    img.onerror = () => {
+                        URL.revokeObjectURL(url);
+                        reject(new Error('Failed to load SVG overlay'));
+                    };
+                    img.src = url;
+                });
+            } catch (err) {
+                console.warn('Failed to draw SVG overlay:', err);
+            }
+        }
+        
+        // 3. Draw marker icons if any
+        const markerIcons = liveContainer.querySelectorAll('.leaflet-marker-icon');
+        
+        for (const marker of markerIcons) {
+            try {
+                const img = new Image();
+                img.crossOrigin = 'anonymous';
+                
+                await new Promise((resolve) => {
+                    img.onload = () => {
+                        const markerRect = marker.getBoundingClientRect();
+                        const offsetX = markerRect.left - mapRect.left;
+                        const offsetY = markerRect.top - mapRect.top;
+                        ctx.drawImage(img, offsetX, offsetY, markerRect.width, markerRect.height);
+                        resolve();
+                    };
+                    img.onerror = resolve;
+                    img.src = marker.src;
+                });
+            } catch (err) {
+                console.warn('Failed to draw marker icon:', err);
+            }
+        }
+        
+        // Return PNG data URL
+        return canvas.toDataURL('image/png', 1.0);
+        
+    } catch (error) {
+        console.error('Failed to rasterize GeoJSON map:', error);
+        return null;
+    }
+}
+
+/**
+ * Get rendered content as rich HTML suitable for clipboard
+ * @param {HTMLElement} previewPanel - The preview panel element to copy from
+ * @returns {Promise<{success: boolean, html?: string, text?: string}>}
+ */
+async function getRenderedContent(previewPanel) {
+    if (!previewPanel) {
+        throw new Error('No preview panel available');
+    }
+    
+    // Check if MathJax needs to render (only if not already rendered)
+    const mathBlocks = previewPanel.querySelectorAll('.math-display');
+    if (mathBlocks.length > 0) {
+        // Check if already rendered (has mjx-container inside)
+        const needsRendering = Array.from(mathBlocks).some(block => !block.querySelector('mjx-container'));
+        
+        if (needsRendering && window.MathJax && window.MathJax.typesetPromise) {
+            try {
+                await window.MathJax.typesetPromise(Array.from(mathBlocks));
+            } catch (err) {
+                console.warn('MathJax typesetting failed:', err);
+            }
+        }
+    }
+    
+    // Clone the preview panel to avoid modifying the actual DOM
+    const clone = previewPanel.cloneNode(true);
+    
+    // Process different fence types for rich copy
+    try {
+        // Phase 1: Process basic markdown elements with inline styles
+        
+        // 1.1 Text formatting - add inline styles
+        clone.querySelectorAll('strong, b').forEach(el => {
+            el.style.fontWeight = 'bold';
+        });
+        
+        clone.querySelectorAll('em, i').forEach(el => {
+            el.style.fontStyle = 'italic';
+        });
+        
+        clone.querySelectorAll('del, s, strike').forEach(el => {
+            el.style.textDecoration = 'line-through';
+        });
+        
+        clone.querySelectorAll('u').forEach(el => {
+            el.style.textDecoration = 'underline';
+        });
+        
+        clone.querySelectorAll('code:not(pre code)').forEach(el => {
+            el.style.backgroundColor = '#f4f4f4';
+            el.style.padding = '2px 4px';
+            el.style.borderRadius = '3px';
+            el.style.fontFamily = 'monospace';
+            el.style.fontSize = '0.9em';
+        });
+        
+        // 1.2 Block elements - add inline styles
+        clone.querySelectorAll('h1').forEach(el => {
+            el.style.fontSize = '2em';
+            el.style.fontWeight = 'bold';
+            el.style.marginTop = '0.67em';
+            el.style.marginBottom = '0.67em';
+        });
+        
+        clone.querySelectorAll('h2').forEach(el => {
+            el.style.fontSize = '1.5em';
+            el.style.fontWeight = 'bold';
+            el.style.marginTop = '0.83em';
+            el.style.marginBottom = '0.83em';
+        });
+        
+        clone.querySelectorAll('h3').forEach(el => {
+            el.style.fontSize = '1.17em';
+            el.style.fontWeight = 'bold';
+            el.style.marginTop = '1em';
+            el.style.marginBottom = '1em';
+        });
+        
+        clone.querySelectorAll('h4').forEach(el => {
+            el.style.fontSize = '1em';
+            el.style.fontWeight = 'bold';
+            el.style.marginTop = '1.33em';
+            el.style.marginBottom = '1.33em';
+        });
+        
+        clone.querySelectorAll('h5').forEach(el => {
+            el.style.fontSize = '0.83em';
+            el.style.fontWeight = 'bold';
+            el.style.marginTop = '1.67em';
+            el.style.marginBottom = '1.67em';
+        });
+        
+        clone.querySelectorAll('h6').forEach(el => {
+            el.style.fontSize = '0.67em';
+            el.style.fontWeight = 'bold';
+            el.style.marginTop = '2.33em';
+            el.style.marginBottom = '2.33em';
+        });
+        
+        clone.querySelectorAll('blockquote').forEach(el => {
+            el.style.borderLeft = '4px solid #ddd';
+            el.style.marginLeft = '0';
+            el.style.paddingLeft = '1em';
+            el.style.color = '#666';
+        });
+        
+        clone.querySelectorAll('hr').forEach(el => {
+            el.style.border = 'none';
+            el.style.borderTop = '1px solid #ccc';
+            el.style.margin = '1em 0';
+        });
+        
+        // 1.3 Tables - add inline styles
+        clone.querySelectorAll('table').forEach(table => {
+            table.style.borderCollapse = 'collapse';
+            table.style.width = '100%';
+            table.style.marginBottom = '1em';
+        });
+        
+        clone.querySelectorAll('th').forEach(th => {
+            th.style.border = '1px solid #ccc';
+            th.style.padding = '8px';
+            th.style.textAlign = 'left';
+            th.style.backgroundColor = '#f0f0f0';
+            th.style.fontWeight = 'bold';
+        });
+        
+        clone.querySelectorAll('td').forEach(td => {
+            td.style.border = '1px solid #ccc';
+            td.style.padding = '8px';
+            td.style.textAlign = 'left';
+        });
+        
+        // 1.4 Links - add inline styles
+        clone.querySelectorAll('a').forEach(a => {
+            a.style.color = '#0066cc';
+            a.style.textDecoration = 'underline';
+        });
+        
+        // Process code blocks - wrap in table and add syntax highlighting colors
+        clone.querySelectorAll('pre code').forEach(block => {
+            const pre = block.parentElement;
+            
+            // Add inline styles for syntax highlighting (GitHub theme colors)
+            if (block.classList.contains('hljs')) {
+                // Apply inline styles to all highlight.js elements
+                block.querySelectorAll('.hljs-keyword').forEach(el => {
+                    el.style.color = '#d73a49';
+                    el.style.fontWeight = 'bold';
+                });
+                block.querySelectorAll('.hljs-string').forEach(el => {
+                    el.style.color = '#032f62';
+                });
+                block.querySelectorAll('.hljs-number').forEach(el => {
+                    el.style.color = '#005cc5';
+                });
+                block.querySelectorAll('.hljs-comment').forEach(el => {
+                    el.style.color = '#6a737d';
+                    el.style.fontStyle = 'italic';
+                });
+                block.querySelectorAll('.hljs-function').forEach(el => {
+                    el.style.color = '#6f42c1';
+                });
+                block.querySelectorAll('.hljs-class').forEach(el => {
+                    el.style.color = '#6f42c1';
+                });
+                block.querySelectorAll('.hljs-title').forEach(el => {
+                    el.style.color = '#6f42c1';
+                });
+                block.querySelectorAll('.hljs-built_in').forEach(el => {
+                    el.style.color = '#005cc5';
+                });
+                block.querySelectorAll('.hljs-literal').forEach(el => {
+                    el.style.color = '#005cc5';
+                });
+                block.querySelectorAll('.hljs-meta').forEach(el => {
+                    el.style.color = '#005cc5';
+                });
+                block.querySelectorAll('.hljs-attr').forEach(el => {
+                    el.style.color = '#22863a';
+                });
+                block.querySelectorAll('.hljs-variable').forEach(el => {
+                    el.style.color = '#e36209';
+                });
+                block.querySelectorAll('.hljs-regexp').forEach(el => {
+                    el.style.color = '#032f62';
+                });
+                block.querySelectorAll('.hljs-selector-class').forEach(el => {
+                    el.style.color = '#22863a';
+                });
+                block.querySelectorAll('.hljs-selector-id').forEach(el => {
+                    el.style.color = '#6f42c1';
+                });
+                block.querySelectorAll('.hljs-selector-tag').forEach(el => {
+                    el.style.color = '#22863a';
+                });
+                block.querySelectorAll('.hljs-tag').forEach(el => {
+                    el.style.color = '#22863a';
+                });
+                block.querySelectorAll('.hljs-name').forEach(el => {
+                    el.style.color = '#22863a';
+                });
+                block.querySelectorAll('.hljs-attribute').forEach(el => {
+                    el.style.color = '#6f42c1';
+                });
+            }
+            
+            const table = document.createElement('table');
+            table.style.width = '100%';
+            table.style.borderCollapse = 'collapse';
+            table.style.border = 'none';
+            table.style.marginBottom = '1em';
+            
+            const tr = document.createElement('tr');
+            const td = document.createElement('td');
+            td.style.backgroundColor = '#f7f7f7';
+            td.style.padding = '12px';
+            td.style.fontFamily = 'Consolas, Monaco, "Courier New", monospace';
+            td.style.fontSize = '14px';
+            td.style.lineHeight = '1.4';
+            td.style.whiteSpace = 'pre';
+            td.style.overflowX = 'auto';
+            td.style.border = '1px solid #ddd';
+            td.style.borderRadius = '4px';
+            
+            // Move the formatted code content with inline styles
+            td.innerHTML = block.innerHTML;
+            
+            tr.appendChild(td);
+            table.appendChild(tr);
+            
+            // Replace the pre element with the table
+            pre.parentNode.replaceChild(table, pre);
+        });
+        
+        // Process images - convert to data URLs and ensure proper dimensions
+        const images = clone.querySelectorAll('img');
+        for (const img of images) {
+            // Ensure image has dimensions for Google Docs compatibility
+            if (!img.width && img.naturalWidth) {
+                img.width = img.naturalWidth;
+            }
+            if (!img.height && img.naturalHeight) {
+                img.height = img.naturalHeight;
+            }
+            
+            // Set max dimensions to prevent huge images
+            const maxWidth = 800;
+            const maxHeight = 600;
+            if (img.width > maxWidth || img.height > maxHeight) {
+                const scale = Math.min(maxWidth / img.width, maxHeight / img.height);
+                img.width = Math.round(img.width * scale);
+                img.height = Math.round(img.height * scale);
+            }
+            
+            // Ensure width and height attributes are set
+            if (img.width) {
+                img.setAttribute('width', img.width.toString());
+                img.style.width = img.width + 'px';
+            }
+            if (img.height) {
+                img.setAttribute('height', img.height.toString());
+                img.style.height = img.height + 'px';
+            }
+            
+            // Add v:shapes for Word compatibility
+            if (!img.getAttribute('v:shapes')) {
+                img.setAttribute('v:shapes', 'image' + Math.random().toString(36).substr(2, 9));
+            }
+            
+            // Skip if already a data URL
+            if (img.src && !img.src.startsWith('data:')) {
+                try {
+                    // Try to convert to data URL
+                    const response = await fetch(img.src);
+                    const blob = await response.blob();
+                    
+                    // Check if image is too large (Google Docs has limits)
+                    const maxSize = 2 * 1024 * 1024; // 2MB limit for inline images
+                    if (blob.size > maxSize) {
+                        console.warn('Image too large for inline data URL:', img.src, 'Size:', blob.size);
+                        // For large images, we might want to resize or keep the URL
+                        continue;
+                    }
+                    
+                    const dataUrl = await new Promise(resolve => {
+                        const reader = new FileReader();
+                        reader.onloadend = () => resolve(reader.result);
+                        reader.readAsDataURL(blob);
+                    });
+                    img.src = dataUrl;
+                } catch (err) {
+                    console.warn('Failed to convert image to data URL:', img.src, err);
+                    // Keep original src if conversion fails
+                }
+            }
+        }
+        
+        // Phase 2: Process fence block types
+        // 1. Process STL 3D models - convert canvas to image or placeholder
+        const stlContainers = clone.querySelectorAll('.qde-stl-container');
+        for (const container of stlContainers) {
+            try {
+                // Find the corresponding original container to get the canvas
+                const containerId = container.dataset.stlId;
+                const originalContainer = previewPanel.querySelector(`.qde-stl-container[data-stl-id="${containerId}"]`);
+                
+                if (originalContainer) {
+                    // Look for canvas element in the original container (Three.js WebGL canvas)
+                    const canvas = originalContainer.querySelector('canvas');
+                    if (canvas && canvas.width > 0 && canvas.height > 0) {
+                        try {
+                            // Get Three.js references stored on the container (like squibview)
+                            const renderer = originalContainer._threeRenderer;
+                            const scene = originalContainer._threeScene;
+                            const camera = originalContainer._threeCamera;
+                            
+                            // If we have access to the Three.js objects, force render the scene
+                            if (renderer && scene && camera) {
+                                renderer.render(scene, camera);
+                            }
+                            
+                            // Try to capture the canvas as an image
+                            const dataUrl = canvas.toDataURL('image/png', 1.0);
+                            const img = document.createElement('img');
+                            img.src = dataUrl;
+                            
+                            // Use canvas dimensions for the image
+                            const imgWidth = canvas.width / 2; // Divide by scale factor (2x for retina)
+                            const imgHeight = canvas.height / 2;
+                            
+                            // Set both HTML attributes and CSS properties for maximum compatibility
+                            img.width = imgWidth;
+                            img.height = imgHeight;
+                            img.setAttribute('width', imgWidth.toString());
+                            img.setAttribute('height', imgHeight.toString());
+                            img.style.width = imgWidth + 'px';
+                            img.style.height = imgHeight + 'px';
+                            img.style.maxWidth = 'none';
+                            img.style.maxHeight = 'none';
+                            img.style.border = '1px solid #ddd';
+                            img.style.borderRadius = '4px';
+                            img.style.margin = '0.5em 0';
+                            img.setAttribute('v:shapes', 'image' + Math.random().toString(36).substr(2, 9));
+                            img.alt = 'STL 3D Model';
+                            
+                            container.parentNode.replaceChild(img, container);
+                            continue;
+                        } catch (canvasErr) {
+                            console.warn('Failed to convert STL canvas to image (likely WebGL context issue):', canvasErr);
+                        }
+                    } else {
+                        console.warn('No valid canvas found in STL container');
+                    }
+                } else {
+                    console.warn('Could not find original STL container');
+                }
+            } catch (err) {
+                console.error('Error processing STL container for copy:', err);
+            }
+            
+            // Fallback to placeholder if canvas conversion fails
+            const placeholder = document.createElement('div');
+            placeholder.style.cssText = 'padding: 12px; background-color: #f0f0f0; border: 1px solid #ccc; text-align: center; margin: 0.5em 0; border-radius: 4px;';
+            placeholder.textContent = '[STL 3D Model - Interactive content not available in copy]';
+            container.parentNode.replaceChild(placeholder, container);
+        }
+        
+        // 2. Process Mermaid diagrams - convert SVG to PNG
+        const mermaidContainers = clone.querySelectorAll('.mermaid');
+        for (const container of mermaidContainers) {
+            const svg = container.querySelector('svg');
+            if (svg) {
+                try {
+                    const pngBlob = await svgToPng(svg);
+                    const dataUrl = await new Promise(resolve => {
+                        const reader = new FileReader();
+                        reader.onloadend = () => resolve(reader.result);
+                        reader.readAsDataURL(pngBlob);
+                    });
+                    
+                    const img = document.createElement('img');
+                    img.src = dataUrl;
+                    
+                    // Use the exact same dimension calculation logic as svgToPng (like squibview)
+                    const isMermaidSvg = svg.closest('.mermaid') || svg.classList.contains('mermaid');
+                    const hasExplicitDimensions = svg.getAttribute('width') && svg.getAttribute('height');
+                    
+                    let imgWidth, imgHeight;
+                    
+                    if (isMermaidSvg || !hasExplicitDimensions) {
+                        // For Mermaid or other generated SVGs, prioritize computed dimensions
+                        imgWidth = svg.clientWidth || 
+                                   (svg.viewBox && svg.viewBox.baseVal.width) || 
+                                   parseFloat(svg.getAttribute('width')) || 400;
+                        imgHeight = svg.clientHeight || 
+                                    (svg.viewBox && svg.viewBox.baseVal.height) || 
+                                    parseFloat(svg.getAttribute('height')) || 300;
+                    } else {
+                        // For explicit SVGs (like fenced SVG blocks), prioritize explicit attributes
+                        imgWidth = parseFloat(svg.getAttribute('width')) || 
+                                   (svg.viewBox && svg.viewBox.baseVal.width) || 
+                                   svg.clientWidth || 400;
+                        imgHeight = parseFloat(svg.getAttribute('height')) || 
+                                    (svg.viewBox && svg.viewBox.baseVal.height) || 
+                                    svg.clientHeight || 300;
+                    }
+                    
+                    // Set both HTML attributes and CSS properties for maximum compatibility (like squibview)
+                    img.width = imgWidth;
+                    img.height = imgHeight;
+                    img.setAttribute('width', imgWidth.toString());
+                    img.setAttribute('height', imgHeight.toString());
+                    img.style.width = imgWidth + 'px';
+                    img.style.height = imgHeight + 'px';
+                    img.style.maxWidth = 'none';  // Prevent CSS from constraining the image
+                    img.style.maxHeight = 'none';
+                    img.setAttribute('v:shapes', 'image' + Math.random().toString(36).substr(2, 9));
+                    img.alt = 'Mermaid Diagram';
+                    
+                    container.parentNode.replaceChild(img, container);
+                } catch (err) {
+                    console.warn('Failed to convert Mermaid diagram:', err);
+                    // Fallback: leave as SVG
+                }
+            }
+        }
+        
+        // 3. Process Chart.js charts - convert canvas to image
+        const chartContainers = clone.querySelectorAll('.qde-chart-container');
+        for (const container of chartContainers) {
+            try {
+                const containerId = container.dataset.chartId;
+                const originalContainer = previewPanel.querySelector(`.qde-chart-container[data-chart-id="${containerId}"]`);
+                
+                if (originalContainer) {
+                    const canvas = originalContainer.querySelector('canvas');
+                    if (canvas && canvas.width > 0 && canvas.height > 0) {
+                        try {
+                            const dataUrl = canvas.toDataURL('image/png', 1.0);
+                            const img = document.createElement('img');
+                            img.src = dataUrl;
+                            
+                            // Use canvas dimensions for the image
+                            const imgWidth = canvas.width;
+                            const imgHeight = canvas.height;
+                            
+                            // Set both HTML attributes and CSS properties for maximum compatibility
+                            img.width = imgWidth;
+                            img.height = imgHeight;
+                            img.setAttribute('width', imgWidth.toString());
+                            img.setAttribute('height', imgHeight.toString());
+                            img.style.width = imgWidth + 'px';
+                            img.style.height = imgHeight + 'px';
+                            img.style.maxWidth = 'none';
+                            img.style.maxHeight = 'none';
+                            img.style.margin = '0.5em 0';
+                            img.setAttribute('v:shapes', 'image' + Math.random().toString(36).substr(2, 9));
+                            img.alt = 'Chart';
+                            
+                            container.parentNode.replaceChild(img, container);
+                            continue;
+                        } catch (canvasErr) {
+                            console.warn('Failed to convert chart canvas to image:', canvasErr);
+                        }
+                    }
+                }
+            } catch (err) {
+                console.warn('Error processing chart container:', err);
+            }
+            
+            // Fallback to placeholder
+            const placeholder = document.createElement('div');
+            placeholder.style.cssText = 'padding: 12px; background-color: #f0f0f0; border: 1px solid #ccc; text-align: center; margin: 0.5em 0; border-radius: 4px;';
+            placeholder.textContent = '[Chart - Interactive content not available in copy]';
+            container.parentNode.replaceChild(placeholder, container);
+        }
+        
+        // 4. Process SVG fenced blocks - convert to PNG
+        const svgContainers = clone.querySelectorAll('.qde-svg-container svg');
+        for (const svg of svgContainers) {
+            try {
+                const pngBlob = await svgToPng(svg);
+                const dataUrl = await new Promise(resolve => {
+                    const reader = new FileReader();
+                    reader.onloadend = () => resolve(reader.result);
+                    reader.readAsDataURL(pngBlob);
+                });
+                
+                const img = document.createElement('img');
+                img.src = dataUrl;
+                
+                // Calculate dimensions for the SVG
+                const hasExplicitDimensions = svg.getAttribute('width') && svg.getAttribute('height');
+                
+                let imgWidth, imgHeight;
+                
+                if (hasExplicitDimensions) {
+                    // For explicit SVGs (like fenced SVG blocks), prioritize explicit attributes
+                    imgWidth = parseFloat(svg.getAttribute('width')) || 
+                               (svg.viewBox && svg.viewBox.baseVal.width) || 
+                               svg.clientWidth || 400;
+                    imgHeight = parseFloat(svg.getAttribute('height')) || 
+                                (svg.viewBox && svg.viewBox.baseVal.height) || 
+                                svg.clientHeight || 300;
+                } else {
+                    // For generated SVGs, prioritize computed dimensions
+                    imgWidth = svg.clientWidth || 
+                               (svg.viewBox && svg.viewBox.baseVal.width) || 
+                               parseFloat(svg.getAttribute('width')) || 400;
+                    imgHeight = svg.clientHeight || 
+                                (svg.viewBox && svg.viewBox.baseVal.height) || 
+                                parseFloat(svg.getAttribute('height')) || 300;
+                }
+                
+                // Set both HTML attributes and CSS properties for maximum compatibility
+                img.width = imgWidth;
+                img.height = imgHeight;
+                img.setAttribute('width', imgWidth.toString());
+                img.setAttribute('height', imgHeight.toString());
+                img.style.width = imgWidth + 'px';
+                img.style.height = imgHeight + 'px';
+                img.style.maxWidth = 'none';  // Prevent CSS from constraining the image
+                img.style.maxHeight = 'none';
+                img.setAttribute('v:shapes', 'image' + Math.random().toString(36).substr(2, 9));
+                img.alt = 'SVG Image';
+                
+                svg.parentNode.replaceChild(img, svg);
+            } catch (err) {
+                console.warn('Failed to convert SVG to image:', err);
+                // Leave as SVG if conversion fails
+            }
+        }
+        
+        // 5. Process Math equations - convert to PNG images (exactly like SquibView)
+        const mathElements = Array.from(clone.querySelectorAll('.math-display'));
+        
+        if (mathElements.length > 0) {
+            for (const mathEl of mathElements) {
+                try {
+                    // Find SVG inside the math element (MathJax creates it)
+                    const svg = mathEl.querySelector('svg');
+                    if (!svg) {
+                        console.warn('No SVG found in math element, skipping');
+                        continue;
+                    }
+                    
+                    // Convert SVG to PNG data URL (exactly like SquibView)
+                    const serializer = new XMLSerializer();
+                    const svgStr = serializer.serializeToString(svg);
+                    const svgBlob = new Blob([svgStr], { type: "image/svg+xml;charset=utf-8" });
+                    const url = URL.createObjectURL(svgBlob);
+                    
+                    const img = new Image();
+                    const dataUrl = await new Promise((resolve, reject) => {
+                        img.onload = function () {
+                            const canvas = document.createElement('canvas');
+                            
+                            // Determine SVG dimensions robustly (exactly like SquibView)
+                            let width, height;
+                            try {
+                                // First try baseVal.value (works for absolute units)
+                                width = svg.width.baseVal.value;
+                                height = svg.height.baseVal.value;
+                            } catch (_e) {
+                                // Fallback for relative units - use viewBox or rendered size
+                                if (svg.viewBox && svg.viewBox.baseVal) {
+                                    width = svg.viewBox.baseVal.width;
+                                    height = svg.viewBox.baseVal.height;
+                                } else {
+                                    // Use the natural size of the loaded image
+                                    width = img.naturalWidth || img.width || 200;
+                                    height = img.naturalHeight || img.height || 50;
+                                }
+                            }
+                            
+                            // Scale down for much smaller paste sizes
+                            const targetMaxWidth = 150;  // Further reduced
+                            const targetMaxHeight = 45;   // Further reduced
+                            
+                            // Apply aggressive downsizing for MathJax SVGs
+                            let scaleFactor = 0.04; // Further reduced for smaller output
+                            
+                            const scaledWidth = width * scaleFactor;
+                            const scaledHeight = height * scaleFactor;
+                            
+                            // If still too large after base scaling, scale down further
+                            if (scaledWidth > targetMaxWidth || scaledHeight > targetMaxHeight) {
+                                const scaleX = targetMaxWidth / scaledWidth;
+                                const scaleY = targetMaxHeight / scaledHeight;
+                                scaleFactor *= Math.min(scaleX, scaleY);
+                            }
+                            
+                            width *= scaleFactor;
+                            height *= scaleFactor;
+                            
+                            // Use higher DPR for crisp rendering at smaller sizes
+                            const dpr = 2; // Fixed 2x for consistent quality
+                            canvas.width = width * dpr;
+                            canvas.height = height * dpr;
+                            canvas.style.width = width + 'px';
+                            canvas.style.height = height + 'px';
+                            
+                            const ctx = canvas.getContext('2d');
+                            ctx.scale(dpr, dpr);
+                            
+                            // White background
+                            ctx.fillStyle = "#FFFFFF";
+                            ctx.fillRect(0, 0, width, height);
+                            
+                            // Draw the SVG image at logical size
+                            ctx.drawImage(img, 0, 0, width, height);
+                            
+                            // Clean up URL
+                            URL.revokeObjectURL(url);
+                            
+                            // Return data URL
+                            resolve(canvas.toDataURL('image/png'));
+                        };
+                        
+                        img.onerror = () => {
+                            URL.revokeObjectURL(url);
+                            reject(new Error('Failed to load SVG image'));
+                        };
+                        
+                        img.src = url;
+                    });
+                    
+                    // Replace math element with img tag containing the PNG data URL
+                    const imgElement = document.createElement('img');
+                    imgElement.src = dataUrl;
+                    
+                    // Extract dimensions from the data URL canvas
+                    const img2 = new Image();
+                    img2.src = dataUrl;
+                    await new Promise((resolve) => {
+                        img2.onload = resolve;
+                        img2.onerror = resolve;
+                        setTimeout(resolve, 100); // Timeout fallback
+                    });
+                    
+                    // Set explicit dimensions (accounting for DPR)
+                    const displayWidth = img2.naturalWidth / 2;  // Divide by DPR
+                    const displayHeight = img2.naturalHeight / 2;
+                    
+                    imgElement.width = displayWidth;
+                    imgElement.height = displayHeight;
+                    imgElement.style.cssText = `display:inline-block;margin:0.5em 0;width:${displayWidth}px;height:${displayHeight}px;vertical-align:middle;`;
+                    imgElement.alt = 'Math equation';
+                    
+                    mathEl.parentNode.replaceChild(imgElement, mathEl);
+                } catch (error) {
+                    console.error('Failed to convert math element to image:', error);
+                    // Keep the original element if conversion fails
+                }
+            }
+        }
+        
+        // 2. Process GeoJSON maps - convert to static images (following Gem's guide)
+        const geojsonContainers = clone.querySelectorAll('.geojson-container');
+        if (geojsonContainers.length > 0) {
+            
+            for (const clonedContainer of geojsonContainers) {
+                try {
+                    // Find the corresponding live container by matching data-original-source
+                    const originalSource = clonedContainer.getAttribute('data-original-source');
+                    if (!originalSource) {
+                        console.warn('No original source found for GeoJSON container');
+                        continue;
+                    }
+                    
+                    // Find live container with same source
+                    let liveContainer = null;
+                    const allLiveContainers = previewPanel.querySelectorAll('.geojson-container');
+                    for (const candidate of allLiveContainers) {
+                        if (candidate.getAttribute('data-original-source') === originalSource) {
+                            liveContainer = candidate;
+                            break;
+                        }
+                    }
+                    
+                    if (!liveContainer) {
+                        console.warn('Could not find live GeoJSON container');
+                        const placeholder = document.createElement('div');
+                        placeholder.style.cssText = 'padding: 12px; background-color: #f0f0f0; border: 1px solid #ccc; text-align: center; margin: 0.5em 0; border-radius: 4px;';
+                        placeholder.textContent = '[GeoJSON Map - Interactive content not available in copy]';
+                        clonedContainer.parentNode.replaceChild(placeholder, clonedContainer);
+                        continue;
+                    }
+                    
+                    // Check if map is ready
+                    const map = liveContainer._map;
+                    if (!map) {
+                        console.warn('Map not initialized yet');
+                        const placeholder = document.createElement('div');
+                        placeholder.style.cssText = 'padding: 12px; background-color: #f0f0f0; border: 1px solid #ccc; text-align: center; margin: 0.5em 0; border-radius: 4px;';
+                        placeholder.textContent = '[GeoJSON Map - Still loading]';
+                        clonedContainer.parentNode.replaceChild(placeholder, clonedContainer);
+                        continue;
+                    }
+                    
+                    // Rasterize the map to PNG
+                    const dataUrl = await rasterizeGeoJSONMap(liveContainer);
+                    
+                    if (dataUrl) {
+                        // Replace with image
+                        const img = document.createElement('img');
+                        img.src = dataUrl;
+                        img.style.cssText = 'width: 100%; height: 300px; border: 1px solid #ddd; border-radius: 4px; margin: 0.5em 0;';
+                        img.alt = 'GeoJSON Map';
+                        clonedContainer.parentNode.replaceChild(img, clonedContainer);
+                    } else {
+                        // Fallback placeholder
+                        const placeholder = document.createElement('div');
+                        placeholder.style.cssText = 'padding: 12px; background-color: #f0f0f0; border: 1px solid #ccc; text-align: center; margin: 0.5em 0; border-radius: 4px;';
+                        placeholder.textContent = '[GeoJSON Map - Interactive content not available in copy]';
+                        clonedContainer.parentNode.replaceChild(placeholder, clonedContainer);
+                    }
+                    
+                } catch (error) {
+                    console.error('Failed to process GeoJSON container:', error);
+                    // Replace with placeholder
+                    const placeholder = document.createElement('div');
+                    placeholder.style.cssText = 'padding: 12px; background-color: #f0f0f0; border: 1px solid #ccc; text-align: center; margin: 0.5em 0; border-radius: 4px;';
+                    placeholder.textContent = '[GeoJSON Map - Interactive content not available in copy]';
+                    clonedContainer.parentNode.replaceChild(placeholder, clonedContainer);
+                }
+            }
+        }
+        
+        
+        
+        // 6. Process GeoJSON/Leaflet maps - capture as single image (compose tiles + overlays)
+        const mapContainers = clone.querySelectorAll('[data-qd-lang="geojson"]');
+        for (const container of mapContainers) {
+            try {
+                const containerId = container.id;
+                const originalContainer = containerId ? previewPanel.querySelector(`#${containerId}`) : null;
+                if (!originalContainer) continue;
+                const leafletContainer = originalContainer.querySelector('.leaflet-container');
+                if (!leafletContainer) continue;
+
+                const dpr = Math.max(1, window.devicePixelRatio || 1);
+                const width = leafletContainer.clientWidth || 600;
+                const height = leafletContainer.clientHeight || 400;
+                const canvas = document.createElement('canvas');
+                canvas.width = Math.round(width * dpr);
+                canvas.height = Math.round(height * dpr);
+                const ctx = canvas.getContext('2d');
+                ctx.scale(dpr, dpr);
+                ctx.fillStyle = '#FFFFFF';
+                ctx.fillRect(0, 0, width, height);
+
+                const leafRect = leafletContainer.getBoundingClientRect();
+
+                // Draw tiles (snap to integer pixels to avoid seams)
+                const tiles = Array.from(leafletContainer.querySelectorAll('img.leaflet-tile'));
+                for (const tile of tiles) {
+                    try {
+                        const r = tile.getBoundingClientRect();
+                        const x = Math.round(r.left - leafRect.left);
+                        const y = Math.round(r.top - leafRect.top);
+                        const w = Math.round(r.width);
+                        const h = Math.round(r.height);
+                        const overlaps = !(r.right <= leafRect.left || r.left >= leafRect.right || r.bottom <= leafRect.top || r.top >= leafRect.bottom);
+                        const style = window.getComputedStyle(tile);
+                        if (w > 0 && h > 0 && overlaps && style.display !== 'none' && style.visibility !== 'hidden') {
+                            ctx.drawImage(tile, x, y, w + 1, h + 1);
+                        }
+                    } catch (e) {
+                        console.warn('Failed to draw tile:', e);
+                    }
+                }
+
+                // Draw SVG overlays (paths, markers)
+                const overlaySvgs = originalContainer.querySelectorAll('.leaflet-overlay-pane svg');
+                for (const svg of overlaySvgs) {
+                    try {
+                        const svgStr = new XMLSerializer().serializeToString(svg);
+                        const dataUrl = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgStr);
+                        const img = new Image();
+                        await new Promise((resolve) => { img.onload = resolve; img.onerror = resolve; img.src = dataUrl; });
+                        const r = svg.getBoundingClientRect();
+                        const x = Math.round(r.left - leafRect.left);
+                        const y = Math.round(r.top - leafRect.top);
+                        const w = Math.round(r.width);
+                        const h = Math.round(r.height);
+                        const overlaps = !(r.right <= leafRect.left || r.left >= leafRect.right || r.bottom <= leafRect.top || r.top >= leafRect.bottom);
+                        if (w > 0 && h > 0 && overlaps) ctx.drawImage(img, x, y, w, h);
+                    } catch (e) {
+                        console.warn('Failed to draw overlay SVG:', e);
+                    }
+                }
+
+                // Draw marker icons (PNG/SVG img elements)
+                const markerIcons = originalContainer.querySelectorAll('.leaflet-marker-pane img.leaflet-marker-icon');
+                for (const icon of markerIcons) {
+                    try {
+                        const r = icon.getBoundingClientRect();
+                        const x = Math.round(r.left - leafRect.left);
+                        const y = Math.round(r.top - leafRect.top);
+                        const w = Math.round(r.width);
+                        const h = Math.round(r.height);
+                        const overlaps = !(r.right <= leafRect.left || r.left >= leafRect.right || r.bottom <= leafRect.top || r.top >= leafRect.bottom);
+                        const style = window.getComputedStyle(icon);
+                        if (w > 0 && h > 0 && overlaps && style.display !== 'none' && style.visibility !== 'hidden') {
+                            ctx.drawImage(icon, x, y, w, h);
+                        }
+                    } catch (e) {
+                        console.warn('Failed to draw marker icon:', e);
+                    }
+                }
+
+                // Try to produce a data URL (may fail if canvas tainted by CORS tiles)
+                let mapDataUrl = '';
+                try {
+                    mapDataUrl = canvas.toDataURL('image/png', 1.0);
+                } catch (_e) {
+                    console.warn('Map canvas tainted; falling back to placeholder');
+                }
+
+                const img = document.createElement('img');
+                if (mapDataUrl) {
+                    img.src = mapDataUrl;
+                    img.width = width;
+                    img.height = height;
+                    img.setAttribute('width', String(width));
+                    img.setAttribute('height', String(height));
+                    img.style.width = width + 'px';
+                    img.style.height = height + 'px';
+                    img.style.display = 'block';
+                    img.style.border = '1px solid #ddd';
+                    img.setAttribute('v:shapes', 'image' + Math.random().toString(36).substr(2, 9));
+                    img.alt = 'Map';
+                } else {
+                    img.alt = 'Map';
+                    img.style.width = width + 'px';
+                    img.style.height = height + 'px';
+                    img.style.border = '1px solid #ddd';
+                    img.style.backgroundColor = '#f0f0f0';
+                }
+
+                container.parentNode.replaceChild(img, container);
+            } catch (err) {
+                console.warn('Failed to process map container:', err);
+            }
+        }
+        
+        // 7. Process HTML fence blocks - render the HTML content and process images
+        const htmlContainers = clone.querySelectorAll('.qde-html-container');
+        for (const container of htmlContainers) {
+            try {
+                // Get the original source HTML
+                const source = container.getAttribute('data-qd-source');
+                
+                // Check if there's a pre element (fallback display) or actual HTML content
+                const pre = container.querySelector('pre');
+                
+                if (source) {
+                    // Parse the source HTML
+                    const tempDiv = document.createElement('div');
+                    tempDiv.innerHTML = source;
+                    
+                    // Process all images in the HTML block
+                    const htmlImages = tempDiv.querySelectorAll('img');
+                    for (const img of htmlImages) {
+                        // Preserve original dimensions from HTML attributes
+                        const widthAttr = img.getAttribute('width');
+                        const heightAttr = img.getAttribute('height');
+                        
+                        if (widthAttr) {
+                            img.width = parseInt(widthAttr);
+                            img.style.width = widthAttr.includes('%') ? widthAttr : `${img.width}px`;
+                        }
+                        if (heightAttr) {
+                            img.height = parseInt(heightAttr);
+                            img.style.height = heightAttr.includes('%') ? heightAttr : `${img.height}px`;
+                        }
+                        
+                        // Convert to data URL using canvas (like squibview)
+                        if (img.src && !img.src.startsWith('data:')) {
+                            try {
+                                // Use canvas to convert image to data URL (avoids CORS issues)
+                                const canvas = document.createElement('canvas');
+                                const ctx = canvas.getContext('2d');
+                                
+                                // Create new image and wait for it to load
+                                const tempImg = new Image();
+                                tempImg.crossOrigin = 'anonymous';
+                                
+                                await new Promise((resolve, reject) => {
+                                    tempImg.onload = function() {
+                                        
+                                        // Calculate dimensions preserving aspect ratio
+                                        let displayWidth = 0;
+                                        let displayHeight = 0;
+                                        
+                                        // Use the width specified in HTML (e.g. width="250")
+                                        if (widthAttr && !widthAttr.includes('%')) {
+                                            displayWidth = parseInt(widthAttr);
+                                        }
+                                        
+                                        // Use the height if specified
+                                        if (heightAttr && !heightAttr.includes('%')) {
+                                            displayHeight = parseInt(heightAttr);
+                                        }
+                                        
+                                        
+                                        // If only width is specified, calculate height based on aspect ratio
+                                        if (displayWidth > 0 && displayHeight === 0) {
+                                            if (tempImg.naturalWidth > 0) {
+                                                const aspectRatio = tempImg.naturalHeight / tempImg.naturalWidth;
+                                                displayHeight = Math.round(displayWidth * aspectRatio);
+                                            }
+                                        }
+                                        // If only height is specified, calculate width based on aspect ratio
+                                        else if (displayHeight > 0 && displayWidth === 0) {
+                                            if (tempImg.naturalHeight > 0) {
+                                                const aspectRatio = tempImg.naturalWidth / tempImg.naturalHeight;
+                                                displayWidth = Math.round(displayHeight * aspectRatio);
+                                            }
+                                        }
+                                        // If neither specified, use natural dimensions
+                                        else if (displayWidth === 0 && displayHeight === 0) {
+                                            displayWidth = tempImg.naturalWidth || 250;
+                                            displayHeight = tempImg.naturalHeight || 200;
+                                        }
+                                        
+                                        
+                                        canvas.width = displayWidth;
+                                        canvas.height = displayHeight;
+                                        
+                                        // Draw image to canvas
+                                        ctx.drawImage(tempImg, 0, 0, displayWidth, displayHeight);
+                                        
+                                        // Convert to data URL
+                                        const dataUrl = canvas.toDataURL('image/png', 1.0);
+                                        
+                                        // Update original image
+                                        img.src = dataUrl;
+                                        img.width = displayWidth;
+                                        img.height = displayHeight;
+                                        img.setAttribute('width', displayWidth.toString());
+                                        img.setAttribute('height', displayHeight.toString());
+                                        img.style.width = displayWidth + 'px';
+                                        img.style.height = displayHeight + 'px';
+                                        
+                                        resolve();
+                                    };
+                                    
+                                    tempImg.onerror = function() {
+                                        console.warn('Failed to load HTML fence image:', img.src);
+                                        reject(new Error('Image load failed'));
+                                    };
+                                    
+                                    // Set source - resolve relative paths
+                                    if (img.src.startsWith('http') || img.src.startsWith('//')) {
+                                        tempImg.src = img.src;
+                                    } else {
+                                        // Relative path - let browser resolve it
+                                        const absoluteImg = new Image();
+                                        absoluteImg.src = img.src;
+                                        tempImg.src = absoluteImg.src;
+                                    }
+                                });
+                            } catch (err) {
+                                console.warn('Failed to convert HTML fence image:', img.src, err);
+                            }
+                        }
+                        
+                        // Add v:shapes for Word compatibility
+                        img.setAttribute('v:shapes', 'image' + Math.random().toString(36).substr(2, 9));
+                    }
+                    
+                    // Replace container content with processed HTML (whether it had pre or not)
+                    container.innerHTML = tempDiv.innerHTML;
+                } else if (!pre) {
+                    // Container has rendered HTML already, process its images directly
+                    const htmlImages = container.querySelectorAll('img');
+                    for (const img of htmlImages) {
+                        // Same image processing as above
+                        const widthAttr = img.getAttribute('width');
+                        const heightAttr = img.getAttribute('height');
+                        
+                        if (widthAttr) {
+                            img.width = parseInt(widthAttr);
+                            img.style.width = widthAttr.includes('%') ? widthAttr : `${img.width}px`;
+                        }
+                        if (heightAttr) {
+                            img.height = parseInt(heightAttr);
+                            img.style.height = heightAttr.includes('%') ? heightAttr : `${img.height}px`;
+                        }
+                        
+                        if (img.src && !img.src.startsWith('data:')) {
+                            try {
+                                // Use same canvas approach as above
+                                const canvas = document.createElement('canvas');
+                                const ctx = canvas.getContext('2d');
+                                const tempImg = new Image();
+                                tempImg.crossOrigin = 'anonymous';
+                                
+                                await new Promise((resolve, reject) => {
+                                    tempImg.onload = function() {
+                                        // Calculate dimensions preserving aspect ratio
+                                        let displayWidth = img.width || 0;
+                                        let displayHeight = img.height || 0;
+                                        
+                                        // If only width is specified, calculate height based on aspect ratio
+                                        if (displayWidth && !displayHeight) {
+                                            const aspectRatio = tempImg.naturalHeight / tempImg.naturalWidth;
+                                            displayHeight = Math.round(displayWidth * aspectRatio);
+                                        }
+                                        // If only height is specified, calculate width based on aspect ratio
+                                        else if (displayHeight && !displayWidth) {
+                                            const aspectRatio = tempImg.naturalWidth / tempImg.naturalHeight;
+                                            displayWidth = Math.round(displayHeight * aspectRatio);
+                                        }
+                                        // If neither specified, use natural dimensions
+                                        else if (!displayWidth && !displayHeight) {
+                                            displayWidth = tempImg.naturalWidth || 250;
+                                            displayHeight = tempImg.naturalHeight || Math.round(250 * (tempImg.naturalHeight / tempImg.naturalWidth));
+                                        }
+                                        
+                                        canvas.width = displayWidth;
+                                        canvas.height = displayHeight;
+                                        ctx.drawImage(tempImg, 0, 0, displayWidth, displayHeight);
+                                        
+                                        const dataUrl = canvas.toDataURL('image/png', 1.0);
+                                        img.src = dataUrl;
+                                        img.width = displayWidth;
+                                        img.height = displayHeight;
+                                        img.setAttribute('width', displayWidth.toString());
+                                        img.setAttribute('height', displayHeight.toString());
+                                        img.style.width = displayWidth + 'px';
+                                        img.style.height = displayHeight + 'px';
+                                        
+                                        resolve();
+                                    };
+                                    
+                                    tempImg.onerror = function() {
+                                        console.warn('Failed to load HTML fence image:', img.src);
+                                        reject(new Error('Image load failed'));
+                                    };
+                                    
+                                    if (img.src.startsWith('http') || img.src.startsWith('//')) {
+                                        tempImg.src = img.src;
+                                    } else {
+                                        const absoluteImg = new Image();
+                                        absoluteImg.src = img.src;
+                                        tempImg.src = absoluteImg.src;
+                                    }
+                                });
+                            } catch (err) {
+                                console.warn('Failed to convert HTML fence image:', img.src, err);
+                            }
+                        }
+                        
+                        img.setAttribute('v:shapes', 'image' + Math.random().toString(36).substr(2, 9));
+                    }
+                }
+            } catch (err) {
+                console.warn('Failed to process HTML container:', err);
+            }
+        }
+        
+        // 8. Tables are already HTML tables from the built-in renderer
+        // No processing needed
+        
+        // Wrap in proper HTML structure for rich text editors
+        const fragment = clone.innerHTML;
+        const htmlContent = `
+            <!DOCTYPE html>
+            <html xmlns:v="urn:schemas-microsoft-com:vml"
+                  xmlns:o="urn:schemas-microsoft-com:office:office"
+                  xmlns:w="urn:schemas-microsoft-com:office:word">
+              <head>
+                <meta charset="utf-8">
+                <style>
+                  /* Table styling */
+                  table { border-collapse: collapse; width: 100%; margin-bottom: 1em; }
+                  th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
+                  th { background-color: #f0f0f0; font-weight: bold; }
+                  
+                  /* Code block styling */
+                  pre { background-color: #f4f4f4; padding: 1em; border-radius: 4px; overflow-x: auto; }
+                  code { font-family: monospace; background-color: #f4f4f4; padding: 0.2em 0.4em; border-radius: 3px; }
+                  
+                  /* Image handling */
+                  img { display: block; max-width: 100%; height: auto; margin: 0.5em 0; }
+                  
+                  /* Blockquote */
+                  blockquote { border-left: 4px solid #ddd; margin-left: 0; padding-left: 1em; color: #666; }
+                  
+                  /* Math equations centered like squibview */
+                  .math-display { text-align: center; margin: 1em 0; }
+                  .math-display img { display: inline-block; margin: 0 auto; }
+                </style>
+              </head>
+              <body><!--StartFragment-->${fragment}<!--EndFragment--></body>
+            </html>`;
+        
+        // Get plain text version
+        const text = clone.textContent || clone.innerText || '';
+        
+        // Get platform for clipboard strategy (like squibview)
+        const platform = getPlatform();
+        
+        if (platform === 'macos') {
+            // macOS approach (like squibview)
+            try {
+                await navigator.clipboard.write([
+                    new ClipboardItem({
+                        'text/html': new Blob([htmlContent], { type: 'text/html' }),
+                        'text/plain': new Blob([text], { type: 'text/plain' })
+                    })
+                ]);
+                return { success: true, html: htmlContent, text };
+            } catch (modernErr) {
+                console.warn('Modern clipboard API failed, trying Safari fallback:', modernErr);
+                // Safari fallback (selection-based HTML of fragment)
+                if (copyToClipboard(fragment)) {
+                    return { success: true, html: htmlContent, text };
+                }
+                throw new Error('Fallback copy failed');
+            }
+        } else {
+            // Windows/Linux approach (like squibview)
+            const tempDiv = document.createElement('div');
+            tempDiv.style.position = 'fixed';
+            tempDiv.style.left = '-9999px';
+            tempDiv.style.top = '0';
+            // Use fragment for selection-based fallback copy
+            tempDiv.innerHTML = fragment;
+            document.body.appendChild(tempDiv);
+            
+            try {
+                await navigator.clipboard.write([
+                    new ClipboardItem({
+                        'text/html': new Blob([htmlContent], { type: 'text/html' }),
+                        'text/plain': new Blob([text], { type: 'text/plain' })
+                    })
+                ]);
+                return { success: true, html: htmlContent, text };
+            } catch (modernErr) {
+                console.warn('Modern clipboard API failed, trying execCommand fallback:', modernErr);
+                const selection = window.getSelection();
+                const range = document.createRange();
+                range.selectNodeContents(tempDiv);
+                selection.removeAllRanges();
+                selection.addRange(range);
+                
+                const successful = document.execCommand('copy');
+                if (!successful) {
+                    throw new Error('Fallback copy failed');
+                }
+                return { success: true, html: htmlContent, text };
+            } finally {
+                if (tempDiv && tempDiv.parentNode) {
+                    document.body.removeChild(tempDiv);
+                }
+            }
+        }
+        
+    } catch (err) {
+        console.error('Failed to copy rendered content:', err);
+        throw err;
+    }
+}
+
 /**
  * Quikdown Editor - A drop-in markdown editor control
  * @version 1.0.5
@@ -1077,7 +2543,8 @@ if (typeof window !== 'undefined') {
 const DEFAULT_OPTIONS = {
     mode: 'split',          // 'source' | 'preview' | 'split'
     showToolbar: true,
-    showRemoveHR: false,    // Show button to remove horizontal rules (---) 
+    showRemoveHR: false,    // Show button to remove horizontal rules (---)
+    showLazyLinefeeds: false, // Show button to convert lazy linefeeds
     theme: 'auto',          // 'light' | 'dark' | 'auto'
     lazy_linefeeds: false,
     inline_styles: false,   // Use CSS classes (false) or inline styles (true)
@@ -1088,7 +2555,9 @@ const DEFAULT_OPTIONS = {
         mermaid: false
     },
     customFences: {}, // { 'language': (code, lang) => html }
-    enableComplexFences: true // Enable CSV tables, math rendering, SVG, etc.
+    enableComplexFences: true, // Enable CSV tables, math rendering, SVG, etc.
+    showUndoRedo: false,      // Show undo/redo toolbar buttons
+    undoStackSize: 100        // Maximum number of undo states to keep
 };
 
 /**
@@ -1113,6 +2582,11 @@ class QuikdownEditor {
         this._html = '';
         this.currentMode = this.options.mode;
         this.updateTimer = null;
+
+        // Undo/redo state
+        this._undoStack = [];
+        this._redoStack = [];
+        this._isUndoRedo = false;
         
         // Initialize
         this.initPromise = this.init();
@@ -1205,6 +2679,23 @@ class QuikdownEditor {
             toolbar.appendChild(btn);
         });
         
+        // Undo/Redo buttons (if enabled)
+        if (this.options.showUndoRedo) {
+            const undoBtn = document.createElement('button');
+            undoBtn.className = 'qde-btn disabled';
+            undoBtn.dataset.action = 'undo';
+            undoBtn.textContent = 'Undo';
+            undoBtn.title = 'Undo (Ctrl+Z)';
+            toolbar.appendChild(undoBtn);
+
+            const redoBtn = document.createElement('button');
+            redoBtn.className = 'qde-btn disabled';
+            redoBtn.dataset.action = 'redo';
+            redoBtn.textContent = 'Redo';
+            redoBtn.title = 'Redo (Ctrl+Shift+Z / Ctrl+Y)';
+            toolbar.appendChild(redoBtn);
+        }
+
         // Spacer
         const spacer = document.createElement('span');
         spacer.className = 'qde-spacer';
@@ -1213,7 +2704,8 @@ class QuikdownEditor {
         // Copy buttons
         const copyButtons = [
             { action: 'copy-markdown', text: 'Copy MD', title: 'Copy markdown to clipboard' },
-            { action: 'copy-html', text: 'Copy HTML', title: 'Copy HTML to clipboard' }
+            { action: 'copy-html', text: 'Copy HTML', title: 'Copy HTML to clipboard' },
+            { action: 'copy-rendered', text: 'Copy Rendered', title: 'Copy rich text to clipboard' }
         ];
         
         copyButtons.forEach(({ action, text, title }) => {
@@ -1234,6 +2726,16 @@ class QuikdownEditor {
             removeHRBtn.title = 'Remove all horizontal rules (---) from markdown';
             toolbar.appendChild(removeHRBtn);
         }
+
+        // Lazy linefeeds button (if enabled)
+        if (this.options.showLazyLinefeeds) {
+            const lazyLFBtn = document.createElement('button');
+            lazyLFBtn.className = 'qde-btn';
+            lazyLFBtn.dataset.action = 'lazy-linefeeds';
+            lazyLFBtn.textContent = 'Fix Linefeeds';
+            lazyLFBtn.title = 'Convert single newlines to paragraph breaks (one-time transform)';
+            toolbar.appendChild(lazyLFBtn);
+        }
         
         return toolbar;
     }
@@ -1286,6 +2788,11 @@ class QuikdownEditor {
                 color: white;
                 border-color: #0056b3;
             }
+
+            .qde-btn.disabled {
+                opacity: 0.4;
+                pointer-events: none;
+            }
             
             .qde-spacer {
                 flex: 1;
@@ -1570,6 +3077,21 @@ class QuikdownEditor {
                         e.preventDefault();
                         this.setMode('preview');
                         break;
+                    case 'z':
+                    case 'Z':
+                        if (e.shiftKey) {
+                            e.preventDefault();
+                            this.redo();
+                        } else {
+                            e.preventDefault();
+                            this.undo();
+                        }
+                        break;
+                    case 'y':
+                    case 'Y':
+                        e.preventDefault();
+                        this.redo();
+                        break;
                 }
             }
         });
@@ -1599,6 +3121,12 @@ class QuikdownEditor {
      * Update from markdown source
      */
     updateFromMarkdown(markdown) {
+        // Push current state to undo stack before changing (unless this is an undo/redo operation)
+        if (!this._isUndoRedo) {
+            this._pushUndoState(markdown || '');
+        }
+        this._isUndoRedo = false;
+
         this._markdown = markdown || '';
         
         // Show placeholder if empty
@@ -1619,6 +3147,17 @@ class QuikdownEditor {
                 this.previewPanel.innerHTML = this._html;
                 // Make all fence blocks non-editable
                 this.makeFencesNonEditable();
+                
+                // Process all math elements with MathJax if loaded (like squibview)
+                if (window.MathJax && window.MathJax.typesetPromise) {
+                    const mathElements = this.previewPanel.querySelectorAll('.math-display');
+                    if (mathElements.length > 0) {
+                        window.MathJax.typesetPromise(Array.from(mathElements))
+                            .catch(_err => {
+                                console.warn('MathJax batch processing failed:', _err);
+                            });
+                    }
+                }
             }
         }
         
@@ -1640,7 +3179,7 @@ class QuikdownEditor {
         
         this._html = this.previewPanel.innerHTML;
         this._markdown = quikdown_bd.toMarkdown(clonedPanel, {
-            fence_plugin: this.options.fence_plugin
+            fence_plugin: this.createFencePlugin()
         });
         
         // Update source if visible
@@ -1660,7 +3199,6 @@ class QuikdownEditor {
     preprocessSpecialElements(panel) {
         if (!panel) return;
         
-        
         // Restore non-editable complex fences from their data attributes
         const complexFences = panel.querySelectorAll('[contenteditable="false"][data-qd-source]');
         complexFences.forEach(element => {
@@ -1758,7 +3296,6 @@ class QuikdownEditor {
                         return this.renderHTML(code);
                         
                     case 'math':
-                    case 'katex':
                     case 'tex':
                     case 'latex':
                         return this.renderMath(code, lang);
@@ -1772,11 +3309,20 @@ class QuikdownEditor {
                     case 'json5':
                         return this.renderJSON(code, lang);
                         
+                    case 'katex':  // Use MathJax for katex fence blocks (backward compatibility)
+                        return this.renderMath(code, 'katex');
+                        
                     case 'mermaid':
                         if (window.mermaid) {
                             return this.renderMermaid(code);
                         }
                         break;
+                        
+                    case 'geojson':
+                        return this.renderGeoJSON(code);
+                        
+                    case 'stl':
+                        return this.renderSTL(code);
                 }
             }
             
@@ -1791,8 +3337,37 @@ class QuikdownEditor {
             return undefined;
         };
         
-        // Return object format for v1.1.0 API
-        return { render };
+        // Reverse function to extract raw source from rendered HTML
+        const reverse = (element) => {
+            // Get the language from data attribute
+            const lang = element.getAttribute('data-qd-lang') || '';
+            let content = '';
+            
+            // For syntax-highlighted code, extract the raw text
+            if (element.querySelector('code.hljs')) {
+                const code = element.querySelector('code.hljs');
+                content = code.textContent || code.innerText || '';
+            }
+            // For other code blocks, just get the text content
+            else if (element.querySelector('code')) {
+                const codeEl = element.querySelector('code');
+                content = codeEl.textContent || codeEl.innerText || '';
+            }
+            // Fallback to element text
+            else {
+                content = element.textContent || element.innerText || '';
+            }
+            
+            // Return in the format quikdown_bd expects
+            return {
+                content: content,
+                lang: lang,
+                fence: '```'
+            };
+        };
+        
+        // Return object format for v1.1.0 API with both render and reverse
+        return { render, reverse };
     }
     
     /**
@@ -1816,7 +3391,7 @@ class QuikdownEditor {
             // Remove event handlers
             const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT);
             let node;
-            while (node = walker.nextNode()) {
+            while ((node = walker.nextNode())) {
                 for (let i = node.attributes.length - 1; i >= 0; i--) {
                     const attr = node.attributes[i];
                     if (attr.name.startsWith('on') || attr.value.includes('javascript:')) {
@@ -1873,94 +3448,17 @@ class QuikdownEditor {
         this.lazyLoadLibrary(
             'DOMPurify',
             () => window.DOMPurify,
-            'https://unpkg.com/dompurify/dist/purify.min.js'
-        ).then(loaded => {
-            if (loaded) {
-                const element = document.getElementById(id);
-                if (element) {
-                    const clean = DOMPurify.sanitize(code);
-                    element.innerHTML = clean;
-                    // Update attributes after loading
-                    element.setAttribute('data-qd-source', code);
-                    element.setAttribute('data-qd-fence', '```');
-                    element.setAttribute('data-qd-lang', 'html');
-                }
-            }
-        });
-        
-        // Return placeholder with bidirectional attributes - non-editable
-        const placeholder = document.createElement('div');
-        placeholder.id = id;
-        placeholder.className = 'qde-html-container';
-        placeholder.contentEditable = 'false';
-        placeholder.setAttribute('data-qd-fence', '```');
-        placeholder.setAttribute('data-qd-lang', 'html');
-        placeholder.setAttribute('data-qd-source', code);
-        const pre = document.createElement('pre');
-        pre.textContent = code;
-        placeholder.appendChild(pre);
-        
-        return placeholder.outerHTML;
-    }
-    
-    /**
-     * Render math with KaTeX if available
-     */
-    renderMath(code, lang) {
-        const id = `math-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-        
-        // If KaTeX is loaded, use it
-        if (window.katex) {
-            try {
-                const rendered = katex.renderToString(code, {
-                    displayMode: true,
-                    throwOnError: false
-                });
-                
-                // Create container programmatically
-                const container = document.createElement('div');
-                container.className = 'qde-math-container';
-                container.contentEditable = 'false';
-                container.setAttribute('data-qd-fence', '```');
-                container.setAttribute('data-qd-lang', lang);
-                container.setAttribute('data-qd-source', code);
-                container.innerHTML = rendered;
-                
-                return container.outerHTML;
-            } catch (err) {
-                const errorContainer = document.createElement('pre');
-                errorContainer.className = 'qde-error';
-                errorContainer.contentEditable = 'false';
-                errorContainer.setAttribute('data-qd-fence', '```');
-                errorContainer.setAttribute('data-qd-lang', lang);
-                errorContainer.setAttribute('data-qd-source', code);
-                errorContainer.textContent = `Math error: ${err.message}`;
-                return errorContainer.outerHTML;
-            }
-        }
-        
-        // Try to lazy load KaTeX
-        this.lazyLoadLibrary(
-            'KaTeX',
-            () => window.katex,
-            'https://unpkg.com/katex/dist/katex.min.js',
-            'https://unpkg.com/katex/dist/katex.min.css'
+            'https://unpkg.com/dompurify/dist/purify.min.js'
         ).then(loaded => {
             if (loaded) {
                 const element = document.getElementById(id);
                 if (element) {
-                    try {
-                        katex.render(code, element, {
-                            displayMode: true,
-                            throwOnError: false
-                        });
-                        // Update attributes after rendering
-                        element.setAttribute('data-qd-source', code);
-                        element.setAttribute('data-qd-fence', '```');
-                        element.setAttribute('data-qd-lang', lang);
-                    } catch (err) {
-                        element.innerHTML = `<pre class="qde-error">Math error: ${this.escapeHtml(err.message)}</pre>`;
-                    }
+                    const clean = DOMPurify.sanitize(code);
+                    element.innerHTML = clean;
+                    // Update attributes after loading
+                    element.setAttribute('data-qd-source', code);
+                    element.setAttribute('data-qd-fence', '```');
+                    element.setAttribute('data-qd-lang', 'html');
                 }
             }
         });
@@ -1968,10 +3466,10 @@ class QuikdownEditor {
         // Return placeholder with bidirectional attributes - non-editable
         const placeholder = document.createElement('div');
         placeholder.id = id;
-        placeholder.className = 'qde-math-container';
+        placeholder.className = 'qde-html-container';
         placeholder.contentEditable = 'false';
         placeholder.setAttribute('data-qd-fence', '```');
-        placeholder.setAttribute('data-qd-lang', lang);
+        placeholder.setAttribute('data-qd-lang', 'html');
         placeholder.setAttribute('data-qd-source', code);
         const pre = document.createElement('pre');
         pre.textContent = code;
@@ -1980,6 +3478,91 @@ class QuikdownEditor {
         return placeholder.outerHTML;
     }
     
+    /**
+     * Render math with MathJax (SVG output for better copy support)
+     */
+    renderMath(code, _lang) {
+        const id = `math-${Math.random().toString(36).substring(2, 15)}`;
+        
+        // Create container exactly like squibview
+        const container = document.createElement('div');
+        container.id = id;
+        container.className = 'math-display';
+        container.contentEditable = 'false';
+        container.setAttribute('data-source-type', 'math');
+        
+        // Format content for MathJax (display mode with $$) - exactly like squibview
+        const singleLineContent = code.replace(/\r?\n/g, ' ').replace(/\s+/g, ' ').trim();
+        container.textContent = `$$${singleLineContent}$$`;
+        
+        // Add centering style
+        container.style.textAlign = 'center';
+        container.style.margin = '1em 0';
+        
+        
+        // Ensure MathJax will be loaded (if not already)
+        if (!window.MathJax || !window.MathJax.typesetPromise) {
+            this.ensureMathJaxLoaded();
+        }
+        
+        // MathJax will be processed in batch after preview update
+        return container.outerHTML;
+    }
+    
+    /**
+     * Ensures MathJax is loaded (but doesn't process elements)
+     */
+    ensureMathJaxLoaded() {
+        if (typeof window.MathJax === 'undefined' && !window.mathJaxLoading) {
+            window.mathJaxLoading = true;
+            
+            // Configure MathJax before loading
+            if (!window.MathJax) {
+                window.MathJax = {
+                    loader: { load: ['input/tex', 'output/svg'] },
+                    tex: { 
+                        packages: { '[+]': ['ams'] },
+                        inlineMath: [['$', '$'], ['\\(', '\\)']],
+                        displayMath: [['$$', '$$'], ['\\[', '\\]']],
+                        processEscapes: true,
+                        processEnvironments: true
+                    },
+                    options: {
+                        renderActions: { addMenu: [] },
+                        ignoreHtmlClass: 'tex2jax_ignore',
+                        processHtmlClass: 'tex2jax_process'
+                    },
+                    svg: {
+                        fontCache: 'none'  // Important: self-contained SVGs for copy
+                    },
+                    startup: { typeset: false }
+                };
+            }
+            
+            const script = document.createElement('script');
+            script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-svg.js';
+            script.async = true;
+            script.onload = () => {
+                window.mathJaxLoading = false;
+                
+                // Process any existing math elements (like squibview)
+                if (window.MathJax && window.MathJax.typesetPromise) {
+                    const mathElements = document.querySelectorAll('.math-display');
+                    if (mathElements.length > 0) {
+                        window.MathJax.typesetPromise(Array.from(mathElements)).catch(err => {
+                            console.warn('Initial MathJax processing failed:', err);
+                        });
+                    }
+                }
+            };
+            script.onerror = () => {
+                window.mathJaxLoading = false;
+                console.error('Failed to load MathJax');
+            };
+            document.head.appendChild(script);
+        }
+    }
+    
     /**
      * Render CSV/PSV/TSV as HTML table
      */
@@ -2021,11 +3604,11 @@ class QuikdownEditor {
             
             html += '</table>';
             return html;
-        } catch (err) {
+        } catch (_err) {
             return `<pre data-qd-fence="\`\`\`" data-qd-lang="${lang}" data-qd-source="${escapedCode}">${escapedCode}</pre>`;
         }
     }
-    
+
     /**
      * Parse CSV line handling quoted values
      */
@@ -2069,13 +3652,13 @@ class QuikdownEditor {
                 try {
                     const data = JSON.parse(code);
                     toHighlight = JSON.stringify(data, null, 2);
-                } catch (e) {
+                } catch (_e) {
                     // Use original if not valid JSON
                 }
                 
                 const highlighted = hljs.highlight(toHighlight, { language: 'json' }).value;
                 return `<pre class="qde-json" data-qd-fence="\`\`\`" data-qd-lang="${lang}"><code class="hljs language-json">${highlighted}</code></pre>`;
-            } catch (e) {
+            } catch (_e) {
                 // Fall through if highlighting fails
             }
         }
@@ -2084,6 +3667,237 @@ class QuikdownEditor {
         return `<pre class="qde-json" data-qd-fence="\`\`\`" data-qd-lang="${lang}">${this.escapeHtml(code)}</pre>`;
     }
     
+    /**
+     * Render GeoJSON map
+     */
+    renderGeoJSON(code) {
+        // Generate unique map ID (following SquibView pattern)
+        const mapId = `map-${Math.random().toString(36).substr(2, 15)}`;
+        
+        // Function to render the map
+        const renderMap = () => {
+            const container = document.getElementById(mapId + '-container');
+            if (!container || !window.L) return;
+            
+            try {
+                const data = JSON.parse(code);
+                
+                // Clear container and set deterministic size for rasterization
+                const mapDiv = document.createElement('div');
+                mapDiv.id = mapId;
+                mapDiv.style.cssText = 'width: 100%; height: 300px;';
+                container.innerHTML = '';
+                container.appendChild(mapDiv);
+                
+                // Create the map
+                const map = L.map(mapId);
+                
+                // Store back-reference for capture (per Gem's guide)
+                container._map = map; // Avoid window pollution
+                
+                // Add tile layer with CORS support
+                const tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                    attribution: '',
+                    crossOrigin: 'anonymous' // Important for canvas capture
+                });
+                tileLayer.addTo(map);
+                
+                // Add GeoJSON layer
+                const geoJsonLayer = L.geoJSON(data);
+                geoJsonLayer.addTo(map);
+                
+                // Fit bounds if valid
+                if (geoJsonLayer.getBounds().isValid()) {
+                    map.fitBounds(geoJsonLayer.getBounds());
+                } else {
+                    map.setView([0, 0], 2);
+                }
+                
+                // Store references for copy-time capture
+                container._tileLayer = tileLayer;
+                container._geoJsonLayer = geoJsonLayer;
+                
+                // Optional: Wait for tiles to load for better capture
+                tileLayer.on('load', () => {
+                    container.setAttribute('data-tiles-loaded', 'true');
+                });
+                
+            } catch (err) {
+                container.innerHTML = `<pre class="qde-error">GeoJSON error: ${this.escapeHtml(err.message)}</pre>`;
+            }
+        };
+        
+        // Check if Leaflet is already loaded
+        if (window.L) {
+            // Render after DOM update
+            setTimeout(renderMap, 0);
+        } else {
+            // Lazy load Leaflet only if not already loading
+            if (!window._qde_leaflet_loading) {
+                window._qde_leaflet_loading = this.lazyLoadLibrary(
+                    'Leaflet',
+                    () => window.L,
+                    'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js',
+                    'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css'
+                ).catch(err => {
+                    console.warn('Failed to load Leaflet:', err);
+                    // Clear the loading promise so it can be retried
+                    window._qde_leaflet_loading = null;
+                    return false;
+                });
+            }
+            
+            window._qde_leaflet_loading.then(loaded => {
+                if (loaded) {
+                    renderMap();
+                } else {
+                    const element = document.getElementById(mapId + '-container');
+                    if (element) {
+                        element.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">Failed to load map library</div>';
+                    }
+                }
+            }).catch(() => {
+                // Error already handled above
+            });
+        }
+        
+        // Return container following SquibView pattern
+        const container = document.createElement('div');
+        container.className = 'geojson-container';
+        container.id = mapId + '-container';
+        container.style.cssText = 'width: 100%; height: 300px; border: 1px solid #ddd; border-radius: 4px; margin: 0.5em 0; background: #f0f0f0;';
+        container.contentEditable = 'false';
+        
+        // Preserve source for copy-time identification (per Gem's guide)
+        container.setAttribute('data-source-type', 'geojson');
+        container.setAttribute('data-original-source', this.escapeHtml(code));
+        
+        // For bidirectional editing
+        container.setAttribute('data-qd-fence', '```');
+        container.setAttribute('data-qd-lang', 'geojson');
+        container.setAttribute('data-qd-source', code);
+        
+        container.textContent = 'Loading map...';
+        
+        return container.outerHTML;
+    }
+    
+    /**
+     * Render STL 3D model
+     */
+    renderSTL(code) {
+        const id = `qde-stl-viewer-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        
+        // Function to render the 3D model
+        const render3D = () => {
+            const element = document.getElementById(id);
+            if (!element) return;
+            
+            // Check if Three.js is available
+            if (typeof window.THREE === 'undefined') {
+                element.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">Three.js library not loaded. Add &lt;script src="https://unpkg.com/three@0.147.0/build/three.min.js"&gt;&lt;/script&gt; to your HTML.</div>';
+                return;
+            }
+            
+            try {
+                const THREE = window.THREE;
+                
+                // Create scene
+                const scene = new THREE.Scene();
+                scene.background = new THREE.Color(0xf0f0f0);
+                
+                // Create camera
+                const camera = new THREE.PerspectiveCamera(75, element.clientWidth / 400, 0.1, 1000);
+                
+                // Create renderer
+                const renderer = new THREE.WebGLRenderer({ antialias: true });
+                renderer.setSize(element.clientWidth, 400);
+                element.innerHTML = '';
+                element.appendChild(renderer.domElement);
+                
+                // Store Three.js references for copy functionality (like squibview)
+                element._threeScene = scene;
+                element._threeCamera = camera;
+                element._threeRenderer = renderer;
+                
+                // Parse STL data (ASCII format)
+                const geometry = this.parseSTL(code);
+                const material = new THREE.MeshLambertMaterial({ color: 0x0066ff });
+                const mesh = new THREE.Mesh(geometry, material);
+                scene.add(mesh);
+                
+                // Add lighting
+                const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
+                scene.add(ambientLight);
+                
+                const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+                directionalLight.position.set(1, 1, 1).normalize();
+                scene.add(directionalLight);
+                
+                // Position camera based on object bounds
+                const box = new THREE.Box3().setFromObject(mesh);
+                const center = box.getCenter(new THREE.Vector3());
+                const size = box.getSize(new THREE.Vector3());
+                const maxDim = Math.max(size.x, size.y, size.z);
+                
+                camera.position.set(center.x + maxDim, center.y + maxDim, center.z + maxDim);
+                camera.lookAt(center);
+                
+                // Animate
+                const animate = () => {
+                    requestAnimationFrame(animate);
+                    mesh.rotation.y += 0.01;
+                    renderer.render(scene, camera);
+                };
+                animate();
+            } catch (err) {
+                console.error('STL rendering error:', err);
+                element.innerHTML = `<pre class="qde-error">STL error: ${this.escapeHtml(err.message)}</pre>`;
+            }
+        };
+        
+        // Render after DOM update
+        setTimeout(render3D, 0);
+        
+        // Return placeholder with data-stl-id for copy functionality
+        return `<div id="${id}" class="qde-stl-container" data-stl-id="${id}" data-qd-fence="\`\`\`" data-qd-lang="stl" data-qd-source="${this.escapeHtml(code)}" contenteditable="false" style="height: 400px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">Loading 3D model...</div>`;
+    }
+    
+    /**
+     * Parse ASCII STL format
+     * @param {string} stlData - The STL file content
+     * @returns {THREE.BufferGeometry} - The parsed geometry
+     */
+    parseSTL(stlData) {
+        const THREE = window.THREE;
+        const geometry = new THREE.BufferGeometry();
+        const vertices = [];
+        const normals = [];
+        
+        const lines = stlData.split('\n');
+        let currentNormal = null;
+        
+        for (let line of lines) {
+            line = line.trim();
+            
+            if (line.startsWith('facet normal')) {
+                const parts = line.split(/\s+/);
+                currentNormal = [parseFloat(parts[2]), parseFloat(parts[3]), parseFloat(parts[4])];
+            } else if (line.startsWith('vertex')) {
+                const parts = line.split(/\s+/);
+                vertices.push(parseFloat(parts[1]), parseFloat(parts[2]), parseFloat(parts[3]));
+                if (currentNormal) {
+                    normals.push(currentNormal[0], currentNormal[1], currentNormal[2]);
+                }
+            }
+        }
+        
+        geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
+        geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
+        
+        return geometry;
+    }
+    
     /**
      * Render Mermaid diagram
      */
@@ -2224,24 +4038,46 @@ class QuikdownEditor {
     }
     
     /**
-     * Apply theme
+     * Apply the current theme (based on this.options.theme)
      */
     applyTheme() {
         const theme = this.options.theme;
-        
+
+        // Tear down any previous auto-mode listener so we don't stack them
+        if (this._autoThemeListener) {
+            window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', this._autoThemeListener);
+            this._autoThemeListener = null;
+        }
+
         if (theme === 'auto') {
-            // Check system preference
-            const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-            this.container.classList.toggle('qde-dark', isDark);
-            
-            // Listen for changes
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+            const mq = window.matchMedia('(prefers-color-scheme: dark)');
+            this.container.classList.toggle('qde-dark', mq.matches);
+            this._autoThemeListener = (e) => {
                 this.container.classList.toggle('qde-dark', e.matches);
-            });
+            };
+            mq.addEventListener('change', this._autoThemeListener);
         } else {
             this.container.classList.toggle('qde-dark', theme === 'dark');
         }
     }
+
+    /**
+     * Set theme at runtime. Accepts 'light', 'dark', or 'auto'.
+     * @param {'light'|'dark'|'auto'} theme
+     */
+    setTheme(theme) {
+        if (!['light', 'dark', 'auto'].includes(theme)) return;
+        this.options.theme = theme;
+        this.applyTheme();
+    }
+
+    /**
+     * Get the current theme option (as configured, not resolved).
+     * @returns {'light'|'dark'|'auto'}
+     */
+    getTheme() {
+        return this.options.theme;
+    }
     
     /**
      * Set lazy linefeeds option
@@ -2251,7 +4087,7 @@ class QuikdownEditor {
         this.options.lazy_linefeeds = enabled;
         // Re-render if we have content
         if (this._markdown) {
-            this.updateFromSource();
+            this.updateFromMarkdown(this._markdown);
         }
     }
     
@@ -2311,6 +4147,105 @@ class QuikdownEditor {
         }
     }
     
+    // --- Undo / Redo ---
+
+    /**
+     * Push current markdown state onto the undo stack (called before a change).
+     * Only pushes if the new state differs from the current state.
+     * @param {string} newMarkdown - the incoming markdown (used to detect no-op)
+     * @private
+     */
+    _pushUndoState(newMarkdown) {
+        // Don't push if the content hasn't actually changed
+        if (newMarkdown === this._markdown) return;
+
+        this._undoStack.push(this._markdown);
+
+        // Enforce max stack size
+        const max = this.options.undoStackSize || 100;
+        if (this._undoStack.length > max) {
+            this._undoStack.splice(0, this._undoStack.length - max);
+        }
+
+        // Any new edit clears the redo stack
+        this._redoStack = [];
+        this._updateUndoButtons();
+    }
+
+    /**
+     * Undo the last change. Restores the previous markdown state.
+     */
+    undo() {
+        if (!this.canUndo()) return;
+        // Save current state to redo stack
+        this._redoStack.push(this._markdown);
+        const previous = this._undoStack.pop();
+        this._isUndoRedo = true;
+        // Update state directly (setMarkdown is async; keep it synchronous here)
+        this._markdown = previous;
+        if (this.sourceTextarea) {
+            this.sourceTextarea.value = previous;
+        }
+        this.updateFromMarkdown(previous);
+        this._updateUndoButtons();
+    }
+
+    /**
+     * Redo the last undone change.
+     */
+    redo() {
+        if (!this.canRedo()) return;
+        // Save current state to undo stack
+        this._undoStack.push(this._markdown);
+        const next = this._redoStack.pop();
+        this._isUndoRedo = true;
+        this._markdown = next;
+        if (this.sourceTextarea) {
+            this.sourceTextarea.value = next;
+        }
+        this.updateFromMarkdown(next);
+        this._updateUndoButtons();
+    }
+
+    /**
+     * @returns {boolean} true if undo is possible
+     */
+    canUndo() {
+        return this._undoStack.length > 0;
+    }
+
+    /**
+     * @returns {boolean} true if redo is possible
+     */
+    canRedo() {
+        return this._redoStack.length > 0;
+    }
+
+    /**
+     * Clear the undo and redo history.
+     */
+    clearHistory() {
+        this._undoStack = [];
+        this._redoStack = [];
+        this._updateUndoButtons();
+    }
+
+    /**
+     * Update the disabled state of the undo/redo toolbar buttons.
+     * @private
+     */
+    _updateUndoButtons() {
+        if (!this.toolbar) return;
+        const undoBtn = this.toolbar.querySelector('[data-action="undo"]');
+        const redoBtn = this.toolbar.querySelector('[data-action="redo"]');
+        if (undoBtn) {
+            undoBtn.classList.toggle('disabled', !this.canUndo());
+        }
+        if (redoBtn) {
+            redoBtn.classList.toggle('disabled', !this.canRedo());
+        }
+    }
+
     /**
      * Handle toolbar actions
      */
@@ -2322,9 +4257,21 @@ class QuikdownEditor {
             case 'copy-html':
                 this.copy('html');
                 break;
+            case 'copy-rendered':
+                this.copyRendered();
+                break;
             case 'remove-hr':
                 this.removeHR();
                 break;
+            case 'lazy-linefeeds':
+                this.convertLazyLinefeeds();
+                break;
+            case 'undo':
+                this.undo();
+                break;
+            case 'redo':
+                this.redo();
+                break;
         }
     }
     
@@ -2412,24 +4359,13 @@ class QuikdownEditor {
     }
     
     /**
-     * Remove all horizontal rules (---) from markdown
+     * Remove all horizontal rules (---) from markdown source.
+     * Preserves content inside fences (``` or ~~~) and table separator rows.
      */
     async removeHR() {
-        // Remove standalone HR lines (3 or more dashes/underscores/asterisks)
-        // Matches: ---, ___, ***, ----, etc. with optional spaces
-        const cleaned = this._markdown
-            .split('\n')
-            .filter(line => {
-                // Keep lines that aren't just HR patterns
-                const trimmed = line.trim();
-                // Match HR patterns: 3+ of -, _, or * with optional spaces between
-                return !(/^[-_*](\s*[-_*]){2,}\s*$/.test(trimmed));
-            })
-            .join('\n');
-        
-        // Update the markdown
+        const cleaned = QuikdownEditor.removeHRFromMarkdown(this._markdown);
         await this.setMarkdown(cleaned);
-        
+
         // Visual feedback if toolbar button exists
         const btn = this.toolbar?.querySelector('[data-action="remove-hr"]');
         if (btn) {
@@ -2440,6 +4376,224 @@ class QuikdownEditor {
             }, 1500);
         }
     }
+
+    /**
+     * Static: remove horizontal rules from markdown string.
+     * Safe for fences, tables, and all markdown constructs.
+     * Can be used headless without an editor instance.
+     * @param {string} markdown - source markdown
+     * @returns {string} markdown with standalone HRs removed
+     */
+    static removeHRFromMarkdown(markdown) {
+        const lines = (markdown || '').split('\n');
+        const result = [];
+        let inFence = false;
+        let fenceChar = null;  // '`' or '~'
+        let fenceLen = 0;      // length of opening fence marker
+
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i];
+            const trimmed = line.trim();
+
+            // Track fence open/close (``` or ~~~, 3+ chars)
+            const fenceMatch = trimmed.match(/^(`{3,}|~{3,})/);
+            if (fenceMatch) {
+                const matchChar = fenceMatch[1][0];
+                const matchLen = fenceMatch[1].length;
+                if (!inFence) {
+                    inFence = true;
+                    fenceChar = matchChar;
+                    fenceLen = matchLen;
+                    result.push(line);
+                    continue;
+                } else if (matchChar === fenceChar && matchLen >= fenceLen && /^(`{3,}|~{3,})\s*$/.test(trimmed)) {
+                    // Closing fence: same char, at least as many chars, no trailing content
+                    inFence = false;
+                    fenceChar = null;
+                    fenceLen = 0;
+                    result.push(line);
+                    continue;
+                }
+            }
+
+            // Inside a fence — keep everything
+            if (inFence) {
+                result.push(line);
+                continue;
+            }
+
+            // Detect table row/separator with pipes — always keep
+            if (/^\|.*\|$/.test(trimmed) || (/^[-| :]+$/.test(trimmed) && trimmed.includes('|'))) {
+                result.push(line);
+                continue;
+            }
+
+            // Check if this line is a standalone HR
+            const isHR = /^[-_*](\s*[-_*]){2,}\s*$/.test(trimmed);
+            if (isHR) {
+                // Table separator heuristic: immediately adjacent lines (no blank
+                // lines between) that look like table rows protect this HR-like line
+                const prevLine = i > 0 ? lines[i - 1].trim() : '';
+                const nextLine = i < lines.length - 1 ? lines[i + 1].trim() : '';
+                if (_looksLikeTableRow(prevLine) || _looksLikeTableRow(nextLine)) {
+                    result.push(line);
+                    continue;
+                }
+                // It's a real HR — skip it
+                continue;
+            }
+
+            result.push(line);
+        }
+
+        return result.join('\n');
+    }
+
+    /**
+     * Convert lazy linefeeds in markdown source.
+     * Replaces single newlines with double newlines (adds real line breaks)
+     * except inside fences, tables, and other block-level constructs.
+     * Idempotent: calling multiple times produces the same result.
+     * Can be used as a toolbar action or headless via the static method.
+     */
+    async convertLazyLinefeeds() {
+        const converted = QuikdownEditor.convertLazyLinefeeds(this._markdown);
+        await this.setMarkdown(converted);
+
+        // Visual feedback if toolbar button exists
+        const btn = this.toolbar?.querySelector('[data-action="lazy-linefeeds"]');
+        if (btn) {
+            const originalText = btn.textContent;
+            btn.textContent = 'Converted!';
+            setTimeout(() => {
+                btn.textContent = originalText;
+            }, 1500);
+        }
+    }
+
+    /**
+     * Static: convert lazy linefeeds in markdown source.
+     * Turns single \n between non-blank lines into \n\n so each line becomes
+     * its own paragraph / hard break. Idempotent — already-doubled newlines
+     * are not doubled again. Fences, tables, lists, blockquotes, headings,
+     * and HTML blocks are left untouched.
+     * @param {string} markdown - source markdown
+     * @returns {string} markdown with lazy linefeeds resolved
+     */
+    static convertLazyLinefeeds(markdown) {
+        const lines = (markdown || '').split('\n');
+        const result = [];
+        let inFence = false;
+        let fenceChar = null;
+        let fenceLen = 0;
+        let inHTMLBlock = false;
+
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i];
+            const trimmed = line.trim();
+
+            // Track fence open/close
+            const fenceMatch = trimmed.match(/^(`{3,}|~{3,})/);
+            if (fenceMatch) {
+                const matchChar = fenceMatch[1][0];
+                const matchLen = fenceMatch[1].length;
+                if (!inFence) {
+                    inFence = true;
+                    fenceChar = matchChar;
+                    fenceLen = matchLen;
+                    result.push(line);
+                    continue;
+                } else if (matchChar === fenceChar && matchLen >= fenceLen && /^(`{3,}|~{3,})\s*$/.test(trimmed)) {
+                    inFence = false;
+                    fenceChar = null;
+                    fenceLen = 0;
+                    result.push(line);
+                    continue;
+                }
+            }
+
+            // Inside fence — pass through
+            if (inFence) {
+                result.push(line);
+                continue;
+            }
+
+            // Track HTML blocks (lines starting with < and ending with >)
+            if (/^<[a-zA-Z]/.test(trimmed)) inHTMLBlock = true;
+            if (inHTMLBlock) {
+                result.push(line);
+                if (/>$/.test(trimmed) || trimmed === '') inHTMLBlock = false;
+                continue;
+            }
+
+            // Always pass through blank lines, but never add extras
+            if (trimmed === '') {
+                // Avoid doubling: don't add blank line if the last result line is already blank
+                if (result.length === 0 || result[result.length - 1].trim() !== '') {
+                    result.push(line);
+                }
+                continue;
+            }
+
+            // Skip conversion for block-level constructs
+            const isBlockElement = (
+                /^#{1,6}\s/.test(trimmed) ||           // headings
+                /^[-_*](\s*[-_*]){2,}\s*$/.test(trimmed) || // horizontal rules
+                /^(\d+\.|-|\*|\+)\s/.test(trimmed) ||  // list items
+                /^>/.test(trimmed) ||                   // blockquotes
+                /^\|/.test(trimmed)                     // table rows
+            );
+
+            if (isBlockElement) {
+                result.push(line);
+                continue;
+            }
+
+            // For plain paragraph text: if previous result line is non-blank
+            // plain text, insert a blank line between them (making the single
+            // newline into a paragraph break). This is the lazy→strict conversion.
+            if (result.length > 0) {
+                const prevLine = result[result.length - 1];
+                const prevTrimmed = prevLine.trim();
+                // Only insert blank line if prev is non-blank, non-block text
+                if (prevTrimmed !== '' &&
+                    !/^#{1,6}\s/.test(prevTrimmed) &&
+                    !/^[-_*](\s*[-_*]){2,}\s*$/.test(prevTrimmed) &&
+                    !/^(\d+\.|-|\*|\+)\s/.test(prevTrimmed) &&
+                    !/^>/.test(prevTrimmed) &&
+                    !/^\|/.test(prevTrimmed) &&
+                    !/^(`{3,}|~{3,})/.test(prevTrimmed)) {
+                    result.push('');
+                }
+            }
+
+            result.push(line);
+        }
+
+        return result.join('\n');
+    }
+    
+    /**
+     * Copy rendered content as rich text
+     */
+    async copyRendered() {
+        try {
+            const result = await getRenderedContent(this.previewPanel);
+            if (result.success) {
+                // Visual feedback
+                const btn = this.toolbar?.querySelector('[data-action="copy-rendered"]');
+                if (btn) {
+                    const originalText = btn.textContent;
+                    btn.textContent = 'Copied!';
+                    setTimeout(() => {
+                        btn.textContent = originalText;
+                    }, 1500);
+                }
+            }
+        } catch (err) {
+            console.error('Failed to copy rendered content:', err);
+        }
+    }
     
     /**
      * Destroy the editor
@@ -2461,6 +4615,13 @@ class QuikdownEditor {
     }
 }
 
+// --- Internal helpers for removeHR fence/table awareness ---
+
+/** Heuristic: does this line look like a markdown table row? */
+function _looksLikeTableRow(line) {
+    return line.includes('|');
+}
+
 // Export for CommonJS (needed for bundled ESM to work with Jest)
 if (typeof module !== 'undefined' && module.exports) {
     module.exports = QuikdownEditor;