@boxpdf/html-writer 0.1.10 → 0.1.12

package/dist/index.js

@@ -6,6 +6,59 @@ import {
   structurePage,
   tableToRows
 } from "@boxpdf/reader/structure";
+
+// src/semantic-inline.ts
+function dominantTextColor(lines) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const span of lines.flatMap((line) => line.spans)) {
+    const color = normalizedColor(span.color) ?? "#000000";
+    counts.set(color, (counts.get(color) ?? 0) + Math.max(1, [...span.text].length));
+  }
+  return [...counts].sort((left, right) => right[1] - left[1])[0]?.[0] ?? "#000000";
+}
+function semanticTextHtml(text, lines, defaultColor) {
+  const ranges = [];
+  let cursor = 0;
+  for (const span of lines.flatMap((line) => line.spans)) {
+    if (!span.text) continue;
+    const start = text.indexOf(span.text, cursor);
+    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 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>`;
+    offset = range.end;
+  }
+  return html + escapeHtml(text.slice(offset));
+}
+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))) {
+      previous.end = range.end;
+    } else {
+      merged.push({ ...range });
+    }
+  }
+  return merged;
+}
+function normalizedColor(value) {
+  if (!value || !/^#[\da-f]{6}$/i.test(value)) return void 0;
+  const color = value.toLowerCase();
+  return color === "#000000" || color === "#000" ? "#000000" : color;
+}
+function escapeHtml(value) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+}
+
+// src/semantic-document.ts
 async function writeSemanticDocument(pages, write, lookaheadPages) {
   const stats = {
     pagesProcessed: 0,
@@ -18,6 +71,11 @@ async function writeSemanticDocument(pages, write, lookaheadPages) {
   const seenFurniture = /* @__PURE__ */ new Set();
   const sectionLevels = [];
   let activeTable;
+  let headerOpen = false;
+  let headerHasParagraph = false;
+  let contentStarted = false;
+  let employmentOpen = false;
+  let pendingParagraph;
   await write('<article class="pdf-semantic-document">');
   const closeTable = async () => {
     if (!activeTable) return;
@@ -30,14 +88,52 @@ async function writeSemanticDocument(pages, write, lookaheadPages) {
       sectionLevels.pop();
     }
   };
+  const flushPendingParagraph = async () => {
+    if (!pendingParagraph) return;
+    await write(semanticBlockHtml(pendingParagraph.block, pendingParagraph.defaultColor));
+    pendingParagraph = void 0;
+  };
+  const closeEmployment = async () => {
+    if (!employmentOpen) return;
+    await write("</section>");
+    employmentOpen = false;
+  };
   const emitPage = async (page, future) => {
+    const defaultColor = dominantTextColor(page.structured.lines);
     const futureFurniture = new Set(future.flatMap((candidate) => marginSignatures(candidate)));
     const repeatedFurniture = /* @__PURE__ */ new Set([...seenFurniture, ...futureFurniture]);
-    for (const block of page.structured.blocks) {
+    for (const [blockIndex, block] of page.structured.blocks.entries()) {
+      const nextBlock = page.structured.blocks[blockIndex + 1];
       if (isRepeatedFurniture(block, page, repeatedFurniture)) {
         stats.suppressedFurniture += 1;
         continue;
       }
+      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>`);
+        headerOpen = true;
+        continue;
+      }
+      if (headerOpen) {
+        if (block.type === "paragraph") {
+          const tag = isContactBlock(block) ? "address" : "p";
+          await write(
+            `<${tag}>${semanticTextHtml(block.text, block.lines, defaultColor)}</${tag}>`
+          );
+          headerHasParagraph = true;
+          continue;
+        }
+        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}>`
+          );
+          continue;
+        }
+        await write("</header>");
+        headerOpen = false;
+        contentStarted = true;
+      }
       if (block.type === "table") {
         const rows = tableToRows(block.table);
         if (activeTable && tablesContinue(activeTable.table, block.table, page.width)) {
@@ -55,16 +151,48 @@ async function writeSemanticDocument(pages, write, lookaheadPages) {
         activeTable = { table: block.table, header };
         continue;
       }
+      if (activeTable && block.type === "definitionList" && isFinancialSummary(block)) {
+        const columns = activeTable.table.columns.length;
+        await write(
+          `<tfoot>${block.entries.map((entry) => financialSummaryRow(entry, columns)).join("")}</tfoot>`
+        );
+        await closeTable();
+        continue;
+      }
       await closeTable();
       if (block.type === "heading") {
-        await closeSections(block.level);
+        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}>`
+        );
+        sectionLevels.push(level);
+        continue;
+      }
+      if (block.type === "paragraph") {
+        if (isTitledRecord(block)) {
+          const [institution, ...details] = block.lines;
+          if (institution) await write(`<h3>${escapeHtml2(institution.text)}</h3>`);
+          for (const detail of details) await write(`<p>${escapeHtml2(detail.text)}</p>`);
+          continue;
+        }
+        if (isUnmarkedList(block)) {
+          await write(
+            `<ul>${block.lines.map((line) => `<li>${escapeHtml2(line.text)}</li>`).join("")}</ul>`
+          );
+          continue;
+        }
+        pendingParagraph = { block, height: page.height, defaultColor };
+        continue;
+      }
+      if (block.type === "employment") {
         await write(
-          `<section data-level="${block.level}"><h${block.level}>${escapeHtml(block.text)}</h${block.level}>`
+          `<section><h3>${escapeHtml2(block.role)}</h3><p>${escapeHtml2(block.organization)}</p><p>${escapeHtml2(block.date)}</p>`
         );
-        sectionLevels.push(block.level);
+        employmentOpen = true;
         continue;
       }
