email-builder-utils 1.1.12 → 1.1.13
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"convertJsonToHtml.d.ts","sourceRoot":"","sources":["../../src/utils/convertJsonToHtml.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,GAAU,UAAU,GAAG,
|
|
1
|
+
{"version":3,"file":"convertJsonToHtml.d.ts","sourceRoot":"","sources":["../../src/utils/convertJsonToHtml.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,GAAU,UAAU,GAAG,oBA4EpD,CAAC"}
|
|
@@ -3,7 +3,6 @@ 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);
|
|
7
6
|
const rootData = jsonData?.root?.data;
|
|
8
7
|
const blocksHtml = [];
|
|
9
8
|
for (const childId of rootData?.childrenIds) {
|
|
@@ -13,52 +12,52 @@ const convertJsonToHtml = async (jsonData) => {
|
|
|
13
12
|
}
|
|
14
13
|
const { fontFamily, canvasColor, textColor, padding = {}, borderColor, borderRadius, borderWidth, borderStyle, } = rootData.style || {};
|
|
15
14
|
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>
|
|
15
|
+
const rawHtml = `
|
|
16
|
+
<!DOCTYPE html>
|
|
17
|
+
<html lang="en">
|
|
18
|
+
<head>
|
|
19
|
+
<meta charset="UTF-8" />
|
|
20
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
21
|
+
<title>Email Layout</title>
|
|
22
|
+
<style>
|
|
23
|
+
.responsive-table {
|
|
24
|
+
width: 100%;
|
|
25
|
+
max-width: 600px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@media only screen and (max-width: 600px) {
|
|
29
|
+
.stack-column {
|
|
30
|
+
display: block !important;
|
|
31
|
+
width: 100% !important;
|
|
32
|
+
max-width: 100% !important;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
</style>
|
|
36
|
+
</head>
|
|
37
|
+
<body>
|
|
38
|
+
<center>
|
|
39
|
+
<table
|
|
40
|
+
class="responsive-table"
|
|
41
|
+
style="
|
|
42
|
+
font-family: ${fontFamily};
|
|
43
|
+
margin: 0 auto;
|
|
44
|
+
table-layout:fixed;
|
|
45
|
+
background-color: ${canvasColor};
|
|
46
|
+
color: ${textColor};
|
|
47
|
+
padding: ${top}px ${right}px ${bottom}px ${left}px;
|
|
48
|
+
border: ${borderWidth}px ${borderStyle} ${borderColor};
|
|
49
|
+
border-radius: ${borderRadius}px; "
|
|
50
|
+
>
|
|
51
|
+
<tbody>
|
|
52
|
+
<tr>
|
|
53
|
+
<td style="padding: 0;">
|
|
54
|
+
${blocksHtml.join("")}
|
|
55
|
+
</td>
|
|
56
|
+
</tr>
|
|
57
|
+
</tbody>
|
|
58
|
+
</table>
|
|
59
|
+
</center>
|
|
60
|
+
</body>
|
|
62
61
|
</html>`;
|
|
63
62
|
return rawHtml;
|
|
64
63
|
};
|
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};"> </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};"> </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) {
|
|
@@ -176,23 +176,23 @@ function appendOutlookForButton(content, buttonStyle, navigateToUrl, text) {
|
|
|
176
176
|
const borderAttributes = borderWidth > 0
|
|
177
177
|
? `strokeweight="${borderWidth}px" strokecolor="${borderColor}"`
|
|
178
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]-->
|
|
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
196
|
`;
|
|
197
197
|
}
|
|
198
198
|
function convertButtonBlock(blockData) {
|
|
@@ -239,12 +239,12 @@ async function convertGridBlock(blockData, rootData, cellWidthInPx) {
|
|
|
239
239
|
const { rows, columns, cellWidths } = props;
|
|
240
240
|
const styles = buildStyles(rest, { perChanges: [], pxChanges: allPxAttributes });
|
|
241
241
|
const gridItems = await processGridItemsInParallel(columns, childrenIds, cellWidths, cellWidthInPx, rootData);
|
|
242
|
-
return `
|
|
243
|
-
<table cellspacing="${columnGap}" style="width:100%; max-width:100%; ${styles}">
|
|
244
|
-
<tbody>
|
|
245
|
-
<tr>${gridItems.join("")}</tr>
|
|
246
|
-
</tbody>
|
|
247
|
-
</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>
|
|
248
248
|
`;
|
|
249
249
|
}
|
|
250
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.
|
|
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.13",
|
|
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
|
+
}
|