npm - docgen-utils - Versions diffs - 1.0.11 → 1.0.12 - Mend

docgen-utils 1.0.11 → 1.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/dist/bundle.js +40084 -5825
package/dist/bundle.min.js +288 -110
package/dist/cli.js +23758 -110
package/dist/packages/docs/import-docx.d.ts.map +1 -1
package/dist/packages/docs/import-docx.js +397 -7
package/dist/packages/docs/import-docx.js.map +1 -1
package/dist/packages/slides/fonts.d.ts +41 -0
package/dist/packages/slides/fonts.d.ts.map +1 -0
package/dist/packages/slides/fonts.js +209 -0
package/dist/packages/slides/fonts.js.map +1 -0
package/dist/packages/slides/import-pptx.d.ts.map +1 -1
package/dist/packages/slides/import-pptx.js +583 -120
package/dist/packages/slides/import-pptx.js.map +1 -1
package/dist/packages/slides/parse.d.ts.map +1 -1
package/dist/packages/slides/parse.js +1 -51
package/dist/packages/slides/parse.js.map +1 -1
package/dist/packages/slides/transform.d.ts +6 -6
package/dist/packages/slides/transform.d.ts.map +1 -1
package/dist/packages/slides/transform.js +13 -44
package/dist/packages/slides/transform.js.map +1 -1
package/package.json +3 -2

