@useinsider/guido 3.27.0-beta.8bef749 → 3.27.0-beta.9585b71

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
 };

package/dist/package.json.js

@@ -1,9 +1,9 @@
-const o = "3.27.0-beta.8bef749", s = { stripo: { version: "2.83.1" } }, e = {
+const o = "3.27.0-beta.9585b71", s = { stripo: { version: "2.83.1" } }, t = {
   version: o,
   guido: s
 };
 export {
-  e as default,
+  t as default,
   s as guido,
   o as version
 };

package/dist/src/extensions/Blocks/Recommendation/controls/image/index.d.ts

@@ -25,7 +25,9 @@ declare const SizeControl_base: {
     };
 };
 declare class SizeControl extends SizeControl_base {
+    getTargetNodes(root: ImmutableHtmlNode): ImmutableHtmlNode[];
     getAdditionalModifications(root: ImmutableHtmlNode): TemplateModifier<HtmlNodeModifier, CssNodeModifier> | undefined;
+    private isMobilePreview;
     private getFitStyles;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.27.0-beta.8bef749",
+  "version": "3.27.0-beta.9585b71",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",