@seliseblocks/mailcraft 0.2.13 → 0.2.15

package/src/core/layout-style.js

@@ -1,46 +1,46 @@
-/**
- * Pure style-computation functions shared by the live renderer and the export
- * builder, ported verbatim. Objects use camelCase keys so they can be applied
- * directly via `Object.assign(el.style, obj)`.
- */
-
-import { cssUrl } from './sanitize.js';
-export function pad(p) {
-  return (p.py || 0) + 'px ' + (p.px || 0) + 'px';
-}
-
-export function boxStyle(p) {
-  const on = (key) => p[key] !== false;
-  const side = (key) => (p.bBorder && on(key) ? p.bBorder + 'px ' + (p.bStyle || 'solid') + ' ' + (p.bLine || '#e2e2e5') : '0');
-  return {
-    background: p.bBg || 'transparent',
-    borderTop: side('bTop'), borderRight: side('bRight'), borderBottom: side('bBottom'), borderLeft: side('bLeft'),
-    borderRadius: (p.bRadius || 0) + 'px',
-    padding: (p.bPad || 0) + 'px',
-  };
-}
-
-export function boxCss(p) {
-  const bits = [];
-  if (p.bBg) bits.push('background:' + p.bBg);
-  if (p.bBorder) {
-    const value = p.bBorder + 'px ' + (p.bStyle || 'solid') + ' ' + (p.bLine || '#e2e2e5');
-    const sides = { top: p.bTop !== false, right: p.bRight !== false, bottom: p.bBottom !== false, left: p.bLeft !== false };
-    if (sides.top && sides.right && sides.bottom && sides.left) bits.push('border:' + value);
-    else Object.keys(sides).filter((key) => sides[key]).forEach((key) => bits.push('border-' + key + ':' + value));
-  }
-  if (p.bRadius) bits.push('border-radius:' + p.bRadius + 'px');
-  if (p.bPad) bits.push('padding:' + p.bPad + 'px');
-  return bits.length ? bits.join(';') + ';' : 'margin:0';
-}
-
-/** A row's effective padding as a four-value CSS shorthand. `pt/pb/pl/pr` are optional per-side overrides (set by the inspector's "Per-side padding" split, or by the importer for asymmetric source padding); wherever a side is absent it follows the linked `py`/`px` pair, so documents that never split keep behaving exactly as before. */
+/**
+ * Pure style-computation functions shared by the live renderer and the export
+ * builder, ported verbatim. Objects use camelCase keys so they can be applied
+ * directly via `Object.assign(el.style, obj)`.
+ */
+
+import { cssUrl } from './sanitize.js';
+export function pad(p) {
+  return (p.py || 0) + 'px ' + (p.px || 0) + 'px';
+}
+
+export function boxStyle(p) {
+  const on = (key) => p[key] !== false;
+  const side = (key) => (p.bBorder && on(key) ? p.bBorder + 'px ' + (p.bStyle || 'solid') + ' ' + (p.bLine || '#e2e2e5') : '0');
+  return {
+    background: p.bBg || 'transparent',
+    borderTop: side('bTop'), borderRight: side('bRight'), borderBottom: side('bBottom'), borderLeft: side('bLeft'),
+    borderRadius: (p.bRadius || 0) + 'px',
+    padding: (p.bPad || 0) + 'px',
+  };
+}
+
+export function boxCss(p) {
+  const bits = [];
+  if (p.bBg) bits.push('background:' + p.bBg);
+  if (p.bBorder) {
+    const value = p.bBorder + 'px ' + (p.bStyle || 'solid') + ' ' + (p.bLine || '#e2e2e5');
+    const sides = { top: p.bTop !== false, right: p.bRight !== false, bottom: p.bBottom !== false, left: p.bLeft !== false };
+    if (sides.top && sides.right && sides.bottom && sides.left) bits.push('border:' + value);
+    else Object.keys(sides).filter((key) => sides[key]).forEach((key) => bits.push('border-' + key + ':' + value));
+  }
+  if (p.bRadius) bits.push('border-radius:' + p.bRadius + 'px');
+  if (p.bPad) bits.push('padding:' + p.bPad + 'px');
+  return bits.length ? bits.join(';') + ';' : 'margin:0';
+}
+
+/** A row's effective padding as a four-value CSS shorthand. `pt/pb/pl/pr` are optional per-side overrides (set by the inspector's "Per-side padding" split, or by the importer for asymmetric source padding); wherever a side is absent it follows the linked `py`/`px` pair, so documents that never split keep behaving exactly as before. */
 export function rowPad(p) {
-  const t = p.pt ?? p.py ?? 0;
-  const b = p.pb ?? p.py ?? 0;
-  const l = p.pl ?? p.px ?? 0;
-  const r = p.pr ?? p.px ?? 0;
-  return t + 'px ' + r + 'px ' + b + 'px ' + l + 'px';
+  const t = p.pt ?? p.py ?? 0;
+  const b = p.pb ?? p.py ?? 0;
+  const l = p.pl ?? p.px ?? 0;
+  const r = p.pr ?? p.px ?? 0;
+  return t + 'px ' + r + 'px ' + b + 'px ' + l + 'px';
 }
 
 /** A row's outside spacing in CSS clockwise order, with the old vertical `my` value as a saved-document fallback. Empty horizontal margins can remain `auto` in the live canvas so the advanced max-width control stays centered. */
