npm - @cj-tech-master/excelts - Versions diffs - 9.5.4 → 9.5.5 - Mend

@cj-tech-master/excelts 9.5.4 → 9.5.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (767) hide show

package/dist/cjs/modules/word/{html-renderer.js → convert/html/html-renderer.js} RENAMED Viewed

@@ -8,8 +8,10 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderToHtml = renderToHtml;
-const color_utils_1 = require("./color-utils");
-const internal_utils_1 = require("./internal-utils");
+const color_utils_1 = require("../../core/color-utils");
+const internal_utils_1 = require("../../core/internal-utils");
+const text_utils_1 = require("../../core/text-utils");
+const units_1 = require("../../units");
 /**
  * Convert a DocxDocument to HTML.
  */
@@ -20,9 +22,34 @@ function renderToHtml(doc, options) {
         title: options?.title ?? doc.coreProperties?.title ?? "Document",
         imageMode: options?.imageMode ?? "dataUrl",
         includeComments: options?.includeComments ?? false,
+        includeRevisions: options?.includeRevisions ?? false,
         includeNotes: options?.includeNotes ?? true,
-        classPrefix: options?.classPrefix ?? "docx-"
+        classPrefix: options?.classPrefix ?? "docx-",
+        styleMap: options?.styleMap ?? new Map(),
+        chartRenderer: options?.chartRenderer,
+        chartExRenderer: options?.chartExRenderer
     };
