docgen-utils 1.0.20 → 1.0.21

package/dist/packages/docs/parse.js

@@ -6,11 +6,37 @@ import { parseHeadingLevel, getTextAlignment, getTextContent, BLOCK_LEVEL_TAGS,
 import { isInlineOnlyContainer, extractInlineRuns, hasInlineFormatting } from "./parse-inline";
 import { isGridOrFlexContainer, isHorizontalFlexContainer, isDecorativeSvg, isTwoColumnGridLayout, findTwoColumnChildren, detectFlexEqualColumns, detectGridEqualColumns } from "./parse-layout";
 import { detectSkillItem, detectLanguageItem, detectProgressBar, detectTimeline } from "./parse-special";
+function createParsedImageElement(imageEl, imageKey) {
+    const src = imageEl.getAttribute("src")?.trim();
+    if (!src) {
+        return null;
+    }
+    const alt = imageEl.getAttribute("alt") || undefined;
+    let width;
+    let height;
+    const widthAttr = imageEl.getAttribute("width");
+    const heightAttr = imageEl.getAttribute("height");
+    if (widthAttr && !widthAttr.includes("%")) {
+        width = parseInt(widthAttr, 10) || undefined;
+    }
+    if (heightAttr && !heightAttr.includes("%")) {
+        height = parseInt(heightAttr, 10) || undefined;
+    }
+    let caption;
+    const parentFigure = imageEl.closest("figure");
+    if (parentFigure) {
+        const figcaption = parentFigure.querySelector("figcaption");
+        if (figcaption) {
+            caption = getTextContent(figcaption).trim() || undefined;
+        }
+    }
+    return { type: "image", imageKey, src, alt, width, height, caption };
+}
 /**
  * Parse content from a container element (like sidebar or main content).
  * Handles headings, paragraphs, lists, and nested containers with color inheritance.
  */
-function parseContainerContent(element, cssContext, inheritedColor) {
+function parseContainerContent(element, cssContext, nextImageKey, inheritedColor) {
     const innerElements = [];
     function processInnerNode(node, color) {
         if (node.nodeType === Node.TEXT_NODE) {
@@ -236,7 +262,7 @@ function parseContainerContent(element, cssContext, inheritedColor) {
  * @param element The blockquote/callout element
  * @param cssContext The CSS context for resolving styles
  */
-function parseBlockquoteContent(element, cssContext) {
+function parseBlockquoteContent(element, cssContext, nextImageKey) {
     const innerElements = [];
     // GENERALIZED: Extract blockquote's font-style from CSS element selector
     // This handles rules like "blockquote { font-style: italic; }"
@@ -374,7 +400,7 @@ function parseBlockquoteContent(element, cssContext) {
                 const nestedBorderHex = extractBorderColorFromStyle(styles);
                 // Only treat as nested blockquote if it has a visually distinct background or border
                 if (nestedBgColor || nestedBorderHex) {
-                    const nestedContent = parseBlockquoteContent(el, cssContext);
+                    const nestedContent = parseBlockquoteContent(el, cssContext, nextImageKey);
                     if (nestedContent.length > 0) {
                         let nestedBorderStyle;
                         if (styles.borderLeft && !styles.border) {
@@ -436,29 +462,9 @@ function parseBlockquoteContent(element, cssContext) {
         }
         // Handle <img> elements inside blockquotes/callouts
         if (tagName === "img") {
-            const src = el.getAttribute("src")?.trim();
-            if (src) {
-                const alt = el.getAttribute("alt") || undefined;
-                let width;
-                let height;
-                const widthAttr = el.getAttribute("width");
-                const heightAttr = el.getAttribute("height");
-                if (widthAttr && !widthAttr.includes("%")) {
-                    width = parseInt(widthAttr, 10) || undefined;
-                }
-                if (heightAttr && !heightAttr.includes("%")) {
-                    height = parseInt(heightAttr, 10) || undefined;
-                }
-                // Check if img is inside a figure with figcaption
-                let caption;
-                const parentFigure = el.closest("figure");
-                if (parentFigure) {
-                    const figcaption = parentFigure.querySelector("figcaption");
-                    if (figcaption) {
-                        caption = getTextContent(figcaption).trim() || undefined;
-                    }
-                }
-                innerElements.push({ type: "image", src, alt, width, height, caption });
+            const imageElement = createParsedImageElement(el, nextImageKey());
+            if (imageElement) {
+                innerElements.push(imageElement);
             }
             return;
         }
@@ -664,6 +670,8 @@ export function parseHtmlContent(html) {
     const cssContext = parseCssContext(doc);
     // Track SVGs that have been processed (to avoid duplicate processing)
     const processedSvgs = new Set();
+    let imageIndex = 0;
+    const nextImageKey = () => `image-${imageIndex++}`;
     const { body } = doc;
     function processNode(node, inheritedAlignment, inheritedColor) {
         if (node.nodeType === Node.TEXT_NODE) {
@@ -862,7 +870,7 @@ export function parseHtmlContent(html) {
         // This handles patterns like: <p class="intro-section"> with border-left: 4px solid ...
         // Must come BEFORE regular paragraph handling
         if (tagName === "p" && isBlockquoteOrCallout(element, cssContext)) {
-            const content = parseBlockquoteContent(element, cssContext);
+            const content = parseBlockquoteContent(element, cssContext, nextImageKey);
             if (content.length > 0) {
                 const elementStyles = getElementStyles(element, cssContext);
                 let borderColor;
@@ -1361,8 +1369,8 @@ export function parseHtmlContent(html) {
                         ? extractHexColor(sidebarStyles.color)
                         : undefined;
                     // Parse sidebar and main content separately
-                    const sidebarContent = parseContainerContent(sidebarEl, cssContext, sidebarTextColor);
-                    const mainContent = parseContainerContent(mainEl, cssContext);
+                    const sidebarContent = parseContainerContent(sidebarEl, cssContext, nextImageKey, sidebarTextColor);
+                    const mainContent = parseContainerContent(mainEl, cssContext, nextImageKey);
                     if (sidebarContent.length > 0 || mainContent.length > 0) {
                         // Emit two-column layout for documents with sidebar patterns.
                         // This produces a DOCX table with sidebar + main content columns,
@@ -1435,7 +1443,7 @@ export function parseHtmlContent(html) {
                 // Parse each column's content
                 const columnContents = [];
                 for (const col of gridColumns) {
-                    const colContent = parseContainerContent(col, cssContext);
+                    const colContent = parseContainerContent(col, cssContext, nextImageKey);
                     columnContents.push(colContent);
                 }
                 // Check if at least one column has content
@@ -1927,32 +1935,9 @@ export function parseHtmlContent(html) {
         }
         // Handle <img> elements - external images that need to be fetched
         if (tagName === "img") {
-            const src = element.getAttribute("src")?.trim();
-            if (src) {
-                const alt = element.getAttribute("alt") || undefined;
-                // Extract width and height from attributes only
-                // Computed styles are not available in linkedom (Node.js)
-                // Actual dimensions will be obtained when the image is fetched
-                let width;
-                let height;
-                const widthAttr = element.getAttribute("width");
-                const heightAttr = element.getAttribute("height");
-                if (widthAttr && !widthAttr.includes("%")) {
-                    width = parseInt(widthAttr, 10) || undefined;
-                }
-                if (heightAttr && !heightAttr.includes("%")) {
-                    height = parseInt(heightAttr, 10) || undefined;
-                }
-                // Check if img is inside a figure with figcaption
-                let caption;
-                const parentFigure = element.closest("figure");
-                if (parentFigure) {
-                    const figcaption = parentFigure.querySelector("figcaption");
-                    if (figcaption) {
-                        caption = getTextContent(figcaption).trim() || undefined;
-                    }
-                }
-                elements.push({ type: "image", src, alt, width, height, caption });
+            const imageElement = createParsedImageElement(element, nextImageKey());
+            if (imageElement) {
+                elements.push(imageElement);
             }
             return;
         }
@@ -1961,30 +1946,9 @@ export function parseHtmlContent(html) {
             // Find the fallback img inside picture
             const imgEl = element.querySelector("img");
             if (imgEl) {
-                const src = imgEl.getAttribute("src")?.trim();
-                if (src) {
-                    const alt = imgEl.getAttribute("alt") || undefined;
-                    // Extract width and height
-                    let width;
-                    let height;
-                    const widthAttr = imgEl.getAttribute("width");
-                    const heightAttr = imgEl.getAttribute("height");
-                    if (widthAttr && !widthAttr.includes("%")) {
-                        width = parseInt(widthAttr, 10) || undefined;
-                    }
-                    if (heightAttr && !heightAttr.includes("%")) {
-                        height = parseInt(heightAttr, 10) || undefined;
-                    }
-                    // Check for figcaption
-                    let caption;
-                    const parentFigure = element.closest("figure");
-                    if (parentFigure) {
-                        const figcaption = parentFigure.querySelector("figcaption");
-                        if (figcaption) {
-                            caption = getTextContent(figcaption).trim() || undefined;
-                        }
-                    }
-                    elements.push({ type: "image", src, alt, width, height, caption });
+                const imageElement = createParsedImageElement(imgEl, nextImageKey());
+                if (imageElement) {
+                    elements.push(imageElement);
                 }
             }
             return;
@@ -1993,29 +1957,9 @@ export function parseHtmlContent(html) {
         if (tagName === "figure") {
             const imgEl = element.querySelector("img") || element.querySelector("picture img");
             if (imgEl) {
-                const src = imgEl.getAttribute("src")?.trim();
-                if (src) {
-                    const alt = imgEl.getAttribute("alt") || undefined;
-                    // Extract width and height from attributes only
-                    // Computed styles are not available in linkedom (Node.js)
-                    // Actual dimensions will be obtained when the image is fetched
-                    let width;
-                    let height;
-                    const widthAttr = imgEl.getAttribute("width");
-                    const heightAttr = imgEl.getAttribute("height");
-                    if (widthAttr && !widthAttr.includes("%")) {
-                        width = parseInt(widthAttr, 10) || undefined;
-                    }
-                    if (heightAttr && !heightAttr.includes("%")) {
-                        height = parseInt(heightAttr, 10) || undefined;
-                    }
-                    // Extract caption from figcaption
-                    let caption;
-                    const figcaption = element.querySelector("figcaption");
-                    if (figcaption) {
-                        caption = getTextContent(figcaption).trim() || undefined;
-                    }
-                    elements.push({ type: "image", src, alt, width, height, caption });
+                const imageElement = createParsedImageElement(imgEl, nextImageKey());
+                if (imageElement) {
+                    elements.push(imageElement);
                     return;
                 }
             }
@@ -2031,7 +1975,7 @@ export function parseHtmlContent(html) {
         // Check for blockquote/callout before generic container handling
         // Uses style-based detection, NOT class names
         if (isBlockquoteOrCallout(element, cssContext)) {
-            const content = parseBlockquoteContent(element, cssContext);
+            const content = parseBlockquoteContent(element, cssContext, nextImageKey);
             if (content.length > 0) {
                 // Extract styling from CSS classes and inline styles (generalized approach)
                 const elementStyles = getElementStyles(element, cssContext);