@seliseblocks/mailcraft 0.2.0 → 0.2.2

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 (72) hide show
  1. package/DOCS.md +10 -8
  2. package/README.md +4 -3
  3. package/README.md.txt +4 -3
  4. package/dist/mailcraft-editor.bundle.js +90 -51
  5. package/dist/mailcraft-editor.bundle.js.map +3 -3
  6. package/examples/templates/activate-your-account.html +1 -1
  7. package/examples/templates/back-in-stock.html +1 -1
  8. package/examples/templates/cart-left-behind.html +1 -1
  9. package/examples/templates/community-giveaway.html +1 -1
  10. package/examples/templates/frontend-futures-invite.html +1 -1
  11. package/examples/templates/give-25-get-25.html +1 -1
  12. package/examples/templates/invoice-paid.html +1 -1
  13. package/examples/templates/meet-nova-launch.html +1 -1
  14. package/examples/templates/mega-weekend-sale.html +1 -1
  15. package/examples/templates/order-confirmed.html +1 -1
  16. package/examples/templates/rate-your-headphones.html +1 -1
  17. package/examples/templates/reset-your-password.html +1 -1
  18. package/examples/templates/thankyou-promo-code.html +1 -1
  19. package/examples/templates/the-sunday-brief.html +1 -1
  20. package/examples/templates/welcome-to-your-workspace.html +1 -1
  21. package/examples/templates/your-order-shipped.html +1 -1
  22. package/examples/templates/your-password-was-changed.html +1 -1
  23. package/examples/templates/your-signin-code.html +1 -1
  24. package/examples/vanilla.html +27 -25
  25. package/package.json +1 -1
  26. package/src/core/binder.js +21 -1
  27. package/src/core/editor-core.js +12 -2
  28. package/src/core/export.js +19 -3
  29. package/src/core/i18n/ar.js +0 -1
  30. package/src/core/i18n/bg.js +0 -1
  31. package/src/core/i18n/bn.js +0 -1
  32. package/src/core/i18n/ca.js +0 -1
  33. package/src/core/i18n/cs.js +0 -1
  34. package/src/core/i18n/da.js +0 -1
  35. package/src/core/i18n/de-CH.js +0 -1
  36. package/src/core/i18n/de.js +0 -1
  37. package/src/core/i18n/dz.js +0 -1
  38. package/src/core/i18n/el.js +0 -1
  39. package/src/core/i18n/en.js +0 -1
  40. package/src/core/i18n/es.js +0 -1
  41. package/src/core/i18n/et.js +0 -1
  42. package/src/core/i18n/fi.js +0 -1
  43. package/src/core/i18n/fr.js +0 -1
  44. package/src/core/i18n/hr.js +0 -1
  45. package/src/core/i18n/hu.js +0 -1
  46. package/src/core/i18n/it.js +0 -1
  47. package/src/core/i18n/loaders.js +78 -0
  48. package/src/core/i18n/lt.js +0 -1
  49. package/src/core/i18n/lv.js +0 -1
  50. package/src/core/i18n/nb.js +0 -1
  51. package/src/core/i18n/nl.js +0 -1
  52. package/src/core/i18n/pl.js +0 -1
  53. package/src/core/i18n/pt.js +0 -1
  54. package/src/core/i18n/ro.js +0 -1
  55. package/src/core/i18n/ru.js +0 -1
  56. package/src/core/i18n/sk.js +0 -1
  57. package/src/core/i18n/sl.js +0 -1
  58. package/src/core/i18n/sv.js +0 -1
  59. package/src/core/i18n/tables.js +5 -4
  60. package/src/core/i18n/tr.js +0 -1
  61. package/src/core/i18n/uk.js +0 -1
  62. package/src/core/import-html.js +31 -0
  63. package/src/core/storage-limits.js +16 -11
  64. package/src/core/storage.js +1 -1
  65. package/src/core/theme.js +15 -1
  66. package/src/index.js +1 -0
  67. package/src/mailcraft-editor.js +79 -23
  68. package/src/render/canvas.js +43 -6
  69. package/src/render/fields.js +17 -0
  70. package/src/render/screenshot.js +7 -1
  71. package/src/render/style.js +503 -460
  72. package/types/index.d.ts +14 -2
package/examples/templates/activate-your-account.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <body style="margin:0; padding:0; background-color:#eef2f6;">
8
8
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#eef2f6;">
9
9
  <tr>
10
- <td align="center" style="padding:24px 12px;">
10
+ <td align="center" style="padding:0;">
11
11
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; overflow:hidden;">
12
12
  <tr>
13
13
  <td align="center" style="background-color:#0065b3; padding:22px 36px;">
package/examples/templates/back-in-stock.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <body style="margin:0; padding:0; background-color:#faf7f2;">
8
8
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#faf7f2;">
9
9
  <tr>
10
- <td align="center" style="padding:24px 12px;">
10
+ <td align="center" style="padding:0;">
11
11
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; ">
12
12
  <tr>
13
13
  <td align="center" style="padding:36px 36px 8px;">
package/examples/templates/cart-left-behind.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <body style="margin:0; padding:0; background-color:#f6f6f8;">
8
8
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f6f6f8;">
9
9
  <tr>
