email-builder-utils 1.0.15 → 1.1.0

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 (7) hide show
  1. package/dist/types/Generics.d.ts +1 -0
  2. package/dist/types/Generics.d.ts.map +1 -1
  3. package/dist/types/Generics.js +1 -0
  4. package/dist/utils/convertJsonToHtml.d.ts.map +1 -1
  5. package/dist/utils/convertJsonToHtml.js +34 -12
  6. package/dist/utils/jsonToHTML.js +8 -8
  7. package/package.json +1 -1
package/dist/types/Generics.d.ts CHANGED
@@ -23,6 +23,7 @@ export declare enum FEATURE_TYPE {
23
23
  UPDATE_USER_GROUP = "UPDATE_USER_GROUP",
24
24
  LIST_USER_GROUP = "LIST_USER_GROUP",
25
25
  GET_USER_GROUP = "GET_USER_GROUP",
26
+ CREATE_PRE_BUILT_TEMPLATE = "CREATE_PRE_BUILT_TEMPLATE",
26
27
  PREVIEW_PRE_BUILT_TEMPLATE = "PREVIEW_PRE_BUILT_TEMPLATE",
27
28
  CLONE_TEMPLATE = "CLONE_TEMPLATE",
28
29
  CREATE_TEMPLATE = "CREATE_TEMPLATE",
package/dist/types/Generics.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Generics.d.ts","sourceRoot":"","sources":["../../src/types/Generics.ts"],"names":[],"mappings":"AAAA,oBAAY,KAAK;IACf,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED,oBAAY,WAAW;IACrB,GAAG,QAAQ;IACX,OAAO,YAAY;IACnB,WAAW,gBAAgB;CAC5B;AAED,oBAAY,cAAc;IACxB,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,MAAM,WAAW;CAClB;AAED,oBAAY,YAAY;IAEtB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,WAAW,gBAAgB;IAC3B,SAAS,cAAc;IAGvB,cAAc,mBAAmB;IACjC,iBAAiB,sBAAsB;IACvC,iBAAiB,sBAAsB;IACvC,eAAe,oBAAoB;IACnC,cAAc,mBAAmB;IAGjC,0BAA0B,+BAA+B;IACzD,cAAc,mBAAmB;IACjC,eAAe,oBAAoB;IACnC,YAAY,iBAAiB;IAC7B,eAAe,oBAAoB;IACnC,cAAc,mBAAmB;IACjC,gBAAgB,qBAAqB;IACrC,aAAa,kBAAkB;IAC/B,UAAU,eAAe;CAC1B"}
1
+ {"version":3,"file":"Generics.d.ts","sourceRoot":"","sources":["../../src/types/Generics.ts"],"names":[],"mappings":"AAAA,oBAAY,KAAK;IACf,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED,oBAAY,WAAW;IACrB,GAAG,QAAQ;IACX,OAAO,YAAY;IACnB,WAAW,gBAAgB;CAC5B;AAED,oBAAY,cAAc;IACxB,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,MAAM,WAAW;CAClB;AAED,oBAAY,YAAY;IAEtB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,WAAW,gBAAgB;IAC3B,SAAS,cAAc;IAGvB,cAAc,mBAAmB;IACjC,iBAAiB,sBAAsB;IACvC,iBAAiB,sBAAsB;IACvC,eAAe,oBAAoB;IACnC,cAAc,mBAAmB;IAGjC,yBAAyB,8BAA8B;IACvD,0BAA0B,+BAA+B;IACzD,cAAc,mBAAmB;IACjC,eAAe,oBAAoB;IACnC,YAAY,iBAAiB;IAC7B,eAAe,oBAAoB;IACnC,cAAc,mBAAmB;IACjC,gBAAgB,qBAAqB;IACrC,aAAa,kBAAkB;IAC/B,UAAU,eAAe;CAC1B"}
package/dist/types/Generics.js CHANGED
@@ -33,6 +33,7 @@ var FEATURE_TYPE;
33
33
  FEATURE_TYPE["LIST_USER_GROUP"] = "LIST_USER_GROUP";
34
34
  FEATURE_TYPE["GET_USER_GROUP"] = "GET_USER_GROUP";
35
35
  // MANAGE TEMPLATE
36
+ FEATURE_TYPE["CREATE_PRE_BUILT_TEMPLATE"] = "CREATE_PRE_BUILT_TEMPLATE";
36
37
  FEATURE_TYPE["PREVIEW_PRE_BUILT_TEMPLATE"] = "PREVIEW_PRE_BUILT_TEMPLATE";
37
38
  FEATURE_TYPE["CLONE_TEMPLATE"] = "CLONE_TEMPLATE";
38
39
  FEATURE_TYPE["CREATE_TEMPLATE"] = "CREATE_TEMPLATE";
package/dist/utils/convertJsonToHtml.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"convertJsonToHtml.d.ts","sourceRoot":"","sources":["../../src/utils/convertJsonToHtml.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,GAAU,UAAU,GAAG,oBAgCpD,CAAA"}
1
+ {"version":3,"file":"convertJsonToHtml.d.ts","sourceRoot":"","sources":["../../src/utils/convertJsonToHtml.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,GAAU,UAAU,GAAG,oBA6DpD,CAAC"}
package/dist/utils/convertJsonToHtml.js CHANGED
@@ -3,35 +3,57 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.convertJsonToHtml = void 0;
4
4
  const jsonToHTML_1 = require("./jsonToHTML");
5
5
  const convertJsonToHtml = async (jsonData) => {
6
+ console.log(jsonData);
6
7
  const rootData = jsonData?.root?.data;
7
8
  const blocksHtml = [];
8
9
  for (const childId of rootData?.childrenIds) {
9
- blocksHtml.push(await (0, jsonToHTML_1.convertToHtml)(jsonData[childId], jsonData, 600 - (rootData.style?.padding?.left || 0) - (rootData.style?.padding?.right || 0)));
10
+ blocksHtml.push(await (0, jsonToHTML_1.convertToHtml)(jsonData[childId], jsonData, 600 -
11
+ (rootData.style?.padding?.left || 0) -
12
+ (rootData.style?.padding?.right || 0)));
10
13
  }
11
14
  const rawHtml = `
12
15
  <!DOCTYPE html>
13
- <html lang="en">
16
+ <html lang="en">
14
17
  <head>
15
- <meta charset="UTF-8">
16
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
18
+ <meta charset="UTF-8" />
19
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
17
20
  <title>Email Layout</title>
18
21
  <style>
19
22
  .responsive-table {
20
23
  width: 100%;
21
24
  max-width: 600px;
22
25
  }
26
+
27
+ @media only screen and (max-width: 600px) {
28
+ .stack-column {
29
+ display: block !important;
30
+ width: 100% !important;
31
+ max-width: 100% !important;
32
+ }
33
+ }
23
34
  </style>
24
35
  </head>
25
36
  <body>
26
- <table class="responsive-table" style="font-family:${rootData.style?.fontFamily}; margin:0 auto; background-color:${rootData.style?.canvasColor}; color:${rootData.style?.textColor}; ${jsonToHTML_1.tableCommonStyle}">
27
- <tbody>
28
- <tr>
29
- <td style="padding:0;">${blocksHtml.join("")}</td>
30
- </tr>
31
- </tbody>
32
- </table>
37
+ <center>
38
+ <table
39
+ class="responsive-table"
40
+ style="font-family: ${rootData.style?.fontFamily};
41
+ margin: 0 auto;
42
+ background-color: ${rootData.style?.canvasColor};
43
+ color: ${rootData.style?.textColor};
44
+ ${jsonToHTML_1.tableCommonStyle}"
45
+ >
46
+ <tbody>
47
+ <tr>
48
+ <td style="padding: 0;">
49
+ ${blocksHtml.join("")}
50
+ </td>
51
+ </tr>
52
+ </tbody>
53
+ </table>
54
+ </center>
33
55
  </body>
34
- </html>`;
56
+ </html>`;
35
57
  return rawHtml;
36
58
  };
37
59
  exports.convertJsonToHtml = convertJsonToHtml;
package/dist/utils/jsonToHTML.js CHANGED
@@ -4,7 +4,7 @@ exports.tableCommonStyle = void 0;
4
4
  exports.convertToHtml = convertToHtml;
5
5
  const jimp_1 = require("jimp");
6
6
  const types_1 = require("../types");
7
- const addPxToAttributes = ["fontSize", "lineHeight", "borderRadius"];
7
+ const addPxToAttributes = ["fontSize", "lineHeight"];
8
8
  const addPxOrPerToAttributes = ["width", "height"];
9
9
  const allPxAttributes = [...addPxToAttributes, ...addPxOrPerToAttributes];
10
10
  exports.tableCommonStyle = "border-collapse:collapse; table-layout:fixed;";
@@ -112,13 +112,13 @@ async function appendOutlookForImage(content, outerContainerWidth, innerContaine
112
112
  const scaledHeight = Math.round(originalHeight * widthScalingFactor); // Maintain aspect ratio
113
113
  // VML for Outlook
114
114
  const outlookImage = `<!--[if mso]>
115
- <v:rect xmlns:v="urn:schemas-microsoft-com:vml" style="width:${scaledWidth}px;height:${scaledHeight}px;" stroke="f" fillcolor="none">
115
+ <v:rect xmlns:v="urn:schemas-microsoft-com:vml" style="width:${scaledWidth}px;height:${scaledHeight}px; border:none;">
116
116
  <v:fill src="${imageUrl}" type="frame" />
117
117
  </v:rect>
118
118
  <![endif]-->`;
119
119
  return `
120
120
  ${outlookImage}
121
- <!--[if !mso]><!-->
121
+ <!--[if !mso]><!-->
122
122
  ${content}
123
123
  <!--<![endif]-->
124
124
  `;
@@ -139,9 +139,9 @@ function appendOutlookForButton(content, buttonStyle, navigateToUrl, text) {
139
139
  const { width, buttonColor, borderColor, borderRadius, borderWidth, height, buttonPadding, color, fontFamily, fontSize, fontWeight } = buttonStyle;
140
140
  return `
141
141
  <!--[if mso]>
142
- <v:${borderRadius ? "roundrect" : "rect"} xmlns:v="urn:schemas-microsoft-com:vml" href="${navigateToUrl}" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:${height || 44}px;width:${width || 200}px;v-text-anchor:middle;" arcsize="${borderRadius || 0}%" strokeweight="${borderWidth || 1}px" strokecolor="${borderColor || "none"}" fillcolor="${buttonColor || "none"}">
142
+ <v:${borderRadius ? "roundrect" : "rect"} xmlns:v="urn:schemas-microsoft-com:vml" href="${navigateToUrl}" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:${height || 44}px;width:${width || 200}px;v-text-anchor:middle;" arcsize="${borderRadius || 0}px" strokeweight="${borderWidth || 0}px" strokecolor="${borderColor || "transparent"}" fillcolor="${buttonColor || "none"}">
143
143
  <w:anchorlock/>
144
- <v:textbox inset="0px, 0px, 0px, 0px">
144
+ <v:textbox inset="${buttonPadding?.top || 0}px, ${buttonPadding?.left || 0}px, ${buttonPadding?.bottom || 0}px, ${buttonPadding?.right || 0}px">
145
145
  <center style="font-family:${fontFamily || ""};font-size:${fontSize}px;font-weight:${fontWeight};color:${color};">${text}</center>
146
146
  </v:textbox>
147
147
  </v:${borderRadius ? "roundrect" : "rect"}>
@@ -154,7 +154,7 @@ function appendOutlookForButton(content, buttonStyle, navigateToUrl, text) {
154
154
  function convertButtonBlock(blockData) {
155
155
  const { style, props } = blockData.data;
156
156
  const { text, navigateToUrl } = props;
157
- const { fontFamily, fontSize, fontWeight, borderColor, borderRadius, borderWidth, borderStyle, buttonPadding, textColor, buttonColor, width, height, ...rest } = style;
157
+ const { fontFamily, fontSize, fontWeight, borderColor, borderRadius, borderWidth, borderStyle, buttonPadding, color, buttonColor, width, height, ...rest } = style;
158
158
  const buttonStyle = {
159
159
  width,
160
160
  height,
@@ -166,7 +166,7 @@ function convertButtonBlock(blockData) {
166
166
  borderWidth,
167
167
  borderStyle,
168
168
  padding: buttonPadding,
169
- textColor,
169
+ color,
170
170
  backgroundColor: buttonColor,
171
171
  };
172
172
  const convertedButtonStyle = buildStyles(buttonStyle, { perChanges: [], pxChanges: allPxAttributes });
@@ -212,5 +212,5 @@ async function convertGridCellBlock(blockData, rootData, cellWidth, parentCellWi
212
212
  cellItems.push(await convertToHtml(rootData[childId], rootData, parentCellWidth * (cellWidth || 0) / 100));
213
213
  }
214
214
  }
215
- return `<td style="width:${cellWidth}% ; max-width:${cellWidth}%; ${styles}">${cellItems.join("")}</td>`;
215
+ return `<td class="stack-column" style="width:${cellWidth}% ; max-width:${cellWidth}%; ${styles}">${cellItems.join("")}</td>`;
216
216
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "email-builder-utils",
3
- "version": "1.0.15",
3
+ "version": "1.1.0",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "files": [