docgen-utils 1.0.22 → 1.0.24

package/dist/packages/slides/parse.js

@@ -110,6 +110,40 @@ function extractRotationAngle(computed) {
     }
     return null;
 }
+/**
+ * Extract translation (translateX, translateY) from a CSS transform matrix.
+ * CSS transforms like `translate(-50%, 20px)` are resolved to a matrix by the browser.
+ * The matrix format is: matrix(a, b, c, d, tx, ty) where tx/ty are the translations.
+ * Returns {x: number, y: number} in pixels, or null if no translation.
+ */
+function extractTranslation(computed) {
+    const transform = computed.transform;
+    if (!transform || transform === 'none')
+        return null;
+    // matrix(a, b, c, d, tx, ty) - 2D transform
+    const matrix2dMatch = transform.match(/matrix\(([-\d.e]+),\s*([-\d.e]+),\s*([-\d.e]+),\s*([-\d.e]+),\s*([-\d.e]+),\s*([-\d.e]+)\)/);
+    if (matrix2dMatch) {
+        const tx = parseFloat(matrix2dMatch[5]);
+        const ty = parseFloat(matrix2dMatch[6]);
+        if (tx !== 0 || ty !== 0) {
+            return { x: tx, y: ty };
+        }
+    }
+    // matrix3d(m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44)
+    // tx = m41, ty = m42
+    const matrix3dMatch = transform.match(/matrix3d\(([^)]+)\)/);
+    if (matrix3dMatch) {
+        const values = matrix3dMatch[1].split(',').map(v => parseFloat(v.trim()));
+        if (values.length >= 14) {
+            const tx = values[12]; // m41
+            const ty = values[13]; // m42
+            if (tx !== 0 || ty !== 0) {
+                return { x: tx, y: ty };
+            }
+        }
+    }
+    return null;
+}
 // ---------------------------------------------------------------------------
 // Effective opacity (accumulated from ancestor chain)
 // ---------------------------------------------------------------------------
@@ -1426,8 +1460,9 @@ function extractPseudoElements(el, win) {
                 pHeight = parentRect.height;
             }
         }
-        // Skip tiny elements that won't be visible
-        if (pWidth < 1 || pHeight < 1)
+        // Skip elements that are effectively invisible (less than 0.5px in either dimension).
+        // The threshold is low to handle scaled HTML (1280px → 960px means 1px → 0.75px).
+        if (pWidth < 0.5 || pHeight < 0.5)
             continue;
         // Determine position (relative to parent)
         let pLeft = parseFloat(pComputed.left);
@@ -1605,8 +1640,13 @@ function extractPseudoElements(el, win) {
             borderOffsetLeft = parseFloat(parentComputedForBorder.borderLeftWidth) || 0;
             borderOffsetTop = parseFloat(parentComputedForBorder.borderTopWidth) || 0;
         }
-        const absLeft = parentRect.left + pLeft + borderOffsetLeft;
-        const absTop = parentRect.top + pTop + borderOffsetTop;
+        // Apply CSS transform translation if present
+        // Transforms like translateX/translateY/translate are resolved to a matrix by the browser
+        const translation = extractTranslation(pComputed);
+        const transformOffsetX = translation?.x ?? 0;
+        const transformOffsetY = translation?.y ?? 0;
+        const absLeft = parentRect.left + pLeft + borderOffsetLeft + transformOffsetX;
+        const absTop = parentRect.top + pTop + borderOffsetTop + transformOffsetY;
         // Check for visual content: background color, gradient, or border
         const hasBg = pComputed.backgroundColor && pComputed.backgroundColor !== 'rgba(0, 0, 0, 0)';
         const bgImage = pComputed.backgroundImage;
@@ -1822,7 +1862,22 @@ function parseInlineFormatting(element, baseOptions, runs, baseTextTransform, wi
                     const transformStr = computed.textTransform;
                     textTransform = (text) => applyTextTransform(text, transformStr);
                 }
+                // If a <br> preceded this element, apply softBreakBefore to the first run
+                // generated by the recursive call. We do this by noting the current runs
+                // count, recursing, then marking the first new run (if any) with softBreakBefore.
+                const runsBeforeRecurse = runs.length;
+                const hadPendingSoftBreak = pendingSoftBreak;
+                if (pendingSoftBreak) {
+                    pendingSoftBreak = false; // Clear before recursion
+                }
                 parseInlineFormatting(el, options, runs, textTransform, win);
+                // Apply softBreakBefore to the first run added by the recursive call
+                if (hadPendingSoftBreak && runs.length > runsBeforeRecurse) {
+                    runs[runsBeforeRecurse].options = {
+                        ...runs[runsBeforeRecurse].options,
+                        softBreakBefore: true,
+                    };
+                }
             }
             prevNodeIsText = false;
         }