@@ -52,64 +52,64 @@ export function rowMargin(p, centerEmpty) {
   const emptyHorizontal = centerEmpty && !r && !l;
   return t + 'px ' + (emptyHorizontal ? 'auto' : r + 'px') + ' ' + b + 'px ' + (emptyHorizontal ? 'auto' : l + 'px');
 }
-
-/** Which sides a row's border draws on. Sides default ON (`!== false`) so documents saved before per-side toggles existed keep their full border. */
-export function rowBorderSides(p) {
-  return { top: p.bTop !== false, right: p.bRight !== false, bottom: p.bBottom !== false, left: p.bLeft !== false };
-}
-
-/** The row border as an inline-CSS string (export path). Empty when the width is 0 or every side is toggled off. */
-export function rowBorderCss(p) {
-  if (!p.border) return '';
-  const s = rowBorderSides(p);
-  const value = p.border + 'px ' + (p.borderStyle || 'solid') + ' ' + (p.lineColor || '#e2e2e5');
-  if (s.top && s.right && s.bottom && s.left) return 'border:' + value + ';';
-  return ['top', 'right', 'bottom', 'left'].filter((k) => s[k]).map((k) => 'border-' + k + ':' + value + ';').join('');
-}
-
-export function rowBg(p) {
-  const ov = (p.overlay || 0) / 100;
-  const layers = [];
-  if (p.bgImage && ov) layers.push('linear-gradient(rgba(20,22,24,' + ov + '),rgba(20,22,24,' + ov + '))');
-  if (p.bgImage) layers.push('url("' + cssUrl(p.bgImage) + '")');
-  const s = rowBorderSides(p);
-  const side = (on) => (p.border && on ? p.border + 'px ' + (p.borderStyle || 'solid') + ' ' + (p.lineColor || '#e2e2e5') : '0');
-  return {
-    backgroundColor: p.bg || 'transparent',
-    backgroundImage: layers.length ? layers.join(',') : 'none',
-    backgroundSize: p.bgSize || 'cover',
-    backgroundPosition: p.bgPos || 'center',
-    backgroundRepeat: p.bgRepeat || 'no-repeat',
-    borderTop: side(s.top),
-    borderRight: side(s.right),
-    borderBottom: side(s.bottom),
-    borderLeft: side(s.left),
-    borderRadius: (p.radius || 0) + 'px',
-    // A raw CSS string, not a boolean: imports keep the source's exact
-    // shadow; the inspector toggle writes/clears a standard one.
-    boxShadow: p.shadow || 'none',
-    maxWidth: (p.maxW || 100) + '%',
+
+/** Which sides a row's border draws on. Sides default ON (`!== false`) so documents saved before per-side toggles existed keep their full border. */
+export function rowBorderSides(p) {
+  return { top: p.bTop !== false, right: p.bRight !== false, bottom: p.bBottom !== false, left: p.bLeft !== false };
+}
+
+/** The row border as an inline-CSS string (export path). Empty when the width is 0 or every side is toggled off. */
+export function rowBorderCss(p) {
+  if (!p.border) return '';
+  const s = rowBorderSides(p);
+  const value = p.border + 'px ' + (p.borderStyle || 'solid') + ' ' + (p.lineColor || '#e2e2e5');
+  if (s.top && s.right && s.bottom && s.left) return 'border:' + value + ';';
+  return ['top', 'right', 'bottom', 'left'].filter((k) => s[k]).map((k) => 'border-' + k + ':' + value + ';').join('');
+}
+
+export function rowBg(p) {
+  const ov = (p.overlay || 0) / 100;
+  const layers = [];
+  if (p.bgImage && ov) layers.push('linear-gradient(rgba(20,22,24,' + ov + '),rgba(20,22,24,' + ov + '))');
+  if (p.bgImage) layers.push('url("' + cssUrl(p.bgImage) + '")');
+  const s = rowBorderSides(p);
+  const side = (on) => (p.border && on ? p.border + 'px ' + (p.borderStyle || 'solid') + ' ' + (p.lineColor || '#e2e2e5') : '0');
+  return {
+    backgroundColor: p.bg || 'transparent',
+    backgroundImage: layers.length ? layers.join(',') : 'none',
+    backgroundSize: p.bgSize || 'cover',
+    backgroundPosition: p.bgPos || 'center',
+    backgroundRepeat: p.bgRepeat || 'no-repeat',
+    borderTop: side(s.top),
+    borderRight: side(s.right),
+    borderBottom: side(s.bottom),
+    borderLeft: side(s.left),
+    borderRadius: (p.radius || 0) + 'px',
+    // A raw CSS string, not a boolean: imports keep the source's exact
+    // shadow; the inspector toggle writes/clears a standard one.
+    boxShadow: p.shadow || 'none',
+    maxWidth: (p.maxW || 100) + '%',
     margin: rowMargin(p, true),
   };
 }
-
-export function colsWrap(p) {
-  const gap = p.gap || 0;
-  if (p.layout === 'grid') return { display: 'grid', gridTemplateColumns: 'repeat(' + (p.gridCols || 2) + ', minmax(0, 1fr))', gap: gap + 'px' };
-  if (p.layout === 'flex') {
-    return {
-      display: 'flex', flexDirection: p.flexDir || 'row', justifyContent: p.justify || 'flex-start',
-      alignItems: p.alignItems || 'stretch', flexWrap: p.wrap ? 'wrap' : 'nowrap', gap: gap + 'px',
-    };
-  }
-  return { display: 'flex', alignItems: 'stretch', margin: '0 ' + (-gap / 2) + 'px' };
-}
-
-export function colStyle(p, c) {
-  if (p.layout === 'grid') return { minWidth: 0 };
-  if (p.layout === 'flex') return { flex: (p.flexDir || 'row').indexOf('column') === 0 ? '0 0 auto' : c.span + ' 1 auto', minWidth: 0 };
-  return {
-    flex: c.span + ' 1 0%', minWidth: 0, padding: '0 ' + (p.gap || 0) / 2 + 'px',
-    alignSelf: p.valign === 'middle' ? 'center' : (p.valign === 'bottom' ? 'flex-end' : 'flex-start'),
-  };
-}
+
+export function colsWrap(p) {
+  const gap = p.gap || 0;
+  if (p.layout === 'grid') return { display: 'grid', gridTemplateColumns: 'repeat(' + (p.gridCols || 2) + ', minmax(0, 1fr))', gap: gap + 'px' };
+  if (p.layout === 'flex') {
+    return {
+      display: 'flex', flexDirection: p.flexDir || 'row', justifyContent: p.justify || 'flex-start',
+      alignItems: p.alignItems || 'stretch', flexWrap: p.wrap ? 'wrap' : 'nowrap', gap: gap + 'px',
+    };
+  }
+  return { display: 'flex', alignItems: 'stretch', margin: '0 ' + (-gap / 2) + 'px' };
+}
+
+export function colStyle(p, c) {
+  if (p.layout === 'grid') return { minWidth: 0 };
+  if (p.layout === 'flex') return { flex: (p.flexDir || 'row').indexOf('column') === 0 ? '0 0 auto' : c.span + ' 1 auto', minWidth: 0 };
+  return {
+    flex: c.span + ' 1 0%', minWidth: 0, padding: '0 ' + (p.gap || 0) / 2 + 'px',
+    alignSelf: p.valign === 'middle' ? 'center' : (p.valign === 'bottom' ? 'flex-end' : 'flex-start'),
+  };
+}

package/src/core/parse.js

@@ -1,10 +1,10 @@
-export function parseItems(s) {
-  return String(s || '').split('\n').map((l) => l.trim()).filter(Boolean).map((l) => {
-    const i = l.indexOf('|');
-    return i < 0 ? { label: l, href: '#' } : { label: l.slice(0, i).trim(), href: l.slice(i + 1).trim() };
-  });
-}
-
-export function cellsOf(p) {
-  return String(p.data || '').split('\n').filter((l) => l.trim()).map((l) => l.split('|').map((c) => c.trim()));
-}
+export function parseItems(s) {
+  return String(s || '').split('\n').map((l) => l.trim()).filter(Boolean).map((l) => {
+    const i = l.indexOf('|');
+    return i < 0 ? { label: l, href: '#' } : { label: l.slice(0, i).trim(), href: l.slice(i + 1).trim() };
+  });
+}
+
+export function cellsOf(p) {
+  return String(p.data || '').split('\n').filter((l) => l.trim()).map((l) => l.split('|').map((c) => c.trim()));
+}

package/src/core/placeholder.js

@@ -1,15 +1,15 @@
-/** Data-URI placeholder image generator, ported verbatim from the original. */
-function enc(s) {
-  return encodeURIComponent(s).replace(/\(/g, '%28').replace(/\)/g, '%29');
-}
-
-export function PH(label, w, ht) {
-  return 'data:image/svg+xml;utf8,' + enc(
-    '<svg xmlns="http://www.w3.org/2000/svg" width="' + w + '" height="' + ht + '">' +
-    '<defs><pattern id="s" width="9" height="9" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">' +
-    '<rect width="9" height="9" fill="#ececed"/><line x1="0" y1="0" x2="0" y2="9" stroke="#cfd3d8" stroke-width="3"/></pattern></defs>' +
-    '<rect width="100%" height="100%" fill="url(#s)"/>' +
-    '<rect x="0.5" y="0.5" width="' + (w - 1) + '" height="' + (ht - 1) + '" fill="none" stroke="#9aa2ab"/>' +
-    '<text x="50%" y="50%" dy="4" text-anchor="middle" font-family="ui-monospace,monospace" font-size="' + Math.max(11, Math.round(w / 40)) + '" fill="#5b6672">' + label + '</text></svg>',
-  );
-}
+/** Data-URI placeholder image generator, ported verbatim from the original. */
+function enc(s) {
+  return encodeURIComponent(s).replace(/\(/g, '%28').replace(/\)/g, '%29');
+}
+
+export function PH(label, w, ht) {
+  return 'data:image/svg+xml;utf8,' + enc(
+    '<svg xmlns="http://www.w3.org/2000/svg" width="' + w + '" height="' + ht + '">' +
+    '<defs><pattern id="s" width="9" height="9" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">' +
+    '<rect width="9" height="9" fill="#ececed"/><line x1="0" y1="0" x2="0" y2="9" stroke="#cfd3d8" stroke-width="3"/></pattern></defs>' +
+    '<rect width="100%" height="100%" fill="url(#s)"/>' +
+    '<rect x="0.5" y="0.5" width="' + (w - 1) + '" height="' + (ht - 1) + '" fill="none" stroke="#9aa2ab"/>' +
+    '<text x="50%" y="50%" dy="4" text-anchor="middle" font-family="ui-monospace,monospace" font-size="' + Math.max(11, Math.round(w / 40)) + '" fill="#5b6672">' + label + '</text></svg>',
+  );
+}

package/src/core/variables.js

@@ -1,11 +1,11 @@
-export const DEFAULT_VARS = 'first_name\nlast_name\nemail\ncompany\ncity\norder_id\nplan\ndiscount\nunsubscribe_url';
-export const TOKEN = (t) => '{' + '{ ' + t + ' }' + '}';
-
-/** Variables are supplied by the host application -- the editor only ever shows the tokens, never a substituted value. */
-export function vars(raw) {
-  const list = Array.isArray(raw) ? raw : String(raw == null ? DEFAULT_VARS : raw).split(/[\n,]/);
-  return list.map((v) => String(v).trim().replace(/^\{\{\s*|\s*\}\}$/g, '')).filter(Boolean);
-}
-
-/** Which prop field a merge tag lands in when inserted from the Data tab, keyed by the selected block's type. */
-export const INSERT_KEYS = { text: 'html', heading: 'text', button: 'label', html: 'code', codeblock: 'code', quote: 'text', list: 'items', table: 'data' };
+export const DEFAULT_VARS = 'first_name\nlast_name\nemail\ncompany\ncity\norder_id\nplan\ndiscount\nunsubscribe_url';
+export const TOKEN = (t) => '{' + '{ ' + t + ' }' + '}';
+
+/** Variables are supplied by the host application -- the editor only ever shows the tokens, never a substituted value. */
+export function vars(raw) {
+  const list = Array.isArray(raw) ? raw : String(raw == null ? DEFAULT_VARS : raw).split(/[\n,]/);
+  return list.map((v) => String(v).trim().replace(/^\{\{\s*|\s*\}\}$/g, '')).filter(Boolean);
+}
+
+/** Which prop field a merge tag lands in when inserted from the Data tab, keyed by the selected block's type. */
+export const INSERT_KEYS = { text: 'html', heading: 'text', button: 'label', html: 'code', codeblock: 'code', quote: 'text', list: 'items', table: 'data' };

package/src/mailcraft-editor.js

@@ -96,8 +96,10 @@ function tip(node, label, dir, align) {
  * a host's own table, an imported locale from `core/i18n/`, or both merged via
  * `defineMessages`; see `core/i18n/index.js`).
  * Methods: `getContent()`, `setContent(doc)`, `importHtml(html)`, `exportHtml()`,
- * `loadTemplate(tpl)`, `screenshotPng()`
- * (full-template PNG as a Blob), `previewScreenshot()` (story-style viewer),
+ * `loadTemplate(tpl)`, `screenshotPng(options)`
+ * (full-template image as a Blob; `options.format`/`quality`/`scale` pick
+ * PNG, JPEG or WebP and the compression), `previewScreenshot()` (story-style
+ * viewer with its own format picker),
  * `downloadScreenshot()`, `copyScreenshot()`, `undo()`, `redo()`.
  * Events: `change` (detail: doc), `export` (detail: html string).
  */
@@ -473,20 +475,30 @@ export class MailCraftEditor extends ElementBase {
     return html;
   }
 
-  /** Full-template screenshot as a PNG Blob (2x resolution, desktop width, independent of the current device/zoom view). See render/screenshot.js for the technique and its limits. */
-  screenshotPng() { return captureTemplatePng(this.core, this.mc); }
+  /**
+   * Full-template screenshot as an image Blob (2x resolution by default,
+   * desktop width, independent of the current device/zoom view). `options`
+   * is the compression dial: `{ format: 'png' | 'jpeg' | 'webp', quality:
+   * 0..1 (lossy formats, default 0.85), scale (default 2) }`. PNG is
+   * lossless; JPEG/WebP are typically a fraction of the size on a long
+   * template. Read the returned `blob.type` for what was actually encoded --
+   * a browser without a WebP encoder hands back PNG. See
+   * render/screenshot.js for the technique and its limits.
+   */
+  screenshotPng(options) { return captureTemplatePng(this.core, this.mc, options); }
 
   /** Opens the story-style viewer over the editor and captures into it -- what the Screenshot button does. Nothing touches the filesystem until the user picks Download inside it. */
   previewScreenshot() { this.story.open(); }
 
-  /** `screenshotPng()` plus the same save-a-file flow as the HTML export download, with success/failure toasts. Pass an already-captured blob (the story viewer does) to save that one instead of rendering a second time. */
-  async downloadScreenshot(blob) {
+  /** `screenshotPng(options)` plus the same save-a-file flow as the HTML export download, with success/failure toasts. Pass an already-captured blob (the story viewer does) to save that one instead of rendering a second time; the filename extension follows the blob's actual type. */
+  async downloadScreenshot(blob, options) {
     const t = this.core.t;
     try {
-      const png = blob || await this.screenshotPng();
+      const png = blob || await this.screenshotPng(options);
+      const ext = { 'image/jpeg': 'jpg', 'image/webp': 'webp' }[png.type] || 'png';
       const a = document.createElement('a');
       a.href = URL.createObjectURL(png);
-      a.download = 'email.png';
+      a.download = 'email.' + ext;
       a.click();
       setTimeout(() => URL.revokeObjectURL(a.href), 1500);
       this.core.flash(t('toast.pngSaved'));

package/src/render/block-body.js

@@ -158,8 +158,14 @@ export function blockBody(b, theme, live, ctx) {
       // `inline-table` so the wrapper's text-align still positions it; the
       // `align` attribute is the same instruction for Word, which ignores the
       // display value. A full-width button is a plain 100% table instead.
+      // `float:none` is load-bearing: browsers map `align="left|right"` on a
+      // table to a float presentational hint, which takes the pill out of
+      // flow -- the block collapses to its padding on the canvas and the
+      // button paints over the next block. The inline style outranks the
+      // hint everywhere floats work, and Word ignores CSS float, so the
+      // `align` attribute still does its one job there.
       const table = el('table', {
-        display: p.full ? 'table' : 'inline-table', width: p.full ? '100%' : 'auto', borderCollapse: 'separate',
+        display: p.full ? 'table' : 'inline-table', width: p.full ? '100%' : 'auto', borderCollapse: 'separate', cssFloat: 'none',
       }, { role: 'presentation', cellpadding: '0', cellspacing: '0', border: '0', align: p.full ? undefined : p.align });
       const td = el('td', {
         background: p.bg, borderRadius: p.radius + 'px', padding: p.py + 'px ' + p.px + 'px', textAlign: 'center',