dom-to-pptx 1.0.7 → 1.0.9

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.9] - 2025-12-28
+
+### Fixed
+
+- **Linear Gradients not applied properly**: Seperated the logic to handle tailwind class and normal css.
+- **Font Awesome icon library cannot be converted**: Updated logic to handle Icons inside lists and span elements. fixes [#3].
+
+## [1.0.8] - 2025-12-12 (Hot-Patch)
+
+### Fixed
+
+- **Fixed SVGs not getting converted**: Seperated the logic to handle SVGs and Web Components/Icons.
+
+
 ## [1.0.7] - 2025-12-12
 
 ### Fixed

package/README.md

@@ -1,6 +1,6 @@
 # dom-to-pptx
 
-**The High-Fidelity HTML to PowerPoint Converter (v1.0.7).**
+**The High-Fidelity HTML to PowerPoint Converter (v1.0.8).**
 
 Most HTML-to-PPTX libraries fail when faced with modern web design. They break on gradients, misalign text, ignore rounded corners, or simply take a screenshot (which isn't editable).
 

package/dist/dom-to-pptx.bundle.js

@@ -17752,6 +17752,7 @@
 
   /**
    * Determines if a given DOM node is primarily a text container.
+   * Updated to correctly reject Icon elements so they are rendered as images.
    */
   function isTextContainer(node) {
     const hasText = node.textContent.trim().length > 0;
@@ -17760,28 +17761,46 @@
     const children = Array.from(node.children);
     if (children.length === 0) return true;
 
-    // Check if children are purely inline text formatting or visual shapes
     const isSafeInline = (el) => {
-      // 1. Reject Web Components / Icons / Images
+      // 1. Reject Web Components / Custom Elements
       if (el.tagName.includes('-')) return false;
+      // 2. Reject Explicit Images/SVGs
       if (el.tagName === 'IMG' || el.tagName === 'SVG') return false;
 
+      // 3. Reject Class-based Icons (FontAwesome, Material, Bootstrap, etc.)
+      // If an <i> or <span> has icon classes, it is a visual object, not text.
+      if (el.tagName === 'I' || el.tagName === 'SPAN') {
+        const cls = el.getAttribute('class') || '';
+        if (
+          cls.includes('fa-') ||
+          cls.includes('fas') ||
+          cls.includes('far') ||
+          cls.includes('fab') ||
+          cls.includes('material-icons') ||
+          cls.includes('bi-') ||
+          cls.includes('icon')
+        ) {
+          return false;
+        }
+      }
+
       const style = window.getComputedStyle(el);
       const display = style.display;
 
-      // 2. Initial check: Must be a standard inline tag OR display:inline
-      const isInlineTag = ['SPAN', 'B', 'STRONG', 'EM', 'I', 'A', 'SMALL', 'MARK'].includes(el.tagName);
+      // 4. Standard Inline Tag Check
+      const isInlineTag = ['SPAN', 'B', 'STRONG', 'EM', 'I', 'A', 'SMALL', 'MARK'].includes(
+        el.tagName
+      );
       const isInlineDisplay = display.includes('inline');
 
       if (!isInlineTag && !isInlineDisplay) return false;
 
-      // 3. CRITICAL FIX: Check for Structural Styling
-      // PPTX Text Runs (parts of a text line) CANNOT have backgrounds, borders, or padding.
-      // If a child element has these, the parent is NOT a simple text container; 
-      // it is a layout container composed of styled blocks.
+      // 5. Structural Styling Check
+      // If a child has a background or border, it's a layout block, not a simple text span.
       const bgColor = parseColor(style.backgroundColor);
       const hasVisibleBg = bgColor.hex && bgColor.opacity > 0;
-      const hasBorder = parseFloat(style.borderWidth) > 0 && parseColor(style.borderColor).opacity > 0;
+      const hasBorder =
+        parseFloat(style.borderWidth) > 0 && parseColor(style.borderColor).opacity > 0;
 
       if (hasVisibleBg || hasBorder) {
         return false;
@@ -17808,6 +17827,69 @@
     return Math.round(Math.atan2(b, a) * (180 / Math.PI));
   }
 
+  function svgToPng(node) {
+    return new Promise((resolve) => {
+      const clone = node.cloneNode(true);
+      const rect = node.getBoundingClientRect();
+      const width = rect.width || 300;
+      const height = rect.height || 150;
+
+      function inlineStyles(source, target) {
+        const computed = window.getComputedStyle(source);
+        const properties = [
+          'fill',
+          'stroke',
+          'stroke-width',
+          'stroke-linecap',
+          'stroke-linejoin',
+          'opacity',
+          'font-family',
+          'font-size',
+          'font-weight',
+        ];
+
+        if (computed.fill === 'none') target.setAttribute('fill', 'none');
+        else if (computed.fill) target.style.fill = computed.fill;
+
+        if (computed.stroke === 'none') target.setAttribute('stroke', 'none');
+        else if (computed.stroke) target.style.stroke = computed.stroke;
+
+        properties.forEach((prop) => {
+          if (prop !== 'fill' && prop !== 'stroke') {
+            const val = computed[prop];
+            if (val && val !== 'auto') target.style[prop] = val;
+          }
+        });
+
+        for (let i = 0; i < source.children.length; i++) {
+          if (target.children[i]) inlineStyles(source.children[i], target.children[i]);
+        }
+      }
+
+      inlineStyles(node, clone);
+      clone.setAttribute('width', width);
+      clone.setAttribute('height', height);
+      clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+
+      const xml = new XMLSerializer().serializeToString(clone);
+      const svgUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(xml)}`;
+      const img = new Image();
+      img.crossOrigin = 'Anonymous';
+      img.onload = () => {
+        const canvas = document.createElement('canvas');
+        const scale = 3;
+        canvas.width = width * scale;
+        canvas.height = height * scale;
+        const ctx = canvas.getContext('2d');
+        ctx.scale(scale, scale);
+        ctx.drawImage(img, 0, 0, width, height);
+        resolve(canvas.toDataURL('image/png'));
+      };
+      img.onerror = () => resolve(null);
+      img.src = svgUrl;
+    });
+  }
+
   function getVisibleShadow(shadowStr, scale) {
     if (!shadowStr || shadowStr === 'none') return null;
     const shadows = shadowStr.split(/,(?![^()]*\))/);
@@ -17839,57 +17921,119 @@
     return null;
   }
 
+  /**
+   * Generates an SVG image for gradients, supporting degrees and keywords.
+   */
   function generateGradientSVG(w, h, bgString, radius, border) {
     try {
       const match = bgString.match(/linear-gradient\((.*)\)/);
       if (!match) return null;
       const content = match[1];
+
+      // Split by comma, ignoring commas inside parentheses (e.g. rgba())
       const parts = content.split(/,(?![^()]*\))/).map((p) => p.trim());
+      if (parts.length < 2) return null;
 
       let x1 = '0%',
         y1 = '0%',
         x2 = '0%',
         y2 = '100%';
-      let stopsStartIdx = 0;
-      if (parts[0].includes('to right')) {
-        x1 = '0%';
-        x2 = '100%';
-        y2 = '0%';
-        stopsStartIdx = 1;
-      } else if (parts[0].includes('to left')) {
-        x1 = '100%';
-        x2 = '0%';
-        y2 = '0%';
-        stopsStartIdx = 1;
-      } else if (parts[0].includes('to top')) {
-        y1 = '100%';
-        y2 = '0%';
-        stopsStartIdx = 1;
-      } else if (parts[0].includes('to bottom')) {
-        y1 = '0%';
-        y2 = '100%';
-        stopsStartIdx = 1;
+      let stopsStartIndex = 0;
+      const firstPart = parts[0].toLowerCase();
+
+      // 1. Check for Keywords (to right, etc.)
+      if (firstPart.startsWith('to ')) {
+        stopsStartIndex = 1;
+        const direction = firstPart.replace('to ', '').trim();
+        switch (direction) {
+          case 'top':
+            y1 = '100%';
+            y2 = '0%';
+            break;
+          case 'bottom':
+            y1 = '0%';
+            y2 = '100%';
+            break;
+          case 'left':
+            x1 = '100%';
+            x2 = '0%';
+            break;
+          case 'right':
+            x2 = '100%';
+            break;
+          case 'top right':
+            x1 = '0%';
+            y1 = '100%';
+            x2 = '100%';
+            y2 = '0%';
+            break;
+          case 'top left':
+            x1 = '100%';
+            y1 = '100%';
+            x2 = '0%';
+            y2 = '0%';
+            break;
+          case 'bottom right':
+            x2 = '100%';
+            y2 = '100%';
+            break;
+          case 'bottom left':
+            x1 = '100%';
+            y2 = '100%';
+            break;
+        }
+      }
+      // 2. Check for Degrees (45deg, 90deg, etc.)
+      else if (firstPart.match(/^-?[\d.]+(deg|rad|turn|grad)$/)) {
+        stopsStartIndex = 1;
+        const val = parseFloat(firstPart);
+        // CSS 0deg is Top (North), 90deg is Right (East), 180deg is Bottom (South)
+        // We convert this to SVG coordinates on a unit square (0-100%).
+        // Formula: Map angle to perimeter coordinates.
+        if (!isNaN(val)) {
+          const deg = firstPart.includes('rad') ? val * (180 / Math.PI) : val;
+          const cssRad = ((deg - 90) * Math.PI) / 180; // Correct CSS angle offset
+
+          // Calculate standard vector for rectangle center (50, 50)
+          const scale = 50; // Distance from center to edge (approx)
+          const cos = Math.cos(cssRad); // Y component (reversed in SVG)
+          const sin = Math.sin(cssRad); // X component
+
+          // Invert Y for SVG coordinate system
+          x1 = (50 - sin * scale).toFixed(1) + '%';
+          y1 = (50 + cos * scale).toFixed(1) + '%';
+          x2 = (50 + sin * scale).toFixed(1) + '%';
+          y2 = (50 - cos * scale).toFixed(1) + '%';
+        }
       }
 
+      // 3. Process Color Stops
       let stopsXML = '';
-      const stopParts = parts.slice(stopsStartIdx);
+      const stopParts = parts.slice(stopsStartIndex);
+
       stopParts.forEach((part, idx) => {
+        // Parse "Color Position" (e.g., "red 50%")
+        // Regex looks for optional space + number + unit at the end of the string
         let color = part;
         let offset = Math.round((idx / (stopParts.length - 1)) * 100) + '%';
-        const posMatch = part.match(/(.*?)\s+(\d+(\.\d+)?%?)$/);
+
+        const posMatch = part.match(/^(.*?)\s+(-?[\d.]+(?:%|px)?)$/);
         if (posMatch) {
           color = posMatch[1];
           offset = posMatch[2];
         }
+
+        // Handle RGBA/RGB for SVG compatibility
         let opacity = 1;
         if (color.includes('rgba')) {
-          const rgba = color.match(/[\d.]+/g);
-          if (rgba && rgba.length > 3) {
-            opacity = rgba[3];
-            color = `rgb(${rgba[0]},${rgba[1]},${rgba[2]})`;
+          const rgbaMatch = color.match(/[\d.]+/g);
+          if (rgbaMatch && rgbaMatch.length >= 4) {
+            opacity = rgbaMatch[3];
+            color = `rgb(${rgbaMatch[0]},${rgbaMatch[1]},${rgbaMatch[2]})`;
           }
         }
-        stopsXML += `<stop offset="${offset}" stop-color="${color}" stop-opacity="${opacity}"/>`;
+
+        stopsXML += `<stop offset="${offset}" stop-color="${color.trim()}" stop-opacity="${opacity}"/>`;
       });
 
       let strokeAttr = '';
@@ -17898,12 +18042,18 @@
       }
 
       const svg = `
-          <svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
-              <defs><linearGradient id="grad" x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}">${stopsXML}</linearGradient></defs>
-              <rect x="0" y="0" width="${w}" height="${h}" rx="${radius}" ry="${radius}" fill="url(#grad)" ${strokeAttr} />
-          </svg>`;
+      <svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
+          <defs>
+            <linearGradient id="grad" x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}">
+              ${stopsXML}
+            </linearGradient>
+          </defs>
+          <rect x="0" y="0" width="${w}" height="${h}" rx="${radius}" ry="${radius}" fill="url(#grad)" ${strokeAttr} />
+      </svg>`;
+
       return 'data:image/svg+xml;base64,' + btoa(svg);
-    } catch {
+    } catch (e) {
+      console.warn('Gradient generation failed:', e);
       return null;
     }
   }
@@ -18178,29 +18328,69 @@
    * Optimized html2canvas wrapper
    * Now strictly captures the node itself, not the root.
    */
+  /**
+   * Optimized html2canvas wrapper
+   * Includes fix for cropped icons by adjusting styles in the cloned document.
+   */
   async function elementToCanvasImage(node, widthPx, heightPx) {
     return new Promise((resolve) => {
+      // 1. Assign a temp ID to locate the node inside the cloned document
+      const originalId = node.id;
+      const tempId = 'pptx-capture-' + Math.random().toString(36).substr(2, 9);
+      node.id = tempId;
+
       const width = Math.max(Math.ceil(widthPx), 1);
       const height = Math.max(Math.ceil(heightPx), 1);
       const style = window.getComputedStyle(node);
 
-      // Optimized: Capture ONLY the specific node
       html2canvas(node, {
         backgroundColor: null,
         logging: false,
-        scale: 2, // Slight quality boost
+        scale: 3, // Higher scale for sharper icons
+        useCORS: true, // critical for external fonts/images
+        onclone: (clonedDoc) => {
+          const clonedNode = clonedDoc.getElementById(tempId);
+          if (clonedNode) {
+            // --- FIX: PREVENT ICON CLIPPING ---
+            // 1. Force overflow visible so glyphs bleeding out aren't cut
+            clonedNode.style.overflow = 'visible';
+
+            // 2. Adjust alignment for Icons to prevent baseline clipping
+            // (Applies to <i>, <span>, or standard icon classes)
+            const tag = clonedNode.tagName;
+            if (tag === 'I' || tag === 'SPAN' || clonedNode.className.includes('fa-')) {
+              // Flex center helps align the glyph exactly in the middle of the box
+              // preventing top/bottom cropping due to line-height mismatches.
+              clonedNode.style.display = 'inline-flex';
+              clonedNode.style.justifyContent = 'center';
+              clonedNode.style.alignItems = 'center';
+
+              // Remove margins that might offset the capture
+              clonedNode.style.margin = '0';
+
+              // Ensure the font fits
+              clonedNode.style.lineHeight = '1';
+              clonedNode.style.verticalAlign = 'middle';
+            }
+          }
+        },
       })
         .then((canvas) => {
+          // Restore the original ID
+          if (originalId) node.id = originalId;
+          else node.removeAttribute('id');
+
           const destCanvas = document.createElement('canvas');
           destCanvas.width = width;
           destCanvas.height = height;
           const ctx = destCanvas.getContext('2d');
 
-          // Draw the captured canvas into our sized canvas
-          // html2canvas might return a larger canvas if scale > 1, so we fit it
+          // Draw captured canvas.
+          // We simply draw it to fill the box. Since we centered it in 'onclone',
+          // the glyph should now be visible within the bounds.
           ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, width, height);
 
-          // Apply border radius clipping
+          // --- Border Radius Clipping (Existing Logic) ---
           let tl = parseFloat(style.borderTopLeftRadius) || 0;
           let tr = parseFloat(style.borderTopRightRadius) || 0;
           let br = parseFloat(style.borderBottomRightRadius) || 0;
@@ -18239,12 +18429,62 @@
           resolve(destCanvas.toDataURL('image/png'));
         })
         .catch((e) => {
+          if (originalId) node.id = originalId;
+          else node.removeAttribute('id');
           console.warn('Canvas capture failed for node', node, e);
           resolve(null);
         });
     });
   }
 
+  /**
+   * Helper to identify elements that should be rendered as icons (Images).
+   * Detects Custom Elements AND generic tags (<i>, <span>) with icon classes/pseudo-elements.
+   */
+  function isIconElement(node) {
+    // 1. Custom Elements (hyphenated tags) or Explicit Library Tags
+    const tag = node.tagName.toUpperCase();
+    if (
+      tag.includes('-') ||
+      [
+        'MATERIAL-ICON',
+        'ICONIFY-ICON',
+        'REMIX-ICON',
+        'ION-ICON',
+        'EVA-ICON',
+        'BOX-ICON',
+        'FA-ICON',
+      ].includes(tag)
+    ) {
+      return true;
+    }
+
+    // 2. Class-based Icons (FontAwesome, Bootstrap, Material symbols) on <i> or <span>
+    if (tag === 'I' || tag === 'SPAN') {
+      const cls = node.getAttribute('class') || '';
+      if (
+        typeof cls === 'string' &&
+        (cls.includes('fa-') ||
+          cls.includes('fas') ||
+          cls.includes('far') ||
+          cls.includes('fab') ||
+          cls.includes('bi-') ||
+          cls.includes('material-icons') ||
+          cls.includes('icon'))
+      ) {
+        // Double-check: Must have pseudo-element content to be a CSS icon
+        const before = window.getComputedStyle(node, '::before').content;
+        const after = window.getComputedStyle(node, '::after').content;
+        const hasContent = (c) => c && c !== 'none' && c !== 'normal' && c !== '""';
+
+        if (hasContent(before) || hasContent(after)) return true;
+      }
+      console.log('Icon element:', node, cls);
+    }
+
+    return false;
+  }
+
   /**
    * Replaces createRenderItem.
    * Returns { items: [], job: () => Promise, stopRecursion: boolean }
@@ -18318,23 +18558,18 @@
 
     const items = [];
 
-    // --- ASYNC JOB: SVGs / Icons ---
-    if (
-      node.nodeName.toUpperCase() === 'SVG' ||
-      node.tagName.includes('-') ||
-      node.tagName === 'ION-ICON'
-    ) {
+    // --- ASYNC JOB: SVG Tags ---
+    if (node.nodeName.toUpperCase() === 'SVG') {
       const item = {
         type: 'image',
         zIndex,
         domOrder,
-        options: { x, y, w, h, rotate: rotation, data: null }, // Data null initially
+        options: { data: null, x, y, w, h, rotate: rotation },
       };
 
-      // Create Job
       const job = async () => {
-        const pngData = await elementToCanvasImage(node, widthPx, heightPx);
-        if (pngData) item.options.data = pngData;
+        const processed = await svgToPng(node);
+        if (processed) item.options.data = processed;
         else item.skip = true;
       };
 
@@ -18384,6 +18619,22 @@
       return { items: [item], job, stopRecursion: true };
     }
 
+    // --- ASYNC JOB: Icons and Other Elements ---
+    if (isIconElement(node)) {
+      const item = {
+        type: 'image',
+        zIndex,
+        domOrder,
+        options: { x, y, w, h, rotate: rotation, data: null },
+      };
+      const job = async () => {
+        const pngData = await elementToCanvasImage(node, widthPx, heightPx);
+        if (pngData) item.options.data = pngData;
+        else item.skip = true;
+      };
+      return { items: [item], job, stopRecursion: true };
+    }
+
     // Radii logic
     const borderRadiusValue = parseFloat(style.borderRadius) || 0;
     const borderBottomLeftRadius = parseFloat(style.borderBottomLeftRadius) || 0;