@seliseblocks/mailcraft 0.2.9 → 0.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seliseblocks/mailcraft",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "description": "Framework-agnostic drag-and-drop email template editor, packaged as a zero-dependency Web Component.",
   "license": "MIT",
   "author": "SELISE Digital Platforms",
@@ -60,7 +60,7 @@
   },
   "scripts": {
     "build": "node build.js",
-    "test": "node test/storage.test.mjs && node test/export.test.mjs && node test/templates.test.mjs && node test/system.test.mjs && node test/toolbar.test.mjs && node test/editor-dom.test.mjs && node test/css-cascade.test.mjs && node test/render-dom.test.mjs && node test/import-html.test.mjs && node test/interaction.test.mjs && node test/focus-preserve.test.mjs && node test/shortcuts.test.mjs && node test/import-structure.test.mjs",
+    "test": "node test/storage.test.mjs && node test/export.test.mjs && node test/templates.test.mjs && node test/system.test.mjs && node test/toolbar.test.mjs && node test/editor-dom.test.mjs && node test/css-cascade.test.mjs && node test/render-dom.test.mjs && node test/import-html.test.mjs && node test/interaction.test.mjs && node test/focus-preserve.test.mjs && node test/shortcuts.test.mjs && node test/import-structure.test.mjs && node test/roundtrip.test.mjs",
     "prepublishOnly": "npm run build && npm test",
     "coverage": "c8 --reporter=text --reporter=text-summary --src=src --all --exclude=\"test/**\" --exclude=\"examples/**\" --exclude=\"build.js\" npm test"
   },

package/src/core/blocks.js

@@ -18,7 +18,6 @@ BLOCKS.push(
   { type: 'heading', code: 'HED', label: 'Heading', hint: 'Display heading', make: () => ({ text: 'What we kept', level: 'h2', size: 34, lh: 1.12, align: 'left', color: '', weight: '600', font: 'body', py: 8, px: 0 }) },
   { type: 'list', code: 'LST', label: 'List', hint: 'Bulleted or numbered list', make: () => ({ items: 'Import your list\nPick a template\nSend the first one', ordered: false, size: 15, lh: 1.7, color: '', gap: 4, py: 8, px: 0 }) },
   { type: 'table', code: 'TBL', label: 'Table', hint: 'Data table — edit cells inline', make: () => ({ data: 'Plan|Price|Seats\nStarter|$19|3\nTeam|$49|10\nStudio|$99|25', header: true, borders: true, borderWidth: 1, borderStyle: 'solid', striped: true, pad: 10, size: 14, headBg: '#f8fafc', lineColor: '#e2e8f0', align: 'left', width: 100 }) },
-  { type: 'embed', code: 'EMB', label: 'Embed', hint: 'Iframe embed — map, form, player', make: () => ({ src: 'https://example.com/embed', height: 320, label: 'Embedded content', py: 8 }) },
   { type: 'css', code: 'CSS', label: 'Raw CSS', hint: 'Inject a style block', make: () => ({ code: '.mc-note { font: 13px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #0065b3; letter-spacing: 0.04em; }', note: 'Styles apply to raw HTML blocks below.' }) },
   { type: 'codeblock', code: 'PRE', label: 'Code', hint: 'Preformatted code sample', make: () => ({ code: 'curl -X POST https://api.example.com/v1/sends \\\n  -H "Authorization: Bearer $KEY" \\\n  -d campaign=mc-4471', bg: '#172033', color: '#e8e9ea', size: 12.5, pad: 14 }) },
 );
@@ -180,7 +179,7 @@ export const PALETTE = [
   { t: 'heading' }, { t: 'text' }, { t: 'list' }, { g: 'quote' }, { t: 'image' }, { g: 'gallery' },
   { t: 'button' }, { t: 'table' }, { g: 'card' }, { g: 'product' }, { g: 'hero' }, { g: 'stats' },
   { t: 'box' }, { t: 'divider' }, { t: 'spacer' }, { t: 'social' }, { t: 'video' },
-  { t: 'embed' }, { t: 'menu' }, { g: 'footer' }, { t: 'html' }, { t: 'css' }, { t: 'svg' },
+  { t: 'menu' }, { g: 'footer' }, { t: 'html' }, { t: 'css' }, { t: 'svg' },
   { t: 'codeblock' }, { t: 'countdown' }, { t: 'condition' }, { t: 'loop' },
 ];
 
