docgen-utils 1.0.20 → 1.0.22

package/dist/packages/docs/parse.js

@@ -6,11 +6,93 @@ 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";
+/**
+ * Get direct child rows of a table element (not nested table rows).
+ * Handles tbody, thead, tfoot containers.
+ */
+function getDirectRows(tableEl) {
+    const result = [];
+    for (const child of tableEl.children) {
+        const childTag = child.tagName.toLowerCase();
+        if (childTag === "tr") {
+            result.push(child);
+        }
+        else if (childTag === "thead" || childTag === "tbody" || childTag === "tfoot") {
+            for (const grandchild of child.children) {
+                if (grandchild.tagName.toLowerCase() === "tr") {
+                    result.push(grandchild);
+                }
+            }
+        }
+    }
+    return result;
+}
+/**
+ * Get direct child cells of a row element (not nested cells).
+ */
+function getDirectCells(rowEl) {
+    const result = [];
+    for (const child of rowEl.children) {
+        const childTag = child.tagName.toLowerCase();
+        if (childTag === "td" || childTag === "th") {
+            result.push(child);
+        }
+    }
+    return result;
+}
+/**
+ * Check if a table cell contains nested tables (complex content).
+ */
+function cellHasNestedTable(cellEl) {
+    return cellEl.querySelector("table") !== null;
+}
+/**
+ * Check if table has border:none style (layout table).
+ */
+function isLayoutTable(tableEl, cssContext) {
+    const styles = getElementStyles(tableEl, cssContext);
+    // Check inline style
+    const inlineStyle = tableEl.getAttribute("style") || "";
+    if (inlineStyle.includes("border: none") || inlineStyle.includes("border:none")) {
+        return true;
+    }
+    // Check CSS class-based border:none
+    if (styles.border && styles.border.includes("none")) {
+        return true;
+    }
+    return false;
+}
+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) {
@@ -105,20 +187,60 @@ function parseContainerContent(element, cssContext, inheritedColor) {
         // Handle tables
         if (tagName === "table") {
             const rows = [];
-            for (const tr of el.querySelectorAll("tr")) {
+            const directRows = getDirectRows(el);
+            for (const tr of directRows) {
                 const cells = [];
-                for (const cell of tr.querySelectorAll("td, th")) {
+                const directCells = getDirectCells(tr);
+                for (const cell of directCells) {
+                    // Extract cell-level background color (same logic as main table parsing)
+                    let cellBackgroundColor;
+                    // Method 1: Check cell's direct class-based styles
+                    const cellStyles = getElementStyles(cell, cssContext, tr);
+                    if (cellStyles.backgroundColor) {
+                        const hexBg = extractHexColor(cellStyles.backgroundColor);
+                        if (hexBg)
+                            cellBackgroundColor = hexBg;
+                    }
+                    // Method 2: Check inline style on the cell
+                    if (!cellBackgroundColor) {
+                        const inlineStyle = cell.getAttribute("style") || "";
+                        if (inlineStyle) {
+                            const bgMatch = inlineStyle.match(/background(?:-color)?\s*:\s*([^;]+)/i);
+                            if (bgMatch) {
+                                const hexBg = extractHexColor(bgMatch[1]);
+                                if (hexBg)
+                                    cellBackgroundColor = hexBg;
+                            }
+                        }
+                    }
                     const runs = extractInlineRuns(cell, cssContext);
-                    if (runs.length > 0) {
-                        if (hasInlineFormatting(runs)) {
-                            cells.push(runs);
+                    // If cell has background color, wrap in StyledTableCell
+                    if (cellBackgroundColor) {
+                        if (runs.length > 0) {
+                            if (hasInlineFormatting(runs)) {
+                                cells.push({ content: runs, backgroundColor: cellBackgroundColor });
+                            }
+                            else {
+                                cells.push({ content: runs.map((r) => r.text).join(""), backgroundColor: cellBackgroundColor });
+                            }
                         }
                         else {
-                            cells.push(runs.map((r) => r.text).join(""));
+                            cells.push({ content: "", backgroundColor: cellBackgroundColor });
                         }
                     }
                     else {
-                        cells.push("");
+                        // No cell background - use simple format
+                        if (runs.length > 0) {
+                            if (hasInlineFormatting(runs)) {
+                                cells.push(runs);
+                            }
+                            else {
+                                cells.push(runs.map((r) => r.text).join(""));
+                            }
+                        }
+                        else {
+                            cells.push("");
+                        }
                     }
                 }
                 if (cells.length > 0) {
@@ -236,7 +358,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 +496,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 +558,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 +766,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 +966,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;
@@ -1118,23 +1222,91 @@ export function parseHtmlContent(html) {
         }
         if (tagName === "table") {
             const rows = [];
-            for (const tr of element.querySelectorAll("tr")) {
+            // Use direct children traversal to avoid flattening nested tables
+            const directRows = getDirectRows(element);
+            for (const tr of directRows) {
                 const cells = [];
-                for (const cell of tr.querySelectorAll("td, th")) {
-                    // Extract inline runs to preserve bold/italic formatting in cells
-                    const runs = extractInlineRuns(cell, cssContext);
-                    if (runs.length > 0) {
-                        if (hasInlineFormatting(runs)) {
-                            // Has formatting - store as runs
-                            cells.push(runs);
+                const directCells = getDirectCells(tr);
+                for (const cell of directCells) {
+                    // Check if cell contains nested table (complex content)
+                    if (cellHasNestedTable(cell)) {
+                        // Parse cell content recursively for nested tables
+                        const nestedContent = parseContainerContent(cell, cssContext, nextImageKey);
+                        if (nestedContent.length > 0) {
+                            cells.push({ content: nestedContent });
                         }
                         else {
-                            // Plain text - store as string
-                            cells.push(runs.map((r) => r.text).join(""));
+                            cells.push("");
                         }
                     }
                     else {
-                        cells.push("");
+                        // Extract cell-level background color from CSS
+                        // This handles nested selectors like .charges-table th or .charges-table tr.row-even td
+                        let cellBackgroundColor;
+                        // Method 1: Check cell's direct styles with row as parent
+                        // This handles .row-class td { ... } patterns
+                        const cellStylesWithRowParent = getElementStyles(cell, cssContext, tr);
+                        if (cellStylesWithRowParent.backgroundColor) {
+                            const hexBg = extractHexColor(cellStylesWithRowParent.backgroundColor);
+                            if (hexBg)
+                                cellBackgroundColor = hexBg;
+                        }
+                        // Method 2: Check cell's styles with TABLE as parent
+                        // This handles .table-class th { ... } and .table-class td { ... } patterns
+                        if (!cellBackgroundColor) {
+                            const cellStylesWithTableParent = getElementStyles(cell, cssContext, element);
+                            if (cellStylesWithTableParent.backgroundColor) {
+                                const hexBg = extractHexColor(cellStylesWithTableParent.backgroundColor);
+                                if (hexBg)
+                                    cellBackgroundColor = hexBg;
+                            }
+                        }
+                        // Method 3: Check inline style on the cell
+                        const inlineStyle = cell.getAttribute("style") || "";
+                        if (inlineStyle && !cellBackgroundColor) {
+                            const bgMatch = inlineStyle.match(/background(?:-color)?\s*:\s*([^;]+)/i);
+                            if (bgMatch) {
+                                const hexBg = extractHexColor(bgMatch[1]);
+                                if (hexBg)
+                                    cellBackgroundColor = hexBg;
+                            }
+                        }
+                        // NOTE: Multi-level nested selectors like ".charges-table tr.row-even td { ... }" are now
+                        // handled by the general ancestor walk in getElementStyles(). The nestedSelectorPattern
+                        // extracts the row class (row-even) as the parent for td styles, and getElementStyles()
+                        // finds tr.row-even as an ancestor of td when walking up the DOM tree.
+                        // Extract inline runs to preserve bold/italic formatting in cells
+                        const runs = extractInlineRuns(cell, cssContext);
+                        // If cell has background color, wrap in StyledTableCell
+                        if (cellBackgroundColor) {
+                            if (runs.length > 0) {
+                                if (hasInlineFormatting(runs)) {
+                                    cells.push({ content: runs, backgroundColor: cellBackgroundColor });
+                                }
+                                else {
+                                    cells.push({ content: runs.map((r) => r.text).join(""), backgroundColor: cellBackgroundColor });
+                                }
+                            }
+                            else {
+                                cells.push({ content: "", backgroundColor: cellBackgroundColor });
+                            }
+                        }
+                        else {
+                            // No cell background - use simple format
+                            if (runs.length > 0) {
+                                if (hasInlineFormatting(runs)) {
+                                    // Has formatting - store as runs
+                                    cells.push(runs);
+                                }
+                                else {
+                                    // Plain text - store as string
+                                    cells.push(runs.map((r) => r.text).join(""));
+                                }
+                            }
+                            else {
+                                cells.push("");
+                            }
+                        }
                     }
                 }
                 if (cells.length > 0) {
@@ -1306,7 +1478,9 @@ export function parseHtmlContent(html) {
                         }
                     }
                 }
-                elements.push({ type: "table", rows, cellPadding, headerBackgroundColor, headerTextColor, evenRowBackgroundColor, hasHeader: hasExplicitHeader ? true : undefined, horizontalBordersOnly: horizontalBordersOnly || undefined, columnWidths: calculateColumnWidths(rows, element) });
+                // Detect noBorders layout tables (tables with border:none for pure layout)
+                const noBorders = isLayoutTable(element, cssContext);
+                elements.push({ type: "table", rows, cellPadding, headerBackgroundColor, headerTextColor, evenRowBackgroundColor, hasHeader: hasExplicitHeader ? true : undefined, horizontalBordersOnly: horizontalBordersOnly || undefined, noBorders: noBorders || undefined, columnWidths: calculateColumnWidths(rows, element) });
             }
             return;
         }
@@ -1361,8 +1535,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 +1609,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 +2101,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 +2112,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 +2123,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 +2141,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);