email-builder-utils 1.1.7 → 1.1.12

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 (5) hide show
  1. package/dist/utils/convertJsonToHtml.d.ts.map +1 -1
  2. package/dist/utils/convertJsonToHtml.js +48 -42
  3. package/dist/utils/jsonToHTML.d.ts.map +1 -1
  4. package/dist/utils/jsonToHTML.js +50 -42
  5. package/package.json +33 -33
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,oBA6DpD,CAAC"}
1
+ {"version":3,"file":"convertJsonToHtml.d.ts","sourceRoot":"","sources":["../../src/utils/convertJsonToHtml.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,GAAU,UAAU,GAAG,oBA6EpD,CAAC"}
package/dist/utils/convertJsonToHtml.js CHANGED
@@ -11,48 +11,54 @@ const convertJsonToHtml = async (jsonData) => {
11
11
  (rootData.style?.padding?.left || 0) -
12
12
  (rootData.style?.padding?.right || 0)));
13
13
  }
14
- const rawHtml = `
15
- <!DOCTYPE html>
16
- <html lang="en">
17
- <head>
18
- <meta charset="UTF-8" />
19
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
20
- <title>Email Layout</title>
21
- <style>
22
- .responsive-table {
23
- width: 100%;
24
- max-width: 600px;
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
- }
34
- </style>
35
- </head>
36
- <body>
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>
55
- </body>
14
+ const { fontFamily, canvasColor, textColor, padding = {}, borderColor, borderRadius, borderWidth, borderStyle, } = rootData.style || {};
15
+ const { top = 0, right = 0, bottom = 0, left = 0 } = padding;
16
+ const rawHtml = `
17
+ <!DOCTYPE html>
18
+ <html lang="en">
19
+ <head>
20
+ <meta charset="UTF-8" />
21
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
22
+ <title>Email Layout</title>
23
+ <style>
24
+ .responsive-table {
25
+ width: 100%;
26
+ max-width: 600px;
27
+ }
28
+
29
+ @media only screen and (max-width: 600px) {
30
+ .stack-column {
31
+ display: block !important;
32
+ width: 100% !important;
33
+ max-width: 100% !important;
34
+ }
35
+ }
36
+ </style>
37
+ </head>
38
+ <body>
39
+ <center>
40
+ <table
41
+ class="responsive-table"
42
+ style="
43
+ font-family: ${fontFamily};
44
+ margin: 0 auto;
45
+ table-layout:fixed;
46
+ background-color: ${canvasColor};
47
+ color: ${textColor};
48
+ padding: ${top}px ${right}px ${bottom}px ${left}px;
49
+ border: ${borderWidth}px ${borderStyle} ${borderColor};
50
+ border-radius: ${borderRadius}px; "
51
+ >
52
+ <tbody>
53
+ <tr>
54
+ <td style="padding: 0;">
55
+ ${blocksHtml.join("")}
56
+ </td>
57
+ </tr>
58
+ </tbody>
59
+ </table>
60
+ </center>
61
+ </body>
56
62
  </html>`;
57
63
  return rawHtml;
58
64
  };
package/dist/utils/jsonToHTML.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAUrC,UAAU,cAAc;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,UAAU;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc,CAAC;QACtB,KAAK,EAAE,GAAG,CAAC;QACX,WAAW,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;KAC7B,CAAC;CACH;AAMD,eAAO,MAAM,gBAAgB,kDAAkD,CAAC;AAiDhF,wBAAsB,aAAa,CAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAiB9F"}
1
+ {"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAUrC,UAAU,cAAc;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,UAAU;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc,CAAC;QACtB,KAAK,EAAE,GAAG,CAAC;QACX,WAAW,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;KAC7B,CAAC;CACH;AAQD,eAAO,MAAM,gBAAgB,kDAAkD,CAAC;AAiDhF,wBAAsB,aAAa,CAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAiB9F"}
package/dist/utils/jsonToHTML.js CHANGED
@@ -71,8 +71,8 @@ async function convertToHtml(blockData, rootData, cellWidthInPx) {
71
71
  }
72
72
  }
73
73
  function appendOutlookSupport(content, contentStyle) {
74
- return `
75
- <table width="100%" style="${exports.tableCommonStyle}"><tr><td style="${contentStyle}">${content}</td></tr></table>
74
+ return `
75
+ <table width="100%" style="${exports.tableCommonStyle}"><tr><td style="${contentStyle}">${content}</td></tr></table>
76
76
  `;
77
77
  }
78
78
  // function convertDividerBlockToHtml(blockData: IBlockData) {
