@useinsider/guido 3.18.1-beta.d56e3d5 → 3.18.1-beta.dea994d

package/dist/composables/usePreviewMode.js

@@ -1,39 +1,37 @@
-import { useEditorStore as d } from "../stores/editor.js";
-import { usePreviewStore as p } from "../stores/preview.js";
-import { fixMobileNonResponsiveLayout as c } from "../utils/fixMobileNonResponsiveLayout.js";
-import { useActionsApi as u } from "./useActionsApi.js";
-import { useCodeEditorApi as v } from "./useCodeEditorApi.js";
-import { useHtmlCompiler as w } from "./useHtmlCompiler.js";
+import { useEditorStore as p } from "../stores/editor.js";
+import { usePreviewStore as c } from "../stores/preview.js";
+import { appendMobileHiddenColumnCss as u } from "../utils/appendMobileHiddenColumnCss.js";
+import { useActionsApi as v } from "./useActionsApi.js";
+import { useCodeEditorApi as w } from "./useCodeEditorApi.js";
+import { useHtmlCompiler as P } from "./useHtmlCompiler.js";
 import { useRecommendationPreview as f } from "./useRecommendationPreview.js";
-const y = () => {
-  const o = d(), e = p(), { closeCodeEditor: a } = v(), { getPreviewData: m, getCompiledEmail: s } = u(), { compileHtml: l } = w(), { substituteRecommendationPreview: i } = f(), r = () => {
-    o.isPreviewModeOpen = !1, e.$reset();
+const A = () => {
+  const t = p(), e = c(), { closeCodeEditor: a } = w(), { getPreviewData: m, getCompiledEmail: s } = v(), { compileHtml: l } = P(), { substituteRecommendationPreview: r } = f(), i = () => {
+    t.isPreviewModeOpen = !1, e.$reset();
   };
   return {
-    closePreviewMode: r,
+    closePreviewMode: i,
     openPreviewMode: () => {
-      o.isCodeEditorOpen && a(), o.isPreviewModeOpen = !0;
+      t.isCodeEditorOpen && a(), t.isPreviewModeOpen = !0;
     },
     loadPreviewData: async () => {
-      if (!(o.loadingStatus || e.isLoaded)) {
-        o.loadingStatus = !0;
+      if (!(t.loadingStatus || e.isLoaded)) {
+        t.loadingStatus = !0;
         try {
-          const [t, n] = await Promise.all([
+          const [o, d] = await Promise.all([
             m(),
             s({ minimize: !0, resetDataSavedFlag: !1 })
-          ]);
-          e.templateHtml = c(
-            i(t.html || "")
-          ), e.ampHtml = i(t.ampHtml || ""), e.ampErrors = t.ampErrors || [], e.setEmailFormat(t.ampHtml ? "AMP" : "html"), e.emailSizeKB = l(n.html).estimatedSizeKB, e.isLoaded = !0;
-        } catch (t) {
-          console.error("Failed to load preview data:", t), r();
+          ]), n = r(o.html || "");
+          e.templateHtml = u(n), e.ampHtml = r(o.ampHtml || ""), e.ampErrors = o.ampErrors || [], e.setEmailFormat(o.ampHtml ? "AMP" : "html"), e.emailSizeKB = l(d.html).estimatedSizeKB, e.isLoaded = !0;
+        } catch (o) {
+          console.error("Failed to load preview data:", o), i();
         } finally {
-          o.loadingStatus = !1;
+          t.loadingStatus = !1;
         }
       }
     }
   };
 };
 export {
-  y as usePreviewMode
+  A as usePreviewMode
 };

package/dist/config/compiler/htmlCompilerRules.js

@@ -1,6 +1,6 @@
-import { fixMobileNonResponsiveLayout as c } from "../../utils/fixMobileNonResponsiveLayout.js";
+import { appendMobileHiddenColumnCss as c } from "../../utils/appendMobileHiddenColumnCss.js";
 import { stripFontTags as l } from "../../utils/stripFontTags.js";
-const f = [
+const g = [
   {
     id: "fix-url-encoding-start",
     description: "Replace {%22 with %7B%22 to fix URL encoding",
@@ -55,13 +55,6 @@ const f = [
     replaceAll: !0,
     priority: 14
   },
-  {
-    id: "fix-mobile-non-responsive-layout",
-    description: "SD-151345: drop mobile-hidden columns and their gaps from non-responsive structures, let long words break.",
-    type: "custom",
-    processor: (e) => c(e),
-    priority: 15
-  },
   {
     id: "strip-font-tags",
     description: 'Unwrap browser-translate-injected <font dir="auto"> tags, keeping inner content; other <font> elements are left intact.',
@@ -137,6 +130,13 @@ const f = [
     },
     priority: 30
   },
+  {
+    id: "append-mobile-hidden-column-css",
+    description: "Inject media-query CSS that hides mobile-hidden columns and their gap cells",
+    type: "custom",
+    processor: (e) => c(e),
+    priority: 31
+  },
   {
     id: "replace-old-image-domain",
     description: "Replacing old image domains",
@@ -208,5 +208,5 @@ const f = [
   }
 ];
 export {
-  f as defaultHtmlCompilerRules
+  g as defaultHtmlCompilerRules
 };

package/dist/src/utils/appendMobileHiddenColumnCss.d.ts

@@ -0,0 +1,2 @@
+/** Exported for the preview drawer, which takes its HTML from the backend and never runs the compiler. */
+export declare function appendMobileHiddenColumnCss(html: string): string;

package/dist/static/styles/customEditorStyle.css.js

@@ -1,4 +1,4 @@
-const e = `.esd-x,
+const n = `.esd-x,
 .esd-merge-tag {
     color: #0a2ecc !important;
     box-shadow: none !important;
@@ -107,21 +107,20 @@ const e = `.esd-x,
     display: none !important;
 }
 
-/* SD-151345: mirror the compiled-email fix in the editor's mobile preview.
-   The editor simulates mobile with .ue-mobile-mode, not a viewport media query. */
-.ue-mobile-mode .esd-block-text:not(.ins-coupon-code),
-.ue-mobile-mode .esd-block-text:not(.ins-coupon-code) p {
-    word-break: break-word !important;
-    overflow-wrap: anywhere !important;
+/* SD-151345: a non-responsive structure still renders the 20px "Containers Gap on Mobile" cell of
+   every container it hides on mobile, so the visible containers sit off-centre and rows drift apart. */
+.ue-mobile-mode td.esdev-mso-td:has(td.esd-container-frame.esd-mobile-hidden) {
+    display: none !important;
+}
+
+.ue-mobile-mode table.esdev-mso-table:has(td.esd-container-frame.esd-mobile-hidden) {
+    table-layout: fixed !important;
 }
 
-/* SD-151345: a non-responsive column whose containers are all mobile-hidden still
-   takes its share of the row in the editor's mobile mode. Drop it like the compiled
-   email does (ins-m-hidden-col) so the visible columns split the row. */
-.ue-mobile-mode td.esdev-mso-td:not(:has(td.esd-container-frame:not(.esd-mobile-hidden))) {
+.ue-mobile-mode table.esdev-mso-table:has(td.esd-container-frame.esd-mobile-hidden) td.es-m-w0 {
     display: none !important;
 }
 `;
 export {
-  e as default
+  n as default
 };

package/dist/utils/appendMobileHiddenColumnCss.js

@@ -0,0 +1,11 @@
+const s = "td.esdev-mso-td:has(> table > tbody > tr.es-mobile-hidden)", d = "table.esdev-mso-table:has(> tbody > tr > td.esdev-mso-td > table > tbody > tr.es-mobile-hidden)", t = `<style type="text/css">@media only screen and (max-width:600px){
+${s}{display:none !important}
+${d}{table-layout:fixed !important}
+${d} > tbody > tr > td.es-m-w0{display:none !important}
+}</style>`;
+function n(e) {
+  return !e || e.includes(t) ? e : /<\/head\s*>/i.test(e) ? e.replace(/<\/head\s*>/i, `${t}$&`) : `${t}${e}`;
+}
+export {
+  n as appendMobileHiddenColumnCss
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.18.1-beta.d56e3d5",
+  "version": "3.18.1-beta.dea994d",
   "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",

package/dist/src/utils/fixMobileNonResponsiveLayout.d.ts

@@ -1,23 +0,0 @@
-/**
- * SD-151345 — non-responsive structures break on mobile in two ways.
- *
- * 1. A structure with "Responsive Structure" off compiles to a real
- *    `table.esdev-mso-table` whose row alternates column cells (`td.esdev-mso-td`)
- *    with fixed 20px gap cells (`td.es-m-w0`). When a column's content is mobile
- *    hidden (`tr.es-mobile-hidden`) the column collapses to 0px but its gap cells
- *    stay, so the visible columns end up shifted left in one row and right in
- *    the next. We tag those cells so a media query can drop them and let the
- *    remaining columns split the row evenly.
- * 2. A word that cannot wrap widens its cell past its share and the row spills
- *    past the mobile viewport. Letting words break restores the intended widths.
- *    Scoped to `.esdev-mso-table` — only non-responsive structures share a row on
- *    mobile, and `overflow-wrap:anywhere` feeds min-content sizing, so a wrapper-wide
- *    rule would reflow every other email. The coupon exception carries the same
- *    prefix plus its own class so it outranks the blanket rule (both !important,
- *    so specificity decides) and a promo code stays one token.
- *
- * Stripo strips `esd-*` classes on export, so the selectors only rely on classes
- * that survive compilation. Pure string ops, no DOM — a DOMParser round trip would
- * rewrite conditional comments and entities in the sent HTML.
- */
-export declare function fixMobileNonResponsiveLayout(html: string): string;

package/dist/utils/fixMobileNonResponsiveLayout.js

@@ -1,54 +0,0 @@
-const h = "ins-mobile-layout", b = "ins-m-hidden-col", f = "ins-m-collapsed", x = `<style type="text/css">/* ${h} */
-@media only screen and (max-width:600px){
-.${b}{display:none !important}
-table.${f}{table-layout:fixed !important}
-.esdev-mso-table h1,.esdev-mso-table h2,.esdev-mso-table h3,.esdev-mso-table h4,.esdev-mso-table h5,
-.esdev-mso-table h6,.esdev-mso-table p,
-.esdev-mso-table td{word-break:break-word !important;overflow-wrap:anywhere !important}
-.esdev-mso-table .ins-coupon-code,
-.esdev-mso-table .ins-coupon-code *{word-break:normal !important;overflow-wrap:normal !important}
-}</style>`, w = /<\/head\s*>/i, u = /<(\/?)(table|tr|td)\b[^>]*>/gi, m = /\sclass=(["'])(.*?)\1/i, r = (t, s) => {
-  const e = m.exec(t);
-  return !!e && e[2].split(/\s+/).includes(s);
-}, v = (t, s) => r(t, s) ? t : m.test(t) ? t.replace(
-  m,
-  (e, n, l) => ` class=${n}${l} ${s}${n}`
-) : t.replace(/\s*\/?>$/, (e) => ` class="${s}"${e}`), E = (t) => {
-  const s = [], e = [];
-  let n;
-  for (u.lastIndex = 0; (n = u.exec(t)) !== null; ) {
-    const [l, p, i] = n, o = i.toLowerCase();
-    if (p) {
-      const d = e.map((c) => c.tag).lastIndexOf(o);
-      d !== -1 && e.splice(d);
-    } else {
-      const d = { tag: o, index: n.index, text: l }, c = e[e.length - 1], a = e[e.length - 2];
-      o === "table" && r(l, "esdev-mso-table") ? (d.mso = !0, s.push({ index: n.index, text: l, cells: [] })) : o === "td" && (c == null ? void 0 : c.tag) === "tr" && (a != null && a.mso) ? (d.cell = { index: n.index, text: l, isGap: r(l, "es-m-w0"), rowsHidden: [] }, s[s.length - 1].cells.push(d.cell)) : o === "tr" && (c == null ? void 0 : c.tag) === "table" && (a != null && a.cell) && a.cell.rowsHidden.push(r(l, "es-mobile-hidden")), e.push(d);
-    }
-  }
-  return s;
-}, L = (t) => {
-  const s = t.map((i) => !i.isGap && i.rowsHidden.length > 0 && i.rowsHidden.every(Boolean));
-  if (!s.includes(!0))
-    return [];
-  const e = s.map((i, o) => !i && !(t[o].isGap && s[o - 1])), n = (i) => e[i] && !t[i].isGap, l = e.findIndex((i, o) => n(o)), p = e.length - 1 - [...e].reverse().findIndex((i, o) => n(e.length - 1 - o));
-  return t.filter((i, o) => !e[o] || i.isGap && (o < l || o > p));
-}, _ = (t) => {
-  const s = [];
-  return E(t).forEach((e) => {
-    const n = L(e.cells);
-    n.length && (s.push({ index: e.index, text: e.text, className: f }), n.forEach((l) => s.push({ index: l.index, text: l.text, className: b })));
-  }), s.sort((e, n) => n.index - e.index).reduce((e, n) => {
-    const l = e.slice(n.index + n.text.length);
-    return e.slice(0, n.index) + v(n.text, n.className) + l;
-  }, t);
-};
-function C(t) {
-  if (!t || t.includes(h))
-    return t;
-  const s = _(t), e = w.exec(s);
-  return e ? s.slice(0, e.index) + x + s.slice(e.index) : x + s;
-}
-export {
-  C as fixMobileNonResponsiveLayout
-};