@cymbal/atoms-email-renderer 0.2.1 → 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 +57 -61
  2. package/dist/index.mjs +57 -61
  3. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -439,6 +439,9 @@ function mjmlLayoutProps(ls) {
439
439
  ...backgroundImageProps
440
440
  });
441
441
  }
442
+ function layoutHasChrome(ls) {
443
+ return backgroundColorFromAtomBg(ls.background) !== void 0 || isImageBackground(ls.background) || ls.border !== "none" || cornerRadiusToCssValue(ls.borderRadius) !== void 0;
444
+ }
442
445
  function suppressLayoutBackground(layoutStyles) {
443
446
  return {
444
447
  ...layoutStyles,
@@ -719,6 +722,10 @@ function renderRawWrappedBox(html, width, layout) {
719
722
  )}"><tr><td width="${width}" style="${rawCellStyle(width, { padding: 0 })};${rawLayoutStyle(layout)}">${html}</td></tr></table>`;
720
723
  }
721
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) } });
722
729
  function renderTextAtom(atom, ctx) {
723
730
  const rootTextStyles = getRootTextStyles(atom.textType ?? "body", ctx.globalAtomStyles);
724
731
  const resolvedText = resolveTextStyles(atom.textStyles, rootTextStyles.textStyles);
@@ -759,7 +766,6 @@ function renderButtonAtom(atom, ctx) {
759
766
  function renderImageAtom(atom, ctx) {
760
767
  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
761
768
  const width = roundWidth(ctx.contentWidthPx);
762
- const height = scaledImageHeight(atom, width);
763
769
  return /* @__PURE__ */ React.createElement(
764
770
  mjmlReact.MjmlImage,
765
771
  {
@@ -768,18 +774,11 @@ function renderImageAtom(atom, ctx) {
768
774
  href: atom.href ? ensureUrlHasProtocolForPreview(atom.href) : void 0,
769
775
  alt: "",
770
776
  width: `${width}px`,
771
- height: height === void 0 ? void 0 : `${height}px`,
772
777
  padding: layoutPaddingToCss(resolvedLayout),
773
778
  borderRadius: cornerRadiusToCssValue(resolvedLayout.borderRadius)
774
779
  }
775
780
  );
776
781
  }
777
- function scaledImageHeight(atom, width) {
778
- if (atom.width <= 0 || atom.height <= 0) {
779
- return void 0;
780
- }
781
- return Math.max(1, Math.round(width * atom.height / atom.width));
782
- }
783
782
  function renderDividerAtom(atom, ctx) {
784
783
  const resolvedDivider = resolveDividerStyles(atom.dividerStyles, ctx.globalAtomStyles.dividerStyles.dividerStyles);
785
784
  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
@@ -805,9 +804,9 @@ function renderColumnContentAtom(atom, ctx) {
805
804
  case "divider":
806
805
  return React.cloneElement(renderDividerAtom(atom, ctx), { key: ctx.keyPrefix });
807
806
  case "rows":
808
- return renderRowsAsColumnContent(atom, ctx);
807
+ return /* @__PURE__ */ React.createElement(ColumnRawHtml, { key: ctx.keyPrefix, html: renderRawRowsAtom(atom, ctx) });
809
808
  case "columns":
810
- 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) });
811
810
  case "automation-upcoming-events":
812
811
  case "automation-triggered-event":
813
812
  case "form":
@@ -818,48 +817,6 @@ function renderColumnContentAtom(atom, ctx) {
818
817
  return null;
819
818
  }
820
819
  }
821
- function renderChildrenAsColumnContent({
822
- children,
823
- resolvedRows,
824
- ctx
825
- }) {
826
- const gap = resolvedRows.gap;
827
- const nodes = [];
828
- children.forEach((child, index) => {
829
- if (index > 0 && gap > 0) {
830
- nodes.push(
831
- /* @__PURE__ */ React.createElement(
832
- RawHtml,
833
- {
834
- key: `${ctx.keyPrefix}-gap-${index}`,
835
- html: `<div style="height:${gap}px;line-height:${gap}px">&nbsp;</div>`
836
- }
837
- )
838
- );
839
- }
840
- const childLayout = resolveAtomLayoutStyles(child, ctx.globalAtomStyles);
841
- const childOuterWidth = roundWidth(
842
- calculateRowChildWidth({
843
- contentWidth: ctx.contentWidthPx,
844
- child,
845
- globalAtomStyles: ctx.globalAtomStyles
846
- })
847
- );
848
- const childContentWidth = roundWidth(computeAtomContentWidth(childOuterWidth, childLayout));
849
- const childCtx = {
850
- ...ctx,
851
- contentWidthPx: childContentWidth,
852
- parentRowBlockHorizontalAlign: resolvedRows.contentHorizontalAlign,
853
- keyPrefix: `${ctx.keyPrefix}-${child.atomKey}-${index}`
854
- };
855
- nodes.push(renderColumnContentAtom(child, childCtx));
856
- });
857
- return nodes;
858
- }
859
- function renderRowsAsColumnContent(atom, ctx) {
860
- const resolvedRows = resolveRowsStyles(atom.rowsStyles, ctx.globalAtomStyles.rowsStyles.rowsStyles);
861
- return renderChildrenAsColumnContent({ children: atom.children, resolvedRows, ctx });
862
- }
863
820
  function renderBodyAtom(atom, ctx) {
864
821
  switch (atom.type) {
865
822
  case "rows":
@@ -892,6 +849,19 @@ function renderRowsAsBodySections(atom, ctx) {
892
849
  /* @__PURE__ */ React.createElement(mjmlReact.MjmlSection, { key: `${ctx.keyPrefix}-empty`, ...mjmlLayoutProps(resolvedLayout) }, /* @__PURE__ */ React.createElement(mjmlReact.MjmlColumn, { width: `${innerWidth}px`, padding: "0" }, /* @__PURE__ */ React.createElement(mjmlReact.MjmlText, { padding: "0" }, "\xA0")))
893
850
  ];
894
851
  }
852
+ if (layoutHasChrome(resolvedLayout) && (atom.children.length > 1 || atom.children.some((child) => child.type === "columns"))) {
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(
854
+ ColumnRawHtml,
855
+ {
856
+ html: renderRawChildrenRows({
857
+ children: atom.children,
858
+ resolvedLayout,
859
+ resolvedRows,
860
+ ctx
861
+ })
862
+ }
863
+ )));
864
+ }
895
865
  return atom.children.map((child, index) => {
896
866
  const childResolved = resolveAtomLayoutStyles(child, ctx.globalAtomStyles);
897
867
  const childOuterWidth = roundWidth(
@@ -918,7 +888,8 @@ function renderRowsAsBodySections(atom, ctx) {
918
888
  paddingTop: index > 0 ? resolvedRows.gap : 0,
919
889
  padding: rowChildSectionPadding(resolvedLayout, index, atom.children.length, resolvedRows.gap),
920
890
  width: childOuterWidth,
921
- align: childHorizontalAlign});
891
+ align: childHorizontalAlign
892
+ });
922
893
  }