@@ -208,6 +207,15 @@ export function migrateDoc(doc) {
     if (r.props.mb === undefined) r.props.mb = legacyMarginY;
     if (r.props.ml === undefined) r.props.ml = 0;
     r.cols.forEach((c) => {
+      // The embed block (an <iframe>) was removed on 2026-09-02: mail clients
+      // strip iframes, so the block only ever rendered in browser contexts.
+      // A saved document keeps its content as the raw html it always exported.
+      c.blocks.forEach((b) => {
+        if (b.type !== 'embed') return;
+        const p = b.props || {};
+        b.type = 'html';
+        b.props = { code: '<div style="padding:' + (p.py || 0) + 'px 0"><iframe src="' + (p.src || '') + '" title="' + (p.label || '') + '" style="width:100%;height:' + (p.height || 320) + 'px;border:1px solid rgba(29,31,32,0.14);background:#fff;display:block"></iframe></div>' };
+      });
       // A block whose type this build no longer knows is dropped rather than
       // rendered as an unrecognized shape; a row emptied that way goes with it.
       c.blocks = c.blocks.filter((b) => DEF(b.type));
@@ -266,15 +274,26 @@ export function normalizeDoc(input) {
       return {
         id: r.id || uid(),
         props: Object.assign({}, rowDefaults, r.props || {}),
-        cols: cols.map((c) => ({
-          id: c.id || uid(),
-          span: Number(c.span) > 0 ? Number(c.span) : evenSpan,
-          blocks: (Array.isArray(c.blocks) ? c.blocks : []).filter((b) => b && typeof b === 'object' && b.type).map((b) => (
-            DEF(b.type)
-              ? { id: b.id || uid(), type: b.type, props: Object.assign(DEF(b.type).make(), b.props || {}) }
-              : { id: b.id || uid(), type: b.type, props: b.props || {} }
-          )),
-        })),
+        cols: cols.map((c) => {
+          const col = {
+            id: c.id || uid(),
+            span: Number(c.span) > 0 ? Number(c.span) : evenSpan,
+            blocks: (Array.isArray(c.blocks) ? c.blocks : []).filter((b) => b && typeof b === 'object' && b.type).map((b) => (
+              DEF(b.type)
+                ? { id: b.id || uid(), type: b.type, props: Object.assign(DEF(b.type).make(), b.props || {}) }
+                : { id: b.id || uid(), type: b.type, props: b.props || {} }
+            )),
+          };
+          // A column's optional styling (the canvas's `styled` wrapper and the
+          // importer's hoist both speak these keys) rides through untouched --
+          // rebuilding the column without them silently stripped a card
+          // column's paint on every loadDoc/loadTemplate, before export ever
+          // saw it.
+          ['bg', 'radius', 'padY', 'padX', 'border', 'borderStyle', 'lineColor'].forEach((k) => {
+            if (c[k] !== undefined && c[k] !== '' && c[k] !== 0) col[k] = c[k];
+          });
+          return col;
+        }),
       };
     }),
   };

package/src/core/css-cascade.js

@@ -1,117 +1,120 @@
-/**
- * Import-time CSS cascade: folds a parsed document's `<style>` rules into the
- * elements' inline styles, so the importer's classifiers (which read inline
- * styles only) see class-styled templates -- Mailchimp exports, hand-written
- * emails, framework output that was never inlined -- the same way a mail
- * client would.
- *
- * Deliberately a subset of a real cascade, matched to what email CSS uses:
- * - `@media` blocks (and every other at-rule) are dropped whole: responsive
- *   overrides can't be represented in the imported model, desktop values win.
- *   A side benefit: base-rule `.desktop_hide { display:none }` still applies,
- *   so mobile-only duplicate content is correctly dropped by the importer's
- *   hidden-element skip.
- * - Selectors containing `:` are skipped -- pseudo-classes/-elements are
- *   interactive or generated state with no place in a static import.
- * - Specificity is the classic ids/classes/tags count; equal specificity
- *   resolves by source order; `!important` wins over everything including
- *   inline styles, which otherwise always win (matching browser behavior for
- *   the combinations that matter here).
- */
-
-function stripComments(css) {
-  return String(css || '').replace(/\/\*[\s\S]*?\*\//g, '');
-}
-
-/** Removes every at-rule: block-less ones (`@import ...;`) to the semicolon, block ones (`@media { ... }`) across balanced braces. */
-function stripAtRules(css) {
-  let out = '';
-  let i = 0;
-  while (i < css.length) {
-    if (css[i] === '@') {
-      const semi = css.indexOf(';', i);
-      const brace = css.indexOf('{', i);
-      if (brace === -1 || (semi !== -1 && semi < brace)) {
-        i = semi === -1 ? css.length : semi + 1;
-        continue;
-      }
-      let depth = 0;
-      let j = brace;
-      for (; j < css.length; j++) {
-        if (css[j] === '{') depth++;
-        else if (css[j] === '}') { depth--; if (!depth) break; }
-      }
-      i = j + 1;
-      continue;
-    }
-    out += css[i];
-    i++;
-  }
-  return out;
-}
-
-function specificity(sel) {
-  const ids = (sel.match(/#[\w-]+/g) || []).length;
-  const classes = (sel.match(/\.[\w-]+|\[[^\]]*\]/g) || []).length;
-  const tags = (sel.match(/(^|[\s>+~])[a-zA-Z][\w-]*/g) || []).length;
-  return ids * 100 + classes * 10 + tags;
-}
-
-export function inlineStylesheets(doc) {
-  const sheets = Array.from(doc.querySelectorAll('style'));
-  if (!sheets.length) return;
-  const css = stripAtRules(stripComments(sheets.map((s) => s.textContent || '').join('\n')));
-
-  const rules = [];
-  const ruleRe = /([^{}]+)\{([^{}]*)\}/g;
-  let m;
-  let order = 0;
-  while ((m = ruleRe.exec(css))) {
-    const decls = [];
-    m[2].split(';').forEach((d) => {
-      const at = d.indexOf(':');
-      if (at < 0) return;
-      const prop = d.slice(0, at).trim().toLowerCase();
-      let value = d.slice(at + 1).trim();
-      if (!prop || !value || prop.indexOf('--') === 0 || prop.indexOf('mso-') === 0) return;
-      const important = /!important\s*$/i.test(value);
-      if (important) value = value.replace(/!important\s*$/i, '').trim();
-      if (value) decls.push({ prop, value, important });
-    });
-    if (!decls.length) continue;
-    m[1].split(',').forEach((raw) => {
-      const sel = raw.trim();
-      if (!sel || sel === '*' || sel.indexOf(':') > -1) return;
-      rules.push({ sel, decls, spec: specificity(sel), order: order++ });
-    });
-  }
-  if (!rules.length) return;
-
-  // Ascending: later (more specific / later-in-source) rules overwrite
-  // earlier winners per property below.
-  rules.sort((a, b) => a.spec - b.spec || a.order - b.order);
-
-  const winners = new Map(); // element -> Map(prop -> {value, important})
-  rules.forEach((rule) => {
-    let matched;
-    try { matched = doc.querySelectorAll(rule.sel); } catch { return; }
-    matched.forEach((el) => {
-      if (el !== doc.body && !doc.body.contains(el)) return;
-      let bucket = winners.get(el);
-      if (!bucket) { bucket = new Map(); winners.set(el, bucket); }
-      rule.decls.forEach((d) => {
-        const cur = bucket.get(d.prop);
-        if (cur && cur.important && !d.important) return;
-        bucket.set(d.prop, d);
-      });
-    });
-  });
-
-  winners.forEach((bucket, el) => {
-    if (!el.style) return;
-    bucket.forEach((d, prop) => {
-      if (!d.important && el.style.getPropertyValue(prop)) return; // inline wins
-      try { el.style.setProperty(prop, d.value); } catch { /* unparseable value -- skip */ }
-    });
-  });
-}
+/**
+ * Import-time CSS cascade: folds a parsed document's `<style>` rules into the
+ * elements' inline styles, so the importer's classifiers (which read inline
+ * styles only) see class-styled templates -- Mailchimp exports, hand-written
+ * emails, framework output that was never inlined -- the same way a mail
+ * client would.
+ *
+ * Deliberately a subset of a real cascade, matched to what email CSS uses:
+ * - `@media` blocks (and every other at-rule) are dropped whole: responsive
+ *   overrides can't be represented in the imported model, desktop values win.
+ *   A side benefit: base-rule `.desktop_hide { display:none }` still applies,
+ *   so mobile-only duplicate content is correctly dropped by the importer's
+ *   hidden-element skip.
+ * - Selectors containing `:` are skipped -- pseudo-classes/-elements are
+ *   interactive or generated state with no place in a static import.
+ * - Specificity is the classic ids/classes/tags count; equal specificity
+ *   resolves by source order; `!important` wins over everything including
+ *   inline styles, which otherwise always win (matching browser behavior for
+ *   the combinations that matter here).
+ */
+
+function stripComments(css) {
+  return String(css || '').replace(/\/\*[\s\S]*?\*\//g, '');
+}
+
+/** Removes every at-rule: block-less ones (`@import ...;`) to the semicolon, block ones (`@media { ... }`) across balanced braces. */
+function stripAtRules(css) {
+  let out = '';
+  let i = 0;
+  while (i < css.length) {
+    if (css[i] === '@') {
+      const semi = css.indexOf(';', i);
+      const brace = css.indexOf('{', i);
+      if (brace === -1 || (semi !== -1 && semi < brace)) {
+        i = semi === -1 ? css.length : semi + 1;
+        continue;
+      }
+      let depth = 0;
+      let j = brace;
+      for (; j < css.length; j++) {
+        if (css[j] === '{') depth++;
+        else if (css[j] === '}') { depth--; if (!depth) break; }
+      }
+      i = j + 1;
+      continue;
+    }
+    out += css[i];
+    i++;
+  }
+  return out;
+}
+
+function specificity(sel) {
+  const ids = (sel.match(/#[\w-]+/g) || []).length;
+  const classes = (sel.match(/\.[\w-]+|\[[^\]]*\]/g) || []).length;
+  const tags = (sel.match(/(^|[\s>+~])[a-zA-Z][\w-]*/g) || []).length;
+  return ids * 100 + classes * 10 + tags;
+}
+
+export function inlineStylesheets(doc) {
+  // A style tag carrying the css-block marker IS a block (import-html reads
+  // it back as one); folding its rules inline here stamped them onto every
+  // matched element AND kept the block, doubling the styles on each save.
+  const sheets = Array.from(doc.querySelectorAll('style')).filter((s) => !(s.getAttribute && s.getAttribute('data-mc')));
+  if (!sheets.length) return;
+  const css = stripAtRules(stripComments(sheets.map((s) => s.textContent || '').join('\n')));
+
+  const rules = [];
+  const ruleRe = /([^{}]+)\{([^{}]*)\}/g;
+  let m;
+  let order = 0;
+  while ((m = ruleRe.exec(css))) {
+    const decls = [];
+    m[2].split(';').forEach((d) => {
+      const at = d.indexOf(':');
+      if (at < 0) return;
+      const prop = d.slice(0, at).trim().toLowerCase();
+      let value = d.slice(at + 1).trim();
+      if (!prop || !value || prop.indexOf('--') === 0 || prop.indexOf('mso-') === 0) return;
+      const important = /!important\s*$/i.test(value);
+      if (important) value = value.replace(/!important\s*$/i, '').trim();
+      if (value) decls.push({ prop, value, important });
+    });
+    if (!decls.length) continue;
+    m[1].split(',').forEach((raw) => {
+      const sel = raw.trim();
+      if (!sel || sel === '*' || sel.indexOf(':') > -1) return;
+      rules.push({ sel, decls, spec: specificity(sel), order: order++ });
+    });
+  }
+  if (!rules.length) return;
+
+  // Ascending: later (more specific / later-in-source) rules overwrite
+  // earlier winners per property below.
+  rules.sort((a, b) => a.spec - b.spec || a.order - b.order);
+
+  const winners = new Map(); // element -> Map(prop -> {value, important})
+  rules.forEach((rule) => {
+    let matched;
+    try { matched = doc.querySelectorAll(rule.sel); } catch { return; }
+    matched.forEach((el) => {
+      if (el !== doc.body && !doc.body.contains(el)) return;
+      let bucket = winners.get(el);
+      if (!bucket) { bucket = new Map(); winners.set(el, bucket); }
+      rule.decls.forEach((d) => {
+        const cur = bucket.get(d.prop);
+        if (cur && cur.important && !d.important) return;
+        bucket.set(d.prop, d);
+      });
+    });
+  });
+
+  winners.forEach((bucket, el) => {
+    if (!el.style) return;
+    bucket.forEach((d, prop) => {
+      if (!d.important && el.style.getPropertyValue(prop)) return; // inline wins
+      try { el.style.setProperty(prop, d.value); } catch { /* unparseable value -- skip */ }
+    });
+  });
+}

package/src/core/editor-core.js

@@ -61,20 +61,24 @@ const RICH_OWNED_STYLE = { color: 'color', lh: 'line-height', weight: 'font-weig
  */
 function syncRichContent(block, key, val) {
   const prop = RICH_HTML_PROP[block.type];
-  if (!prop) return;
+  if (!prop) return false;
   // list items are one fragment per line; the rewrite must not run across the joins.
   const perLine = (src, fn) => (prop === 'items' ? String(src).split('\n').map(fn).join('\n') : fn(String(src)));
   const src = block.props[prop];
-  if (src == null || src === '') return;
+  if (src == null || src === '') return false;
+  let out = src;
   if (key === 'size') {
     const cur = Number(block.props.size);
     const next = Number(val);
     // An unknown base (imports that carried no readable size) can't be scaled
     // against -- the first explicit size just establishes the base.
-    if (cur > 0 && next > 0 && next !== cur) block.props[prop] = perLine(src, (s) => scaleInlineSizes(s, next / cur));
+    if (cur > 0 && next > 0 && next !== cur) out = perLine(src, (s) => scaleInlineSizes(s, next / cur));
   } else if (RICH_OWNED_STYLE[key]) {
-    block.props[prop] = perLine(src, (s) => stripInlineStyle(s, RICH_OWNED_STYLE[key]));
+    out = perLine(src, (s) => stripInlineStyle(s, RICH_OWNED_STYLE[key]));
   }
+  if (out === src) return false;
+  block.props[prop] = out;
+  return true;
 }
 
 const BORDER_STYLES = [
@@ -557,15 +561,19 @@ export class EditorCore {
   };
 
   size(b, delta) {
-    // fold any uncommitted inline formatting into state first, or the re-render
-    // from the size change would rewrite innerHTML from stale props
-    const elNode = this.editEl;
-    if (elNode) {
-      const key = b.type === 'heading' ? 'text' : (b.type === 'html' ? 'code' : 'html');
-      const val = b.type === 'heading' ? elNode.textContent : elNode.innerHTML;
-      if (b.props[key] !== val) this.setProp(b.id, key, val);
-    }
-    const cur = Number(b.props.size) || 16;
+    // Uncommitted inline formatting is folded into props by `setProp` below
+    // (`onFoldLiveEdit`), not here. This used to do its own fold, as a second
+    // commit: that read `editEl.innerHTML` unconditionally, so a second click
+    // landing in the same frame as the first -- before the rebuild had put the
+    // rescaled html into the DOM -- wrote the pre-scale markup straight back
+    // over it, and two quick clicks on a mixed-size block moved nothing. It
+    // also cost an extra undo step per click.
+    // Read the size off the live document, not off the `b` the toolbar closed
+    // over when it was built: two clicks landing before the next rebuild both
+    // saw the same stale base, so the second one re-applied the first one's
+    // value and the pair counted as a single step.
+    const live = this.find(this.state.doc, b.id).block || b;
+    const cur = Number(live.props.size) || 16;
     const [lo, hi] = SIZE_SPAN[b.type] || [10, 64];
     this.setProp(b.id, 'size', Math.max(lo, Math.min(hi, cur + delta)));
   }
@@ -620,15 +628,28 @@ export class EditorCore {
     this._persistTimer = setTimeout(() => this.persist(doc), 400);
   }
 
+  /**
+   * Both directions of history have the same two obligations when a block is
+   * being edited, because the live contenteditable is a second copy of that
+   * block's content: fold it into props *before* the current state is pushed
+   * onto the opposite stack (or the step back carries markup a few keystrokes
+   * behind what was on screen), and mark it stale afterwards (or the render
+   * that follows syncs the pre-undo DOM straight back over the restored doc --
+   * which is what made undo look like it skipped the focused block).
+   */
   undo() {
     const hist = this.state.history.slice(); const prev = hist.pop(); if (!prev) return;
+    if (this.state.editing && this.onFoldLiveEdit) this.onFoldLiveEdit();
     const doc = JSON.parse(prev);
+    if (this.state.editing) this.editStale = this.state.editing;
     this.setState({ doc, history: hist, future: this.state.future.concat(JSON.stringify(this.state.doc)), sel: null }, () => this.persist(doc));
   }
 
   redo() {
     const fut = this.state.future.slice(); const next = fut.pop(); if (!next) return;
+    if (this.state.editing && this.onFoldLiveEdit) this.onFoldLiveEdit();
     const doc = JSON.parse(next);
+    if (this.state.editing) this.editStale = this.state.editing;
     this.setState({ doc, future: fut, history: this.state.history.concat(JSON.stringify(this.state.doc)), sel: null }, () => this.persist(doc));
   }
 
@@ -660,14 +681,28 @@ export class EditorCore {
   selObj() { return this.state.sel ? this.find(this.state.doc, this.state.sel.id) : {}; }
 
   setProp(id, key, val) {
+    // The rewrite below works from the block's *committed* html, so anything
+    // still living only in the focused contenteditable is folded into props
+    // first -- otherwise it would both rewrite stale content and lose the
+    // uncommitted edit the moment the rebuilt node reads props back.
+    if (this.state.editing === id && this.onFoldLiveEdit) this.onFoldLiveEdit();
+    let rewrote = false;
     this.commit((doc) => {
       const f = this.find(doc, id);
       const target = f.block ? f.block.props : (f.row ? f.row.props : null);
       if (!target) return;
       // Before the write: the size rewrite needs the outgoing value as its base.
-      if (f.block) syncRichContent(f.block, key, val);
+      if (f.block) rewrote = syncRichContent(f.block, key, val);
       target[key] = val;
     });
+    // props are now *ahead* of the live contenteditable, which still holds the
+    // pre-rewrite html. Flagged so the render that follows syncs nothing back
+    // over them (`syncLiveEdit`, mailcraft-editor.js): without this, every
+    // Text size / color / spacing change made while the block was focused --
+    // i.e. every change made from the RTE's own +/- pair -- was silently
+    // reverted one frame later, so a mixed-size block ended up with a climbing
+    // `size` prop and untouched inline sizes.
+    if (rewrote) this.editStale = id;
   }
 
   setTheme(key, val) { this.commit((doc) => { doc.theme[key] = val; }); }
@@ -1224,7 +1259,7 @@ export class EditorCore {
 
   // ---- export / code view --------------------------------------------------
 
-  buildHtml() { return buildHtmlFn(this.state, this.exportRoot, boxCss); }
+  buildHtml(opts) { return buildHtmlFn(this.state, this.exportRoot, boxCss, opts); }
 
   openExport = () => {
     this.setState({ exportOpen: true, exportCode: this.buildHtml(), copied: false, libraryOpen: false, aiOpen: false, codeOpen: false });
@@ -1373,9 +1408,9 @@ export class EditorCore {
           /<a(?:\s|>)/i.test(String(b.props.html || ''))
             ? [{ kind: 'richLinks', label: 'Links', html: b.props.html || '', onChange: (v) => this.setProp(b.id, 'html', v) }]
             : [],
-          [B.area('Text', 'html'), B.sel('Font', 'fontFamily', this.fontOptions(true)), B.range('Text size', 'size', ...SIZE_SPAN.text, 1, 'px'), B.range('Line spacing', 'lh', 0.8, 3, 0.05, ''), B.seg('Align', 'align', ALIGN), B.sel('Text weight', 'weight', [{ value: '400', label: 'Regular' }, { value: '500', label: 'Medium' }, { value: '700', label: 'Bold' }]), B.color('Text color', 'color')], padF));
+          [B.area('Text', 'html'), B.sel('Font', 'fontFamily', this.fontOptions(true, b.props.fontFamily)), B.range('Text size', 'size', ...SIZE_SPAN.text, 1, 'px'), B.range('Line spacing', 'lh', 0.8, 3, 0.05, ''), B.seg('Align', 'align', ALIGN), B.sel('Text weight', 'weight', [{ value: '400', label: 'Regular' }, { value: '500', label: 'Medium' }, { value: '700', label: 'Bold' }]), B.color('Text color', 'color')], padF));
         case 'image': return decorate(base.concat([B.btn('Choose from library', () => this.openLibrary({ id: b.id, key: 'src' })), B.text('Alt text', 'alt', 'Describe the image'), B.text('Link URL', 'href', 'https://'), B.range('Width', 'width', 5, 100, 1, '%'), B.seg('Align', 'align', ALIGN), B.range('Rounded corners', 'radius', 0, 200, 1, 'px')], padF));
-        case 'button': return decorate(base.concat([B.text('Label', 'label'), B.text('Link URL', 'href', 'https://'), B.color('Button color', 'bg'), B.color('Text color', 'color'), B.sel('Font', 'fontFamily', this.fontOptions(true)), B.range('Text size', 'size', 8, 48, 1, 'px'), B.range('Rounded corners', 'radius', 0, 60, 1, 'px'), B.range('Outline thickness', 'borderW', 0, 6, 1, 'px')].concat(b.props.borderW ? [B.sel('Outline style', 'borderStyle', BORDER_STYLES), B.color('Outline color', 'borderColor')] : []).concat([B.range('Button height', 'py', 0, 60, 1, 'px'), B.range('Button width', 'px', 0, 120, 2, 'px'), B.seg('Align', 'align', ALIGN), B.tog('Full width', 'full')])));
+        case 'button': return decorate(base.concat([B.text('Label', 'label'), B.text('Link URL', 'href', 'https://'), B.color('Button color', 'bg'), B.color('Text color', 'color'), B.sel('Font', 'fontFamily', this.fontOptions(true, b.props.fontFamily)), B.range('Text size', 'size', 8, 48, 1, 'px'), B.range('Rounded corners', 'radius', 0, 60, 1, 'px'), B.range('Outline thickness', 'borderW', 0, 6, 1, 'px')].concat(b.props.borderW ? [B.sel('Outline style', 'borderStyle', BORDER_STYLES), B.color('Outline color', 'borderColor')] : []).concat([B.range('Button height', 'py', 0, 60, 1, 'px'), B.range('Button width', 'px', 0, 120, 2, 'px'), B.seg('Align', 'align', ALIGN), B.tog('Full width', 'full')])));
         case 'divider': return decorate(base.concat([B.range('Thickness', 'thickness', 1, 20, 1, 'px'), B.sel('Line style', 'lineStyle', BORDER_STYLES), B.range('Width', 'width', 5, 100, 5, '%'), B.color('Color', 'color'), B.range('Space above & below', 'py', 0, 160, 2, 'px')]));
         case 'spacer': return decorate(base.concat([B.range('Height', 'height', 0, 400, 2, 'px')]));
         // Dynamic-content markers: the expression lives on the start marker;
@@ -1400,15 +1435,15 @@ export class EditorCore {
           B.seg('Icon palette', 'palette', [{ value: 'custom', label: 'Custom' }, { value: 'brand', label: 'Brand' }]),
           B.seg('Icon shape', 'shape', [{ value: 'outline', label: 'Outline' }, { value: 'bare', label: 'Bare' }, { value: 'circle', label: 'Circle' }, { value: 'square', label: 'Square' }]),
           B.tog('Show network names', 'showLabel'),
-          B.sel('Font', 'fontFamily', this.fontOptions(true)),
+          B.sel('Font', 'fontFamily', this.fontOptions(true, b.props.fontFamily)),
           B.seg('Align', 'align', ALIGN), B.range('Icon size', 'size', 10, 64, 1, 'px'), B.range('Space between icons', 'gap', 0, 80, 2, 'px'), B.color('Icon color', 'color'),
         ]));
         case 'video': return decorate(base.concat([B.btn('Choose thumbnail', () => this.openLibrary({ id: b.id, key: 'src' })), B.text('Video URL', 'href', 'https://'), B.text('Caption', 'caption'), B.color('Badge color', 'badge')]));
         case 'html': return decorate(base.concat([B.area('Raw HTML', 'code')]));
-        case 'countdown': return decorate(base.concat([B.text('Ends at (YYYY-MM-DDTHH:MM)', 'target'), B.text('Label', 'label'), B.sel('Font', 'fontFamily', this.fontOptions(true)), B.color('Color', 'color')]));
-        case 'menu': return decorate(base.concat([B.area('Items — one per line as Label|URL', 'items'), B.seg('Align', 'align', ALIGN), B.sel('Font', 'fontFamily', this.fontOptions(true)), B.range('Text size', 'size', 8, 32, 1, 'px'), B.range('Space between items', 'gap', 0, 80, 2, 'px'), B.color('Text color', 'color')]));
-        case 'heading': return decorate(base.concat([B.area('Text', 'text'), B.sel('Heading level', 'level', [{ value: 'h1', label: 'H1 — largest' }, { value: 'h2', label: 'H2' }, { value: 'h3', label: 'H3' }, { value: 'h4', label: 'H4 — smallest' }]), B.seg('Font style', 'font', [{ value: 'condensed', label: 'Condensed' }, { value: 'body', label: 'Body' }]), B.sel('Font', 'fontFamily', this.fontOptions(true)), B.range('Text size', 'size', ...SIZE_SPAN.heading, 1, 'px'), B.range('Line spacing', 'lh', 0.8, 2.2, 0.02, ''), B.seg('Align', 'align', ALIGN), B.sel('Text weight', 'weight', [{ value: '400', label: 'Regular' }, { value: '600', label: 'Semibold' }, { value: '700', label: 'Bold' }]), B.color('Text color', 'color')], padF));
-        case 'list': return decorate(base.concat([B.area('Items — one per line', 'items'), B.tog('Numbered', 'ordered'), B.sel('Font', 'fontFamily', this.fontOptions(true)), B.range('Text size', 'size', 8, 48, 1, 'px'), B.range('Line spacing', 'lh', 0.8, 3, 0.05, ''), B.range('Space between items', 'gap', 0, 60, 1, 'px'), B.color('Text color', 'color')], padF));
+        case 'countdown': return decorate(base.concat([B.text('Ends at (YYYY-MM-DDTHH:MM)', 'target'), B.text('Label', 'label'), B.sel('Font', 'fontFamily', this.fontOptions(true, b.props.fontFamily)), B.color('Color', 'color')]));
+        case 'menu': return decorate(base.concat([B.area('Items — one per line as Label|URL', 'items'), B.seg('Align', 'align', ALIGN), B.sel('Font', 'fontFamily', this.fontOptions(true, b.props.fontFamily)), B.range('Text size', 'size', 8, 32, 1, 'px'), B.range('Space between items', 'gap', 0, 80, 2, 'px'), B.color('Text color', 'color')]));
+        case 'heading': return decorate(base.concat([B.area('Text', 'text'), B.sel('Heading level', 'level', [{ value: 'h1', label: 'H1 — largest' }, { value: 'h2', label: 'H2' }, { value: 'h3', label: 'H3' }, { value: 'h4', label: 'H4 — smallest' }]), B.seg('Font style', 'font', [{ value: 'condensed', label: 'Condensed' }, { value: 'body', label: 'Body' }]), B.sel('Font', 'fontFamily', this.fontOptions(true, b.props.fontFamily)), B.range('Text size', 'size', ...SIZE_SPAN.heading, 1, 'px'), B.range('Line spacing', 'lh', 0.8, 2.2, 0.02, ''), B.seg('Align', 'align', ALIGN), B.sel('Text weight', 'weight', [{ value: '400', label: 'Regular' }, { value: '600', label: 'Semibold' }, { value: '700', label: 'Bold' }]), B.color('Text color', 'color')], padF));
+        case 'list': return decorate(base.concat([B.area('Items — one per line', 'items'), B.tog('Numbered', 'ordered'), B.sel('Font', 'fontFamily', this.fontOptions(true, b.props.fontFamily)), B.range('Text size', 'size', 8, 48, 1, 'px'), B.range('Line spacing', 'lh', 0.8, 3, 0.05, ''), B.range('Space between items', 'gap', 0, 60, 1, 'px'), B.color('Text color', 'color')], padF));
         case 'table': return decorate(base.concat([
           // Custom kind (render/fields.js `renderTableGrid`): a real grid of
           // cell inputs with add/remove row+column controls, replacing the
@@ -1416,11 +1451,10 @@ export class EditorCore {
           // `data` string underneath.
           { kind: 'tablegrid', label: 'Cells', value: b.props.data || '', header: !!b.props.header, onChange: (v) => this.setProp(b.id, 'data', v) },
           B.tog('Header row', 'header'), B.tog('Cell borders', 'borders'), ...(b.props.borders ? [B.range('Border thickness', 'borderWidth', 1, 10, 1, 'px'), B.sel('Border style', 'borderStyle', BORDER_STYLES)] : []), B.tog('Zebra stripes', 'striped'),
-          B.sel('Font', 'fontFamily', this.fontOptions(true)),
+          B.sel('Font', 'fontFamily', this.fontOptions(true, b.props.fontFamily)),
           B.range('Space in cells', 'pad', 0, 50, 1, 'px'), B.range('Text size', 'size', 8, 32, 1, 'px'), B.range('Width', 'width', 10, 100, 5, '%'),
           B.color('Header color', 'headBg'), B.color('Line color', 'lineColor'), B.seg('Align', 'align', ALIGN),
         ]));
-        case 'embed': return decorate(base.concat([B.text('Embed URL', 'src', 'https://'), B.range('Height', 'height', 40, 1200, 10, 'px'), B.text('Accessible label', 'label'), B.range('Padding', 'py', 0, 120, 2, 'px')]));
         case 'css': return decorate(base.concat([B.area('CSS', 'code'), B.text('Note to yourself', 'note')]));
         case 'box': return decorate(base.concat([B.area('Content (HTML allowed)', 'html'), B.color('Background color', 'bg'), B.btn('Choose background image', () => this.openLibrary({ id: b.id, key: 'bgImage' })), B.text('Background image URL', 'bgImage', 'https://'), B.range('Space inside', 'pad', 0, 160, 2, 'px'), B.range('Border thickness', 'border', 0, 20, 1, 'px')].concat(b.props.border ? [
           B.sel('Border style', 'borderStyle', BORDER_STYLES), B.color('Border color', 'lineColor'),
@@ -1576,7 +1610,7 @@ export class EditorCore {
    * an empty value meaning "use the theme font" (renderers read
    * `p.fontFamily || theme.font`, so old documents need no migration).
    */
-  fontOptions(inherit) {
+  fontOptions(inherit, current) {
     const stacks = [
       { value: '"Helvetica Neue", Helvetica, Arial, sans-serif', label: 'Helvetica Neue' },
       { value: 'Helvetica, Arial, sans-serif', label: 'Helvetica / Arial' },
@@ -1589,7 +1623,20 @@ export class EditorCore {
       { value: '"Palatino Linotype", Palatino, Georgia, serif', label: 'Palatino' },
       { value: 'ui-monospace, "Courier New", monospace', label: 'Monospace' },
     ];
-    return inherit ? [{ value: '', label: 'Inherit — theme font' }].concat(stacks) : stacks;
+    const opts = inherit ? [{ value: '', label: 'Inherit — theme font' }].concat(stacks) : stacks;
+    // An imported email brings its own stack, and it is almost never one of
+    // the ten above. A <select> whose value matches no option shows nothing
+    // selected -- the control read 'Inherit — theme font' (or the first
+    // stack) about a block that was really set in Georgia, and the only way
+    // to answer "what font is this?" was to overwrite it. Kept as an option
+    // of its own, matched loosely because quoting and spacing differ
+    // between what CSSOM hands back and what the list declares ('DM Sans'
+    // vs "DM Sans").
+    const key = (v) => String(v || '').replace(/["']/g, '').replace(/\s*,\s*/g, ',').replace(/\s+/g, ' ').trim().toLowerCase();
+    if (current && !opts.some((o) => key(o.value) === key(current))) {
+      opts.push({ value: current, label: String(current).split(',')[0].replace(/["']/g, '').trim() + ' — from the email' });
+    }
+    return opts;
   }
 
   themeFields() {
@@ -1621,7 +1668,7 @@ export class EditorCore {
       B.color('Border color', 'borderColor'),
     ] : []).concat([
       B.head('Type & color'),
-      B.sel('Default font', 'font', this.fontOptions(false)),
+      B.sel('Default font', 'font', this.fontOptions(false, this.state.doc.theme.font)),
       B.color('Text color', 'text'),
       B.color('Link color', 'link'),
     ]));