@ai-matrx/print 0.4.0 → 0.5.0

package/dist/flashcards.js

@@ -1,4 +1,5 @@
 // src/core.ts
+import { escapeHtml } from "@ai-matrx/kit/html-escape";
 var PRINT_STYLES = `
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
@@ -69,9 +70,6 @@ var PRINT_STYLES = `
     th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
   }
 `;
-function escapeHtml(str) {
-  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-}
 function buildPrintDocument(bodyHtml, title = "AI Response", extraStyles = "") {
   return `<!DOCTYPE html>
 <html lang="en">
@@ -152,6 +150,7 @@ function buildFitTextScript(selectors) {
 }
 
 // src/flashcards.ts
+import { escapeHtml as escapeHtml2 } from "@ai-matrx/kit/html-escape";
 var SETTING_DEFAULTS = {
   showSideLabel: false,
   showCardNumber: false,
@@ -187,7 +186,7 @@ function faceImageHtml(card, face, showImages = true) {
   const url = face === "front" ? card.frontImageUrl : card.backImageUrl;
   if (!url || !/^https?:\/\//.test(url)) return "";
   const alt = (face === "front" ? card.frontImageAlt : card.backImageAlt) ?? "";
-  return `<img class="face-image" src="${escapeHtml(url)}" alt="${escapeHtml(alt)}">`;
+  return `<img class="face-image" src="${escapeHtml2(url)}" alt="${escapeHtml2(alt)}">`;
 }
 var BASE_STYLES = `
   img.face-image {
@@ -358,13 +357,13 @@ function renderCutCards(cards, title, s, startIndex = 0) {
       const globalIdx = startIndex + p * PAGE_SIZE + i + 1;
       const frontSize = sizeClass(card.front);
       const backSize = sizeClass(card.back ?? "");
-      const backContent = (card.back ?? "").split("\n").map((line) => escapeHtml(line)).join("<br>");
+      const backContent = (card.back ?? "").split("\n").map((line) => escapeHtml2(line)).join("<br>");
       return `<div class="card-cell">
   <span class="card-number-badge">#${globalIdx}</span>
   <div class="card-inner">
     <div class="card-face card-front-face">
       <div class="card-side-label">Question / Term</div>
-      ${faceImageHtml(card, "front", s.showImages)}<div class="front-text ${frontSize}">${escapeHtml(card.front)}</div>
+      ${faceImageHtml(card, "front", s.showImages)}<div class="front-text ${frontSize}">${escapeHtml2(card.front)}</div>
     </div>
     <div class="card-face card-back-face">
       <div class="card-side-label">Answer / Definition</div>
@@ -377,7 +376,7 @@ function renderCutCards(cards, title, s, startIndex = 0) {
     const pageClass = isFirst ? "" : ' class="page-break"';
     pages.push(`<div${pageClass}>
 ${isFirst ? `<div class="deck-header">
-  <h1 class="deck-title">${escapeHtml(title)}</h1>
+  <h1 class="deck-title">${escapeHtml2(title)}</h1>
   <div class="deck-meta">${cards.length} card${cards.length !== 1 ? "s" : ""} &nbsp;\xB7&nbsp; Cut along dashed lines</div>
 </div>
 <div class="instructions">
@@ -438,13 +437,13 @@ function renderBothSides(cards, title, s, startIndex = 0) {
     (card, i) => `<div class="card-cell">
   <div class="card-front">
     <div class="card-number">Card ${startIndex + i + 1}</div>
-    ${faceImageHtml(card, "front", s.showImages)}${escapeHtml(card.front)}
+    ${faceImageHtml(card, "front", s.showImages)}${escapeHtml2(card.front)}
   </div>
-  <div class="card-back">${faceImageHtml(card, "back", s.showImages)}${escapeHtml(card.back ?? "")}</div>
+  <div class="card-back">${faceImageHtml(card, "back", s.showImages)}${escapeHtml2(card.back ?? "")}</div>
 </div>`
   ).join("\n");
   return `<div class="deck-header">
-  <h1 class="deck-title">${escapeHtml(title)}</h1>
+  <h1 class="deck-title">${escapeHtml2(title)}</h1>
   <div class="deck-meta">${cards.length} card${cards.length !== 1 ? "s" : ""} &nbsp;\xB7&nbsp; Front and back</div>
 </div>
 <div class="cards-grid">
@@ -504,12 +503,12 @@ var STUDY_SHEET_STYLES = `
 function renderStudySheet(cards, title, s, startIndex = 0) {
   const rows = cards.map(
     (card, i) => `  <tr>
-    <td><span class="row-num">${startIndex + i + 1}.</span>${faceImageHtml(card, "front", s.showImages)}${escapeHtml(card.front)}</td>
-    <td>${faceImageHtml(card, "back", s.showImages)}${escapeHtml(card.back ?? "")}</td>
+    <td><span class="row-num">${startIndex + i + 1}.</span>${faceImageHtml(card, "front", s.showImages)}${escapeHtml2(card.front)}</td>
+    <td>${faceImageHtml(card, "back", s.showImages)}${escapeHtml2(card.back ?? "")}</td>
   </tr>`
   ).join("\n");
   return `<div class="deck-header">
-  <h1 class="deck-title">${escapeHtml(title)}</h1>
+  <h1 class="deck-title">${escapeHtml2(title)}</h1>
   <div class="deck-meta">${cards.length} card${cards.length !== 1 ? "s" : ""} &nbsp;\xB7&nbsp; Study sheet</div>
 </div>
 <table>
@@ -574,13 +573,13 @@ function renderFrontOnly(cards, title, s, startIndex = 0) {
     (card, i) => `<div class="card-cell">
   <div class="card-front">
     <div class="card-number">Card ${startIndex + i + 1}</div>
-    ${faceImageHtml(card, "front", s.showImages)}${escapeHtml(card.front)}
+    ${faceImageHtml(card, "front", s.showImages)}${escapeHtml2(card.front)}
   </div>
   <div class="answer-blank"></div>
 </div>`
   ).join("\n");
   return `<div class="deck-header">
-  <h1 class="deck-title">${escapeHtml(title)}</h1>
+  <h1 class="deck-title">${escapeHtml2(title)}</h1>
   <div class="deck-meta">${cards.length} card${cards.length !== 1 ? "s" : ""} &nbsp;\xB7&nbsp; Self-test \u2014 write your answers in the blank space</div>
 </div>
 <div class="cards-grid">
@@ -628,11 +627,11 @@ function renderBackOnly(cards, title, s, startIndex = 0) {
   const cells = cards.map(
     (card, i) => `<div class="card-cell">
   <div class="card-back-header">Card ${startIndex + i + 1}</div>
-  <div class="card-back-content">${faceImageHtml(card, "back", s.showImages)}${escapeHtml(card.back ?? "")}</div>
+  <div class="card-back-content">${faceImageHtml(card, "back", s.showImages)}${escapeHtml2(card.back ?? "")}</div>
 </div>`
   ).join("\n");
   return `<div class="deck-header">
-  <h1 class="deck-title">${escapeHtml(title)}</h1>
+  <h1 class="deck-title">${escapeHtml2(title)}</h1>
   <div class="deck-meta">${cards.length} card${cards.length !== 1 ? "s" : ""} &nbsp;\xB7&nbsp; Answers and definitions only</div>
 </div>
 <div class="cards-grid">
@@ -848,14 +847,14 @@ function renderCardText(text, isFront, extraStyle = "") {
   if (isFront) {
     const styleAttr2 = extraStyle ? ` style="${extraStyle}"` : "";
     return {
-      html: `<div class="card-text-inner"${styleAttr2}>${escapeHtml(text).replace(/\n/g, "<br>")}</div>`,
+      html: `<div class="card-text-inner"${styleAttr2}>${escapeHtml2(text).replace(/\n/g, "<br>")}</div>`,
       isList: false
     };
   }
   const bullet = isBulletContent(text);
   if (bullet) {
     const lines = text.split("\n");
-    const items = lines.map((l) => l.trim()).filter((l) => l.length > 0).map((l) => l.replace(/^[-•*]\s*/, "")).map((l) => `<li>${escapeHtml(l)}</li>`).join("");
+    const items = lines.map((l) => l.trim()).filter((l) => l.length > 0).map((l) => l.replace(/^[-•*]\s*/, "")).map((l) => `<li>${escapeHtml2(l)}</li>`).join("");
     const styleAttr2 = extraStyle ? ` style="${extraStyle}"` : "";
     return {
       html: `<ul class="card-text-inner card-list"${styleAttr2}>${items}</ul>`,
@@ -866,7 +865,7 @@ function renderCardText(text, isFront, extraStyle = "") {
   const cls = ml ? "card-text-inner multiline" : "card-text-inner";
   const styleAttr = extraStyle ? ` style="${extraStyle}"` : "";
   return {
-    html: `<div class="${cls}"${styleAttr}>${escapeHtml(text).replace(/\n/g, "<br>")}</div>`,
+    html: `<div class="${cls}"${styleAttr}>${escapeHtml2(text).replace(/\n/g, "<br>")}</div>`,
     isList: false
   };
 }
@@ -935,7 +934,7 @@ function openLandscapeWindow(bodyHtml, title) {
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>${escapeHtml(title)}</title>
+  <title>${escapeHtml2(title)}</title>
   <style>${LANDSCAPE_STYLES}</style>
 </head>
 <body>
@@ -1079,10 +1078,10 @@ function buildAveryCard(text, cardNum, isFront, s) {
   const styleAttr = innerStyle ? ` style="${innerStyle}"` : "";
   let innerHtml;
   if (isBullet) {
-    const items = text.split("\n").map((l) => l.trim()).filter((l) => l.length > 0).map((l) => l.replace(/^[-•*]\s*/, "")).map((l) => `<li>${escapeHtml(l)}</li>`).join("");
+    const items = text.split("\n").map((l) => l.trim()).filter((l) => l.length > 0).map((l) => l.replace(/^[-•*]\s*/, "")).map((l) => `<li>${escapeHtml2(l)}</li>`).join("");
     innerHtml = `<ul class="${cls}"${styleAttr}>${items}</ul>`;
   } else {
-    const escaped = escapeHtml(text).replace(/\n/g, "<br>");
+    const escaped = escapeHtml2(text).replace(/\n/g, "<br>");
     innerHtml = `<div class="${cls}"${styleAttr}>${escaped}</div>`;
   }
   const wrapExtra = isBullet ? ' style="align-items:flex-start;"' : "";
@@ -1117,7 +1116,7 @@ function openAveryWindow(bodyHtml, title) {
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>${escapeHtml(title)} \u2014 Avery 5388</title>
+  <title>${escapeHtml2(title)} \u2014 Avery 5388</title>
   <style>${AVERY_5388_STYLES}</style>
 </head>
 <body>
@@ -1355,7 +1354,7 @@ function openPortrait6UpWindow(bodyHtml, title) {
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>${escapeHtml(title)} \u2014 6 per page</title>
+  <title>${escapeHtml2(title)} \u2014 6 per page</title>
   <style>${PORTRAIT_6UP_STYLES}</style>
 </head>
 <body>