docgen-utils 1.0.18 → 1.0.20

package/dist/packages/docs/import-docx.js

@@ -4,7 +4,7 @@
  *
  * Usage: const html = await importDocx(arrayBuffer);
  */
-import JSZip from "jszip";
+import { loadZipSafely } from "../shared/zip-guard";
 import { EMFJS } from "rtf.js";
 import { parseHTML } from "linkedom";
 // ============================================================================
@@ -194,7 +194,7 @@ function readEmfHeader(buffer) {
         frameHeight: frameBottom
     };
 }
-// For backward compatibility
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function readEmfBounds(buffer) {
     const header = readEmfHeader(buffer);
     return { width: header.boundsWidth, height: header.boundsHeight };
@@ -332,11 +332,11 @@ function escapeSvgText(text) {
 /**
  * Convert EMF buffer to SVG for inline rendering
  */
-function convertEmfToSvg(buffer) {
+async function convertEmfToSvg(buffer) {
     try {
         setupEmfDom();
         const header = readEmfHeader(buffer);
-        const { boundsWidth, boundsHeight, frameWidth, frameHeight } = header;
+        const { boundsWidth, boundsHeight } = header;
         // Disable EMFJS logging by temporarily overriding console
         const originalLog = console.log;
         console.log = () => { }; // Silence EMFJS debug logs
@@ -538,6 +538,7 @@ function parseThemeFonts(themeDoc) {
 }
 function parseStyles(stylesDoc, themeColors, themeFonts) {
     const styles = new Map();
+    const tableStyles = new Map();
     const defaults = {};
     // Parse document defaults (w:docDefaults)
     const docDefaults = stylesDoc.getElementsByTagName("w:docDefaults")[0];
@@ -615,8 +616,27 @@ function parseStyles(stylesDoc, themeColors, themeFonts) {
         const pPr = pPrEl ? parseParagraphProps(pPrEl) : undefined;
         const rPr = rPrEl ? parseRunProps(rPrEl, themeColors, themeFonts) : undefined;
         styles.set(styleId, { basedOn, pPr, rPr, name });
+        // Parse table styles (w:type="table") for border and cell margin info
+        const styleType = styleEl.getAttribute("w:type");
+        if (styleType === "table") {
+            const tblPrEl = findChild(styleEl, "tblPr");
+            const tblStyleProps = {};
+            if (tblPrEl) {
+                // Parse table borders from style
+                const tblBordersEl = findChild(tblPrEl, "tblBorders");
+                if (tblBordersEl) {
+                    tblStyleProps.borders = parseBorders(tblBordersEl, themeColors);
+                }
+                // Parse default cell margins from style
+                const tblCellMarEl = findChild(tblPrEl, "tblCellMar");
+                if (tblCellMarEl) {
+                    tblStyleProps.cellMargins = parseCellMargins(tblCellMarEl);
+                }
+            }
+            tableStyles.set(styleId, { basedOn, tblPr: tblStyleProps });
+        }
     }
-    return { styles, defaults };
+    return { styles, defaults, tableStyles };
 }
 /**
  * Parse section properties from sectPr element.
@@ -765,7 +785,7 @@ function parsePositionedElement(drawing, themeColors, themeFonts) {
                     const stops = [];
                     const gsElements = findChildren(gsLst, "gs");
                     for (const gs of gsElements) {
-                        const pos = parseInt(gs.getAttribute("pos") ?? "0", 10) / 1000; // Convert from 100000ths to percentage
+                        const pos = parseInt(gs.getAttribute("pos") ?? "0", 10) / 1000; // Convert from thousandths of a percent (0-100000) to percentage (0-100)
                         let color = "#000000";
                         const srgbClr = findChild(gs, "srgbClr");
                         const schemeClr = findChild(gs, "schemeClr");
@@ -1339,7 +1359,7 @@ function parseParagraph(p, themeColors, themeFonts) {
     processElement(p);
     return { runs, props };
 }
-function parseTableCell(tc, themeColors, themeFonts) {
+function parseTableCell(tc, themeColors, themeFonts, tableStyles) {
     const cell = { paragraphs: [] };
     const tcPr = findChild(tc, "tcPr");
     if (tcPr) {
@@ -1387,6 +1407,11 @@ function parseTableCell(tc, themeColors, themeFonts) {
         if (noWrap) {
             cell.noWrap = true;
         }
+        // Cell-level margins (w:tcMar) - override table-level cell margins
+        const tcMar = findChild(tcPr, "tcMar");
+        if (tcMar) {
+            cell.cellMargins = parseCellMargins(tcMar);
+        }
     }
     // Parse paragraphs in cell (including those inside SDT elements)
     const collectParagraphs = (parent) => {
@@ -1430,10 +1455,43 @@ function parseTableCell(tc, themeColors, themeFonts) {
     };
     const nestedTables = collectTables(tc);
     if (nestedTables.length > 0) {
-        cell.nestedTables = nestedTables.map(tbl => parseTable(tbl, themeColors, themeFonts));
+        cell.nestedTables = nestedTables.map(tbl => parseTable(tbl, themeColors, themeFonts, tableStyles));
     }
     return cell;
 }
+/**
+ * Parse cell margins from a w:tblCellMar or w:tcMar element.
+ * Returns margins in twips.
+ */
+function parseCellMargins(marEl) {
+    const margins = {};
+    const topEl = findChild(marEl, "top");
+    const bottomEl = findChild(marEl, "bottom");
+    // Note: OOXML uses "start"/"end" in newer docs, "left"/"right" in older ones
+    const leftEl = findChild(marEl, "left") ?? findChild(marEl, "start");
+    const rightEl = findChild(marEl, "right") ?? findChild(marEl, "end");
+    if (topEl) {
+        const w = topEl.getAttribute("w:w");
+        if (w)
+            margins.top = parseInt(w, 10);
+    }
+    if (bottomEl) {
+        const w = bottomEl.getAttribute("w:w");
+        if (w)
+            margins.bottom = parseInt(w, 10);
+    }
+    if (leftEl) {
+        const w = leftEl.getAttribute("w:w");
+        if (w)
+            margins.left = parseInt(w, 10);
+    }
+    if (rightEl) {
+        const w = rightEl.getAttribute("w:w");
+        if (w)
+            margins.right = parseInt(w, 10);
+    }
+    return margins;
+}
 function parseBorders(bordersEl, themeColors) {
     const borders = {};
     const parseBorder = (el) => {
@@ -1465,14 +1523,37 @@ function parseBorders(bordersEl, themeColors) {
     borders.insideV = parseBorder(findChild(bordersEl, "insideV"));
     return borders;
 }
-function parseTable(tbl, themeColors, themeFonts) {
+function parseTable(tbl, themeColors, themeFonts, tableStyles) {
     const table = { rows: [] };
     const tblPr = findChild(tbl, "tblPr");
     if (tblPr) {
+        // Resolve table style (w:tblStyle) - this provides default borders, cell margins, etc.
+        const tblStyleEl = findChild(tblPr, "tblStyle");
+        let resolvedStyleProps;
+        if (tblStyleEl && tableStyles) {
+            const styleId = tblStyleEl.getAttribute("w:val");
+            if (styleId) {
+                resolvedStyleProps = resolveTableStyle(styleId, tableStyles);
+            }
+        }
+        // Parse explicit table borders (override style borders)
         const tblBorders = findChild(tblPr, "tblBorders");
         if (tblBorders) {
             table.borders = parseBorders(tblBorders, themeColors);
         }
+        else if (resolvedStyleProps?.borders) {
+            // Fall back to style-defined borders
+            table.borders = resolvedStyleProps.borders;
+        }
+        // Parse explicit cell margins from table properties
+        const tblCellMar = findChild(tblPr, "tblCellMar");
+        if (tblCellMar) {
+            table.cellMargins = parseCellMargins(tblCellMar);
+        }
+        else if (resolvedStyleProps?.cellMargins) {
+            // Fall back to style-defined cell margins
+            table.cellMargins = resolvedStyleProps.cellMargins;
+        }
         // Parse table width
         const tblW = findChild(tblPr, "tblW");
         if (tblW) {
@@ -1491,35 +1572,6 @@ function parseTable(tbl, themeColors, themeFonts) {
                 table.tableIndent = parseInt(w, 10);
             }
         }
-        // Parse table cell margins (default margins for all cells)
-        const tblCellMar = findChild(tblPr, "tblCellMar");
-        if (tblCellMar) {
-            table.cellMargins = {};
-            const topMar = findChild(tblCellMar, "top");
-            const bottomMar = findChild(tblCellMar, "bottom");
-            const leftMar = findChild(tblCellMar, "left") || findChild(tblCellMar, "start");
-            const rightMar = findChild(tblCellMar, "right") || findChild(tblCellMar, "end");
-            if (topMar) {
-                const w = topMar.getAttribute("w:w");
-                if (w)
-                    table.cellMargins.top = parseInt(w, 10);
-            }
-            if (bottomMar) {
-                const w = bottomMar.getAttribute("w:w");
-                if (w)
-                    table.cellMargins.bottom = parseInt(w, 10);
-            }
-            if (leftMar) {
-                const w = leftMar.getAttribute("w:w");
-                if (w)
-                    table.cellMargins.left = parseInt(w, 10);
-            }
-            if (rightMar) {
-                const w = rightMar.getAttribute("w:w");
-                if (w)
-                    table.cellMargins.right = parseInt(w, 10);
-            }
-        }
     }
     // Parse column widths from tblGrid
     const tblGrid = findChild(tbl, "tblGrid");
@@ -1556,12 +1608,43 @@ function parseTable(tbl, themeColors, themeFonts) {
         }
         const tcs = findChildren(tr, "tc");
         for (const tc of tcs) {
-            row.cells.push(parseTableCell(tc, themeColors, themeFonts));
+            row.cells.push(parseTableCell(tc, themeColors, themeFonts, tableStyles));
         }
         table.rows.push(row);
     }
     return table;
 }
+/**
+ * Resolve a table style by walking the basedOn chain.
+ * Merges borders and cell margins from parent styles (parent first, child overrides).
+ */
+function resolveTableStyle(styleId, tableStyles) {
+    const visited = new Set();
+    const chain = [];
+    let currentId = styleId;
+    while (currentId && !visited.has(currentId)) {
+        visited.add(currentId);
+        const style = tableStyles.get(currentId);
+        if (!style)
+            break;
+        if (style.tblPr)
+            chain.unshift(style.tblPr); // parent first
+        currentId = style.basedOn;
+    }
+    if (chain.length === 0)
+        return undefined;
+    // Merge: start from parent, child overrides
+    const merged = {};
+    for (const props of chain) {
+        if (props.borders) {
+            merged.borders = { ...merged.borders, ...props.borders };
+        }
+        if (props.cellMargins) {
+            merged.cellMargins = { ...merged.cellMargins, ...props.cellMargins };
+        }
+    }
+    return merged;
+}
 function parseDrawing(drawing, themeColors, inlineOnly = false) {
     // Look for inline or anchor images
     const inline = findDescendant(drawing, "inline");
@@ -1738,7 +1821,7 @@ function parseDrawing(drawing, themeColors, inlineOnly = false) {
         },
     };
 }
-function parseDocument(docDoc, themeColors, themeFonts) {
+function parseDocument(docDoc, themeColors, themeFonts, tableStyles) {
     const elements = [];
     const positionedElements = [];
     const body = docDoc.getElementsByTagName("w:body")[0];
@@ -1766,7 +1849,7 @@ function parseDocument(docDoc, themeColors, themeFonts) {
             }
         }
         else if (el.localName === "tbl") {
-            elements.push({ kind: "table", data: parseTable(el, themeColors, themeFonts) });
+            elements.push({ kind: "table", data: parseTable(el, themeColors, themeFonts, tableStyles) });
         }
         else if (el.localName === "sdt") {
             // Structured document tag - process its content
@@ -1881,14 +1964,13 @@ function renderParagraphToHtml(para, styleMap, numberingMap, imageMap = new Map(
     }
     // Determine HTML tag based on style
     let tag = "p";
-    let headingLevel = 0;
     let isTitleStyle = false;
     let isSubtitleStyle = false;
     if (props.styleId) {
         const styleName = styleMap.get(props.styleId)?.name?.toLowerCase() ?? props.styleId.toLowerCase();
         const headingMatch = styleName.match(/heading\s*(\d)/i);
         if (headingMatch) {
-            headingLevel = parseInt(headingMatch[1], 10);
+            const headingLevel = parseInt(headingMatch[1], 10);
             if (headingLevel >= 1 && headingLevel <= 6) {
                 tag = `h${headingLevel}`;
             }
@@ -2058,8 +2140,6 @@ function renderTableToHtml(table, styleMap, numberingMap, themeColors, imageMap,
             colIdx += cell.gridSpan ?? 1;
         }
     }
-    // Track column index for applying widths
-    let colIndex = 0;
     for (let rowIdx = 0; rowIdx < table.rows.length; rowIdx++) {
         const row = table.rows[rowIdx];
         const rowStyles = [];
@@ -2069,8 +2149,8 @@ function renderTableToHtml(table, styleMap, numberingMap, themeColors, imageMap,
         html += `<tr${rowStyles.length > 0 ? ` style="${rowStyles.join(";")}"` : ""}>`;
         // First pass: find rowspan cells and calculate empty paragraphs to distribute
         // We subtract the number of content lines in subsequent rows covered by the rowspan
-        let emptyParagraphsToDistribute = [];
-        colIndex = 0;
+        const emptyParagraphsToDistribute = [];
+        let colIndex = 0;
         for (const cell of row.cells) {
             if (cell.vMerge === "continue") {
                 colIndex += cell.gridSpan ?? 1;
@@ -2094,7 +2174,6 @@ function renderTableToHtml(table, styleMap, numberingMap, themeColors, imageMap,
                     // Find the cell at the same column in this row (it should be vMerge="continue")
                     // But we need to count lines from OTHER cells in that row
                     // Actually, we just need to count paragraphs in any non-continue cell in row r
-                    let colIdx = 0;
                     for (const nextRowCell of table.rows[r].cells) {
                         if (nextRowCell.vMerge !== "continue") {
                             // Count non-empty paragraphs in this cell
@@ -2107,7 +2186,6 @@ function renderTableToHtml(table, styleMap, numberingMap, themeColors, imageMap,
                             }
                             break; // Only count from first non-continue cell
                         }
-                        colIdx += nextRowCell.gridSpan ?? 1;
                     }
                 }
                 // Distribute: emptyParagraphs - linesInNextRows
@@ -2128,13 +2206,14 @@ function renderTableToHtml(table, styleMap, numberingMap, themeColors, imageMap,
             }
             const cellStyles = [];
             const cellAttrs = [];
-            // Apply cell padding: use extracted table cell margins if available
-            // Priority: 1) table-level margins, 2) docDefaults from TableNormal style, 3) Word defaults
-            if (table.cellMargins) {
-                const top = table.cellMargins.top !== undefined ? twipsToPx(table.cellMargins.top) : 0;
-                const right = table.cellMargins.right !== undefined ? twipsToPx(table.cellMargins.right) : 0;
-                const bottom = table.cellMargins.bottom !== undefined ? twipsToPx(table.cellMargins.bottom) : 0;
-                const left = table.cellMargins.left !== undefined ? twipsToPx(table.cellMargins.left) : 0;
+            // Apply cell padding: use extracted cell margins if available
+            // Priority: 1) cell-level margins (tcMar), 2) table-level margins, 3) docDefaults from TableNormal style, 4) Word defaults
+            const margins = cell.cellMargins ?? table.cellMargins;
+            if (margins) {
+                const top = margins.top !== undefined ? twipsToPx(margins.top) : 0;
+                const right = margins.right !== undefined ? twipsToPx(margins.right) : 0;
+                const bottom = margins.bottom !== undefined ? twipsToPx(margins.bottom) : 0;
+                const left = margins.left !== undefined ? twipsToPx(margins.left) : 0;
                 cellStyles.push(`padding:${top}px ${right}px ${bottom}px ${left}px`);
             }
             else if (docDefaults.tableCellMargins) {
@@ -2199,26 +2278,32 @@ function renderTableToHtml(table, styleMap, numberingMap, themeColors, imageMap,
                 }
             }
             else if (table.borders) {
-                // Fall back to table borders
-                if (table.borders.top) {
-                    cellStyles.push(`border-top:${table.borders.top.size}pt ${getBorderStyleCss(table.borders.top.style)} #${table.borders.top.color}`);
-                }
-                if (table.borders.bottom) {
-                    cellStyles.push(`border-bottom:${table.borders.bottom.size}pt ${getBorderStyleCss(table.borders.bottom.style)} #${table.borders.bottom.color}`);
-                }
-                if (table.borders.left) {
-                    cellStyles.push(`border-left:${table.borders.left.size}pt ${getBorderStyleCss(table.borders.left.style)} #${table.borders.left.color}`);
-                }
-                if (table.borders.right) {
-                    cellStyles.push(`border-right:${table.borders.right.size}pt ${getBorderStyleCss(table.borders.right.style)} #${table.borders.right.color}`);
-                }
-                if (table.borders.insideH) {
-                    cellStyles.push(`border-top:${table.borders.insideH.size}pt ${getBorderStyleCss(table.borders.insideH.style)} #${table.borders.insideH.color}`);
-                    cellStyles.push(`border-bottom:${table.borders.insideH.size}pt ${getBorderStyleCss(table.borders.insideH.style)} #${table.borders.insideH.color}`);
-                }
-                if (table.borders.insideV) {
-                    cellStyles.push(`border-left:${table.borders.insideV.size}pt ${getBorderStyleCss(table.borders.insideV.style)} #${table.borders.insideV.color}`);
-                    cellStyles.push(`border-right:${table.borders.insideV.size}pt ${getBorderStyleCss(table.borders.insideV.style)} #${table.borders.insideV.color}`);
+                // Fall back to table borders: use insideH/insideV for interior, edge borders for outer edges
+                const rowIndex = table.rows.indexOf(row);
+                const cellIndex = row.cells.filter(c => c.vMerge !== "continue").indexOf(cell);
+                const isFirstRow = rowIndex === 0;
+                const isLastRow = rowIndex === table.rows.length - 1;
+                const isFirstCol = cellIndex === 0;
+                const isLastCol = cellIndex === row.cells.filter(c => c.vMerge !== "continue").length - 1;
+                // Top border: use table top border for first row, insideH for inner rows
+                const topBorder = isFirstRow ? table.borders.top : table.borders.insideH;
+                if (topBorder) {
+                    cellStyles.push(`border-top:${topBorder.size}pt ${getBorderStyleCss(topBorder.style)} #${topBorder.color}`);
+                }
+                // Bottom border: use table bottom border for last row, insideH for inner rows
+                const bottomBorder = isLastRow ? table.borders.bottom : table.borders.insideH;
+                if (bottomBorder) {
+                    cellStyles.push(`border-bottom:${bottomBorder.size}pt ${getBorderStyleCss(bottomBorder.style)} #${bottomBorder.color}`);
+                }
+                // Left border: use table left border for first col, insideV for inner cols
+                const leftBorder = isFirstCol ? table.borders.left : table.borders.insideV;
+                if (leftBorder) {
+                    cellStyles.push(`border-left:${leftBorder.size}pt ${getBorderStyleCss(leftBorder.style)} #${leftBorder.color}`);
+                }
+                // Right border: use table right border for last col, insideV for inner cols
+                const rightBorder = isLastCol ? table.borders.right : table.borders.insideV;
+                if (rightBorder) {
+                    cellStyles.push(`border-right:${rightBorder.size}pt ${getBorderStyleCss(rightBorder.style)} #${rightBorder.color}`);
                 }
             }
             const attrsStr = cellAttrs.length > 0 ? " " + cellAttrs.join(" ") : "";
@@ -2303,7 +2388,7 @@ function renderImageToHtml(img, imageMap) {
             containerStyles.push(`border:${borderWidthPx}px solid #${img.border.color}`);
         }
         // Inject width/height into the SVG element to ensure proper sizing
-        let styledSvg = imageData.svgMarkup.replace(/<svg /, `<svg style="width:100%;height:100%;display:block;" `);
+        const styledSvg = imageData.svgMarkup.replace(/<svg /, `<svg style="width:100%;height:100%;display:block;" `);
         return `<div style="${containerStyles.join(";")}">${styledSvg}</div>`;
     }
     // Regular image (dataUri type)
@@ -2634,7 +2719,7 @@ function generateStylesCss(styleMap, themeFonts) {
  * @returns HTML string representing the document
  */
 export default async function importDocx(arrayBuffer) {
-    const zip = await JSZip.loadAsync(arrayBuffer);
+    const zip = await loadZipSafely(arrayBuffer);
     const parser = new DOMParser();
     // Parse document.xml
     const docXml = await zip.file("word/document.xml")?.async("text");
@@ -2652,6 +2737,7 @@ export default async function importDocx(arrayBuffer) {
     }
     // Parse styles - try multiple locations
     let styleMap = new Map();
+    let tableStyleMap = new Map();
     let docDefaults = {};
     // Try word/styles.xml first (standard location)
     let stylesXml = await zip.file("word/styles.xml")?.async("text");
@@ -2663,6 +2749,7 @@ export default async function importDocx(arrayBuffer) {
         const stylesDoc = parser.parseFromString(stylesXml, "application/xml");
         const parsed = parseStyles(stylesDoc, themeColors, themeFonts);
         styleMap = parsed.styles;
+        tableStyleMap = parsed.tableStyles;
         docDefaults = parsed.defaults;
     }
     // Parse numbering (for lists) - try multiple locations
@@ -2710,7 +2797,7 @@ export default async function importDocx(arrayBuffer) {
             // Handle EMF files specially - convert to SVG for web display
             if (ext === "emf") {
                 const imgBuffer = await imgFile.async("arraybuffer");
-                const svgData = convertEmfToSvg(imgBuffer);
+                const svgData = await convertEmfToSvg(imgBuffer);
                 if (svgData) {
                     imageMap.set(rId, svgData);
                 }
@@ -2734,7 +2821,7 @@ export default async function importDocx(arrayBuffer) {
     // Parse headers and footers for positioned elements (decorative frames, etc.)
     const headers = [];
     const footers = [];
-    for (const [rId, filePath] of headerFooterRels) {
+    for (const [, filePath] of headerFooterRels) {
         const hfXml = await zip.file(filePath)?.async("text");
         if (!hfXml)
             continue;
@@ -2754,7 +2841,7 @@ export default async function importDocx(arrayBuffer) {
         positionedElements.push(...header.positionedElements);
     }
     // Parse document elements and body positioned elements
-    const parsedDoc = parseDocument(docDoc, themeColors, themeFonts);
+    const parsedDoc = parseDocument(docDoc, themeColors, themeFonts, tableStyleMap);
     const elements = parsedDoc.elements;
     // Add positioned elements from document body
     positionedElements.push(...parsedDoc.positionedElements);
@@ -2767,7 +2854,6 @@ export default async function importDocx(arrayBuffer) {
     const marginRightPx = sectionProps.marginRight ? twipsToPx(sectionProps.marginRight) : 72;
     const marginTopPx = sectionProps.marginTop ? twipsToPx(sectionProps.marginTop) : 72;
     const marginBottomPx = sectionProps.marginBottom ? twipsToPx(sectionProps.marginBottom) : 72;
-    const contentWidth = pageWidthPx - marginLeftPx - marginRightPx;
     // Generate column layout CSS if multi-column
     const columnLayoutCss = generateColumnLayoutCss(sectionProps);
     // Check if we have absolutely positioned elements that need a relative container