@useinsider/guido 3.27.0-beta.ee85b86 → 3.27.1-beta.4ca8aae

package/dist/composables/useStripo.js

@@ -1,52 +1,51 @@
-import { useActionsApi as j } from "./useActionsApi.js";
-import { useAmbiguousDynamicContent as z } from "./useAmbiguousDynamicContent.js";
-import { useBlocksConfig as $ } from "./useBlocksConfig.js";
-import { useConfig as G } from "./useConfig.js";
+import { useActionsApi as N } from "./useActionsApi.js";
+import { useBlocksConfig as j } from "./useBlocksConfig.js";
+import { useConfig as z } from "./useConfig.js";
 import { useCustomInterfaceAppearance as v } from "./useCustomInterfaceAppearance.js";
-import { useFullStoryBridge as X } from "./useFullStoryBridge.js";
-import { useModuleRepair as J } from "./useModuleRepair.js";
-import { useStripoEventHandler as K } from "./useStripoEventHandler.js";
-import { useStripoNotifications as Q } from "./useStripoNotifications.js";
-import { useToaster as W } from "./useToaster.js";
-import { localePatch as Y } from "../config/i18n/index.js";
+import { useFullStoryBridge as $ } from "./useFullStoryBridge.js";
+import { useModuleRepair as G } from "./useModuleRepair.js";
+import { useStripoEventHandler as X } from "./useStripoEventHandler.js";
+import { useStripoNotifications as J } from "./useStripoNotifications.js";
+import { useToaster as K } from "./useToaster.js";
+import { localePatch as Q } from "../config/i18n/index.js";
 import { en as B } from "../config/i18n/en/index.js";
-import { ToasterTypeOptions as Z } from "../enums/toaster.js";
-import { useStripoApi as ee } from "../services/stripoApi.js";
-import te from "../static/styles/customEditorStyle.css.js";
+import { ToasterTypeOptions as W } from "../enums/toaster.js";
+import { useStripoApi as Y } from "../services/stripoApi.js";
+import Z from "../static/styles/customEditorStyle.css.js";
 import { useEditorStore as T } from "../stores/editor.js";
-import { buildMergeTagEntries as oe, flattenDynamicContentList as re } from "../utils/genericUtil.js";
-import { getStripoRuntimeBaseUrl as ie } from "../utils/stripoRuntime.js";
+import { buildMergeTagEntries as ee, flattenDynamicContentList as te } from "../utils/genericUtil.js";
+import { getStripoRuntimeBaseUrl as oe } from "../utils/stripoRuntime.js";
 let d = null, F = !1;
