email-builder-utils 1.1.52 → 1.1.54
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.
- package/dist/types/Template.d.ts +2 -0
- package/dist/types/Template.d.ts.map +1 -1
- package/dist/utils/blocks/button.d.ts.map +1 -1
- package/dist/utils/blocks/button.js +28 -30
- package/dist/utils/blocks/dividers.js +30 -30
- package/dist/utils/blocks/grid.d.ts.map +1 -1
- package/dist/utils/blocks/grid.js +76 -76
- package/dist/utils/blocks/image.d.ts.map +1 -1
- package/dist/utils/blocks/image.js +22 -13
- package/dist/utils/blocks/shape.js +89 -89
- package/dist/utils/blocks/text.d.ts.map +1 -1
- package/dist/utils/blocks/text.js +53 -61
- package/dist/utils/blocks/video.js +56 -56
- package/dist/utils/common.d.ts.map +1 -1
- package/dist/utils/common.js +4 -1
- package/dist/utils/convertJsonToHtml.js +183 -183
- package/dist/utils/outlookSupport.d.ts.map +1 -1
- package/dist/utils/outlookSupport.js +50 -47
- package/package.json +34 -34
|
@@ -13,189 +13,189 @@ const convertJsonToHtml = async (jsonData) => {
|
|
|
13
13
|
}
|
|
14
14
|
const { fontFamily, canvasColor, textColor, padding = {}, borderColor, borderRadius, borderWidth, borderStyle, } = rootData.style || {};
|
|
15
15
|
const { top = 0, right = 0, bottom = 0, left = 0 } = padding;
|
|
16
|
-
const rawHtml = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
17
|
-
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
|
|
18
|
-
<head>
|
|
19
|
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
20
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
21
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
22
|
-
<meta name="x-apple-disable-message-reformatting" />
|
|
23
|
-
<meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no" />
|
|
24
|
-
<!--[if gte mso 9]><xml>
|
|
25
|
-
<o:OfficeDocumentSettings>
|
|
26
|
-
<o:AllowPNG/>
|
|
27
|
-
<o:PixelsPerInch>96</o:PixelsPerInch>
|
|
28
|
-
</o:OfficeDocumentSettings>
|
|
29
|
-
</xml><![endif]-->
|
|
30
|
-
<style>
|
|
31
|
-
html, body {
|
|
32
|
-
margin: 0 !important;
|
|
33
|
-
padding: 0 !important;
|
|
34
|
-
width: 100% !important;
|
|
35
|
-
-ms-text-size-adjust: 100%;
|
|
36
|
-
-webkit-text-size-adjust: 100%;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
body, table, td, p, a {
|
|
40
|
-
font-family: ${(0, fontFallback_1.withFontFallback)(fontFamily)};
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
table, td {
|
|
44
|
-
mso-table-lspace: 0pt;
|
|
45
|
-
mso-table-rspace: 0pt;
|
|
46
|
-
border-collapse: collapse !important;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
img {
|
|
50
|
-
-ms-interpolation-mode: bicubic;
|
|
51
|
-
border: 0;
|
|
52
|
-
outline: none;
|
|
53
|
-
text-decoration: none;
|
|
54
|
-
display: block;
|
|
55
|
-
height: auto;
|
|
56
|
-
line-height: 100%;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
a {
|
|
60
|
-
text-decoration: none;
|
|
61
|
-
color: inherit;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.email-container {
|
|
65
|
-
width: 100%;
|
|
66
|
-
max-width: 600px;
|
|
67
|
-
margin: 0 auto;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.stack-column,
|
|
71
|
-
.stack-column-cell {
|
|
72
|
-
vertical-align: top;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.hide-mobile {
|
|
76
|
-
display: block !important;
|
|
77
|
-
max-height: none !important;
|
|
78
|
-
overflow: visible !important;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.hide-desktop {
|
|
82
|
-
display: none !important;
|
|
83
|
-
max-height: 0 !important;
|
|
84
|
-
overflow: hidden !important;
|
|
85
|
-
mso-hide: all !important;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
@media only screen and (max-width: 600px) {
|
|
89
|
-
body {
|
|
90
|
-
overflow-x: hidden !important;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.email-container {
|
|
94
|
-
width: 100% !important;
|
|
95
|
-
max-width: 100% !important;
|
|
96
|
-
overflow-x: hidden !important;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.stack-column,
|
|
100
|
-
.stack-column-cell {
|
|
101
|
-
display: block !important;
|
|
102
|
-
width: 100% !important;
|
|
103
|
-
max-width: 100% !important;
|
|
104
|
-
/* Prevents horizontal padding from adding to 100% width once display:block is applied */
|
|
105
|
-
box-sizing: border-box !important;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
/* Images: drop the inline pixel height so aspect ratio is preserved as width shrinks,
|
|
109
|
-
and cap width to the container. Matches the canvas ImageBlock (height:auto, max-width:100%). */
|
|
110
|
-
img {
|
|
111
|
-
height: auto !important;
|
|
112
|
-
max-width: 100% !important;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
/* Safety net for clients that keep inline max-width:600px on nested wrappers */
|
|
116
|
-
table[style*="max-width:600px"] {
|
|
117
|
-
width: 100% !important;
|
|
118
|
-
max-width: 100% !important;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
/* Column-gap spacer tds have no stacking behaviour — collapse them when columns stack */
|
|
122
|
-
.col-gap-spacer {
|
|
123
|
-
display: none !important;
|
|
124
|
-
width: 0 !important;
|
|
125
|
-
max-height: 0 !important;
|
|
126
|
-
overflow: hidden !important;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.hide-mobile {
|
|
130
|
-
display: none !important;
|
|
131
|
-
max-height: 0 !important;
|
|
132
|
-
overflow: hidden !important;
|
|
133
|
-
mso-hide: all !important;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.hide-desktop {
|
|
137
|
-
display: block !important;
|
|
138
|
-
max-height: none !important;
|
|
139
|
-
overflow: visible !important;
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
</style>
|
|
143
|
-
</head>
|
|
144
|
-
<body bgcolor="
|
|
145
|
-
<center style="width:100%;
|
|
146
|
-
|
|
147
|
-
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="
|
|
148
|
-
<tr>
|
|
149
|
-
<td align="center" bgcolor="
|
|
150
|
-
|
|
151
|
-
<!--[if mso]>
|
|
152
|
-
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600">
|
|
153
|
-
<tr>
|
|
154
|
-
<td>
|
|
155
|
-
<![endif]-->
|
|
156
|
-
|
|
157
|
-
<table
|
|
158
|
-
role="presentation"
|
|
159
|
-
class="email-container"
|
|
160
|
-
align="center"
|
|
161
|
-
bgcolor="${canvasColor || '#ffffff'}"
|
|
162
|
-
cellpadding="0"
|
|
163
|
-
cellspacing="0"
|
|
164
|
-
border="0"
|
|
165
|
-
width="100%"
|
|
166
|
-
style="
|
|
167
|
-
font-family: ${(0, fontFallback_1.withFontFallback)(fontFamily)};
|
|
168
|
-
table-layout: fixed;
|
|
169
|
-
width: 100%;
|
|
170
|
-
max-width: 600px;
|
|
171
|
-
margin: 0 auto;
|
|
172
|
-
overflow: hidden;
|
|
173
|
-
background-color: ${canvasColor || '#ffffff'};
|
|
174
|
-
${textColor ? `color: ${textColor};` : ''}
|
|
175
|
-
${borderWidth ? `border: ${borderWidth}px ${borderStyle || 'solid'} ${borderColor || 'transparent'};` : ''}
|
|
176
|
-
${borderRadius ? `border-radius: ${borderRadius}px;` : ''}"
|
|
177
|
-
>
|
|
178
|
-
<tbody>
|
|
179
|
-
<tr>
|
|
180
|
-
<td bgcolor="${canvasColor || '#ffffff'}" style="padding: ${top}px ${right}px ${bottom}px ${left}px; max-width: 600px; overflow: hidden; box-sizing: border-box; word-break: break-word; overflow-wrap: anywhere;">
|
|
181
|
-
${blocksHtml.join("")}
|
|
182
|
-
</td>
|
|
183
|
-
</tr>
|
|
184
|
-
</tbody>
|
|
185
|
-
</table>
|
|
186
|
-
|
|
187
|
-
<!--[if mso]>
|
|
188
|
-
</td>
|
|
189
|
-
</tr>
|
|
190
|
-
</table>
|
|
191
|
-
<![endif]-->
|
|
192
|
-
|
|
193
|
-
</td>
|
|
194
|
-
</tr>
|
|
195
|
-
</table>
|
|
196
|
-
|
|
197
|
-
</center>
|
|
198
|
-
</body>
|
|
16
|
+
const rawHtml = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
17
|
+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
|
|
18
|
+
<head>
|
|
19
|
+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
20
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
21
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
22
|
+
<meta name="x-apple-disable-message-reformatting" />
|
|
23
|
+
<meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no" />
|
|
24
|
+
<!--[if gte mso 9]><xml>
|
|
25
|
+
<o:OfficeDocumentSettings>
|
|
26
|
+
<o:AllowPNG/>
|
|
27
|
+
<o:PixelsPerInch>96</o:PixelsPerInch>
|
|
28
|
+
</o:OfficeDocumentSettings>
|
|
29
|
+
</xml><![endif]-->
|
|
30
|
+
<style>
|
|
31
|
+
html, body {
|
|
32
|
+
margin: 0 !important;
|
|
33
|
+
padding: 0 !important;
|
|
34
|
+
width: 100% !important;
|
|
35
|
+
-ms-text-size-adjust: 100%;
|
|
36
|
+
-webkit-text-size-adjust: 100%;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
body, table, td, p, a {
|
|
40
|
+
font-family: ${(0, fontFallback_1.withFontFallback)(fontFamily)};
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
table, td {
|
|
44
|
+
mso-table-lspace: 0pt;
|
|
45
|
+
mso-table-rspace: 0pt;
|
|
46
|
+
border-collapse: collapse !important;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
img {
|
|
50
|
+
-ms-interpolation-mode: bicubic;
|
|
51
|
+
border: 0;
|
|
52
|
+
outline: none;
|
|
53
|
+
text-decoration: none;
|
|
54
|
+
display: block;
|
|
55
|
+
height: auto;
|
|
56
|
+
line-height: 100%;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
a {
|
|
60
|
+
text-decoration: none;
|
|
61
|
+
color: inherit;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.email-container {
|
|
65
|
+
width: 100%;
|
|
66
|
+
max-width: 600px;
|
|
67
|
+
margin: 0 auto;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.stack-column,
|
|
71
|
+
.stack-column-cell {
|
|
72
|
+
vertical-align: top;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.hide-mobile {
|
|
76
|
+
display: block !important;
|
|
77
|
+
max-height: none !important;
|
|
78
|
+
overflow: visible !important;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.hide-desktop {
|
|
82
|
+
display: none !important;
|
|
83
|
+
max-height: 0 !important;
|
|
84
|
+
overflow: hidden !important;
|
|
85
|
+
mso-hide: all !important;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
@media only screen and (max-width: 600px) {
|
|
89
|
+
body {
|
|
90
|
+
overflow-x: hidden !important;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.email-container {
|
|
94
|
+
width: 100% !important;
|
|
95
|
+
max-width: 100% !important;
|
|
96
|
+
overflow-x: hidden !important;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.stack-column,
|
|
100
|
+
.stack-column-cell {
|
|
101
|
+
display: block !important;
|
|
102
|
+
width: 100% !important;
|
|
103
|
+
max-width: 100% !important;
|
|
104
|
+
/* Prevents horizontal padding from adding to 100% width once display:block is applied */
|
|
105
|
+
box-sizing: border-box !important;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* Images: drop the inline pixel height so aspect ratio is preserved as width shrinks,
|
|
109
|
+
and cap width to the container. Matches the canvas ImageBlock (height:auto, max-width:100%). */
|
|
110
|
+
img {
|
|
111
|
+
height: auto !important;
|
|
112
|
+
max-width: 100% !important;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* Safety net for clients that keep inline max-width:600px on nested wrappers */
|
|
116
|
+
table[style*="max-width:600px"] {
|
|
117
|
+
width: 100% !important;
|
|
118
|
+
max-width: 100% !important;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* Column-gap spacer tds have no stacking behaviour — collapse them when columns stack */
|
|
122
|
+
.col-gap-spacer {
|
|
123
|
+
display: none !important;
|
|
124
|
+
width: 0 !important;
|
|
125
|
+
max-height: 0 !important;
|
|
126
|
+
overflow: hidden !important;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.hide-mobile {
|
|
130
|
+
display: none !important;
|
|
131
|
+
max-height: 0 !important;
|
|
132
|
+
overflow: hidden !important;
|
|
133
|
+
mso-hide: all !important;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.hide-desktop {
|
|
137
|
+
display: block !important;
|
|
138
|
+
max-height: none !important;
|
|
139
|
+
overflow: visible !important;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
</style>
|
|
143
|
+
</head>
|
|
144
|
+
<body bgcolor="#ffffff" style="margin:0; padding:0; background-color:#ffffff;">
|
|
145
|
+
<center style="width:100%;">
|
|
146
|
+
|
|
147
|
+
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
|
|
148
|
+
<tr>
|
|
149
|
+
<td align="center" bgcolor="#ffffff">
|
|
150
|
+
|
|
151
|
+
<!--[if mso]>
|
|
152
|
+
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600">
|
|
153
|
+
<tr>
|
|
154
|
+
<td bgcolor="${canvasColor || '#ffffff'}">
|
|
155
|
+
<![endif]-->
|
|
156
|
+
|
|
157
|
+
<table
|
|
158
|
+
role="presentation"
|
|
159
|
+
class="email-container"
|
|
160
|
+
align="center"
|
|
161
|
+
bgcolor="${canvasColor || '#ffffff'}"
|
|
162
|
+
cellpadding="0"
|
|
163
|
+
cellspacing="0"
|
|
164
|
+
border="0"
|
|
165
|
+
width="100%"
|
|
166
|
+
style="
|
|
167
|
+
font-family: ${(0, fontFallback_1.withFontFallback)(fontFamily)};
|
|
168
|
+
table-layout: fixed;
|
|
169
|
+
width: 100%;
|
|
170
|
+
max-width: 600px;
|
|
171
|
+
margin: 0 auto;
|
|
172
|
+
overflow: hidden;
|
|
173
|
+
background-color: ${canvasColor || '#ffffff'};
|
|
174
|
+
${textColor ? `color: ${textColor};` : ''}
|
|
175
|
+
${borderWidth ? `border: ${borderWidth}px ${borderStyle || 'solid'} ${borderColor || 'transparent'};` : ''}
|
|
176
|
+
${borderRadius ? `border-radius: ${borderRadius}px;` : ''}"
|
|
177
|
+
>
|
|
178
|
+
<tbody>
|
|
179
|
+
<tr>
|
|
180
|
+
<td bgcolor="${canvasColor || '#ffffff'}" style="padding: ${top}px ${right}px ${bottom}px ${left}px; max-width: 600px; overflow: hidden; box-sizing: border-box; word-break: break-word; overflow-wrap: anywhere;">
|
|
181
|
+
${blocksHtml.join("")}
|
|
182
|
+
</td>
|
|
183
|
+
</tr>
|
|
184
|
+
</tbody>
|
|
185
|
+
</table>
|
|
186
|
+
|
|
187
|
+
<!--[if mso]>
|
|
188
|
+
</td>
|
|
189
|
+
</tr>
|
|
190
|
+
</table>
|
|
191
|
+
<![endif]-->
|
|
192
|
+
|
|
193
|
+
</td>
|
|
194
|
+
</tr>
|
|
195
|
+
</table>
|
|
196
|
+
|
|
197
|
+
</center>
|
|
198
|
+
</body>
|
|
199
199
|
</html>`;
|
|
200
200
|
return rawHtml;
|
|
201
201
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"outlookSupport.d.ts","sourceRoot":"","sources":["../../src/utils/outlookSupport.ts"],"names":[],"mappings":"AAKA,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,
|
|
1
|
+
{"version":3,"file":"outlookSupport.d.ts","sourceRoot":"","sources":["../../src/utils/outlookSupport.ts"],"names":[],"mappings":"AAKA,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAStD;AAOD,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,MAAM,EACf,YAAY,EAAE,MAAM,EACpB,SAAS,CAAC,EAAE,MAAM,EAClB,QAAQ,CAAC,EAAE,MAAM,UAyClB;AAED,wBAAsB,qBAAqB,CACzC,OAAO,EAAE,MAAM,EACf,mBAAmB,EAAE,MAAM,EAC3B,mBAAmB,EAAE,MAAM,EAC3B,QAAQ,EAAE,MAAM,EAChB,KAAK,GAAE,GAAQ,EACf,UAAU,CAAC,EAAE,MAAM,EACnB,WAAW,CAAC,EAAE,MAAM,mBA2FrB;AAED,wBAAsB,0BAA0B,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAe7G"}
|
|
@@ -11,8 +11,11 @@ const common_1 = require("./common");
|
|
|
11
11
|
function toOutlookBgColor(color) {
|
|
12
12
|
if (!color || color === 'transparent')
|
|
13
13
|
return '';
|
|
14
|
-
const m = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*[\d.]+)?\s*\)/);
|
|
14
|
+
const m = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([\d.]+))?\s*\)/);
|
|
15
15
|
if (m) {
|
|
16
|
+
const alpha = m[4] !== undefined ? parseFloat(m[4]) : 1;
|
|
17
|
+
if (alpha < 1)
|
|
18
|
+
return '';
|
|
16
19
|
return '#' + [m[1], m[2], m[3]].map(n => parseInt(n).toString(16).padStart(2, '0')).join('');
|
|
17
20
|
}
|
|
18
21
|
return color;
|
|
@@ -30,32 +33,32 @@ function appendOutlookSupport(content, contentStyle, className, msoWidth) {
|
|
|
30
33
|
const rawBg = extractBgColor(contentStyle);
|
|
31
34
|
const bgAttr = (0, common_1.buildOutlookBgAttr)(rawBg);
|
|
32
35
|
if (shouldHideInOutlook) {
|
|
33
|
-
return `
|
|
34
|
-
<!--[if !mso]><!-->
|
|
35
|
-
<table data-ebr-role="wrapper" role="presentation" width="100%" style="${buildStyles_1.tableCommonStyle}" class="${visibilityClass}"><tr><td${bgAttr} style="${contentStyle}">${content}</td></tr></table>
|
|
36
|
-
<!--<![endif]-->
|
|
36
|
+
return `
|
|
37
|
+
<!--[if !mso]><!-->
|
|
38
|
+
<table data-ebr-role="wrapper" role="presentation" width="100%" style="${buildStyles_1.tableCommonStyle}" class="${visibilityClass}"><tr><td${bgAttr} style="${contentStyle}">${content}</td></tr></table>
|
|
39
|
+
<!--<![endif]-->
|
|
37
40
|
`;
|
|
38
41
|
}
|
|
39
42
|
// When an explicit pixel width is provided (e.g. inside a column cell), use dual MSO/non-MSO
|
|
40
43
|
// tables. Old Outlook (Word engine) ignores max-width and can resolve width="100%" to the
|
|
41
44
|
// full email width (600px) rather than the column width, causing images/buttons to expand.
|
|
42
45
|
if (msoWidth) {
|
|
43
|
-
return `
|
|
44
|
-
<!--[if mso]>
|
|
45
|
-
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="${msoWidth}" style="border-collapse:collapse;width:${msoWidth}px;"><tr><td width="${msoWidth}"${bgAttr} style="${contentStyle}">
|
|
46
|
-
<![endif]-->
|
|
47
|
-
<!--[if !mso]><!-->
|
|
48
|
-
<table data-ebr-role="wrapper" role="presentation" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td width="100%"${bgAttr} style="${contentStyle}">
|
|
49
|
-
<!--<![endif]-->
|
|
50
|
-
${content}
|
|
51
|
-
<!--[if mso]></td></tr></table><![endif]-->
|
|
52
|
-
<!--[if !mso]><!-->
|
|
53
|
-
</td></tr></table>
|
|
54
|
-
<!--<![endif]-->
|
|
46
|
+
return `
|
|
47
|
+
<!--[if mso]>
|
|
48
|
+
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="${msoWidth}" style="border-collapse:collapse;width:${msoWidth}px;"><tr><td width="${msoWidth}"${bgAttr} style="${contentStyle}">
|
|
49
|
+
<![endif]-->
|
|
50
|
+
<!--[if !mso]><!-->
|
|
51
|
+
<table data-ebr-role="wrapper" role="presentation" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td width="100%"${bgAttr} style="${contentStyle}">
|
|
52
|
+
<!--<![endif]-->
|
|
53
|
+
${content}
|
|
54
|
+
<!--[if mso]></td></tr></table><![endif]-->
|
|
55
|
+
<!--[if !mso]><!-->
|
|
56
|
+
</td></tr></table>
|
|
57
|
+
<!--<![endif]-->
|
|
55
58
|
`;
|
|
56
59
|
}
|
|
57
|
-
return `
|
|
58
|
-
<table data-ebr-role="wrapper" role="presentation" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td width="100%"${bgAttr} style="${contentStyle}">${content}</td></tr></table>
|
|
60
|
+
return `
|
|
61
|
+
<table data-ebr-role="wrapper" role="presentation" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" style="${buildStyles_1.tableCommonStyle}; max-width:600px;" class="${visibilityClass}"><tr><td width="100%"${bgAttr} style="${contentStyle}">${content}</td></tr></table>
|
|
59
62
|
`;
|
|
60
63
|
}
|
|
61
64
|
async function appendOutlookForImage(content, outerContainerWidth, innerContainerWidth, imageUrl, style = {}, finalWidth, finalHeight) {
|
|
@@ -99,21 +102,21 @@ async function appendOutlookForImage(content, outerContainerWidth, innerContaine
|
|
|
99
102
|
if (useRoundRect && borderRadius > 0) {
|
|
100
103
|
// Use VML for border radius - wrap in table to constrain width for Old Outlook (Word engine)
|
|
101
104
|
// Use aspect="atmost" to prevent image from stretching beyond its bounds
|
|
102
|
-
outlookImage = `<!--[if mso]>
|
|
103
|
-
<table border="0" cellpadding="0" cellspacing="0" width="${vmlWidth}" style="width:${vmlWidth}px;">
|
|
104
|
-
<tr>
|
|
105
|
-
<td align="center" valign="top" width="${vmlWidth}" style="width:${vmlWidth}px;">
|
|
106
|
-
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
|
|
107
|
-
style="width:${vmlWidth}px;height:${vmlHeight}px;"
|
|
108
|
-
${borderAttributes}
|
|
109
|
-
arcsize="${arcsize}"
|
|
110
|
-
fill="true" fillcolor="none">
|
|
111
|
-
<v:fill src="${imageUrl}" type="tile" aspect="atmost" />
|
|
112
|
-
<v:textbox inset="0,0,0,0"><div style="display:none;">.</div></v:textbox>
|
|
113
|
-
</v:roundrect>
|
|
114
|
-
</td>
|
|
115
|
-
</tr>
|
|
116
|
-
</table>
|
|
105
|
+
outlookImage = `<!--[if mso]>
|
|
106
|
+
<table border="0" cellpadding="0" cellspacing="0" width="${vmlWidth}" style="width:${vmlWidth}px;">
|
|
107
|
+
<tr>
|
|
108
|
+
<td align="center" valign="top" width="${vmlWidth}" style="width:${vmlWidth}px;">
|
|
109
|
+
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
|
|
110
|
+
style="width:${vmlWidth}px;height:${vmlHeight}px;"
|
|
111
|
+
${borderAttributes}
|
|
112
|
+
arcsize="${arcsize}"
|
|
113
|
+
fill="true" fillcolor="none">
|
|
114
|
+
<v:fill src="${imageUrl}" type="tile" aspect="atmost" />
|
|
115
|
+
<v:textbox inset="0,0,0,0"><div style="display:none;">.</div></v:textbox>
|
|
116
|
+
</v:roundrect>
|
|
117
|
+
</td>
|
|
118
|
+
</tr>
|
|
119
|
+
</table>
|
|
117
120
|
<![endif]-->`;
|
|
118
121
|
}
|
|
119
122
|
else {
|
|
@@ -122,21 +125,21 @@ async function appendOutlookForImage(content, outerContainerWidth, innerContaine
|
|
|
122
125
|
const borderStyleAttr = borderWidth > 0
|
|
123
126
|
? `border: ${borderWidth}px solid ${borderColor};`
|
|
124
127
|
: '';
|
|
125
|
-
outlookImage = `<!--[if mso]>
|
|
126
|
-
<table border="0" cellpadding="0" cellspacing="0" width="${vmlWidth}" style="width:${vmlWidth}px;">
|
|
127
|
-
<tr>
|
|
128
|
-
<td align="center" valign="top" width="${vmlWidth}" style="width:${vmlWidth}px;">
|
|
129
|
-
<img src="${imageUrl}" alt="Image" border="0" width="${vmlWidth}"
|
|
130
|
-
</td>
|
|
131
|
-
</tr>
|
|
132
|
-
</table>
|
|
128
|
+
outlookImage = `<!--[if mso]>
|
|
129
|
+
<table border="0" cellpadding="0" cellspacing="0" width="${vmlWidth}" style="width:${vmlWidth}px;">
|
|
130
|
+
<tr>
|
|
131
|
+
<td align="center" valign="top" width="${vmlWidth}" style="width:${vmlWidth}px;">
|
|
132
|
+
<img src="${imageUrl}" alt="Image" border="0" width="${vmlWidth}" style="display:block; width:${vmlWidth}px; height:auto; max-width:${vmlWidth}px; ${borderStyleAttr}" />
|
|
133
|
+
</td>
|
|
134
|
+
</tr>
|
|
135
|
+
</table>
|
|
133
136
|
<![endif]-->`;
|
|
134
137
|
}
|
|
135
|
-
return `
|
|
136
|
-
${outlookImage}
|
|
137
|
-
<!--[if !mso]><!-->
|
|
138
|
-
${content}
|
|
139
|
-
<!--<![endif]-->
|
|
138
|
+
return `
|
|
139
|
+
${outlookImage}
|
|
140
|
+
<!--[if !mso]><!-->
|
|
141
|
+
${content}
|
|
142
|
+
<!--<![endif]-->
|
|
140
143
|
`;
|
|
141
144
|
}
|
|
142
145
|
async function loadImageNaturalDimensions(imageUrl) {
|
package/package.json
CHANGED
|
@@ -1,34 +1,34 @@
|
|
|
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
|
-
"user": "^0.0.0"
|
|
33
|
-
}
|
|
34
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "email-builder-utils",
|
|
3
|
+
"version": "1.1.54",
|
|
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
|
+
"user": "^0.0.0"
|
|
33
|
+
}
|
|
34
|
+
}
|