@seliseblocks/mailcraft 0.2.8 → 0.2.10

package/src/core/sanitize.js

@@ -73,7 +73,8 @@ const IMPORT_STYLES = [
   'width', 'max-width', 'height',
 ];
 
-export const cleanImportHtml = (html) => {
+/** `dropProps` (optional): style properties to leave out of the kept whitelist -- the importer passes `['font-family']` when a run's family has been claimed as the block-level font, so the same declaration doesn't ship twice (and the renderer's overrideRichFont then has nothing to strip at render time, which keeps export -> import -> export byte-stable). */
+export const cleanImportHtml = (html, dropProps, keepProps) => {
   const doc = new DOMParser().parseFromString(String(html || ''), 'text/html');
   doc.querySelectorAll('style,script,meta,link,title,head').forEach((n) => n.remove());
   const walk = (node) => {
@@ -87,6 +88,15 @@ export const cleanImportHtml = (html) => {
       }
       const kept = [];
       IMPORT_STYLES.forEach((p) => {
+        if (dropProps && dropProps.indexOf(p) > -1) return;
+        const v = el.style.getPropertyValue(p);
+        if (v) kept.push(p + ':' + v);
+      });
+      // `keepProps`: extra properties a specific caller vouches for beyond the
+      // shared whitelist -- the section-box reader passes the display/margin
+      // pair its own template writes (`<strong style="display:block;...">`),
+      // which the general list rightly refuses from arbitrary paste.
+      (keepProps || []).forEach((p) => {
         const v = el.style.getPropertyValue(p);
         if (v) kept.push(p + ':' + v);
       });
@@ -102,6 +112,67 @@ export const cleanImportHtml = (html) => {
   return doc.body.innerHTML.replace(/<!--[\s\S]*?-->/g, '').replace(/\s{2,}/g, ' ').trim();
 };
 
+/**
+ * Mutation-time repairs for rich block HTML. Imported content keeps its
+ * per-element inline typography on purpose (`cleanImportHtml` above), but a
+ * descendant's own `font-size`/`color`/`line-height` always outranks the
+ * inherited value from the block wrapper -- so the inspector's Text size,
+ * Text color, Line spacing and Text weight controls were dead on any block
+ * whose paragraphs carried their own styles. The render-time strip that fixed
+ * the Font control (`overrideRichFont`, render/block-body.js) can't be reused
+ * here: `fontFamily` defaults to empty so "unset" means "leave the import
+ * alone", while `size`/`color`/`lh`/`weight` always hold a value -- stripping
+ * at render time would flatten every imported design on first paint. These
+ * run once, at the moment the user moves the control (core `setProp`), so an
+ * untouched document renders byte-identical and the rewrite lands in the same
+ * undo step as the prop change.
+ *
+ * Both return the input string untouched (same reference, no reparse churn)
+ * when there is nothing to rewrite.
+ */
+
+/** Drops trailing float noise without inventing integers: 60.75 stays, 78.00 becomes 78. */
+const trimNum = (n) => String(Number(n.toFixed(2)));
+
+/**
+ * Multiplies every absolute inline font-size by `ratio`, so the block's Text
+ * size acts as a master scale and a 15/26/15px imported hierarchy survives a
+ * base change instead of being flattened. Only px/pt scale -- em/% are
+ * relative and already follow the wrapper. A px line-height sitting beside a
+ * scaled font-size scales with it, or the imported `line-height:22px` would
+ * strangle 45px glyphs.
+ */
+export const scaleInlineSizes = (html, ratio) => {
+  const src = String(html == null ? '' : html);
+  if (!src || !Number.isFinite(ratio) || ratio <= 0 || ratio === 1 || !/font-size/i.test(src)) return src;
+  const doc = new DOMParser().parseFromString(src, 'text/html');
+  let changed = false;
+  doc.body.querySelectorAll('[style]').forEach((node) => {
+    const size = /^([\d.]+)(px|pt)$/.exec(node.style.fontSize || '');
+    if (!size) return;
+    node.style.fontSize = trimNum(parseFloat(size[1]) * ratio) + size[2];
+    const lh = /^([\d.]+)px$/.exec(node.style.lineHeight || '');
+    if (lh) node.style.lineHeight = trimNum(parseFloat(lh[1]) * ratio) + 'px';
+    changed = true;
+  });
+  return changed ? doc.body.innerHTML : src;
+};
+
+/** Removes one CSS property from every descendant's inline style -- the block-level control now owns it. The property name is exact (`color` never touches `background-color`). */
+export const stripInlineStyle = (html, prop) => {
+  const src = String(html == null ? '' : html);
+  if (!src || src.indexOf(prop) === -1) return src;
+  const doc = new DOMParser().parseFromString(src, 'text/html');
+  let changed = false;
+  doc.body.querySelectorAll('[style]').forEach((node) => {
+    if (!node.style.getPropertyValue(prop)) return;
+    node.style.removeProperty(prop);
+    if (!node.getAttribute('style')) node.removeAttribute('style');
+    changed = true;
+  });
+  return changed ? doc.body.innerHTML : src;
+};
+
 /**
  * Makes an image URL safe to drop inside `url("...")`.
  *

package/src/mailcraft-editor.js

@@ -463,8 +463,9 @@ export class MailCraftEditor extends ElementBase {
    */
   loadTemplate(tpl) { this.core.loadTemplate(tpl); }
 
-  exportHtml() {
-    const html = this.core.buildHtml();
+  /** `options.markers: false` omits the fidelity-marker attributes (`data-mc*`, the inert `mc-keep` class) for hosts that want pristine HTML -- at the price of a lossy reload for the few blocks whose rendered shape cannot be read back (countdown, video, section box, code, raw CSS, flex/grid rows). */
+  exportHtml(options) {
+    const html = this.core.buildHtml(options);
     this.dispatchEvent(new CustomEvent('export', { detail: html }));
     return html;
   }
@@ -1039,6 +1040,22 @@ export class MailCraftEditor extends ElementBase {
   }
 
   renderTabBody() {
+    // The browser's native colour dialog is bound to the identity of its
+    // <input type="color"> node: Chromium closes the dialog the moment that
+    // node leaves the document -- even if the same node is spliced back into
+    // the rebuilt tree within the same task (unlike the range slider's mouse
+    // capture, which focus-preserve.js does save that way). The picker lives
+    // in this panel, and its `input` events commit (debounced) to the doc, so
+    // every colour the user tried used to rebuild the panel ~120ms later and
+    // slam the dialog shut. While the picker holds focus -- the only time its
+    // dialog can be open -- the panel therefore skips its rebuild: the canvas
+    // has already re-rendered above (that is the live preview), and the pill
+    // previews itself (fields.js mutates its swatch and hex text directly on
+    // every `input`). Nothing else in the panel changes on a colour commit,
+    // so nothing is stale; the moment focus moves anywhere else, the next
+    // render rebuilds the panel as usual.
+    const active = this.shadowRoot.activeElement;
+    if (active && active.tagName === 'INPUT' && active.type === 'color' && this.tabBody.contains(active)) return;
     this.tabBody.innerHTML = '';
     const tab = this.core.state.tab;
     if (tab === 'design') this.tabBody.appendChild(this.renderDesignTab());
@@ -1579,7 +1596,30 @@ export class MailCraftEditor extends ElementBase {
     this.codeStatusEl = elS('div', 'font-family: var(--ed-font); font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ed-muted);', { class: 'mc-code-kicker' });
     headText.append(this.codeStatusEl, elS('div', 'font-family: var(--ed-font); font-weight: 600; font-size: 15px; line-height: 1.2;', { text: t('modal.rawHtmlTitle'), 'data-i18n': 'modal.rawHtmlTitle', class: 'mc-code-heading' }));
     this.codeWidthSeg = elS('div', '', { class: 'mc-segment' });
-    const reloadBtn = elS('button', 'border: 1px solid var(--ed-line); background: transparent; color: var(--ed-text); cursor: pointer; height: 30px; padding: 0 11px; display: flex; align-items: center; gap: 6px; font-family: var(--ed-font); font-size: 11px; font-weight: 600; transition: border-color 0.16s, background 0.16s;', { type: 'button', title: t('action.reloadHint'), 'data-i18n-title': 'action.reloadHint' });
+    // Ghost-button chrome shared by the header's Copy and Reload.
+    const GHOST_BTN = 'border: 1px solid var(--ed-line); background: transparent; color: var(--ed-text); cursor: pointer; height: 30px; padding: 0 11px; display: flex; align-items: center; gap: 6px; font-family: var(--ed-font); font-size: 11px; font-weight: 600; transition: border-color 0.16s, background 0.16s;';
+    const copyBtn = elS('button', GHOST_BTN, { type: 'button', title: t('toast.htmlCopied'), 'data-i18n-title': 'toast.htmlCopied', class: 'mc-code-copy' });
+    copyBtn.appendChild(icon('copy', 14));
+    // Reuses keys every locale already carries (story.copy / export.copied)
+    // rather than minting new ones across 32 translations.
+    const copyLabel = elS('span', '', { text: t('story.copy'), 'data-i18n': 'story.copy' });
+    copyBtn.appendChild(copyLabel);
+    copyBtn.addEventListener('mouseenter', () => { copyBtn.style.borderColor = 'var(--ed-accent)'; copyBtn.style.background = 'var(--ed-soft)'; });
+    copyBtn.addEventListener('mouseleave', () => { copyBtn.style.borderColor = 'var(--ed-line)'; copyBtn.style.background = 'transparent'; });
+    copyBtn.addEventListener('click', () => {
+      this.core.copyCode();
+      // Momentary "Copied": swap the i18n key itself, not just the text --
+      // refreshStrings relabels every [data-i18n] node on each render and
+      // would otherwise revert the feedback mid-flash.
+      copyLabel.setAttribute('data-i18n', 'export.copied');
+      copyLabel.textContent = this.core.t('export.copied');
+      clearTimeout(this._codeCopyTimer);
+      this._codeCopyTimer = setTimeout(() => {
+        copyLabel.setAttribute('data-i18n', 'story.copy');
+        copyLabel.textContent = this.core.t('story.copy');
+      }, 1600);
+    });
+    const reloadBtn = elS('button', GHOST_BTN, { type: 'button', title: t('action.reloadHint'), 'data-i18n-title': 'action.reloadHint' });
     reloadBtn.appendChild(icon('refresh', 14));
     reloadBtn.appendChild(elS('span', '', { text: t('action.reload'), 'data-i18n': 'action.reload' }));
     reloadBtn.addEventListener('mouseenter', () => { reloadBtn.style.borderColor = 'var(--ed-accent)'; reloadBtn.style.background = 'var(--ed-soft)'; });
@@ -1601,7 +1641,7 @@ export class MailCraftEditor extends ElementBase {
     closeBtn.addEventListener('mouseleave', () => { closeBtn.style.borderColor = 'var(--ed-line)'; });
     closeBtn.addEventListener('click', () => this.core.setState({ libraryOpen: false, exportOpen: false, aiOpen: false, codeOpen: false, assetTarget: null, libHot: false }));
     tip(closeBtn, t('action.closeWithoutApplyingHint'), 'down', 'end');
-    head.append(headIcon, headText, this.codeWidthSeg, reloadBtn, applyBtn, closeBtn);
+    head.append(headIcon, headText, this.codeWidthSeg, copyBtn, reloadBtn, applyBtn, closeBtn);
     overlay.appendChild(head);
 
     const cols = elS('div', 'display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; min-height: 0; background: var(--ed-work);', { class: 'mc-code-split' });

package/src/render/block-body.js

@@ -71,6 +71,20 @@ function overrideRichFont(root, fontFamily) {
   root.querySelectorAll('[style]').forEach((node) => node.style.removeProperty('font-family'));
 }
 
+/** An anchor merely restating the document link color drops it, so the sheet rule -- and a later Link color edit -- owns it again. The exporter stamps `theme.link` on every colorless anchor (mail clients need the value inline), and an import keeps that stamp in the block's html; left in place it froze the link color at whatever the theme said on the day of the save. A genuinely different inline color is the user's and stays. Compared through the same rgb-vs-hex fold the importer uses, since CSSOM serializes one and pickers speak the other. */
+function overrideLinkColor(root, link) {
+  if (!link) return;
+  const key = (v) => {
+    const m = /^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/.exec(String(v || '').trim());
+    const hex = m ? '#' + [m[1], m[2], m[3]].map((n) => Number(n).toString(16).padStart(2, '0')).join('') : String(v || '');
+    return hex.toLowerCase();
+  };
+  const want = key(link);
+  root.querySelectorAll('a[style]').forEach((a) => {
+    if (a.style.color && key(a.style.color) === want) a.style.removeProperty('color');
+  });
+}
+
 /**
  * Ported from the original `blockBody(b, theme, live)`. `ctx` supplies the
  * editing wiring that in the original lived on `this` (Component instance):
@@ -97,6 +111,7 @@ export function blockBody(b, theme, live, ctx) {
       // and other inline formatting remain intact, while the selected family
       // now applies consistently in the canvas and exported read-back DOM.
       overrideRichFont(content, p.fontFamily);
+      overrideLinkColor(content, t.link);
       if (edit) wireEditable(content, b, 'html', ctx, false);
       if (!live) return content;
       return wrapWithRte(b, ctx, edit && ctx.editingId === b.id, content);
@@ -303,6 +318,7 @@ export function blockBody(b, theme, live, ctx) {
         list.appendChild(li);
       });
       overrideRichFont(list, p.fontFamily);
+      overrideLinkColor(list, t.link);
       return list;
     }
     case 'table': {
@@ -351,11 +367,6 @@ export function blockBody(b, theme, live, ctx) {
       table.appendChild(tbody);
       return table;
     }
-    case 'embed': {
-      const wrap = el('div', { padding: p.py + 'px 0' }, attr);
-      wrap.appendChild(el('iframe', { width: '100%', height: p.height + 'px', border: '1px solid rgba(29,31,32,0.14)', background: '#fff', display: 'block' }, { src: p.src, title: p.label }));
-      return wrap;
-    }
     case 'css': {
       const wrap = el('div', { fontSize: '0', lineHeight: '0' }, attr);
       wrap.appendChild(el('style', {}, { html: live ? ctx.scopeCss(p.code, '[data-mc-sheet]') : p.code }));
@@ -383,6 +394,7 @@ export function blockBody(b, theme, live, ctx) {
         boxShadow: p.shadow ? '0 10px 30px rgba(29,31,32,0.12)' : 'none',
         fontFamily: t.font, color: t.text, fontSize: '15px', lineHeight: '1.6', ...FIT,
       }, { ...attr, ...editableAttrs(edit), html: m(p.html), 'data-focus-key': edit ? 'block:' + b.id : undefined });
+      overrideLinkColor(box, t.link);
       if (edit) wireEditable(box, b, 'html', ctx, false);
       if (!live) return box;
       return wrapWithRte(b, ctx, ctx.editingId === b.id, box);

package/src/render/canvas.js

@@ -196,6 +196,9 @@ export function renderDoc(core, live) {
     overflow: !live && radius ? 'hidden' : '',
     transition: 'width 0.28s cubic-bezier(0.22,0.61,0.36,1), background 0.2s, border-radius 0.2s',
   }, { 'data-mc-sheet': '1', dir: 'ltr' });
+  // A custom property cannot ride Object.assign(style, ...) -- '--mc-link'
+  // is not a CSSOM member -- so it is set the one way that works.
+  root.style.setProperty('--mc-link', theme.link || '');
 
   /*
    * The page: the full-width section the email sits on, painted from the

package/src/render/fields.js

@@ -12,6 +12,23 @@ function el(tag, style, attrs) {
   return node;
 }
 
+/**
+ * The native `<input type="color">` accepts ONLY `#rrggbb` -- handed an
+ * imported `rgba(...)`, `rgb(...)`, `#abc` or a keyword it silently stays at
+ * black, so opening the picker on such a value read as "the color was not
+ * picked up". Normalizes what can be normalized (alpha is dropped -- the
+ * picker cannot represent it; the text field beside it still holds the exact
+ * value); anything else returns '' and the picker keeps its default.
+ */
+function pickerHex(v) {
+  const s = String(v == null ? '' : v).trim();
+  if (/^#[0-9a-f]{6}$/i.test(s)) return s;
+  if (/^#[0-9a-f]{3}$/i.test(s)) return '#' + s.slice(1).split('').map((c) => c + c).join('');
+  const m = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i.exec(s);
+  if (m) return '#' + [m[1], m[2], m[3]].map((n) => Math.min(255, Number(n)).toString(16).padStart(2, '0')).join('');
+  return '';
+}
+
 /**
  * Trailing debounce for free-typing inputs. Every commit rebuilds the whole
  * canvas and panel (full re-render, no diffing) -- fine per click, but per
@@ -570,11 +587,20 @@ export function renderField(f) {
       });
     }
     const picker = el('input', { position: 'absolute', inset: '0', width: '100%', height: '100%', opacity: '0', cursor: 'pointer', padding: '0', border: '0' }, { type: 'color' });
-    picker.value = f.swatch;
+    const ph = pickerHex(f.swatch);
+    if (ph) picker.value = ph;
     // The native picker fires `input` continuously while dragging the hue
     // wheel -- committed raw, that is a full re-render per mouse move.
     const pickCommit = typeCommit(f.onChange);
-    picker.addEventListener('input', (e) => pickCommit.call(e.target.value));
+    picker.addEventListener('input', (e) => {
+      // Self-preview: while this picker's dialog is open the inspector skips
+      // its rebuilds (renderTabBody, mailcraft-editor.js) so the dialog's
+      // host node survives -- which also means no rebuild will repaint this
+      // pill. Mutate it directly so swatch and hex track the dialog live.
+      swatch.style.background = e.target.value;
+      hex.value = e.target.value;
+      pickCommit.call(e.target.value);
+    });
     picker.addEventListener('change', () => pickCommit.flush());
     swatch.appendChild(picker);
     const hex = el('input', { width: '82px', boxSizing: 'border-box', background: 'transparent', border: '0', outline: 'none', color: 'var(--ed-text)', fontFamily: 'ui-monospace, monospace', fontSize: '11px', padding: '0 9px' }, { placeholder: 'inherit', class: 'mc-stepper-input', 'data-focus-key': `f${f.key}`, dir: 'ltr' });

package/src/render/rte.js

@@ -110,6 +110,12 @@ export function renderRte(core, b) {
     btn('inlineCode', 'Inline code', () => core.exec('insertHTML', '<code style="font-family:ui-monospace,monospace;font-size:0.92em;background:var(--ed-soft);padding:1px 4px">' + (core.getSelection().toString() || 'code') + '</code>')),
     btn('superscript', 'Superscript', () => core.exec('superscript'), st('superscript')),
     btn('subscript', 'Subscript', () => core.exec('subscript'), st('subscript')),
+  );
+  // Only where a size is actually rendered: `box` hardcodes 15px and `html`
+  // sets no font-size at all, so on those two the ± pair moved nothing while
+  // still persisting a junk `size` prop into the saved document, with the
+  // readout counting up beside it.
+  if (b.type === 'text' || b.type === 'heading') r1.append(
     sep(),
     btn('minus', 'Smaller text', () => core.size(b, -1)),
     el('span', { fontFamily: 'var(--ed-font)', fontSize: '9.5px', color: 'var(--rte-muted)', minWidth: '32px', textAlign: 'center' }, { text: (b.props.size || 16) + 'px' }),

package/src/render/style.js

@@ -98,6 +98,13 @@ export const STYLE = `
 #mc ::selection { background: var(--ed-select); }
 #mc a { color: var(--ed-accent); }
 #mc a:hover { color: var(--ed-accent); opacity: 0.72; }
+/* Content links are the document's, not the chrome's: inside the sheet the
+   accent rule above painted every anchor in the HOST's brand color, which is
+   why the theme's own Link color setting never did anything visible. The
+   variable is set per render on the sheet root (render/canvas.js); anchors
+   with their own inline color keep it, exactly as in the sent mail. */
+#mc [data-mc-sheet] a { color: var(--mc-link, var(--ed-accent)); }
+#mc [data-mc-sheet] a:hover { color: var(--mc-link, var(--ed-accent)); opacity: 1; }
 @keyframes mcIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
 @keyframes mcFade { from { opacity: 0; } to { opacity: 1; } }
 @keyframes mcPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

package/types/index.d.ts

@@ -272,8 +272,15 @@ export class MailCraftEditor extends HTMLElement {
   /** Merged over `storageProvider.limits` per key, this side winning. */
   storageLimits: StorageLimits | null;
 
-  /** Send-ready email HTML — valid input to the importer, so saving the export is saving the work. */
-  exportHtml(): string;
+  /**
+   * Send-ready email HTML — valid input to the importer, so saving the export
+   * is saving the work. `{ markers: false }` omits the fidelity-marker
+   * attributes (`data-mc*`, the inert `mc-keep` class) for hosts that want
+   * pristine HTML, at the price of a lossy reload for the few blocks whose
+   * rendered shape cannot be read back (countdown, video, section box, code,
+   * raw CSS, flex/grid rows).
+   */
+  exportHtml(options?: { markers?: boolean }): string;
 
   /** Parses email HTML back onto the canvas. Returns the number of rows produced. */
   importHtml(html: string): number;
@@ -365,7 +372,7 @@ export interface EditorHandle {
   element: MailCraftEditor;
   /** Removes the editor and detaches the listeners this call attached. */
   destroy(): void;
-  exportHtml(): string;
+  exportHtml(options?: { markers?: boolean }): string;
   importHtml(html: string): number;
   loadTemplate(tpl: Template): void;
   undo(): void;