923
894
  if (child.type === "rows") {
924
895
  return renderLeafAsBodySection(child, childCtx, {
@@ -949,12 +920,13 @@ function renderLeafAsBodySection(atom, ctx, opts) {
949
920
  padding: opts?.padding ?? `${sectionPaddingTop}px 0 0 0`,
950
921
  textAlign: opts?.align
951
922
  });
952
- return /* @__PURE__ */ React.createElement(mjmlReact.MjmlSection, { key: opts?.key ?? ctx.keyPrefix, ...sectionProps }, /* @__PURE__ */ React.createElement(mjmlReact.MjmlColumn, { width: `${width}px`, padding: "0" }, renderColumnContentAtom(atom, { ...ctx, contentWidthPx: width })));
923
+ return /* @__PURE__ */ React.createElement(mjmlReact.MjmlSection, { key: opts?.key ?? ctx.keyPrefix, ...sectionProps }, /* @__PURE__ */ React.createElement(mjmlReact.MjmlColumn, { width: `${width}px`, padding: "0" }, renderColumnContentAtom(atom, ctx)));
953
924
  }
954
925
  function renderColumnsAsBodySection(atom, ctx, opts) {
955
926
  const resolvedCols = resolveColumnsStyles(atom.columnsStyles, ctx.globalAtomStyles.columnsStyles.columnsStyles);
956
927
  if (resolvedCols.format === "table") {
957
- 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, ctx) })));
928
+ const rawCtx = opts?.width === void 0 ? ctx : { ...ctx, contentWidthPx: opts.width };
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) })));
958
930
  }
