@lit-pigeon/renderer-mjml 0.2.4 → 0.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -1,17 +1,17 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const H=require("mjml"),W=require("@lit-pigeon/core");function i(e){return`${e.top}px ${e.right}px ${e.bottom}px ${e.left}px`}function k(e){const{content:t,padding:r,textAlign:a,lineHeight:o,cssClass:n}=e.values,c=[`padding="${i(r)}"`,`align="${a}"`,`line-height="${o}"`];return n&&c.push(`css-class="${q(n)}"`),`<mj-text ${c.join(" ")}>${t}</mj-text>`}function q(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function x(e){const{src:t,alt:r,width:a,href:o,padding:n,alignment:c,borderRadius:s,cssClass:u}=e.values,l=[`src="${p(t)}"`,`alt="${p(r)}"`,`padding="${i(n)}"`,`align="${c}"`];return a!=="auto"&&l.push(`width="${a}px"`),o&&l.push(`href="${p(o)}"`),s!==void 0&&s>0&&l.push(`border-radius="${s}px"`),u&&l.push(`css-class="${p(u)}"`),`<mj-image ${l.join(" ")} />`}function p(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function y(e){const{content:t,href:r,backgroundColor:a,textColor:o,borderRadius:n,padding:c,innerPadding:s,fontSize:u,fontWeight:l,alignment:m,fullWidth:$,cssClass:g}=e.values,f=[`href="${h(r)}"`,`background-color="${a}"`,`color="${o}"`,`border-radius="${n}px"`,`padding="${i(c)}"`,`inner-padding="${i(s)}"`,`font-size="${u}px"`,`font-weight="${l}"`,`align="${m}"`];$&&f.push('width="100%"'),g&&f.push(`css-class="${h(g)}"`);const R=t.replace(/^\s*<p>([\s\S]*?)<\/p>\s*$/i,"$1");return`<mj-button ${f.join(" ")}>${R}</mj-button>`}function h(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function v(e){const{borderColor:t,borderWidth:r,borderStyle:a,padding:o,width:n}=e.values;return`<mj-divider ${[`border-color="${t}"`,`border-width="${r}px"`,`border-style="${a}"`,`padding="${i(o)}"`,`width="${n}"`].join(" ")} />`}function w(e){const{height:t}=e.values;return`<mj-spacer height="${t}px" />`}function N(e){switch(e.type){case"facebook":return"facebook";case"twitter":return"twitter";case"instagram":return"instagram";case"linkedin":return"linkedin";case"youtube":return"youtube";case"tiktok":return"web";case"custom":return"web";default:return"web"}}function _(e,t){const a=[`name="${N(e)}"`,`href="${j(e.href)}"`,`icon-size="${t}px"`];e.iconUrl&&a.push(`src="${j(e.iconUrl)}"`);const o=e.label??"";return`<mj-social-element ${a.join(" ")}>${z(o)}</mj-social-element>`}function B(e){const{icons:t,iconSize:r,spacing:a,alignment:o,padding:n}=e.values,c=[`icon-size="${r}px"`,`icon-padding="${a}px"`,`align="${o}"`,`padding="${i(n)}"`,'mode="horizontal"'],s=t.map(u=>_(u,r)).join(`
2
- `);return`<mj-social ${c.join(" ")}>
3
- ${s}
4
- </mj-social>`}function j(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function z(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}const D=/<(\s*\/?\s*mj-raw\b[^>]*)>/gi;function O(e){return e.replace(D,"&lt;$1&gt;")}function C(e){const{content:t,padding:r}=e.values,a=i(r),o=O(t);return`<mj-raw><div style="padding: ${a};">${o}</div></mj-raw>`}function A(e){const{content:t,innerPadding:r}=e.values;return`<mj-text ${[`padding="${i(r)}"`].join(" ")}>${t}</mj-text>`}function M(e){const t=e.values,r=[`mode="${t.mode}"`,`height="${t.height}px"`,`vertical-align="${t.verticalAlign}"`,`padding="${i(t.padding)}"`];return t.backgroundUrl&&r.push(`background-width="${t.width}px"`),t.backgroundUrl&&(r.push(`background-url="${I(t.backgroundUrl)}"`),r.push(`background-position="${t.backgroundPosition}"`)),t.backgroundColor&&r.push(`background-color="${t.backgroundColor}"`),` <mj-hero ${r.join(" ")}>
5
- <mj-text padding="${i(t.innerPadding)}">${t.content}</mj-text>
6
- </mj-hero>`}function I(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function E(e){const t=[`href="${U(e.href)}"`];return e.color&&t.push(`color="${e.color}"`),e.fontWeight&&t.push(`font-weight="${e.fontWeight}"`),e.textDecoration&&t.push(`text-decoration="${e.textDecoration}"`),e.padding&&t.push(`padding="${e.padding}"`),`<mj-navbar-link ${t.join(" ")}>${L(e.text)}</mj-navbar-link>`}function S(e){const{links:t,hamburger:r,padding:a}=e.values,o=[`hamburger="${r}"`,`padding="${i(a)}"`],n=t.map(c=>E(c)).join(`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("mjml"),W=require("@lit-pigeon/core");function u(e){return`${e.top}px ${e.right}px ${e.bottom}px ${e.left}px`}function k(e){const{content:t,padding:r,textAlign:a,lineHeight:o,cssClass:n}=e.values,s=[`padding="${u(r)}"`,`align="${a}"`,`line-height="${o}"`];return n&&s.push(`css-class="${q(n)}"`),`<mj-text ${s.join(" ")}>${t}</mj-text>`}function q(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function y(e){const{src:t,alt:r,width:a,href:o,padding:n,alignment:s,borderRadius:c,cssClass:l}=e.values,i=[`src="${g(t)}"`,`alt="${g(r)}"`,`padding="${u(n)}"`,`align="${s}"`];return a!=="auto"&&i.push(`width="${a}px"`),o&&i.push(`href="${g(o)}"`),c!==void 0&&c>0&&i.push(`border-radius="${c}px"`),l&&i.push(`css-class="${g(l)}"`),`<mj-image ${i.join(" ")} />`}function g(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function x(e){const{content:t,href:r,backgroundColor:a,textColor:o,borderRadius:n,padding:s,innerPadding:c,fontSize:l,fontWeight:i,alignment:d,fullWidth:$,cssClass:p}=e.values,f=[`href="${h(r)}"`,`background-color="${a}"`,`color="${o}"`,`border-radius="${n}px"`,`padding="${u(s)}"`,`inner-padding="${u(c)}"`,`font-size="${l}px"`,`font-weight="${i}"`,`align="${d}"`];$&&f.push('width="100%"'),p&&f.push(`css-class="${h(p)}"`);const H=t.replace(/^\s*<p>([\s\S]*?)<\/p>\s*$/i,"$1");return`<mj-button ${f.join(" ")}>${H}</mj-button>`}function h(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function v(e){const{borderColor:t,borderWidth:r,borderStyle:a,padding:o,width:n}=e.values;return`<mj-divider ${[`border-color="${t}"`,`border-width="${r}px"`,`border-style="${a}"`,`padding="${u(o)}"`,`width="${n}"`].join(" ")} />`}function w(e){const{height:t}=e.values;return`<mj-spacer height="${t}px" />`}function N(e){switch(e.type){case"facebook":return"facebook";case"twitter":return"twitter";case"instagram":return"instagram";case"linkedin":return"linkedin";case"youtube":return"youtube";case"tiktok":return"web";case"custom":return"web";default:return"web"}}function z(e,t){const a=[`name="${N(e)}"`,`href="${j(e.href)}"`,`icon-size="${t}px"`];e.iconUrl&&a.push(`src="${j(e.iconUrl)}"`);const o=e.label??"";return`<mj-social-element ${a.join(" ")}>${_(o)}</mj-social-element>`}function B(e){const{icons:t,iconSize:r,spacing:a,alignment:o,padding:n}=e.values,s=[`icon-size="${r}px"`,`icon-padding="${a}px"`,`align="${o}"`,`padding="${u(n)}"`,'mode="horizontal"'],c=t.map(l=>z(l,r)).join(`
2
+ `);return`<mj-social ${s.join(" ")}>
3
+ ${c}
4
+ </mj-social>`}function j(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function _(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}const D=/<(\s*\/?\s*mj-raw\b[^>]*)>/gi;function O(e){return e.replace(D,"&lt;$1&gt;")}function C(e){const{content:t,padding:r}=e.values,a=u(r),o=O(t);return`<mj-raw><div class="lp-html" style="padding: ${a};">${o}</div></mj-raw>`}function A(e){const{content:t,innerPadding:r}=e.values;return`<mj-text ${[`padding="${u(r)}"`].join(" ")}>${t}</mj-text>`}function M(e){const t=e.values,r=[`mode="${t.mode}"`,`height="${t.height}px"`,`vertical-align="${t.verticalAlign}"`,`padding="${u(t.padding)}"`];return t.backgroundUrl&&r.push(`background-width="${t.width}px"`),t.backgroundUrl&&(r.push(`background-url="${I(t.backgroundUrl)}"`),r.push(`background-position="${t.backgroundPosition}"`)),t.backgroundColor&&r.push(`background-color="${t.backgroundColor}"`),` <mj-hero ${r.join(" ")}>
5
+ <mj-text padding="${u(t.innerPadding)}">${t.content}</mj-text>
6
+ </mj-hero>`}function I(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function E(e){const t=[`href="${U(e.href)}"`];return e.color&&t.push(`color="${e.color}"`),e.fontWeight&&t.push(`font-weight="${e.fontWeight}"`),e.textDecoration&&t.push(`text-decoration="${e.textDecoration}"`),e.padding&&t.push(`padding="${e.padding}"`),`<mj-navbar-link ${t.join(" ")}>${L(e.text)}</mj-navbar-link>`}function S(e){const{links:t,hamburger:r,padding:a}=e.values,o=[`hamburger="${r}"`,`padding="${u(a)}"`],n=t.map(s=>E(s)).join(`
7
7
  `);return`<mj-navbar ${o.join(" ")}>
8
8
  ${n}
9
- </mj-navbar>`}function U(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function L(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function P(e){switch(e.type){case"text":return k(e);case"image":return x(e);case"button":return y(e);case"divider":return v(e);case"spacer":return w(e);case"social":return B(e);case"html":return C(e);case"hero":return A(e);case"navbar":return S(e);default:return K(e)}}function K(e){const t=e.type,r=W.getBlockDefinition(t);return r!=null&&r.renderMjml?r.renderMjml(e):`<!-- Unknown block type: ${t} -->`}function F(e,t){const{backgroundColor:r,padding:a,borderRadius:o,verticalAlign:n,cssClass:c}=e.attributes,s=[`width="${t}"`,`padding="${i(a)}"`,`vertical-align="${n}"`];r&&s.push(`background-color="${r}"`),o!==void 0&&o>0&&s.push(`border-radius="${o}px"`),c&&s.push(`css-class="${d(c)}"`);const u=e.blocks.map(l=>` ${P(l)}`).join(`
10
- `);return` <mj-column ${s.join(" ")}>
11
- ${u}
12
- </mj-column>`}function G(e){if(e.columns.length===1&&e.columns[0].blocks.length===1&&e.columns[0].blocks[0].type==="hero")return b(M(e.columns[0].blocks[0]),e.attributes.condition);const{backgroundColor:t,backgroundImage:r,padding:a,fullWidth:o,cssClass:n}=e.attributes,c=[`padding="${i(a)}"`];o&&c.push('full-width="full-width"'),t&&c.push(`background-color="${t}"`),r&&(c.push(`background-url="${d(r)}"`),c.push('background-size="cover"'),c.push('background-repeat="no-repeat"')),n&&c.push(`css-class="${d(n)}"`);const s=e.columnRatios.reduce((l,m)=>l+m,0),u=e.columns.map((l,m)=>{const g=((e.columnRatios[m]??1)/s*100).toFixed(2).replace(/\.?0+$/,"");return F(l,`${g}%`)}).join(`
13
- `);return b(` <mj-section ${c.join(" ")}>
14
- ${u}
9
+ </mj-navbar>`}function U(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function L(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function P(e){switch(e.type){case"text":return k(e);case"image":return y(e);case"button":return x(e);case"divider":return v(e);case"spacer":return w(e);case"social":return B(e);case"html":return C(e);case"hero":return A(e);case"navbar":return S(e);default:return K(e)}}function K(e){const t=e.type,r=W.getBlockDefinition(t);return r!=null&&r.renderMjml?r.renderMjml(e):`<!-- Unknown block type: ${t} -->`}function F(e,t){const{backgroundColor:r,padding:a,borderRadius:o,verticalAlign:n,cssClass:s}=e.attributes,c=[`width="${t}"`,`padding="${u(a)}"`,`vertical-align="${n}"`];r&&c.push(`background-color="${r}"`),o!==void 0&&o>0&&c.push(`border-radius="${o}px"`),s&&c.push(`css-class="${m(s)}"`);const l=e.blocks.map(i=>` ${P(i)}`).join(`
10
+ `);return` <mj-column ${c.join(" ")}>
11
+ ${l}
12
+ </mj-column>`}function G(e){if(e.columns.length===1&&e.columns[0].blocks.length===1&&e.columns[0].blocks[0].type==="hero")return b(M(e.columns[0].blocks[0]),e.attributes.condition);const{backgroundColor:t,backgroundImage:r,padding:a,fullWidth:o,cssClass:n}=e.attributes,s=[`padding="${u(a)}"`];o&&s.push('full-width="full-width"'),t&&s.push(`background-color="${t}"`),r&&(s.push(`background-url="${m(r)}"`),s.push('background-size="cover"'),s.push('background-repeat="no-repeat"')),n&&s.push(`css-class="${m(n)}"`);const c=e.columnRatios.reduce((i,d)=>i+d,0),l=e.columns.map((i,d)=>{const p=((e.columnRatios[d]??1)/c*100).toFixed(2).replace(/\.?0+$/,"");return F(i,`${p}%`)}).join(`
13
+ `);return b(` <mj-section ${s.join(" ")}>
14
+ ${l}
15
15
  </mj-section>`,e.attributes.condition)}function b(e,t){const r=t==null?void 0:t.trim();return r?` <mj-raw>{{#if ${r}}}</mj-raw>
16
16
  ${e}
17
17
  <mj-raw>{{/if}}</mj-raw>`:e}const J=` <mj-raw>
@@ -26,20 +26,22 @@ ${e}
26
26
  <meta name="supported-color-schemes" content="light dark">
27
27
  </mj-raw>`,V=` <mj-style inline="inline">
28
28
  h1, h2, h3, blockquote { margin: 0 0 0.5em; }
29
- </mj-style>`;function X(e){const t=new Set,r=[];for(const a of e){if(!a.url||t.has(a.url))continue;t.add(a.url);const o=a.family.split(",")[0].trim().replace(/^['"]|['"]$/g,""),n=d(a.url),c=d(o);r.push(` <mj-font name="${c}" href="${n}" />`),r.push(` <mj-raw><link rel="stylesheet" href="${n}"></mj-raw>`)}return r.join(`
30
- `)}function Y(e,t){const{fontFamily:r,css:a}=e.body.attributes,o=e.metadata.previewText,n=[];t.outlookWorkarounds&&(n.push(J),n.push(Q),n.push(V));const c=X(t.fonts);return c&&n.push(c),n.push(` <mj-attributes>
31
- <mj-all font-family="${d(r)}" />
29
+ </mj-style>`;function X(e){const t=new Set,r=[];for(const a of e){if(!a.url||t.has(a.url))continue;t.add(a.url);const o=a.family.split(",")[0].trim().replace(/^['"]|['"]$/g,""),n=m(a.url),s=m(o);r.push(` <mj-font name="${s}" href="${n}" />`),r.push(` <mj-raw><link rel="stylesheet" href="${n}"></mj-raw>`)}return r.join(`
30
+ `)}function Y(e,t){const{fontFamily:r,css:a}=e.body.attributes,o=e.metadata.previewText,n=[];t.outlookWorkarounds&&(n.push(J),n.push(Q),n.push(V));const s=X(t.fonts);return s&&n.push(s),n.push(` <mj-attributes>
31
+ <mj-all font-family="${m(r)}" />
32
32
  <mj-text font-size="14px" line-height="1.5" />
33
33
  <mj-button font-size="14px" />
34
- </mj-attributes>`),a&&n.push(` <mj-style>
34
+ </mj-attributes>`),e.body.rows.some(l=>l.columns.some(i=>i.blocks.some(d=>d.type==="html")))&&n.push(` <mj-style inline="inline">
35
+ .lp-html { font-size: 14px; line-height: 1.5; font-family: ${r.replace(/[<>{};]/g,"")}; }
36
+ </mj-style>`),a&&n.push(` <mj-style>
35
37
  ${a.replace(/<\/mj-style/gi,"<\\/mj-style")}
36
38
  </mj-style>`),o&&n.push(` <mj-preview>${Z(o)}</mj-preview>`),` <mj-head>
37
39
  ${n.join(`
38
40
  `)}
39
- </mj-head>`}function T(e,t){const r={outlookWorkarounds:(t==null?void 0:t.outlookWorkarounds)??!0,fonts:(t==null?void 0:t.fonts)??[]},{width:a,backgroundColor:o}=e.body.attributes,n=[`width="${a}px"`];o&&n.push(`background-color="${o}"`);const c=Y(e,r),s=e.body.rows.map(u=>G(u)).join(`
41
+ </mj-head>`}function T(e,t){const r={outlookWorkarounds:(t==null?void 0:t.outlookWorkarounds)??!0,fonts:(t==null?void 0:t.fonts)??[]},{width:a,backgroundColor:o}=e.body.attributes,n=[`width="${a}px"`];o&&n.push(`background-color="${o}"`);const s=Y(e,r),c=e.body.rows.map(l=>G(l)).join(`
40
42
  `);return`<mjml>
41
- ${c}
42
- <mj-body ${n.join(" ")}>
43
43
  ${s}
44
+ <mj-body ${n.join(" ")}>
45
+ ${c}
44
46
  </mj-body>
45
- </mjml>`}function d(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function Z(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}class ee{async render(t,r){const a=T(t,{outlookWorkarounds:r==null?void 0:r.outlookWorkarounds,fonts:r==null?void 0:r.fonts}),o={keepComments:!1};r!=null&&r.minify&&(o.minify=!0),r!=null&&r.beautify&&(o.beautify=!0);try{const n=H(a,o),c=(n.errors||[]).map(s=>({message:s.message,line:s.line,tagName:s.tagName}));return{html:n.html,errors:c}}catch(n){return{html:"",errors:[{message:`MJML compilation failed: ${n instanceof Error?n.message:String(n)}`}]}}}}exports.MjmlRenderer=ee;exports.documentToMjml=T;exports.renderButtonBlock=y;exports.renderDividerBlock=v;exports.renderHeroBlock=A;exports.renderHeroSection=M;exports.renderHtmlBlock=C;exports.renderImageBlock=x;exports.renderNavBarBlock=S;exports.renderSocialBlock=B;exports.renderSpacerBlock=w;exports.renderTextBlock=k;exports.spacingToMjml=i;
47
+ </mjml>`}function m(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function Z(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}class ee{async render(t,r){const a=T(t,{outlookWorkarounds:r==null?void 0:r.outlookWorkarounds,fonts:r==null?void 0:r.fonts}),o={keepComments:!1};r!=null&&r.minify&&(o.minify=!0),r!=null&&r.beautify&&(o.beautify=!0);try{const n=R(a,o),s=(n.errors||[]).map(c=>({message:c.message,line:c.line,tagName:c.tagName}));return{html:n.html,errors:s}}catch(n){return{html:"",errors:[{message:`MJML compilation failed: ${n instanceof Error?n.message:String(n)}`}]}}}}exports.MjmlRenderer=ee;exports.documentToMjml=T;exports.renderButtonBlock=x;exports.renderDividerBlock=v;exports.renderHeroBlock=A;exports.renderHeroSection=M;exports.renderHtmlBlock=C;exports.renderImageBlock=y;exports.renderNavBarBlock=S;exports.renderSocialBlock=B;exports.renderSpacerBlock=w;exports.renderTextBlock=k;exports.spacingToMjml=u;
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
- import x from "mjml";
2
- import { getBlockDefinition as y } from "@lit-pigeon/core";
1
+ import y from "mjml";
2
+ import { getBlockDefinition as x } from "@lit-pigeon/core";
3
3
  function u(e) {
4
4
  return `${e.top}px ${e.right}px ${e.bottom}px ${e.left}px`;
5
5
  }
@@ -37,7 +37,7 @@ function A(e) {
37
37
  innerPadding: c,
38
38
  fontSize: l,
39
39
  fontWeight: i,
40
- alignment: m,
40
+ alignment: d,
41
41
  fullWidth: $,
42
42
  cssClass: p
43
43
  } = e.values, f = [
@@ -49,7 +49,7 @@ function A(e) {
49
49
  `inner-padding="${u(c)}"`,
50
50
  `font-size="${l}px"`,
51
51
  `font-weight="${i}"`,
52
- `align="${m}"`
52
+ `align="${d}"`
53
53
  ];
54
54
  $ && f.push('width="100%"'), p && f.push(`css-class="${h(p)}"`);
55
55
  const k = t.replace(/^\s*<p>([\s\S]*?)<\/p>\s*$/i, "$1");
@@ -100,9 +100,9 @@ function S(e, t) {
100
100
  ];
101
101
  e.iconUrl && a.push(`src="${j(e.iconUrl)}"`);
102
102
  const o = e.label ?? "";
103
- return `<mj-social-element ${a.join(" ")}>${W(o)}</mj-social-element>`;
103
+ return `<mj-social-element ${a.join(" ")}>${T(o)}</mj-social-element>`;
104
104
  }
105
- function T(e) {
105
+ function H(e) {
106
106
  const { icons: t, iconSize: r, spacing: a, alignment: o, padding: n } = e.values, s = [
107
107
  `icon-size="${r}px"`,
108
108
  `icon-padding="${a}px"`,
@@ -118,24 +118,24 @@ function T(e) {
118
118
  function j(e) {
119
119
  return e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
120
120
  }
121
- function W(e) {
121
+ function T(e) {
122
122
  return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
123
123
  }
124
- const H = /<(\s*\/?\s*mj-raw\b[^>]*)>/gi;
124
+ const W = /<(\s*\/?\s*mj-raw\b[^>]*)>/gi;
125
+ function z(e) {
126
+ return e.replace(W, "&lt;$1&gt;");
127
+ }
125
128
  function N(e) {
126
- return e.replace(H, "&lt;$1&gt;");
129
+ const { content: t, padding: r } = e.values, a = u(r), o = z(t);
130
+ return `<mj-raw><div class="lp-html" style="padding: ${a};">${o}</div></mj-raw>`;
127
131
  }
128
132
  function _(e) {
129
- const { content: t, padding: r } = e.values, a = u(r), o = N(t);
130
- return `<mj-raw><div style="padding: ${a};">${o}</div></mj-raw>`;
131
- }
132
- function q(e) {
133
133
  const { content: t, innerPadding: r } = e.values;
134
134
  return `<mj-text ${[
135
135
  `padding="${u(r)}"`
136
136
  ].join(" ")}>${t}</mj-text>`;
137
137
  }
138
- function z(e) {
138
+ function q(e) {
139
139
  const t = e.values, r = [
140
140
  `mode="${t.mode}"`,
141
141
  `height="${t.height}px"`,
@@ -184,11 +184,11 @@ function L(e) {
184
184
  case "spacer":
185
185
  return M(e);
186
186
  case "social":
187
- return T(e);
187
+ return H(e);
188
188
  case "html":
189
- return _(e);
189
+ return N(e);
190
190
  case "hero":
191
- return q(e);
191
+ return _(e);
192
192
  case "navbar":
193
193
  return E(e);
194
194
  default:
@@ -196,7 +196,7 @@ function L(e) {
196
196
  }
197
197
  }
198
198
  function P(e) {
199
- const t = e.type, r = y(t);
199
+ const t = e.type, r = x(t);
200
200
  return r != null && r.renderMjml ? r.renderMjml(e) : `<!-- Unknown block type: ${t} -->`;
201
201
  }
202
202
  function K(e, t) {
@@ -205,7 +205,7 @@ function K(e, t) {
205
205
  `padding="${u(a)}"`,
206
206
  `vertical-align="${n}"`
207
207
  ];
208
- r && c.push(`background-color="${r}"`), o !== void 0 && o > 0 && c.push(`border-radius="${o}px"`), s && c.push(`css-class="${d(s)}"`);
208
+ r && c.push(`background-color="${r}"`), o !== void 0 && o > 0 && c.push(`border-radius="${o}px"`), s && c.push(`css-class="${m(s)}"`);
209
209
  const l = e.blocks.map((i) => ` ${L(i)}`).join(`
210
210
  `);
211
211
  return ` <mj-column ${c.join(" ")}>
@@ -215,15 +215,15 @@ ${l}
215
215
  function F(e) {
216
216
  if (e.columns.length === 1 && e.columns[0].blocks.length === 1 && e.columns[0].blocks[0].type === "hero")
217
217
  return b(
218
- z(e.columns[0].blocks[0]),
218
+ q(e.columns[0].blocks[0]),
219
219
  e.attributes.condition
220
220
  );
221
221
  const { backgroundColor: t, backgroundImage: r, padding: a, fullWidth: o, cssClass: n } = e.attributes, s = [
222
222
  `padding="${u(a)}"`
223
223
  ];
224
- o && s.push('full-width="full-width"'), t && s.push(`background-color="${t}"`), r && (s.push(`background-url="${d(r)}"`), s.push('background-size="cover"'), s.push('background-repeat="no-repeat"')), n && s.push(`css-class="${d(n)}"`);
225
- const c = e.columnRatios.reduce((i, m) => i + m, 0), l = e.columns.map((i, m) => {
226
- const p = ((e.columnRatios[m] ?? 1) / c * 100).toFixed(2).replace(/\.?0+$/, "");
224
+ o && s.push('full-width="full-width"'), t && s.push(`background-color="${t}"`), r && (s.push(`background-url="${m(r)}"`), s.push('background-size="cover"'), s.push('background-repeat="no-repeat"')), n && s.push(`css-class="${m(n)}"`);
225
+ const c = e.columnRatios.reduce((i, d) => i + d, 0), l = e.columns.map((i, d) => {
226
+ const p = ((e.columnRatios[d] ?? 1) / c * 100).toFixed(2).replace(/\.?0+$/, "");
227
227
  return K(i, `${p}%`);
228
228
  }).join(`
229
229
  `);
@@ -258,7 +258,7 @@ function V(e) {
258
258
  for (const a of e) {
259
259
  if (!a.url || t.has(a.url)) continue;
260
260
  t.add(a.url);
261
- const o = a.family.split(",")[0].trim().replace(/^['"]|['"]$/g, ""), n = d(a.url), s = d(o);
261
+ const o = a.family.split(",")[0].trim().replace(/^['"]|['"]$/g, ""), n = m(a.url), s = m(o);
262
262
  r.push(` <mj-font name="${s}" href="${n}" />`), r.push(` <mj-raw><link rel="stylesheet" href="${n}"></mj-raw>`);
263
263
  }
264
264
  return r.join(`
@@ -269,10 +269,12 @@ function X(e, t) {
269
269
  t.outlookWorkarounds && (n.push(G), n.push(J), n.push(Q));
270
270
  const s = V(t.fonts);
271
271
  return s && n.push(s), n.push(` <mj-attributes>
272
- <mj-all font-family="${d(r)}" />
272
+ <mj-all font-family="${m(r)}" />
273
273
  <mj-text font-size="14px" line-height="1.5" />
274
274
  <mj-button font-size="14px" />
275
- </mj-attributes>`), a && n.push(` <mj-style>
275
+ </mj-attributes>`), e.body.rows.some((l) => l.columns.some((i) => i.blocks.some((d) => d.type === "html"))) && n.push(` <mj-style inline="inline">
276
+ .lp-html { font-size: 14px; line-height: 1.5; font-family: ${r.replace(/[<>{};]/g, "")}; }
277
+ </mj-style>`), a && n.push(` <mj-style>
276
278
  ${a.replace(/<\/mj-style/gi, "<\\/mj-style")}
277
279
  </mj-style>`), o && n.push(` <mj-preview>${Z(o)}</mj-preview>`), ` <mj-head>
278
280
  ${n.join(`
@@ -296,7 +298,7 @@ ${c}
296
298
  </mj-body>
297
299
  </mjml>`;
298
300
  }
299
- function d(e) {
301
+ function m(e) {
300
302
  return e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
301
303
  }
302
304
  function Z(e) {
@@ -320,7 +322,7 @@ class re {
320
322
  };
321
323
  r != null && r.minify && (o.minify = !0), r != null && r.beautify && (o.beautify = !0);
322
324
  try {
323
- const n = x(a, o), s = (n.errors || []).map((c) => ({
325
+ const n = y(a, o), s = (n.errors || []).map((c) => ({
324
326
  message: c.message,
325
327
  line: c.line,
326
328
  tagName: c.tagName
@@ -342,12 +344,12 @@ export {
342
344
  Y as documentToMjml,
343
345
  A as renderButtonBlock,
344
346
  B as renderDividerBlock,
345
- q as renderHeroBlock,
346
- z as renderHeroSection,
347
- _ as renderHtmlBlock,
347
+ _ as renderHeroBlock,
348
+ q as renderHeroSection,
349
+ N as renderHtmlBlock,
348
350
  C as renderImageBlock,
349
351
  E as renderNavBarBlock,
350
- T as renderSocialBlock,
352
+ H as renderSocialBlock,
351
353
  M as renderSpacerBlock,
352
354
  w as renderTextBlock,
353
355
  u as spacingToMjml
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lit-pigeon/renderer-mjml",
3
- "version": "0.2.4",
3
+ "version": "0.2.5",
4
4
  "description": "MJML-based HTML renderer for Pigeon email editor",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",