@lit-pigeon/renderer-mjml 0.1.2 → 0.2.0

package/dist/index.cjs

@@ -1,42 +1,43 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("mjml"),T=require("@lit-pigeon/core");function u(e){return`${e.top}px ${e.right}px ${e.bottom}px ${e.left}px`}function h(e){const{content:t,padding:r,textAlign:o,lineHeight:n}=e.values;return`<mj-text ${[`padding="${u(r)}"`,`align="${o}"`,`line-height="${n}"`].join(" ")}>${t}</mj-text>`}function j(e){const{src:t,alt:r,width:o,href:n,padding:a,alignment:c,borderRadius:i}=e.values,s=[`src="${m(t)}"`,`alt="${m(r)}"`,`padding="${u(a)}"`,`align="${c}"`];return o!=="auto"&&s.push(`width="${o}px"`),n&&s.push(`href="${m(n)}"`),i!==void 0&&i>0&&s.push(`border-radius="${i}px"`),`<mj-image ${s.join(" ")} />`}function m(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function b(e){const{content:t,href:r,backgroundColor:o,textColor:n,borderRadius:a,padding:c,innerPadding:i,fontSize:s,fontWeight:l,alignment:g,fullWidth:d}=e.values,p=[`href="${H(r)}"`,`background-color="${o}"`,`color="${n}"`,`border-radius="${a}px"`,`padding="${u(c)}"`,`inner-padding="${u(i)}"`,`font-size="${s}px"`,`font-weight="${l}"`,`align="${g}"`];d&&p.push('width="100%"');const S=t.replace(/^\s*<p>([\s\S]*?)<\/p>\s*$/i,"$1");return`<mj-button ${p.join(" ")}>${S}</mj-button>`}function H(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function k(e){const{borderColor:t,borderWidth:r,borderStyle:o,padding:n,width:a}=e.values;return`<mj-divider ${[`border-color="${t}"`,`border-width="${r}px"`,`border-style="${o}"`,`padding="${u(n)}"`,`width="${a}"`].join(" ")} />`}function x(e){const{height:t}=e.values;return`<mj-spacer height="${t}px" />`}function W(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 q(e,t){const o=[`name="${W(e)}"`,`href="${$(e.href)}"`,`icon-size="${t}px"`];e.iconUrl&&o.push(`src="${$(e.iconUrl)}"`);const n=e.label??"";return`<mj-social-element ${o.join(" ")}>${N(n)}</mj-social-element>`}function v(e){const{icons:t,iconSize:r,spacing:o,alignment:n,padding:a}=e.values,c=[`icon-size="${r}px"`,`icon-padding="${o}px"`,`align="${n}"`,`padding="${u(a)}"`,'mode="horizontal"'],i=t.map(s=>q(s,r)).join(`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("mjml"),R=require("@lit-pigeon/core");function u(e){return`${e.top}px ${e.right}px ${e.bottom}px ${e.left}px`}function j(e){const{content:t,padding:r,textAlign:a,lineHeight:n}=e.values;return`<mj-text ${[`padding="${u(r)}"`,`align="${a}"`,`line-height="${n}"`].join(" ")}>${t}</mj-text>`}function b(e){const{src:t,alt:r,width:a,href:n,padding:o,alignment:c,borderRadius:i}=e.values,s=[`src="${g(t)}"`,`alt="${g(r)}"`,`padding="${u(o)}"`,`align="${c}"`];return a!=="auto"&&s.push(`width="${a}px"`),n&&s.push(`href="${g(n)}"`),i!==void 0&&i>0&&s.push(`border-radius="${i}px"`),`<mj-image ${s.join(" ")} />`}function g(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function k(e){const{content:t,href:r,backgroundColor:a,textColor:n,borderRadius:o,padding:c,innerPadding:i,fontSize:s,fontWeight:l,alignment:p,fullWidth:m}=e.values,f=[`href="${H(r)}"`,`background-color="${a}"`,`color="${n}"`,`border-radius="${o}px"`,`padding="${u(c)}"`,`inner-padding="${u(i)}"`,`font-size="${s}px"`,`font-weight="${l}"`,`align="${p}"`];m&&f.push('width="100%"');const C=t.replace(/^\s*<p>([\s\S]*?)<\/p>\s*$/i,"$1");return`<mj-button ${f.join(" ")}>${C}</mj-button>`}function H(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function x(e){const{borderColor:t,borderWidth:r,borderStyle:a,padding:n,width:o}=e.values;return`<mj-divider ${[`border-color="${t}"`,`border-width="${r}px"`,`border-style="${a}"`,`padding="${u(n)}"`,`width="${o}"`].join(" ")} />`}function v(e){const{height:t}=e.values;return`<mj-spacer height="${t}px" />`}function W(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 N(e,t){const a=[`name="${W(e)}"`,`href="${$(e.href)}"`,`icon-size="${t}px"`];e.iconUrl&&a.push(`src="${$(e.iconUrl)}"`);const n=e.label??"";return`<mj-social-element ${a.join(" ")}>${q(n)}</mj-social-element>`}function w(e){const{icons:t,iconSize:r,spacing:a,alignment:n,padding:o}=e.values,c=[`icon-size="${r}px"`,`icon-padding="${a}px"`,`align="${n}"`,`padding="${u(o)}"`,'mode="horizontal"'],i=t.map(s=>N(s,r)).join(`
     `);return`<mj-social ${c.join(" ")}>
     ${i}
-  </mj-social>`}function $(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function N(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}const _=/<(\s*\/?\s*mj-raw\b[^>]*)>/gi;function z(e){return e.replace(_,"&lt;$1&gt;")}function w(e){const{content:t,padding:r}=e.values,o=u(r),n=z(t);return`<mj-raw><div style="padding: ${o};">${n}</div></mj-raw>`}function y(e){const{content:t,innerPadding:r}=e.values;return`<mj-text ${[`padding="${u(r)}"`].join(" ")}>${t}</mj-text>`}function B(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="${D(t.backgroundUrl)}"`),r.push(`background-position="${t.backgroundPosition}"`)),t.backgroundColor&&r.push(`background-color="${t.backgroundColor}"`),`  <mj-hero ${r.join(" ")}>
+  </mj-social>`}function $(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function q(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}const _=/<(\s*\/?\s*mj-raw\b[^>]*)>/gi;function z(e){return e.replace(_,"&lt;$1&gt;")}function y(e){const{content:t,padding:r}=e.values,a=u(r),n=z(t);return`<mj-raw><div style="padding: ${a};">${n}</div></mj-raw>`}function B(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="${D(t.backgroundUrl)}"`),r.push(`background-position="${t.backgroundPosition}"`)),t.backgroundColor&&r.push(`background-color="${t.backgroundColor}"`),`  <mj-hero ${r.join(" ")}>
       <mj-text padding="${u(t.innerPadding)}">${t.content}</mj-text>
-  </mj-hero>`}function D(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function O(e){const t=[`href="${I(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(" ")}>${E(e.text)}</mj-navbar-link>`}function M(e){const{links:t,hamburger:r,padding:o}=e.values,n=[`hamburger="${r}"`,`padding="${u(o)}"`],a=t.map(c=>O(c)).join(`
+  </mj-hero>`}function D(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function O(e){const t=[`href="${I(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(" ")}>${E(e.text)}</mj-navbar-link>`}function A(e){const{links:t,hamburger:r,padding:a}=e.values,n=[`hamburger="${r}"`,`padding="${u(a)}"`],o=t.map(c=>O(c)).join(`
     `);return`<mj-navbar ${n.join(" ")}>
-    ${a}
-  </mj-navbar>`}function I(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function E(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function L(e){switch(e.type){case"text":return h(e);case"image":return j(e);case"button":return b(e);case"divider":return k(e);case"spacer":return x(e);case"social":return v(e);case"html":return w(e);case"hero":return y(e);case"navbar":return M(e);default:return P(e)}}function P(e){const t=e.type,r=T.getBlockDefinition(t);return r!=null&&r.renderMjml?r.renderMjml(e):`<!-- Unknown block type: ${t} -->`}function U(e,t){const{backgroundColor:r,padding:o,borderRadius:n,verticalAlign:a}=e.attributes,c=[`width="${t}"`,`padding="${u(o)}"`,`vertical-align="${a}"`];r&&c.push(`background-color="${r}"`),n!==void 0&&n>0&&c.push(`border-radius="${n}px"`);const i=e.blocks.map(s=>`      ${L(s)}`).join(`
+    ${o}
+  </mj-navbar>`}function I(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function E(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function U(e){switch(e.type){case"text":return j(e);case"image":return b(e);case"button":return k(e);case"divider":return x(e);case"spacer":return v(e);case"social":return w(e);case"html":return y(e);case"hero":return B(e);case"navbar":return A(e);default:return L(e)}}function L(e){const t=e.type,r=R.getBlockDefinition(t);return r!=null&&r.renderMjml?r.renderMjml(e):`<!-- Unknown block type: ${t} -->`}function P(e,t){const{backgroundColor:r,padding:a,borderRadius:n,verticalAlign:o}=e.attributes,c=[`width="${t}"`,`padding="${u(a)}"`,`vertical-align="${o}"`];r&&c.push(`background-color="${r}"`),n!==void 0&&n>0&&c.push(`border-radius="${n}px"`);const i=e.blocks.map(s=>`      ${U(s)}`).join(`
 `);return`    <mj-column ${c.join(" ")}>
 ${i}
-    </mj-column>`}function K(e){if(e.columns.length===1&&e.columns[0].blocks.length===1&&e.columns[0].blocks[0].type==="hero")return f(B(e.columns[0].blocks[0]),e.attributes.condition);const{backgroundColor:t,backgroundImage:r,padding:o,fullWidth:n}=e.attributes,a=[`padding="${u(o)}"`];n&&a.push('full-width="full-width"'),t&&a.push(`background-color="${t}"`),r&&(a.push(`background-url="${C(r)}"`),a.push('background-size="cover"'),a.push('background-repeat="no-repeat"'));const c=e.columnRatios.reduce((s,l)=>s+l,0),i=e.columns.map((s,l)=>{const d=((e.columnRatios[l]??1)/c*100).toFixed(2).replace(/\.?0+$/,"");return U(s,`${d}%`)}).join(`
-`);return f(`  <mj-section ${a.join(" ")}>
+    </mj-column>`}function K(e){if(e.columns.length===1&&e.columns[0].blocks.length===1&&e.columns[0].blocks[0].type==="hero")return h(M(e.columns[0].blocks[0]),e.attributes.condition);const{backgroundColor:t,backgroundImage:r,padding:a,fullWidth:n}=e.attributes,o=[`padding="${u(a)}"`];n&&o.push('full-width="full-width"'),t&&o.push(`background-color="${t}"`),r&&(o.push(`background-url="${d(r)}"`),o.push('background-size="cover"'),o.push('background-repeat="no-repeat"'));const c=e.columnRatios.reduce((s,l)=>s+l,0),i=e.columns.map((s,l)=>{const m=((e.columnRatios[l]??1)/c*100).toFixed(2).replace(/\.?0+$/,"");return P(s,`${m}%`)}).join(`
+`);return h(`  <mj-section ${o.join(" ")}>
 ${i}
-  </mj-section>`,e.attributes.condition)}function f(e,t){const r=t==null?void 0:t.trim();return r?`  <mj-raw>{{#if ${r}}}</mj-raw>
+  </mj-section>`,e.attributes.condition)}function h(e,t){const r=t==null?void 0:t.trim();return r?`  <mj-raw>{{#if ${r}}}</mj-raw>
 ${e}
-  <mj-raw>{{/if}}</mj-raw>`:e}const G=`    <mj-raw>
+  <mj-raw>{{/if}}</mj-raw>`:e}const F=`    <mj-raw>
       <!--[if mso]>
       <style>
         body, table, td { font-family: Arial, Helvetica, sans-serif !important; }
         blockquote { margin: 0 0 16px !important; }
       </style>
       <![endif]-->
-    </mj-raw>`,F=`    <mj-raw>
+    </mj-raw>`,G=`    <mj-raw>
       <meta name="color-scheme" content="light dark">
       <meta name="supported-color-schemes" content="light dark">
     </mj-raw>`,J=`    <mj-style inline="inline">
       h1, h2, h3, blockquote { margin: 0 0 0.5em; }
-    </mj-style>`;function Q(e,t){const{fontFamily:r}=e.body.attributes,o=e.metadata.previewText,n=[];return t.outlookWorkarounds&&(n.push(G),n.push(F),n.push(J)),n.push(`    <mj-attributes>
-      <mj-all font-family="${C(r)}" />
+    </mj-style>`;function Q(e){const t=new Set,r=[];for(const a of e){if(!a.url||t.has(a.url))continue;t.add(a.url);const n=a.family.split(",")[0].trim().replace(/^['"]|['"]$/g,""),o=d(a.url),c=d(n);r.push(`    <mj-font name="${c}" href="${o}" />`),r.push(`    <mj-raw><link rel="stylesheet" href="${o}"></mj-raw>`)}return r.join(`
+`)}function V(e,t){const{fontFamily:r}=e.body.attributes,a=e.metadata.previewText,n=[];t.outlookWorkarounds&&(n.push(F),n.push(G),n.push(J));const o=Q(t.fonts);return o&&n.push(o),n.push(`    <mj-attributes>
+      <mj-all font-family="${d(r)}" />
       <mj-text font-size="14px" line-height="1.5" />
       <mj-button font-size="14px" />
-    </mj-attributes>`),o&&n.push(`    <mj-preview>${V(o)}</mj-preview>`),`  <mj-head>
+    </mj-attributes>`),a&&n.push(`    <mj-preview>${X(a)}</mj-preview>`),`  <mj-head>
 ${n.join(`
 `)}
-  </mj-head>`}function A(e,t){const r={outlookWorkarounds:(t==null?void 0:t.outlookWorkarounds)??!0},{width:o,backgroundColor:n}=e.body.attributes,a=[`width="${o}px"`];n&&a.push(`background-color="${n}"`);const c=Q(e,r),i=e.body.rows.map(s=>K(s)).join(`
+  </mj-head>`}function S(e,t){const r={outlookWorkarounds:(t==null?void 0:t.outlookWorkarounds)??!0,fonts:(t==null?void 0:t.fonts)??[]},{width:a,backgroundColor:n}=e.body.attributes,o=[`width="${a}px"`];n&&o.push(`background-color="${n}"`);const c=V(e,r),i=e.body.rows.map(s=>K(s)).join(`
 `);return`<mjml>
 ${c}
-  <mj-body ${a.join(" ")}>
+  <mj-body ${o.join(" ")}>
 ${i}
   </mj-body>
-</mjml>`}function C(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function V(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}class X{async render(t,r){const o=A(t,{outlookWorkarounds:r==null?void 0:r.outlookWorkarounds}),n={keepComments:!1};r!=null&&r.minify&&(n.minify=!0),r!=null&&r.beautify&&(n.beautify=!0);try{const a=R(o,n),c=(a.errors||[]).map(i=>({message:i.message,line:i.line,tagName:i.tagName}));return{html:a.html,errors:c}}catch(a){return{html:"",errors:[{message:`MJML compilation failed: ${a instanceof Error?a.message:String(a)}`}]}}}}exports.MjmlRenderer=X;exports.documentToMjml=A;exports.renderButtonBlock=b;exports.renderDividerBlock=k;exports.renderHeroBlock=y;exports.renderHeroSection=B;exports.renderHtmlBlock=w;exports.renderImageBlock=j;exports.renderNavBarBlock=M;exports.renderSocialBlock=v;exports.renderSpacerBlock=x;exports.renderTextBlock=h;exports.spacingToMjml=u;
+</mjml>`}function d(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function X(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}class Y{async render(t,r){const a=S(t,{outlookWorkarounds:r==null?void 0:r.outlookWorkarounds,fonts:r==null?void 0:r.fonts}),n={keepComments:!1};r!=null&&r.minify&&(n.minify=!0),r!=null&&r.beautify&&(n.beautify=!0);try{const o=T(a,n),c=(o.errors||[]).map(i=>({message:i.message,line:i.line,tagName:i.tagName}));return{html:o.html,errors:c}}catch(o){return{html:"",errors:[{message:`MJML compilation failed: ${o instanceof Error?o.message:String(o)}`}]}}}}exports.MjmlRenderer=Y;exports.documentToMjml=S;exports.renderButtonBlock=k;exports.renderDividerBlock=x;exports.renderHeroBlock=B;exports.renderHeroSection=M;exports.renderHtmlBlock=y;exports.renderImageBlock=b;exports.renderNavBarBlock=A;exports.renderSocialBlock=w;exports.renderSpacerBlock=v;exports.renderTextBlock=j;exports.spacingToMjml=u;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { ButtonBlock } from '@lit-pigeon/core';
 import { DividerBlock } from '@lit-pigeon/core';
+import { FontDefinition } from '@lit-pigeon/core';
 import { HeroBlock } from '@lit-pigeon/core';
 import { HtmlBlock } from '@lit-pigeon/core';
 import { ImageBlock } from '@lit-pigeon/core';
@@ -41,6 +42,11 @@ declare interface DocumentToMjmlOptions {
      * `[if mso]` conditional block.
      */
     outlookWorkarounds?: boolean;
+    /**
+     * Web fonts to emit as `<mj-font>` in the head. Each font with a `url`
+     * produces one stylesheet link (deduped by url); URL-less fonts are skipped.
+     */
+    fonts?: FontDefinition[];
 }
 
 /**

package/dist/index.js

@@ -11,45 +11,45 @@ function x(e) {
     `line-height="${n}"`
   ].join(" ")}>${t}</mj-text>`;
 }
-function v(e) {
-  const { src: t, alt: r, width: a, href: n, padding: o, alignment: i, borderRadius: c } = e.values, s = [
-    `src="${m(t)}"`,
-    `alt="${m(r)}"`,
+function w(e) {
+  const { src: t, alt: r, width: a, href: n, padding: o, alignment: c, borderRadius: i } = e.values, s = [
+    `src="${g(t)}"`,
+    `alt="${g(r)}"`,
     `padding="${u(o)}"`,
-    `align="${i}"`
+    `align="${c}"`
   ];
-  return a !== "auto" && s.push(`width="${a}px"`), n && s.push(`href="${m(n)}"`), c !== void 0 && c > 0 && s.push(`border-radius="${c}px"`), `<mj-image ${s.join(" ")} />`;
+  return a !== "auto" && s.push(`width="${a}px"`), n && s.push(`href="${g(n)}"`), i !== void 0 && i > 0 && s.push(`border-radius="${i}px"`), `<mj-image ${s.join(" ")} />`;
 }
-function m(e) {
+function g(e) {
   return e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function w(e) {
+function v(e) {
   const {
     content: t,
     href: r,
     backgroundColor: a,
     textColor: n,
     borderRadius: o,
-    padding: i,
-    innerPadding: c,
+    padding: c,
+    innerPadding: i,
     fontSize: s,
     fontWeight: l,
     alignment: p,
-    fullWidth: d
-  } = e.values, g = [
+    fullWidth: m
+  } = e.values, f = [
     `href="${y(r)}"`,
     `background-color="${a}"`,
     `color="${n}"`,
     `border-radius="${o}px"`,
-    `padding="${u(i)}"`,
-    `inner-padding="${u(c)}"`,
+    `padding="${u(c)}"`,
+    `inner-padding="${u(i)}"`,
     `font-size="${s}px"`,
     `font-weight="${l}"`,
     `align="${p}"`
   ];
-  d && g.push('width="100%"');
+  m && f.push('width="100%"');
   const j = t.replace(/^\s*<p>([\s\S]*?)<\/p>\s*$/i, "$1");
-  return `<mj-button ${g.join(" ")}>${j}</mj-button>`;
+  return `<mj-button ${f.join(" ")}>${j}</mj-button>`;
 }
 function y(e) {
   return e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -99,16 +99,16 @@ function M(e, t) {
   return `<mj-social-element ${a.join(" ")}>${S(n)}</mj-social-element>`;
 }
 function R(e) {
-  const { icons: t, iconSize: r, spacing: a, alignment: n, padding: o } = e.values, i = [
+  const { icons: t, iconSize: r, spacing: a, alignment: n, padding: o } = e.values, c = [
     `icon-size="${r}px"`,
     `icon-padding="${a}px"`,
     `align="${n}"`,
     `padding="${u(o)}"`,
     'mode="horizontal"'
-  ], c = t.map((s) => M(s, r)).join(`
+  ], i = t.map((s) => M(s, r)).join(`
     `);
-  return `<mj-social ${i.join(" ")}>
-    ${c}
+  return `<mj-social ${c.join(" ")}>
+    ${i}
   </mj-social>`;
 }
 function $(e) {
@@ -117,32 +117,32 @@ function $(e) {
 function S(e) {
   return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-const W = /<(\s*\/?\s*mj-raw\b[^>]*)>/gi;
-function H(e) {
-  return e.replace(W, "&lt;$1&gt;");
+const T = /<(\s*\/?\s*mj-raw\b[^>]*)>/gi;
+function W(e) {
+  return e.replace(T, "&lt;$1&gt;");
 }
-function T(e) {
-  const { content: t, padding: r } = e.values, a = u(r), n = H(t);
+function H(e) {
+  const { content: t, padding: r } = e.values, a = u(r), n = W(t);
   return `<mj-raw><div style="padding: ${a};">${n}</div></mj-raw>`;
 }
-function _(e) {
+function N(e) {
   const { content: t, innerPadding: r } = e.values;
   return `<mj-text ${[
     `padding="${u(r)}"`
   ].join(" ")}>${t}</mj-text>`;
 }
-function z(e) {
+function _(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="${N(t.backgroundUrl)}"`), r.push(`background-position="${t.backgroundPosition}"`)), t.backgroundColor && r.push(`background-color="${t.backgroundColor}"`), `  <mj-hero ${r.join(" ")}>
+  return t.backgroundUrl && r.push(`background-width="${t.width}px"`), t.backgroundUrl && (r.push(`background-url="${z(t.backgroundUrl)}"`), r.push(`background-position="${t.backgroundPosition}"`)), t.backgroundColor && r.push(`background-color="${t.backgroundColor}"`), `  <mj-hero ${r.join(" ")}>
       <mj-text padding="${u(t.innerPadding)}">${t.content}</mj-text>
   </mj-hero>`;
 }
-function N(e) {
+function z(e) {
   return e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 function q(e) {
@@ -155,7 +155,7 @@ function D(e) {
   const { links: t, hamburger: r, padding: a } = e.values, n = [
     `hamburger="${r}"`,
     `padding="${u(a)}"`
-  ], o = t.map((i) => q(i)).join(`
+  ], o = t.map((c) => q(c)).join(`
     `);
   return `<mj-navbar ${n.join(" ")}>
     ${o}
@@ -172,9 +172,9 @@ function I(e) {
     case "text":
       return x(e);
     case "image":
-      return v(e);
-    case "button":
       return w(e);
+    case "button":
+      return v(e);
     case "divider":
       return A(e);
     case "spacer":
@@ -182,55 +182,55 @@ function I(e) {
     case "social":
       return R(e);
     case "html":
-      return T(e);
+      return H(e);
     case "hero":
-      return _(e);
+      return N(e);
     case "navbar":
       return D(e);
     default:
-      return L(e);
+      return U(e);
   }
 }
-function L(e) {
+function U(e) {
   const t = e.type, r = k(t);
   return r != null && r.renderMjml ? r.renderMjml(e) : `<!-- Unknown block type: ${t} -->`;
 }
-function U(e, t) {
-  const { backgroundColor: r, padding: a, borderRadius: n, verticalAlign: o } = e.attributes, i = [
+function L(e, t) {
+  const { backgroundColor: r, padding: a, borderRadius: n, verticalAlign: o } = e.attributes, c = [
     `width="${t}"`,
     `padding="${u(a)}"`,
     `vertical-align="${o}"`
   ];
-  r && i.push(`background-color="${r}"`), n !== void 0 && n > 0 && i.push(`border-radius="${n}px"`);
-  const c = e.blocks.map((s) => `      ${I(s)}`).join(`
+  r && c.push(`background-color="${r}"`), n !== void 0 && n > 0 && c.push(`border-radius="${n}px"`);
+  const i = e.blocks.map((s) => `      ${I(s)}`).join(`
 `);
-  return `    <mj-column ${i.join(" ")}>
-${c}
+  return `    <mj-column ${c.join(" ")}>
+${i}
     </mj-column>`;
 }
 function P(e) {
   if (e.columns.length === 1 && e.columns[0].blocks.length === 1 && e.columns[0].blocks[0].type === "hero")
-    return f(
-      z(e.columns[0].blocks[0]),
+    return h(
+      _(e.columns[0].blocks[0]),
       e.attributes.condition
     );
   const { backgroundColor: t, backgroundImage: r, padding: a, fullWidth: n } = e.attributes, o = [
     `padding="${u(a)}"`
   ];
-  n && o.push('full-width="full-width"'), t && o.push(`background-color="${t}"`), r && (o.push(`background-url="${h(r)}"`), o.push('background-size="cover"'), o.push('background-repeat="no-repeat"'));
-  const i = e.columnRatios.reduce((s, l) => s + l, 0), c = e.columns.map((s, l) => {
-    const d = ((e.columnRatios[l] ?? 1) / i * 100).toFixed(2).replace(/\.?0+$/, "");
-    return U(s, `${d}%`);
+  n && o.push('full-width="full-width"'), t && o.push(`background-color="${t}"`), r && (o.push(`background-url="${d(r)}"`), o.push('background-size="cover"'), o.push('background-repeat="no-repeat"'));
+  const c = e.columnRatios.reduce((s, l) => s + l, 0), i = e.columns.map((s, l) => {
+    const m = ((e.columnRatios[l] ?? 1) / c * 100).toFixed(2).replace(/\.?0+$/, "");
+    return L(s, `${m}%`);
   }).join(`
 `);
-  return f(
+  return h(
     `  <mj-section ${o.join(" ")}>
-${c}
+${i}
   </mj-section>`,
     e.attributes.condition
   );
 }
-function f(e, t) {
+function h(e, t) {
   const r = t == null ? void 0 : t.trim();
   return r ? `  <mj-raw>{{#if ${r}}}</mj-raw>
 ${e}
@@ -243,46 +243,60 @@ const K = `    <mj-raw>
         blockquote { margin: 0 0 16px !important; }
       </style>
       <![endif]-->
-    </mj-raw>`, G = `    <mj-raw>
+    </mj-raw>`, F = `    <mj-raw>
       <meta name="color-scheme" content="light dark">
       <meta name="supported-color-schemes" content="light dark">
-    </mj-raw>`, F = `    <mj-style inline="inline">
+    </mj-raw>`, G = `    <mj-style inline="inline">
       h1, h2, h3, blockquote { margin: 0 0 0.5em; }
     </mj-style>`;
-function J(e, t) {
+function J(e) {
+  const t = /* @__PURE__ */ new Set(), r = [];
+  for (const a of e) {
+    if (!a.url || t.has(a.url)) continue;
+    t.add(a.url);
+    const n = a.family.split(",")[0].trim().replace(/^['"]|['"]$/g, ""), o = d(a.url), c = d(n);
+    r.push(`    <mj-font name="${c}" href="${o}" />`), r.push(`    <mj-raw><link rel="stylesheet" href="${o}"></mj-raw>`);
+  }
+  return r.join(`
+`);
+}
+function Q(e, t) {
   const { fontFamily: r } = e.body.attributes, a = e.metadata.previewText, n = [];
-  return t.outlookWorkarounds && (n.push(K), n.push(G), n.push(F)), n.push(`    <mj-attributes>
-      <mj-all font-family="${h(r)}" />
+  t.outlookWorkarounds && (n.push(K), n.push(F), n.push(G));
+  const o = J(t.fonts);
+  return o && n.push(o), n.push(`    <mj-attributes>
+      <mj-all font-family="${d(r)}" />
       <mj-text font-size="14px" line-height="1.5" />
       <mj-button font-size="14px" />
-    </mj-attributes>`), a && n.push(`    <mj-preview>${V(a)}</mj-preview>`), `  <mj-head>
+    </mj-attributes>`), a && n.push(`    <mj-preview>${X(a)}</mj-preview>`), `  <mj-head>
 ${n.join(`
 `)}
   </mj-head>`;
 }
-function Q(e, t) {
+function V(e, t) {
   const r = {
-    outlookWorkarounds: (t == null ? void 0 : t.outlookWorkarounds) ?? !0
+    outlookWorkarounds: (t == null ? void 0 : t.outlookWorkarounds) ?? !0,
+    fonts: (t == null ? void 0 : t.fonts) ?? []
   }, { width: a, backgroundColor: n } = e.body.attributes, o = [
     `width="${a}px"`
   ];
   n && o.push(`background-color="${n}"`);
-  const i = J(e, r), c = e.body.rows.map((s) => P(s)).join(`
+  const c = Q(e, r), i = e.body.rows.map((s) => P(s)).join(`
 `);
   return `<mjml>
-${i}
-  <mj-body ${o.join(" ")}>
 ${c}
+  <mj-body ${o.join(" ")}>
+${i}
   </mj-body>
 </mjml>`;
 }
-function h(e) {
+function d(e) {
   return e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function V(e) {
+function X(e) {
   return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-class Z {
+class ee {
   /**
    * Renders a PigeonDocument to HTML using MJML as the compilation backend.
    *
@@ -291,22 +305,23 @@ class Z {
    * @returns A promise resolving to the rendered HTML and any errors
    */
   async render(t, r) {
-    const a = Q(t, {
-      outlookWorkarounds: r == null ? void 0 : r.outlookWorkarounds
+    const a = V(t, {
+      outlookWorkarounds: r == null ? void 0 : r.outlookWorkarounds,
+      fonts: r == null ? void 0 : r.fonts
     }), n = {
       // By default MJML inlines CSS; respect the option if provided
       keepComments: !1
     };
     r != null && r.minify && (n.minify = !0), r != null && r.beautify && (n.beautify = !0);
     try {
-      const o = b(a, n), i = (o.errors || []).map((c) => ({
-        message: c.message,
-        line: c.line,
-        tagName: c.tagName
+      const o = b(a, n), c = (o.errors || []).map((i) => ({
+        message: i.message,
+        line: i.line,
+        tagName: i.tagName
       }));
       return {
         html: o.html,
-        errors: i
+        errors: c
       };
     } catch (o) {
       return {
@@ -317,14 +332,14 @@ class Z {
   }
 }
 export {
-  Z as MjmlRenderer,
-  Q as documentToMjml,
-  w as renderButtonBlock,
+  ee as MjmlRenderer,
+  V as documentToMjml,
+  v as renderButtonBlock,
   A as renderDividerBlock,
-  _ as renderHeroBlock,
-  z as renderHeroSection,
-  T as renderHtmlBlock,
-  v as renderImageBlock,
+  N as renderHeroBlock,
+  _ as renderHeroSection,
+  H as renderHtmlBlock,
+  w as renderImageBlock,
   D as renderNavBarBlock,
   R as renderSocialBlock,
   B as renderSpacerBlock,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lit-pigeon/renderer-mjml",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "MJML-based HTML renderer for Pigeon email editor",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -18,7 +18,7 @@
   ],
   "dependencies": {
     "mjml": "^4.15.0",
-    "@lit-pigeon/core": "^0.1.2"
+    "@lit-pigeon/core": "^0.2.0"
   },
   "devDependencies": {
     "@types/mjml": "^4.7.0",