@boxpdf/html-writer 0.1.11 → 0.1.13

package/dist/index.cjs

@@ -29,6 +29,205 @@ var import_structure2 = require("@boxpdf/reader/structure");
 
 // src/semantic-document.ts
 var import_structure = require("@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-media.ts
+function semanticMedia(page) {
+  const output = (page.images ?? []).map((image) => rasterMedia(image));
+  const vector = vectorMedia(page);
+  if (vector) output.push(vector);
+  return output.sort((left, right) => right.bounds.y - left.bounds.y);
+}
+function rasterMedia(image) {
+  const bounds = transformedUnitBounds(image.transform);
+  const mime = image.format === "jpeg" ? "image/jpeg" : "image/bmp";
+  const data = image.format === "jpeg" ? image.data : rgbBmp(image);
+  const opacity = unitInterval(image.opacity) ? `;opacity:${number(image.opacity)}` : "";
+  return {
+    bounds,
+    html: `<img class="pdf-semantic-media" src="data:${mime};base64,${base64(data)}" width="${number(bounds.width)}" height="${number(bounds.height)}" alt="" style="max-width:100%;height:auto${opacity}">`
+  };
+}
+function vectorMedia(page) {
+  const paths = (page.paths ?? []).filter((path) => safePath(path.d));
+  const fills = page.fills ?? [];
+  const bounds = unionBounds([
+    ...paths.map((path) => pathBounds(path.d)),
+    ...fills.map(fillBounds)
+  ]);
+  if (!bounds || bounds.width <= 0 || bounds.height <= 0) return void 0;
+  const content = fills.map(vectorFill).join("") + paths.map((path) => vectorPath(path)).join("");
+  return {
+    bounds,
+    html: `<svg class="pdf-semantic-media" xmlns="http://www.w3.org/2000/svg" viewBox="${number(bounds.x)} ${number(page.height - bounds.y - bounds.height)} ${number(bounds.width)} ${number(bounds.height)}" style="display:block;max-width:100%;height:auto" aria-hidden="true"><g transform="translate(0 ${number(page.height)}) scale(1 -1)">${content}</g></svg>`
+  };
+}
+function vectorFill(fill) {
+  const points = fill.points.map(([x, y]) => `${number(x)},${number(y)}`).join(" ");
+  const opacity = unitInterval(fill.opacity) ? ` fill-opacity="${number(fill.opacity)}"` : "";
+  return cssColor(fill.color) ? `<polygon points="${points}" fill="${fill.color}"${opacity}/>` : "";
+}
+function vectorPath(path) {
+  const fill = cssColor(path.fill) ? path.fill : "none";
+  const stroke = cssColor(path.stroke) ? path.stroke : "none";
+  const width = finiteNonnegative(path.strokeWidth) ? ` stroke-width="${number(path.strokeWidth)}"` : "";
+  const fillOpacity = unitInterval(path.fillOpacity) ? ` fill-opacity="${number(path.fillOpacity)}"` : "";
+  const strokeOpacity = unitInterval(path.strokeOpacity) ? ` stroke-opacity="${number(path.strokeOpacity)}"` : "";
+  const dash = path.strokeDasharray?.every(finiteNonnegative) ? ` stroke-dasharray="${path.strokeDasharray.map(number).join(" ")}"` : "";
+  const linecap = path.strokeLinecap ? ` stroke-linecap="${path.strokeLinecap}"` : "";
+  const linejoin = path.strokeLinejoin ? ` stroke-linejoin="${path.strokeLinejoin}"` : "";
+  const rule = path.fillRule ? ` fill-rule="${path.fillRule}"` : "";
+  return `<path d="${path.d}" fill="${fill}" stroke="${stroke}"${width}${fillOpacity}${strokeOpacity}${dash}${linecap}${linejoin}${rule}/>`;
+}
+function transformedUnitBounds([a, b, c, d, e, f]) {
+  const points = [
+    [e, f],
+    [a + e, b + f],
+    [c + e, d + f],
+    [a + c + e, b + d + f]
+  ];
+  const xs = points.map(([x]) => x ?? 0);
+  const ys = points.map(([, y]) => y ?? 0);
+  const minX = Math.min(...xs);
+  const minY = Math.min(...ys);
+  return { x: minX, y: minY, width: Math.max(...xs) - minX, height: Math.max(...ys) - minY };
+}
+function pathBounds(path) {
+  const values = [...path.matchAll(/[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?/gi)].map(
+    (match) => Number(match[0])
+  );
+  if (values.length < 2) return void 0;
+  const xs = [];
+  const ys = [];
+  for (let index = 0; index + 1 < values.length; index += 2) {
+    xs.push(values[index] ?? 0);
+    ys.push(values[index + 1] ?? 0);
+  }
+  const minX = Math.min(...xs);
+  const minY = Math.min(...ys);
+  return { x: minX, y: minY, width: Math.max(...xs) - minX, height: Math.max(...ys) - minY };
+}
+function fillBounds(fill) {
+  if (fill.points.length === 0) return void 0;
+  const xs = fill.points.map(([x]) => x);
+  const ys = fill.points.map(([, y]) => y);
+  const minX = Math.min(...xs);
+  const minY = Math.min(...ys);
+  return { x: minX, y: minY, width: Math.max(...xs) - minX, height: Math.max(...ys) - minY };
+}
+function unionBounds(bounds) {
+  const values = bounds.filter((value) => Boolean(value));
+  if (values.length === 0) return void 0;
+  const x = Math.min(...values.map((value) => value.x));
+  const y = Math.min(...values.map((value) => value.y));
+  const right = Math.max(...values.map((value) => value.x + value.width));
+  const top = Math.max(...values.map((value) => value.y + value.height));
+  return { x, y, width: right - x, height: top - y };
+}
+function rgbBmp(image) {
+  const stride = Math.ceil(image.width * 3 / 4) * 4;
+  const output = new Uint8Array(54 + stride * image.height);
+  const view = new DataView(output.buffer);
+  output.set([66, 77]);
+  view.setUint32(2, output.length, true);
+  view.setUint32(10, 54, true);
+  view.setUint32(14, 40, true);
+  view.setInt32(18, image.width, true);
+  view.setInt32(22, -image.height, true);
+  view.setUint16(26, 1, true);
+  view.setUint16(28, 24, true);
+  for (let row = 0; row < image.height; row += 1) {
+    for (let column = 0; column < image.width; column += 1) {
+      const source = (row * image.width + column) * 3;
+      const target = 54 + row * stride + column * 3;
+      output[target] = image.data[source + 2] ?? 0;
+      output[target + 1] = image.data[source + 1] ?? 0;
+      output[target + 2] = image.data[source] ?? 0;
+    }
+  }
+  return output;
+}
+function base64(bytes) {
+  const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+  let output = "";
+  for (let index = 0; index < bytes.length; index += 3) {
+    const first = bytes[index] ?? 0;
+    const second = bytes[index + 1] ?? 0;
+    const third = bytes[index + 2] ?? 0;
+    output += alphabet[first >> 2];
+    output += alphabet[(first & 3) << 4 | second >> 4];
+    output += index + 1 < bytes.length ? alphabet[(second & 15) << 2 | third >> 6] : "=";
+    output += index + 2 < bytes.length ? alphabet[third & 63] : "=";
+  }
+  return output;
+}
+function safePath(value) {
+  return value.length <= 1e6 && /^[\d\s.,+\-eEMmLlCcZz]+$/.test(value);
+}
+function cssColor(value) {
+  return /^#[\da-f]{6}$/i.test(value ?? "");
+}
+function finiteNonnegative(value) {
+  return Number.isFinite(value) && (value ?? -1) >= 0;
+}
+function unitInterval(value) {
+  return finiteNonnegative(value) && value <= 1;
+}
+function number(value) {
+  return Number.isFinite(value) ? String(Math.round(value * 1e3) / 1e3) : "0";
+}
+
+// src/semantic-document.ts
 async function writeSemanticDocument(pages, write, lookaheadPages) {
   const stats = {
     pagesProcessed: 0,
@@ -41,6 +240,7 @@ async function writeSemanticDocument(pages, write, lookaheadPages) {
   const seenFurniture = /* @__PURE__ */ new Set();
   const sectionLevels = [];
   let activeTable;
+  const pendingMedia = [];
   let headerOpen = false;
   let headerHasParagraph = false;
   let contentStarted = false;
@@ -51,6 +251,7 @@ async function writeSemanticDocument(pages, write, lookaheadPages) {
     if (!activeTable) return;
     await write("</table>");
     activeTable = void 0;
+    while (pendingMedia.length > 0) await write(pendingMedia.shift() ?? "");
   };
   const closeSections = async (minimumLevel = 0) => {
     while ((sectionLevels.at(-1) ?? -1) >= minimumLevel && sectionLevels.length > 0) {
@@ -60,7 +261,7 @@ async function writeSemanticDocument(pages, write, lookaheadPages) {
   };
   const flushPendingParagraph = async () => {
     if (!pendingParagraph) return;
-    await write(semanticBlockHtml(pendingParagraph.block));
+    await write(semanticBlockHtml(pendingParagraph.block, pendingParagraph.defaultColor));
     pendingParagraph = void 0;
   };
   const closeEmployment = async () => {
@@ -69,9 +270,20 @@ async function writeSemanticDocument(pages, write, lookaheadPages) {
     employmentOpen = false;
   };
   const emitPage = async (page, future) => {
+    const defaultColor = dominantTextColor(page.structured.lines);
+    let mediaIndex = 0;
     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];
+      const blockY = semanticBlockY(block);
+      while ((page.media[mediaIndex]?.bounds.y ?? -Infinity) >= blockY) {
+        await flushPendingParagraph();
+        const html = `<div class="pdf-semantic-visual">${page.media[mediaIndex]?.html}</div>`;
+        if (activeTable) pendingMedia.push(html);
+        else await write(html);
+        mediaIndex += 1;
+      }
       if (isRepeatedFurniture(block, page, repeatedFurniture)) {
         stats.suppressedFurniture += 1;
         continue;
@@ -79,19 +291,23 @@ 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>${escapeHtml(block.text)}</h1>`);
+        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}>${escapeHtml(block.text)}</${tag}>`);
+          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("#"))) {
-          await write(`<h${block.level}>${escapeHtml(block.text)}</h${block.level}>`);
+        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>");
@@ -128,7 +344,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}>${escapeHtml(block.text)}</h${level}>`
+          `<section data-level="${level}"><h${level}>${semanticTextHtml(block.text, block.lines, defaultColor)}</h${level}>`
         );
         sectionLevels.push(level);
         continue;
@@ -136,33 +352,40 @@ async function writeSemanticDocument(pages, write, lookaheadPages) {
       if (block.type === "paragraph") {
         if (isTitledRecord(block)) {
           const [institution, ...details] = block.lines;
-          if (institution) await write(`<h3>${escapeHtml(institution.text)}</h3>`);
-          for (const detail of details) await write(`<p>${escapeHtml(detail.text)}</p>`);
+          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>${escapeHtml(line.text)}</li>`).join("")}</ul>`
+            `<ul>${block.lines.map((line) => `<li>${escapeHtml2(line.text)}</li>`).join("")}</ul>`
           );
           continue;
         }
-        pendingParagraph = { block, height: page.height };
+        pendingParagraph = { block, height: page.height, defaultColor };
         continue;
       }
       if (block.type === "employment") {
         await write(
-          `<section><h3>${escapeHtml(block.role)}</h3><p>${escapeHtml(block.organization)}</p><p>${escapeHtml(block.date)}</p>`
+          `<section><h3>${escapeHtml2(block.role)}</h3><p>${escapeHtml2(block.organization)}</p><p>${escapeHtml2(block.date)}</p>`
         );
         employmentOpen = true;
         continue;
       }
-      await write(semanticBlockHtml(block));
+      await write(semanticBlockHtml(block, defaultColor));
+    }
+    while (mediaIndex < page.media.length) {
+      await flushPendingParagraph();
+      const html = `<div class="pdf-semantic-visual">${page.media[mediaIndex]?.html}</div>`;
+      if (activeTable) pendingMedia.push(html);
+      else await write(html);
+      mediaIndex += 1;
     }
     for (const signature of marginSignatures(page)) seenFurniture.add(signature);
   };
   for await (const page of pages) {
     const structured = (0, import_structure.structurePage)(page);
-    buffer.push({ width: page.width, height: page.height, structured });
+    buffer.push({ width: page.width, height: page.height, structured, media: semanticMedia(page) });
     stats.pagesProcessed += 1;
     stats.peakBufferedPages = Math.max(stats.peakBufferedPages, buffer.length);
     stats.peakBufferedLines = Math.max(
@@ -183,7 +406,9 @@ async function writeSemanticDocument(pages, write, lookaheadPages) {
   await closeEmployment();
   if (pendingParagraph && isFooterParagraph(pendingParagraph.block, pendingParagraph.height)) {
     await closeSections();
-    await write(`<footer>${semanticBlockHtml(pendingParagraph.block)}</footer>`);
+    await write(
+      `<footer>${semanticBlockHtml(pendingParagraph.block, pendingParagraph.defaultColor)}</footer>`
+    );
     pendingParagraph = void 0;
   } else {
     await flushPendingParagraph();
@@ -273,7 +498,7 @@ 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));
@@ -283,20 +508,22 @@ function isNumericValue(value) {
 }
 function financialSummaryRow(entry, columns) {
   const colspan = columns > 2 ? ` colspan="${columns - 1}"` : "";
-  return `<tr><th scope="row"${colspan}>${escapeHtml(entry.term)}</th><td>${escapeHtml(entry.description)}</td></tr>`;
+  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") {
     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>${escapeHtml(titleCase(entry.term))}</h2><p>${escapeHtml(entry.description)}</p></section>`
+        (entry) => `<section><h2>${escapeHtml2(titleCase(entry.term))}</h2><p>${escapeHtml2(entry.description)}</p></section>`
       ).join("");
     }
     const list = `<dl>${block.entries.map(
-      (entry) => `<div><dt>${escapeHtml(entry.term)}</dt><dd>${escapeHtml(entry.description)}</dd></div>`
+      (entry) => `<div><dt>${escapeHtml2(entry.term)}</dt><dd>${escapeHtml2(entry.description)}</dd></div>`
     ).join("")}</dl>`;
     return isFinancialSummary(block) ? `<section>${list}</section>` : list;
   }
@@ -307,42 +534,46 @@ function semanticBlockHtml(block) {
     return block.items.map(labeledSectionHtml).join("");
   }
   if (block.type === "employment") {
-    return `<section><h3>${escapeHtml(block.role)}</h3><p>${escapeHtml(block.organization)}</p><p>${escapeHtml(block.date)}</p></section>`;
+    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 semanticBlockY(block) {
+  const lines = block.type === "list" ? block.items.flatMap((item) => item.lines) : block.lines;
+  return Math.max(...lines.map((line) => line.bounds.y + line.bounds.height));
 }
 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>${escapeHtml(description)}</span>` : "";
+  const detail = description ? `<br><span>${escapeHtml2(description)}</span>` : "";
   const quantity = match?.[1] ?? "";
   const amount = match?.[2] ?? trailing;
-  return `<tr><th scope="row">${escapeHtml(item.title)}${detail}</th><td>${escapeHtml(quantity)}</td><td>${escapeHtml(amount)}</td></tr>`;
+  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>${escapeHtml(name)}</strong>` : "", ...address.map(escapeHtml)].filter(Boolean).join("<br>");
-    return `<section><h2>${escapeHtml(heading)}</h2><address>${content}</address></section>`;
+    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>${escapeHtml(heading)}</h2>${item.content.map(
-    (content, index) => `<p>${index === 0 ? `<strong>${escapeHtml(content)}</strong>` : escapeHtml(content)}</p>`
+  return `<section><h2>${escapeHtml2(heading)}</h2>${item.content.map(
+    (content, index) => `<p>${index === 0 ? `<strong>${escapeHtml2(content)}</strong>` : escapeHtml2(content)}</p>`
   ).join("")}</section>`;
 }
 function titleCase(value) {
   const normalized = value.trim().toLocaleLowerCase("en");
   return normalized.replace(/^\p{L}/u, (letter) => letter.toLocaleUpperCase("en"));
 }
-function escapeHtml(value) {
+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) {
@@ -351,7 +582,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>");
   }
@@ -395,7 +626,7 @@ async function writePositionedPage(page, write, options) {
   const displayWidth = quarterTurn ? page.height : page.width;
   const displayHeight = quarterTurn ? page.width : page.height;
   await write(
-    `<section class="pdf-page pdf-page--visual pdf-page--positioned" data-page="${page.number}" data-rotate="${page.rotate}" style="width:${number(displayWidth)}pt;height:${number(displayHeight)}pt">`
+    `<section class="pdf-page pdf-page--visual pdf-page--positioned" data-page="${page.number}" data-rotate="${page.rotate}" style="width:${number2(displayWidth)}pt;height:${number2(displayHeight)}pt">`
   );
   const fontAliases = new Map(
     (page.fonts ?? []).filter((font) => font.format === "truetype" && !/(?:courier|^TTE)/i.test(font.family ?? "")).map((font) => [font.id, `boxpdf-${page.number}-${font.id}`])
@@ -407,10 +638,10 @@ async function writePositionedPage(page, write, options) {
     await write(`<style>${page.fonts.map((font) => fontFace(font, fontAliases)).join("")}</style>`);
   }
   await write(
-    `<div class="pdf-page-content pdf-page-content--${page.rotate}" style="width:${number(page.width)}pt;height:${number(page.height)}pt${rotationTransform(page)}">`
+    `<div class="pdf-page-content pdf-page-content--${page.rotate}" style="width:${number2(page.width)}pt;height:${number2(page.height)}pt${rotationTransform(page)}">`
   );
   await write(
-    `<svg class="pdf-visual-text" xmlns="http://www.w3.org/2000/svg" width="${number(page.width)}pt" height="${number(page.height)}pt" viewBox="0 0 ${number(page.width)} ${number(page.height)}">`
+    `<svg class="pdf-visual-text" xmlns="http://www.w3.org/2000/svg" width="${number2(page.width)}pt" height="${number2(page.height)}pt" viewBox="0 0 ${number2(page.width)} ${number2(page.height)}">`
   );
   const clipDefinitions = imageClipDefinitions(page.images ?? [], page.number, page.height) + pathClipDefinitions(page.paths ?? [], page.number);
   if (clipDefinitions) await write(`<defs>${clipDefinitions}</defs>`);
@@ -420,24 +651,24 @@ async function writePositionedPage(page, write, options) {
     }
   }
   for (const fill of page.fills ?? []) {
-    const points = fill.points.map(([x, y]) => `${number(x)},${number(page.height - y)}`).join(" ");
+    const points = fill.points.map(([x, y]) => `${number2(x)},${number2(page.height - y)}`).join(" ");
     if (isCssHexColor(fill.color)) {
-      const opacity = isUnitInterval(fill.opacity) ? ` fill-opacity="${number(fill.opacity)}"` : "";
+      const opacity = isUnitInterval(fill.opacity) ? ` fill-opacity="${number2(fill.opacity)}"` : "";
       await write(`<polygon points="${points}" fill="${fill.color}"${opacity}/>`);
     }
   }
   if (page.paths?.length) {
-    await write(`<g transform="translate(0 ${number(page.height)}) scale(1 -1)">`);
+    await write(`<g transform="translate(0 ${number2(page.height)}) scale(1 -1)">`);
     for (const [pathIndex, path] of page.paths.entries()) {
       if (!isSvgPath(path.d)) continue;
       const fill = isCssHexColor(path.fill) ? path.fill : "none";
       const stroke = isCssHexColor(path.stroke) ? path.stroke : "none";
-      const strokeWidth = path.strokeWidth !== void 0 && Number.isFinite(path.strokeWidth) && path.strokeWidth >= 0 ? ` stroke-width="${number(path.strokeWidth)}"` : "";
+      const strokeWidth = path.strokeWidth !== void 0 && Number.isFinite(path.strokeWidth) && path.strokeWidth >= 0 ? ` stroke-width="${number2(path.strokeWidth)}"` : "";
       const fillRule = path.fillRule ? ` fill-rule="${path.fillRule}"` : "";
-      const fillOpacity = isUnitInterval(path.fillOpacity) ? ` fill-opacity="${number(path.fillOpacity)}"` : "";
-      const strokeOpacity = isUnitInterval(path.strokeOpacity) ? ` stroke-opacity="${number(path.strokeOpacity)}"` : "";
-      const dasharray = path.strokeDasharray?.every((value) => Number.isFinite(value) && value >= 0) ? ` stroke-dasharray="${path.strokeDasharray.map(number).join(" ")}"` : "";
-      const dashoffset = Number.isFinite(path.strokeDashoffset) ? ` stroke-dashoffset="${number(path.strokeDashoffset ?? 0)}"` : "";
+      const fillOpacity = isUnitInterval(path.fillOpacity) ? ` fill-opacity="${number2(path.fillOpacity)}"` : "";
+      const strokeOpacity = isUnitInterval(path.strokeOpacity) ? ` stroke-opacity="${number2(path.strokeOpacity)}"` : "";
+      const dasharray = path.strokeDasharray?.every((value) => Number.isFinite(value) && value >= 0) ? ` stroke-dasharray="${path.strokeDasharray.map(number2).join(" ")}"` : "";
+      const dashoffset = Number.isFinite(path.strokeDashoffset) ? ` stroke-dashoffset="${number2(path.strokeDashoffset ?? 0)}"` : "";
       const linecap = path.strokeLinecap ? ` stroke-linecap="${path.strokeLinecap}"` : "";
       const linejoin = path.strokeLinejoin ? ` stroke-linejoin="${path.strokeLinejoin}"` : "";
       let output = `<path d="${path.d}" fill="${fill}" stroke="${stroke}"${strokeWidth}${fillOpacity}${strokeOpacity}${dasharray}${dashoffset}${linecap}${linejoin}${fillRule}/>`;
@@ -474,11 +705,11 @@ function usesReflectedVisualOverlay(page, spans) {
 }
 function visualImage(image, pageHeight, pageNumber, imageIndex) {
   const [a, b, c, d, e, f] = image.transform;
-  const transform = [a, -b, -c, d, c + e, pageHeight - d - f].map(number).join(" ");
-  const opacity = isUnitInterval(image.opacity) ? ` opacity="${number(image.opacity)}"` : "";
+  const transform = [a, -b, -c, d, c + e, pageHeight - d - f].map(number2).join(" ");
+  const opacity = isUnitInterval(image.opacity) ? ` opacity="${number2(image.opacity)}"` : "";
   const mime = image.format === "jpeg" ? "image/jpeg" : "image/bmp";
-  const data = image.format === "jpeg" ? image.data : rgbBmp(image);
-  let output = `<image width="1" height="1" preserveAspectRatio="none" transform="matrix(${transform})" href="data:${mime};base64,${base64(data)}"${opacity}/>`;
+  const data = image.format === "jpeg" ? image.data : rgbBmp2(image);
+  let output = `<image width="1" height="1" preserveAspectRatio="none" transform="matrix(${transform})" href="data:${mime};base64,${base642(data)}"${opacity}/>`;
   for (let index = (image.clips?.length ?? 0) - 1; index >= 0; index -= 1) {
     output = `<g clip-path="url(#${imageClipId(pageNumber, imageIndex, index)})">${output}</g>`;
   }
@@ -489,7 +720,7 @@ function imageClipDefinitions(images, pageNumber, pageHeight) {
     (image, imageIndex) => (image.clips ?? []).map((clip, clipIndex) => {
       if (!isSvgPath(clip.d)) return "";
       const fillRule = clip.fillRule ? ` clip-rule="${clip.fillRule}"` : "";
-      return `<clipPath id="${imageClipId(pageNumber, imageIndex, clipIndex)}" clipPathUnits="userSpaceOnUse"><path d="${clip.d}" transform="translate(0 ${number(pageHeight)}) scale(1 -1)"${fillRule}/></clipPath>`;
+      return `<clipPath id="${imageClipId(pageNumber, imageIndex, clipIndex)}" clipPathUnits="userSpaceOnUse"><path d="${clip.d}" transform="translate(0 ${number2(pageHeight)}) scale(1 -1)"${fillRule}/></clipPath>`;
     })
   ).join("");
 }
@@ -508,7 +739,7 @@ function pathClipDefinitions(paths, pageNumber) {
 function pathClipId(pageNumber, pathIndex, clipIndex) {
   return `boxpdf-path-clip-${pageNumber}-${pathIndex}-${clipIndex}`;
 }
-function rgbBmp(image) {
+function rgbBmp2(image) {
   const stride = Math.ceil(image.width * 3 / 4) * 4;
   const output = new Uint8Array(54 + stride * image.height);
   const view = new DataView(output.buffer);
@@ -536,11 +767,11 @@ function rgbBmp(image) {
 function rotationTransform(page) {
   switch (page.rotate) {
     case 90:
-      return `;transform:translate(${number(page.height)}pt,0) rotate(90deg)`;
+      return `;transform:translate(${number2(page.height)}pt,0) rotate(90deg)`;
     case 180:
-      return `;transform:translate(${number(page.width)}pt,${number(page.height)}pt) rotate(180deg)`;
+      return `;transform:translate(${number2(page.width)}pt,${number2(page.height)}pt) rotate(180deg)`;
     case 270:
-      return `;transform:translate(0,${number(page.width)}pt) rotate(270deg)`;
+      return `;transform:translate(0,${number2(page.width)}pt) rotate(270deg)`;
     default:
       return "";
   }
@@ -548,70 +779,90 @@ function rotationTransform(page) {
 function positionedSpan(span, fontAliases) {
   const direction = directionAttribute([span]);
   const style = [
-    `left:${number(span.bounds.x)}pt`,
-    `bottom:${number(span.bounds.y)}pt`,
-    `width:${number(span.bounds.width)}pt`,
-    `height:${number(span.bounds.height)}pt`,
-    `font-size:${number(span.fontSize)}pt`,
+    `left:${number2(span.bounds.x)}pt`,
+    `bottom:${number2(span.bounds.y)}pt`,
+    `width:${number2(span.bounds.width)}pt`,
+    `height:${number2(span.bounds.height)}pt`,
+    `font-size:${number2(span.fontSize)}pt`,
     ...isCssHexColor(span.color) ? [`color:${span.color}`] : [],
-    ...isUnitInterval(span.fillOpacity) ? [`opacity:${number(span.fillOpacity)}`] : [],
+    ...isUnitInterval(span.fillOpacity) ? [`opacity:${number2(span.fillOpacity)}`] : [],
     ...fontStyles(
       span.fontFamily,
       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 = (0, import_structure2.structurePage)(page);
+  const defaultColor = dominantTextColor(structured.lines);
+  const media = semanticMedia(page);
+  let mediaIndex = 0;
   await write(
     `<section class="pdf-page pdf-page--semantic pdf-page--flow" data-page="${page.number}">`
   );
   for (const block of structured.blocks) {
+    const blockY = semanticBlockY2(block);
+    while ((media[mediaIndex]?.bounds.y ?? -Infinity) >= blockY) {
+      await write(`<div class="pdf-semantic-visual">${media[mediaIndex]?.html}</div>`);
+      mediaIndex += 1;
+    }
     if (block.type === "table") await write((0, import_structure2.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>${escapeHtml2(block.role)}</h3><p>${escapeHtml2(block.organization)}</p><p>${escapeHtml2(block.date)}</p></section>`
+        `<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}>`);
     }
   }
+  while (mediaIndex < media.length) {
+    await write(`<div class="pdf-semantic-visual">${media[mediaIndex]?.html}</div>`);
+    mediaIndex += 1;
+  }
   await write("</section>");
 }
+function semanticBlockY2(block) {
+  const lines = block.type === "list" ? block.items.flatMap((item) => item.lines) : block.lines;
+  return Math.max(...lines.map((line) => line.bounds.y + line.bounds.height));
+}
 function visualText(span, pageHeight, fontAliases, counterRotateReflectedText = false) {
   if (span.renderingMode === 3 || span.renderingMode === 7) return "";
   if (!span.fontAssetId && isAdobeCjkFont(span.fontFamily)) return "";
@@ -621,10 +872,10 @@ function visualText(span, pageHeight, fontAliases, counterRotateReflectedText =
     span.fontAssetId ? fontAliases.get(span.fontAssetId) : void 0
   ).join(";");
   const stroke = isCssHexColor(span.strokeColor) ? `stroke:${span.strokeColor}` : "";
-  const strokeWidth = stroke && Number.isFinite(span.strokeWidth) && (span.strokeWidth ?? -1) >= 0 ? `stroke-width:${number(span.strokeWidth ?? 0)}` : "";
+  const strokeWidth = stroke && Number.isFinite(span.strokeWidth) && (span.strokeWidth ?? -1) >= 0 ? `stroke-width:${number2(span.strokeWidth ?? 0)}` : "";
   const strokeOnly = span.renderingMode === 1 || span.renderingMode === 5;
-  const fillOpacity = isUnitInterval(span.fillOpacity) ? `fill-opacity:${number(span.fillOpacity)}` : "";
-  const strokeOpacity = isUnitInterval(span.strokeOpacity) ? `stroke-opacity:${number(span.strokeOpacity)}` : "";
+  const fillOpacity = isUnitInterval(span.fillOpacity) ? `fill-opacity:${number2(span.fillOpacity)}` : "";
+  const strokeOpacity = isUnitInterval(span.strokeOpacity) ? `stroke-opacity:${number2(span.strokeOpacity)}` : "";
   const style = [
     isHebrewPaintOrder(span) ? "unicode-bidi:bidi-override;direction:ltr" : "",
     span.direction === "ttb" ? "writing-mode:vertical-rl" : "",
@@ -636,7 +887,7 @@ function visualText(span, pageHeight, fontAliases, counterRotateReflectedText =
     font
   ].filter(Boolean).join(";");
   const textExtent = span.direction === "ttb" ? span.bounds.height : span.bounds.width;
-  const textLength = textExtent > 0 && !isHebrewPaintOrder(span) ? ` textLength="${number(textExtent)}" lengthAdjust="${span.direction === "ttb" || usesSpacingAdjustment(span) ? "spacing" : "spacingAndGlyphs"}"` : "";
+  const textLength = textExtent > 0 && !isHebrewPaintOrder(span) ? ` textLength="${number2(textExtent)}" lengthAdjust="${span.direction === "ttb" || usesSpacingAdjustment(span) ? "spacing" : "spacingAndGlyphs"}"` : "";
   const transform = counterRotateReflectedText && span.transform ? [
     span.transform[0],
     span.transform[1],
@@ -649,8 +900,8 @@ function visualText(span, pageHeight, fontAliases, counterRotateReflectedText =
   const basisY = transform?.[1] ?? 0;
   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>`;
+  const position = transformed ? ` x="0" y="0" transform="matrix(${transform?.map(number2).join(" ")} ${number2(anchorX)} ${number2(anchorY)})"` : ` x="${number2(anchorX)}" y="${number2(anchorY)}"`;
+  return `<text${direction}${position} font-size="${number2(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 ?? "");
@@ -662,16 +913,16 @@ function visualType3Text(span, font, pageHeight) {
   const totalAdvance = sequence.reduce((total, glyph) => total + (glyph?.advance ?? 0), 0);
   if (totalAdvance <= 0 || span.bounds.width <= 0 || span.fontSize <= 0) return "";
   const transform = span.transform ?? [1, 0, 0, 1];
-  const outer = `matrix(${transform.map(number).join(" ")} ${number(span.bounds.x)} ${number(pageHeight - span.bounds.y)})`;
+  const outer = `matrix(${transform.map(number2).join(" ")} ${number2(span.bounds.x)} ${number2(pageHeight - span.bounds.y)})`;
   const xScale = span.bounds.width / totalAdvance;
   let offset = 0;
   let content = "";
   for (const glyph of sequence) {
     if (!glyph) continue;
-    content += `<g transform="translate(${number(offset)} 0)">${type3Glyph(glyph)}</g>`;
+    content += `<g transform="translate(${number2(offset)} 0)">${type3Glyph(glyph)}</g>`;
     offset += glyph.advance;
   }
-  return `<g transform="${outer}"><g transform="scale(${number(xScale)} ${number(-span.fontSize)})">${content}</g></g>`;
+  return `<g transform="${outer}"><g transform="scale(${number2(xScale)} ${number2(-span.fontSize)})">${content}</g></g>`;
 }
 function isHebrewPaintOrder(span) {
   return span.direction === "ltr" && /[\u0590-\u05ff]/u.test(span.text);
@@ -683,15 +934,15 @@ function type3Glyph(glyph) {
   let output = "";
   for (const fill of glyph.fills ?? []) {
     if (!isCssHexColor(fill.color)) continue;
-    const points = fill.points.map(([x, y]) => `${number(x)},${number(y)}`).join(" ");
-    const opacity = isUnitInterval(fill.opacity) ? ` fill-opacity="${number(fill.opacity)}"` : "";
+    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}/>`;
   }
   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 width = path.strokeWidth !== void 0 && Number.isFinite(path.strokeWidth) && path.strokeWidth >= 0 ? ` stroke-width="${number(path.strokeWidth)}"` : "";
+    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}/>`;
   }
   return (glyph.fills?.length ?? 0) > 64 && glyph.advance > 2 ? `<g shape-rendering="crispEdges">${output}</g>` : output;
@@ -741,9 +992,9 @@ function fontFace(font, aliases) {
   const styles2 = fontStyles(font.family, alias).filter(
     (style) => !style.startsWith("font-family:")
   );
-  return `@font-face{font-family:${alias};src:url(data:font/ttf;base64,${base64(font.data)}) format("truetype");${styles2.join(";")}}`;
+  return `@font-face{font-family:${alias};src:url(data:font/ttf;base64,${base642(font.data)}) format("truetype");${styles2.join(";")}}`;
 }
-function base64(bytes) {
+function base642(bytes) {
   const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
   let output = "";
   for (let index = 0; index < bytes.length; index += 3) {
@@ -763,13 +1014,13 @@ function directionAttribute(spans) {
   if (vertical > rtl && vertical * 2 >= spans.length) return ' data-direction="ttb"';
   return rtl * 2 >= spans.length && spans.length > 0 ? ' dir="rtl"' : "";
 }
-function number(value) {
+function number2(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";