-const ve = (t) => {
-  const { features: u, template: m, isFeatureEnabled: p } = G(), { handleError: f, showToaster: A } = W(), { getToken: P, getCustomFonts: R, getSyncModulesStatus: D } = ee(), { handleEvent: U } = K(), { handleModuleAdd: V } = J(), { restorePending: I } = z(), { getStripoBlocksConfig: L } = $(), { getStripoNotifications: q } = Q(), g = () => d || (d = new Promise((n, s) => {
+const ke = (t) => {
+  const { features: u, template: m, isFeatureEnabled: p } = z(), { handleError: f, showToaster: A } = K(), { getToken: P, getCustomFonts: R, getSyncModulesStatus: U } = Y(), { handleEvent: V } = X(), { handleModuleAdd: D } = G(), { getStripoBlocksConfig: I } = j(), { getStripoNotifications: L } = J(), g = () => d || (d = new Promise((n, a) => {
     if (document.getElementById("UiEditorScript")) {
       n();
       return;
     }
-    const i = ie();
+    const i = oe();
     if (!i) {
-      s(
+      a(
         new Error("guido.stripo.version is not set in package.json. Please configure the Stripo version.")
       );
       return;
     }
-    const a = `${i}UIEditor.js`, e = document.createElement("script");
-    e.id = "UiEditorScript", e.type = "module", e.src = a, e.onload = () => {
+    const s = `${i}UIEditor.js`, e = document.createElement("script");
+    e.id = "UiEditorScript", e.type = "module", e.src = s, e.onload = () => {
       F = !0, n();
     }, e.onerror = () => {
-      e.remove(), s(new Error(`Failed to load Stripo UIEditor script from S3: ${a}`));
+      e.remove(), a(new Error(`Failed to load Stripo UIEditor script from S3: ${s}`));
     }, document.body.appendChild(e);
   }), d.catch(() => {
     d = null;
-  }), d), x = async (n, s, i, a = [], e = !1, c = !1) => {
+  }), d), q = async (n, a, i, s = [], e = !1, c = !1) => {
     var w, k, b, _;
-    const o = T(), { html: S, css: y } = n, { baseBlocks: E, extensions: O } = await L();
+    const o = T(), { html: S, css: y } = n, { baseBlocks: E, extensions: x } = await I();
     t.mark("blocks_config_ready");
-    const h = ((w = u.value) == null ? void 0 : w.displayConditions) ?? !0, H = ((k = u.value) == null ? void 0 : k.modulesDisabled) ?? !1, C = c || (((b = m.value) == null ? void 0 : b.forceRecreate) ?? !1), M = "https://email-static.useinsider.com https://edge.fullstory.com https://rs.fullstory.com";
+    const h = ((w = u.value) == null ? void 0 : w.displayConditions) ?? !0, O = ((k = u.value) == null ? void 0 : k.modulesDisabled) ?? !1, C = c || (((b = m.value) == null ? void 0 : b.forceRecreate) ?? !1), H = "https://email-static.useinsider.com https://edge.fullstory.com https://rs.fullstory.com";
     t.setTemplate({ html: S, css: y, forceRecreate: C }), v().importCss(), t.mark("init_editor"), await window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
-        metadata: s,
+        metadata: a,
         html: S,
         css: y,
         forceRecreate: C,
@@ -59,11 +58,11 @@ const ve = (t) => {
         customAppearanceMergetags: !p("liquidSyntax"),
         customAppearanceMergetagsBorderColor: "#f1f3fe",
         customAppearanceMergetagsBackgroundColor: "#f1f3fe",
-        customViewStyles: te,
+        customViewStyles: Z,
         conditionsEnabled: h,
         customConditionsEnabled: h,
         enableXSSSecurity: !0,
-        modulesDisabled: H,
+        modulesDisabled: O,
         syncModulesEnabled: e,
         messageSettingsEnabled: !0,
         displayGmailAnnotations: !0,
@@ -74,18 +73,18 @@ const ve = (t) => {
         copyPasteEnabled: !1,
         selectElementAfterDrop: !0,
         sameFontSizeForOutlook: !0,
-        allowedScriptSourceDomains: M,
+        allowedScriptSourceDomains: H,
         ...E ? { baseBlocks: E } : {},
         editorFonts: {
           showDefaultStandardFonts: !0,
           showDefaultNotStandardFonts: !0,
-          customFonts: a
+          customFonts: s
         },
         mergeTags: [
           {
-            entries: oe(
+            entries: ee(
               i.preselectedDynamicContentList,
-              re((_ = m.value) == null ? void 0 : _.dynamicContentList),
+              te((_ = m.value) == null ? void 0 : _.dynamicContentList),
               p("liquidSyntax")
             )
           }
@@ -101,8 +100,8 @@ const ve = (t) => {
         },
         onTemplateLoaded() {
           try {
-            const { activateCustomViewStyles: r, updateTimerInClonedTemplate: l } = j(), { injectFullStory: N } = X();
-            v().importCss(), r(), N(), I(), l(), i.onReady(), o.isStripoInitialized = !0, o.loadingStatus = !1, setTimeout(() => {
+            const { activateCustomViewStyles: r, updateTimerInClonedTemplate: l } = N(), { injectFullStory: M } = $();
+            v().importCss(), r(), M(), l(), i.onReady(), o.isStripoInitialized = !0, o.loadingStatus = !1, setTimeout(() => {
               o.hasChanges = !1;
             }, 1e3), t.markReady();
           } catch (r) {
@@ -121,9 +120,9 @@ const ve = (t) => {
         onDataChanged() {
           o.hasChanges = !0, o.changeSeq += 1;
         },
-        onEvent: U,
-        onModuleAdd: V,
-        notifications: q(),
+        onEvent: V,
+        onModuleAdd: D,
+        notifications: L(),
         // Stripo deselects the block on any click outside the canvas, so every surface
         // that belongs to the block's own flow has to be listed here (SD-153273).
         ignoreClickOutsideSelectors: [
@@ -133,23 +132,23 @@ const ve = (t) => {
           ".in-modal-v2-wrapper",
           ".in-toasts-wrapper"
         ],
-        extensions: O,
-        localePatch: Y
+        extensions: x,
+        localePatch: Q
       }
     );
   };
-  return { initPlugin: async (n, s, i, a = !1) => {
+  return { initPlugin: async (n, a, i, s = !1) => {
     const e = T();
     try {
       t.mark("plugin_start"), t.setScriptPreloaded(F), await g(), t.mark("script_ready");
       const [c, o] = await Promise.all([
         R(),
-        D()
+        U()
       ]);
-      t.mark("fonts_sync_ready"), e.syncModulesEnabled = o, await x(n, s, i, c, o, a);
+      t.mark("fonts_sync_ready"), e.syncModulesEnabled = o, await q(n, a, i, c, o, s);
     } catch {
       e.loadingStatus = !1, A({
-        type: Z.Error,
+        type: W.Error,
         message: B["An error has occurred. Please report the error code to support."],
         actionButton: {
           text: B["Reload page"],
@@ -163,5 +162,5 @@ const ve = (t) => {
   } };
 };
 export {
-  ve as useStripo
+  ke as useStripo
 };

package/dist/config/compiler/htmlCompilerRules.js

@@ -1,7 +1,6 @@
-import { PENDING_MARKER_PATTERN as c } from "../../utils/dynamicContentPendingMarker.js";
-import { stripFontTags as l } from "../../utils/stripFontTags.js";
-import { trimHrefWhitespace as d } from "../../utils/trimHrefWhitespace.js";
-const y = [
+import { stripFontTags as c } from "../../utils/stripFontTags.js";
+import { trimHrefWhitespace as l } from "../../utils/trimHrefWhitespace.js";
+const f = [
   {
     id: "fix-url-encoding-start",
     description: "Replace {%22 with %7B%22 to fix URL encoding",
@@ -60,14 +59,14 @@ const y = [
     id: "strip-font-tags",
     description: 'Unwrap browser-translate-injected <font dir="auto"> tags, keeping inner content; other <font> elements are left intact.',
     type: "custom",
-    processor: (e) => l(e),
+    processor: (e) => c(e),
     priority: 15
   },
   {
     id: "trim-href-whitespace",
     description: "Trim leading/trailing whitespace and &nbsp; from every href value",
     type: "custom",
-    processor: (e) => d(e),
+    processor: (e) => l(e),
     priority: 16
   },
   {
@@ -184,15 +183,6 @@ const y = [
     flags: "g",
     priority: 45
   },
-  {
-    id: "remove-dc-pending-marker",
-    description: "Strip the editor-only pending dynamic-content choice marker from compiled output",
-    type: "regex",
-    pattern: c,
-    replacement: "",
-    flags: "g",
-    priority: 46
-  },
   {
     id: "remove-script-tags",
     // SD-145051: parity with HB HtmlCleaner.removeUnsafeHtmlTags — strip <script> from
@@ -218,5 +208,5 @@ const y = [
   }
 ];
 export {
-  y as defaultHtmlCompilerRules
+  f as defaultHtmlCompilerRules
 };

package/dist/config/migrator/unsubscribeMigrator.js

@@ -1,146 +1,158 @@
-var x = Object.defineProperty;
-var B = (c, e, r) => e in c ? x(c, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : c[e] = r;
-var A = (c, e, r) => B(c, typeof e != "symbol" ? e + "" : e, r);
-import { MERGE_TAGS as f, PAGE_TYPES as p } from "../../enums/unsubscribe.js";
-import { UNSUBSCRIBE_BLOCK_SELECTOR as h, DATA_ATTRIBUTES as k } from "../../extensions/Blocks/Unsubscribe/utils/constants.js";
-import { useUnsubscribeStore as C } from "../../stores/unsubscribe.js";
-class $ {
+var _ = Object.defineProperty;
+var $ = (f, e, t) => e in f ? _(f, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : f[e] = t;
+var k = (f, e, t) => $(f, typeof e != "symbol" ? e + "" : e, t);
+import { MERGE_TAGS as c, PAGE_TYPES as T } from "../../enums/unsubscribe.js";
+import { UNSUBSCRIBE_BLOCK_SELECTOR as y, DATA_ATTRIBUTES as d, UNSUBSCRIBE_MERGE_TAG_REGEX as h } from "../../extensions/Blocks/Unsubscribe/utils/constants.js";
+import { swapMergeTagInHref as B } from "../../extensions/Blocks/Unsubscribe/utils/swapMergeTagInHref.js";
+import { parsePageList as P } from "../../extensions/Blocks/Unsubscribe/utils/utils.js";
+import { useUnsubscribeStore as M } from "../../stores/unsubscribe.js";
+import { escapeHtml as A } from "../../utils/htmlEscape.js";
+const S = "unsubscribe", N = "You can ", R = " from our emails, if you need to.", C = "{-{-UNSUBSCRIBE-LINK-}-}";
+class H {
   constructor() {
-    A(this, "parser");
+    k(this, "parser");
     this.parser = new DOMParser();
   }
   async migrate(e) {
     try {
-      const r = this.parser.parseFromString(e, "text/html"), t = r.querySelectorAll("td.unsubscribe-block");
-      if (t.length) {
-        const s = C();
-        await s.fetchTemplates(), this.migrateLegacyBlocks(t, s);
+      const t = this.parser.parseFromString(e, "text/html"), r = t.querySelectorAll("td.unsubscribe-block");
+      if (r.length) {
+        const i = M();
+        await i.fetchTemplates(), this.migrateLegacyBlocks(r, i, this.collectBlockTags(t, i));
       }
-      const n = this.repairUnsubscribeLinks(r);
-      return !t.length && !n ? e : r.documentElement.outerHTML;
-    } catch (r) {
-      return console.error("UnsubscribeMigrator failed:", r), e;
+      const s = this.repairUnsubscribeLinks(t);
+      return !r.length && !s ? e : t.documentElement.outerHTML;
+    } catch (t) {
+      return console.error("UnsubscribeMigrator failed:", t), e;
     }
   }
-  migrateLegacyBlocks(e, r) {
-    e.forEach((t) => {
-      const n = t.getAttribute("id"), s = this.extractPaddingClass(t), l = t.getAttribute("bgcolor") || "", a = this.extractUnsubscribeContent(t), o = this.getCollectionTypeFromMergeTag(a.linkHref), b = r.getSelectedUnsubscribePagesByCollection(o);
+  migrateLegacyBlocks(e, t, r) {
+    e.forEach((s) => {
+      const i = s.getAttribute("id"), n = this.extractPaddingClass(s), o = s.getAttribute("bgcolor") || "", a = this.extractUnsubscribeContent(s, r), b = this.getCollectionTypeFromMergeTag(a.linkHref), u = t.getSelectedUnsubscribePagesByCollection(b);
       console.debug("[UnsubscribeMigrator]", {
         mergeTag: a.linkHref,
-        collectionType: o,
-        pageIds: b,
-        paddingClass: s,
-        bgColor: l
+        collectionType: b,
+        pageIds: u,
+        paddingClass: n,
+        bgColor: o
       });
-      const u = this.buildUnsubscribeBlock(
+      const l = this.buildUnsubscribeBlock(
         a,
-        o,
         b,
-        s,
-        l
-      ), i = this.parser.parseFromString(
-        `<table id="tempDoc"><tbody><tr>${u}</tr></tbody></table>`,
+        u,
+        n,
+        o
+      ), g = this.parser.parseFromString(
+        `<table id="tempDoc"><tbody><tr>${l}</tr></tbody></table>`,
         "text/html"
-      ).querySelector(h);
-      i && t.parentNode && (i.setAttribute("id", n || ""), t.parentNode.replaceChild(i, t));
+      ).querySelector(y);
+      g && s.parentNode && (g.setAttribute("id", i || ""), s.parentNode.replaceChild(g, s));
     });
   }
+  // The compiler resolves a typed tag only through a block that lists pages, so a page-less block carries no tag.
+  collectBlockTags(e, t) {
+    const r = /* @__PURE__ */ new Set();
+    return e.querySelectorAll(y).forEach((s) => {
+      var a, b, u;
+      if (!P(s.getAttribute(d.PAGE_LIST) || "").length)
+        return;
+      const i = Number(s.getAttribute(d.PAGE_TYPE)), n = c[i];
+      if (n) {
+        r.add(n);
+        return;
+      }
+      const o = (u = (b = (a = this.findLinkCandidates(s).primary) == null ? void 0 : a.getAttribute("href")) == null ? void 0 : b.match(h)) == null ? void 0 : u[0];
+      o && r.add(c[this.getCollectionTypeFromMergeTag(o)]);
+    }), e.querySelectorAll("td.unsubscribe-block").forEach((s) => {
+      const i = this.getCollectionTypeFromMergeTag(this.getLegacyLinkTag(s));
+      t.getSelectedUnsubscribePagesByCollection(i).length && r.add(c[i]);
+    }), r;
+  }
+  // Mirrors extractUnsubscribeContent: without a <p> the block migrates on the default tag.
+  getLegacyLinkTag(e) {
+    var r, s;
+    const { primary: t } = this.findLinkCandidates(e);
+    return !t || !(t.closest("p") || e.querySelector("p")) ? c.default : ((s = (r = t.getAttribute("href")) == null ? void 0 : r.match(h)) == null ? void 0 : s[0]) ?? c.default;
+  }
   // Re-derives the typed merge tag from data-unsubscribe-page-type for any v2
   // block whose anchor href is missing or the legacy default. Returns true when
   // at least one href was rewritten. Typed tags and custom URLs are left intact.
   repairUnsubscribeLinks(e) {
-    const r = e.querySelectorAll(`${h}[${k.PAGE_TYPE}]`);
-    let t = !1;
-    return r.forEach((n) => {
-      const s = n.querySelector('a[data-unsubscribe-link="true"], a.unsubscribe-link');
-      if (!s)
+    const t = e.querySelectorAll(`${y}[${d.PAGE_TYPE}]`);
+    let r = !1;
+    return t.forEach((s) => {
+      const i = s.querySelector('a[data-unsubscribe-link="true"], a.unsubscribe-link');
+      if (!i)
         return;
-      const l = s.getAttribute("href") || "";
-      if (l && l !== f.default)
+      const n = i.getAttribute("href") || "";
+      if (n && n !== c.default)
         return;
-      const a = Number(n.getAttribute(k.PAGE_TYPE)), o = f[a];
-      o && (s.setAttribute("href", o), t = !0);
-    }), t;
+      const o = Number(s.getAttribute(d.PAGE_TYPE)), a = c[o];
+      a && (i.setAttribute("href", a), r = !0);
+    }), r;
   }
   extractPaddingClass(e) {
-    const t = (e.getAttribute("class") || "").match(/\bes-p\d+\b/);
-    return t ? t[0] : "";
+    const r = (e.getAttribute("class") || "").match(/\bes-p\d+\b/);
+    return r ? r[0] : "";
+  }
+  hasVisibleContent(e) {
+    var t;
+    return !!((t = e.textContent) != null && t.trim() || e.querySelector("img"));
+  }
+  findLinkCandidates(e) {
+    const t = Array.from(/* @__PURE__ */ new Set([
+      ...Array.from(e.querySelectorAll("a.unsubscribe-link")),
+      ...Array.from(e.querySelectorAll('a[href*="unsubscribe"]'))
+    ])), r = (n) => h.test(n.getAttribute("href") || ""), s = (n) => this.hasVisibleContent(n), i = t.find((n) => s(n) && r(n)) ?? t.find((n) => s(n) && n.classList.contains("unsubscribe-link")) ?? t.find(r) ?? t.find(s) ?? t[0];
+    return { candidates: t, primary: i };
   }
-  extractUnsubscribeContent(e) {
-    var d;
-    const r = e.querySelector("a.unsubscribe-link") || e.querySelector('a[href*="unsubscribe"]'), t = (r == null ? void 0 : r.closest("p")) || e.querySelector("p");
-    if (!t)
-      return {
-        textBefore: "You can ",
-        linkText: "unsubscribe",
-        linkHref: "{{ins-unsubscribe-link}}",
-        linkStyle: "",
-        textAfter: " from our emails, if you need to.",
-        isBold: !1,
-        isItalic: !1,
-        align: "center",
-        paragraphStyle: ""
-      };
-    const n = e.getAttribute("align") || t.getAttribute("align") || "center", s = t.getAttribute("style") || "";
-    if (!r)
-      return {
-        textBefore: "You can ",
-        linkText: "unsubscribe",
-        linkHref: "{{ins-unsubscribe-link}}",
-        linkStyle: "",
-        textAfter: " from our emails, if you need to.",
-        isBold: !1,
-        isItalic: !1,
-        align: n,
-        paragraphStyle: s
-      };
-    const l = ((d = r.textContent) == null ? void 0 : d.trim()) || "unsubscribe", a = r.getAttribute("href") || "{{ins-unsubscribe-link}}", o = r.getAttribute("style") || "", b = t.textContent || "", u = b.indexOf(l), g = u >= 0 ? b.substring(0, u).trim() : "You can ", i = u >= 0 ? b.substring(u + l.length).trim() : " from our emails, if you need to.", m = !!t.querySelector("b, strong"), y = !!t.querySelector("i, em");
-    return {
-      textBefore: g,
-      linkText: l,
-      linkHref: this.normalizeUnsubscribeHref(a),
-      linkStyle: o,
-      textAfter: i,
-      isBold: m,
-      isItalic: y,
-      align: n,
-      paragraphStyle: s
+  extractUnsubscribeContent(e, t) {
+    const r = e.cloneNode(!0), { candidates: s, primary: i } = this.findLinkCandidates(r), n = (i == null ? void 0 : i.closest("p")) ?? null, o = n || r.querySelector("p"), a = {
+      footerHtml: "",
+      linkText: S,
+      linkHref: c.default,
+      linkStyle: "",
+      align: "center",
+      paragraphStyle: ""
     };
+    if (!o || (a.align = e.getAttribute("align") || o.getAttribute("align") || "center", n || (a.paragraphStyle = o.getAttribute("style") || ""), !i))
+      return a;
+    a.linkText = this.hasVisibleContent(i) ? i.innerHTML.trim() : S, a.linkHref = this.normalizeUnsubscribeHref(i.getAttribute("href") || c.default), a.linkStyle = i.getAttribute("style") || "";
+    const b = this.getCollectionTypeFromMergeTag(a.linkHref), u = c[b];
+    return r.querySelectorAll("a[href]").forEach((l) => {
+      var m;
+      const p = l.getAttribute("href") || "", g = (m = p.match(h)) == null ? void 0 : m[0];
+      g && l.setAttribute("href", B(p, t.has(g) ? g : u));
+    }), s.filter((l) => l !== i && !this.hasVisibleContent(l)).forEach((l) => l.replaceWith(...Array.from(l.childNodes))), i.replaceWith(r.ownerDocument.createTextNode(C)), a.footerHtml = r.innerHTML.trim(), a;
   }
-  buildUnsubscribeBlock(e, r, t, n, s) {
-    const l = e.linkStyle ? ` style="${e.linkStyle}"` : "", u = `<a ${`href="${Object.values(f).includes(e.linkHref) ? f[r] : e.linkHref}" class="unsubscribe-link" target="_blank" data-unsubscribe-link="true"`}${l}>${e.linkText}</a>`, g = [];
-    e.textBefore && g.push(e.textBefore), g.push(u), e.textAfter && g.push(e.textAfter);
-    let i = g.join(" ");
-    e.isBold && e.isItalic ? i = `<strong path="1,0"><em path="1,0,0">${i}</em></strong>` : e.isBold ? i = `<strong path="1,0">${i}</strong>` : e.isItalic && (i = `<em path="1,0">${i}</em>`);
-    const m = e.align ? ` align="${e.align}"` : "", y = s ? ` bgcolor="${s}"` : "", d = e.paragraphStyle ? ` style="${e.paragraphStyle}"` : "", T = t.length > 0 ? ` ${k.PAGE_LIST}="${t.join(",")}"` : "", E = ` ${k.PAGE_TYPE}="${r}"`, S = "esd-block-text unsubscribe-block-v2 esd-block-unsubscribe esd-unsubscribe-block esd-extension-block";
+  buildUnsubscribeBlock(e, t, r, s, i) {
+    const n = e.linkStyle ? ` style="${A(e.linkStyle)}"` : "", a = Object.values(c).includes(e.linkHref) ? c[t] : e.linkHref, u = `<a ${`href="${A(a)}" class="unsubscribe-link" target="_blank" data-unsubscribe-link="true"`}${n}>${e.linkText}</a>`, l = e.paragraphStyle ? ` style="${A(e.paragraphStyle)}"` : "", p = e.footerHtml ? e.footerHtml.replace(C, () => u) : `<p path="1"${l}>${N}${u}${R}</p>`, g = e.align ? ` align="${e.align}"` : "", m = i ? ` bgcolor="${i}"` : "", L = r.length > 0 ? ` ${d.PAGE_LIST}="${r.join(",")}"` : "", U = ` ${d.PAGE_TYPE}="${t}"`, E = "esd-block-text unsubscribe-block-v2 esd-block-unsubscribe esd-unsubscribe-block esd-extension-block";
     return `
             <td
                 data-migration="true"
                 esd-extension-block-id="unsubscribe-block"
-                class="${n ? `${S} ${n}` : S}"
-                ${m}${y}${E}${T}
+                class="${s ? `${E} ${s}` : E}"
+                ${g}${m}${U}${L}
             >
-                <p path="1"${d}>
-                    ${i}
-                </p>
+                ${p}
             </td>
         `;
   }
   getCollectionTypeFromMergeTag(e) {
-    return e === f[p.SUBSCRIPTION_PREFERENCE_CENTER] ? p.SUBSCRIPTION_PREFERENCE_CENTER : e === f[p.GLOBAL_UNSUBSCRIBE] ? p.GLOBAL_UNSUBSCRIBE : p.GLOBAL_UNSUBSCRIBE;
+    return e === c[T.SUBSCRIPTION_PREFERENCE_CENTER] ? T.SUBSCRIPTION_PREFERENCE_CENTER : e === c[T.GLOBAL_UNSUBSCRIBE] ? T.GLOBAL_UNSUBSCRIBE : T.GLOBAL_UNSUBSCRIBE;
   }
   normalizeUnsubscribeHref(e) {
-    if (Object.values(f).includes(e))
+    if (Object.values(c).includes(e))
       return e;
-    const t = e.match(/{{ins-(?:global-)?(?:preferences-)?unsubscribe-link}}/);
-    return t ? t[0] : e.includes("unsubscribe") || e.includes("unsub") ? (console.warn(
+    const r = e.match(/{{ins-(?:global-)?(?:preferences-)?unsubscribe-link}}/);
+    return r ? r[0] : e.includes("unsubscribe") || e.includes("unsub") ? (console.warn(
       `[UnsubscribeMigrator] Unrecognized unsubscribe href format: "${e}". Defaulting to {{ins-unsubscribe-link}}`
     ), "{{ins-unsubscribe-link}}") : e;
   }
 }
-async function M(c) {
-  return new $().migrate(c);
+async function Y(f) {
+  return new H().migrate(f);
 }
 export {
-  M as migrateUnsubscribe
+  Y as migrateUnsubscribe
 };

package/dist/extensions/Blocks/Recommendation/controls/image/index.js

@@ -1,79 +1,97 @@
-import { EditorStatePropertyType as E, PreviewDeviceMode as I, ModificationDescription as h } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { createImageMarginsControl as M, createImageSizeControl as C } from "../../../controlFactories.js";
+import { EditorStatePropertyType as M, PreviewDeviceMode as I, ModificationDescription as g } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { createImageMarginsControl as C, createImageSizeControl as O } from "../../../controlFactories.js";
 import { RecommendationBlockId as c } from "../../constants/blockIds.js";
-import { RecommendationControlId as g } from "../../constants/controlIds.js";
-import { BLOCK_ROOT_SELECTOR as l } from "../../constants/selectors.js";
-import { hasGetStyle as a, hasGetAttribute as O } from "../../utils/tagName.js";
-const R = { width: "", height: "auto", "max-height": "" }, f = `${l} img.adapt-img`, x = `*${l.slice(1)}`, p = `@media only screen and (max-width: 600px) { ${f} { max-height: none !important; } }`;
-function _(t) {
+import { RecommendationControlId as f } from "../../constants/controlIds.js";
+import { BLOCK_ROOT_SELECTOR as l, MOBILE_CONTAINER_SELECTOR as R } from "../../constants/selectors.js";
+import { hasGetStyle as a, hasGetAttribute as T } from "../../utils/tagName.js";
+const _ = { width: "", height: "auto", "max-height": "" }, E = `${l} img.adapt-img`, b = `*${l.slice(1)}`, p = `@media only screen and (max-width: 600px) { ${E} { max-height: none !important; } }`;
+function x(t) {
   return { width: "auto", height: "auto", "max-height": `${t}px` };
 }
 function A(t) {
-  return t.querySelectorAll(x).some((e) => "getSelector" in e && e.getSelector() === f);
+  return t.querySelectorAll(b).some((e) => "getSelector" in e && e.getSelector() === E);
 }
-function T(t, e) {
-  return a(t) && Object.entries(e).some(([o, n]) => (t.getStyle(o) ?? "") !== n);
+function B(t, e) {
+  return a(t) && Object.entries(e).some(([o, i]) => (t.getStyle(o) ?? "") !== i);
 }
 function S(t) {
   const e = t.getDocumentRootCssNode();
   return e && !A(e) ? e : null;
 }
-function H(t, e) {
-  const n = e.querySelectorAll("img").some((r) => a(r) && !!r.getStyle("max-height")) ? S(t) : null;
-  if (!n)
+function U(t, e) {
+  const i = e.querySelectorAll("img").some((r) => a(r) && !!r.getStyle("max-height")) ? S(t) : null;
+  if (!i)
     return;
-  const i = t.getDocumentModifier();
-  i.modifyCss(n).appendRule(p), i.apply(new h("Add the reco image mobile fit rule"));
+  const n = t.getDocumentModifier();
+  n.modifyCss(i).appendRule(p), n.apply(new g("Add the reco image mobile fit rule"));
 }
-const B = `[esd-extension-block-id="${c.IMAGE}"]`, L = /^\d+px$/;
+const L = `[esd-extension-block-id="${c.IMAGE}"]`, v = /^\d+px$/;
 function y(t) {
-  return O(t) && Number(t.getAttribute("height")) || 0;
+  return T(t) && Number(t.getAttribute("height")) || 0;
 }
-function b(t) {
+function w(t) {
   const e = y(t), o = a(t) ? t.getStyle("max-height") ?? "" : "";
-  return L.test(o) && e > 0 && o !== `${e}px`;
+  return v.test(o) && e > 0 && o !== `${e}px`;
 }
-function U(t, e) {
-  const o = e.querySelectorAll(B).map((i) => i.querySelector("img")).filter(b);
+function Z(t, e) {
+  const o = e.querySelectorAll(L).map((n) => n.querySelector("img")).filter(w);
   if (!o.length)
     return;
-  const n = t.getDocumentModifier();
-  o.forEach((i) => n.modifyHtml(i).setStyle("max-height", `${y(i)}px`)), n.apply(new h("Sync the reco image height bound").asHidden());
+  const i = t.getDocumentModifier();
+  o.forEach((n) => i.modifyHtml(n).setStyle("max-height", `${y(n)}px`)), i.apply(new g("Sync the reco image height bound").asHidden());
+}
+function h(t) {
+  try {
+    return !!t.closest(R);
+  } catch {
+    return null;
+  }
 }
-class D extends C(
-  g.IMAGE_SIZE,
+class D extends O(
+  f.IMAGE_SIZE,
   c.IMAGE,
   l
 ) {
+  // Stripo derives the mobile size from rendered targets, and the container hidden in mobile preview renders 0px.
+  getTargetNodes(e) {
+    const o = super.getTargetNodes(e);
+    if (!this.isMobilePreview())
+      return o;
+    const i = h(e);
+    return i === null ? [] : o.filter((n) => h(n) === i);
+  }
   getAdditionalModifications(e) {
-    if (this.api.getEditorState()[E.previewDeviceMode] === I.MOBILE)
+    if (this.isMobilePreview())
       return;
-    const o = this.getFitStyles(), n = this.getTargetNodes(e).map((s) => s.querySelector("img")).filter((s) => T(s, o)), i = o["max-height"] ? S(this.api) : null;
-    if (!n.length && !i)
+    const o = this.getFitStyles(), i = this.getTargetNodes(e).map((s) => s.querySelector("img")).filter((s) => B(s, o)), n = o["max-height"] ? S(this.api) : null;
+    if (!i.length && !n)
       return;
     const r = this.api.getDocumentModifier();
-    return i && r.modifyCss(i).appendRule(p), n.forEach((s) => {
-      const m = r.modifyHtml(s);
-      Object.entries(o).forEach(([u, d]) => {
-        d ? m.setStyle(u, d) : m.removeStyle(u);
+    return n && r.modifyCss(n).appendRule(p), i.forEach((s) => {
+      const u = r.modifyHtml(s);
+      Object.entries(o).forEach(([d, m]) => {
+        m ? u.setStyle(d, m) : u.removeStyle(d);
       });
     }), r;
   }
+  isMobilePreview() {
+    return this.api.getEditorState()[M.previewDeviceMode] === I.MOBILE;
+  }
   getFitStyles() {
     const { size: e } = this.api.getValues();
-    return (e == null ? void 0 : e.type) === "height" && e.value ? _(e.value) : R;
+    return (e == null ? void 0 : e.type) === "height" && e.value ? x(e.value) : _;
   }
 }
-const F = M(
-  g.IMAGE_MARGINS,
+const N = C(
+  f.IMAGE_MARGINS,
   c.IMAGE,
   l
-), P = {
+), j = {
   size: D,
-  margins: F
+  margins: N
 };
 export {
-  P as ImageControls,
-  H as ensureMobileFitRule,
-  U as syncHeightBound
+  j as ImageControls,
+  U as ensureMobileFitRule,
+  Z as syncHeightBound
 };