@useinsider/guido 3.4.0-beta.5d19726 → 3.4.1-beta.00eb92e

package/dist/config/migrator/radioButtonMigrator.js

@@ -1,109 +1,54 @@
-var x = Object.defineProperty;
-var T = (l, e, t) => e in l ? x(l, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[e] = t;
-var b = (l, e, t) => T(l, typeof e != "symbol" ? e + "" : e, t);
-import S from "../../extensions/Blocks/RadioButton/template.js";
-class B {
+var q = Object.defineProperty;
+var C = (o, t, e) => t in o ? q(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var g = (o, t, e) => C(o, typeof t != "symbol" ? t + "" : t, e);
+import N from "../../extensions/Blocks/RadioButton/template.js";
+import { extractTextFromElement as b, buildTextBlock as f } from "./textBlockMigration.js";
+class R {
   constructor() {
-    b(this, "parser");
+    g(this, "parser");
     this.parser = new DOMParser();
   }
-  migrate(e) {
+  migrate(t) {
     try {
-      const t = this.parser.parseFromString(e, "text/html"), s = t.querySelectorAll("td.radio-button-block"), i = t.querySelectorAll("td.radio-button-v2");
-      if (s.length === 0 && i.length === 0)
-        return e;
-      let o = !1;
-      return s.forEach((r) => {
+      const e = this.parser.parseFromString(t, "text/html"), n = e.querySelectorAll("td.radio-button-block"), a = e.querySelectorAll("td.radio-button-v2");
+      if (n.length === 0 && a.length === 0)
+        return t;
+      let i = !1;
+      return n.forEach((r) => {
         if (r.classList.contains("radio-button-v2"))
           return;
-        const n = r.getAttribute("id"), a = this.extractTextFromElement(r, "ins-title"), g = this.extractTextFromElement(r, "ins-description"), c = this.extractTextFromElement(r, "ins-subscribe"), u = this.extractTextFromElement(r, "ins-unsubscribe"), p = this.buildTextBlock(a), d = this.buildTextBlock(g), y = this.buildTextBlock({ ...c, classList: "" }), f = this.buildTextBlock({ ...u, classList: "" }), h = S.replace("{-{-TITLE-}-}", p).replace("{-{-DESCRIPTION-}-}", d).replace("{-{-YES-}-}", y).replace("{-{-NO-}-}", f), m = this.parser.parseFromString(
-          `<table id="tempDoc"><tbody><tr>${h}</tr></tbody></table>`,
+        const s = r.getAttribute("id"), c = b(r, "ins-title"), d = b(r, "ins-description"), u = b(r, "ins-subscribe"), l = b(r, "ins-unsubscribe"), p = f(c, c.containerClass), m = f(d, d.containerClass), h = f(u), S = f(l), T = N.replace("{-{-TITLE-}-}", p).replace("{-{-DESCRIPTION-}-}", m).replace("{-{-YES-}-}", h).replace("{-{-NO-}-}", S), y = this.parser.parseFromString(
+          `<table id="tempDoc"><tbody><tr>${T}</tr></tbody></table>`,
           "text/html"
         ).querySelector(".radio-button-v2");
-        m && r.parentNode && (m.setAttribute("id", n || ""), r.parentNode.replaceChild(m, r), o = !0);
-      }), o = this.healRadioButtonV2(t) || o, o ? t.documentElement.outerHTML : e;
-    } catch (t) {
-      return console.error("RadioButtonMigrator failed:", t), e;
+        y && r.parentNode && (y.setAttribute("id", s || ""), r.parentNode.replaceChild(y, r), i = !0);
+      }), i = this.healRadioButtonV2(e) || i, i ? e.documentElement.outerHTML : t;
+    } catch (e) {
+      return console.error("RadioButtonMigrator failed:", e), t;
     }
   }
-  healRadioButtonV2(e) {
-    let t = !1;
-    return e.querySelectorAll("td.radio-button-v2").forEach((s) => {
-      var d;
-      s.classList.contains("radio-button-block") || (s.classList.add("radio-button-block"), t = !0);
-      const i = s.querySelector("input#radioYes"), o = s.querySelector("input#radioNo");
-      if (!i || !o)
+  healRadioButtonV2(t) {
+    let e = !1;
+    return t.querySelectorAll("td.radio-button-v2").forEach((n) => {
+      var m;
+      n.classList.contains("radio-button-block") || (n.classList.add("radio-button-block"), e = !0);
+      const a = n.querySelector("input#radioYes"), i = n.querySelector("input#radioNo");
+      if (!a || !i)
         return;
-      const r = ((d = i.parentElement) == null ? void 0 : d.querySelector(":scope > p")) || null;
-      if (!r && !i.hasAttribute("align"))
+      const r = ((m = a.parentElement) == null ? void 0 : m.querySelector(":scope > p")) || null;
+      if (!r && !a.hasAttribute("align"))
         return;
-      const n = i.closest("tr"), a = o.closest("tr");
-      if (!n || !a || n === a || !n.parentNode)
+      const s = a.closest("tr"), c = i.closest("tr");
+      if (!s || !c || s === c || !s.parentNode)
         return;
-      const g = (r == null ? void 0 : r.innerHTML.trim()) || "Yes", c = a.cloneNode(!0), u = c.querySelector("input#radioNo"), p = c.querySelector("p");
-      u && (u.setAttribute("id", "radioYes"), u.removeAttribute("align")), p && (p.innerHTML = g), n.parentNode.replaceChild(c, n), t = !0;
-    }), t;
-  }
-  extractTextFromElement(e, t) {
-    var d, y;
-    const s = e.querySelector(`.${t}`);
-    if (!s)
-      return {
-        text: t === "ins-title" ? "Title" : "Description",
-        isBold: !1,
-        isItalic: !1,
-        align: "left",
-        styles: "",
-        classList: ""
-      };
-    const i = s.querySelector("p");
-    if (!i)
-      return {
-        text: ((d = s.textContent) == null ? void 0 : d.trim()) || (t === "ins-title" ? "Title" : "Description"),
-        isBold: !1,
-        isItalic: !1,
-        align: s.getAttribute("align") || "left",
-        styles: "",
-        classList: ""
-      };
-    const o = ((y = i.textContent) == null ? void 0 : y.trim()) || (t === "ins-title" ? "Title" : "Description"), r = i.getAttribute("style") || "", n = s.getAttribute("align") || i.getAttribute("align") || "left", a = /font-weight\s*:\s*bold/i.test(r) || !!i.querySelector("b, strong"), g = /font-style\s*:\s*italic/i.test(r) || !!i.querySelector("i, em"), c = this.removeStyleProperties(r, ["font-weight", "font-style"]), u = this.convertInlineToBlock(c), p = s.getAttribute("class") || "";
-    return {
-      text: o,
-      isBold: a,
-      isItalic: g,
-      align: n,
-      styles: u,
-      classList: p
-    };
-  }
-  buildTextBlock(e) {
-    let t = e.text;
-    e.isBold && e.isItalic ? t = `<strong path="1,0"><em path="1,0,0">${t}</em></strong>` : e.isBold ? t = `<strong path="1,0">${t}</strong>` : e.isItalic && (t = `<em path="1,0">${t}</em>`);
-    const s = e.align ? ` align="${e.align}"` : "", i = e.styles ? ` style="${e.styles.replaceAll('"', "'")}"` : "";
-    return `
-            <td class="esd-block-text ${e.classList}" ${s}>
-                <p path="1" ${i}>
-                    ${t}
-                </p>
-            </td>
-        `;
-  }
-  removeStyleProperties(e, t) {
-    return e ? t.reduce((i, o) => {
-      const r = new RegExp(`${o}\\s*:\\s*[^;]*;?`, "gi");
-      return i.replace(r, "");
-    }, e).replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim() : "";
-  }
-  convertInlineToBlock(e) {
-    if (!e)
-      return "";
-    let t = e.replace(/display\s*:\s*inline/gi, "display: block");
-    return /display\s*:/i.test(t) || (t = t ? `${t}; display: block` : "display: block"), t.replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim();
+      const d = (r == null ? void 0 : r.innerHTML.trim()) || "Yes", u = c.cloneNode(!0), l = u.querySelector("input#radioNo"), p = u.querySelector("p");
+      l && (l.setAttribute("id", "radioYes"), l.removeAttribute("align")), p && (p.innerHTML = d), s.parentNode.replaceChild(u, s), e = !0;
+    }), e;
   }
 }
-function L(l) {
-  return new B().migrate(l);
+function w(o) {
+  return new R().migrate(o);
 }
 export {
-  L as migrateRadioButton
+  w as migrateRadioButton
 };

package/dist/config/migrator/recommendation/htmlBuilder.js

@@ -1,10 +1,10 @@
 import { RecommendationBlockId as g } from "../../../extensions/Blocks/Recommendation/constants/blockIds.js";
-import { CURRENCY_ATTR as R, ATTR_PRODUCT_IMAGE as I, ATTR_PRODUCT_BUTTON as k, ATTR_PRODUCT_NAME as z, ATTR_PRODUCT_PRICE as G, ATTR_PRODUCT_OLD_PRICE as H, ATTR_PRODUCT_OMNIBUS_PRICE as U, ATTR_PRODUCT_OMNIBUS_DISCOUNT as j, ATTR_CUSTOM_PREFIX as E } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
-import { formatPrice as N } from "../../../extensions/Blocks/Recommendation/utils/priceFormatter.js";
+import { CURRENCY_ATTR as R, ATTR_PRODUCT_IMAGE as I, ATTR_PRODUCT_BUTTON as N, CSS_CLASS_RECO_BUTTON as z, ATTR_PRODUCT_NAME as G, ATTR_PRODUCT_PRICE as H, ATTR_PRODUCT_OLD_PRICE as j, ATTR_PRODUCT_OMNIBUS_PRICE as U, ATTR_PRODUCT_OMNIBUS_DISCOUNT as V, ATTR_CUSTOM_PREFIX as E } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
+import { formatPrice as v } from "../../../extensions/Blocks/Recommendation/utils/priceFormatter.js";
 import { escapeHtml as c } from "../../../utils/htmlEscape.js";
 import { appendStyle as $ } from "./themeMapper.js";
-const V = "https://email-static.useinsider.com/stripo/modules/email-recommendation-v3/assets/images/image-placeholder.png", Y = "attribute-cell", F = "Buy", J = "border-width: 1px; background: rgb(217, 234, 211); border-color: rgb(106, 168, 79)", X = "color: rgb(56, 118, 29); background: rgb(217, 234, 211); font-family: arial, 'helvetica neue', helvetica, sans-serif; font-size: 16px; font-weight: normal; line-height: 120%; mso-border-alt: 10px solid rgb(217, 234, 211); mso-padding-alt: 0", et = "ins-recommendation-product-container ins-recommendation-desktop-container";
-function ot(t) {
+const Y = "https://email-static.useinsider.com/stripo/modules/email-recommendation-v3/assets/images/image-placeholder.png", F = "attribute-cell", J = "Buy", X = "border-width: 1px; background: rgb(217, 234, 211); border-color: rgb(106, 168, 79)", K = "color: rgb(56, 118, 29); background: rgb(217, 234, 211); font-family: arial, 'helvetica neue', helvetica, sans-serif; font-size: 16px; font-weight: normal; line-height: 120%; mso-border-alt: 10px solid rgb(217, 234, 211); mso-padding-alt: 0", ot = "ins-recommendation-product-container ins-recommendation-desktop-container";
+function nt(t) {
   return t.replace(/>\s+</g, "><").trim();
 }
 function y(t) {
@@ -19,10 +19,10 @@ function _() {
     textTrimming: !1
   };
 }
-function K(t) {
+function q(t) {
   return t ? { ...t, wrapBold: !0 } : { ..._(), wrapBold: !0 };
 }
-function v(t, o) {
+function k(t, o) {
   let e = c(t);
   return o.wrapBold && o.wrapItalic ? e = `<strong><em>${e}</em></strong>` : o.wrapBold ? e = `<strong>${e}</strong>` : o.wrapItalic && (e = `<em>${e}</em>`), e;
 }
@@ -30,9 +30,9 @@ function b(t) {
   return t ? ` style="${c(t)}"` : "";
 }
 function O(t, o) {
-  return `<td width="${t}%" class="${Y}" ${o}`;
+  return `<td width="${t}%" class="${F}" ${o}`;
 }
-function nt(t, o, e, l) {
+function lt(t, o, e, l) {
   const s = t.width ? ` width="${t.width}"` : "", n = t.height ? ` height="${t.height}"` : "", i = ["display: block", "max-width: 100%", "height: auto"];
   t.width && i.push(`width: ${t.width}px`), t.height && i.push(`height: ${t.height}px`);
   const a = i.join("; "), r = e ? ` style="background-color: ${c(e)}"` : "";
@@ -46,7 +46,7 @@ function nt(t, o, e, l) {
                             class="esd-block-image product-image es-p5"
                             esd-extension-block-id="${g.IMAGE}">
                             <a target="_blank" href="https://example.com/product/${o + 1}">
-                                <img src="${V}" alt="Product Name"
+                                <img src="${Y}" alt="Product Name"
                                     class="adapt-img"${s}${n}
                                     style="${a}">
                             </a>
@@ -57,7 +57,7 @@ function nt(t, o, e, l) {
         </td>
     `;
 }
-function D(t, o, e, l, s, n, i) {
+function L(t, o, e, l, s, n, i) {
   const r = `table-layout: fixed${n ? `; background-color: ${c(n)}` : ""}`, d = b(s.tdStyle), p = y(s.align), u = `esd-block-text ${o}`.trim(), m = $(l, s.pStyle);
   return `
         ${O(i, 'valign="top" style="padding: 0 5px; height: 100%"')}>
@@ -68,7 +68,7 @@ function D(t, o, e, l, s, n, i) {
                         <td${p}
                             class="${u}"
                             esd-extension-block-id="${t}"${d}>
-                            <p contenteditable="false"${b(m)}>${v(e, s)}</p>
+                            <p contenteditable="false"${b(m)}>${k(e, s)}</p>
                         </td>
                     </tr>
                 </tbody>
@@ -76,7 +76,7 @@ function D(t, o, e, l, s, n, i) {
         </td>
     `;
 }
-function lt(t, o, e, l) {
+function st(t, o, e, l) {
   const s = o ? ` style="background-color: ${c(o)}"` : "", n = b(t.tdStyle), i = y(t.align), r = $("font-size: 14px; color: #999999", t.pStyle);
   return `
         ${O(e, 'valign="top" style="padding: 0 5px; height: 100%"')}>
@@ -88,7 +88,7 @@ function lt(t, o, e, l) {
                             class="esd-block-text product-old-price es-p15l es-p15r"
                             esd-extension-block-id="${g.OLD_PRICE}"${n}>
                             <p contenteditable="false"${b(r)}>
-                                <s>${v(l, t)}</s>
+                                <s>${k(l, t)}</s>
                             </p>
                         </td>
                     </tr>
@@ -97,7 +97,7 @@ function lt(t, o, e, l) {
         </td>
     `;
 }
-function L(t, o, e, l, s, n, i) {
+function D(t, o, e, l, s, n, i) {
   const a = s ? `; background-color: ${c(s)}` : "", r = b(l.tdStyle), d = y(l.align), u = $("font-size: 12px; color: #666666", l.pStyle);
   return `
         ${O(i, 'valign="top" style="padding: 0 5px; height: 100%"')}>
@@ -121,8 +121,8 @@ function L(t, o, e, l, s, n, i) {
         </td>
     `;
 }
-function st(t, o, e, l) {
-  const s = e ? ` style="background-color: ${c(e)}"` : "", n = $("padding: 0 5px; height: 100%", o.tdStyle), i = y(o.align), a = o.text || F, r = $(J, o.spanStyle), d = $(X, o.aStyle);
+function it(t, o, e, l) {
+  const s = e ? ` style="background-color: ${c(e)}"` : "", n = $("padding: 0 5px; height: 100%", o.tdStyle), i = y(o.align), a = o.text || J, r = $(X, o.spanStyle), d = $(K, o.aStyle);
   return `
         ${O(l, `valign="top" style="${c(n)}"`)}>
             <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
@@ -134,7 +134,7 @@ function st(t, o, e, l) {
                             esd-extension-block-id="${g.BUTTON}">
                             <span class="es-button-border" style="${c(r)}">
                                 <a href="https://example.com/product/${t + 1}" target="_blank"
-                                    class="es-button buy-button"
+                                    class="es-button ${z}"
                                     style="${c(d)}">${c(a)}</a>
                             </span>
                         </td>
@@ -144,7 +144,7 @@ function st(t, o, e, l) {
         </td>
     `;
 }
-function it(t, o, e, l, s) {
+function ct(t, o, e, l, s) {
   const n = l ? `; background-color: ${c(l)}` : "", i = b(e.tdStyle), a = y(e.align), d = $("font-size: 12px; color: #666666; margin: 0", e.pStyle), p = o.replace(/_/g, " ").replace(/\b\w/g, (u) => u.toUpperCase());
   return `
         ${O(s, 'valign="middle" style="padding: 0 5px; height: 100%"')}>
@@ -163,18 +163,18 @@ function it(t, o, e, l, s) {
         </td>
     `;
 }
-function ct(t, o, e, l, s, n, i) {
+function at(t, o, e, l, s, n, i) {
   const a = o[t], r = a ?? _();
   switch (t) {
     case I:
-      return nt(
+      return lt(
         a ?? {},
         s,
         l,
         n
       );
-    case z:
-      return D(
+    case G:
+      return L(
         g.NAME,
         "product-name es-p10t es-p10b es-p15l es-p15r",
         "Product Name",
@@ -183,20 +183,20 @@ function ct(t, o, e, l, s, n, i) {
         l,
         n
       );
-    case G:
-      return D(
+    case H:
+      return L(
         g.PRICE,
         "product-price es-p15l es-p15r",
         i.pricePlaceholder,
         "font-size: 16px; color: #333333",
-        K(a),
+        q(a),
         l,
         n
       );
-    case H:
-      return lt(r, l, n, i.oldPricePlaceholder);
+    case j:
+      return st(r, l, n, i.oldPricePlaceholder);
     case U:
-      return L(
+      return D(
         g.OMNIBUS_PRICE,
         "omnibus-price-value",
         i.omnibusPricePlaceholder,
@@ -205,8 +205,8 @@ function ct(t, o, e, l, s, n, i) {
         "product-omnibus-price",
         n
       );
-    case j:
-      return L(
+    case V:
+      return D(
         g.OMNIBUS_DISCOUNT,
         "omnibus-discount-value",
         "-10%",
@@ -215,8 +215,8 @@ function ct(t, o, e, l, s, n, i) {
         "product-omnibus-discount",
         n
       );
-    case k:
-      return st(
+    case N:
+      return it(
         s,
         a ?? {},
         l,
@@ -225,25 +225,25 @@ function ct(t, o, e, l, s, n, i) {
     default:
       if (t.startsWith(E)) {
         const d = e[t] ?? t.slice(E.length), p = t.slice(E.length);
-        return it(d, p, r, l, n);
+        return ct(d, p, r, l, n);
       }
       return null;
   }
 }
-const q = `
+const Q = `
     <tr>
         <td class="spacer" style="height: 10px"></td>
     </tr>
 `;
-function at(t) {
+function rt(t) {
   return {
-    pricePlaceholder: N({ price: 18, currency: t }),
-    oldPricePlaceholder: N({ price: 20, currency: t }),
-    omnibusPricePlaceholder: N({ price: 20, currency: t })
+    pricePlaceholder: v({ price: 18, currency: t }),
+    oldPricePlaceholder: v({ price: 20, currency: t }),
+    omnibusPricePlaceholder: v({ price: 20, currency: t })
   };
 }
-function rt(t, o, e, l) {
-  const { composition: s, visibility: n, perElement: i, customAttrValues: a, cardBg: r } = l, d = (100 / e).toFixed(2), p = e - o, u = `<td class="${Y}" style="padding: 0 5px;" width="${d}%"></td>`, m = p > 0 ? u.repeat(p) : "";
+function dt(t, o, e, l) {
+  const { composition: s, visibility: n, perElement: i, customAttrValues: a, cardBg: r } = l, d = (100 / e).toFixed(2), p = e - o, u = `<td class="${F}" style="padding: 0 5px;" width="${d}%"></td>`, m = p > 0 ? u.repeat(p) : "";
   return `
         <tr class="recommendation-product-row">
             <td>
@@ -252,7 +252,7 @@ function rt(t, o, e, l) {
                     <tbody>${s.map((T) => {
     const w = n[T] !== !1, f = w ? "" : ' style="display: none"', C = w ? "1" : "0", S = [];
     for (let x = 0; x < o; x += 1) {
-      const A = ct(
+      const A = at(
         T,
         i,
         a,
@@ -276,44 +276,44 @@ function rt(t, o, e, l) {
         </tr>
     `;
 }
-function dt(t, o, e) {
+function pt(t, o, e) {
   const l = [];
   for (let s = 0; s < t; s += o) {
     const n = Math.min(o, t - s);
-    s > 0 && l.push(q), l.push(rt(s, n, o, e));
+    s > 0 && l.push(Q), l.push(dt(s, n, o, e));
   }
   return l.join("");
 }
-function pt(t, o, e, l) {
+function ut(t, o, e, l) {
   const s = o[t];
-  if (t === z) {
+  if (t === G) {
     const n = s ?? _(), i = $("font-size: 16px; color: #333333; margin: 0", n.pStyle), a = y(n.align ?? "left");
     return `
             <td class="esd-block-text product-name"
                 esd-extension-block-id="${g.NAME}"${a}${b(n.tdStyle)}>
-                <p contenteditable="false"${b(i)}>${v("Product Name", n)}</p>
+                <p contenteditable="false"${b(i)}>${k("Product Name", n)}</p>
             </td>
         `;
   }
-  if (t === G) {
-    const n = K(s), i = $("font-size: 16px; color: #333333; margin: 0", n.pStyle), a = y(n.align ?? "left");
+  if (t === H) {
+    const n = q(s), i = $("font-size: 16px; color: #333333; margin: 0", n.pStyle), a = y(n.align ?? "left");
     return `
             <td class="esd-block-text product-price"
                 esd-extension-block-id="${g.PRICE}"${a}${b(n.tdStyle)}>
-                <p contenteditable="false"${b(i)}>${v(l.pricePlaceholder, n)}</p>
+                <p contenteditable="false"${b(i)}>${k(l.pricePlaceholder, n)}</p>
             </td>
         `;
   }
-  if (t === H) {
+  if (t === j) {
     const n = s ?? _(), a = $("font-size: 14px; color: #999999; text-decoration: line-through; margin: 0", n.pStyle), r = y(n.align ?? "left");
     return `
             <td class="esd-block-text product-old-price"
                 esd-extension-block-id="${g.OLD_PRICE}"${r}${b(n.tdStyle)}>
-                <p contenteditable="false"${b(a)}><s>${v(l.oldPricePlaceholder, n)}</s></p>
+                <p contenteditable="false"${b(a)}><s>${k(l.oldPricePlaceholder, n)}</s></p>
             </td>
         `;
   }
-  if (t === U || t === j) {
+  if (t === U || t === V) {
     const n = t === U, i = n ? g.OMNIBUS_PRICE : g.OMNIBUS_DISCOUNT, a = n ? "omnibus-price-value" : "omnibus-discount-value", r = n ? l.omnibusPricePlaceholder : "-10%", d = n ? "product-omnibus-price" : "product-omnibus-discount", p = s ?? _(), u = $("font-size: 12px; color: #666666; margin: 0", p.pStyle), m = y(p.align ?? "left");
     return `
             <td class="esd-block-text ${d}"
@@ -339,7 +339,7 @@ function pt(t, o, e, l) {
   }
   return null;
 }
-function ut(t, o) {
+function bt(t, o) {
   const { composition: e, visibility: l, perElement: s, customAttrValues: n, cardBg: i } = o, a = i ? `background-color: ${c(i)}` : "", r = a ? `style="table-layout: fixed; ${a}"` : 'style="table-layout: fixed"', d = s[I] ?? {}, p = l[I] !== !1, u = d.width ? ` width="${d.width}"` : "", m = p ? "" : ' style="display: none"', h = `
         <td width="120"
             class="esd-block-image product-image-cell recommendation-attribute-row es-p5"
@@ -348,7 +348,7 @@ function ut(t, o) {
             data-visibility="${p ? "1" : "0"}"
             align="center" valign="middle"${m}>
             <a target="_blank" href="https://example.com/product/${t + 1}">
-                <img src="${V}" alt="Product Name"
+                <img src="${Y}" alt="Product Name"
                     class="adapt-img product-image"${u}
                     style="display: block; max-width: 100%; height: auto">
             </a>
@@ -357,25 +357,25 @@ function ut(t, o) {
         <td class="product-info-cell" valign="middle" style="padding: 15px">
             <table cellpadding="0" cellspacing="0" role="presentation" width="100%"
                 style="table-layout: fixed">
-                <tbody>${e.filter((P) => P !== I && P !== k).map((P) => {
-    const B = l[P] !== !1, W = B ? "" : ' style="display: none"', tt = B ? "1" : "0", M = pt(P, s, n, o);
+                <tbody>${e.filter((P) => P !== I && P !== N).map((P) => {
+    const B = l[P] !== !1, tt = B ? "" : ' style="display: none"', et = B ? "1" : "0", M = ut(P, s, n, o);
     return M ? `<tr class="recommendation-attribute-row"
                 data-attribute-type="${c(P)}"
-                data-visibility="${tt}"${W}>${M}</tr>` : "";
+                data-visibility="${et}"${tt}>${M}</tr>` : "";
   }).filter(Boolean).join(`
 `)}</tbody>
             </table>
         </td>
-    `, f = s[k] ?? {}, C = l[k] !== !1, S = f.text || F, x = $(J, f.spanStyle ?? ""), A = $(X, f.aStyle ?? ""), Q = C ? "" : ' style="display: none"', Z = `
+    `, f = s[N] ?? {}, C = l[N] !== !1, S = f.text || J, x = $(X, f.spanStyle ?? ""), A = $(K, f.aStyle ?? ""), Z = C ? "" : ' style="display: none"', W = `
         <td width="100"
             class="esd-block-button button-cell recommendation-attribute-row product-button es-p5l es-p5r"
             esd-extension-block-id="${g.BUTTON}"
-            data-attribute-type="${k}"
+            data-attribute-type="${N}"
             data-visibility="${C ? "1" : "0"}"
-            align="${c(f.align ?? "center")}" valign="middle"${Q}>
+            align="${c(f.align ?? "center")}" valign="middle"${Z}>
             <span class="es-button-border" style="${c(x)}">
                 <a href="https://example.com/product/${t + 1}" target="_blank"
-                    class="es-button buy-button"
+                    class="es-button ${z}"
                     style="${c(A)}">${c(S)}</a>
             </span>
         </td>
@@ -386,20 +386,20 @@ function ut(t, o) {
                 <table width="100%" cellpadding="0" cellspacing="0" border="0"
                     class="product-card-wrapper" ${r}>
                     <tbody>
-                        <tr>${h}${w}${Z}</tr>
+                        <tr>${h}${w}${W}</tr>
                     </tbody>
                 </table>
             </td>
         </tr>
     `;
 }
-function bt(t, o) {
+function gt(t, o) {
   const e = [];
   for (let l = 0; l < t; l += 1)
-    l > 0 && e.push(q), e.push(ut(l, o));
+    l > 0 && e.push(Q), e.push(bt(l, o));
   return e.join("");
 }
-function gt(t, o) {
+function mt(t, o) {
   var r, d, p, u, m, h;
   const e = t == null ? void 0 : t.theme, l = [];
   (r = e == null ? void 0 : e.textStyle) != null && r["font-family"] && l.push(`font-family: ${e.textStyle["font-family"]}`), l.push(`font-size: ${((d = e == null ? void 0 : e.textStyle) == null ? void 0 : d["font-size"]) ?? "28px"}`), l.push(`color: ${((p = e == null ? void 0 : e.textColor) == null ? void 0 : p.color) ?? "#333333"}`), (u = e == null ? void 0 : e.textStyle) != null && u["font-weight"] && l.push(`font-weight: ${e.textStyle["font-weight"]}`), (m = e == null ? void 0 : e.textStyle) != null && m["font-style"] && l.push(`font-style: ${e.textStyle["font-style"]}`);
@@ -410,11 +410,11 @@ function gt(t, o) {
         </td>
     `;
 }
-function mt(t) {
+function $t(t) {
   const o = t.alignment === "before" ? "0" : "1";
   return ` ${R.CURRENCY}="${c(t.code)}" ${R.SYMBOL}="${c(t.symbol)}" ${R.ALIGNMENT}="${o}" ${R.THOUSAND_SEPARATOR}="${c(t.thousandSeparator)}" ${R.DECIMAL_SEPARATOR}="${c(t.decimalSeparator)}" ${R.DECIMAL_COUNT}="${t.decimalCount}"`;
 }
-function xt(t) {
+function Tt(t) {
   const {
     nodeConfig: o,
     composition: e,
@@ -429,8 +429,8 @@ function xt(t) {
     perElement: e.perElementStyles,
     customAttrValues: e.customAttrValues,
     cardBg: l,
-    ...at(o.currency)
-  }, m = o.layout === "list" ? bt(r, u) : dt(r, o.cardsInRow, u), h = gt(e.titleVariable, s), T = e.composition.join(","), w = JSON.stringify(e.customAttributes), f = [
+    ...rt(o.currency)
+  }, m = o.layout === "list" ? gt(r, u) : pt(r, o.cardsInRow, u), h = mt(e.titleVariable, s), T = e.composition.join(","), w = JSON.stringify(e.customAttributes), f = [
     "recommendation-block-v2",
     "esd-block-recommendation-v3-block",
     `es-p20${p}`,
@@ -443,8 +443,8 @@ function xt(t) {
     "esd-container-frame",
     "ins-recommendation-no-mobile-layout",
     n
-  ].filter(Boolean).join(" "), C = mt(o.currency), S = ` esd-ext-config="${c(JSON.stringify(o))}"`, x = i ? ` id="${c(i)}"` : "", A = a ? ` bgcolor="${c(a)}"` : "";
-  return ot(`
+  ].filter(Boolean).join(" "), C = $t(o.currency), S = ` esd-ext-config="${c(JSON.stringify(o))}"`, x = i ? ` id="${c(i)}"` : "", A = a ? ` bgcolor="${c(a)}"` : "";
+  return nt(`
 <td align="left"
     esd-extension-block-id="recommendation-block"
     width="520"
@@ -477,7 +477,7 @@ function xt(t) {
                             <tr>
                                 <td>
                                     <table width="100%" cellpadding="0" cellspacing="0" border="0"
-                                        class="${et}">${m}
+                                        class="${ot}">${m}
                                     </table>
                                 </td>
                             </tr>
@@ -492,5 +492,5 @@ function xt(t) {
 `);
 }
 export {
-  xt as buildBlockHtml
+  Tt as buildBlockHtml
 };

package/dist/config/migrator/textBlockMigration.js

@@ -0,0 +1,65 @@
+const I = {
+  "ins-title": "Title",
+  "ins-description": "Description",
+  "ins-subscribe": "Yes",
+  "ins-unsubscribe": "No"
+}, y = /font-weight\s*:\s*[^;]*;?/gi, S = /font-style\s*:\s*[^;]*;?/gi, u = /;\s*;/g, T = /^;|;$/g, d = /display\s*:\s*inline/gi, m = /display\s*:/i, b = /font-weight\s*:\s*bold/i, A = /font-style\s*:\s*italic/i, R = /^<(?:strong|b)\b/i, $ = /^<(?:em|i)\b/i;
+function L(t) {
+  return t ? t.replace(y, "").replace(S, "").replace(u, ";").replace(T, "").trim() : "";
+}
+function O(t) {
+  if (!t)
+    return "";
+  let e = t.replace(d, "display: block");
+  return m.test(e) || (e = e ? `${e}; display: block` : "display: block"), e.replace(u, ";").replace(T, "").trim();
+}
+function B(t, e) {
+  var c, a;
+  const o = I[e], l = t.querySelector(`.${e}`);
+  if (!l)
+    return {
+      paragraphs: [{ innerHtml: o, isBold: !1, isItalic: !1, styles: "" }],
+      align: "left",
+      containerClass: ""
+    };
+  const n = Array.from(l.querySelectorAll("p")), p = l.getAttribute("align") || ((c = n[0]) == null ? void 0 : c.getAttribute("align")) || "left", i = l.getAttribute("class") || "";
+  return n.length === 0 ? {
+    paragraphs: [{
+      innerHtml: ((a = l.textContent) == null ? void 0 : a.trim()) || o,
+      isBold: !1,
+      isItalic: !1,
+      styles: ""
+    }],
+    align: p,
+    containerClass: ""
+  } : { paragraphs: n.map((r) => {
+    const _ = r.getAttribute("style") || "", f = b.test(_) || !!r.querySelector("b, strong"), g = A.test(_) || !!r.querySelector("i, em"), E = L(_);
+    return {
+      // Legacy parity: empty <p> → fallback placeholder; <p><br></p> is not empty.
+      innerHtml: r.innerHTML.trim() || o,
+      isBold: f,
+      isItalic: g,
+      styles: O(E)
+    };
+  }), align: p, containerClass: i };
+}
+function C(t, e = "") {
+  const o = t.align ? ` align="${t.align}"` : "", l = t.paragraphs.map((n, p) => {
+    const i = p + 1;
+    let s = n.innerHtml;
+    const c = n.isBold && !R.test(s), a = n.isItalic && !$.test(s);
+    c && a ? s = `<strong path="${i},0"><em path="${i},0,0">${s}</em></strong>` : c ? s = `<strong path="${i},0">${s}</strong>` : a && (s = `<em path="${i},0">${s}</em>`);
+    const r = n.styles ? ` style="${n.styles.replaceAll('"', "'")}"` : "";
+    return `<p path="${i}"${r}>${s}</p>`;
+  }).join(`
+                    `);
+  return `
+            <td class="esd-block-text ${e}" ${o}>
+                    ${l}
+            </td>
+        `;
+}
+export {
+  C as buildTextBlock,
+  B as extractTextFromElement
+};