+    // Normalize styleMap to a Map
+    const resolvedStyleMap = new Map();
+    if (opts.styleMap) {
+        if (opts.styleMap instanceof Map) {
+            for (const [k, v] of opts.styleMap) {
+                resolvedStyleMap.set(k, v);
+            }
+        }
+        else {
+            for (const [k, v] of Object.entries(opts.styleMap)) {
+                resolvedStyleMap.set(k, v);
+            }
+        }
+    }
+    // Build comment map
+    const commentMap = new Map();
+    if (doc.comments) {
+        for (const c of doc.comments) {
+            commentMap.set(c.id, c);
+        }
+    }
     const state = {
         options: opts,
         doc,
@@ -32,7 +59,11 @@ function renderToHtml(doc, options) {
         listStack: [],
         html: [],
         footnoteRefs: new Map(),
-        endnoteRefs: new Map()
+        endnoteRefs: new Map(),
+        styleMap: resolvedStyleMap,
+        commentMap,
+        activeCommentIds: new Set(),
+        asideComments: []
     };
     // Build image map
     if (doc.images) {
@@ -55,17 +86,41 @@ function renderToHtml(doc, options) {
         state.html.push(`<meta charset="UTF-8">`);
         state.html.push(`<title>${escapeHtml(opts.title)}</title>`);
         if (opts.includeStyles) {
-            state.html.push(`<style>${generateCss(opts.classPrefix, doc.theme)}</style>`);
+            state.html.push(`<style>${generateCss(opts.classPrefix)}</style>`);
         }
         state.html.push("</head>");
         state.html.push("<body>");
     }
     state.html.push(`<div class="${opts.classPrefix}document">`);
+    // Render default header
+    if (doc.headers && doc.headers.size > 0) {
+        const defaultHeader = doc.headers.get("default");
+        if (defaultHeader) {
+            state.html.push(`<header class="${opts.classPrefix}header">`);
+            for (const child of defaultHeader.content.children) {
+                renderBodyContent(state, child);
+            }
+            closeOpenLists(state);
+            state.html.push("</header>");
+        }
+    }
     // Render body content
     for (const item of doc.body) {
         renderBodyContent(state, item);
     }
     closeOpenLists(state);
+    // Render default footer
+    if (doc.footers && doc.footers.size > 0) {
+        const defaultFooter = doc.footers.get("default");
+        if (defaultFooter) {
+            state.html.push(`<footer class="${opts.classPrefix}footer">`);
+            for (const child of defaultFooter.content.children) {
+                renderBodyContent(state, child);
+            }
+            closeOpenLists(state);
+            state.html.push("</footer>");
+        }
+    }
     // Footnotes
     if (opts.includeNotes && doc.footnotes && doc.footnotes.length > 0) {
         state.html.push(`<hr class="${opts.classPrefix}footnote-separator"/>`);
@@ -104,6 +159,20 @@ function renderToHtml(doc, options) {
         state.html.push("</ol>");
         state.html.push("</aside>");
     }
+    // Comments aside
+    if (opts.includeComments && state.asideComments.length > 0) {
+        state.html.push(`<aside class="${opts.classPrefix}comments">`);
+        state.html.push("<h2>Comments</h2>");
+        for (const { id, def } of state.asideComments) {
+            state.html.push(`<div class="${opts.classPrefix}comment" id="comment-${id}">`);
+            state.html.push(`<p class="${opts.classPrefix}comment-meta"><strong>${escapeHtml(def.author)}</strong>${def.date ? ` <time>${escapeHtml(def.date)}</time>` : ""}</p>`);
+            for (const p of def.content) {
+                renderParagraph(state, p);
+            }
+            state.html.push("</div>");
+        }
+        state.html.push("</aside>");
+    }
     state.html.push("</div>");
     if (opts.fullDocument) {
         state.html.push("</body>");
@@ -143,8 +212,7 @@ function renderBodyContent(state, item) {
             break;
         case "math":
             closeOpenLists(state);
-            state.warnings.push("Math content not fully supported in HTML output");
-            state.html.push(`<span class="${state.options.classPrefix}math" aria-label="equation">[equation]</span>`);
+            renderMathBlockHtml(state, item);
             break;
         case "tableOfContents":
             // Render TOC as placeholder - user would regenerate
@@ -159,17 +227,42 @@ function renderBodyContent(state, item) {
             break;
         case "drawingShape":
             closeOpenLists(state);
-            state.warnings.push("DrawingML shapes rendered as placeholder");
-            state.html.push(`<div class="${state.options.classPrefix}shape">[${item.shapeType}]</div>`);
+            renderDrawingShapeHtml(state, item);
             break;
         case "chart":
             closeOpenLists(state);
-            state.html.push(`<figure class="${state.options.classPrefix}chart">`);
-            if (item.chart.title) {
-                state.html.push(`<figcaption>${escapeHtml(item.chart.title)}</figcaption>`);
+            if (state.options.chartRenderer) {
+                state.html.push(`<figure class="${state.options.classPrefix}chart">`);
+                if (item.chart.title) {
+                    state.html.push(`<figcaption>${escapeHtml(item.chart.title)}</figcaption>`);
+                }
+                state.html.push(state.options.chartRenderer(item.chart));
+                state.html.push("</figure>");
+            }
+            else {
+                state.html.push(`<figure class="${state.options.classPrefix}chart">`);
+                if (item.chart.title) {
+                    state.html.push(`<figcaption>${escapeHtml(item.chart.title)}</figcaption>`);
+                }
+                state.html.push(`<div class="${state.options.classPrefix}chart-placeholder">[${item.chart.type} chart: ${item.chart.series.length} series]</div>`);
+                state.html.push("</figure>");
+            }
+            break;
+        case "chartEx":
+            closeOpenLists(state);
+            if (state.options.chartExRenderer) {
+                state.html.push(`<figure class="${state.options.classPrefix}chart">`);
+                if (item.altText) {
+                    state.html.push(`<figcaption>${escapeHtml(item.altText)}</figcaption>`);
+                }
+                state.html.push(state.options.chartExRenderer(item));
+                state.html.push("</figure>");
+            }
+            else {
+                state.html.push(`<figure class="${state.options.classPrefix}chart">`);
+                state.html.push(`<div class="${state.options.classPrefix}chart-placeholder">[ChartEx${item.altText ? ": " + escapeHtml(item.altText) : ""}]</div>`);
+                state.html.push("</figure>");
             }
-            state.html.push(`<div class="${state.options.classPrefix}chart-placeholder">[${item.chart.type} chart: ${item.chart.series.length} series]</div>`);
-            state.html.push("</figure>");
             break;
         case "checkBox":
             closeOpenLists(state);
@@ -177,7 +270,18 @@ function renderBodyContent(state, item) {
             break;
         case "opaqueDrawing":
             // Skip opaque drawings in HTML
+            state.warnings.push(`Unsupported element type "opaqueDrawing" skipped`);
+            break;
+        case "altChunk":
+            state.warnings.push(`Unsupported element type "altChunk" skipped`);
             break;
+        default: {
+            const _type = item.type;
+            if (_type) {
+                state.warnings.push(`Unknown element type "${_type}" skipped`);
+            }
+            break;
+        }
     }
 }
 // =============================================================================
@@ -198,32 +302,50 @@ function renderParagraph(state, para) {
         }
     }
     closeOpenLists(state);
-    // Determine tag based on style/outline
+    // Check styleMap first
     let tag = "p";
-    if (props?.style) {
-        const styleId = props.style.toLowerCase();
-        if (styleId === "heading1" || styleId === "heading 1" || styleId === "title") {
-            tag = "h1";
-        }
-        else if (styleId === "heading2" || styleId === "heading 2") {
-            tag = "h2";
-        }
-        else if (styleId === "heading3" || styleId === "heading 3") {
-            tag = "h3";
-        }
-        else if (styleId === "heading4" || styleId === "heading 4") {
-            tag = "h4";
+    let mappedClass = "";
+    let styleMapHit = false;
+    if (props?.style && state.styleMap.size > 0) {
+        const mapping = state.styleMap.get(props.style);
+        if (mapping) {
+            styleMapHit = true;
+            const parsed = parseStyleMapping(mapping);
+            if (parsed.tag) {
+                tag = parsed.tag;
+            }
+            if (parsed.className) {
+                mappedClass = parsed.className;
+            }
         }
-        else if (styleId === "heading5" || styleId === "heading 5") {
-            tag = "h5";
+    }
+    // If no styleMap hit, determine tag based on style/outline (default logic)
+    if (!styleMapHit) {
+        if (props?.style) {
+            const styleId = props.style.toLowerCase();
+            if (styleId === "heading1" || styleId === "heading 1" || styleId === "title") {
+                tag = "h1";
+            }
+            else if (styleId === "heading2" || styleId === "heading 2") {
+                tag = "h2";
+            }
+            else if (styleId === "heading3" || styleId === "heading 3") {
+                tag = "h3";
+            }
+            else if (styleId === "heading4" || styleId === "heading 4") {
+                tag = "h4";
+            }
+            else if (styleId === "heading5" || styleId === "heading 5") {
+                tag = "h5";
+            }
+            else if (styleId === "heading6" || styleId === "heading 6") {
+                tag = "h6";
+            }
         }
-        else if (styleId === "heading6" || styleId === "heading 6") {
-            tag = "h6";
+        if (props?.outlineLevel !== undefined && props.outlineLevel >= 0 && props.outlineLevel < 6) {
+            tag = `h${props.outlineLevel + 1}`;
         }
     }
-    if (props?.outlineLevel !== undefined && props.outlineLevel >= 0 && props.outlineLevel < 6) {
-        tag = `h${props.outlineLevel + 1}`;
-    }
     // Build inline style
     const styles = [];
     if (props?.alignment) {
@@ -271,8 +393,35 @@ function renderParagraph(state, para) {
     if (props?.bidi) {
         styles.push(`direction:rtl`);
     }
+    if (props?.pageBreakBefore) {
+        styles.push(`page-break-before:always`);
+    }
+    if (props?.keepNext) {
+        styles.push(`page-break-after:avoid`);
+    }
+    if (props?.keepLines) {
+        styles.push(`page-break-inside:avoid`);
+    }
+    if (props?.borders) {
+        for (const side of ["top", "right", "bottom", "left"]) {
+            const border = props.borders[side];
+            if (border) {
+                const bstyle = borderToCss(border);
+                if (bstyle) {
+                    styles.push(`border-${side}:${bstyle}`);
+                }
+            }
+        }
+    }
     const styleAttr = styles.length > 0 ? ` style="${styles.join(";")}"` : "";
-    const classAttr = props?.style ? ` class="${prefix}style-${escapeClassName(props.style)}"` : "";
+    // Build class attribute
+    let classAttr = "";
+    if (styleMapHit && mappedClass) {
+        classAttr = ` class="${mappedClass}"`;
+    }
+    else if (props?.style) {
+        classAttr = ` class="${prefix}style-${escapeClassName(props.style)}"`;
+    }
     state.html.push(`<${tag}${classAttr}${styleAttr}>`);
     renderParagraphInline(state, para);
     state.html.push(`</${tag}>`);
@@ -294,40 +443,77 @@ function renderParagraphChild(state, child) {
             case "bookmarkEnd":
                 return;
             case "commentRangeStart":
+                if (state.options.includeComments) {
+                    state.activeCommentIds.add(child.id);
+                    state.html.push(`<mark class="${state.options.classPrefix}comment-highlight" data-comment-id="${child.id}">`);
+                }
+                return;
             case "commentRangeEnd":
+                if (state.options.includeComments) {
+                    state.activeCommentIds.delete(child.id);
+                    state.html.push("</mark>");
+                    // Register this comment for aside rendering
+                    const def = state.commentMap.get(child.id);
+                    if (def) {
+                        state.asideComments.push({ id: child.id, def });
+                    }
+                }
+                return;
             case "commentReference":
+                if (state.options.includeComments) {
+                    state.html.push(`<a href="#comment-${child.id}" class="${state.options.classPrefix}comment-ref"><sup>[${child.id}]</sup></a>`);
+                }
                 return;
             case "insertedRun":
-                state.html.push(`<ins data-author="${escapeHtml(child.revision.author)}" data-date="${escapeHtml(child.revision.date ?? "")}">`);
-                renderRun(state, child.run);
-                state.html.push("</ins>");
+                if (state.options.includeRevisions || state.options.includeComments) {
+                    state.html.push(`<ins data-author="${escapeHtml(child.revision.author)}" data-date="${escapeHtml(child.revision.date ?? "")}">`);
+                    renderRun(state, child.run);
+                    state.html.push("</ins>");
+                }
+                else {
+                    // When revisions are not shown, render the inserted content normally
+                    renderRun(state, child.run);
+                }
                 return;
             case "deletedRun":
-                state.html.push(`<del data-author="${escapeHtml(child.revision.author)}" data-date="${escapeHtml(child.revision.date ?? "")}">`);
-                renderRun(state, child.run);
-                state.html.push("</del>");
+                if (state.options.includeRevisions || state.options.includeComments) {
+                    state.html.push(`<del data-author="${escapeHtml(child.revision.author)}" data-date="${escapeHtml(child.revision.date ?? "")}">`);
+                    renderRun(state, child.run);
+                    state.html.push("</del>");
+                }
+                // When revisions are not shown, deleted content is simply omitted
                 return;
             case "movedFromRun":
-                state.html.push(`<del class="${state.options.classPrefix}move-from">`);
-                renderRun(state, child.run);
-                state.html.push("</del>");
+                if (state.options.includeRevisions || state.options.includeComments) {
+                    state.html.push(`<del class="${state.options.classPrefix}move-from">`);
+                    renderRun(state, child.run);
+                    state.html.push("</del>");
+                }
                 return;
             case "movedToRun":
-                state.html.push(`<ins class="${state.options.classPrefix}move-to">`);
-                renderRun(state, child.run);
-                state.html.push("</ins>");
+                if (state.options.includeRevisions || state.options.includeComments) {
+                    state.html.push(`<ins class="${state.options.classPrefix}move-to">`);
+                    renderRun(state, child.run);
+                    state.html.push("</ins>");
+                }
+                else {
+                    renderRun(state, child.run);
+                }
                 return;
         }
     }
     // Run (no type discriminator)
-    if ("content" in child && !("type" in child)) {
+    if ((0, text_utils_1.isRun)(child)) {
         renderRun(state, child);
     }
 }
 function renderHyperlinkHtml(state, link) {
     let href = "";
     if (link.url) {
-        href = link.url;
+        // Reject javascript:/vbscript:/etc. URLs that could XSS the renderer
+        // output. Falls back to no href so the anchor still preserves the visible
+        // text.
+        href = (0, internal_utils_1.sanitizeUrl)(link.url) ?? "";
     }
     else if (link.anchor) {
         href = `#bookmark-${link.anchor}`;
@@ -400,7 +586,48 @@ function renderRun(state, run) {
         if (rPr.font) {
             const fontName = typeof rPr.font === "string" ? rPr.font : (rPr.font.ascii ?? rPr.font.eastAsia);
             if (fontName) {
-                styles.push(`font-family:"${fontName}"`);
+                // The value is interpolated into a `style="..."` attribute, so
+                // wrap font names containing whitespace or punctuation in
+                // single quotes — embedding double quotes here would close the
+                // surrounding HTML attribute and produce invalid markup.
+                styles.push(`font-family:'${fontName.replace(/'/g, "")}'`);
+            }
+        }
+        if (rPr.doubleStrike) {
+            styles.push("text-decoration:line-through;text-decoration-style:double");
+        }
+        if (rPr.shadow) {
+            styles.push("text-shadow:1px 1px 2px rgba(0,0,0,0.3)");
+        }
+        if (rPr.outline) {
+            styles.push("-webkit-text-stroke:1px currentColor;color:transparent");
+        }
+        if (rPr.emboss) {
+            styles.push("text-shadow:-1px -1px 0 rgba(255,255,255,0.6), 1px 1px 0 rgba(0,0,0,0.3)");
+        }
+        if (rPr.imprint) {
+            styles.push("text-shadow:1px 1px 0 rgba(255,255,255,0.6), -1px -1px 0 rgba(0,0,0,0.3)");
+        }
+        if (rPr.vanish) {
+            styles.push("display:none");
+        }
+        if (rPr.spacing !== undefined) {
+            styles.push(`letter-spacing:${rPr.spacing / 20}pt`);
+        }
+        if (rPr.emphasisMark && rPr.emphasisMark !== "none") {
+            const markMap = {
+                dot: "filled",
+                comma: "'\\u3001'",
+                circle: "open",
+                dotBelow: "filled under"
+            };
+            const em = markMap[rPr.emphasisMark] ?? "filled";
+            styles.push(`text-emphasis:${em}`);
+        }
+        if (rPr.border) {
+            const bstyle = borderToCss(rPr.border);
+            if (bstyle) {
+                styles.push(`border:${bstyle}`);
             }
         }
     }
@@ -458,7 +685,7 @@ function renderRunContentHtml(state, content) {
             // Convert hex char code to Unicode
             try {
                 const code = parseInt(content.char, 16);
-                state.html.push(`<span style="font-family:${escapeHtml(content.font)}">${String.fromCodePoint(code)}</span>`);
+                state.html.push(`<span style="font-family:'${escapeHtml(content.font).replace(/&#39;/g, "")}'">${String.fromCodePoint(code)}</span>`);
             }
             catch {
                 state.html.push(escapeHtml(content.char));
@@ -528,29 +755,88 @@ function renderFloatingImageHtml(state, img) {
 // =============================================================================
 function renderTable(state, table) {
     const prefix = state.options.classPrefix;
-    state.html.push(`<table class="${prefix}table">`);
-    for (const row of table.rows) {
-        renderTableRow(state, row);
+    state.html.push(`<table class="${prefix}table" border="1" style="border-collapse:collapse;width:100%">`);
+    // Pre-compute rowspan map: key = "rowIdx,colIdx" -> rowspan count
+    const rowspanMap = new Map();
+    const skipCells = new Set();
+    for (let rowIdx = 0; rowIdx < table.rows.length; rowIdx++) {
+        const row = table.rows[rowIdx];
+        let colIdx = 0;
+        for (const cell of row.cells) {
+            // Skip columns that are occupied by a previous rowspan
+            while (skipCells.has(`${rowIdx},${colIdx}`)) {
+                colIdx++;
+            }
+            const gridSpan = cell.properties?.gridSpan ?? 1;
+            if (cell.properties?.verticalMerge === "restart") {
+                // Count how many subsequent rows continue this merge at the same column
+                let span = 1;
+                for (let r = rowIdx + 1; r < table.rows.length; r++) {
+                    const targetCell = getCellAtGridCol(table.rows[r], colIdx);
+                    if (targetCell?.properties?.verticalMerge === "continue") {
+                        span++;
+                        // Mark those cells as skip
+                        for (let c = colIdx; c < colIdx + gridSpan; c++) {
+                            skipCells.add(`${r},${c}`);
+                        }
+                    }
+                    else {
+                        break;
+                    }
+                }
+                if (span > 1) {
+                    rowspanMap.set(`${rowIdx},${colIdx}`, span);
+                }
+            }
+            colIdx += gridSpan;
+        }
+    }
+    for (let rowIdx = 0; rowIdx < table.rows.length; rowIdx++) {
+        renderTableRowWithMerge(state, table.rows[rowIdx], rowIdx, rowspanMap, skipCells);
     }
     state.html.push("</table>");
 }
-function renderTableRow(state, row) {
+/** Get the cell at a specific grid column index within a row. */
+function getCellAtGridCol(row, targetCol) {
+    let colIdx = 0;
+    for (const cell of row.cells) {
+        if (colIdx === targetCol) {
+            return cell;
+        }
+        colIdx += cell.properties?.gridSpan ?? 1;
+    }
+    return undefined;
+}
+function renderTableRowWithMerge(state, row, rowIdx, rowspanMap, skipCells) {
     const isHeader = row.properties?.tableHeader;
     state.html.push(`<tr>`);
+    let colIdx = 0;
     for (const cell of row.cells) {
-        renderTableCell(state, cell, isHeader ?? false);
+        // Skip columns occupied by previous rowspan
+        while (skipCells.has(`${rowIdx},${colIdx}`)) {
+            colIdx++;
+        }
+        const gridSpan = cell.properties?.gridSpan ?? 1;
+        // If this cell is a "continue" cell, skip it (already merged into a rowspan above)
+        if (cell.properties?.verticalMerge === "continue") {
+            colIdx += gridSpan;
+            continue;
+        }
+        const rowspan = rowspanMap.get(`${rowIdx},${colIdx}`);
+        renderTableCellWithRowspan(state, cell, isHeader ?? false, rowspan);
+        colIdx += gridSpan;
     }
     state.html.push("</tr>");
 }
-function renderTableCell(state, cell, isHeader) {
+function renderTableCellWithRowspan(state, cell, isHeader, rowspan) {
     const tag = isHeader ? "th" : "td";
     const attrs = [];
     const props = cell.properties;
     if (props?.gridSpan && props.gridSpan > 1) {
         attrs.push(`colspan="${props.gridSpan}"`);
     }
-    if (props?.verticalMerge === "restart") {
-        // For rowspan detection, we would need to scan ahead; omitted for simplicity
+    if (rowspan && rowspan > 1) {
+        attrs.push(`rowspan="${rowspan}"`);
     }
     const styles = [];
     if (props?.shading?.fill) {
@@ -600,17 +886,52 @@ function renderTableCell(state, cell, isHeader) {
 // TextBox
 // =============================================================================
 function renderTextBoxHtml(state, textBox) {
-    const prefix = state.options.classPrefix;
-    state.html.push(`<aside class="${prefix}textbox">`);
+    state.html.push(`<div class="textbox">`);
     for (const p of textBox.content) {
         renderParagraph(state, p);
     }
-    state.html.push("</aside>");
+    state.html.push("</div>");
+}
+// =============================================================================
+// Drawing Shape
+// =============================================================================
+function renderDrawingShapeHtml(state, item) {
+    const shape = item;
+    const styles = [];
+    styles.push(`display:inline-block`);
+    if (shape.width) {
+        styles.push(`width:${emuToPx(shape.width)}px`);
+    }
+    if (shape.height) {
+        styles.push(`height:${emuToPx(shape.height)}px`);
+    }
+    if (shape.fillColor && !shape.noFill) {
+        styles.push(`background-color:#${shape.fillColor}`);
+    }
+    if (!shape.noOutline) {
+        const outlineColor = shape.outlineColor ? `#${shape.outlineColor}` : "#000";
+        const outlineWidth = shape.outlineWidth ? `${emuToPx(shape.outlineWidth)}px` : "1px";
+        styles.push(`border:${outlineWidth} solid ${outlineColor}`);
+    }
+    const prefix = state.options.classPrefix;
+    state.html.push(`<div class="${prefix}shape" style="${styles.join(";")}">`);
+    if (shape.textContent && shape.textContent.length > 0) {
+        for (const p of shape.textContent) {
+            renderParagraph(state, p);
+        }
+    }
+    state.html.push("</div>");
 }
 // =============================================================================
 // SDT
 // =============================================================================
 function renderSdtHtml(state, sdt) {
+    // Check if this is a checkbox SDT
+    if (sdt.properties?.checkbox) {
+        const checked = sdt.properties.checkbox.checked;
+        state.html.push(`<input type="checkbox"${checked ? " checked" : ""} disabled />`);
+        return;
+    }
     for (const child of sdt.content) {
         if ("type" in child) {
             if (child.type === "paragraph") {
@@ -620,7 +941,7 @@ function renderSdtHtml(state, sdt) {
                 renderTable(state, child);
             }
         }
-        else if ("content" in child) {
+        else if ((0, text_utils_1.isRun)(child)) {
             // Run
             state.html.push(`<span class="${state.options.classPrefix}sdt">`);
             renderRun(state, child);
@@ -677,6 +998,13 @@ function closeOpenLists(state) {
     }
 }
 // =============================================================================
+// Math
+// =============================================================================
+function renderMathBlockHtml(state, block) {
+    const text = (0, text_utils_1.extractMathText)(block.content);
+    state.html.push(`<span class="${state.options.classPrefix}math">${escapeHtml(text)}</span>`);
+}
+// =============================================================================
 // Helpers
 // =============================================================================
 function escapeHtml(s) {
@@ -695,8 +1023,8 @@ function twipsToPx(twips) {
     return Math.round((twips / 1440) * 96);
 }
 function emuToPx(emu) {
-    // 1 inch = 914400 EMU, 96 DPI
-    return Math.round((emu / 914400) * 96);
+    // 96 DPI assumed
+    return Math.round((emu / units_1.EMU_PER_INCH) * 96);
 }
 function imageToDataUrl(img) {
     const mime = {
@@ -718,8 +1046,8 @@ function resolveColor(color, theme) {
         return color === "auto" ? undefined : color;
     }
     if (typeof color === "object" && color !== null) {
-        if (typeof color.value === "string") {
-            return color.value === "auto" ? undefined : color.value;
+        if (typeof color.val === "string") {
+            return color.val === "auto" ? undefined : color.val;
         }
         if (color.themeColor && theme) {
             return (0, color_utils_1.resolveThemeColor)(color, theme);
@@ -764,7 +1092,25 @@ function borderToCss(border) {
     const color = border.color === "auto" || !border.color ? "#000" : `#${border.color}`;
     return `${sizePt}pt ${cssStyle} ${color}`;
 }
-function generateCss(prefix, theme) {
+/**
+ * Parse a style mapping value like "h1.doc-heading" into tag and className.
+ * Supported formats:
+ *   "h1"           → { tag: "h1", className: "" }
+ *   "h1.cls"       → { tag: "h1", className: "cls" }
+ *   ".cls"         → { tag: "", className: "cls" } (uses default tag)
+ *   "blockquote"   → { tag: "blockquote", className: "" }
+ */
+function parseStyleMapping(mapping) {
+    const dotIdx = mapping.indexOf(".");
+    if (dotIdx === -1) {
+        return { tag: mapping, className: "" };
+    }
+    if (dotIdx === 0) {
+        return { tag: "", className: mapping.slice(1) };
+    }
+    return { tag: mapping.slice(0, dotIdx), className: mapping.slice(dotIdx + 1) };
+}
+function generateCss(prefix) {
     return `
 .${prefix}document { font-family: 'Calibri', 'Segoe UI', sans-serif; line-height: 1.15; max-width: 8.5in; margin: 1in auto; padding: 0 1in; }
 .${prefix}document p { margin: 0 0 8pt 0; }
@@ -778,6 +1124,11 @@ function generateCss(prefix, theme) {
 .${prefix}chart { margin: 12pt 0; }
 .${prefix}move-from { text-decoration: line-through; color: #a00; }
 .${prefix}move-to { text-decoration: underline; color: #0a0; }
+.${prefix}comment-highlight { background-color: #fff3cd; }
+.${prefix}comment-ref { text-decoration: none; color: #b86800; }
+.${prefix}comments { margin-top: 2em; border-top: 1px solid #ccc; padding-top: 1em; }
+.${prefix}comment { margin-bottom: 1em; padding: 0.5em; border-left: 3px solid #b86800; padding-left: 1em; }
+.${prefix}comment-meta { font-size: 0.85em; color: #666; margin-bottom: 0.25em; }
 ins { text-decoration: underline; color: #060; }
 del { text-decoration: line-through; color: #600; }
 ruby rt { font-size: 0.5em; }