quikdown 1.1.0 → 1.1.1

package/dist/quikdown_edit.umd.js

@@ -1,6 +1,6 @@
 /**
  * Quikdown Editor - Drop-in Markdown Parser
- * @version 1.1.0
+ * @version 1.1.1
  * @license BSD-2-Clause
  * @copyright DeftIO 2025
  */
@@ -24,7 +24,7 @@
      */
 
     // Version will be injected at build time  
-    const quikdownVersion = '1.1.0';
+    const quikdownVersion = '1.1.1';
 
     // Constants for reuse
     const CLASS_PREFIX = 'quikdown-';
@@ -1070,6 +1070,1472 @@
         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
+                                
+                                let scaledWidth = width * scaleFactor;
+                                let 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
@@ -1217,7 +2683,8 @@
             // 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 }) => {
@@ -1623,6 +3090,24 @@
                     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) {
+                            mathElements.forEach(el => {
+                            });
+                            window.MathJax.typesetPromise(Array.from(mathElements))
+                                .then(() => {
+                                    mathElements.forEach(el => {
+                                        el.querySelector('mjx-container');
+                                    });
+                                })
+                                .catch(err => {
+                                    console.warn('MathJax batch processing failed:', err);
+                                });
+                        }
+                    }
                 }
             }
             
@@ -1644,7 +3129,7 @@
             
             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
@@ -1664,7 +3149,6 @@
         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 => {
@@ -1762,7 +3246,6 @@
                             return this.renderHTML(code);
                             
                         case 'math':
-                        case 'katex':
                         case 'tex':
                         case 'latex':
                             return this.renderMath(code, lang);
@@ -1776,11 +3259,20 @@
                         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);
                     }
                 }
                 
@@ -1795,8 +3287,37 @@
                 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 };
         }
         
         /**
@@ -1908,80 +3429,88 @@
         }
         
         /**
-         * Render math with KaTeX if available
+         * Render math with MathJax (SVG output for better copy support)
          */
         renderMath(code, lang) {
-            const id = `math-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+            const id = `math-${Math.random().toString(36).substring(2, 15)}`;
             
-            // 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;
-                }
+            // 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();
             }
             
-            // 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'
-            ).then(loaded => {
-                if (loaded) {
-                    const element = document.getElementById(id);
-                    if (element) {
-                        try {
-                            katex.render(code, element, {
-                                displayMode: true,
-                                throwOnError: false
+            // 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);
                             });
-                            // 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>`;
                         }
                     }
-                }
-            });
-            
-            // Return placeholder with bidirectional attributes - non-editable
-            const placeholder = document.createElement('div');
-            placeholder.id = id;
-            placeholder.className = 'qde-math-container';
-            placeholder.contentEditable = 'false';
-            placeholder.setAttribute('data-qd-fence', '```');
-            placeholder.setAttribute('data-qd-lang', lang);
-            placeholder.setAttribute('data-qd-source', code);
-            const pre = document.createElement('pre');
-            pre.textContent = code;
-            placeholder.appendChild(pre);
-            
-            return placeholder.outerHTML;
+                };
+                script.onerror = () => {
+                    window.mathJaxLoading = false;
+                    console.error('Failed to load MathJax');
+                };
+                document.head.appendChild(script);
+            }
         }
         
         /**
@@ -2088,6 +3617,237 @@
             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(id);
+                        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
          */
@@ -2255,7 +4015,7 @@
             this.options.lazy_linefeeds = enabled;
             // Re-render if we have content
             if (this._markdown) {
-                this.updateFromSource();
+                this.updateFromMarkdown(this._markdown);
             }
         }
         
@@ -2326,6 +4086,9 @@
                 case 'copy-html':
                     this.copy('html');
                     break;
+                case 'copy-rendered':
+                    this.copyRendered();
+                    break;
                 case 'remove-hr':
                     this.removeHR();
                     break;
@@ -2445,6 +4208,28 @@
             }
         }
         
+        /**
+         * 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
          */