10
- <td align="center" style="padding:24px 12px;">
10
+ <td align="center" style="padding:0;">
11
11
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; ">
12
12
  <tr>
13
13
  <td align="center" style="padding:34px 36px 8px;">
package/examples/templates/community-giveaway.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <body style="margin:0; padding:0; background-color:#0c1226;">
8
8
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0c1226;">
9
9
  <tr>
10
- <td align="center" style="padding:24px 12px;">
10
+ <td align="center" style="padding:0;">
11
11
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#131b36; ">
12
12
  <tr>
13
13
  <td align="center" style="height:10px; line-height:10px; font-size:0; padding:0;">
package/examples/templates/frontend-futures-invite.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <body style="margin:0; padding:0; background-color:#0e0c1a;">
8
8
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0e0c1a;">
9
9
  <tr>
10
- <td align="center" style="padding:24px 12px;">
10
+ <td align="center" style="padding:0;">
11
11
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#171332; ">
12
12
  <tr>
13
13
  <td align="center" style="padding:12px 36px 0;">
package/examples/templates/give-25-get-25.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <body style="margin:0; padding:0; background-color:#0f1c17;">
8
8
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0f1c17;">
9
9
  <tr>
10
- <td align="center" style="padding:24px 12px;">
10
+ <td align="center" style="padding:0;">
11
11
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#16352a; ">
12
12
  <tr>
13
13
  <td align="center" style="background-color:#1e7a4f; padding:30px 32px 26px; ">
package/examples/templates/invoice-paid.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <body style="margin:0; padding:0; background-color:#f4f6f9;">
8
8
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f6f9;">
9
9
  <tr>
10
- <td align="center" style="padding:24px 12px;">
10
+ <td align="center" style="padding:0;">
11
11
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; ">
12
12
  <tr>
13
13
  <td style="padding:30px 36px 10px;">
package/examples/templates/meet-nova-launch.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <body style="margin:0; padding:0; background-color:#0b1020;">
8
8
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0b1020;">
9
9
  <tr>
10
- <td align="center" style="padding:24px 12px;">
10
+ <td align="center" style="padding:0;">
11
11
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#111832; ">
12
12
  <tr>
13
13
  <td align="center" style="background-color:#0065b3; padding:34px 32px 30px; ">
package/examples/templates/mega-weekend-sale.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <body style="margin:0; padding:0; background-color:#ffffff;">
8
8
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#ffffff;">
9
9
  <tr>
10
- <td align="center" style="padding:24px 12px;">
10
+ <td align="center" style="padding:0;">
11
11
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#101010;">
12
12
  <tr>
13
13
  <td style="height:6px; line-height:6px; font-size:0; background-color:#d9f24f;">&nbsp;</td>
package/examples/templates/order-confirmed.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <body style="margin:0; padding:0; background-color:#f4f4f2;">
8
8
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f4f2;">
9
9
  <tr>
10
- <td align="center" style="padding:24px 12px;">
10
+ <td align="center" style="padding:0;">
11
11
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff;">
12
12
  <tr>
13
13
  <td style="padding:32px 36px 6px;">
package/examples/templates/rate-your-headphones.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <body style="margin:0; padding:0; background-color:#f2f4f8;">
8
8
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f2f4f8;">
9
9
  <tr>
10
- <td align="center" style="padding:24px 12px;">
10
+ <td align="center" style="padding:0;">
11
11
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; ">
12
12
  <tr>
13
13
  <td align="center" style="padding:36px 36px 10px;">
package/examples/templates/reset-your-password.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <body style="margin:0; padding:0; background-color:#eef2f6;">
8
8
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#eef2f6;">
9
9
  <tr>
10
- <td align="center" style="padding:24px 12px;">
10
+ <td align="center" style="padding:0;">
11
11
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; overflow:hidden;">
12
12
  <tr>
13
13
  <td align="center" style="background-color:#0065b3; padding:22px 36px;">
package/examples/templates/thankyou-promo-code.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <body style="margin:0; padding:0; background-color:#fdf8f3;">
8
8
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#fdf8f3;">
9
9
  <tr>
10
- <td align="center" style="padding:24px 12px;">
10
+ <td align="center" style="padding:0;">
11
11
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; ">
12
12
  <tr>
13
13
  <td align="center" style="padding:38px 36px 8px;">
package/examples/templates/the-sunday-brief.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <body style="margin:0; padding:0; background-color:#f1f0ec;">
8
8
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f1f0ec;">
9
9
  <tr>
10
- <td align="center" style="padding:24px 12px;">
10
+ <td align="center" style="padding:0;">
11
11
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff;">
12
12
  <tr>
13
13
  <td style="background-color:#1c1b18; padding:26px 32px;">
package/examples/templates/welcome-to-your-workspace.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <body style="margin:0; padding:0; background-color:#eef2f6;">
8
8
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#eef2f6;">
9
9
  <tr>
10
- <td align="center" style="padding:24px 12px;">
10
+ <td align="center" style="padding:0;">
11
11
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; ">
12
12
  <tr>
13
13
  <td style="height:5px; line-height:5px; font-size:0; background-color:#0065b3; ">&nbsp;</td>
