dom-to-pptx 1.0.8 → 1.1.0

package/src/font-embedder.js

@@ -0,0 +1,159 @@
+// src/font-embedder.js
+import opentype from 'opentype.js';
+import { fontToEot } from './font-utils.js';
+
+const START_RID = 201314;
+
+export class PPTXEmbedFonts {
+  constructor() {
+    this.zip = null;
+    this.rId = START_RID;
+    this.fonts = []; // { name, data, rid }
+  }
+
+  async loadZip(zip) {
+    this.zip = zip;
+  }
+
+  /**
+   * Reads the font name from the buffer using opentype.js
+   */
+  getFontInfo(fontBuffer) {
+    try {
+      const font = opentype.parse(fontBuffer);
+      const names = font.names;
+      // Prefer English name, fallback to others
+      const fontFamily = names.fontFamily.en || Object.values(names.fontFamily)[0];
+      return { name: fontFamily };
+    } catch (e) {
+      console.warn('Could not parse font info', e);
+      return { name: 'Unknown' };
+    }
+  }
+
+  async addFont(fontFace, fontBuffer, type) {
+    // Convert to EOT/fntdata for PPTX compatibility
+    const eotData = await fontToEot(type, fontBuffer);
+    const rid = this.rId++;
+    this.fonts.push({ name: fontFace, data: eotData, rid });
+  }
+
+  async updateFiles() {
+    await this.updateContentTypesXML();
+    await this.updatePresentationXML();
+    await this.updateRelsPresentationXML();
+    this.updateFontFiles();
+  }
+
+  async generateBlob() {
+    if (!this.zip) throw new Error('Zip not loaded');
+    return this.zip.generateAsync({
+      type: 'blob',
+      compression: 'DEFLATE',
+      compressionOptions: { level: 6 },
+    });
+  }
+
+  // --- XML Manipulation Methods ---
+
+  async updateContentTypesXML() {
+    const file = this.zip.file('[Content_Types].xml');
+    if (!file) throw new Error('[Content_Types].xml not found');
+
+    const xmlStr = await file.async('string');
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(xmlStr, 'text/xml');
+    
+    const types = doc.getElementsByTagName('Types')[0];
+    const defaults = Array.from(doc.getElementsByTagName('Default'));
+    
+    const hasFntData = defaults.some(el => el.getAttribute('Extension') === 'fntdata');
+
+    if (!hasFntData) {
+      const el = doc.createElement('Default');
+      el.setAttribute('Extension', 'fntdata');
+      el.setAttribute('ContentType', 'application/x-fontdata');
+      types.insertBefore(el, types.firstChild);
+    }
+
+    this.zip.file('[Content_Types].xml', new XMLSerializer().serializeToString(doc));
+  }
+
+  async updatePresentationXML() {
+    const file = this.zip.file('ppt/presentation.xml');
+    if (!file) throw new Error('ppt/presentation.xml not found');
+
+    const xmlStr = await file.async('string');
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(xmlStr, 'text/xml');
+    const presentation = doc.getElementsByTagName('p:presentation')[0];
+
+    // Enable embedding flags
+    presentation.setAttribute('saveSubsetFonts', 'true');
+    presentation.setAttribute('embedTrueTypeFonts', 'true');
+
+    // Find or create embeddedFontLst
+    let embeddedFontLst = presentation.getElementsByTagName('p:embeddedFontLst')[0];
+
+    if (!embeddedFontLst) {
+      embeddedFontLst = doc.createElement('p:embeddedFontLst');
+      
+      // Insert before defaultTextStyle or at end
+      const defaultTextStyle = presentation.getElementsByTagName('p:defaultTextStyle')[0];
+      if (defaultTextStyle) {
+        presentation.insertBefore(embeddedFontLst, defaultTextStyle);
+      } else {
+        presentation.appendChild(embeddedFontLst);
+      }
+    }
+
+    // Add font references
+    this.fonts.forEach(font => {
+      // Check if already exists
+      const existing = Array.from(embeddedFontLst.getElementsByTagName('p:font'))
+        .find(node => node.getAttribute('typeface') === font.name);
+
+      if (!existing) {
+        const embedFont = doc.createElement('p:embeddedFont');
+        
+        const fontNode = doc.createElement('p:font');
+        fontNode.setAttribute('typeface', font.name);
+        embedFont.appendChild(fontNode);
+
+        const regular = doc.createElement('p:regular');
+        regular.setAttribute('r:id', `rId${font.rid}`);
+        embedFont.appendChild(regular);
+
+        embeddedFontLst.appendChild(embedFont);
+      }
+    });
+
+    this.zip.file('ppt/presentation.xml', new XMLSerializer().serializeToString(doc));
+  }
+
+  async updateRelsPresentationXML() {
+    const file = this.zip.file('ppt/_rels/presentation.xml.rels');
+    if (!file) throw new Error('presentation.xml.rels not found');
+
+    const xmlStr = await file.async('string');
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(xmlStr, 'text/xml');
+    const relationships = doc.getElementsByTagName('Relationships')[0];
+
+    this.fonts.forEach(font => {
+      const rel = doc.createElement('Relationship');
+      rel.setAttribute('Id', `rId${font.rid}`);
+      rel.setAttribute('Target', `fonts/${font.rid}.fntdata`);
+      rel.setAttribute('Type', 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/font');
+      relationships.appendChild(rel);
+    });
+
+    this.zip.file('ppt/_rels/presentation.xml.rels', new XMLSerializer().serializeToString(doc));
+  }
+
+  updateFontFiles() {
+    this.fonts.forEach(font => {
+      this.zip.file(`ppt/fonts/${font.rid}.fntdata`, font.data);
+    });
+  }
+}

package/src/font-utils.js

@@ -0,0 +1,35 @@
+// src/font-utils.js
+import { Font } from 'fonteditor-core';
+import pako from 'pako';
+
+/**
+ * Converts various font formats to EOT (Embedded OpenType), 
+ * which is highly compatible with PowerPoint embedding.
+ * @param {string} type - 'ttf', 'woff', or 'otf'
+ * @param {ArrayBuffer} fontBuffer - The raw font data
+ */
+export async function fontToEot(type, fontBuffer) {
+  const options = {
+    type,
+    hinting: true,
+    // inflate is required for WOFF decoding
+    inflate: type === 'woff' ? pako.inflate : undefined,
+  };
+
+  const font = Font.create(fontBuffer, options);
+
+  const eotBuffer = font.write({
+    type: 'eot',
+    toBuffer: true,
+  });
+
+  if (eotBuffer instanceof ArrayBuffer) {
+    return eotBuffer;
+  }
+
+  // Ensure we return an ArrayBuffer
+  return eotBuffer.buffer.slice(
+    eotBuffer.byteOffset,
+    eotBuffer.byteOffset + eotBuffer.byteLength
+  );
+}

package/src/index.js

@@ -1,6 +1,8 @@
 // src/index.js
 import * as PptxGenJSImport from 'pptxgenjs';
 import html2canvas from 'html2canvas';
+import { PPTXEmbedFonts } from './font-embedder.js';
+import JSZip from 'jszip';
 
 // Normalize import
 const PptxGenJS = PptxGenJSImport?.default ?? PptxGenJSImport;
@@ -20,6 +22,8 @@ import {
   generateCompositeBorderSVG,
   isClippedByParent,
   generateCustomShapeSVG,
+  getUsedFontFamilies,
+  getAutoDetectedFonts,
 } from './utils.js';
 import { getProcessedImage } from './image-processor.js';
 
@@ -27,9 +31,12 @@ const PPI = 96;
 const PX_TO_INCH = 1 / PPI;
 
 /**
- * Main export function. Accepts single element or an array.
- * @param {HTMLElement | string | Array<HTMLElement | string>} target - The root element(s) to convert.
- * @param {Object} options - { fileName: string }
+ * Main export function.
+ * @param {HTMLElement | string | Array<HTMLElement | string>} target
+ * @param {Object} options
+ * @param {string} [options.fileName]
+ * @param {Array<{name: string, url: string}>} [options.fonts] - Explicit fonts
+ * @param {boolean} [options.autoEmbedFonts=true] - Attempt to auto-detect and embed used fonts
  */
 export async function exportToPptx(target, options = {}) {
   const resolvePptxConstructor = (pkg) => {
@@ -59,8 +66,74 @@ export async function exportToPptx(target, options = {}) {
     await processSlide(root, slide, pptx);
   }
 
+    // 3. Font Embedding Logic
+  let finalBlob;
+  let fontsToEmbed = options.fonts || [];
+
+  if (options.autoEmbedFonts) {
+    // A. Scan DOM for used font families
+    const usedFamilies = getUsedFontFamilies(elements);
+    
+    // B. Scan CSS for URLs matches
+    const detectedFonts = await getAutoDetectedFonts(usedFamilies);
+    
+    // C. Merge (Avoid duplicates)
+    const explicitNames = new Set(fontsToEmbed.map(f => f.name));
+    for (const autoFont of detectedFonts) {
+        if (!explicitNames.has(autoFont.name)) {
+            fontsToEmbed.push(autoFont);
+        }
+    }
+    
+    if (detectedFonts.length > 0) {
+        console.log('Auto-detected fonts:', detectedFonts.map(f => f.name));
+    }
+  }
+
+  if (fontsToEmbed.length > 0) {
+    // Generate initial PPTX
+    const initialBlob = await pptx.write({ outputType: 'blob' });
+    
+    // Load into Embedder
+    const zip = await JSZip.loadAsync(initialBlob);
+    const embedder = new PPTXEmbedFonts();
+    await embedder.loadZip(zip);
+
+    // Fetch and Embed
+    for (const fontCfg of fontsToEmbed) {
+      try {
+        const response = await fetch(fontCfg.url);
+        if (!response.ok) throw new Error(`Failed to fetch ${fontCfg.url}`);
+        const buffer = await response.arrayBuffer();
+        
+        // Infer type
+        const ext = fontCfg.url.split('.').pop().split(/[?#]/)[0].toLowerCase();
+        let type = 'ttf';
+        if (['woff', 'otf'].includes(ext)) type = ext;
+
+        await embedder.addFont(fontCfg.name, buffer, type);
+      } catch (e) {
+        console.warn(`Failed to embed font: ${fontCfg.name} (${fontCfg.url})`, e);
+      }
+    }
+
+    await embedder.updateFiles();
+    finalBlob = await embedder.generateBlob();
+  } else {
+    // No fonts to embed
+    finalBlob = await pptx.write({ outputType: 'blob' });
+  }
+
+  // 4. Download
   const fileName = options.fileName || 'export.pptx';
-  pptx.writeFile({ fileName });
+  const url = URL.createObjectURL(finalBlob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = fileName;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
 }
 
 /**
@@ -173,29 +246,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 +347,61 @@ 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;
+    }
+  }
+
+  return false;
+}
+
 /**
  * Replaces createRenderItem.
  * Returns { items: [], job: () => Promise, stopRecursion: boolean }
@@ -375,30 +537,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 };
   }