@@ -85,12 +85,12 @@ function convertDividerBlockToHtml(blockData) {
85
85
  const { style } = blockData.data;
86
86
  const { thickness, dividerColor, ...rest } = style;
87
87
  const convertedStyle = buildStyles(rest, { perChanges: [], pxChanges: allPxAttributes });
88
- const dividerContent = `
89
- <table width="100%" cellpadding="0" cellspacing="0">
90
- <tr>
91
- <td height="${thickness}" style="font-size:1px; line-height:1px; background:${dividerColor};">&nbsp;</td>
92
- </tr>
93
- </table>
88
+ const dividerContent = `
89
+ <table width="100%" cellpadding="0" cellspacing="0">
90
+ <tr>
91
+ <td height="${thickness}" style="font-size:1px; line-height:1px; background:${dividerColor};">&nbsp;</td>
92
+ </tr>
93
+ </table>
94
94
  `;
95
95
  return appendOutlookSupport(dividerContent, convertedStyle);
96
96
  }
@@ -124,21 +124,21 @@ async function appendOutlookForImage(content, outerContainerWidth, innerContaine
124
124
  const borderAttributes = borderWidth > 0
125
125
  ? `strokeweight="${borderWidth}px" strokecolor="${borderColor}"`
126
126
  : `stroked="false"`;
127
- const outlookImage = `<!--[if mso]>
128
- <v:${useRoundRect ? "roundrect" : "rect"} xmlns:v="urn:schemas-microsoft-com:vml"
129
- style="width:${scaledWidth}px;height:${scaledHeight}px;"
130
- ${borderAttributes}
131
- ${useRoundRect ? `arcsize="${arcsize}"` : ""}
132
- fill="true" fillcolor="none">
133
- <v:fill src="${imageUrl}" type="frame" />
134
- <v:textbox inset="0,0,0,0"><div style="display:none;">.</div></v:textbox>
135
- </v:${useRoundRect ? "roundrect" : "rect"}>
127
+ const outlookImage = `<!--[if mso]>
128
+ <v:${useRoundRect ? "roundrect" : "rect"} xmlns:v="urn:schemas-microsoft-com:vml"
129
+ style="width:${scaledWidth}px;height:${scaledHeight}px;"
130
+ ${borderAttributes}
131
+ ${useRoundRect ? `arcsize="${arcsize}"` : ""}
132
+ fill="true" fillcolor="none">
133
+ <v:fill src="${imageUrl}" type="frame" />
134
+ <v:textbox inset="0,0,0,0"><div style="display:none;">.</div></v:textbox>
135
+ </v:${useRoundRect ? "roundrect" : "rect"}>
136
136
  <![endif]-->`;
137
- return `
138
- ${outlookImage}
139
- <!--[if !mso]><!-->
140
- ${content}
141
- <!--<![endif]-->
137
+ return `
138
+ ${outlookImage}
139
+ <!--[if !mso]><!-->
140
+ ${content}
141
+ <!--<![endif]-->
142
142
  `;
143
143
  }
144
144
  async function convertImageBlock(blockData, cellWidthInPx) {
@@ -172,20 +172,28 @@ async function convertImageBlock(blockData, cellWidthInPx) {
172
172
  : imageContent;
173
173
  }
174
174
  function appendOutlookForButton(content, buttonStyle, navigateToUrl, text) {
175
- const { width, buttonColor, borderColor, borderRadius, borderWidth, height, buttonPadding, color, fontFamily, fontSize, fontWeight } = buttonStyle;
176
- return `
177
- <!--[if mso]>
178
- <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"}">
179
- <w:anchorlock/>
180
- <v:textbox inset="${buttonPadding?.top || 0}px, ${buttonPadding?.left || 0}px, ${buttonPadding?.bottom || 0}px, ${buttonPadding?.right || 0}px">
181
- <center style="font-family:${fontFamily || ""};font-size:${fontSize}px;font-weight:${fontWeight};color:${color};">${text}</center>
182
- </v:textbox>
183
- </v:${borderRadius ? "roundrect" : "rect"}>
184
- <![endif]-->
185
- <!--[if !mso]><!-->
186
- ${content}
187
- <!--<![endif]-->
188
- `;
175
+ const { width = 200, height = 44, borderRadius = 0, borderColor = "transparent", borderWidth = 0, buttonColor = "none", buttonPadding = { top: 0, bottom: 0, left: 0, right: 0 }, color = "#000000", fontFamily = "Arial, sans-serif", fontSize = 16, fontWeight = 400, } = buttonStyle;
176
+ const borderAttributes = borderWidth > 0
177
+ ? `strokeweight="${borderWidth}px" strokecolor="${borderColor}"`
178
+ : `stroked="false"`;
179
+ return `
180
+ <!--[if mso]>
181
+ <v:${borderRadius ? "roundrect" : "rect"} xmlns:v="urn:schemas-microsoft-com:vml" href="${navigateToUrl}"
182
+ style="height:${height}px;v-text-anchor:middle;width:${width}px;"
183
+ arcsize="${borderRadius / height}" ${borderAttributes}
184
+ fillcolor="${buttonColor}">
185
+ <w:anchorlock/>
186
+ <v:textbox inset="${buttonPadding.top}px,${buttonPadding.left}px,${buttonPadding.bottom}px,${buttonPadding.right}px">
187
+ <center style="font-family:${fontFamily};font-size:${fontSize}px;font-weight:${fontWeight};color:${color};">
188
+ ${text}
189
+ </center>
190
+ </v:textbox>
191
+ </v:${borderRadius ? "roundrect" : "rect"}>
192
+ <![endif]-->
193
+ <!--[if !mso]><!-->
194
+ ${content}
195
+ <!--<![endif]-->
196
+ `;
189
197
  }
190
198
  function convertButtonBlock(blockData) {
191
199
  const { style, props } = blockData.data;
@@ -231,12 +239,12 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
231
239
  const { rows, columns, cellWidths } = props;
232
240
  const styles = buildStyles(rest, { perChanges: [], pxChanges: allPxAttributes });
233
241
  const gridItems = await processGridItemsInParallel(columns, childrenIds, cellWidths, cellWidthInPx, rootData);
234
- return `
235
- <table cellspacing="${columnGap}" style="width:100%; max-width:100%; ${styles}">
236
- <tbody>
237
- <tr>${gridItems.join("")}</tr>
238
- </tbody>
239
- </table>
242
+ return `
243
+ <table cellspacing="${columnGap}" style="width:100%; max-width:100%; ${styles}">
244
+ <tbody>
245
+ <tr>${gridItems.join("")}</tr>
246
+ </tbody>
247
+ </table>
240
248
  `;
241
249
  }