package/examples/templates/your-order-shipped.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <body style="margin:0; padding:0; background-color:#eef2f6;">
8
8
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#eef2f6;">
9
9
  <tr>
10
- <td align="center" style="padding:24px 12px;">
10
+ <td align="center" style="padding:0;">
11
11
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; overflow:hidden;">
12
12
  <tr>
13
13
  <td align="center" style="background-color:#0065b3; padding:22px 36px;">
package/examples/templates/your-password-was-changed.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <body style="margin:0; padding:0; background-color:#eef2f6;">
8
8
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#eef2f6;">
9
9
  <tr>
10
- <td align="center" style="padding:24px 12px;">
10
+ <td align="center" style="padding:0;">
11
11
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; overflow:hidden;">
12
12
  <tr>
13
13
  <td align="center" style="background-color:#0065b3; padding:22px 36px;">
package/examples/templates/your-signin-code.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <body style="margin:0; padding:0; background-color:#10141c;">
8
8
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#10141c;">
9
9
  <tr>
10
- <td align="center" style="padding:24px 12px;">
10
+ <td align="center" style="padding:0;">
11
11
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#1a1f2b; ">
12
12
  <tr>
13
13
  <td align="center" style="padding:36px 36px 0;">
package/examples/vanilla.html CHANGED
@@ -218,7 +218,7 @@
218
218
  <body style="margin:0; padding:0; background-color:#eef2f6;">
219
219
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#eef2f6;">
220
220
  <tr>
221
- <td align="center" style="padding:24px 12px;">
221
+ <td align="center" style="padding:0;">
222
222
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; overflow:hidden;">
223
223
  <tr>
224
224
  <td align="center" style="background-color:#0065b3; padding:22px 36px;">
@@ -274,7 +274,7 @@
274
274
  <body style="margin:0; padding:0; background-color:#faf7f2;">
275
275
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#faf7f2;">
276
276
  <tr>
277
- <td align="center" style="padding:24px 12px;">
277
+ <td align="center" style="padding:0;">
278
278
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; ">
279
279
  <tr>
280
280
  <td align="center" style="padding:36px 36px 8px;">
@@ -339,7 +339,7 @@
339
339
  <body style="margin:0; padding:0; background-color:#f6f6f8;">
340
340
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f6f6f8;">
341
341
  <tr>
342
- <td align="center" style="padding:24px 12px;">
342
+ <td align="center" style="padding:0;">
343
343
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; ">
344
344
  <tr>
345
345
  <td align="center" style="padding:34px 36px 8px;">
@@ -415,7 +415,7 @@
415
415
  <body style="margin:0; padding:0; background-color:#0c1226;">
416
416
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0c1226;">
417
417
  <tr>
418
- <td align="center" style="padding:24px 12px;">
418
+ <td align="center" style="padding:0;">
419
419
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#131b36; ">
420
420
  <tr>
421
421
  <td align="center" style="height:10px; line-height:10px; font-size:0; padding:0;">
@@ -498,7 +498,7 @@
498
498
  <body style="margin:0; padding:0; background-color:#0e0c1a;">
499
499
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0e0c1a;">
500
500
  <tr>
501
- <td align="center" style="padding:24px 12px;">
501
+ <td align="center" style="padding:0;">
502
502
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#171332; ">
503
503
  <tr>
504
504
  <td align="center" style="padding:12px 36px 0;">
@@ -569,7 +569,7 @@
569
569
  <body style="margin:0; padding:0; background-color:#0f1c17;">
570
570
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0f1c17;">
571
571
  <tr>
572
- <td align="center" style="padding:24px 12px;">
572
+ <td align="center" style="padding:0;">
573
573
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#16352a; ">
574
574
  <tr>
575
575
  <td align="center" style="background-color:#1e7a4f; padding:30px 32px 26px; ">
@@ -640,7 +640,7 @@
640
640
  <body style="margin:0; padding:0; background-color:#f4f6f9;">
641
641
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f6f9;">
642
642
  <tr>
643
- <td align="center" style="padding:24px 12px;">
643
+ <td align="center" style="padding:0;">
644
644
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; ">
645
645
  <tr>
646
646
  <td style="padding:30px 36px 10px;">
@@ -719,7 +719,7 @@
719
719
  <body style="margin:0; padding:0; background-color:#0b1020;">
720
720
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#0b1020;">
721
721
  <tr>
722
- <td align="center" style="padding:24px 12px;">
722
+ <td align="center" style="padding:0;">
723
723
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#111832; ">
724
724
  <tr>
725
725
  <td align="center" style="background-color:#0065b3; padding:34px 32px 30px; ">
@@ -790,7 +790,7 @@
790
790
  <body style="margin:0; padding:0; background-color:#ffffff;">
791
791
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#ffffff;">
792
792
  <tr>
793
- <td align="center" style="padding:24px 12px;">
793
+ <td align="center" style="padding:0;">
794
794
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#101010;">
795
795
  <tr>
796
796
  <td style="height:6px; line-height:6px; font-size:0; background-color:#d9f24f;">&nbsp;</td>
@@ -849,7 +849,7 @@
849
849
  <body style="margin:0; padding:0; background-color:#f4f4f2;">
