@seliseblocks/mailcraft 0.2.8 → 0.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seliseblocks/mailcraft",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "description": "Framework-agnostic drag-and-drop email template editor, packaged as a zero-dependency Web Component.",
   "license": "MIT",
   "author": "SELISE Digital Platforms",
@@ -49,6 +49,7 @@
     "examples",
     "README.md",
     "DOCS.md",
+    "CHANGELOG.md",
     "LICENSE"
   ],
   "engines": {
@@ -59,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

@@ -58,7 +58,10 @@ function specificity(sel) {
 }
 
 export function inlineStylesheets(doc) {
-  const sheets = Array.from(doc.querySelectorAll('style'));
+  // 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')));
 

package/src/core/editor-core.js

@@ -3,7 +3,7 @@ import { mk, blk, mkRow, GROUPS, LAYOUTS, migrateDoc, normalizeDoc, blankDoc } f
 import { binder, decorate, group } from './binder.js';
 import { ALL_FOLDER_ID, normalizeAsset, resolveLimits, providerProblems } from './storage.js';
 import { validateFiles, limitsProblem } from './storage-limits.js';
-import { migrateTokens, cleanHtml, escHtml, linkHref } from './sanitize.js';
+import { migrateTokens, cleanHtml, escHtml, linkHref, scaleInlineSizes, stripInlineStyle } from './sanitize.js';
 import { buildHtml as buildHtmlFn } from './export.js';
 import { htmlToDoc } from './import-html.js';
 import { boxCss } from './layout-style.js';
@@ -35,6 +35,48 @@ const UPLOAD_CONCURRENCY = 3;
  */
 const RETIRED_SEED = /^data:image\/svg\+xml;utf8,.*%3Cpattern%20id%3D%22s%22/;
 const withoutRetiredSeeds = (assets) => (Array.isArray(assets) ? assets.filter((a) => !RETIRED_SEED.test(String((a && a.url) || ''))) : []);
+/**
+ * The one span Text size moves in, per block type -- shared by the inspector
+ * range and the RTE's ± buttons. They used to disagree: the panel allowed
+ * 8–96 (text) and 12–120 (heading) while `size()` clamped to a private
+ * 10–64, so a single "Larger text" click on a 96px block *shrank* it to 64.
+ */
+const SIZE_SPAN = { text: [8, 96], heading: [12, 120] };
+/** The blocks whose content is rich HTML in props, and the prop it lives in. Only these need the descendant rewrites below. */
+const RICH_HTML_PROP = { text: 'html', list: 'items' };
+/** Inspector key -> the inline CSS property whose descendant copies mask it (see `stripInlineStyle`). */
+const RICH_OWNED_STYLE = { color: 'color', lh: 'line-height', weight: 'font-weight', align: 'text-align' };
+
+/**
+ * Keeps a rich block's descendants in agreement with the block-level control
+ * being moved. Imported HTML deliberately keeps per-element inline typography
+ * (sanitize.js `cleanImportHtml`), and a descendant's own declaration beats
+ * inheritance from the wrapper -- so without this, Text size / color / Line
+ * spacing / weight / Align silently did nothing on any imported (or
+ * AI-drafted) block. Size *scales* descendants so a 15/26/15px hierarchy
+ * survives as 45/78/45 instead of flattening; the others strip the descendant
+ * property, exactly the semantics the Font control already shipped with.
+ * Runs inside the same `commit` as the prop write: one undo step, and a
+ * document nobody touches is never rewritten.
+ */
+function syncRichContent(block, key, val) {
+  const prop = RICH_HTML_PROP[block.type];
+  if (!prop) return;
+  // 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 (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));
+  } else if (RICH_OWNED_STYLE[key]) {
+    block.props[prop] = perLine(src, (s) => stripInlineStyle(s, RICH_OWNED_STYLE[key]));
+  }
+}
+
 const BORDER_STYLES = [
   { value: 'solid', label: 'Solid' },
   { value: 'dashed', label: 'Dashed' },
@@ -524,7 +566,8 @@ export class EditorCore {
       if (b.props[key] !== val) this.setProp(b.id, key, val);
     }
     const cur = Number(b.props.size) || 16;
-    this.setProp(b.id, 'size', Math.max(10, Math.min(64, cur + delta)));
+    const [lo, hi] = SIZE_SPAN[b.type] || [10, 64];
+    this.setProp(b.id, 'size', Math.max(lo, Math.min(hi, cur + delta)));
   }
 
   hasCountdown() { return this.state.doc.rows.some((r) => r.cols.some((c) => c.blocks.some((b) => b.type === 'countdown'))); }
@@ -620,7 +663,10 @@ export class EditorCore {
     this.commit((doc) => {
       const f = this.find(doc, id);
       const target = f.block ? f.block.props : (f.row ? f.row.props : null);
-      if (target) target[key] = val;
+      if (!target) return;
+      // Before the write: the size rewrite needs the outgoing value as its base.
+      if (f.block) syncRichContent(f.block, key, val);
+      target[key] = val;
     });
   }
 
@@ -1178,7 +1224,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 });
@@ -1190,6 +1236,12 @@ export class EditorCore {
     this.flash(this.t('toast.htmlCopied'));
   };
 