@@ -2207,6 +2262,33 @@ export function parseSlideHtml(doc) {
                 const imgEl = el;
                 const natW = imgEl.naturalWidth;
                 const natH = imgEl.naturalHeight;
+                // Parse object-position for cover crop anchor point.
+                // CSS object-position defaults to "50% 50%" (center center).
+                // We convert to [xFraction, yFraction] in the range 0.0–1.0.
+                let objectPosition;
+                const objPos = imgComputed.objectPosition;
+                if (objPos && objectFit === 'cover') {
+                    const parts = objPos.trim().split(/\s+/);
+                    const parseFraction = (val, dimension) => {
+                        if (val.endsWith('%')) {
+                            return parseFloat(val) / 100;
+                        }
+                        // px or pt value — convert to fraction of the display dimension
+                        const px = parseFloat(val);
+                        if (!isNaN(px) && dimension > 0) {
+                            return px / dimension;
+                        }
+                        return 0.5; // default center
+                    };
+                    const displayW = wasClipped ? clippedW : rect.width;
+                    const displayH = wasClipped ? clippedH : rect.height;
+                    const xFrac = parts.length >= 1 ? parseFraction(parts[0], displayW) : 0.5;
+                    const yFrac = parts.length >= 2 ? parseFraction(parts[1], displayH) : xFrac;
+                    // Only store if non-default to keep output clean
+                    if (Math.abs(xFrac - 0.5) > 0.001 || Math.abs(yFrac - 0.5) > 0.001) {
+                        objectPosition = [xFrac, yFrac];
+                    }
+                }
                 const imageElement = {
                     type: isFullSlideImage ? 'slideBackgroundImage' : 'image',
                     src: imgSrc,
@@ -2219,10 +2301,14 @@ export function parseSlideHtml(doc) {
                     sizing: objectFit === 'cover' ? { type: 'cover' } : null,
                 };
                 // Store natural dimensions for cover crop calculation in convert.ts
-                if (objectFit === 'cover' && natW > 0 && natH > 0 && !isFullSlideImage) {
+                if (objectFit === 'cover' && natW > 0 && natH > 0) {
                     imageElement.naturalWidth = natW;
                     imageElement.naturalHeight = natH;
                 }
+                // Store object-position for cover crop anchor
+                if (objectPosition) {
+                    imageElement.objectPosition = objectPosition;
+                }
                 if (imgRectRadius !== null) {
                     imageElement.rectRadius = imgRectRadius;
                 }
@@ -2772,8 +2858,34 @@ export function parseSlideHtml(doc) {
                     const allChildren = Array.from(el.children);
                     // Collect text-bearing children: standard text tags AND leaf DIVs (no child elements, only text nodes)
                     const textChildren = allChildren.filter((child) => {
-                        if (textTagSet.has(child.tagName))
+                        if (textTagSet.has(child.tagName)) {
+                            // SPANs with background or border styling should NOT be merged as text children.
+                            // They need to be processed independently as shape elements to preserve their styling.
+                            if (child.tagName === 'SPAN') {
+                                const spanComputed = win.getComputedStyle(child);
+                                const spanHasBg = spanComputed.backgroundColor && spanComputed.backgroundColor !== 'rgba(0, 0, 0, 0)';
+                                const spanHasBorder = (parseFloat(spanComputed.borderTopWidth) || 0) > 0 ||
+                                    (parseFloat(spanComputed.borderRightWidth) || 0) > 0 ||
+                                    (parseFloat(spanComputed.borderBottomWidth) || 0) > 0 ||
+                                    (parseFloat(spanComputed.borderLeftWidth) || 0) > 0;
+                                const spanHasGradient = spanComputed.backgroundImage &&
+                                    spanComputed.backgroundImage !== 'none' &&
+                                    (spanComputed.backgroundImage.includes('linear-gradient') ||
+                                        spanComputed.backgroundImage.includes('radial-gradient'));
+                                // Check if this is gradient text (background-clip: text) - those SHOULD be text children
+                                const spanBgClip = spanComputed.webkitBackgroundClip || spanComputed.backgroundClip;
+                                const spanTextFillColor = spanComputed.webkitTextFillColor;
+                                const isGradientText = spanBgClip === 'text' &&
+                                    (spanTextFillColor === 'transparent' ||
+                                        spanTextFillColor === 'rgba(0, 0, 0, 0)' ||
+                                        (spanTextFillColor && spanTextFillColor.includes('rgba') && spanTextFillColor.endsWith(', 0)')));
+                                // Exclude styled SPANs (but not gradient text SPANs)
+                                if ((spanHasBg || spanHasBorder || spanHasGradient) && !isGradientText) {
+                                    return false;
+                                }
+                            }
                             return true;
+                        }
                         // Include text-only DIVs: DIVs that contain only inline/text content
                         // The transformer wraps bare text in <p> tags, so a DIV with a single <p> child
                         // is still effectively a text-only DIV. Examples after transformation:
@@ -2926,8 +3038,17 @@ export function parseSlideHtml(doc) {
                     // - It's a single text child (isSingleTextChild), OR
                     // - There are ONLY text children (no non-text siblings to compete with for space), OR
                     // - There's direct text content (text nodes, not child elements)
-                    const shouldMergeText = hasTextChildren && (isSingleTextChild ||
-                        nonTextChildren.length === 0) || hasDirectText;
+                    //
+                    // CRITICAL: If the parent styled DIV is a flex-row container with multiple
+                    // children, the children are laid out horizontally and must be extracted
+                    // separately with their own positions. Merging them into a single text box
+                    // would stack them vertically, breaking the layout.
+                    const isParentFlexRow = isFlexContainer &&
+                        (computed.flexDirection === 'row' || computed.flexDirection === 'row-reverse' || !computed.flexDirection) &&
+                        allChildren.length > 1;
+                    const isParentGrid = display === 'grid' || display === 'inline-grid';
+                    const shouldMergeText = !isParentFlexRow && !isParentGrid && (hasTextChildren && (isSingleTextChild ||
+                        nonTextChildren.length === 0) || hasDirectText);
                     if (shouldMergeText) {
                         if (isSingleTextChild) {
                             const textEl = textChildren[0];
@@ -3409,16 +3530,55 @@ export function parseSlideHtml(doc) {
                         (plainDivFlexDir === 'row' || plainDivFlexDir === 'row-reverse') &&
                         plainDivChildCount > 1;
                     const isPlainDivGrid = plainDivDisplay === 'grid' || plainDivDisplay === 'inline-grid';
+                    // Helper to check if a child element is inline text (not a styled SPAN/A that needs shape treatment)
+                    const isInlineTextChild = (ce) => {
+                        const tagName = ce.tagName.toUpperCase();
+                        if (!inlineTextTagsSet.has(tagName))
+                            return false;
+                        // SPANs and A elements with background/border styling need to be processed as shapes
+                        // They should NOT be treated as inline text children
+                        if (tagName === 'SPAN' || tagName === 'A') {
+                            const ceComputed = win.getComputedStyle(ce);
+                            const ceHasBg = ceComputed.backgroundColor && ceComputed.backgroundColor !== 'rgba(0, 0, 0, 0)';
+                            const ceHasBorder = (parseFloat(ceComputed.borderTopWidth) || 0) > 0 ||
+                                (parseFloat(ceComputed.borderRightWidth) || 0) > 0 ||
+                                (parseFloat(ceComputed.borderBottomWidth) || 0) > 0 ||
+                                (parseFloat(ceComputed.borderLeftWidth) || 0) > 0;
+                            const ceHasGradient = ceComputed.backgroundImage &&
+                                ceComputed.backgroundImage !== 'none' &&
+                                (ceComputed.backgroundImage.includes('linear-gradient') ||
+                                    ceComputed.backgroundImage.includes('radial-gradient'));
+                            // Check if this is gradient text (background-clip: text) - those ARE inline text
+                            const ceBgClip = ceComputed.webkitBackgroundClip || ceComputed.backgroundClip;
+                            const ceTextFillColor = ceComputed.webkitTextFillColor;
+                            const isGradientText = ceBgClip === 'text' &&
+                                (ceTextFillColor === 'transparent' ||
+                                    ceTextFillColor === 'rgba(0, 0, 0, 0)' ||
+                                    (ceTextFillColor && ceTextFillColor.includes('rgba') && ceTextFillColor.endsWith(', 0)')));
+                            // Styled elements (except gradient text) should NOT be treated as inline text
+                            if ((ceHasBg || ceHasBorder || ceHasGradient) && !isGradientText) {
+                                return false;
+                            }
+                        }
+                        return true;
+                    };
                     const allChildrenAreInlineText = !isPlainDivFlexRow && !isPlainDivGrid && (childElements.length === 0 ||
-                        childElements.every(ce => inlineTextTagsSet.has(ce.tagName.toUpperCase())));
+                        childElements.every(ce => isInlineTextChild(ce)));
                     // Only proceed if this DIV has meaningful text content
                     // AND has no structural child elements that would be extracted separately
                     // SVG children are decorative (already extracted as images) and shouldn't block text extraction
+                    // Styled SPANs/A elements (with bg/border) ARE structural - they become shapes
                     const structuralChildElements = childElements.filter(ce => {
                         const tagName = ce.tagName.toUpperCase();
-                        return tagName !== 'BR' &&
-                            tagName !== 'SVG' &&
-                            !inlineTextTagsSet.has(tagName);
+                        if (tagName === 'BR' || tagName === 'SVG')
+                            return false;
+                        // If it's not an inline text element, it's structural
+                        if (!inlineTextTagsSet.has(tagName))
+                            return true;
+                        // For SPAN/A, check if it's styled (then it's structural)
+                        if (!isInlineTextChild(ce))
+                            return true;
+                        return false;
                     });
                     const hasStructuralChildren = structuralChildElements.length > 0;
                     // If all children are inline text elements (or no children), use the full textContent
@@ -3475,6 +3635,11 @@ export function parseSlideHtml(doc) {
                         // use parseInlineFormatting to preserve per-run styling (color, bold, etc.).
                         // Otherwise, create a single text run.
                         let textRuns;
+                        // Check if this is a flex-column container - children are stacked vertically
+                        // and should be separated by line breaks in the PPTX output
+                        const isFlexColumn = (plainDivDisplay === 'flex' || plainDivDisplay === 'inline-flex') &&
+                            (plainDivFlexDir === 'column' || plainDivFlexDir === 'column-reverse') &&
+                            childElements.length > 1;
                         if (allChildrenAreInlineText && childElements.length > 0) {
                             const baseRunOptions = {
                                 fontSize: pxToPoints(computed2.fontSize),
@@ -3490,7 +3655,57 @@ export function parseSlideHtml(doc) {
                             if (computed2.textTransform && computed2.textTransform !== 'none') {
                                 textTransformFn = (text) => applyTextTransform(text, computed2.textTransform);
                             }
-                            textRuns = parseInlineFormatting(el, baseRunOptions, [], textTransformFn, win);
+                            // For flex-column containers, process each child separately and add
+                            // line breaks between them to preserve the vertical stacking
+                            if (isFlexColumn) {
+                                textRuns = [];
+                                for (let ci = 0; ci < childElements.length; ci++) {
+                                    const childEl = childElements[ci];
+                                    const childComputed = win.getComputedStyle(childEl);
+                                    const childText = getTransformedText(childEl, childComputed);
+                                    if (!childText)
+                                        continue;
+                                    // Apply text-transform
+                                    const transformedChildText = textTransformFn(childText);
+                                    // Build run options for this child, inheriting from parent but overriding
+                                    // with child-specific styles
+                                    const childRunOptions = { ...baseRunOptions };
+                                    const childFontSize = pxToPoints(childComputed.fontSize);
+                                    if (childFontSize)
+                                        childRunOptions.fontSize = childFontSize;
+                                    const childFontFace = extractFontFace(childComputed.fontFamily);
+                                    if (childFontFace)
+                                        childRunOptions.fontFace = childFontFace;
+                                    const childColor = rgbToHex(childComputed.color);
+                                    if (childColor)
+                                        childRunOptions.color = childColor;
+                                    if (parseInt(childComputed.fontWeight) >= 600) {
+                                        childRunOptions.bold = true;
+                                    }
+                                    else if (parseInt(childComputed.fontWeight) < 600) {
+                                        childRunOptions.bold = false;
+                                    }
+                                    if (childComputed.fontStyle === 'italic') {
+                                        childRunOptions.italic = true;
+                                    }
+                                    else if (childComputed.fontStyle !== 'italic') {
+                                        childRunOptions.italic = false;
+                                    }
+                                    // Check for letter-spacing
+                                    const childLs = extractLetterSpacing(childComputed);
+                                    if (childLs !== null)
+                                        childRunOptions.charSpacing = childLs;
+                                    // For all children except the last, add a newline at the end of the text
+                                    // to create vertical stacking in the PPTX output
+                                    const textWithBreak = ci < childElements.length - 1
+                                        ? transformedChildText + '\n'
+                                        : transformedChildText;
+                                    textRuns.push({ text: textWithBreak, options: childRunOptions });
+                                }
+                            }
+                            else {
+                                textRuns = parseInlineFormatting(el, baseRunOptions, [], textTransformFn, win);
+                            }
                             // Fallback to single run if parseInlineFormatting produced nothing
                             if (textRuns.length === 0) {
                                 textRuns = [{ text: extractedText, options: {} }];
@@ -3924,9 +4139,9 @@ export function parseSlideHtml(doc) {
     // Some DIVs (e.g., .image-side with overflow:hidden) have no bg/border/gradient
     // themselves but have ::before/::after pseudo-elements with gradient overlays.
     doc.querySelectorAll('div').forEach((divEl) => {
+        const htmlDiv = divEl;
         if (processed.has(divEl))
             return; // Already handled in second pass
-        const htmlDiv = divEl;
         if (htmlDiv === body)
             return; // Body already handled
         const rect = htmlDiv.getBoundingClientRect();