850
850
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f4f2;">
851
851
  <tr>
852
- <td align="center" style="padding:24px 12px;">
852
+ <td align="center" style="padding:0;">
853
853
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff;">
854
854
  <tr>
855
855
  <td style="padding:32px 36px 6px;">
@@ -931,7 +931,7 @@
931
931
  <body style="margin:0; padding:0; background-color:#f2f4f8;">
932
932
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f2f4f8;">
933
933
  <tr>
934
- <td align="center" style="padding:24px 12px;">
934
+ <td align="center" style="padding:0;">
935
935
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; ">
936
936
  <tr>
937
937
  <td align="center" style="padding:36px 36px 10px;">
@@ -1004,7 +1004,7 @@
1004
1004
  <body style="margin:0; padding:0; background-color:#eef2f6;">
1005
1005
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#eef2f6;">
1006
1006
  <tr>
1007
- <td align="center" style="padding:24px 12px;">
1007
+ <td align="center" style="padding:0;">
1008
1008
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; overflow:hidden;">
1009
1009
  <tr>
1010
1010
  <td align="center" style="background-color:#0065b3; padding:22px 36px;">
@@ -1060,7 +1060,7 @@
1060
1060
  <body style="margin:0; padding:0; background-color:#fdf8f3;">
1061
1061
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#fdf8f3;">
1062
1062
  <tr>
1063
- <td align="center" style="padding:24px 12px;">
1063
+ <td align="center" style="padding:0;">
1064
1064
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; ">
1065
1065
  <tr>
1066
1066
  <td align="center" style="padding:38px 36px 8px;">
@@ -1130,7 +1130,7 @@
1130
1130
  <body style="margin:0; padding:0; background-color:#f1f0ec;">
1131
1131
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f1f0ec;">
1132
1132
  <tr>
1133
- <td align="center" style="padding:24px 12px;">
1133
+ <td align="center" style="padding:0;">
1134
1134
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff;">
1135
1135
  <tr>
1136
1136
  <td style="background-color:#1c1b18; padding:26px 32px;">
@@ -1179,7 +1179,7 @@
1179
1179
  <body style="margin:0; padding:0; background-color:#eef2f6;">
1180
1180
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#eef2f6;">
1181
1181
  <tr>
1182
- <td align="center" style="padding:24px 12px;">
1182
+ <td align="center" style="padding:0;">
1183
1183
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; ">
1184
1184
  <tr>
1185
1185
  <td style="height:5px; line-height:5px; font-size:0; background-color:#0065b3; ">&nbsp;</td>
@@ -1243,7 +1243,7 @@
1243
1243
  <body style="margin:0; padding:0; background-color:#eef2f6;">
1244
1244
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#eef2f6;">
1245
1245
  <tr>
1246
- <td align="center" style="padding:24px 12px;">
1246
+ <td align="center" style="padding:0;">
1247
1247
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; overflow:hidden;">
1248
1248
  <tr>
1249
1249
  <td align="center" style="background-color:#0065b3; padding:22px 36px;">
@@ -1319,7 +1319,7 @@
1319
1319
  <body style="margin:0; padding:0; background-color:#eef2f6;">
1320
1320
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#eef2f6;">
1321
1321
  <tr>
1322
- <td align="center" style="padding:24px 12px;">
1322
+ <td align="center" style="padding:0;">
1323
1323
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#ffffff; overflow:hidden;">
1324
1324
  <tr>
1325
1325
  <td align="center" style="background-color:#0065b3; padding:22px 36px;">
@@ -1379,7 +1379,7 @@
1379
1379
  <body style="margin:0; padding:0; background-color:#10141c;">
1380
1380
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#10141c;">
1381
1381
  <tr>
1382
- <td align="center" style="padding:24px 12px;">
1382
+ <td align="center" style="padding:0;">
1383
1383
  <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:600px; max-width:100%; background-color:#1a1f2b; ">
1384
1384
  <tr>
1385
1385
  <td align="center" style="padding:36px 36px 0;">
@@ -1519,9 +1519,11 @@
1519
1519
 
1520
1520
  // ---- storage ------------------------------------------------------------
1521
1521
  //
1522
- // What may be uploaded is the host app's call, so the editor ships no
1523
- // defaults: with a provider wired and no limits set, uploads are refused.
1524
- // The values below are a reasonable email starting point, not a rule --
1522
+ // What may be uploaded is the host app's call, so sizes ship undefaulted:
1523
+ // with a provider wired and no `maxBytes`, uploads are refused. Formats are
1524
+ // the exception -- every image type is allowed unless `accept` narrows it,
1525
+ // which is why no list appears below. Add one when your audience's mail
1526
+ // clients demand it --
1525
1527
  //
1526
1528
  // * JPEG/PNG/GIF render everywhere. WebP does not: Outlook on Windows
1527
1529
  // draws mail with the Word engine and shows nothing at all. AVIF is
@@ -1531,11 +1533,11 @@
1531
1533
  // * Email bodies are 600px wide, so 1600px leaves room for a retina
1532
1534
  // asset without letting a 6000px camera original through.
1533
1535
  //
