email-builder-utils 1.1.52 → 1.1.53
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/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 +65 -63
- package/dist/utils/blocks/shape.js +89 -89
- package/dist/utils/blocks/text.d.ts.map +1 -1
- package/dist/utils/blocks/text.js +29 -26
- 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
|
@@ -88,64 +88,64 @@ async function convertVideoBlock(blockData, cellWidthInPx) {
|
|
|
88
88
|
// min-height fallback for clients that ignore the spacer GIF (e.g. some webmail).
|
|
89
89
|
const minHeight = Math.round(thumbnailW * 0.3);
|
|
90
90
|
// VML block — shown only in Outlook (Word engine supports VML, not standard HTML).
|
|
91
|
-
const outlookContent = hideOnDesktop ? '' : `<!--[if vml]>
|
|
92
|
-
<v:group xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
|
|
93
|
-
coordsize="${thumbnailW},${thumbnailH}" coordorigin="0,0"
|
|
94
|
-
href="${videoLink}"
|
|
95
|
-
style="width:${thumbnailW}px;height:${thumbnailH}px;">
|
|
96
|
-
<v:rect fill="t" stroked="f" style="position:absolute;width:${thumbnailW};height:${thumbnailH};">
|
|
97
|
-
<v:fill src="${resolvedThumbnail}" type="frame"/>
|
|
98
|
-
</v:rect>
|
|
99
|
-
<v:oval fill="t" strokecolor="#ffffff" strokeweight="3px"
|
|
100
|
-
style="position:absolute;left:${ovalLeft};top:${ovalTop};width:${ovalSize};height:${ovalSize}">
|
|
101
|
-
<v:fill color="#ffffff" opacity="100%" />
|
|
102
|
-
</v:oval>
|
|
103
|
-
<v:shape coordsize="24,32" path="m,l,32,24,16,xe" fillcolor="#000000" stroked="f"
|
|
104
|
-
style="position:absolute;left:${triLeft};top:${triTop};width:${triW};height:${triH};" />
|
|
105
|
-
</v:group>
|
|
91
|
+
const outlookContent = hideOnDesktop ? '' : `<!--[if vml]>
|
|
92
|
+
<v:group xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
|
|
93
|
+
coordsize="${thumbnailW},${thumbnailH}" coordorigin="0,0"
|
|
94
|
+
href="${videoLink}"
|
|
95
|
+
style="width:${thumbnailW}px;height:${thumbnailH}px;">
|
|
96
|
+
<v:rect fill="t" stroked="f" style="position:absolute;width:${thumbnailW};height:${thumbnailH};">
|
|
97
|
+
<v:fill src="${resolvedThumbnail}" type="frame"/>
|
|
98
|
+
</v:rect>
|
|
99
|
+
<v:oval fill="t" strokecolor="#ffffff" strokeweight="3px"
|
|
100
|
+
style="position:absolute;left:${ovalLeft};top:${ovalTop};width:${ovalSize};height:${ovalSize}">
|
|
101
|
+
<v:fill color="#ffffff" opacity="100%" />
|
|
102
|
+
</v:oval>
|
|
103
|
+
<v:shape coordsize="24,32" path="m,l,32,24,16,xe" fillcolor="#000000" stroked="f"
|
|
104
|
+
style="position:absolute;left:${triLeft};top:${triTop};width:${triW};height:${triH};" />
|
|
105
|
+
</v:group>
|
|
106
106
|
<![endif]-->`;
|
|
107
107
|
// Non-VML block — shown in all clients except Outlook.
|
|
108
|
-
const nonMsoContent = `<!--[if !vml]><!-->
|
|
109
|
-
<a href="${videoLink}" target="_blank"
|
|
110
|
-
style="display:block; text-decoration:none; background-image:url('${resolvedThumbnail}'); background-size:cover; background-position:center; ${borderCss}${radiusCss}">
|
|
111
|
-
<table cellpadding="0" cellspacing="0" border="0" width="100%"
|
|
112
|
-
background="${resolvedThumbnail}"
|
|
113
|
-
role="presentation"
|
|
114
|
-
style="background-image:url('${resolvedThumbnail}'); background-size:cover; background-position:center center; background-repeat:no-repeat; min-height:${minHeight}px;">
|
|
115
|
-
<tr>
|
|
116
|
-
<td width="25%" style="line-height:0; font-size:0; padding:0;">
|
|
117
|
-
<img src="${SPACER_GIF_URL}" width="100%" border="0" alt=""
|
|
118
|
-
style="display:block; height:auto; opacity:0; visibility:hidden;" />
|
|
119
|
-
</td>
|
|
120
|
-
<td width="50%" align="center" valign="middle"
|
|
121
|
-
style="text-align:center; vertical-align:middle; padding:0;">
|
|
122
|
-
<img src="${PLAY_ICON_URL}" width="${playIconW}" height="${playIconH}" alt="Play"
|
|
123
|
-
style="display:block; width:${playIconW}px; height:${playIconH}px; border:0; margin:0 auto;" />
|
|
124
|
-
</td>
|
|
125
|
-
<td width="25%" style="padding:0;"> </td>
|
|
126
|
-
</tr>
|
|
127
|
-
</table>
|
|
128
|
-
</a>
|
|
108
|
+
const nonMsoContent = `<!--[if !vml]><!-->
|
|
109
|
+
<a href="${videoLink}" target="_blank"
|
|
110
|
+
style="display:block; text-decoration:none; background-image:url('${resolvedThumbnail}'); background-size:cover; background-position:center; ${borderCss}${radiusCss}">
|
|
111
|
+
<table cellpadding="0" cellspacing="0" border="0" width="100%"
|
|
112
|
+
background="${resolvedThumbnail}"
|
|
113
|
+
role="presentation"
|
|
114
|
+
style="background-image:url('${resolvedThumbnail}'); background-size:cover; background-position:center center; background-repeat:no-repeat; min-height:${minHeight}px;">
|
|
115
|
+
<tr>
|
|
116
|
+
<td width="25%" style="line-height:0; font-size:0; padding:0;">
|
|
117
|
+
<img src="${SPACER_GIF_URL}" width="100%" border="0" alt=""
|
|
118
|
+
style="display:block; height:auto; opacity:0; visibility:hidden;" />
|
|
119
|
+
</td>
|
|
120
|
+
<td width="50%" align="center" valign="middle"
|
|
121
|
+
style="text-align:center; vertical-align:middle; padding:0;">
|
|
122
|
+
<img src="${PLAY_ICON_URL}" width="${playIconW}" height="${playIconH}" alt="Play"
|
|
123
|
+
style="display:block; width:${playIconW}px; height:${playIconH}px; border:0; margin:0 auto;" />
|
|
124
|
+
</td>
|
|
125
|
+
<td width="25%" style="padding:0;"> </td>
|
|
126
|
+
</tr>
|
|
127
|
+
</table>
|
|
128
|
+
</a>
|
|
129
129
|
<!--<![endif]-->`;
|
|
130
|
-
return `
|
|
131
|
-
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
|
|
132
|
-
style="border-collapse:collapse; max-width:600px; margin:0; padding:0;"
|
|
133
|
-
class="${visibilityClass}" data-block-type="video"
|
|
134
|
-
data-video-url="${videoUrl || ''}" data-youtube-url="${youtubeVideoUrl || ''}"
|
|
135
|
-
data-thumbnail-url="${thumbnailUrl || ''}" data-alt-text="${altText || ''}"
|
|
136
|
-
data-width="${typeof style?.width === 'number' ? style.width : 100}">
|
|
137
|
-
<tr>
|
|
138
|
-
<td align="${align}" style="${outerContainerStyles}">
|
|
139
|
-
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
|
|
140
|
-
align="${align}"
|
|
141
|
-
style="border-collapse:collapse; max-width:${thumbnailW}px; width:${percentWidth};">
|
|
142
|
-
<tr>
|
|
143
|
-
<td align="${align}" style="padding:0;">
|
|
144
|
-
${outlookContent}${nonMsoContent}
|
|
145
|
-
</td>
|
|
146
|
-
</tr>
|
|
147
|
-
</table>
|
|
148
|
-
</td>
|
|
149
|
-
</tr>
|
|
130
|
+
return `
|
|
131
|
+
<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
|
|
132
|
+
style="border-collapse:collapse; max-width:600px; margin:0; padding:0;"
|
|
133
|
+
class="${visibilityClass}" data-block-type="video"
|
|
134
|
+
data-video-url="${videoUrl || ''}" data-youtube-url="${youtubeVideoUrl || ''}"
|
|
135
|
+
data-thumbnail-url="${thumbnailUrl || ''}" data-alt-text="${altText || ''}"
|
|
136
|
+
data-width="${typeof style?.width === 'number' ? style.width : 100}">
|
|
137
|
+
<tr>
|
|
138
|
+
<td align="${align}" style="${outerContainerStyles}">
|
|
139
|
+
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
|
|
140
|
+
align="${align}"
|
|
141
|
+
style="border-collapse:collapse; max-width:${thumbnailW}px; width:${percentWidth};">
|
|
142
|
+
<tr>
|
|
143
|
+
<td align="${align}" style="padding:0;">
|
|
144
|
+
${outlookContent}${nonMsoContent}
|
|
145
|
+
</td>
|
|
146
|
+
</tr>
|
|
147
|
+
</table>
|
|
148
|
+
</td>
|
|
149
|
+
</tr>
|
|
150
150
|
</table>`;
|
|
151
151
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,KAAG,MAAM,GAAG,IAqBvD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM,KAAG,MAAM,GAAG,IAIrD,CAAC;AAGF,wBAAgB,kBAAkB,CAAC,KAAK,CAAC,EAAE;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,UASA;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAQvE;
|
|
1
|
+
{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,KAAG,MAAM,GAAG,IAqBvD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM,KAAG,MAAM,GAAG,IAIrD,CAAC;AAGF,wBAAgB,kBAAkB,CAAC,KAAK,CAAC,EAAE;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,UASA;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAQvE;AAcD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGxD"}
|
package/dist/utils/common.js
CHANGED
|
@@ -57,8 +57,11 @@ function encodeBlockPropsAttr(props) {
|
|
|
57
57
|
function toOutlookBgColor(color) {
|
|
58
58
|
if (!color || color === 'transparent')
|
|
59
59
|
return '';
|
|
60
|
-
const m = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*[\d.]+)?\s*\)/);
|
|
60
|
+
const m = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([\d.]+))?\s*\)/);
|
|
61
61
|
if (m) {
|
|
62
|
+
const alpha = m[4] !== undefined ? parseFloat(m[4]) : 1;
|
|
63
|
+
if (alpha < 1)
|
|
64
|
+
return '';
|
|
62
65
|
return '#' + [m[1], m[2], m[3]].map(n => parseInt(n).toString(16).padStart(2, '0')).join('');
|
|
63
66
|
}
|
|
64
67
|
return color;
|
|
@@ -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"}
|