docgen-utils 1.0.32 → 1.0.34

package/dist/packages/slides/parse.js

@@ -85,6 +85,39 @@ function extractZIndex(computed) {
         return undefined;
     return parsed;
 }
+/**
+ * Get the effective z-index for an element, considering stacking context inheritance.
+ *
+ * In CSS, z-index only applies to positioned elements (absolute, relative, fixed, sticky).
+ * Child elements participate in their ancestor's stacking context. This function walks
+ * up the DOM tree to find the nearest stacking context (positioned element with z-index)
+ * and returns that z-index value.
+ *
+ * This is needed because when parsing individual elements, a text element inside a
+ * z-index:10 container doesn't have its own z-index, but visually appears at z-index:10.
+ *
+ * @param element - The element to check
+ * @param win - The window object for getComputedStyle
+ * @returns The effective z-index from the nearest stacking context, or undefined if none
+ */
+function getEffectiveZIndex(element, win) {
+    let current = element;
+    while (current && current !== win.document.body && current !== win.document.documentElement) {
+        const computed = win.getComputedStyle(current);
+        const position = computed.position;
+        // Check if this element creates a stacking context (positioned with z-index)
+        const isPositioned = position === 'absolute' || position === 'relative' ||
+            position === 'fixed' || position === 'sticky';
+        if (isPositioned) {
+            const zIndex = extractZIndex(computed);
+            if (zIndex !== undefined) {
+                return zIndex;
+            }
+        }
+        current = current.parentElement;
+    }
+    return undefined;
+}
 /**
  * Compute the effective (accumulated) opacity for an element by multiplying
  * the element's own opacity with all ancestor opacities.
@@ -2623,7 +2656,7 @@ export function parseSlideHtml(doc) {
                             cssTriangle: null,
                             customGeometry: null,
                         },
-                        zIndex: extractZIndex(computed),
+                        zIndex: getEffectiveZIndex(el, win),
                     };
                     elements.push(shapeElement);
                     // Handle accent borders (border-left/border-right) that are thicker than the base
@@ -2723,6 +2756,7 @@ export function parseSlideHtml(doc) {
                                         cssTriangle: null,
                                         customGeometry: points,
                                     },
+                                    zIndex: getEffectiveZIndex(el, win),
                                 };
                                 elements.push(borderLeftShape);
                             }
@@ -2753,6 +2787,7 @@ export function parseSlideHtml(doc) {
                                         cssTriangle: null,
                                         customGeometry: null,
                                     },
+                                    zIndex: getEffectiveZIndex(el, win),
                                 };
                                 elements.push(borderLeftShape);
                             }
@@ -2830,6 +2865,7 @@ export function parseSlideHtml(doc) {
                                         cssTriangle: null,
                                         customGeometry: points,
                                     },
+                                    zIndex: getEffectiveZIndex(el, win),
                                 };
                                 elements.push(borderRightShape);
                             }
@@ -2859,6 +2895,7 @@ export function parseSlideHtml(doc) {
                                         cssTriangle: null,
                                         customGeometry: null,
                                     },
+                                    zIndex: getEffectiveZIndex(el, win),
                                 };
                                 elements.push(borderRightShape);
                             }
@@ -2940,6 +2977,7 @@ export function parseSlideHtml(doc) {
                                     cssTriangle: null,
                                     customGeometry: points,
                                 },
+                                zIndex: getEffectiveZIndex(el, win),
                             };
                             elements.push(borderTopShape);
                         }
@@ -2969,6 +3007,7 @@ export function parseSlideHtml(doc) {
                                     cssTriangle: null,
                                     customGeometry: null,
                                 },
+                                zIndex: getEffectiveZIndex(el, win),
                             };
                             elements.push(borderTopShape);
                         }
@@ -3043,6 +3082,7 @@ export function parseSlideHtml(doc) {
                                     cssTriangle: null,
                                     customGeometry: points,
                                 },
+                                zIndex: getEffectiveZIndex(el, win),
                             };
                             elements.push(borderBottomShape);
                         }
@@ -3072,6 +3112,7 @@ export function parseSlideHtml(doc) {
                                     cssTriangle: null,
                                     customGeometry: null,
                                 },
+                                zIndex: getEffectiveZIndex(el, win),
                             };
                             elements.push(borderBottomShape);
                         }
@@ -3212,7 +3253,7 @@ export function parseSlideHtml(doc) {
                             cssTriangle: null,
                             customGeometry: null,
                         },
-                        zIndex: extractZIndex(computed),
+                        zIndex: getEffectiveZIndex(el, win),
                     };
                     elements.push(shapeElement);
                     // Handle accent borders (border-left/border-right) that are thicker than the base
@@ -3312,6 +3353,7 @@ export function parseSlideHtml(doc) {
                                         cssTriangle: null,
                                         customGeometry: points,
                                     },
+                                    zIndex: getEffectiveZIndex(el, win),
                                 };
                                 elements.push(borderLeftShape);
                             }
@@ -3342,6 +3384,7 @@ export function parseSlideHtml(doc) {
                                         cssTriangle: null,
                                         customGeometry: null,
                                     },
+                                    zIndex: getEffectiveZIndex(el, win),
                                 };
                                 elements.push(borderLeftShape);
                             }
@@ -3419,6 +3462,7 @@ export function parseSlideHtml(doc) {
                                         cssTriangle: null,
                                         customGeometry: points,
                                     },
+                                    zIndex: getEffectiveZIndex(el, win),
                                 };
                                 elements.push(borderRightShape);
                             }
@@ -3448,6 +3492,7 @@ export function parseSlideHtml(doc) {
                                         cssTriangle: null,
                                         customGeometry: null,
                                     },
+                                    zIndex: getEffectiveZIndex(el, win),
                                 };
                                 elements.push(borderRightShape);
                             }
@@ -3529,6 +3574,7 @@ export function parseSlideHtml(doc) {
                                     cssTriangle: null,
                                     customGeometry: points,
                                 },
+                                zIndex: getEffectiveZIndex(el, win),
                             };
                             elements.push(borderTopShape);
                         }
@@ -3558,6 +3604,7 @@ export function parseSlideHtml(doc) {
                                     cssTriangle: null,
                                     customGeometry: null,
                                 },
+                                zIndex: getEffectiveZIndex(el, win),
                             };
                             elements.push(borderTopShape);
                         }
@@ -3724,6 +3771,7 @@ export function parseSlideHtml(doc) {
                             fontFill: spanFontFill,
                             ...(extractAlpha(computed2.color) !== null ? { transparency: extractAlpha(computed2.color) } : {}),
                         },
+                        zIndex: getEffectiveZIndex(el, win),
                     };
                     elements.push(textElement);
                     processed.add(el);
@@ -3923,6 +3971,11 @@ export function parseSlideHtml(doc) {
                 if (hasOpacity && !maskApplied) {
                     imageElement.transparency = Math.round((1 - imgOpacity) * 100);
                 }
+                // Add z-index for stacking order
+                const imgZIndex = getEffectiveZIndex(el, win);
+                if (imgZIndex !== undefined) {
+                    imageElement.zIndex = imgZIndex;
+                }
                 elements.push(imageElement);
                 processed.add(el);
                 return;
@@ -4137,6 +4190,7 @@ export function parseSlideHtml(doc) {
                     },
                     sizing: null,
                     transparency: svgEffectiveOpacity < 1 ? Math.round((1 - svgEffectiveOpacity) * 100) : undefined,
+                    zIndex: getEffectiveZIndex(el, win),
                 };
                 elements.push(imageElement);
                 processed.add(el);
@@ -4228,6 +4282,7 @@ export function parseSlideHtml(doc) {
                                     h: pxToInch(rect.height),
                                 },
                                 sizing: null,
+                                zIndex: getEffectiveZIndex(el, win),
                             };
                             elements.push(imageElement);
                         }
@@ -4270,6 +4325,7 @@ export function parseSlideHtml(doc) {
                                 },
                                 sizing: null,
                                 rectRadius: 0,
+                                zIndex: getEffectiveZIndex(el, win),
                             };
                             elements.push(imgElement);
                             processed.add(el);
@@ -4304,6 +4360,7 @@ export function parseSlideHtml(doc) {
                             },
                             sizing: null,
                             rectRadius: 0,
+                            zIndex: getEffectiveZIndex(el, win),
                         };
                         elements.push(imgElement);
                         hasConicGradientImage = true;
@@ -4400,6 +4457,7 @@ export function parseSlideHtml(doc) {
                             cssTriangle: { direction: triangleDirection },
                             customGeometry: null,
                         },
+                        zIndex: getEffectiveZIndex(el, win),
                     };
                     elements.push(triangleShape);
                     processed.add(el);
@@ -4450,6 +4508,7 @@ export function parseSlideHtml(doc) {
                                 sizing: null,
                                 rectRadius: 0,
                                 transparency: effOp < 1 ? Math.round((1 - effOp) * 100) : undefined,
+                                zIndex: getEffectiveZIndex(el, win),
                             };
                             elements.push(imgElement);
                         }
@@ -4591,6 +4650,7 @@ export function parseSlideHtml(doc) {
                                 cssTriangle: null,
                                 customGeometry: points,
                             },
+                            zIndex: getEffectiveZIndex(el, win),
                         });
                     }
                     else {
@@ -4620,6 +4680,7 @@ export function parseSlideHtml(doc) {
                                 cssTriangle: null,
                                 customGeometry: null,
                             },
+                            zIndex: getEffectiveZIndex(el, win),
                         });
                     }
                 }
@@ -4710,6 +4771,7 @@ export function parseSlideHtml(doc) {
                                 cssTriangle: null,
                                 customGeometry: points,
                             },
+                            zIndex: getEffectiveZIndex(el, win),
                         });
                     }
                     else {
@@ -4738,6 +4800,7 @@ export function parseSlideHtml(doc) {
                                 cssTriangle: null,
                                 customGeometry: null,
                             },
+                            zIndex: getEffectiveZIndex(el, win),
                         });
                     }
                 }
@@ -4825,6 +4888,7 @@ export function parseSlideHtml(doc) {
                                 cssTriangle: null,
                                 customGeometry: points,
                             },
+                            zIndex: getEffectiveZIndex(el, win),
                         });
                     }
                     else {
@@ -4853,6 +4917,7 @@ export function parseSlideHtml(doc) {
                                 cssTriangle: null,
                                 customGeometry: null,
                             },
+                            zIndex: getEffectiveZIndex(el, win),
                         });
                     }
                 }
@@ -4936,6 +5001,7 @@ export function parseSlideHtml(doc) {
                                 cssTriangle: null,
                                 customGeometry: points,
                             },
+                            zIndex: getEffectiveZIndex(el, win),
                         });
                     }
                     else {
@@ -4964,6 +5030,7 @@ export function parseSlideHtml(doc) {
                                 cssTriangle: null,
                                 customGeometry: null,
                             },
+                            zIndex: getEffectiveZIndex(el, win),
                         });
                     }
                 }
@@ -4991,6 +5058,7 @@ export function parseSlideHtml(doc) {
                                         : 'cover',
                                 position: bgImagePosition,
                             },
+                            zIndex: getEffectiveZIndex(el, win),
                         };
                         elements.push(bgImgElement);
                     }
@@ -6252,7 +6320,7 @@ export function parseSlideHtml(doc) {
                                     return points;
                                 })() : null),
                             },
-                            zIndex: extractZIndex(computed),
+                            zIndex: getEffectiveZIndex(el, win),
                         };
                         // Apply CSS padding as text body insets when shape has text content
                         if (hasPadding && shapeElement.style && (shapeText || (shapeTextRuns && shapeTextRuns.length > 0))) {
@@ -6296,6 +6364,67 @@ export function parseSlideHtml(doc) {
                                 tc.querySelectorAll('*').forEach(desc => processed.delete(desc));
                             });
                         }
+                        // When a flex container has direct text nodes that weren't merged into the shape,
+                        // extract them as separate text elements. This handles cases like:
+                        // <div class="flex"><svg>...</svg>Label Text<span>...</span></div>
+                        // where "Label Text" is a direct text node between other elements.
+                        if (!shouldMergeText && hasDirectText && directTextContent) {
+                            // Calculate approximate position for the direct text
+                            // For flex-row, text appears after any preceding elements
+                            // We use a Range to get the exact bounding box of the text nodes
+                            const range = win.document.createRange();
+                            let foundTextNode = false;
+                            // Find the text nodes and calculate their bounding rect
+                            for (const node of Array.from(el.childNodes)) {
+                                if (node.nodeType === Node.TEXT_NODE) {
+                                    const text = (node.textContent || '').trim();
+                                    if (text) {
+                                        if (!foundTextNode) {
+                                            range.setStart(node, 0);
+                                            foundTextNode = true;
+                                        }
+                                        range.setEnd(node, node.textContent?.length || 0);
+                                    }
+                                }
+                            }
+                            if (foundTextNode) {
+                                const textRect = range.getBoundingClientRect();
+                                if (textRect.width > 0 && textRect.height > 0) {
+                                    const isBold = parseInt(computed.fontWeight) >= 600;
+                                    const isItalic = computed.fontStyle === 'italic';
+                                    const isUnderline = computed.textDecoration && computed.textDecoration.includes('underline');
+                                    // Apply text-transform
+                                    let displayText = directTextContent;
+                                    if (computed.textTransform && computed.textTransform !== 'none') {
+                                        displayText = applyTextTransform(displayText, computed.textTransform);
+                                    }
+                                    const directTextElement = {
+                                        type: 'p',
+                                        text: displayText,
+                                        position: {
+                                            x: pxToInch(textRect.left),
+                                            y: pxToInch(textRect.top),
+                                            w: pxToInch(textRect.width),
+                                            h: pxToInch(textRect.height),
+                                        },
+                                        style: {
+                                            fontSize: pxToPoints(computed.fontSize),
+                                            fontFace: extractFontFace(computed.fontFamily),
+                                            color: rgbToHex(computed.color),
+                                            bold: isBold,
+                                            italic: isItalic,
+                                            underline: isUnderline ? true : undefined,
+                                            valign: 'middle',
+                                            align: 'left',
+                                            ...(extractLetterSpacing(computed) !== null ? { charSpacing: extractLetterSpacing(computed) } : {}),
+                                            ...(extractAlpha(computed.color) !== null ? { transparency: extractAlpha(computed.color) } : {}),
+                                        },
+                                        zIndex: getEffectiveZIndex(el, win),
+                                    };
+                                    elements.push(directTextElement);
+                                }
+                            }
+                        }
                         // If we split text from a clipped shape, create a separate text-only shape
                         // Note: PPTX does NOT clip text to custom geometry paths - text is rendered
                         // within the bounding box regardless of the path shape. So we DON'T apply
@@ -6345,6 +6474,7 @@ export function parseSlideHtml(doc) {
                                         cssTriangle: null,
                                         customGeometry: null, // NO custom geometry - PPTX doesn't clip text to paths
                                     },
+                                    zIndex: getEffectiveZIndex(el, win),
                                 };
                                 // Apply CSS padding as text body insets
                                 if (hasPadding && clippedTextShape.style) {
@@ -6387,6 +6517,7 @@ export function parseSlideHtml(doc) {
                                         cssTriangle: null,
                                         customGeometry: null,
                                     },
+                                    zIndex: getEffectiveZIndex(el, win),
                                 };
                                 elements.push(extraShape);
                             }
@@ -6572,6 +6703,66 @@ export function parseSlideHtml(doc) {
                         // Fallback to direct text only if there are structural children
                         extractedText = directText;
                     }
+                    // Handle flex-row containers with direct text nodes AND structural children
+                    // (e.g., <div class="flex"><svg>...</svg>Label Text<span>...</span></div>)
+                    // In this case, extract the direct text nodes as a separate element
+                    // using Range API to get precise positioning
+                    if (isPlainDivFlexRow && directText && hasStructuralChildren) {
+                        // Use Range API to get the bounding box of direct text nodes
+                        const range = win.document.createRange();
+                        let foundTextNode = false;
+                        for (const node of Array.from(el.childNodes)) {
+                            if (node.nodeType === Node.TEXT_NODE) {
+                                const text = (node.textContent || '').trim();
+                                if (text) {
+                                    if (!foundTextNode) {
+                                        range.setStart(node, 0);
+                                        foundTextNode = true;
+                                    }
+                                    range.setEnd(node, node.textContent?.length || 0);
+                                }
+                            }
+                        }
+                        if (foundTextNode) {
+                            const textRect = range.getBoundingClientRect();
+                            if (textRect.width > 0 && textRect.height > 0) {
+                                const computed2 = win.getComputedStyle(el);
+                                const isBold = parseInt(computed2.fontWeight) >= 600;
+                                const isItalic = computed2.fontStyle === 'italic';
+                                const isUnderline = computed2.textDecoration && computed2.textDecoration.includes('underline');
+                                // Apply text-transform
+                                let displayText = directText;
+                                if (computed2.textTransform && computed2.textTransform !== 'none') {
+                                    displayText = applyTextTransform(displayText, computed2.textTransform);
+                                }
+                                const flexDirectTextElement = {
+                                    type: 'p',
+                                    text: displayText,
+                                    position: {
+                                        x: pxToInch(textRect.left),
+                                        y: pxToInch(textRect.top),
+                                        w: pxToInch(textRect.width),
+                                        h: pxToInch(textRect.height),
+                                    },
+                                    style: {
+                                        fontSize: pxToPoints(computed2.fontSize),
+                                        fontFace: extractFontFace(computed2.fontFamily),
+                                        color: rgbToHex(computed2.color),
+                                        bold: isBold,
+                                        italic: isItalic,
+                                        underline: isUnderline ? true : undefined,
+                                        valign: 'middle',
+                                        align: 'left',
+                                        ...(extractLetterSpacing(computed2) !== null ? { charSpacing: extractLetterSpacing(computed2) } : {}),
+                                        ...(extractAlpha(computed2.color) !== null ? { transparency: extractAlpha(computed2.color) } : {}),
+                                    },
+                                    zIndex: getEffectiveZIndex(el, win),
+                                };
+                                elements.push(flexDirectTextElement);
+                                // Don't mark as processed - structural children still need extraction
+                            }
+                        }
+                    }
                     if (extractedText && !hasStructuralChildren) {
                         const computed2 = win.getComputedStyle(el);
                         const fontSizePx = parseFloat(computed2.fontSize);
@@ -6752,6 +6943,7 @@ export function parseSlideHtml(doc) {
                                     ? [paddingLeft * PT_PER_PX, paddingRight * PT_PER_PX, paddingBottom * PT_PER_PX, paddingTop * PT_PER_PX]
                                     : undefined,
                             },
+                            zIndex: getEffectiveZIndex(el, win),
                         };
                         // Set element-level transparency (computed from color alpha + CSS opacity)
                         // This mirrors what we set in baseRunOptions.transparency but also
@@ -6862,6 +7054,7 @@ export function parseSlideHtml(doc) {
                             valign: 'top',
                             lineSpacing: pxToPoints(liComputed.lineHeight),
                         },
+                        zIndex: getEffectiveZIndex(liEl, win),
                     };
                     elements.push(textElement);
                     processed.add(liEl);
@@ -6915,6 +7108,7 @@ export function parseSlideHtml(doc) {
                     paraSpaceAfter: pxToPoints(liComputed.marginBottom),
                     margin: [marginLeft, 0, 0, 0],
                 },
+                zIndex: getEffectiveZIndex(el, win),
             };
             elements.push(listElement);
             liElements.forEach((li) => processed.add(li));
@@ -7240,6 +7434,7 @@ export function parseSlideHtml(doc) {
                 text: runs,
                 position: { x: pxToInch(x), y: pxToInch(y), w: pxToInch(w), h: pxToInch(h) },
                 style: baseStyle,
+                zIndex: getEffectiveZIndex(el, win),
             };
             elements.push(textElement);
         }
@@ -7257,6 +7452,7 @@ export function parseSlideHtml(doc) {
                     italic: computed.fontStyle === 'italic',
                     underline: computed.textDecoration.includes('underline'),
                 },
+                zIndex: getEffectiveZIndex(el, win),
             };
             elements.push(textElement);
         }
@@ -7298,11 +7494,18 @@ export function parseSlideHtml(doc) {
     // PPTX renders shapes in XML order (later = on top), so we sort by z-index
     // to ensure elements with higher z-index appear later in the array.
     // Elements without z-index (undefined) are treated as z-index: 0.
-    elements.sort((a, b) => {
-        const zIndexA = ('zIndex' in a && a.zIndex !== undefined) ? a.zIndex : 0;
-        const zIndexB = ('zIndex' in b && b.zIndex !== undefined) ? b.zIndex : 0;
-        return zIndexA - zIndexB;
+    // When z-indexes are equal, preserve DOM order (original array order) as tiebreaker.
+    const indexedElements = elements.map((el, i) => ({ el, originalIndex: i }));
+    indexedElements.sort((a, b) => {
+        const zIndexA = ('zIndex' in a.el && a.el.zIndex !== undefined) ? a.el.zIndex : 0;
+        const zIndexB = ('zIndex' in b.el && b.el.zIndex !== undefined) ? b.el.zIndex : 0;
+        if (zIndexA !== zIndexB) {
+            return zIndexA - zIndexB;
+        }
+        // When z-indexes are equal, preserve DOM order
+        return a.originalIndex - b.originalIndex;
     });
-    return { background, elements, placeholders, errors };
+    const sortedElements = indexedElements.map(item => item.el);
+    return { background, elements: sortedElements, placeholders, errors };
 }
 //# sourceMappingURL=parse.js.map