package/dist/packages/docs/import-docx.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"import-docx.d.ts","sourceRoot":"","sources":["../../../packages/docs/import-docx.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;~~AAu6EH~~;;;;GAIG;AACH,wBAA8B,UAAU,CACtC,WAAW,EAAE,WAAW,GACvB,OAAO,CAAC,MAAM,CAAC,~~CAoMjB~~"}
1	+ {"version":3,"file":"import-docx.d.ts","sourceRoot":"","sources":["../../../packages/docs/import-docx.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AA43FH;;;;GAIG;AACH,wBAA8B,UAAU,CACtC,WAAW,EAAE,WAAW,GACvB,OAAO,CAAC,MAAM,CAAC,CA+MjB"}

package/dist/packages/docs/import-docx.js CHANGED Viewed

@@ -5,6 +5,8 @@
  * Usage: const html = await importDocx(arrayBuffer);
  */
 import JSZip from "jszip";
+import { EMFJS } from "rtf.js";
+import { parseHTML } from "linkedom";
 // ============================================================================
 // Constants
 // ============================================================================
@@ -133,6 +135,332 @@ function getBorderStyleCss(style) {
     return styleMap[style] ?? "solid";
 }
 // ============================================================================
+// EMF to SVG Conversion
+// ============================================================================
+// Setup DOM environment for EMFJS (required for SVG creation)
+let emfDomSetup = false;
+function setupEmfDom() {
+    if (emfDomSetup)
+        return;
+    // Create a minimal DOM environment using linkedom
+    const { document, window } = parseHTML('<!DOCTYPE html><html><body></body></html>');
+    // EMFJS requires document.createElementNS
+    if (typeof globalThis.document === 'undefined') {
+        globalThis.document = document;
+    }
+    if (typeof globalThis.window === 'undefined') {
+        globalThis.window = window;
+    }
+    emfDomSetup = true;
+}
+/**
+ * Read EMF header to get bounds and frame dimensions
+ */
+function readEmfHeader(buffer) {
+    const view = new DataView(buffer);
+    // Check if this is a valid EMF (record type should be 0x00000001)
+    const recordType = view.getUint32(0, true);
+    if (recordType !== 0x00000001) {
+        throw new Error('Not a valid EMF file');
+    }
+    // Bounds rectangle at offset 8-23: left, top, right, bottom (in device units)
+    const boundsRight = view.getInt32(16, true);
+    const boundsBottom = view.getInt32(20, true);
+    // Frame rectangle at offset 24-39: left, top, right, bottom (in 0.01mm units)
+    const frameRight = view.getInt32(32, true);
+    const frameBottom = view.getInt32(36, true);
+    return {
+        boundsWidth: Math.max(boundsRight, 1),
+        boundsHeight: Math.max(boundsBottom, 1),
+        frameWidth: frameRight,
+        frameHeight: frameBottom
+    };
+}
+// For backward compatibility
+function readEmfBounds(buffer) {
+    const header = readEmfHeader(buffer);
+    return { width: header.boundsWidth, height: header.boundsHeight };
+}
+function extractEmfText(buffer) {
+    const view = new DataView(buffer);
+    const EMR_EXTTEXTOUTW = 0x54;
+    const EMR_SETTEXTCOLOR = 0x18;
+    const EMR_EXTCREATEFONTINDIRECTW = 0x52;
+    const EMR_SELECTOBJECT = 0x25;
+    const EMR_DELETEOBJECT = 0x28;
+    const EMR_SETTEXTALIGN = 0x16;
+    const textRecords = [];
+    let currentTextColor = '#000000';
+    let currentFontRotation = 0; // in degrees
+    let currentFontHeight = 40; // default font height in logical units
+    let currentTextAlign = 0; // EMF text alignment flags
+    // Font objects map: handle -> { rotation, height }
+    const fontObjects = new Map();
+    let pos = 0;
+    while (pos < buffer.byteLength - 8) {
+        const recordType = view.getUint32(pos, true);
+        const recordSize = view.getUint32(pos + 4, true);
+        if (recordSize < 8 || pos + recordSize > buffer.byteLength)
+            break;
+        if (recordType === EMR_SETTEXTCOLOR) {
+            // Color is at offset 8 (after type and size)
+            const r = view.getUint8(pos + 8);
+            const g = view.getUint8(pos + 9);
+            const b = view.getUint8(pos + 10);
+            currentTextColor = '#' + r.toString(16).padStart(2, '0') +
+                g.toString(16).padStart(2, '0') +
+                b.toString(16).padStart(2, '0');
+        }
+        // EMR_SETTEXTALIGN - sets text alignment mode
+        if (recordType === EMR_SETTEXTALIGN) {
+            currentTextAlign = view.getUint32(pos + 8, true);
+        }
+        // EMR_EXTCREATEFONTINDIRECTW - creates a font with rotation info and height
+        if (recordType === EMR_EXTCREATEFONTINDIRECTW) {
+            // EMR_EXTCREATEFONTINDIRECTW structure:
+            // 0-3: record type
+            // 4-7: record size
+            // 8-11: ihFonts (handle/index of font object)
+            // 12-15: elfw.elfLogFont.lfHeight
+            // 16-19: elfw.elfLogFont.lfWidth
+            // 20-23: elfw.elfLogFont.lfEscapement (rotation in tenths of a degree)
+            // 24-27: elfw.elfLogFont.lfOrientation (also in tenths of a degree)
+            const fontHandle = view.getUint32(pos + 8, true);
+            const lfHeight = view.getInt32(pos + 12, true);
+            const lfEscapement = view.getInt32(pos + 20, true); // Escapement is text rotation
+            // Convert from tenths of degrees to degrees, negate for SVG (SVG rotates clockwise, EMF counter-clockwise)
+            const rotationDegrees = -lfEscapement / 10;
+            // Font height is negative in EMF (cell height), use absolute value
+            fontObjects.set(fontHandle, { rotation: rotationDegrees, height: Math.abs(lfHeight) });
+        }
+        // EMR_SELECTOBJECT - selects a font (and its rotation/height)
+        if (recordType === EMR_SELECTOBJECT) {
+            const objectHandle = view.getUint32(pos + 8, true);
+            // Check if it's a font object we've created
+            if (fontObjects.has(objectHandle)) {
+                const fontInfo = fontObjects.get(objectHandle);
+                currentFontRotation = fontInfo.rotation;
+                currentFontHeight = fontInfo.height;
+            }
+        }
+        // EMR_DELETEOBJECT - remove font object
+        if (recordType === EMR_DELETEOBJECT) {
+            const objectHandle = view.getUint32(pos + 8, true);
+            fontObjects.delete(objectHandle);
+        }
+        if (recordType === EMR_EXTTEXTOUTW) {
+            // EMR_EXTTEXTOUTW structure:
+            // 0-3: record type
+            // 4-7: record size
+            // 8-23: bounds (16 bytes)
+            // 24-27: iGraphicsMode
+            // 28-31: exScale
+            // 32-35: eyScale
+            // 36-39: emrtext.ptlReference.x
+            // 40-43: emrtext.ptlReference.y
+            // 44-47: emrtext.nChars
+            // 48-51: emrtext.offString (offset to string from start of record)
+            const x = view.getInt32(pos + 36, true);
+            const y = view.getInt32(pos + 40, true);
+            const nChars = view.getUint32(pos + 44, true);
+            const offString = view.getUint32(pos + 48, true);
+            if (nChars > 0 && offString > 0 && pos + offString + nChars * 2 <= buffer.byteLength) {
+                // Read UTF-16LE string
+                let text = '';
+                for (let i = 0; i < nChars; i++) {
+                    const charCode = view.getUint16(pos + offString + i * 2, true);
+                    if (charCode === 0)
+                        break;
+                    text += String.fromCharCode(charCode);
+                }
+                if (text.trim()) {
+                    // Determine SVG text-anchor from EMF text align flags
+                    // TA_LEFT = 0, TA_RIGHT = 2, TA_CENTER = 6 (bits 1-2)
+                    const hAlignBits = currentTextAlign & 6;
+                    let textAnchor = 'start';
+                    if (hAlignBits === 2) {
+                        textAnchor = 'end'; // TA_RIGHT
+                    }
+                    else if (hAlignBits === 6) {
+                        textAnchor = 'middle'; // TA_CENTER
+                    }
+                    textRecords.push({
+                        x,
+                        y,
+                        text: text.trim(),
+                        color: currentTextColor,
+                        rotation: currentFontRotation,
+                        textAnchor,
+                        fontHeight: currentFontHeight
+                    });
+                }
+            }
+        }
+        pos += recordSize;
+    }
+    return textRecords;
+}
+/**
+ * Escape text for SVG
+ */
+function escapeSvgText(text) {
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&apos;');
+}
+/**
+ * Convert EMF buffer to SVG for inline rendering
+ */
+function convertEmfToSvg(buffer) {
+    try {
+        setupEmfDom();
+        const header = readEmfHeader(buffer);
+        const { boundsWidth, boundsHeight, frameWidth, frameHeight } = header;
+        // Disable EMFJS logging by temporarily overriding console
+        const originalLog = console.log;
+        console.log = () => { }; // Silence EMFJS debug logs
+        try {
+            const renderer = new EMFJS.Renderer(buffer);
+            const svg = renderer.render({
+                width: boundsWidth + 'px',
+                height: boundsHeight + 'px',
+                wExt: boundsWidth,
+                hExt: boundsHeight,
+                xExt: boundsWidth,
+                yExt: boundsHeight,
+                mapMode: 8 // MM_ANISOTROPIC - allows independent scaling of X and Y
+            });
+            // Get the SVG markup
+            let svgMarkup = svg.outerHTML;
+            // Extract text from EMF and add to SVG
+            const textRecords = extractEmfText(buffer);
+            if (textRecords.length > 0) {
+                // Calculate scaling from EMF logical units to SVG viewport
+                // EMF text coordinates are in the window extent coordinate system
+                // EMFJS renders graphics to the viewport extent coordinate system
+                // We need to scale text from window extent -> viewport extent (same as graphics)
+                const windowExt = readEmfWindowExtent(buffer);
+                const viewportExt = readEmfViewportExtent(buffer);
+                const scaleX = viewportExt.width / windowExt.width;
+                const scaleY = viewportExt.height / windowExt.height;
+                // Create text elements
+                const textElements = [];
+                for (const record of textRecords) {
+                    const svgX = Math.round(record.x * scaleX);
+                    const svgY = Math.round(record.y * scaleY);
+                    // Scale font height from logical units to SVG pixels
+                    const fontSize = Math.round(record.fontHeight * scaleY);
+                    // Apply rotation transform if needed
+                    const transform = record.rotation !== 0
+                        ? ` transform="rotate(${record.rotation}, ${svgX}, ${svgY})"`
+                        : '';
+                    // Apply text-anchor for horizontal alignment
+                    const textAnchorAttr = record.textAnchor !== 'start'
+                        ? ` text-anchor="${record.textAnchor}"`
+                        : '';
+                    // SVG uses 'dominant-baseline' for vertical alignment. EMF uses baseline alignment.
+                    // SVG's default is 'auto' which is similar to baseline, so we don't need to change it.
+                    textElements.push(`<text x="${svgX}" y="${svgY}" fill="${record.color}" font-size="${fontSize}px" font-family="Arial, sans-serif"${textAnchorAttr}${transform}>${escapeSvgText(record.text)}</text>`);
+                }
+                // Insert text elements inside the INNER SVG (where graphics are rendered)
+                // EMFJS creates a nested SVG structure: outer SVG > inner SVG with graphics
+                // We want text in the inner SVG to match the graphics coordinate system
+                // Find the first closing </svg> tag (inner SVG)
+                const firstSvgClose = svgMarkup.indexOf('</svg>');
+                if (firstSvgClose > 0) {
+                    svgMarkup = svgMarkup.slice(0, firstSvgClose) +
+                        textElements.join('') +
+                        svgMarkup.slice(firstSvgClose);
+                }
+            }
+            // Add xmlns attribute if missing (required for inline SVG)
+            if (!svgMarkup.includes('xmlns=')) {
+                svgMarkup = svgMarkup.replace('<svg ', '<svg xmlns="http://www.w3.org/2000/svg" ');
+            }
+            // Return raw SVG markup for inline rendering
+            return { type: "inlineSvg", svgMarkup };
+        }
+        finally {
+            console.log = originalLog; // Restore console.log
+        }
+    }
+    catch (err) {
+        // If conversion fails, return null (image won't display)
+        console.error('EMF to SVG conversion failed:', err);
+        return null;
+    }
+}
+/**
+ * Read the window extent from EMF (EMR_SETWINDOWEXTEX record)
+ * Returns the last SETWINDOWEXTEX before text rendering starts
+ */
+function readEmfWindowExtent(buffer) {
+    const view = new DataView(buffer);
+    const EMR_SETWINDOWEXTEX = 0x09;
+    let pos = 0;
+    let lastWindowExt = { width: 0, height: 0 };
+    while (pos < buffer.byteLength - 8) {
+        const recordType = view.getUint32(pos, true);
+        const recordSize = view.getUint32(pos + 4, true);
+        if (recordSize < 8 || pos + recordSize > buffer.byteLength)
+            break;
+        if (recordType === EMR_SETWINDOWEXTEX) {
+            // EMR_SETWINDOWEXTEX:
+            // 0-3: record type
+            // 4-7: record size
+            // 8-11: cx (width)
+            // 12-15: cy (height)
+            const cx = view.getInt32(pos + 8, true);
+            const cy = view.getInt32(pos + 12, true);
+            if (cx > 0 && cy > 0) {
+                lastWindowExt = { width: cx, height: cy };
+            }
+        }
+        pos += recordSize;
+    }
+    // If we found a valid window extent, use it
+    if (lastWindowExt.width > 0 && lastWindowExt.height > 0) {
+        return lastWindowExt;
+    }
+    // Fallback to bounds
+    const header = readEmfHeader(buffer);
+    return { width: header.boundsWidth, height: header.boundsHeight };
+}
+/**
+ * Read the viewport extent from EMF (EMR_SETVIEWPORTEXTEX record)
+ * This is used to scale graphics and text to the SVG coordinate space
+ */
+function readEmfViewportExtent(buffer) {
+    const view = new DataView(buffer);
+    const EMR_SETVIEWPORTEXTEX = 0x0b;
+    let pos = 0;
+    let lastViewportExt = { width: 0, height: 0 };
+    while (pos < buffer.byteLength - 8) {
+        const recordType = view.getUint32(pos, true);
+        const recordSize = view.getUint32(pos + 4, true);
+        if (recordSize < 8 || pos + recordSize > buffer.byteLength)
+            break;
+        if (recordType === EMR_SETVIEWPORTEXTEX) {
+            const cx = view.getInt32(pos + 8, true);
+            const cy = view.getInt32(pos + 12, true);
+            if (cx > 0 && cy > 0) {
+                lastViewportExt = { width: cx, height: cy };
+            }
+        }
+        pos += recordSize;
+    }
+    // If we found a valid viewport extent, use it
+    if (lastViewportExt.width > 0 && lastViewportExt.height > 0) {
+        return lastViewportExt;
+    }
+    // Fallback to bounds
+    const header = readEmfHeader(buffer);
+    return { width: header.boundsWidth, height: header.boundsHeight };
+}
+// ============================================================================
 // Parsing Functions
 // ============================================================================
 function parseThemeColors(themeDoc) {
@@ -1687,11 +2015,56 @@ function renderTableToHtml(table, styleMap, numberingMap, themeColors, imageMap,
     return html;
 }
 function renderImageToHtml(img, imageMap) {
-    const dataUri = imageMap.get(img.rId);
-    if (!dataUri)
+    const imageData = imageMap.get(img.rId);
+    if (!imageData)
         return "";
     const width = Math.round(emuToPx(img.width));
     const height = Math.round(emuToPx(img.height));
+    // Check if this is an inline SVG (from EMF conversion)
+    if (imageData.type === "inlineSvg") {
+        // Build container styles
+        const containerStyles = [
+            "display:inline-block",
+            `width:${width}px`,
+            `height:${height}px`,
+            "margin:8px 0",
+        ];
+        // Build CSS transform for rotation and flip
+        const transforms = [];
+        if (img.rotation) {
+            transforms.push(`rotate(${img.rotation}deg)`);
+        }
+        if (img.flipH) {
+            transforms.push("scaleX(-1)");
+        }
+        if (img.flipV) {
+            transforms.push("scaleY(-1)");
+        }
+        if (transforms.length > 0) {
+            containerStyles.push(`transform:${transforms.join(" ")}`);
+        }
+        // Apply shadow
+        if (img.shadow) {
+            const blurPx = Math.round(emuToPx(img.shadow.blurRadius));
+            const offsetXPx = img.shadow.offsetX ? Math.round(emuToPx(img.shadow.offsetX)) : 0;
+            const offsetYPx = img.shadow.offsetY ? Math.round(emuToPx(img.shadow.offsetY)) : 0;
+            const alpha = img.shadow.alpha / 100;
+            const r = parseInt(img.shadow.color.substring(0, 2), 16);
+            const g = parseInt(img.shadow.color.substring(2, 4), 16);
+            const b = parseInt(img.shadow.color.substring(4, 6), 16);
+            containerStyles.push(`box-shadow:${offsetXPx}px ${offsetYPx}px ${blurPx}px rgba(${r},${g},${b},${alpha})`);
+        }
+        // Apply border
+        if (img.border) {
+            const borderWidthPx = Math.round(emuToPx(img.border.width));
+            containerStyles.push(`border:${borderWidthPx}px solid #${img.border.color}`);
+        }
+        // Inject width/height into the SVG element to ensure proper sizing
+        let styledSvg = imageData.svgMarkup.replace(/<svg /, `<svg style="width:100%;height:100%;display:block;" `);
+        return `<div style="${containerStyles.join(";")}">${styledSvg}</div>`;
+    }
+    // Regular image (dataUri type)
+    const dataUri = imageData.dataUri;
     const alt = img.alt ? ` alt="${escapeHtml(img.alt)}"` : "";
     const styles = [
         "max-width:100%",
@@ -1810,8 +2183,8 @@ function renderPositionedElements(positionedElements, sectionProps, styleMap, th
         }
         // Handle positioned images
         if (el.type === "image" && el.imageRId) {
-            const dataUri = imageMap.get(el.imageRId);
-            if (dataUri) {
+            const imageData = imageMap.get(el.imageRId);
+            if (imageData) {
                 // Build CSS transform for rotation and flip (extracted from XML, not hardcoded)
                 const transforms = [];
                 if (el.imageRotation) {
@@ -1842,7 +2215,15 @@ function renderPositionedElements(positionedElements, sectionProps, styleMap, th
                     const borderWidthPx = Math.round(emuToPx(el.imageBorder.width));
                     styles.push(`border:${borderWidthPx}px solid #${el.imageBorder.color}`);
                 }
-                innerContent = `<img src="${dataUri}" style="width:100%;height:100%;object-fit:cover">`;
+                // Check if this is an inline SVG (from EMF conversion)
+                if (imageData.type === "inlineSvg") {
+                    // Inject width/height into the SVG element to ensure proper sizing
+                    const styledSvg = imageData.svgMarkup.replace(/<svg /, `<svg style="width:100%;height:100%;display:block;" `);
+                    innerContent = styledSvg;
+                }
+                else {
+                    innerContent = `<img src="${imageData.dataUri}" style="width:100%;height:100%;object-fit:cover">`;
+                }
             }
         }
         // Handle frame shape specially - render as border, not solid fill
@@ -2080,8 +2461,17 @@ export default async function importDocx(arrayBuffer) {
             const imgFile = zip.file(mediaPath);
             if (!imgFile)
                 continue;
-            const imgData = await imgFile.async("base64");
             const ext = mediaPath.split(".").pop()?.toLowerCase() ?? "png";
+            // Handle EMF files specially - convert to SVG for web display
+            if (ext === "emf") {
+                const imgBuffer = await imgFile.async("arraybuffer");
+                const svgData = convertEmfToSvg(imgBuffer);
+                if (svgData) {
+                    imageMap.set(rId, svgData);
+                }
+                continue;
+            }
+            const imgData = await imgFile.async("base64");
             const mime = ext === "jpg" || ext === "jpeg"
                 ? "image/jpeg"
                 : ext === "gif"
@@ -2089,7 +2479,7 @@ export default async function importDocx(arrayBuffer) {
                     : ext === "svg"
                         ? "image/svg+xml"
                         : `image/${ext}`;
-            imageMap.set(rId, `data:${mime};base64,${imgData}`);
+            imageMap.set(rId, { type: "dataUri", dataUri: `data:${mime};base64,${imgData}` });
         }
     }
     // Parse section properties from document