@cymbal/atoms-email-renderer 0.2.2 → 0.2.3

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.
Files changed (3) hide show
  1. package/dist/index.cjs +10 -17
  2. package/dist/index.mjs +10 -17
  3. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -722,6 +722,10 @@ function renderRawWrappedBox(html, width, layout) {
722
722
  )}"><tr><td width="${width}" style="${rawCellStyle(width, { padding: 0 })};${rawLayoutStyle(layout)}">${html}</td></tr></table>`;
723
723
  }
724
724
  const RawHtml = ({ html }) => /* @__PURE__ */ React.createElement(mjmlReact.MjmlRaw, { dangerouslySetInnerHTML: { __html: html } });
725
+ function wrapRawColumnHtml(html) {
726
+ return `<tr><td style="font-size:0px;padding:0;word-break:break-word">${html}</td></tr>`;
727
+ }
728
+ const ColumnRawHtml = ({ html }) => /* @__PURE__ */ React.createElement(mjmlReact.MjmlRaw, { dangerouslySetInnerHTML: { __html: wrapRawColumnHtml(html) } });
725
729
  function renderTextAtom(atom, ctx) {
726
730
  const rootTextStyles = getRootTextStyles(atom.textType ?? "body", ctx.globalAtomStyles);
727
731
  const resolvedText = resolveTextStyles(atom.textStyles, rootTextStyles.textStyles);
@@ -762,7 +766,6 @@ function renderButtonAtom(atom, ctx) {
762
766
  function renderImageAtom(atom, ctx) {
763
767
  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
764
768
  const width = roundWidth(ctx.contentWidthPx);
765
- const height = scaledImageHeight(atom, width);
766
769
  return /* @__PURE__ */ React.createElement(
767
770
  mjmlReact.MjmlImage,
768
771
  {
@@ -771,18 +774,11 @@ function renderImageAtom(atom, ctx) {
771
774
  href: atom.href ? ensureUrlHasProtocolForPreview(atom.href) : void 0,
772
775
  alt: "",
773
776
  width: `${width}px`,
774
- height: height === void 0 ? void 0 : `${height}px`,
775
777
  padding: layoutPaddingToCss(resolvedLayout),
776
778
  borderRadius: cornerRadiusToCssValue(resolvedLayout.borderRadius)
777
779
  }
778
780
  );
779
781
  }
780
- function scaledImageHeight(atom, width) {
781
- if (atom.width <= 0 || atom.height <= 0) {
782
- return void 0;
783
- }
784
- return Math.max(1, Math.round(width * atom.height / atom.width));
785
- }
786
782
  function renderDividerAtom(atom, ctx) {
787
783
  const resolvedDivider = resolveDividerStyles(atom.dividerStyles, ctx.globalAtomStyles.dividerStyles.dividerStyles);
788
784
  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
@@ -808,9 +804,9 @@ function renderColumnContentAtom(atom, ctx) {
808
804
  case "divider":
809
805
  return React.cloneElement(renderDividerAtom(atom, ctx), { key: ctx.keyPrefix });
810
806
  case "rows":
811
- return /* @__PURE__ */ React.createElement(RawHtml, { key: ctx.keyPrefix, html: renderRawRowsAtom(atom, ctx) });
807
+ return /* @__PURE__ */ React.createElement(ColumnRawHtml, { key: ctx.keyPrefix, html: renderRawRowsAtom(atom, ctx) });
812
808
  case "columns":
813
- return /* @__PURE__ */ React.createElement(RawHtml, { key: ctx.keyPrefix, html: renderRawColumnsAtom(atom, ctx) });
809
+ return /* @__PURE__ */ React.createElement(ColumnRawHtml, { key: ctx.keyPrefix, html: renderRawColumnsAtom(atom, ctx) });
814
810
  case "automation-upcoming-events":
815
811
  case "automation-triggered-event":
816
812
  case "form":
@@ -855,7 +851,7 @@ function renderRowsAsBodySections(atom, ctx) {
855
851
  }
856
852
  if (layoutHasChrome(resolvedLayout) && (atom.children.length > 1 || atom.children.some((child) => child.type === "columns"))) {
857
853
  return /* @__PURE__ */ React.createElement(mjmlReact.MjmlSection, { key: ctx.keyPrefix, padding: "0" }, /* @__PURE__ */ React.createElement(mjmlReact.MjmlColumn, { width: `${outerWidth}px`, padding: "0" }, /* @__PURE__ */ React.createElement(
858
- RawHtml,
854
+ ColumnRawHtml,
859
855
  {
860
856
  html: renderRawChildrenRows({
861
857
  children: atom.children,
@@ -930,7 +926,7 @@ function renderColumnsAsBodySection(atom, ctx, opts) {
930
926
  const resolvedCols = resolveColumnsStyles(atom.columnsStyles, ctx.globalAtomStyles.columnsStyles.columnsStyles);
931
927
  if (resolvedCols.format === "table") {
932
928
  const rawCtx = opts?.width === void 0 ? ctx : { ...ctx, contentWidthPx: opts.width };
933
- return /* @__PURE__ */ React.createElement(mjmlReact.MjmlSection, { key: opts?.key ?? ctx.keyPrefix, padding: opts?.padding ?? `${opts?.paddingTop ?? 0}px 0 0 0` }, /* @__PURE__ */ React.createElement(mjmlReact.MjmlColumn, { padding: "0" }, /* @__PURE__ */ React.createElement(RawHtml, { html: renderRawColumnsAtom(atom, rawCtx) })));
929
+ return /* @__PURE__ */ React.createElement(mjmlReact.MjmlSection, { key: opts?.key ?? ctx.keyPrefix, padding: opts?.padding ?? `${opts?.paddingTop ?? 0}px 0 0 0` }, /* @__PURE__ */ React.createElement(mjmlReact.MjmlColumn, { padding: "0" }, /* @__PURE__ */ React.createElement(ColumnRawHtml, { html: renderRawColumnsAtom(atom, rawCtx) })));
934
930
  }
935
931
  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
936
932
  const outerWidth = opts?.width ?? boxOuterWidth(ctx.contentWidthPx, resolvedLayout);
@@ -1039,15 +1035,12 @@ function renderRawButtonAtom(atom, ctx) {
1039
1035
  function renderRawImageAtom(atom, ctx) {
1040
1036
  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
1041
1037
  const width = roundWidth(ctx.contentWidthPx);
1042
- const height = scaledImageHeight(atom, width);
1043
1038
  const imageStyle = cssStyle({
1044
1039
  borderRadius: cornerRadiusToCssValue(resolvedLayout.borderRadius),
1045
1040
  display: "block",
1046
- width: `${width}px`,
1047
- height: height === void 0 ? void 0 : `${height}px`
1041
+ width: `${width}px`
1048
1042
  });
1049
- const heightAttribute = height === void 0 ? "" : ` height="${height}"`;
1050
- const image = `<img src="${escapeHtml(atom.src)}" alt="" width="${width}"${heightAttribute} style="${imageStyle}">`;
1043
+ const image = `<img src="${escapeHtml(atom.src)}" alt="" width="${width}" style="${imageStyle}">`;
1051
1044
  const html = atom.href ? `<a href="${escapeHtml(ensureUrlHasProtocolForPreview(atom.href))}" target="_blank" style="${cssStyle({
1052
1045
  display: "inline-block",
1053
1046
  width: `${width}px`
package/dist/index.mjs CHANGED
@@ -720,6 +720,10 @@ function renderRawWrappedBox(html, width, layout) {
720
720
  )}"><tr><td width="${width}" style="${rawCellStyle(width, { padding: 0 })};${rawLayoutStyle(layout)}">${html}</td></tr></table>`;
721
721
  }
722
722
  const RawHtml = ({ html }) => /* @__PURE__ */ React.createElement(MjmlRaw, { dangerouslySetInnerHTML: { __html: html } });
723
+ function wrapRawColumnHtml(html) {
724
+ return `<tr><td style="font-size:0px;padding:0;word-break:break-word">${html}</td></tr>`;
725
+ }
726
+ const ColumnRawHtml = ({ html }) => /* @__PURE__ */ React.createElement(MjmlRaw, { dangerouslySetInnerHTML: { __html: wrapRawColumnHtml(html) } });
723
727
  function renderTextAtom(atom, ctx) {
724
728
  const rootTextStyles = getRootTextStyles(atom.textType ?? "body", ctx.globalAtomStyles);
725
729
  const resolvedText = resolveTextStyles(atom.textStyles, rootTextStyles.textStyles);
@@ -760,7 +764,6 @@ function renderButtonAtom(atom, ctx) {
760
764
  function renderImageAtom(atom, ctx) {
761
765
  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
762
766
  const width = roundWidth(ctx.contentWidthPx);
763
- const height = scaledImageHeight(atom, width);
764
767
  return /* @__PURE__ */ React.createElement(
765
768
  MjmlImage,
766
769
  {
@@ -769,18 +772,11 @@ function renderImageAtom(atom, ctx) {
769
772
  href: atom.href ? ensureUrlHasProtocolForPreview(atom.href) : void 0,
770
773
  alt: "",
771
774
  width: `${width}px`,
772
- height: height === void 0 ? void 0 : `${height}px`,
773
775
  padding: layoutPaddingToCss(resolvedLayout),
774
776
  borderRadius: cornerRadiusToCssValue(resolvedLayout.borderRadius)
775
777
  }
776
778
  );
777
779
  }
778
- function scaledImageHeight(atom, width) {
779
- if (atom.width <= 0 || atom.height <= 0) {
780
- return void 0;
781
- }
782
- return Math.max(1, Math.round(width * atom.height / atom.width));
783
- }
784
780
  function renderDividerAtom(atom, ctx) {
785
781
  const resolvedDivider = resolveDividerStyles(atom.dividerStyles, ctx.globalAtomStyles.dividerStyles.dividerStyles);
786
782
  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
@@ -806,9 +802,9 @@ function renderColumnContentAtom(atom, ctx) {
806
802
  case "divider":
807
803
  return React.cloneElement(renderDividerAtom(atom, ctx), { key: ctx.keyPrefix });
808
804
  case "rows":
809
- return /* @__PURE__ */ React.createElement(RawHtml, { key: ctx.keyPrefix, html: renderRawRowsAtom(atom, ctx) });
805
+ return /* @__PURE__ */ React.createElement(ColumnRawHtml, { key: ctx.keyPrefix, html: renderRawRowsAtom(atom, ctx) });
810
806
  case "columns":
811
- return /* @__PURE__ */ React.createElement(RawHtml, { key: ctx.keyPrefix, html: renderRawColumnsAtom(atom, ctx) });
807
+ return /* @__PURE__ */ React.createElement(ColumnRawHtml, { key: ctx.keyPrefix, html: renderRawColumnsAtom(atom, ctx) });
812
808
  case "automation-upcoming-events":
813
809
  case "automation-triggered-event":
814
810
  case "form":
@@ -853,7 +849,7 @@ function renderRowsAsBodySections(atom, ctx) {
853
849
  }
854
850
  if (layoutHasChrome(resolvedLayout) && (atom.children.length > 1 || atom.children.some((child) => child.type === "columns"))) {
855
851
  return /* @__PURE__ */ React.createElement(MjmlSection, { key: ctx.keyPrefix, padding: "0" }, /* @__PURE__ */ React.createElement(MjmlColumn, { width: `${outerWidth}px`, padding: "0" }, /* @__PURE__ */ React.createElement(
856
- RawHtml,
852
+ ColumnRawHtml,
857
853
  {
858
854
  html: renderRawChildrenRows({
859
855
  children: atom.children,
@@ -928,7 +924,7 @@ function renderColumnsAsBodySection(atom, ctx, opts) {
928
924
  const resolvedCols = resolveColumnsStyles(atom.columnsStyles, ctx.globalAtomStyles.columnsStyles.columnsStyles);
929
925
  if (resolvedCols.format === "table") {
930
926
  const rawCtx = opts?.width === void 0 ? ctx : { ...ctx, contentWidthPx: opts.width };
931
- return /* @__PURE__ */ React.createElement(MjmlSection, { key: opts?.key ?? ctx.keyPrefix, padding: opts?.padding ?? `${opts?.paddingTop ?? 0}px 0 0 0` }, /* @__PURE__ */ React.createElement(MjmlColumn, { padding: "0" }, /* @__PURE__ */ React.createElement(RawHtml, { html: renderRawColumnsAtom(atom, rawCtx) })));
927
+ return /* @__PURE__ */ React.createElement(MjmlSection, { key: opts?.key ?? ctx.keyPrefix, padding: opts?.padding ?? `${opts?.paddingTop ?? 0}px 0 0 0` }, /* @__PURE__ */ React.createElement(MjmlColumn, { padding: "0" }, /* @__PURE__ */ React.createElement(ColumnRawHtml, { html: renderRawColumnsAtom(atom, rawCtx) })));
932
928
  }
933
929
  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
934
930
  const outerWidth = opts?.width ?? boxOuterWidth(ctx.contentWidthPx, resolvedLayout);
@@ -1037,15 +1033,12 @@ function renderRawButtonAtom(atom, ctx) {
1037
1033
  function renderRawImageAtom(atom, ctx) {
1038
1034
  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
1039
1035
  const width = roundWidth(ctx.contentWidthPx);
1040
- const height = scaledImageHeight(atom, width);
1041
1036
  const imageStyle = cssStyle({
1042
1037
  borderRadius: cornerRadiusToCssValue(resolvedLayout.borderRadius),
1043
1038
  display: "block",
1044
- width: `${width}px`,
1045
- height: height === void 0 ? void 0 : `${height}px`
1039
+ width: `${width}px`
1046
1040
  });
1047
- const heightAttribute = height === void 0 ? "" : ` height="${height}"`;
1048
- const image = `<img src="${escapeHtml(atom.src)}" alt="" width="${width}"${heightAttribute} style="${imageStyle}">`;
1041
+ const image = `<img src="${escapeHtml(atom.src)}" alt="" width="${width}" style="${imageStyle}">`;
1049
1042
  const html = atom.href ? `<a href="${escapeHtml(ensureUrlHasProtocolForPreview(atom.href))}" target="_blank" style="${cssStyle({
1050
1043
  display: "inline-block",
1051
1044
  width: `${width}px`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cymbal/atoms-email-renderer",
3
- "version": "0.2.2",
3
+ "version": "0.2.3",
4
4
  "main": "./dist/index.cjs",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",