dom-to-pptx 1.0.9 → 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);
 }
 
 /**
@@ -324,7 +397,6 @@ function isIconElement(node) {
 
       if (hasContent(before) || hasContent(after)) return true;
     }
-    console.log('Icon element:', node, cls);
   }
 
   return false;

package/src/utils.js

@@ -573,3 +573,102 @@ export function generateBlurredSVG(w, h, color, radius, blurPx) {
     padding: padding,
   };
 }
+
+// src/utils.js
+
+// ... (keep all existing exports) ...
+
+/**
+ * Traverses the target DOM and collects all unique font-family names used.
+ */
+export function getUsedFontFamilies(root) {
+  const families = new Set();
+  
+  function scan(node) {
+    if (node.nodeType === 1) { // Element
+      const style = window.getComputedStyle(node);
+      const fontList = style.fontFamily.split(',');
+      // The first font in the stack is the primary one
+      const primary = fontList[0].trim().replace(/['"]/g, '');
+      if (primary) families.add(primary);
+    }
+    for (const child of node.childNodes) {
+      scan(child);
+    }
+  }
+
+  // Handle array of roots or single root
+  const elements = Array.isArray(root) ? root : [root];
+  elements.forEach(el => {
+    const node = typeof el === 'string' ? document.querySelector(el) : el;
+    if (node) scan(node);
+  });
+
+  return families;
+}
+
+/**
+ * Scans document.styleSheets to find @font-face URLs for the requested families.
+ * Returns an array of { name, url } objects.
+ */
+export async function getAutoDetectedFonts(usedFamilies) {
+  const foundFonts = [];
+  const processedUrls = new Set();
+
+  // Helper to extract clean URL from CSS src string
+  const extractUrl = (srcStr) => {
+    // Look for url("...") or url('...') or url(...)
+    // Prioritize woff, ttf, otf. Avoid woff2 if possible as handling is harder, 
+    // but if it's the only one, take it (convert logic handles it best effort).
+    const matches = srcStr.match(/url\((['"]?)(.*?)\1\)/g);
+    if (!matches) return null;
+
+    // Filter for preferred formats
+    let chosenUrl = null;
+    for (const match of matches) {
+        const urlRaw = match.replace(/url\((['"]?)(.*?)\1\)/, '$2');
+        // Skip data URIs for now (unless you want to support base64 embedding)
+        if (urlRaw.startsWith('data:')) continue; 
+        
+        if (urlRaw.includes('.ttf') || urlRaw.includes('.otf') || urlRaw.includes('.woff')) {
+            chosenUrl = urlRaw;
+            break; // Found a good one
+        }
+        // Fallback
+        if (!chosenUrl) chosenUrl = urlRaw;
+    }
+    return chosenUrl;
+  };
+
+  for (const sheet of Array.from(document.styleSheets)) {
+    try {
+      // Accessing cssRules on cross-origin sheets (like Google Fonts) might fail 
+      // if CORS headers aren't set. We wrap in try/catch.
+      const rules = sheet.cssRules || sheet.rules;
+      if (!rules) continue;
+
+      for (const rule of Array.from(rules)) {
+        if (rule.constructor.name === 'CSSFontFaceRule' || rule.type === 5) {
+          const familyName = rule.style.getPropertyValue('font-family').replace(/['"]/g, '').trim();
+          
+          if (usedFamilies.has(familyName)) {
+            const src = rule.style.getPropertyValue('src');
+            const url = extractUrl(src);
+            
+            if (url && !processedUrls.has(url)) {
+              processedUrls.add(url);
+              foundFonts.push({ name: familyName, url: url });
+            }
+          }
+        }
+      }
+    } catch (e) {
+      // SecurityError is common for external stylesheets (CORS). 
+      // We cannot scan those automatically via CSSOM.
+      console.warn("error:", e);
+      console.warn('Cannot scan stylesheet for fonts (CORS restriction):', sheet.href);
+    }
+  }
+
+  return foundFonts;
+}