1534
- // SVG is missing on purpose. It is a script host, and it renders inside the
1535
- // editor's own DOM as soon as it appears as a library tile -- listing it in
1536
- // `accept` is not enough on its own, it also needs `allowSvg: true`.
1536
+ // SVG is excluded from the default. It is a script host, and it renders
1537
+ // inside the editor's own DOM as soon as it appears as a library tile --
1538
+ // listing it in `accept` is not enough on its own, it also needs
1539
+ // `allowSvg: true`.
1537
1540
  editor.storageLimits = {
1538
- accept: ['image/jpeg', 'image/png', 'image/gif'],
1539
1541
  maxBytes: 2 * 1024 * 1024,
1540
1542
  maxWidth: 1600,
1541
1543
  maxHeight: 1600,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seliseblocks/mailcraft",
3
- "version": "0.2.0",
3
+ "version": "0.2.2",
4
4
  "description": "Framework-agnostic drag-and-drop email template editor, packaged as a zero-dependency Web Component.",
5
5
  "license": "MIT",
6
6
  "author": "SELISE Digital Platforms",
package/src/core/binder.js CHANGED
@@ -19,7 +19,27 @@ export function binder(getProps, set, core) {
19
19
  set(key, Math.min(max, Math.max(min, Number.isFinite(n) ? n : (getProps()[key] ?? min))));
20
20
  },
21
21
  }),
