dom-to-pptx 1.1.0 → 1.1.1

package/package.json

@@ -1,83 +1,83 @@
-{
-  "name": "dom-to-pptx",
-  "version": "1.1.0",
-  "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",
-  "browser": "dist/dom-to-pptx.bundle.js",
-  "exports": {
-    ".": {
-      "import": "./dist/dom-to-pptx.mjs",
-      "require": "./dist/dom-to-pptx.cjs",
-      "default": "./dist/dom-to-pptx.cjs"
-    }
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "npx rollup -c",
-    "lint": "eslint .",
-    "format": "prettier --write ."
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/atharva9167j/dom-to-pptx.git"
-  },
-  "keywords": [
-    "pptx",
-    "html-to-pptx",
-    "powerpoint",
-    "pptx-generator",
-    "slide-generator",
-    "presentation-generator",
-    "dom",
-    "dom-to-pptx",
-    "export",
-    "browser-export",
-    "client-side-pptx",
-    "html-to-powerpoint",
-    "convert-html",
-    "css-to-pptx",
-    "css-to-powerpoint",
-    "pptx-creator",
-    "presentation-tools",
-    "slides",
-    "slide-creation",
-    "web-to-pptx",
-    "web-to-powerpoint",
-    "frontend-pptx",
-    "html-rendering",
-    "layout-engine",
-    "gradient-support",
-    "flexbox",
-    "css-grid",
-    "typography"
-  ],
-  "author": "Atharva Dharmendra Jagtap <atharvaj321@gmail.com>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/atharva9167j/dom-to-pptx/issues"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^29.0.0",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^16.0.3",
-    "buffer": "^6.0.3",
-    "eslint": "^9.39.1",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.4",
-    "events": "^3.3.0",
-    "prettier": "^3.7.3",
-    "process": "^0.11.10",
-    "rollup-plugin-polyfill-node": "^0.10.1",
-    "stream-browserify": "^3.0.0",
-    "util": "^0.12.5"
-  },
-  "dependencies": {
-    "fonteditor-core": "^2.6.3",
-    "html2canvas": "^1.4.1",
-    "jszip": "^3.10.1",
-    "opentype.js": "^1.3.4",
-    "pako": "^2.1.0",
-    "pptxgenjs": "^3.12.0"
-  }
-}
+{
+  "name": "dom-to-pptx",
+  "version": "1.1.1",
+  "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",
+  "browser": "dist/dom-to-pptx.bundle.js",
+  "exports": {
+    ".": {
+      "import": "./dist/dom-to-pptx.mjs",
+      "require": "./dist/dom-to-pptx.cjs",
+      "default": "./dist/dom-to-pptx.cjs"
+    }
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "npx rollup -c",
+    "lint": "eslint .",
+    "format": "prettier --write ."
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/atharva9167j/dom-to-pptx.git"
+  },
+  "keywords": [
+    "pptx",
+    "html-to-pptx",
+    "powerpoint",
+    "pptx-generator",
+    "slide-generator",
+    "presentation-generator",
+    "dom",
+    "dom-to-pptx",
+    "export",
+    "browser-export",
+    "client-side-pptx",
+    "html-to-powerpoint",
+    "convert-html",
+    "css-to-pptx",
+    "css-to-powerpoint",
+    "pptx-creator",
+    "presentation-tools",
+    "slides",
+    "slide-creation",
+    "web-to-pptx",
+    "web-to-powerpoint",
+    "frontend-pptx",
+    "html-rendering",
+    "layout-engine",
+    "gradient-support",
+    "flexbox",
+    "css-grid",
+    "typography"
+  ],
+  "author": "Atharva Dharmendra Jagtap <atharvaj321@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/atharva9167j/dom-to-pptx/issues"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "buffer": "^6.0.3",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "events": "^3.3.0",
+    "prettier": "^3.7.3",
+    "process": "^0.11.10",
+    "rollup-plugin-polyfill-node": "^0.10.1",
+    "stream-browserify": "^3.0.0",
+    "util": "^0.12.5"
+  },
+  "dependencies": {
+    "fonteditor-core": "^2.6.3",
+    "html2canvas": "^1.4.1",
+    "jszip": "^3.10.1",
+    "opentype.js": "^1.3.4",
+    "pako": "^2.1.0",
+    "pptxgenjs": "^3.12.0"
+  }
+}

package/rollup.config.js

@@ -10,9 +10,11 @@ const input = 'src/index.js';
 const onwarn = (warning, warn) => {
   if (warning.code === 'CIRCULAR_DEPENDENCY') {
     // Ignore circular dependencies in these known packages
-    if (warning.message.includes('node_modules/readable-stream') || 
-        warning.message.includes('node_modules/jszip') ||
-        warning.message.includes('node_modules/semver')) {
+    if (
+      warning.message.includes('node_modules/readable-stream') ||
+      warning.message.includes('node_modules/jszip') ||
+      warning.message.includes('node_modules/semver')
+    ) {
       return;
     }
   }
@@ -42,14 +44,7 @@ const configLibrary = {
     json(),
   ],
   // Mark all dependencies as external so they aren't bundled into the .mjs/.cjs files
-  external: [
-    'pptxgenjs',
-    'html2canvas',
-    'jszip',
-    'fonteditor-core',
-    'opentype.js',
-    'pako'
-  ],
+  external: ['pptxgenjs', 'html2canvas', 'jszip', 'fonteditor-core', 'opentype.js', 'pako'],
   onwarn,
 };
 
@@ -73,12 +68,12 @@ const configBundle = {
       // If you want to bundle PptxGenJS inside, remove it from external/globals.
       // Usually for "bundle.js", we bundle everything except maybe very large libs.
       // Based on your previous config, we are bundling everything.
-    }
+    },
   },
   plugins: [
     // 1. JSON plugin (needed for some deps)
     json(),
-    
+
     // 2. Resolve browser versions of modules
     resolve({
       browser: true,
@@ -98,4 +93,4 @@ const configBundle = {
   onwarn,
 };
 
-export default [configLibrary, configBundle];
+export default [configLibrary, configBundle];

package/src/font-embedder.js

@@ -1,159 +1,163 @@
-// 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);
-    });
-  }
-}
+// 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

@@ -1,35 +1,32 @@
-// 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
-  );
-}
+// 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);
+}