docgen-utils 1.0.19 → 1.0.21

package/dist/packages/slides/parse.js

@@ -19,21 +19,21 @@ const PX_PER_IN = 96;
 // ---------------------------------------------------------------------------
 const SINGLE_WEIGHT_FONTS = ['impact'];
 // ---------------------------------------------------------------------------
-// Exported helper functions
+// Internal helper functions
 // ---------------------------------------------------------------------------
 /** Convert pixel value to inches. */
-export function pxToInch(px) {
+function pxToInch(px) {
     return px / PX_PER_IN;
 }
 /** Convert a CSS pixel string (e.g. "16px") to points. */
-export function pxToPoints(pxStr) {
+function pxToPoints(pxStr) {
     return parseFloat(pxStr) * PT_PER_PX;
 }
 /**
  * Convert an `rgb()` / `rgba()` color string to a 6-char hex string.
  * Returns `'FFFFFF'` for transparent or unparseable values.
  */
-export function rgbToHex(rgbStr) {
+function rgbToHex(rgbStr) {
     // Remove !important suffix if present
     rgbStr = rgbStr.replace(/\s*!important\s*$/i, '').trim();
     if (rgbStr === 'rgba(0, 0, 0, 0)' || rgbStr === 'transparent')
@@ -64,7 +64,7 @@ function isFullyTransparent(colorStr) {
  * Extract transparency percentage from an `rgba()` string.
  * Returns `null` for opaque or non-rgba values, otherwise 0-100.
  */
-export function extractAlpha(rgbStr) {
+function extractAlpha(rgbStr) {
     const match = rgbStr.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
     if (!match || !match[4])
         return null;
@@ -354,7 +354,7 @@ function renderRepeatingGradientPatternAsImage(bgImage, bgSize, bgPosition, widt
     }
 }
 // ---------------------------------------------------------------------------
-// parseCssGradient  (exported, used by other modules)
+// parseCssGradient  (internal, used within this module)
 // ---------------------------------------------------------------------------
 /**
  * Parse a CSS gradient string (`linear-gradient(...)` or `radial-gradient(...)`)
@@ -362,7 +362,7 @@ function renderRepeatingGradientPatternAsImage(bgImage, bgSize, bgPosition, widt
  *
  * Returns `null` if the string does not contain a recognized gradient.
  */
-export function parseCssGradient(gradientStr) {
+function parseCssGradient(gradientStr) {
     const colorToHex = (colorStr) => {
         colorStr = colorStr.trim().toLowerCase();
         // Remove !important suffix if present
@@ -444,10 +444,30 @@ export function parseCssGradient(gradientStr) {
         }
         return null;
     };
+    // Shared helper: parse color stops from a gradient parts array.
+    // Prevents divide-by-zero when there is only one color stop.
+    const parseColorStops = (colorStops) => {
+        return colorStops.map((stop, idx) => {
+            const posMatch = stop.match(/([\d.]+)%\s*$/);
+            const position = posMatch
+                ? parseFloat(posMatch[1])
+                : (idx / Math.max(colorStops.length - 1, 1)) * 100;
+            const colorPart = posMatch
+                ? stop.replace(/([\d.]+)%\s*$/, '').trim()
+                : stop.trim();
+            const stopData = { color: colorToHex(colorPart), position };
+            const transparency = extractTransparency(colorPart);
+            if (transparency !== null)
+                stopData.transparency = transparency;
+            return stopData;
+        });
+    };
     // Try linear-gradient
     const linearContent = extractGradientContent(gradientStr, 'linear-gradient(');
     if (linearContent) {
         const parts = splitGradientParts(linearContent);
+        if (parts.length === 0)
+            return null;
         let cssAngle = 180;
         let colorStops = parts;
         const angleMatch = parts[0].match(/^([\d.]+)deg$/);
@@ -474,26 +494,15 @@ export function parseCssGradient(gradientStr) {
             cssAngle = dirMap[dir] ?? 180;
             colorStops = parts.slice(1);
         }
-        const stops = colorStops.map((stop, idx) => {
-            const posMatch = stop.match(/([\d.]+)%\s*$/);
-            const position = posMatch
-                ? parseFloat(posMatch[1])
-                : (idx / (colorStops.length - 1)) * 100;
-            const colorPart = posMatch
-                ? stop.replace(/([\d.]+)%\s*$/, '').trim()
-                : stop.trim();
-            const stopData = { color: colorToHex(colorPart), position };
-            const transparency = extractTransparency(colorPart);
-            if (transparency !== null)
-                stopData.transparency = transparency;
-            return stopData;
-        });
+        const stops = parseColorStops(colorStops);
         return { type: 'linear', angle: cssAngle, stops };
     }
     // Try radial-gradient
     const radialContent = extractGradientContent(gradientStr, 'radial-gradient(');
     if (radialContent) {
         const parts = splitGradientParts(radialContent);
+        if (parts.length === 0)
+            return null;
         let centerX = 50;
         let centerY = 50;
         let colorStops = parts;
@@ -506,20 +515,7 @@ export function parseCssGradient(gradientStr) {
         else if (parts[0].includes('circle') || parts[0].includes('ellipse')) {
             colorStops = parts.slice(1);
         }
-        const stops = colorStops.map((stop, idx) => {
-            const posMatch2 = stop.match(/([\d.]+)%\s*$/);
-            const position = posMatch2
-                ? parseFloat(posMatch2[1])
-                : (idx / (colorStops.length - 1)) * 100;
-            const colorPart = posMatch2
-                ? stop.replace(/([\d.]+)%\s*$/, '').trim()
-                : stop.trim();
-            const stopData = { color: colorToHex(colorPart), position };
-            const transparency = extractTransparency(colorPart);
-            if (transparency !== null)
-                stopData.transparency = transparency;
-            return stopData;
-        });
+        const stops = parseColorStops(colorStops);
         return { type: 'radial', centerX, centerY, stops };
     }
     return null;
@@ -1599,8 +1595,18 @@ function extractPseudoElements(el, win) {
             // the element's content area.
         }
         // Convert to absolute page coordinates
-        const absLeft = parentRect.left + pLeft;
-        const absTop = parentRect.top + pTop;
+        // For absolutely positioned pseudo-elements, CSS left/top values are relative
+        // to the padding box (inside the border), but getBoundingClientRect() returns
+        // the border box. We need to add the parent's border widths to get correct positioning.
+        const parentComputedForBorder = win.getComputedStyle(el);
+        let borderOffsetLeft = 0;
+        let borderOffsetTop = 0;
+        if (pseudoPos === 'absolute' || pseudoPos === 'fixed') {
+            borderOffsetLeft = parseFloat(parentComputedForBorder.borderLeftWidth) || 0;
+            borderOffsetTop = parseFloat(parentComputedForBorder.borderTopWidth) || 0;
+        }
+        const absLeft = parentRect.left + pLeft + borderOffsetLeft;
+        const absTop = parentRect.top + pTop + borderOffsetTop;
         // Check for visual content: background color, gradient, or border
         const hasBg = pComputed.backgroundColor && pComputed.backgroundColor !== 'rgba(0, 0, 0, 0)';
         const bgImage = pComputed.backgroundImage;
@@ -1611,7 +1617,7 @@ function extractPseudoElements(el, win) {
             continue;
         // Parse gradient(s) — a single background-image property may contain multiple gradients
         let gradient = null;
-        let extraPseudoGradients = [];
+        const extraPseudoGradients = [];
         if (hasGradient) {
             const gradParts = splitCssBackgroundGradients(bgImage);
             if (gradParts.length > 0)
@@ -2597,7 +2603,7 @@ export function parseSlideHtml(doc) {
             }
             const hasBg = computed.backgroundColor && computed.backgroundColor !== 'rgba(0, 0, 0, 0)';
             // Check for clip-path: polygon() — store for custom geometry
-            const clipPathValue = computed.clipPath || computed.webkitClipPath;
+            const clipPathValue = computed.clipPath || computed.webkitClipPath || '';
             const clipPathPolygon = parseClipPathPolygon(clipPathValue);
             // Check for background images or gradients
             const elBgImage = computed.backgroundImage;
@@ -2605,7 +2611,7 @@ export function parseSlideHtml(doc) {
             let bgImageSize = null;
             let bgImagePosition = null;
             let bgGradient = null;
-            let extraDivGradients = [];
+            const extraDivGradients = [];
             if (elBgImage && elBgImage !== 'none') {
                 if (elBgImage.includes('linear-gradient') ||
                     elBgImage.includes('radial-gradient')) {
@@ -2848,7 +2854,7 @@ export function parseSlideHtml(doc) {
                     const alignItems = computed.alignItems;
                     const justifyContent = computed.justifyContent;
                     let valign = 'top';
-                    let align = 'left';
+                    let align;
                     if (isFlexContainer) {
                         const flexDirection = computed.flexDirection || 'row';
                         if (flexDirection === 'row' || flexDirection === 'row-reverse') {
@@ -3583,11 +3589,67 @@ export function parseSlideHtml(doc) {
                 // and process each child element (SVGs, spans, text nodes) individually
                 return;
             }
+            // For lists with custom bullets via ::before pseudo-elements (list-style: none
+            // with padding-left on li), process each li as its own text element.
+            // This ensures each li's ::before renders at the correct position relative
+            // to its own li bounding box, avoiding text/bullet overlap.
+            const hasCustomPseudoBullets = !hasNativeBullets && liElements.some((li) => {
+                const liComputed = win.getComputedStyle(li);
+                const liPadding = parseFloat(liComputed.paddingLeft) || 0;
+                // Check if li has position:relative (needed for absolute ::before positioning)
+                // and has padding-left (space for the bullet)
+                return liComputed.position === 'relative' && liPadding > 0;
+            });
+            if (hasCustomPseudoBullets) {
+                // Process each li as a separate text element
+                // The ::before pseudo-elements will be extracted in the second pass
+                liElements.forEach((li) => {
+                    const liEl = li;
+                    const liRect = liEl.getBoundingClientRect();
+                    if (liRect.width === 0 || liRect.height === 0)
+                        return;
+                    const liComputed = win.getComputedStyle(liEl);
+                    const liPaddingLeft = parseFloat(liComputed.paddingLeft) || 0;
+                    // Get the text content, offset by padding-left
+                    const textLeft = liRect.left + liPaddingLeft;
+                    const textWidth = liRect.width - liPaddingLeft;
+                    const runs = parseInlineFormatting(liEl, { breakLine: false }, [], (x) => x, win);
+                    if (runs.length === 0)
+                        return;
+                    // Strip any leading bullet characters that might have been left over
+                    runs[0].text = runs[0].text.replace(/^[•\-*\u25AA\u25B8]\s*/, '');
+                    const textElement = {
+                        type: 'p',
+                        text: runs,
+                        position: {
+                            x: pxToInch(textLeft),
+                            y: pxToInch(liRect.top),
+                            w: pxToInch(textWidth),
+                            h: pxToInch(liRect.height),
+                        },
+                        style: {
+                            fontSize: pxToPoints(liComputed.fontSize),
+                            fontFace: extractFontFace(liComputed.fontFamily),
+                            color: rgbToHex(liComputed.color),
+                            transparency: extractAlpha(liComputed.color),
+                            align: liComputed.textAlign === 'start'
+                                ? 'left'
+                                : liComputed.textAlign,
+                            valign: 'top',
+                            lineSpacing: pxToPoints(liComputed.lineHeight),
+                        },
+                    };
+                    elements.push(textElement);
+                    processed.add(liEl);
+                });
+                processed.add(el);
+                return;
+            }
             liElements.forEach((li, idx) => {
                 const isLast = idx === liElements.length - 1;
                 const runs = parseInlineFormatting(li, { breakLine: false }, [], (x) => x, win);
                 if (runs.length > 0) {
-                    runs[0].text = runs[0].text.replace(/^[•\-\*\u25AA\u25B8]\s*/, '');
+                    runs[0].text = runs[0].text.replace(/^[•\-*\u25AA\u25B8]\s*/, '');
                     if (hasNativeBullets) {
                         runs[0].options.bullet = { indent: textIndent };
                     }
@@ -3720,7 +3782,7 @@ export function parseSlideHtml(doc) {
             }
         }
         if (el.tagName !== 'LI' &&
-            /^[•\-\*\u25AA\u25B8\u25CB\u25CF\u25C6\u25C7\u25A0\u25A1]\s/.test(text.trimStart())) {
+            /^[•\-*\u25AA\u25B8\u25CB\u25CF\u25C6\u25C7\u25A0\u25A1]\s/.test(text.trimStart())) {
             errors.push(`Text element <${el.tagName.toLowerCase()}> starts with bullet symbol "${text.substring(0, 20)}...". ` +
                 'Use <ul> or <ol> lists instead of manual bullet symbols.');
             return;
@@ -3730,7 +3792,7 @@ export function parseSlideHtml(doc) {
         const fontSizePx = parseFloat(computed.fontSize);
         const lineHeightPx = parseFloat(computed.lineHeight);
         const lineHeightMultiplier = fontSizePx > 0 && !isNaN(lineHeightPx) ? lineHeightPx / fontSizePx : 1.0;
-        let textAlign = computed.textAlign === 'start' ? 'left' : computed.textAlign;
+        const textAlign = computed.textAlign === 'start' ? 'left' : computed.textAlign;
         let valign = null;
         const checkFlexParent = (parent) => {
             if (!parent)