email-builder-utils 1.1.35 → 1.1.42

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 (8) hide show
  1. package/dist/utils/convertJsonToHtml.d.ts.map +1 -1
  2. package/dist/utils/convertJsonToHtml.js +84 -79
  3. package/dist/utils/fontFallback.d.ts +7 -0
  4. package/dist/utils/fontFallback.d.ts.map +1 -0
  5. package/dist/utils/fontFallback.js +65 -0
  6. package/dist/utils/jsonToHTML.d.ts.map +1 -1
  7. package/dist/utils/jsonToHTML.js +793 -418
  8. 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,oBA8GpD,CAAC"}
1
+ {"version":3,"file":"convertJsonToHtml.d.ts","sourceRoot":"","sources":["../../src/utils/convertJsonToHtml.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,GAAU,UAAU,GAAG,oBAiHpD,CAAC"}
package/dist/utils/convertJsonToHtml.js CHANGED
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.convertJsonToHtml = void 0;
4
+ const fontFallback_1 = require("./fontFallback");
4
5
  const jsonToHTML_1 = require("./jsonToHTML");
5
6
  const convertJsonToHtml = async (jsonData) => {
6
7
  const rootData = jsonData?.root?.data;
@@ -12,85 +13,89 @@ const convertJsonToHtml = async (jsonData) => {
12
13
  }
13
14
  const { fontFamily, canvasColor, textColor, padding = {}, borderColor, borderRadius, borderWidth, borderStyle, } = rootData.style || {};
14
15
  const { top = 0, right = 0, bottom = 0, left = 0 } = padding;
15
- const rawHtml = `<!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
- <meta name="x-apple-disable-message-reformatting" />
21
- <style>
22
- .responsive-table {
23
- width: 100%;
24
- max-width: 600px;
25
- }
26
- @media only screen and (max-width: 600px) {
27
- .responsive-table {
28
- width: 100% !important;
29
- }
30
- .stack-column,
31
- .stack-column td {
32
- display: block !important;
33
- width: 100% !important;
34
- max-width: 100% !important;
35
- }
36
- }
37
- .hide-mobile {
38
- display: block !important;
39
- mso-hide: all !important; /* Hide in Outlook */
40
- }
41
-
42
- .hide-desktop {
43
- display: block !important;
44
- mso-hide: all !important; /* Hide in Outlook */
45
- }
46
-
47
- @media only screen and (max-width: 600px) {
48
- .hide-mobile {
49
- display: none !important;
50
- max-height: 0 !important;
51
- overflow: hidden !important;
52
- mso-hide: all !important;
53
- }
54
- }
55
-
56
- @media only screen and (min-width: 601px) {
57
- .hide-desktop {
58
- display: none !important;
59
- max-height: 0 !important;
60
- overflow: hidden !important;
61
- mso-hide: all !important;
62
- }
63
- }
64
-
65
- </style>
66
- </head>
67
- <body>
68
- <center>
69
- <table
70
- class="responsive-table"
71
- bgcolor="${canvasColor}"
72
- style="
73
- font-family: ${fontFamily};
74
- margin: 0 auto;
75
- table-layout:fixed;
76
- width:600px;
77
- max-width:600px;
78
- background-color: ${canvasColor};
79
- color: ${textColor};
80
- padding: ${top}px ${right}px ${bottom}px ${left}px;
81
- border: ${borderWidth}px ${borderStyle} ${borderColor};
82
- border-radius: ${borderRadius}px; "
83
- >
84
- <tbody>
85
- <tr>
86
- <td style="padding: 0;">
87
- ${blocksHtml.join("")}
88
- </td>
89
- </tr>
90
- </tbody>
91
- </table>
92
- </center>
93
- </body>
16
+ const rawHtml = `<!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
+ <meta name="x-apple-disable-message-reformatting" />
22
+ <style>
23
+ .responsive-table {
24
+ width: 100%;
25
+ max-width: 600px;
26
+ }
27
+ @media only screen and (max-width: 600px) {
28
+ .responsive-table {
29
+ width: 100% !important;
30
+ }
31
+ .stack-column,
32
+ .stack-column td {
33
+ display: block !important;
34
+ width: 100% !important;
35
+ max-width: 100% !important;
36
+ }
37
+ }
38
+ .hide-mobile {
39
+ display: block !important;
40
+ }
41
+
42
+ .hide-desktop {
43
+ display: block !important;
44
+ mso-hide: all !important; /* Hide in Outlook (treated as desktop) */
45
+ }
46
+
47
+ @media only screen and (max-width: 600px) {
48
+ .hide-mobile {
49
+ display: none !important;
50
+ max-height: 0 !important;
51
+ overflow: hidden !important;
52
+ mso-hide: all !important;
53
+ }
54
+ }
55
+
56
+ @media only screen and (min-width: 601px) {
57
+ .hide-desktop {
58
+ display: none !important;
59
+ max-height: 0 !important;
60
+ overflow: hidden !important;
61
+ mso-hide: all !important;
62
+ }
63
+ }
64
+
65
+ </style>
66
+ </head>
67
+ <body style="margin:0; padding:0; background-color:${canvasColor};">
68
+ <center style="width:100%; background-color:${canvasColor};">
69
+ <table
70
+ class="responsive-table"
71
+ role="presentation"
72
+ bgcolor="${canvasColor}"
73
+ cellpadding="0"
74
+ cellspacing="0"
75
+ border="0"
76
+ width="600"
77
+ align="center"
78
+ style="
79
+ font-family: ${(0, fontFallback_1.withFontFallback)(fontFamily)};
80
+ margin: 0 auto;
81
+ table-layout:fixed;
82
+ width:600px;
83
+ max-width:600px;
84
+ background-color: ${canvasColor};
85
+ color: ${textColor};
86
+ border: ${borderWidth}px ${borderStyle} ${borderColor};
87
+ border-radius: ${borderRadius}px; "
88
+ >
89
+ <tbody>
90
+ <tr>
91
+ <td style="padding: ${top}px ${right}px ${bottom}px ${left}px;">
92
+ ${blocksHtml.join("")}
93
+ </td>
94
+ </tr>
95
+ </tbody>
96
+ </table>
97
+ </center>
98
+ </body>
94
99
  </html>`;
95
100
  return rawHtml;
96
101
  };
package/dist/utils/fontFallback.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ /**
2
+ * If the font-family value doesn't already end with a generic/web-safe family,
3
+ * append an appropriate fallback so Outlook desktop (which silently falls back
4
+ * to Times New Roman for any non-web-safe font) picks a reasonable match.
5
+ */
6
+ export declare function withFontFallback(fontFamily: string | undefined | null): string;
7
+ //# sourceMappingURL=fontFallback.d.ts.map
package/dist/utils/fontFallback.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fontFallback.d.ts","sourceRoot":"","sources":["../../src/utils/fontFallback.ts"],"names":[],"mappings":"AA6CA;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,MAAM,CAY9E"}
package/dist/utils/fontFallback.js ADDED
@@ -0,0 +1,65 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.withFontFallback = withFontFallback;
4
+ // Web-safe fonts that render natively in Outlook desktop (Word engine).
5
+ // Anything not in this set falls back silently to Times New Roman unless we
6
+ // append a generic stack. Keep lowercase for comparison.
7
+ const WEB_SAFE_FONTS = new Set([
8
+ "arial",
9
+ "arial black",
10
+ "helvetica",
11
+ "helvetica neue",
12
+ "verdana",
13
+ "tahoma",
14
+ "trebuchet ms",
15
+ "times",
16
+ "times new roman",
17
+ "georgia",
18
+ "garamond",
19
+ "courier",
20
+ "courier new",
21
+ "lucida console",
22
+ "lucida sans unicode",
23
+ "palatino",
24
+ "palatino linotype",
25
+ "book antiqua",
26
+ "impact",
27
+ "serif",
28
+ "sans-serif",
29
+ "monospace",
30
+ "cursive",
31
+ "fantasy",
32
+ "system-ui",
33
+ ]);
34
+ const DEFAULT_FALLBACK = "Arial, sans-serif";
35
+ const SERIF_FALLBACK = "Georgia, 'Times New Roman', serif";
36
+ const MONO_FALLBACK = "'Courier New', Courier, monospace";
37
+ const SERIF_HINTS = ["serif", "playfair", "merriweather", "lora", "roboto slab", "source serif", "pt serif", "noto serif"];
38
+ const MONO_HINTS = ["mono", "code", "courier", "consolas", "menlo"];
39
+ function pickGenericFallback(name) {
40
+ const lower = name.toLowerCase();
41
+ if (MONO_HINTS.some((h) => lower.includes(h)))
42
+ return MONO_FALLBACK;
43
+ if (SERIF_HINTS.some((h) => lower.includes(h)))
44
+ return SERIF_FALLBACK;
45
+ return DEFAULT_FALLBACK;
46
+ }
47
+ /**
48
+ * If the font-family value doesn't already end with a generic/web-safe family,
49
+ * append an appropriate fallback so Outlook desktop (which silently falls back
50
+ * to Times New Roman for any non-web-safe font) picks a reasonable match.
51
+ */
52
+ function withFontFallback(fontFamily) {
53
+ if (!fontFamily)
54
+ return DEFAULT_FALLBACK;
55
+ const trimmed = String(fontFamily).trim();
56
+ if (!trimmed)
57
+ return DEFAULT_FALLBACK;
58
+ const parts = trimmed.split(",").map((p) => p.trim().replace(/^["']|["']$/g, ""));
59
+ const alreadySafe = parts.some((p) => WEB_SAFE_FONTS.has(p.toLowerCase()));
60
+ if (alreadySafe)
61
+ return trimmed;
62
+ const primary = parts[0] || "";
63
+ const fallback = pickGenericFallback(primary);
64
+ return `${trimmed}, ${fallback}`;
65
+ }
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;AAGrC,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;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;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;AAYD,eAAO,MAAM,gBAAgB,kDAAkD,CAAC;AAyFhF,wBAAsB,aAAa,CACjC,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,GAAG,EACb,aAAa,EAAE,MAAM,mBAwBtB;AAmkBD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBAyL5E"}
1
+ {"version":3,"file":"jsonToHTML.d.ts","sourceRoot":"","sources":["../../src/utils/jsonToHTML.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAIrC,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;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;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;AAYD,eAAO,MAAM,gBAAgB,kDAAkD,CAAC;AAqGhF,wBAAsB,aAAa,CACjC,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,GAAG,EACb,aAAa,EAAE,MAAM,mBAwBtB;AA68BD,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,mBA0L5E"}