dom-to-pptx 1.0.8 → 1.0.9

package/dist/dom-to-pptx.mjs

@@ -8055,6 +8055,7 @@ function getTextStyle(style, scale) {
 
 /**
  * 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;
@@ -8063,28 +8064,46 @@ function isTextContainer(node) {
   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;
@@ -8205,57 +8224,119 @@ function getVisibleShadow(shadowStr, scale) {
   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 = '';
@@ -8264,12 +8345,18 @@ function generateGradientSVG(w, h, bgString, radius, border) {
     }
 
     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;
   }
 }
@@ -8544,29 +8631,69 @@ async function processSlide(root, slide, pptx) {
  * 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;
@@ -8605,12 +8732,62 @@ async function elementToCanvasImage(node, widthPx, heightPx) {
         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 }
@@ -8746,30 +8923,18 @@ function prepareRenderItem(node, config, domOrder, pptx, effectiveZIndex, comput
   }
 
   // --- ASYNC JOB: Icons and Other Elements ---
-  if (
-    node.tagName.toUpperCase() === 'MATERIAL-ICON' ||
-    node.tagName.toUpperCase() === 'ICONIFY-ICON' ||
-    node.tagName.toUpperCase() === 'REMIX-ICON' ||
-    node.tagName.toUpperCase() === 'ION-ICON' ||
-    node.tagName.toUpperCase() === 'EVA-ICON' ||
-    node.tagName.toUpperCase() === 'BOX-ICON' ||
-    node.tagName.toUpperCase() === 'FA-ICON' ||
-    node.tagName.includes('-')
-  ) {
+  if (isIconElement(node)) {
     const item = {
       type: 'image',
       zIndex,
       domOrder,
-      options: { x, y, w, h, rotate: rotation, data: null }, // Data null initially
+      options: { x, y, w, h, rotate: rotation, data: null },
     };
-
-    // Create Job
     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 };
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dom-to-pptx",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "A client-side library that converts any HTML element into a fully editable PowerPoint slide. **dom-to-pptx** transforms DOM structures into pixel-accurate `.pptx` content, preserving gradients, shadows, rounded images, and responsive layouts. It translates CSS Flexbox/Grid, linear-gradients, box-shadows, and typography into native PowerPoint shapes, enabling precise, design-faithful slide generation directly from the browser.",
   "main": "dist/dom-to-pptx.cjs",
   "module": "dist/dom-to-pptx.mjs",

package/src/index.js

@@ -173,29 +173,69 @@ async function processSlide(root, slide, pptx) {
  * 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;
@@ -234,12 +274,62 @@ async function elementToCanvasImage(node, widthPx, heightPx) {
         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 }
@@ -375,30 +465,18 @@ function prepareRenderItem(node, config, domOrder, pptx, effectiveZIndex, comput
   }
 
   // --- ASYNC JOB: Icons and Other Elements ---
-  if (
-    node.tagName.toUpperCase() === 'MATERIAL-ICON' ||
-    node.tagName.toUpperCase() === 'ICONIFY-ICON' ||
-    node.tagName.toUpperCase() === 'REMIX-ICON' ||
-    node.tagName.toUpperCase() === 'ION-ICON' ||
-    node.tagName.toUpperCase() === 'EVA-ICON' ||
-    node.tagName.toUpperCase() === 'BOX-ICON' ||
-    node.tagName.toUpperCase() === 'FA-ICON' ||
-    node.tagName.includes('-')
-  ) {
+  if (isIconElement(node)) {
     const item = {
       type: 'image',
       zIndex,
       domOrder,
-      options: { x, y, w, h, rotate: rotation, data: null }, // Data null initially
+      options: { x, y, w, h, rotate: rotation, data: null },
     };
-
-    // Create Job
     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 };
   }