@boxpdf/html-writer 0.1.15 → 0.1.17

package/dist/index.js

@@ -16,7 +16,7 @@ function dominantTextColor(lines) {
   }
   return [...counts].sort((left, right) => right[1] - left[1])[0]?.[0] ?? "#000000";
 }
-function semanticTextHtml(text, lines, defaultColor) {
+function semanticTextHtml(text, lines, defaultColor, preserveWeight = true) {
   const ranges = [];
   let cursor = 0;
   for (const span of lines.flatMap((line) => line.spans)) {
@@ -25,14 +25,25 @@ function semanticTextHtml(text, lines, defaultColor) {
     if (start < 0) continue;
     cursor = start + span.text.length;
     const color = normalizedColor(span.color);
-    if (color && color !== defaultColor) ranges.push({ start, end: cursor, color });
+    const bold = preserveWeight && /(?:bold|semibold|demi|medium|medi)/i.test(span.fontFamily ?? "");
+    const italic = /(?:italic|oblique|slanted|slant|ital)/i.test(span.fontFamily ?? "");
+    const nondefaultColor = color && color !== defaultColor ? color : void 0;
+    if (nondefaultColor || bold || italic) {
+      ranges.push({
+        start,
+        end: cursor,
+        ...nondefaultColor ? { color: nondefaultColor } : {},
+        bold,
+        italic
+      });
+    }
   }
   const merged = mergeRanges(ranges, text);
   let html = "";
   let offset = 0;
   for (const range of merged) {
     html += escapeHtml(text.slice(offset, range.start));
-    html += `<span style="color:${range.color}">${escapeHtml(text.slice(range.start, range.end))}</span>`;
+    html += styledHtml(text.slice(range.start, range.end), range);
     offset = range.end;
   }
   return html + escapeHtml(text.slice(offset));
@@ -41,7 +52,7 @@ function mergeRanges(ranges, text) {
   const merged = [];
   for (const range of ranges) {
     const previous = merged.at(-1);
-    if (previous && previous.color === range.color && /^\s*$/.test(text.slice(previous.end, range.start))) {
+    if (previous && previous.color === range.color && previous.bold === range.bold && previous.italic === range.italic && /^\s*$/.test(text.slice(previous.end, range.start))) {
       previous.end = range.end;
     } else {
       merged.push({ ...range });
@@ -49,6 +60,13 @@ function mergeRanges(ranges, text) {
   }
   return merged;
 }
+function styledHtml(value, range) {
+  let html = escapeHtml(value);
+  if (range.color) html = `<span style="color:${range.color}">${html}</span>`;
+  if (range.italic) html = `<em>${html}</em>`;
+  if (range.bold) html = `<strong>${html}</strong>`;
+  return html;
+}
 function normalizedColor(value) {
   if (!value || !/^#[\da-f]{6}$/i.test(value)) return void 0;
   const color = value.toLowerCase();
@@ -342,7 +360,9 @@ async function writeSemanticDocument(pages, write, lookaheadPages) {
       await flushPendingParagraph();
       if (employmentOpen && block.type !== "list") await closeEmployment();
       if (!contentStarted && !headerOpen && block.type === "heading" && block.level === 1) {
-        await write(`<header><h1>${semanticTextHtml(block.text, block.lines, defaultColor)}</h1>`);
+        await write(
+          `<header><h1>${semanticTextHtml(block.text, block.lines, defaultColor, false)}</h1>`
+        );
         headerOpen = true;
         continue;
       }
@@ -357,7 +377,7 @@ async function writeSemanticDocument(pages, write, lookaheadPages) {
         }
         if (block.type === "heading" && !headerHasParagraph && (block.level === 1 || block.text.trimStart().startsWith("#") || block.level === 4 && nextBlock?.type === "paragraph" && isContactBlock(nextBlock))) {
           await write(
-            `<h${block.level}>${semanticTextHtml(block.text, block.lines, defaultColor)}</h${block.level}>`
+            `<h${block.level}>${semanticTextHtml(block.text, block.lines, defaultColor, false)}</h${block.level}>`
           );
           continue;
         }
@@ -395,7 +415,7 @@ async function writeSemanticDocument(pages, write, lookaheadPages) {
         const level = contentStarted && block.level === 1 ? 2 : block.level;
         await closeSections(level);
         await write(
-          `<section data-level="${level}"><h${level}>${semanticTextHtml(block.text, block.lines, defaultColor)}</h${level}>`
+          `<section data-level="${level}"><h${level}>${semanticTextHtml(block.text, block.lines, defaultColor, false)}</h${level}>`
         );
         sectionLevels.push(level);
         continue;
@@ -564,7 +584,7 @@ function financialSummaryRow(entry, columns) {
 }
 function semanticBlockHtml(block, defaultColor = "#000000") {
   if (block.type === "heading")
-    return `<h${block.level}>${semanticTextHtml(block.text, block.lines, defaultColor)}</h${block.level}>`;
+    return `<h${block.level}>${semanticTextHtml(block.text, block.lines, defaultColor, false)}</h${block.level}>`;
   if (block.type === "paragraph")
     return `<p>${semanticTextHtml(block.text, block.lines, defaultColor)}</p>`;
   if (block.type === "preformatted") return `<pre>${escapeHtml3(block.text)}</pre>`;
@@ -589,7 +609,7 @@ function semanticBlockHtml(block, defaultColor = "#000000") {
     return `<section><h3>${escapeHtml3(block.role)}</h3><p>${escapeHtml3(block.organization)}</p><p>${escapeHtml3(block.date)}</p></section>`;
   }
   const tag = block.ordered ? "ol" : "ul";
-  return `<${tag}>${block.items.map((item) => `<li>${escapeHtml3(item.text)}</li>`).join("")}</${tag}>`;
+  return `<${tag}>${block.items.map((item) => `<li>${semanticTextHtml(item.text, item.lines, defaultColor)}</li>`).join("")}</${tag}>`;
 }
 function semanticBlockY(block) {
   const lines = block.type === "list" ? block.items.flatMap((item) => item.lines) : block.lines;
@@ -862,7 +882,7 @@ async function writeFlowPage(page, write) {
     if (block.type === "table") await write(tableToHtml(block.table));
     else if (block.type === "heading") {
       await write(
-        `<h${block.level}>${semanticTextHtml(block.text, block.lines, defaultColor)}</h${block.level}>`
+        `<h${block.level}>${semanticTextHtml(block.text, block.lines, defaultColor, false)}</h${block.level}>`
       );
     } else if (block.type === "paragraph") {
       await write(
@@ -901,7 +921,9 @@ async function writeFlowPage(page, write) {
     } else {
       const tag = block.ordered ? "ol" : "ul";
       await write(`<${tag}>`);
-      for (const item of block.items) await write(`<li>${escapeHtml4(item.text)}</li>`);
+      for (const item of block.items) {
+        await write(`<li>${semanticTextHtml(item.text, item.lines, defaultColor)}</li>`);
+      }
       await write(`</${tag}>`);
     }
   }
@@ -971,7 +993,7 @@ function visualType3Text(span, font, pageHeight) {
   let content = "";
   for (const glyph of sequence) {
     if (!glyph) continue;
-    content += `<g transform="translate(${number2(offset)} 0)">${type3Glyph(glyph)}</g>`;
+    content += `<g transform="translate(${number2(offset)} 0)">${type3Glyph(glyph, span.color)}</g>`;
     offset += glyph.advance;
   }
   return `<g transform="${outer}"><g transform="scale(${number2(xScale)} ${number2(-span.fontSize)})">${content}</g></g>`;
@@ -982,18 +1004,19 @@ function isHebrewPaintOrder(span) {
 function usesSpacingAdjustment(span) {
   return !span.fontAssetId && /arial/i.test(span.fontFamily ?? "");
 }
-function type3Glyph(glyph) {
+function type3Glyph(glyph, textColor) {
   let output = "";
   for (const fill of glyph.fills ?? []) {
-    if (!isCssHexColor(fill.color)) continue;
+    const color = glyph.usesTextColor && isCssHexColor(textColor) ? textColor : fill.color;
+    if (!isCssHexColor(color)) continue;
     const points = fill.points.map(([x, y]) => `${number2(x)},${number2(y)}`).join(" ");
     const opacity = isUnitInterval(fill.opacity) ? ` fill-opacity="${number2(fill.opacity)}"` : "";
-    output += `<polygon points="${points}" fill="${fill.color}"${opacity}/>`;
+    output += `<polygon points="${points}" fill="${color}"${opacity}/>`;
   }
   for (const path of glyph.paths ?? []) {
     if (!isSvgPath(path.d)) continue;
-    const fill = isCssHexColor(path.fill) ? path.fill : "none";
-    const stroke = isCssHexColor(path.stroke) ? path.stroke : "none";
+    const fill = glyph.usesTextColor && isCssHexColor(textColor) ? textColor : isCssHexColor(path.fill) ? path.fill : "none";
+    const stroke = glyph.usesTextColor && isCssHexColor(textColor) && path.stroke ? textColor : isCssHexColor(path.stroke) ? path.stroke : "none";
     const width = path.strokeWidth !== void 0 && Number.isFinite(path.strokeWidth) && path.strokeWidth >= 0 ? ` stroke-width="${number2(path.strokeWidth)}"` : "";
     output += `<path d="${path.d}" fill="${fill}" stroke="${stroke}"${width}/>`;
   }