242
250
  async function convertGridCellBlock(blockData, rootData, cellWidth, parentCellWidth) {
package/package.json CHANGED
@@ -1,33 +1,33 @@
1
- {
2
- "name": "email-builder-utils",
3
- "version": "1.1.7",
4
- "main": "dist/index.js",
5
- "types": "dist/index.d.ts",
6
- "files": [
7
- "dist"
8
- ],
9
- "scripts": {
10
- "test": "echo \"Error: no test specified\" && exit 1",
11
- "build": "tsc",
12
- "start": "npm run build && node dist/index.js"
13
- },
14
- "repository": {
15
- "type": "git",
16
- "url": "git+https://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@github.com/Biztecno-Infra/email-builder-utils.git"
17
- },
18
- "author": "",
19
- "license": "ISC",
20
- "bugs": {
21
- "url": "https://github.com/Biztecno-Infra/email-builder-utils/issues"
22
- },
23
- "homepage": "https://github.com/Biztecno-Infra/email-builder-utils#readme",
24
- "description": "",
25
- "devDependencies": {
26
- "@types/node": "^22.13.10",
27
- "@types/pngjs": "^6.0.5",
28
- "typescript": "^5.8.2"
29
- },
30
- "dependencies": {
31
- "jimp": "^1.6.0"
32
- }
33
- }
1
+ {
2
+ "name": "email-builder-utils",
3
+ "version": "1.1.12",
4
+ "main": "dist/index.js",
5
+ "types": "dist/index.d.ts",
6
+ "files": [
7
+ "dist"
8
+ ],
9
+ "scripts": {
10
+ "test": "echo \"Error: no test specified\" && exit 1",
11
+ "build": "tsc",
12
+ "start": "npm run build && node dist/index.js"
13
+ },
14
+ "repository": {
15
+ "type": "git",
16
+ "url": "git+https://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@github.com/Biztecno-Infra/email-builder-utils.git"
17
+ },
18
+ "author": "",
19
+ "license": "ISC",
20
+ "bugs": {
21
+ "url": "https://github.com/Biztecno-Infra/email-builder-utils/issues"
22
+ },
23
+ "homepage": "https://github.com/Biztecno-Infra/email-builder-utils#readme",
24
+ "description": "",
25
+ "devDependencies": {
26
+ "@types/node": "^22.13.10",
27
+ "@types/pngjs": "^6.0.5",
28
+ "typescript": "^5.8.2"
29
+ },
30
+ "dependencies": {
31
+ "jimp": "^1.6.0"
32
+ }
33
+ }