+  /** Code view's source pane onto the clipboard, unsaved edits included: `codeSrc` is what the pane shows, which may be ahead of what Apply has pushed to the canvas. */
+  copyCode = () => {
+    if (navigator.clipboard) navigator.clipboard.writeText(this.state.codeSrc).catch(() => {});
+    this.flash(this.t('toast.htmlCopied'));
+  };
+
   downloadExport = () => {
     const blob = new Blob([this.state.exportCode], { type: 'text/html' });
     const a = document.createElement('a');
@@ -1321,9 +1373,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', 8, 96, 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;
@@ -1348,15 +1400,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', 12, 120, 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
@@ -1364,11 +1416,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'),
@@ -1524,7 +1575,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' },
@@ -1537,7 +1588,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() {
@@ -1569,7 +1633,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'),
     ]));

package/src/core/export.js

@@ -136,9 +136,38 @@ export function decorateLogicTags(html) {
   return s;
 }
 
-export function buildHtml(state, root, boxCss) {
+export function buildHtml(state, root, boxCss, opts) {
   const d = state.doc; const t = d.theme;
   const logic = logicPlan(d);
+  /*
+   * Fidelity markers. A handful of blocks render into markup that cannot be
+   * read back into the block it came from: a countdown bakes its digits, a
+   * video is just a linked image, a section box and a code sample are styled
+   * divs like any other, a raw-CSS block is a bare <style>, and a flex/grid
+   * row is a div no table walker can re-shape. For exactly those, the export
+   * stamps a compact attribute layer -- `data-mc` (the type), `data-mcp`
+   * (the props the DOM itself does not carry), `data-mcr` (a CSS-layout
+   * row's settings) and the inert `mc-keep` class -- which the importer
+   * trusts when present and ignores otherwise. Mail clients ignore unknown
+   * attributes wholesale, and everything else round-trips from its rendered
+   * shape alone, so the layer stays this small. Attribute names deliberately
+   * sit outside `grab()`'s `data-mc-[a-z-]+` strip (they live on exporter
+   * scaffolding, but belt and braces). A host that wants pristine HTML can
+   * pass `exportHtml({ markers: false })` and accept the lossy reload.
+   */
+  const markers = !(opts && opts.markers === false);
+  const attrEsc = (v) => String(v).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+  const MARKED = { countdown: 1, video: 1, box: 1, codeblock: 1 };
+  const marker = (b) => {
+    if (!markers || !MARKED[b.type]) return '';
+    const payload = { ...b.props };
+    // Content the rendered DOM already carries is not duplicated into the
+    // payload: a box's html IS the grabbed markup, a code sample's text IS
+    // the <pre>'s own.
+    if (b.type === 'box') delete payload.html;
+    if (b.type === 'codeblock') delete payload.code;
+    return ' data-mc="' + b.type + '" data-mcp="' + attrEsc(JSON.stringify(payload)) + '"';
+  };
   const grab = (id) => {
     const el = root.querySelector('[data-mc-content="' + id + '"]');
     if (!el) return '';
@@ -174,7 +203,11 @@ export function buildHtml(state, root, boxCss) {
    */
   const mobilePlan = (rp, cols) => {
     const mode = rp.mobileCols === undefined ? 1 : rp.mobileCols;
-    if (cols < 2 || mode === 'keep') return { row: '', cell: '' };
+    if (cols < 2) return { row: '', cell: '' };
+    // `keep` exports NO functional class, which made it indistinguishable
+    // from foreign HTML (where stacking is the safer default) -- so it ships
+    // as the inert `mc-keep`, a marker with no stylesheet rule behind it.
+    if (mode === 'keep') return { row: markers ? 'mc-keep' : '', cell: '' };
     const rowCls = [];
     // Two-up and reverse both need the row to become a flex container, which
     // is safe precisely because it only ever runs inside the media query: a
@@ -208,11 +241,15 @@ export function buildHtml(state, root, boxCss) {
       return blocksOf.map((b) => logic.emit.get(b.id) || '').filter(Boolean).map((s) => '      ' + s).join('\n');
     }
     const colInner = (c) => c.blocks.map((b) => {
-      if (b.type === 'css') return '<style>' + (b.props.code || '') + '</style>';
+      if (b.type === 'css') return '<style' + (markers ? ' data-mc="css"' + (b.props.note ? ' data-mcn="' + attrEsc(b.props.note) + '"' : '') : '') + '>' + (b.props.code || '') + '</style>';
       if (b.type === 'html') return b.props.code || '';
-      if (b.type === 'svg') return '<div style="text-align:' + b.props.align + ';padding:' + b.props.py + 'px 0">' + (b.props.code || '') + '</div>';
+      // The same width-carrying span the canvas draws (block-body.js), so the
+      // Width slider reaches the sent mail and the importer can read it back
+      // -- exported bare, the drawing shipped at its intrinsic size and the
+      // prop reset to 100 on every reload.
+      if (b.type === 'svg') return '<div style="text-align:' + b.props.align + ';padding:' + b.props.py + 'px 0"><span style="display:inline-block;width:' + (b.props.width || 100) + '%">' + (b.props.code || '') + '</span></div>';
       if (b.type === 'condition' || b.type === 'loop') return logic.emit.get(b.id) || '';
-      return '<div' + visClass(b.props) + ' style="' + boxCss(b.props) + '">' + grab(b.id) + '</div>';
+      return '<div' + marker(b) + visClass(b.props) + ' style="' + boxCss(b.props) + '">' + grab(b.id) + '</div>';
     }).filter(Boolean).join('\n            ') || '&nbsp;';
     const cells = r.cols.map((c) => {
       // Column-level styling (bg/radius/inner padding) renders as a wrapper
@@ -228,9 +265,12 @@ export function buildHtml(state, root, boxCss) {
     // for every wide client.
     const wrapCls = [plan.cell ? 'mc-stack' : '', plan.row].filter(Boolean).join(' ');
     const stackWrap = wrapCls ? ' class="' + wrapCls + '"' : '';
+    const mcr = markers && rp.layout && rp.layout !== 'columns'
+      ? ' data-mcr="' + attrEsc(JSON.stringify({ layout: rp.layout, flexDir: rp.flexDir || 'row', justify: rp.justify || 'flex-start', alignItems: rp.alignItems || 'stretch', wrap: rp.wrap !== false, gridCols: rp.gridCols || 2, gap: rp.gap || 0, spans: r.cols.map((c) => c.span) })) + '"'
+      : '';
     const cssBody = rp.layout === 'grid'
-      ? '<div' + stackWrap + ' style="display:grid;grid-template-columns:repeat(' + (rp.gridCols || 2) + ',minmax(0,1fr));gap:' + rp.gap + 'px">\n            ' + r.cols.map((c) => '<div>' + colInner(c) + '</div>').join('\n            ') + '\n          </div>'
-      : '<div' + stackWrap + ' style="display:flex;flex-direction:' + (rp.flexDir || 'row') + ';justify-content:' + (rp.justify || 'flex-start') + ';align-items:' + (rp.alignItems || 'stretch') + ';flex-wrap:' + (rp.wrap ? 'wrap' : 'nowrap') + ';gap:' + rp.gap + 'px">\n            ' + r.cols.map((c) => '<div style="flex:' + c.span + ' 1 auto;min-width:0">' + colInner(c) + '</div>').join('\n            ') + '\n          </div>';
+      ? '<div' + mcr + stackWrap + ' style="display:grid;grid-template-columns:repeat(' + (rp.gridCols || 2) + ',minmax(0,1fr));gap:' + rp.gap + 'px">\n            ' + r.cols.map((c) => '<div>' + colInner(c) + '</div>').join('\n            ') + '\n          </div>'
+      : '<div' + mcr + stackWrap + ' style="display:flex;flex-direction:' + (rp.flexDir || 'row') + ';justify-content:' + (rp.justify || 'flex-start') + ';align-items:' + (rp.alignItems || 'stretch') + ';flex-wrap:' + (rp.wrap ? 'wrap' : 'nowrap') + ';gap:' + rp.gap + 'px">\n            ' + r.cols.map((c) => '<div style="flex:' + c.span + ' 1 auto;min-width:0">' + colInner(c) + '</div>').join('\n            ') + '\n          </div>';
     const body = rp.layout && rp.layout !== 'columns'
       ? cssBody
       // The `<tr>` is what becomes the flex container for two-up and reverse;
@@ -244,8 +284,21 @@ export function buildHtml(state, root, boxCss) {
       : 'background:' + (rp.bg || t.contentBg || 'transparent') + ';';
     const tdBorder = rowBorderCss(rp)
       + (rp.radius ? 'border-radius:' + rp.radius + 'px;' : '')
-      + (rp.shadow ? 'box-shadow:' + rp.shadow + ';' : '')
-      + ((rp.mt || rp.mr || rp.mb || rp.ml || rp.my) ? 'margin:' + rowMargin(rp) + ';' : '');
+      + (rp.shadow ? 'box-shadow:' + rp.shadow + ';' : '');
+    // Outside margins and Max width need an element mail clients actually
+    // honour them on: margins on a <td> are ignored by every major client
+    // (the old shape wrote them there -- inert in sent mail AND never read
+    // back), and max-width was canvas-only. Both now ride a wrapper div
+    // INSIDE the cell, carrying the row's paint and padding with them so
+    // the margin sits outside the painted box, exactly as the canvas draws
+    // it. Rows using neither keep the old markup byte for byte.
+    const boxed = rp.mt || rp.mr || rp.mb || rp.ml || rp.my || (rp.maxW && rp.maxW < 100);
+    if (boxed) {
+      const cap = rp.maxW && rp.maxW < 100 ? 'max-width:' + rp.maxW + '%;' : '';
+      // centerEmpty only when capped: an uncapped box spans the cell anyway,
+      // and `auto` there would only read back as a lost slider value.
+      return '      <tr>\n        <td style="padding:0;">\n        <div style="' + cap + 'margin:' + rowMargin(rp, !!cap) + ';padding:' + rowPad(rp) + ';' + tdBg + tdBorder + '">\n          ' + body + '\n        </div>\n        </td>\n      </tr>';
+    }
     return '      <tr>\n        <td style="padding:' + rowPad(rp) + ';' + tdBg + tdBorder + '">\n          ' + body + '\n        </td>\n      </tr>';
   }).join('\n') + (logic.tail ? '\n      ' + logic.tail : '');
   // The page section -- the full-width area the content column sits on. Its
@@ -353,6 +406,26 @@ export function buildHtml(state, root, boxCss) {
   // `text-size-adjust` at 100%, never `none`: both stop a mobile client
   // inflating the type, but `none` also blocks legitimate scaling and leaves
   // text unreadably small on some Android clients.
+  /*
+   * theme.link, made real: mail clients have no stylesheet to inherit a link
+   * color from (Gmail strips <style>; the sheet rule that paints the canvas
+   * never ships), so the value must ride every anchor inline. Stamped only
+   * where no inline color already stands -- a button label, a menu item, or
+   * a link the user recolored by hand keeps its own -- and skipped entirely
+   * when the theme has no link color. The canvas strips restated stamps at
+   * render time (overrideLinkColor), which is what keeps a reloaded document
+   * inheriting: export -> import -> export re-stamps the same bytes.
+   */
+  const stampLinks = (html) => {
+    if (!t.link) return html;
+    return html.replace(/<a\b([^>]*)>/g, (m0, attrs) => {
+      if (/(?:[;"\s])color\s*:/.test(attrs)) return m0;
+      if (/style="/.test(attrs)) {
+        return '<a' + attrs.replace(/style="([^"]*)"/, (s0, css) => 'style="' + css + (!css.trim() || css.trim().endsWith(';') ? '' : ';') + 'color:' + t.link + ';"') + '>';
+      }
+      return '<a' + attrs + ' style="color:' + t.link + ';">';
+    });
+  };
   const bodyStyle = 'margin:0;padding:0;background:' + pageBg + ';font-family:' + t.font.replace(/"/g, "'") + ';color:' + t.text + ';-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%;';
-  return msoHarden('<!doctype html>\n<html lang="en" xmlns:o="urn:schemas-microsoft-com:office:office">\n<head>\n<meta charset="utf-8">\n<meta name="viewport" content="width=device-width,initial-scale=1">\n<meta name="color-scheme" content="light">\n<meta name="supported-color-schemes" content="light">\n<title>' + 'Email' + '</title>' + msoHead + stackCss + '\n</head>\n<body style="' + bodyStyle + '">\n<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:' + pageBg + ';">\n  <tr><td align="center" style="padding:' + pagePad + ';">\n    ' + ghostOpen + '\n    ' + shell + '\n    ' + ghostClose + '\n  </td></tr>\n</table>\n</body>\n</html>');
+  return msoHarden(stampLinks('<!doctype html>\n<html lang="en" xmlns:o="urn:schemas-microsoft-com:office:office">\n<head>\n<meta charset="utf-8">\n<meta name="viewport" content="width=device-width,initial-scale=1">\n<meta name="color-scheme" content="light">\n<meta name="supported-color-schemes" content="light">\n<title>' + 'Email' + '</title>' + msoHead + stackCss + '\n</head>\n<body style="' + bodyStyle + '">\n<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:' + pageBg + ';">\n  <tr><td align="center" style="padding:' + pagePad + ';">\n    ' + ghostOpen + '\n    ' + shell + '\n    ' + ghostClose + '\n  </td></tr>\n</table>\n</body>\n</html>'));
 }

package/src/core/icons.js

@@ -67,7 +67,6 @@ const ICONS = {
   hero: [['rect', 3, 4, 18, 16], 'M6 11h12', 'M6 15h6', ['rect', 14.5, 13.5, 4, 3]],
   stats: ['M5 19v-7', 'M12 19V5', 'M19 19v-4', 'M3 19h18'],
   gallery: [['rect', 3, 4, 7.5, 7.5], ['rect', 13.5, 4, 7.5, 7.5], ['rect', 3, 12.5, 7.5, 7.5], ['rect', 13.5, 12.5, 7.5, 7.5]],
-  embed: [['rect', 2.5, 5, 19, 14], 'M2.5 9h19', 'M10.5 11.5l3.5 2-3.5 2z'],
   css: ['M5 4h14l-1.5 15L12 21l-5.5-2z', 'M8.5 9h7', 'M9 13h5'],
   codeblock: [['rect', 3, 4, 18, 16], 'M9.5 10l-2 2 2 2', 'M14.5 10l2 2-2 2'],
   data: ['M4 6c0-1.7 3.6-3 8-3s8 1.3 8 3-3.6 3-8 3-8-1.3-8-3z', 'M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6', 'M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'],