22
- color: (label, key) => ({ kind: 'color', label, value: getProps()[key] ?? '', swatch: /^#/.test(getProps()[key] || '') ? getProps()[key] : '#ffffff', onChange: (v) => set(key, v) }),
22
+ /*
23
+ * `opts.transparent` adds a "no fill" switch beside the swatch. The hex
24
+ * box always accepted any CSS colour word -- typing `transparent` into it
25
+ * already worked -- but nothing said so, and a native colour input cannot
26
+ * express "none", so the one value a page or content background most
27
+ * often wants was effectively unreachable. `opts.solid` is what the
28
+ * switch restores when it is turned back off.
29
+ */
30
+ color: (label, key, opts) => {
31
+ const raw = getProps()[key] ?? '';
32
+ const v = String(raw).trim();
33
+ const transparent = /^(transparent|none)$/i.test(v) || /^rgba\([^)]*,\s*0*(?:\.0+)?\s*\)$/i.test(v);
34
+ return {
35
+ kind: 'color', label, value: raw,
36
+ swatch: /^#/.test(raw || '') ? raw : '#ffffff',
37
+ transparent,
38
+ clearable: !!(opts && opts.transparent),
39
+ onChange: (x) => set(key, x),
40
+ onToggleTransparent: () => set(key, transparent ? ((opts && opts.solid) || '#ffffff') : 'transparent'),
41
+ };
42
+ },
23
43
  // A native range slider commits on every drag tick -- dozens a second --
24
44
  // and each one used to trigger a full doc clone + re-render (see
25
45
  // `commit`), which is what made dragging feel like stutter instead of a
package/src/core/editor-core.js CHANGED
@@ -1488,8 +1488,18 @@ export class EditorCore {
1488
1488
  return decorate([
1489
1489
  B.head('Canvas'),
1490
1490
  B.slider('Content area width', 'width', 280, 900, 5, 'px'),
1491
- B.color('Background color', 'bg'),
1492
- B.color('Content area background color', 'contentBg'),
1491
+ // The page section: everything outside the content column. Its colour
1492
+ // was always here, but with nothing painting it in the editor and no
1493
+ // way to size it, the band around a template could only be seen (and
1494
+ // never adjusted) in a sent message.
1495
+ B.color('Page background color', 'bg', { transparent: true, solid: '#eef2f7' }),
1496
+ group('Space around content', [
1497
+ B.range('Top & bottom', 'padY', 0, 120, 2, 'px'),
1498
+ B.range('Sides', 'padX', 0, 120, 2, 'px'),
1499
+ ]),
1500
+ B.head('Content area'),
1501
+ B.color('Content area background color', 'contentBg', { transparent: true, solid: '#ffffff' }),
1502
+ B.range('Corner radius', 'radius', 0, 48, 1, 'px'),
1493
1503
  B.head('Type & color'),
1494
1504
  B.sel('Default font', 'font', this.fontOptions(false)),
1495
1505
  B.color('Text color', 'text'),
package/src/core/export.js CHANGED
@@ -133,13 +133,29 @@ export function buildHtml(state, root, boxCss) {
133
133
  ? cssBody
134
134
  : '<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>\n ' + cells + '\n </tr></table>';
135
135
  const tdBg = rp.bgImage
136
- ? 'background-color:' + (rp.bg || t.contentBg) + ';background-image:' + (rp.overlay ? 'linear-gradient(rgba(20,22,24,' + (rp.overlay / 100) + '),rgba(20,22,24,' + (rp.overlay / 100) + ')),' : '') + 'url(&quot;' + cssUrl(rp.bgImage) + '&quot;);background-size:' + (rp.bgSize || 'cover') + ';background-position:' + (rp.bgPos || 'center') + ';background-repeat:' + (rp.bgRepeat || 'no-repeat') + ';'
137
- : 'background:' + (rp.bg || t.contentBg) + ';';
136
+ ? 'background-color:' + (rp.bg || t.contentBg || 'transparent') + ';background-image:' + (rp.overlay ? 'linear-gradient(rgba(20,22,24,' + (rp.overlay / 100) + '),rgba(20,22,24,' + (rp.overlay / 100) + ')),' : '') + 'url(&quot;' + cssUrl(rp.bgImage) + '&quot;);background-size:' + (rp.bgSize || 'cover') + ';background-position:' + (rp.bgPos || 'center') + ';background-repeat:' + (rp.bgRepeat || 'no-repeat') + ';'
137
+ // Falls all the way through to `transparent`: a row inherits the
138
+ // content column's background, and that column may itself be unpainted
139
+ // now that it can be -- 'background:;' is not a declaration.
140
+ : 'background:' + (rp.bg || t.contentBg || 'transparent') + ';';
138
141
  const tdBorder = rowBorderCss(rp)
139
142
  + (rp.radius ? 'border-radius:' + rp.radius + 'px;' : '')
140
143
  + (rp.shadow ? 'box-shadow:' + rp.shadow + ';' : '')
141
144
  + ((rp.mt || rp.mr || rp.mb || rp.ml || rp.my) ? 'margin:' + rowMargin(rp) + ';' : '');
142
145
  return ' <tr>\n <td style="padding:' + rowPad(rp) + ';' + tdBg + tdBorder + '">\n ' + body + '\n </td>\n </tr>';
143
146
  }).join('\n') + (logic.tail ? '\n ' + logic.tail : '');
144
- return '<!doctype html>\n<html lang="en">\n<head>\n<meta charset="utf-8">\n<meta name="viewport" content="width=device-width,initial-scale=1">\n<meta name="color-scheme" content="light dark">\n<title>' + 'Email' + '</title>\n</head>\n<body style="margin:0;padding:0;background:' + t.bg + ';font-family:' + t.font.replace(/"/g, "'") + ';color:' + t.text + ';-webkit-font-smoothing:antialiased;">\n<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:' + t.bg + ';">\n <tr><td align="center" style="padding:24px 12px;">\n <table role="presentation" width="' + t.width + '" cellpadding="0" cellspacing="0" border="0" style="width:' + t.width + 'px;max-width:100%;background:' + t.contentBg + ';">\n' + rows + '\n </table>\n </td></tr>\n</table>\n</body>\n</html>';
147
+ // The page section -- the full-width area the content column sits on. Its
148
+ // padding is the band a mail client shows around the template, and `radius`
149
+ // is the content column's own shape. The padding used to be a hard-coded
150
+ // `24px 12px` here -- an unreachable strip around every sent template -- so
151
+ // it now comes from the document and starts at 0. A background of
152
+ // `transparent` (or any rgba value) is passed through untouched: clients
153
+ // that honour it let their own surface show through, the rest fall back to
154
+ // their default page colour.
155
+ const pageBg = t.bg || 'transparent';
156
+ const pagePad = (t.padY || t.padX) ? (t.padY || 0) + 'px ' + (t.padX || 0) + 'px' : '0';
157
+ // `overflow:hidden` is what actually clips a row's own background to the
158
+ // rounded corner; without it the first and last rows paint square over it.
159
+ const contentShape = t.radius ? 'border-radius:' + t.radius + 'px;overflow:hidden;' : '';
160
+ return '<!doctype html>\n<html lang="en">\n<head>\n<meta charset="utf-8">\n<meta name="viewport" content="width=device-width,initial-scale=1">\n<meta name="color-scheme" content="light dark">\n<title>' + 'Email' + '</title>\n</head>\n<body style="margin:0;padding:0;background:' + pageBg + ';font-family:' + t.font.replace(/"/g, "'") + ';color:' + t.text + ';-webkit-font-smoothing:antialiased;">\n<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:' + pageBg + ';">\n <tr><td align="center" style="padding:' + pagePad + ';">\n <table role="presentation" width="' + t.width + '" cellpadding="0" cellspacing="0" border="0" style="width:' + t.width + 'px;max-width:100%;background:' + (t.contentBg || 'transparent') + ';' + contentShape + '">\n' + rows + '\n </table>\n </td></tr>\n</table>\n</body>\n</html>';
145
161
  }
package/src/core/i18n/ar.js CHANGED
@@ -120,7 +120,6 @@ export const AR = {
120
120
  'storage.uploading': 'جارٍ رفع {count}…',
121
121
  'storage.errLoadFailed': 'تعذّر تحميل مكتبة الملفات — {reason}',
122
122
  'storage.errNoLimits': 'الرفع معطّل: لم يحدّد هذا التطبيق أي حدود للرفع.',
123
- 'storage.errNoAccept': 'الرفع معطّل: لم يُسمح بأي صيغة ملفات.',
124
123
  'storage.errNoMaxBytes': 'الرفع معطّل: لم يُحدَّد حد أقصى لحجم الملف.',
125
124
  'storage.errTooLarge': 'حجم {name} هو {size} — والحد هو {max}.',
126
125
  'storage.errFormat': '{name} ملف من نوع {type}، وهو غير مسموح به هنا.',
package/src/core/i18n/bg.js CHANGED
@@ -102,7 +102,6 @@ export const BG = {
102
102
  'storage.uploading': 'Качване на {count}…',
103
103
  'storage.errLoadFailed': 'Библиотеката с файлове не можа да се зареди — {reason}',
104
104
  'storage.errNoLimits': 'Качването е изключено: това приложение не е задало ограничения за качване.',
105
- 'storage.errNoAccept': 'Качването е изключено: не са разрешени файлови формати.',
106
105
  'storage.errNoMaxBytes': 'Качването е изключено: не е зададен максимален размер на файл.',
107
106
  'storage.errTooLarge': '{name} е {size} — ограничението е {max}.',
108
107
  'storage.errFormat': '{name} е файл от тип {type}, който не е разрешен тук.',
package/src/core/i18n/bn.js CHANGED
@@ -119,7 +119,6 @@ export const BN = {
119
119
  'storage.uploading': '{count}টি আপলোড হচ্ছে…',
120
120
  'storage.errLoadFailed': 'ফাইল লাইব্রেরি লোড করা যায়নি — {reason}',
121
121
  'storage.errNoLimits': 'আপলোড বন্ধ: এই অ্যাপ কোনো আপলোড সীমা নির্ধারণ করেনি।',
122
- 'storage.errNoAccept': 'আপলোড বন্ধ: কোনো ফাইল ফরম্যাট অনুমোদন করা হয়নি।',
123
122
  'storage.errNoMaxBytes': 'আপলোড বন্ধ: সর্বোচ্চ ফাইল আকার নির্ধারণ করা হয়নি।',
124
123
  'storage.errTooLarge': '{name} এর আকার {size} — সীমা {max}।',
125
124
  'storage.errFormat': '{name} একটি {type} ফাইল, যা এখানে অনুমোদিত নয়।',
package/src/core/i18n/ca.js CHANGED
@@ -102,7 +102,6 @@ export const CA = {
102
102
  'storage.uploading': 'S’estan pujant {count}…',
103
103
  'storage.errLoadFailed': 'No s’ha pogut carregar la biblioteca de fitxers — {reason}',
104
104
  'storage.errNoLimits': 'Les pujades estan desactivades: aquesta aplicació no ha definit cap límit de pujada.',
105
- 'storage.errNoAccept': 'Les pujades estan desactivades: no s’ha permès cap format de fitxer.',
106
105
  'storage.errNoMaxBytes': 'Les pujades estan desactivades: no s’ha definit cap mida màxima de fitxer.',
107
106
  'storage.errTooLarge': '{name} fa {size} — el límit és {max}.',
108
107
  'storage.errFormat': '{name} és un fitxer {type}, que no s’admet aquí.',
package/src/core/i18n/cs.js CHANGED
@@ -102,7 +102,6 @@ export const CS = {
102
102
  'storage.uploading': 'Nahrávání {count}…',
103
103
  'storage.errLoadFailed': 'Knihovnu souborů se nepodařilo načíst — {reason}',
104
104
  'storage.errNoLimits': 'Nahrávání je vypnuté: tato aplikace nenastavila žádné limity nahrávání.',
105
- 'storage.errNoAccept': 'Nahrávání je vypnuté: nebyl povolen žádný formát souboru.',
106
105
  'storage.errNoMaxBytes': 'Nahrávání je vypnuté: není nastavena maximální velikost souboru.',
107
106
  'storage.errTooLarge': '{name} má {size} — limit je {max}.',
108
107
  'storage.errFormat': '{name} je soubor typu {type}, který tu není povolen.',
package/src/core/i18n/da.js CHANGED
@@ -102,7 +102,6 @@ export const DA = {
102
102
  'storage.uploading': 'Uploader {count}…',
103
103
  'storage.errLoadFailed': 'Filbiblioteket kunne ikke indlæses — {reason}',
104
104
  'storage.errNoLimits': 'Upload er slået fra: denne app har ikke sat nogen uploadgrænser.',
105
- 'storage.errNoAccept': 'Upload er slået fra: ingen filformater er tilladt.',
106
105
  'storage.errNoMaxBytes': 'Upload er slået fra: der er ikke sat nogen maksimal filstørrelse.',
107
106
  'storage.errTooLarge': '{name} er {size} — grænsen er {max}.',
108
107
  'storage.errFormat': '{name} er en {type}-fil, som ikke er tilladt her.',
package/src/core/i18n/de-CH.js CHANGED
@@ -102,7 +102,6 @@ export const DE_CH = {
102
102
  'storage.uploading': '{count} werden hochgeladen…',
103
103
  'storage.errLoadFailed': 'Die Dateibibliothek konnte nicht geladen werden — {reason}',
104
104
  'storage.errNoLimits': 'Uploads sind deaktiviert: Diese Anwendung hat keine Upload-Limiten gesetzt.',
105
- 'storage.errNoAccept': 'Uploads sind deaktiviert: Es wurden keine Dateiformate freigegeben.',
106
105
  'storage.errNoMaxBytes': 'Uploads sind deaktiviert: Es wurde keine maximale Dateigrösse festgelegt.',
107
106
  'storage.errTooLarge': '{name} ist {size} gross — das Limit liegt bei {max}.',
108
107
  'storage.errFormat': '{name} ist eine {type}-Datei, die hier nicht erlaubt ist.',
package/src/core/i18n/de.js CHANGED
@@ -102,7 +102,6 @@ export const DE = {
102
102
  'storage.uploading': '{count} werden hochgeladen…',
103
103
  'storage.errLoadFailed': 'Die Dateibibliothek konnte nicht geladen werden — {reason}',
104
104
  'storage.errNoLimits': 'Uploads sind deaktiviert: Diese Anwendung hat keine Upload-Limits gesetzt.',
105
- 'storage.errNoAccept': 'Uploads sind deaktiviert: Es wurden keine Dateiformate freigegeben.',
106
105
  'storage.errNoMaxBytes': 'Uploads sind deaktiviert: Es wurde keine maximale Dateigröße festgelegt.',
107
106
  'storage.errTooLarge': '{name} ist {size} groß — das Limit liegt bei {max}.',
108
107
  'storage.errFormat': '{name} ist eine {type}-Datei, die hier nicht erlaubt ist.',
package/src/core/i18n/dz.js CHANGED
@@ -122,7 +122,6 @@ export const DZ = {
122
122
  'storage.uploading': '{count} ཡར་འཇུག་འབད་བཞིན་འདུག…',
123
123
  'storage.errLoadFailed': 'ཡིག་སྣོད་མཛོད་མངོན་གསལ་མ་ཚུགས — {reason}',
124
124
  'storage.errNoLimits': 'ཡར་འཇུག་བཀག་ནུག: གློག་རིམ་འདི་གིས་ཡར་འཇུག་གི་ཚད་གཞི་བཟོ་མ་བཞག།',
125
- 'storage.errNoAccept': 'ཡར་འཇུག་བཀག་ནུག: ཡིག་སྣོད་རྣམ་གཞག་ག་ནི་ཡང་ཆོག་མ་བཏུབ།',
126
125
  'storage.errNoMaxBytes': 'ཡར་འཇུག་བཀག་ནུག: ཡིག་སྣོད་ཀྱི་ཚད་མཐོ་ཤོས་བཀོད་མ་བཞག།',
127
126
  'storage.errTooLarge': '{name} འདི {size} ཨིན — ཚད་གཞི {max} ཨིན།',
128
127
  'storage.errFormat': '{name} འདི {type} ཡིག་སྣོད་ཨིན། ནཱ་ལུ་ཆོག་མི་འཐོབ།',
package/src/core/i18n/el.js CHANGED
@@ -102,7 +102,6 @@ export const EL = {
102
102
  'storage.uploading': 'Μεταφόρτωση {count}…',
103
103
  'storage.errLoadFailed': 'Δεν ήταν δυνατή η φόρτωση της βιβλιοθήκης αρχείων — {reason}',
104
104
  'storage.errNoLimits': 'Οι μεταφορτώσεις είναι απενεργοποιημένες: αυτή η εφαρμογή δεν έχει ορίσει όρια μεταφόρτωσης.',
105
- 'storage.errNoAccept': 'Οι μεταφορτώσεις είναι απενεργοποιημένες: δεν έχει επιτραπεί κανένας τύπος αρχείου.',
106
105
  'storage.errNoMaxBytes': 'Οι μεταφορτώσεις είναι απενεργοποιημένες: δεν έχει οριστεί μέγιστο μέγεθος αρχείου.',
107
106
  'storage.errTooLarge': 'Το {name} είναι {size} — το όριο είναι {max}.',
108
107
  'storage.errFormat': 'Το {name} είναι αρχείο {type}, που δεν επιτρέπεται εδώ.',
package/src/core/i18n/en.js CHANGED
@@ -145,7 +145,6 @@ export const EN = {
145
145
  'storage.uploading': 'Uploading {count}…',
146
146
  'storage.errLoadFailed': 'The file library could not be loaded — {reason}',
147
147
  'storage.errNoLimits': 'Uploads are switched off: this app has not set any upload limits.',
148
- 'storage.errNoAccept': 'Uploads are switched off: no file formats have been allowed.',
149
148
  'storage.errNoMaxBytes': 'Uploads are switched off: no maximum file size has been set.',
150
149
  'storage.errTooLarge': '{name} is {size} — the limit is {max}.',
151
150
  'storage.errFormat': '{name} is a {type} file, which is not allowed here.',
package/src/core/i18n/es.js CHANGED
@@ -102,7 +102,6 @@ export const ES = {
102
102
  'storage.uploading': 'Subiendo {count}…',
103
103
  'storage.errLoadFailed': 'No se pudo cargar la biblioteca de archivos — {reason}',
104
104
  'storage.errNoLimits': 'Las subidas están desactivadas: esta aplicación no ha definido ningún límite de subida.',
105
- 'storage.errNoAccept': 'Las subidas están desactivadas: no se ha permitido ningún formato de archivo.',
106
105
  'storage.errNoMaxBytes': 'Las subidas están desactivadas: no se ha definido un tamaño máximo de archivo.',
107
106
  'storage.errTooLarge': '{name} pesa {size} — el límite es {max}.',
108
107
  'storage.errFormat': '{name} es un archivo {type}, que no se permite aquí.',