959
931
  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
960
932
  const outerWidth = opts?.width ?? boxOuterWidth(ctx.contentWidthPx, resolvedLayout);
@@ -1063,15 +1035,12 @@ function renderRawButtonAtom(atom, ctx) {
1063
1035
  function renderRawImageAtom(atom, ctx) {
1064
1036
  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
1065
1037
  const width = roundWidth(ctx.contentWidthPx);
1066
- const height = scaledImageHeight(atom, width);
1067
1038
  const imageStyle = cssStyle({
1068
1039
  borderRadius: cornerRadiusToCssValue(resolvedLayout.borderRadius),
1069
1040
  display: "block",
1070
- width: `${width}px`,
1071
- height: height === void 0 ? void 0 : `${height}px`
1041
+ width: `${width}px`
1072
1042
  });
1073
- const heightAttribute = height === void 0 ? "" : ` height="${height}"`;
1074
- 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}">`;
1075
1044
  const html = atom.href ? `<a href="${escapeHtml(ensureUrlHasProtocolForPreview(atom.href))}" target="_blank" style="${cssStyle({
1076
1045
  display: "inline-block",
1077
1046
  width: `${width}px`
@@ -1147,8 +1116,35 @@ function renderRawColumnsAtom(atom, ctx) {
1147
1116
  gap: gapPx,
1148
1117
  globalAtomStyles: ctx.globalAtomStyles
1149
1118
  }).widthsPx.map(roundWidth);
1150
- const maxRows = Math.max(1, ...atom.children.map((child) => child.type === "rows" ? child.children.length : 1));
1151
1119
  const vAlign = resolvedCols.contentVerticalAlign === "middle" ? "middle" : resolvedCols.contentVerticalAlign;
1120
+ if (resolvedCols.format !== "table") {
1121
+ const cells = atom.children.map((child, columnIndex) => {
1122
+ const columnWidth = columnWidths[columnIndex] ?? 0;
1123
+ const gapBefore = columnIndex === 0 ? 0 : gapPx;
1124
+ const cellWidth = columnWidth + gapBefore;
1125
+ const childLayout = resolveAtomLayoutStyles(child, ctx.globalAtomStyles);
1126
+ const childCtx = {
1127
+ ...ctx,
1128
+ contentWidthPx: roundWidth(computeAtomContentWidth(columnWidth, childLayout)),
1129
+ parentRowBlockHorizontalAlign: null,
1130
+ keyPrefix: `${ctx.keyPrefix}-${child.atomKey}-${columnIndex}`
1131
+ };
1132
+ const gapCell = columnIndex > 0 && gapPx > 0 ? `<td width="${gapPx}" valign="${vAlign}" style="${rawCellStyle(gapPx, {
1133
+ fontSize: 0,
1134
+ lineHeight: 0,
1135
+ verticalAlign: vAlign
1136
+ })}">&nbsp;</td>` : "";
1137
+ return `${gapCell}<td width="${cellWidth}" valign="${vAlign}" style="${rawCellStyle(cellWidth, {
1138
+ verticalAlign: vAlign
1139
+ })}">${renderRawAtom(child, childCtx)}</td>`;
1140
+ }).join("");
1141
+ const totalWidth2 = columnWidths.reduce((sum, width) => sum + width, 0) + gapPx * Math.max(0, atom.children.length - 1);
1142
+ const table2 = `<div class="table-min-width-100"><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="${totalWidth2}" align="${alignAttr(
1143
+ resolvedCols.contentHorizontalAlign
1144
+ )}" style="${rawTableStyle(totalWidth2)}"><tr>${cells}</tr></table></div>`;
1145
+ return renderRawWrappedBox(table2, outerWidth, resolvedLayout);
1146
+ }
1147
+ const maxRows = Math.max(1, ...atom.children.map((child) => child.type === "rows" ? child.children.length : 1));
1152
1148
  const rows = Array.from({ length: maxRows }).map((_, rowIndex) => {
1153
1149
  const cells = atom.children.map((child, columnIndex) => {
1154
1150
  const columnWidth = columnWidths[columnIndex] ?? 0;
package/dist/index.mjs CHANGED
@@ -437,6 +437,9 @@ function mjmlLayoutProps(ls) {
437
437
  ...backgroundImageProps
438
438
  });
439
439
  }
440
+ function layoutHasChrome(ls) {
441
+ return backgroundColorFromAtomBg(ls.background) !== void 0 || isImageBackground(ls.background) || ls.border !== "none" || cornerRadiusToCssValue(ls.borderRadius) !== void 0;
442
+ }
440
443
  function suppressLayoutBackground(layoutStyles) {
441
444
  return {
442
445
  ...layoutStyles,
@@ -717,6 +720,10 @@ function renderRawWrappedBox(html, width, layout) {
717
720
  )}"><tr><td width="${width}" style="${rawCellStyle(width, { padding: 0 })};${rawLayoutStyle(layout)}">${html}</td></tr></table>`;
718
721
  }
719
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) } });
720
727
  function renderTextAtom(atom, ctx) {
721
728
  const rootTextStyles = getRootTextStyles(atom.textType ?? "body", ctx.globalAtomStyles);
722
729
  const resolvedText = resolveTextStyles(atom.textStyles, rootTextStyles.textStyles);
@@ -757,7 +764,6 @@ function renderButtonAtom(atom, ctx) {
757
764
  function renderImageAtom(atom, ctx) {
758
765
  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
759
766
  const width = roundWidth(ctx.contentWidthPx);
760
- const height = scaledImageHeight(atom, width);
761
767
  return /* @__PURE__ */ React.createElement(
762
768
  MjmlImage,
763
769
  {
@@ -766,18 +772,11 @@ function renderImageAtom(atom, ctx) {
766
772
  href: atom.href ? ensureUrlHasProtocolForPreview(atom.href) : void 0,
767
773
  alt: "",
768
774
  width: `${width}px`,
769
- height: height === void 0 ? void 0 : `${height}px`,
770
775
  padding: layoutPaddingToCss(resolvedLayout),
771
776
  borderRadius: cornerRadiusToCssValue(resolvedLayout.borderRadius)
772
777
  }
773
778
  );
774
779
  }
775
- function scaledImageHeight(atom, width) {
776
- if (atom.width <= 0 || atom.height <= 0) {
777
- return void 0;
778
- }
779
- return Math.max(1, Math.round(width * atom.height / atom.width));
780
- }
781
780
  function renderDividerAtom(atom, ctx) {
782
781
  const resolvedDivider = resolveDividerStyles(atom.dividerStyles, ctx.globalAtomStyles.dividerStyles.dividerStyles);
783
782
  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
@@ -803,9 +802,9 @@ function renderColumnContentAtom(atom, ctx) {
803
802
  case "divider":
804
803
  return React.cloneElement(renderDividerAtom(atom, ctx), { key: ctx.keyPrefix });
805
804
  case "rows":
806
- return renderRowsAsColumnContent(atom, ctx);
805
+ return /* @__PURE__ */ React.createElement(ColumnRawHtml, { key: ctx.keyPrefix, html: renderRawRowsAtom(atom, ctx) });
807
806
  case "columns":
808
- 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) });
809
808
  case "automation-upcoming-events":
810
809
  case "automation-triggered-event":
811
810
  case "form":
@@ -816,48 +815,6 @@ function renderColumnContentAtom(atom, ctx) {
816
815
  return null;
817
816
  }
818
817
  }
819
- function renderChildrenAsColumnContent({
820
- children,
821
- resolvedRows,
822
- ctx
823
- }) {
824
- const gap = resolvedRows.gap;
825
- const nodes = [];
826
- children.forEach((child, index) => {
827
- if (index > 0 && gap > 0) {
828
- nodes.push(
829
- /* @__PURE__ */ React.createElement(
830
- RawHtml,
831
- {
832
- key: `${ctx.keyPrefix}-gap-${index}`,
833
- html: `<div style="height:${gap}px;line-height:${gap}px">&nbsp;</div>`
834
- }
835
- )
836
- );
837
- }
838
- const childLayout = resolveAtomLayoutStyles(child, ctx.globalAtomStyles);
839
- const childOuterWidth = roundWidth(
840
- calculateRowChildWidth({
841
- contentWidth: ctx.contentWidthPx,
842
- child,
843
- globalAtomStyles: ctx.globalAtomStyles
844
- })
845
- );
846
- const childContentWidth = roundWidth(computeAtomContentWidth(childOuterWidth, childLayout));
847
- const childCtx = {
848
- ...ctx,
849
- contentWidthPx: childContentWidth,
850
- parentRowBlockHorizontalAlign: resolvedRows.contentHorizontalAlign,
851
- keyPrefix: `${ctx.keyPrefix}-${child.atomKey}-${index}`
852
- };
853
- nodes.push(renderColumnContentAtom(child, childCtx));
854
- });
855
- return nodes;
856
- }
857
- function renderRowsAsColumnContent(atom, ctx) {
858
- const resolvedRows = resolveRowsStyles(atom.rowsStyles, ctx.globalAtomStyles.rowsStyles.rowsStyles);
859
- return renderChildrenAsColumnContent({ children: atom.children, resolvedRows, ctx });
860
- }
861
818
  function renderBodyAtom(atom, ctx) {
862
819
  switch (atom.type) {
863
820
  case "rows":
@@ -890,6 +847,19 @@ function renderRowsAsBodySections(atom, ctx) {
890
847
  /* @__PURE__ */ React.createElement(MjmlSection, { key: `${ctx.keyPrefix}-empty`, ...mjmlLayoutProps(resolvedLayout) }, /* @__PURE__ */ React.createElement(MjmlColumn, { width: `${innerWidth}px`, padding: "0" }, /* @__PURE__ */ React.createElement(MjmlText, { padding: "0" }, "\xA0")))
891
848
  ];
892
849
  }
850
+ if (layoutHasChrome(resolvedLayout) && (atom.children.length > 1 || atom.children.some((child) => child.type === "columns"))) {
851
+ return /* @__PURE__ */ React.createElement(MjmlSection, { key: ctx.keyPrefix, padding: "0" }, /* @__PURE__ */ React.createElement(MjmlColumn, { width: `${outerWidth}px`, padding: "0" }, /* @__PURE__ */ React.createElement(
852
+ ColumnRawHtml,
853
+ {
854
+ html: renderRawChildrenRows({
855
+ children: atom.children,
856
+ resolvedLayout,
857
+ resolvedRows,
858
+ ctx
859
+ })
860
+ }
861
+ )));
862
+ }
893
863
  return atom.children.map((child, index) => {
894
864
  const childResolved = resolveAtomLayoutStyles(child, ctx.globalAtomStyles);
895
865
  const childOuterWidth = roundWidth(
@@ -916,7 +886,8 @@ function renderRowsAsBodySections(atom, ctx) {
916
886
  paddingTop: index > 0 ? resolvedRows.gap : 0,
917
887
  padding: rowChildSectionPadding(resolvedLayout, index, atom.children.length, resolvedRows.gap),
918
888
  width: childOuterWidth,
919
- align: childHorizontalAlign});
889
+ align: childHorizontalAlign
890
+ });
920
891
  }
921
892
  if (child.type === "rows") {
922
893
  return renderLeafAsBodySection(child, childCtx, {
@@ -947,12 +918,13 @@ function renderLeafAsBodySection(atom, ctx, opts) {
947
918
  padding: opts?.padding ?? `${sectionPaddingTop}px 0 0 0`,
948
919
  textAlign: opts?.align
949
920
  });
950
- return /* @__PURE__ */ React.createElement(MjmlSection, { key: opts?.key ?? ctx.keyPrefix, ...sectionProps }, /* @__PURE__ */ React.createElement(MjmlColumn, { width: `${width}px`, padding: "0" }, renderColumnContentAtom(atom, { ...ctx, contentWidthPx: width })));
921
+ return /* @__PURE__ */ React.createElement(MjmlSection, { key: opts?.key ?? ctx.keyPrefix, ...sectionProps }, /* @__PURE__ */ React.createElement(MjmlColumn, { width: `${width}px`, padding: "0" }, renderColumnContentAtom(atom, ctx)));
951
922
  }
952
923
  function renderColumnsAsBodySection(atom, ctx, opts) {
953
924
  const resolvedCols = resolveColumnsStyles(atom.columnsStyles, ctx.globalAtomStyles.columnsStyles.columnsStyles);
954
925
  if (resolvedCols.format === "table") {
955
- 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, ctx) })));
926
+ const rawCtx = opts?.width === void 0 ? ctx : { ...ctx, contentWidthPx: opts.width };
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) })));
956
928
  }