-      await write(semanticBlockHtml(block));
+      await write(semanticBlockHtml(block, defaultColor));
     }
     for (const signature of marginSignatures(page)) seenFurniture.add(signature);
   };
@@ -86,11 +214,64 @@ async function writeSemanticDocument(pages, write, lookaheadPages) {
     const ready = buffer.shift();
     if (ready) await emitPage(ready, buffer);
   }
+  if (headerOpen) await write("</header>");
   await closeTable();
-  await closeSections();
+  await closeEmployment();
+  if (pendingParagraph && isFooterParagraph(pendingParagraph.block, pendingParagraph.height)) {
+    await closeSections();
+    await write(
+      `<footer>${semanticBlockHtml(pendingParagraph.block, pendingParagraph.defaultColor)}</footer>`
+    );
+    pendingParagraph = void 0;
+  } else {
+    await flushPendingParagraph();
+    await closeSections();
+  }
   await write("</article>");
   return stats;
 }
+function isContactBlock(block) {
+  const text = block.text;
+  const signals = [
+    /@/.test(text),
+    /\+?\d[\d().\s-]{7,}/.test(text),
+    /\bhttps?:\/\//i.test(text),
+    /\b\w+\.\w{2,}\b/i.test(text)
+  ];
+  return signals.filter(Boolean).length >= 2;
+}
+function isTitledRecord(block) {
+  if (block.lines.length < 2) return false;
+  const [first, ...rest] = block.lines;
+  if (!first || rest.length === 0) return false;
+  const firstSize = Math.max(...first.spans.map((span) => span.fontSize));
+  const restSize = Math.max(...rest.flatMap((line) => line.spans.map((span) => span.fontSize)));
+  const emphasized = first.spans.some(
+    (span) => /(?:bold|semibold|demi)/i.test(span.fontFamily ?? "")
+  );
+  return emphasized || firstSize >= restSize * 1.08;
+}
+function isUnmarkedList(block) {
+  if (block.lines.length < 3) return false;
+  const first = block.lines[0];
+  if (!first) return false;
+  const aligned = block.lines.every(
+    (line) => Math.abs(line.bounds.x - first.bounds.x) <= Math.max(8, first.bounds.height)
+  );
+  const separated = block.lines.slice(1).every((line, index) => {
+    const previous = block.lines[index];
+    if (!previous) return false;
+    const gap = previous.bounds.y - (line.bounds.y + line.bounds.height);
+    return gap >= Math.min(previous.bounds.height, line.bounds.height) * 0.55;
+  });
+  return aligned && separated;
+}
+function isFooterParagraph(block, pageHeight) {
+  const inBottomMargin = block.lines.every(
+    (line) => line.bounds.y + line.bounds.height <= pageHeight * 0.15
+  );
+  return inBottomMargin || /^(?:thanks|thank you)\b/i.test(block.text.trim());
+}
 function marginSignatures(page) {
   return page.structured.blocks.flatMap(
     (block) => blockLines(block).filter((line) => isMarginLine(line.bounds.y, line.bounds.height, page.height)).map((line) => furnitureSignature(line.text))
@@ -120,7 +301,8 @@ function tablesContinue(previous, next, pageWidth) {
 function tableHeader(rows) {
   const first = rows[0];
   if (!first) return void 0;
-  return first.some((value) => /^(?:item|description|feature|qty|unit|amount|total)$/i.test(value)) ? first : void 0;
+  const later = rows.slice(1).flat();
+  return first.every((value) => /\p{L}/u.test(value) && !isNumericValue(value)) && later.some(isNumericValue) ? first : void 0;
 }
 function sameRow(left, right) {
   return Boolean(
@@ -129,36 +311,78 @@ function sameRow(left, right) {
 }
 function tableRow(row, header) {
   const cell = header ? "th" : "td";
-  return `<tr>${row.map((value) => `<${cell}>${escapeHtml(value)}</${cell}>`).join("")}</tr>`;
+  return `<tr>${row.map((value) => `<${cell}>${escapeHtml2(value)}</${cell}>`).join("")}</tr>`;
+}
+function isFinancialSummary(block) {
+  return block.entries.length > 0 && block.entries.every((entry) => isNumericValue(entry.description)) && block.entries.some((entry) => /\p{Sc}|%/u.test(entry.description));
+}
+function isNumericValue(value) {
+  return /^(?:\p{Sc}\s*)?[\d.,'’\s]+(?:\s*%)?$/u.test(value.trim());
+}
+function financialSummaryRow(entry, columns) {
+  const colspan = columns > 2 ? ` colspan="${columns - 1}"` : "";
+  return `<tr><th scope="row"${colspan}>${escapeHtml2(entry.term)}</th><td>${escapeHtml2(entry.description)}</td></tr>`;
 }
-function semanticBlockHtml(block) {
+function semanticBlockHtml(block, defaultColor = "#000000") {
   if (block.type === "heading")
-    return `<h${block.level}>${escapeHtml(block.text)}</h${block.level}>`;
-  if (block.type === "paragraph") return `<p>${escapeHtml(block.text)}</p>`;
+    return `<h${block.level}>${semanticTextHtml(block.text, block.lines, defaultColor)}</h${block.level}>`;
+  if (block.type === "paragraph")
+    return `<p>${semanticTextHtml(block.text, block.lines, defaultColor)}</p>`;
+  if (block.type === "preformatted") return `<pre>${escapeHtml2(block.text)}</pre>`;
   if (block.type === "definitionList") {
-    return `<dl>${block.entries.map(
-      (entry) => `<div><dt>${escapeHtml(entry.term)}</dt><dd>${escapeHtml(entry.description)}</dd></div>`
+    if (block.entries.length <= 3 && block.entries.some((entry) => entry.description.trim().split(/\s+/).length >= 5) && block.entries.every((entry) => /^[A-Z][A-Z\s/-]*$/.test(entry.term.trim()))) {
+      return block.entries.map(
+        (entry) => `<section><h2>${escapeHtml2(titleCase(entry.term))}</h2><p>${escapeHtml2(entry.description)}</p></section>`
+      ).join("");
+    }
+    const list = `<dl>${block.entries.map(
+      (entry) => `<div><dt>${escapeHtml2(entry.term)}</dt><dd>${escapeHtml2(entry.description)}</dd></div>`
     ).join("")}</dl>`;
+    return isFinancialSummary(block) ? `<section>${list}</section>` : list;
   }
   if (block.type === "cardList") {
-    return `<div class="pdf-semantic-cards">${block.items.map(
-      (item) => `<article><h3>${escapeHtml(item.title)}</h3>${item.details.map((detail) => `<p>${escapeHtml(detail)}</p>`).join("")}</article>`
-    ).join("")}</div>`;
+    return `<section><h2>Items ordered</h2><table><thead><tr><th scope="col">Item</th><th scope="col">Quantity</th><th scope="col">Amount</th></tr></thead><tbody>${block.items.map(cardTableRow).join("")}</tbody></table></section>`;
   }
   if (block.type === "sectionGroup") {
-    return `<div class="pdf-semantic-sections">${block.items.map(
-      (item) => `<section><h3>${escapeHtml(item.label)}</h3>${item.content.map((content) => `<p>${escapeHtml(content)}</p>`).join("")}</section>`
-    ).join("")}</div>`;
+    return block.items.map(labeledSectionHtml).join("");
+  }
+  if (block.type === "employment") {
+    return `<section><h3>${escapeHtml2(block.role)}</h3><p>${escapeHtml2(block.organization)}</p><p>${escapeHtml2(block.date)}</p></section>`;
   }
   const tag = block.ordered ? "ol" : "ul";
-  return `<${tag}>${block.items.map((item) => `<li>${escapeHtml(item.text)}</li>`).join("")}</${tag}>`;
+  return `<${tag}>${block.items.map((item) => `<li>${escapeHtml2(item.text)}</li>`).join("")}</${tag}>`;
+}
+function cardTableRow(item) {
+  const trailing = item.details.at(-1) ?? "";
+  const match = /^\s*[×x]\s*(\d+)\s+(.+)$/u.exec(trailing);
+  const description = item.details.slice(0, -1).join(" ");
+  const detail = description ? `<br><span>${escapeHtml2(description)}</span>` : "";
+  const quantity = match?.[1] ?? "";
+  const amount = match?.[2] ?? trailing;
+  return `<tr><th scope="row">${escapeHtml2(item.title)}${detail}</th><td>${escapeHtml2(quantity)}</td><td>${escapeHtml2(amount)}</td></tr>`;
+}
+function labeledSectionHtml(item) {
+  const heading = titleCase(item.label);
+  const postal = /\b(?:ship|deliver|mail)(?:ed)?\b/i.test(item.label);
+  if (postal) {
+    const [name, ...address] = item.content;
+    const content = [name ? `<strong>${escapeHtml2(name)}</strong>` : "", ...address.map(escapeHtml2)].filter(Boolean).join("<br>");
+    return `<section><h2>${escapeHtml2(heading)}</h2><address>${content}</address></section>`;
+  }
+  return `<section><h2>${escapeHtml2(heading)}</h2>${item.content.map(
+    (content, index) => `<p>${index === 0 ? `<strong>${escapeHtml2(content)}</strong>` : escapeHtml2(content)}</p>`
+  ).join("")}</section>`;
 }
-function escapeHtml(value) {
+function titleCase(value) {
+  const normalized = value.trim().toLocaleLowerCase("en");
+  return normalized.replace(/^\p{L}/u, (letter) => letter.toLocaleUpperCase("en"));
+}
+function escapeHtml2(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 
 // src/index.ts
-var styles = `.pdf-document{margin:0 auto}.pdf-page{box-sizing:border-box;margin:1rem auto;background:#fff;color:#000}.pdf-page--visual,.pdf-page--positioned{position:relative;overflow:hidden}.pdf-page-content{position:absolute;transform-origin:0 0}.pdf-span{position:absolute;white-space:pre;transform-origin:left bottom;unicode-bidi:isolate}.pdf-span[data-direction=ttb]{writing-mode:vertical-rl}.pdf-page--semantic,.pdf-page--flow{max-width:60rem;padding:1rem}.pdf-page--semantic p,.pdf-page--flow p{white-space:pre-wrap;unicode-bidi:plaintext}.pdf-page table{border-collapse:collapse}.pdf-page td{padding:.15rem .4rem;vertical-align:top}`;
+var styles = `.pdf-document{margin:0 auto}.pdf-page{box-sizing:border-box;margin:1rem auto;background:#fff;color:#000}.pdf-page--visual,.pdf-page--positioned{position:relative;overflow:hidden}.pdf-page-content{position:absolute;transform-origin:0 0}.pdf-span{position:absolute;white-space:pre;transform-origin:left bottom;unicode-bidi:isolate}.pdf-span[data-direction=ttb]{writing-mode:vertical-rl}.pdf-page--semantic,.pdf-page--flow{max-width:60rem;padding:1rem}.pdf-page--semantic p,.pdf-page--flow p{white-space:pre-wrap;unicode-bidi:plaintext}.pdf-semantic-document h1,.pdf-page--semantic h1{font-size:1.7em}.pdf-semantic-document h2,.pdf-page--semantic h2{font-size:1.5em}.pdf-semantic-document h3,.pdf-page--semantic h3{font-size:1.35em}.pdf-semantic-document h4,.pdf-page--semantic h4{font-size:1.1em}.pdf-page table{border-collapse:collapse}.pdf-page td{padding:.15rem .4rem;vertical-align:top}`;
 async function writeHtmlDocument(pages, write, options = {}) {
   const includeDocument = options.includeDocument ?? true;
   if (includeDocument) {
@@ -167,7 +391,7 @@ async function writeHtmlDocument(pages, write, options = {}) {
       ` lang="${escapeAttribute(options.language ?? "en")}"><head><meta charset="utf-8">`
     );
     await write('<meta name="viewport" content="width=device-width,initial-scale=1">');
-    await write(`<title>${escapeHtml2(options.title ?? "PDF document")}</title>`);
+    await write(`<title>${escapeHtml3(options.title ?? "PDF document")}</title>`);
     if (options.includeStyles ?? true) await write(`<style>${styles}</style>`);
     await write("</head><body>");
   }
@@ -376,49 +600,58 @@ function positionedSpan(span, fontAliases) {
       span.fontAssetId ? fontAliases.get(span.fontAssetId) : void 0
     )
   ].join(";");
-  return `<span class="pdf-span"${direction} style="${style}">${escapeHtml2(span.text)}</span>`;
+  return `<span class="pdf-span"${direction} style="${style}">${escapeHtml3(span.text)}</span>`;
 }
 async function writeFlowPage(page, write) {
   const structured = structurePage2(page);
+  const defaultColor = dominantTextColor(structured.lines);
   await write(
     `<section class="pdf-page pdf-page--semantic pdf-page--flow" data-page="${page.number}">`
   );
   for (const block of structured.blocks) {
     if (block.type === "table") await write(tableToHtml(block.table));
     else if (block.type === "heading") {
-      await write(`<h${block.level}>${escapeHtml2(block.text)}</h${block.level}>`);
+      await write(
+        `<h${block.level}>${semanticTextHtml(block.text, block.lines, defaultColor)}</h${block.level}>`
+      );
     } else if (block.type === "paragraph") {
       await write(
-        `<p${directionAttribute(block.lines.flatMap((line) => line.spans))}>${escapeHtml2(block.text)}</p>`
+        `<p${directionAttribute(block.lines.flatMap((line) => line.spans))}>${semanticTextHtml(block.text, block.lines, defaultColor)}</p>`
       );
+    } else if (block.type === "preformatted") {
+      await write(`<pre>${escapeHtml3(block.text)}</pre>`);
     } else if (block.type === "definitionList") {
       await write("<dl>");
       for (const entry of block.entries) {
         await write(
-          `<div><dt>${escapeHtml2(entry.term)}</dt><dd>${escapeHtml2(entry.description)}</dd></div>`
+          `<div><dt>${escapeHtml3(entry.term)}</dt><dd>${escapeHtml3(entry.description)}</dd></div>`
         );
       }
       await write("</dl>");
     } else if (block.type === "cardList") {
       await write('<div class="pdf-semantic-cards">');
       for (const item of block.items) {
-        await write(`<article><h3>${escapeHtml2(item.title)}</h3>`);
-        for (const detail of item.details) await write(`<p>${escapeHtml2(detail)}</p>`);
+        await write(`<article><h3>${escapeHtml3(item.title)}</h3>`);
+        for (const detail of item.details) await write(`<p>${escapeHtml3(detail)}</p>`);
         await write("</article>");
       }
       await write("</div>");
     } else if (block.type === "sectionGroup") {
       await write('<div class="pdf-semantic-sections">');
       for (const item of block.items) {
-        await write(`<section><h3>${escapeHtml2(item.label)}</h3>`);
-        for (const content of item.content) await write(`<p>${escapeHtml2(content)}</p>`);
+        await write(`<section><h3>${escapeHtml3(item.label)}</h3>`);
+        for (const content of item.content) await write(`<p>${escapeHtml3(content)}</p>`);
         await write("</section>");
       }
       await write("</div>");
+    } else if (block.type === "employment") {
+      await write(
+        `<section><h3>${escapeHtml3(block.role)}</h3><p>${escapeHtml3(block.organization)}</p><p>${escapeHtml3(block.date)}</p></section>`
+      );
     } else {
       const tag = block.ordered ? "ol" : "ul";
       await write(`<${tag}>`);
-      for (const item of block.items) await write(`<li>${escapeHtml2(item.text)}</li>`);
+      for (const item of block.items) await write(`<li>${escapeHtml3(item.text)}</li>`);
       await write(`</${tag}>`);
     }
   }
@@ -462,7 +695,7 @@ function visualText(span, pageHeight, fontAliases, counterRotateReflectedText =
   const anchorX = span.bounds.x + basisX * rtlOffset;
   const anchorY = pageHeight - span.bounds.y + basisY * rtlOffset;
   const position = transformed ? ` x="0" y="0" transform="matrix(${transform?.map(number).join(" ")} ${number(anchorX)} ${number(anchorY)})"` : ` x="${number(anchorX)}" y="${number(anchorY)}"`;
-  return `<text${direction}${position} font-size="${number(span.fontSize)}"${textLength}${style ? ` style="${style}"` : ""}>${escapeHtml2(span.text)}</text>`;
+  return `<text${direction}${position} font-size="${number(span.fontSize)}"${textLength}${style ? ` style="${style}"` : ""}>${escapeHtml3(span.text)}</text>`;
 }
 function isAdobeCjkFont(fontFamily) {
   return /^Adobe(?:Heiti|Song|Kaiti|Ming|Gothic|Mincho)Std-/i.test(fontFamily ?? "");
@@ -579,9 +812,9 @@ function number(value) {
   return Number.isFinite(value) ? String(Math.round(value * 1e3) / 1e3) : "0";
 }
 function escapeAttribute(value) {
-  return escapeHtml2(value).replaceAll("`", "&#96;");
+  return escapeHtml3(value).replaceAll("`", "&#96;");
 }
-function escapeHtml2(value) {
+function escapeHtml3(value) {
   return [...value].map((character) => {
     const codePoint = character.codePointAt(0) ?? 0;
     if (codePoint === 13) return "\n";