@seliseblocks/mailcraft 0.2.16 → 0.2.18

package/src/render/block-body.js

@@ -1,7 +1,7 @@
 import { icon, brandIcon, socialKey, SOCIAL_BRAND, contrastInk } from '../core/icons.js';
 import { pad } from '../core/layout-style.js';
 import { parseItems, cellsOf } from '../core/parse.js';
-import { linkHref } from '../core/sanitize.js';
+import { linkHref, cssUrl } from '../core/sanitize.js';
 
 function el(tag, style, attrs) {
   const node = document.createElement(tag);
@@ -93,7 +93,7 @@ function overrideLinkColor(root, link) {
  * toolbar node or null), `ctx.onTableCellBlur(block, ri, ci, value)`, `ctx.now`
  * (for the countdown), `ctx.vars` and `ctx.onInsertVariable` for the code-view escape hatch.
  */
-export function blockBody(b, theme, live, ctx) {
+export function blockBody(b, theme, live, ctx, colPx) {
   const p = b.props; const t = theme;
   const attr = live ? { 'data-mc-content': b.id } : {};
 
@@ -119,20 +119,87 @@ export function blockBody(b, theme, live, ctx) {
     case 'image': {
       const wrap = el('div', { padding: pad(p), textAlign: p.align, fontSize: '0' }, attr);
       const imgHref = linkHref(p.href);
+      /*
+       * Two things every exported image needs and had neither of.
+       *
+       * `width` as an ATTRIBUTE, in px: the Word engine behind Classic
+       * Outlook does not resolve a percentage width on an image and falls
+       * back to the file's intrinsic size, so a 1200px hero authored at 60%
+       * shipped 1200px wide and tore the layout open. The CSS percentage
+       * stays for every client that can do better -- the attribute is only
+       * the floor Word reads -- and `height:auto` keeps the aspect ratio once
+       * a width is pinned.
+       *
+       * A real `font-size` on the IMG: the wrapper sets `font-size:0` to kill
+       * the inline-block whitespace gap, and alt text inherits it, so with
+       * images blocked (Outlook's default) the alt text rendered at 0px and
+       * the recipient saw nothing at all. The wrapper keeps its 0; the image
+       * carries type of its own for the blocked state.
+       */
+      /*
+       * Two ways to size an image, and the second one is why a logo used to
+       * drift.
+       *
+       * The default is a PERCENTAGE of the column -- responsive, and the
+       * right answer for a hero. But a percentage cannot express "88px", and
+       * an import that met one had to round it into the nearest whole
+       * percent (88 of 600 -> 15% -> 93px). Every save re-derived the
+       * percent from the new pixel width, so the logo crept a little wider
+       * each time and never landed back on 88.
+       *
+       * `wUnit: 'px'` with `wpx` pins the real number instead: the CSS width,
+       * the Word `width` attribute and the read-back all carry the same
+       * integer, so the value is a fixed point. `max-width:100%` (plus the
+       * stylesheet's own `img` rule in the sent mail) keeps a pinned image
+       * from holding a narrow phone column open.
+       */
+      const fixed = p.wUnit === 'px' && Number(p.wpx) > 0;
+      const pxW = fixed
+        ? Math.max(1, Math.round(Number(p.wpx)))
+        : Math.max(1, Math.round(((Number(colPx) || Number(t.width) || 620)) * ((Number(p.width) || 100) / 100)));
+      const cssW = fixed ? pxW + 'px' : (Number(p.width) || 100) + '%';
+      /*
+       * `height` as an attribute, derived from the source's own aspect ratio
+       * rather than invented: with images blocked (Outlook's default, and
+       * Gmail's for an unknown sender) a width-only image collapses to a
+       * one-line strip and the layout below it jumps when the image loads.
+       * A width AND a height reserve the real box. The CSS `height:auto`
+       * still wins in every client that reads CSS, so a client that scales
+       * the image down keeps its proportions -- the attribute is only the
+       * floor Word and a blocked-image placeholder read.
+       *
+       * Absent unless the ratio is known (an import that carried both
+       * dimensions, or a library asset), so no image gains a guessed height.
+       */
+      const ratio = Number(p.ratio) > 0 ? Number(p.ratio) : 0;
+      const hAttr = ratio ? String(Math.max(1, Math.round(pxW * ratio))) : undefined;
+      // Retina and responsive sources ride through untouched. Apple Mail and
+      // iOS pick from `srcset`; every other client ignores both attributes
+      // and uses `src`, which is why `src` stays the 1x fallback.
+      const srcAttrs = {
+        srcset: p.srcset || undefined,
+        sizes: p.srcset && p.sizes ? p.sizes : undefined,
+        title: p.title || undefined,
+      };
+      const altType = { fontSize: '13px', lineHeight: '1.4', fontFamily: t.font, color: t.text };
       if (imgHref) {
         // The % width must live on the anchor, not the img: a percentage on a
         // child of a shrink-to-fit inline-block resolves against the image's
         // own intrinsic size (i.e. not at all), which rendered every linked
         // logo/icon at full intrinsic width no matter what `width` said.
-        const a = el('a', { display: 'inline-block', width: p.width + '%' }, { href: imgHref });
+        // `max-width` only in pixel mode: a percentage anchor is already
+        // capped by its container, and adding the declaration unconditionally
+        // would rewrite the markup of every linked image that never asked for
+        // this feature.
+        const a = el('a', { display: 'inline-block', width: cssW, ...(fixed ? { maxWidth: '100%' } : {}) }, { href: imgHref });
         // Same guard as every other anchor the canvas draws: without it a
         // click on a linked logo navigates the host application away from the
         // editor, taking the uncommitted document with it.
         a.addEventListener('click', (e) => e.preventDefault());
-        a.appendChild(el('img', { width: '100%', borderRadius: p.radius + 'px', display: 'block', border: '0' }, { src: p.src, alt: p.alt }));
+        a.appendChild(el('img', { width: '100%', height: 'auto', borderRadius: p.radius + 'px', display: 'block', border: '0', ...altType }, { src: p.src, alt: p.alt, width: String(pxW), height: hAttr, border: '0', ...srcAttrs }));
         wrap.appendChild(a);
       } else {
-        wrap.appendChild(el('img', { width: p.width + '%', maxWidth: '100%', borderRadius: p.radius + 'px', display: 'inline-block', border: '0' }, { src: p.src, alt: p.alt }));
+        wrap.appendChild(el('img', { width: cssW, height: 'auto', maxWidth: '100%', borderRadius: p.radius + 'px', display: 'inline-block', border: '0', ...altType }, { src: p.src, alt: p.alt, width: String(pxW), height: hAttr, border: '0', ...srcAttrs }));
       }
       return wrap;
     }
@@ -197,11 +264,29 @@ export function blockBody(b, theme, live, ctx) {
     }
     case 'divider': {
       const wrap = el('div', { padding: p.py + 'px 0' }, attr);
-      wrap.appendChild(el('div', { height: '0', width: p.width + '%', margin: '0 auto', borderTop: p.thickness + 'px ' + (p.lineStyle || 'solid') + ' ' + p.color }));
+      const rule = p.thickness + 'px ' + (p.lineStyle || 'solid') + ' ' + p.color;
+      // Word gives a zero-height div nothing to draw the border on, so the
+      // same rule ships twice: once on this div, which every other client
+      // renders and the importer reads (classifyDivider: a DIV bar with a
+      // border-top), and once on a <td> inside an MSO-only table, the shape
+      // Word does paint. `<!--[if !mso]><!-->` keeps the div out of Word so
+      // it never draws both. Comments are inert to the importer.
+      const doc = wrap.ownerDocument;
+      wrap.appendChild(doc.createComment('[if !mso]><!'));
+      wrap.appendChild(el('div', { height: '0', width: p.width + '%', margin: '0 auto', borderTop: rule, fontSize: '1px', lineHeight: '1px' }, { html: '&nbsp;' }));
+      wrap.appendChild(doc.createComment('<![endif]'));
+      wrap.appendChild(doc.createComment('[if mso]><table role="presentation" width="' + p.width + '%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td style="border-top:' + rule + ';font-size:1px;line-height:1px;">&nbsp;</td></tr></table><![endif]'));
       return wrap;
     }
-    case 'spacer':
-      return el('div', { height: p.height + 'px' }, attr);
+    case 'spacer': {
+      // An empty div has no height in Word: it needs a character to give a
+      // line to, and an exact line-height to size that line (msoHarden adds
+      // mso-line-height-rule:exactly wherever a px line-height stands). This
+      // is mj-spacer's shape. The NBSP trims to nothing for the importer, so
+      // classifySpacer still sees an empty div with a height.
+      const h = Math.max(0, Number(p.height) || 0);
+      return el('div', { height: h + 'px', lineHeight: h + 'px', fontSize: '1px' }, { ...attr, html: '&nbsp;' });
+    }
     case 'social': {
       // Two independent axes cover every style the block offers without a
       // second hand-drawn icon set per platform: `palette` picks the source
@@ -241,14 +326,32 @@ export function blockBody(b, theme, live, ctx) {
     }
     case 'video': {
       const wrap = el('div', { padding: '4px 0', textAlign: 'center' }, attr);
-      const a = el('a', { display: 'block', position: 'relative' }, { href: linkHref(p.href) });
+      /*
+       * The play badge used to float over the thumbnail with
+       * position:absolute. Gmail strips `position` outright and Word ignores
+       * it, so in both the badge fell to a line below the picture. Now the
+       * thumbnail is the cell's background (the one overlay mechanism email
+       * has) and the badge is plain centred content inside it. The cell needs
+       * a height, since a background gives none: 16:9 of the column width,
+       * which is what a video thumbnail is. The whole cell is the link.
+       */
+      const vw = Math.max(120, Number(colPx) || Number(t.width) || 620);
+      const vh = Math.round(vw * 9 / 16);
+      const vurl = cssUrl(p.src);
+      const table = el('table', { width: '100%', borderCollapse: 'collapse' }, { role: 'presentation', cellpadding: '0', cellspacing: '0', border: '0', width: '100%' });
+      const tr = el('tr'); table.appendChild(tr);
+      const cell = el('td', {
+        height: vh + 'px', textAlign: 'center', verticalAlign: 'middle',
+        backgroundColor: '#111111', backgroundImage: vurl ? 'url("' + vurl + '")' : 'none',
+        backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
+      }, { height: String(vh), align: 'center', valign: 'middle', background: p.src || undefined, bgcolor: '#111111' });
+      const a = el('a', { display: 'inline-block', textDecoration: 'none' }, { href: linkHref(p.href), title: p.caption || undefined });
       a.addEventListener('click', (e) => e.preventDefault());
-      a.appendChild(el('img', { width: '100%', display: 'block', border: '0' }, { src: p.src, alt: p.caption }));
-      const badge = el('span', { position: 'absolute', inset: '0', display: 'flex', alignItems: 'center', justifyContent: 'center' });
-      const circle = el('span', { width: '54px', height: '54px', borderRadius: '50%', background: p.badge, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '18px', paddingLeft: '4px' }, { text: '▶' });
-      badge.appendChild(circle);
-      a.appendChild(badge);
-      wrap.appendChild(a);
+      const circle = el('span', { display: 'inline-block', width: '54px', height: '54px', lineHeight: '54px', borderRadius: '50%', background: p.badge, color: '#fff', textAlign: 'center', fontSize: '18px', fontFamily: 'Arial, sans-serif' }, { text: '▶' });
+      a.appendChild(circle);
+      cell.appendChild(a);
+      tr.appendChild(cell);
+      wrap.appendChild(table);
       wrap.appendChild(el('div', { fontFamily: t.font, fontSize: '12.5px', color: p.badge, opacity: '0.7', marginTop: '8px' }, { text: p.caption }));
       return wrap;
     }
@@ -385,8 +488,17 @@ export function blockBody(b, theme, live, ctx) {
       const edit = live;
       const borderSide = (on) => (p.border && on !== false ? p.border + 'px ' + (p.borderStyle || 'solid') + ' ' + p.lineColor : '0');
       const box = el('div', {
-        background: p.bgImage ? 'linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), url("' + p.bgImage + '")' : p.bg,
-        backgroundSize: 'cover', backgroundPosition: 'center',
+        // Colour and image as separate longhands, never one shorthand. The
+        // shorthand made `p.bg` unreachable the moment an image was set --
+        // there was no colour left underneath when a client refused the image
+        // -- and it opened with a no-op `linear-gradient()` that outlook.com's
+        // sanitiser drops the whole declaration over, taking the photo with
+        // it. Same rule as a row's background (core/export.js).
+        backgroundColor: p.bg || 'transparent',
+        backgroundImage: p.bgImage ? 'url("' + cssUrl(p.bgImage) + '")' : 'none',
+        // The same three controls a row has; hard-coded cover/center meant a
+        // box background could never tile or pin to an edge.
+        backgroundSize: p.bgSize || 'cover', backgroundPosition: p.bgPos || 'center', backgroundRepeat: p.bgRepeat || 'no-repeat',
         borderTop: borderSide(p.topBorder), borderRight: borderSide(p.rightBorder),
         borderBottom: borderSide(p.bottomBorder), borderLeft: borderSide(p.leftBorder),
         borderRadius: p.radius + 'px', padding: p.pad + 'px', textAlign: p.align,

package/src/render/canvas.js

@@ -1,6 +1,6 @@
 import { DEF } from '../core/blocks.js';
-import { boxStyle, rowBg, rowPad, colsWrap, colStyle } from '../core/layout-style.js';
-import { scopeCss } from '../core/sanitize.js';
+import { boxStyle, rowBg, rowPad, colsWrap, colStyle, colBg } from '../core/layout-style.js';
+import { scopeCss, cssUrl } from '../core/sanitize.js';
 import { cellsOf } from '../core/parse.js';
 import { icon } from '../core/icons.js';
 import { blockBody } from './block-body.js';
@@ -189,7 +189,14 @@ export function renderDoc(core, live) {
   const radius = Number(theme.radius) || 0;
   const borderW = Number(theme.borderW) || 0;
   const root = el('div', {
-    width: width + 'px', maxWidth: '100%', background: theme.contentBg || 'transparent', color: theme.text, fontFamily: theme.font,
+    width: width + 'px', maxWidth: '100%', color: theme.text, fontFamily: theme.font,
+    // Colour and image as separate longhands, mirroring what the exporter
+    // writes -- the canvas has to show the same paint the recipient gets.
+    backgroundColor: theme.contentBg || 'transparent',
+    backgroundImage: theme.contentBgImage ? 'url("' + cssUrl(theme.contentBgImage) + '")' : 'none',
+    backgroundSize: theme.contentBgSize || 'cover',
+    backgroundPosition: theme.contentBgPos || 'center',
+    backgroundRepeat: theme.contentBgRepeat || 'no-repeat',
     // Only when the document actually asks for a shape: an unconditional
     // `0px` would override the editor chrome's own soft corner on the sheet
     // (style.js) and square off every template that never touched the field.
@@ -224,6 +231,15 @@ export function renderDoc(core, live) {
   const padX = Number(theme.padX) || 0;
   const page = el('div', {
     background: theme.bg || 'transparent',
+    // The page image, only when there is one: the longhands are added AFTER
+    // the shorthand so they override it, and are absent otherwise so a
+    // document with no image paints exactly as it always did.
+    ...(theme.bgImage ? {
+      backgroundImage: 'url("' + cssUrl(theme.bgImage) + '")',
+      backgroundSize: theme.bgSize || 'cover',
+      backgroundPosition: theme.bgPos || 'center',
+      backgroundRepeat: theme.bgRepeat || 'no-repeat',
+    } : {}),
     padding: padY + 'px ' + padX + 'px',
     boxSizing: 'border-box', maxWidth: '100%', display: 'flex', justifyContent: 'center',
     transition: 'background 0.2s, padding 0.22s cubic-bezier(0.22,0.61,0.36,1)',
@@ -310,7 +326,20 @@ export function renderDoc(core, live) {
         }
         : { display: 'block' })
       : colsWrap(r.props));
+    /*
+     * What this column measures in a sent email, in px. Word cannot resolve a
+     * percentage width on an image (it falls back to the file's intrinsic
+     * size, which is how a 1200px hero tore the layout open in Outlook), so
+     * the image renderer needs a real number to put in a `width` attribute.
+     * Approximate by construction -- cell gutters and column padding are not
+     * modelled here -- but an approximate cap is the whole difference between
+     * a scaled image and a 1200px one.
+     */
+    const rowPadX = (r.props.pl ?? r.props.px ?? 0) + (r.props.pr ?? r.props.px ?? 0);
+    const gapPx = (r.props.gap || 0) * Math.max(0, r.cols.length - 1);
+    const innerPx = Math.max(40, (Number(theme.width) || 620) - rowPadX - gapPx);
     r.cols.forEach((c, ci) => {
+      const colPx = Math.max(20, Math.round(innerPx * ((c.span || 100) / 100)));
       const colLines = [];
       const items = [];
       c.blocks.forEach((b, bi) => {
@@ -356,7 +385,7 @@ export function renderDoc(core, live) {
         // few pixels from the RTE's own controls. The RTE stands in for it for
         // the duration of the edit; it comes back on blur (still selected).
         if (bSel && ctx.editingId !== b.id) bWrap.appendChild(toolbar(core, b.id, 'block', DEF(b.type).code));
-        bWrap.appendChild(blockBody(b, theme, live, ctx));
+        bWrap.appendChild(blockBody(b, theme, live, ctx, colPx));
         items.push(bWrap);
       });
       let colTracker;
@@ -379,9 +408,9 @@ export function renderDoc(core, live) {
       // background must stop at the column's visual edge, not bleed across
       // the gutter. `host` is also what the drag listeners and
       // `indexFromPoint` must use -- the block slots are its children.
-      const styled = c.bg || c.border || c.radius || c.padY || c.padX;
+      const styled = c.bg || c.bgImage || c.border || c.radius || c.padY || c.padX;
       const host = styled
-        ? el('div', { background: c.bg || 'transparent', border: c.border ? c.border + 'px ' + (c.borderStyle || 'solid') + ' ' + (c.lineColor || '#e2e2e5') : '0', borderRadius: (c.radius || 0) + 'px', padding: (c.padY || 0) + 'px ' + (c.padX || 0) + 'px', height: '100%', boxSizing: 'border-box' })
+        ? el('div', { ...colBg(c), border: c.border ? c.border + 'px ' + (c.borderStyle || 'solid') + ' ' + (c.lineColor || '#e2e2e5') : '0', borderRadius: (c.radius || 0) + 'px', padding: (c.padY || 0) + 'px ' + (c.padX || 0) + 'px', height: '100%', boxSizing: 'border-box' })
         : colEl;
       if (live) {
         host.addEventListener('dragover', (e) => {

package/src/render/fields.js

@@ -447,6 +447,25 @@ export function renderField(f) {
     return wrap;
   }
 
+  /*
+   * A note is prose, not a control: no label row, no focus key, nothing to
+   * commit. It sits in the flow where the panel put it, tinted by tone --
+   * amber for a warning the author should act on before sending, muted for
+   * an aside. The left rule rather than a filled panel keeps it from reading
+   * as a field the user failed to fill in.
+   */
+  if (f.isNote) {
+    const warn = f.tone !== 'info';
+    wrap.appendChild(el('div', {
+      fontFamily: 'var(--ed-font)', fontSize: '11px', lineHeight: '1.5',
+      color: warn ? 'var(--ed-text)' : 'var(--ed-muted)',
+      background: warn ? 'rgba(214,141,32,0.10)' : 'var(--ed-panel-2)',
+      borderLeft: '2px solid ' + (warn ? 'rgba(214,141,32,0.85)' : 'var(--ed-line)'),
+      padding: '7px 9px', boxSizing: 'border-box',
+    }, { text: f.label, class: 'mc-field-note', role: warn ? 'status' : undefined }));
+    return wrap;
+  }
+
   // No isHead branch: heads never reach renderField -- renderFieldCards
   // consumes them as card kickers. A field list rendered without the card
   // grouper would drop its headings, which is the loud failure we want.

package/src/render/screenshot.js

@@ -97,11 +97,34 @@ async function inlineExternalImages(root) {
     ));
   });
   root.querySelectorAll('[style]').forEach((el) => {
-    const m = (el.style.backgroundImage || '').match(/url\(["']?(?!data:)([^"')]+)["']?\)/);
+    /*
+     * Only the `url(...)` layer is rewritten, never the whole declaration.
+     * A tinted section paints `linear-gradient(rgba(20,22,24,α),…),url(…)`
+     * (core/layout-style.js), and replacing the property wholesale dropped
+     * the gradient -- so every darkened hero came out of the screenshot
+     * lighter than the canvas it was captured from. A fetch that fails
+     * leaves a transparent pixel in the layer's place rather than `none`,
+     * which would be invalid inside a layer list and would take the tint
+     * down with it a second way.
+     */
+    const decl = el.style.backgroundImage || '';
+    const m = decl.match(/url\(["']?(?!data:)([^"')]+)["']?\)/);
     if (!m) return;
     jobs.push(toDataUri(m[1]).then(
-      (uri) => { el.style.backgroundImage = 'url("' + uri + '")'; },
-      () => { el.style.backgroundImage = 'none'; },
+      (uri) => { el.style.backgroundImage = decl.replace(m[0], 'url("' + uri + '")'); },
+      () => { el.style.backgroundImage = decl.replace(m[0], 'url("' + BLANK_PIXEL + '")'); },
+    ));
+  });
+  // The legacy `background` attribute -- what an imported Outlook-first
+  // template, and the exporter's own rows, carry alongside the CSS. Read only
+  // where no CSS image was inlined above, so the two never fetch twice.
+  root.querySelectorAll('[background]').forEach((el) => {
+    const src = el.getAttribute('background') || '';
+    if (!src || src.startsWith('data:')) return;
+    if (/url\(/.test(el.style.backgroundImage || '')) return;
+    jobs.push(toDataUri(src).then(
+      (uri) => { el.setAttribute('background', uri); el.style.backgroundImage = 'url("' + uri + '")'; },
+      () => { el.removeAttribute('background'); },
     ));
   });
   await Promise.all(jobs);