957
929
  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
958
930
  const outerWidth = opts?.width ?? boxOuterWidth(ctx.contentWidthPx, resolvedLayout);
@@ -1061,15 +1033,12 @@ function renderRawButtonAtom(atom, ctx) {
1061
1033
  function renderRawImageAtom(atom, ctx) {
1062
1034
  const resolvedLayout = resolveAtomLayoutStyles(atom, ctx.globalAtomStyles);
1063
1035
  const width = roundWidth(ctx.contentWidthPx);
1064
- const height = scaledImageHeight(atom, width);
1065
1036
  const imageStyle = cssStyle({
1066
1037
  borderRadius: cornerRadiusToCssValue(resolvedLayout.borderRadius),
1067
1038
  display: "block",
1068
- width: `${width}px`,
1069
- height: height === void 0 ? void 0 : `${height}px`
1039
+ width: `${width}px`
1070
1040
  });
1071
- const heightAttribute = height === void 0 ? "" : ` height="${height}"`;
1072
- 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}">`;
1073
1042
  const html = atom.href ? `<a href="${escapeHtml(ensureUrlHasProtocolForPreview(atom.href))}" target="_blank" style="${cssStyle({
1074
1043
  display: "inline-block",
1075
1044
  width: `${width}px`
@@ -1145,8 +1114,35 @@ function renderRawColumnsAtom(atom, ctx) {
1145
1114
  gap: gapPx,
1146
1115
  globalAtomStyles: ctx.globalAtomStyles
1147
1116
  }).widthsPx.map(roundWidth);
1148
- const maxRows = Math.max(1, ...atom.children.map((child) => child.type === "rows" ? child.children.length : 1));
1149
1117
  const vAlign = resolvedCols.contentVerticalAlign === "middle" ? "middle" : resolvedCols.contentVerticalAlign;
1118
+ if (resolvedCols.format !== "table") {
1119
+ const cells = atom.children.map((child, columnIndex) => {
1120
+ const columnWidth = columnWidths[columnIndex] ?? 0;
1121
+ const gapBefore = columnIndex === 0 ? 0 : gapPx;
1122
+ const cellWidth = columnWidth + gapBefore;
1123
+ const childLayout = resolveAtomLayoutStyles(child, ctx.globalAtomStyles);
1124
+ const childCtx = {
1125
+ ...ctx,
1126
+ contentWidthPx: roundWidth(computeAtomContentWidth(columnWidth, childLayout)),
1127
+ parentRowBlockHorizontalAlign: null,
1128
+ keyPrefix: `${ctx.keyPrefix}-${child.atomKey}-${columnIndex}`
1129
+ };
1130
+ const gapCell = columnIndex > 0 && gapPx > 0 ? `<td width="${gapPx}" valign="${vAlign}" style="${rawCellStyle(gapPx, {
1131
+ fontSize: 0,
1132
+ lineHeight: 0,
1133
+ verticalAlign: vAlign
1134
+ })}">&nbsp;</td>` : "";
1135
+ return `${gapCell}<td width="${cellWidth}" valign="${vAlign}" style="${rawCellStyle(cellWidth, {
1136
+ verticalAlign: vAlign
1137
+ })}">${renderRawAtom(child, childCtx)}</td>`;
1138
+ }).join("");
1139
+ const totalWidth2 = columnWidths.reduce((sum, width) => sum + width, 0) + gapPx * Math.max(0, atom.children.length - 1);
1140
+ const table2 = `<div class="table-min-width-100"><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="${totalWidth2}" align="${alignAttr(
1141
+ resolvedCols.contentHorizontalAlign
1142
+ )}" style="${rawTableStyle(totalWidth2)}"><tr>${cells}</tr></table></div>`;
1143
+ return renderRawWrappedBox(table2, outerWidth, resolvedLayout);
1144
+ }
1145
+ const maxRows = Math.max(1, ...atom.children.map((child) => child.type === "rows" ? child.children.length : 1));
1150
1146
  const rows = Array.from({ length: maxRows }).map((_, rowIndex) => {
1151
1147
  const cells = atom.children.map((child, columnIndex) => {
1152
1148
  const columnWidth = columnWidths[columnIndex] ?? 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cymbal/atoms-email-renderer",
3
- "version": "0.2.1",
3
+ "version": "0.2.3",
4
4
  "main": "./dist/index.cjs",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",