@seliseblocks/mailcraft 0.2.10 → 0.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seliseblocks/mailcraft",
-  "version": "0.2.10",
+  "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",

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; }); }

package/src/core/import-html.js

@@ -753,7 +753,7 @@ function isStructural(el) {
   return /^(TABLE|FORM|IFRAME|SCRIPT|STYLE|VIDEO|OBJECT|EMBED)$/.test(el.tagName) || !!el.querySelector('table,form,iframe,script,video,object,embed');
 }
 
-/** `core/export.js` wraps every block in a column with `<div style="{boxCss(b.props)}">`, which for every block type shipped today (none define the `bBg/bBorder/bLine/bRadius/bPad` props `boxCss` reads) always resolves to a bare `<div style="margin:0">` -- a see-through spacing wrapper, not real content. Unwraps that one level so the classifiers see the block's own signature div directly; leaves any div that carries other styling (an intentionally-styled container someone pasted in) alone, since that's real content, not framework wrapper. */
+/** `core/export.js` wraps every block in a column with `<div style="{boxCss(b.props)}">`, which resolves to a bare `<div style="margin:0">` for any block whose "Box & border" panel is untouched -- a see-through spacing wrapper, not real content. Unwraps that one level so the classifiers see the block's own signature div directly; leaves any div that carries other styling alone, since that's either a set box (read back by `boxPropsOf`) or an intentionally-styled container someone pasted in -- real content, not framework wrapper. */
 function unwrapBoxDiv(el) {
   if (el.tagName !== 'DIV' || el.children.length !== 1) return el;
   // A device-visibility wrapper is framework too, and the declarations that
@@ -800,6 +800,48 @@ function logicMarkersOf(text) {
   return out;
 }
 
+/**
+ * The container styling of a `<div>` that paints a panel around its content.
+ *
+ * `cleanImportHtml`'s tag whitelist has no DIV (it never could have one --
+ * arbitrary paste brings div soup), so a `<div
+ * style="background-color:#eff6fc;border-radius:8px">` wrapping a run of
+ * text -- the verification-code panel every transactional template has --
+ * was flattened away on import and the box came back unpainted on the very
+ * first save. Read here instead, into the exact props `boxCss`/`boxStyle`
+ * already write for a block's own box, so the shape round-trips and the
+ * color lands under the inspector's "Box & border" controls where it can be
+ * edited.
+ *
+ * A color or a border is what makes a div a panel; a radius alone paints
+ * nothing, so it is picked up alongside but never claimed on its own.
+ * Padding is deliberately not read: it already reaches the block as its
+ * py/px run padding, which keeps the source's asymmetry (`18px 24px`) that
+ * the single-value `bPad` cannot express.
+ */
+function boxPropsOf(el) {
+  if (!el || el.tagName !== 'DIV' || !el.style) return null;
+  const out = {};
+  const bg = bgOf(el);
+  // `background:transparent` is what the exporter writes on every styled
+  // column wrapper, and CSSOM hands the keyword back as `rgba(0, 0, 0, 0)`;
+  // claiming either as a box color paints nothing and only makes the run
+  // look like a panel.
+  if (bg && bg !== 'transparent' && !/^rgba\([^)]*,\s*0\s*\)$/.test(bg)) out.bBg = bg;
+  const frame = borderSidesOf(el.style);
+  if (frame.width) {
+    out.bBorder = frame.width;
+    out.bStyle = borderStyleOf(el.style);
+    out.bLine = borderColorOf(el.style) || '#e2e2e5';
+    out.bTop = frame.sides.top > 0; out.bRight = frame.sides.right > 0;
+    out.bBottom = frame.sides.bottom > 0; out.bLeft = frame.sides.left > 0;
+  }
+  if (!out.bBg && !out.bBorder) return null;
+  const radius = radiusOf(el.style);
+  if (radius) out.bRadius = radius;
+  return out;
+}
+
 /** Whether an element (or the transparent single-child chain under it) carries its own padding -- the shape the exporter writes for a block's py/px, and a builder section's own spacing. Such a wrapper is one block, never part of a text run. */
 function hasOwnRunPad(el) {
   let e = el;
@@ -840,6 +882,10 @@ function blocksFromNodes(nodes) {
   // inheritedStyle reads below were skipped wholesale, so the run imported
   // at the theme default (a 30px/800 verification code became 16px plain).
   let bufTextEl = null;
+  // The container styling of the run's own wrapper (see `boxPropsOf`), kept
+  // out of the html because the sanitizer's whitelist has no DIV to hang it
+  // on.
+  let bufBox = null;
   const flush = () => {
     const raw = buf.join('');
     const html = cleanImportHtml(raw);
@@ -919,9 +965,12 @@ function blocksFromNodes(nodes) {
       // went through it, so a mobile-only paragraph reloaded visible
       // everywhere.
       if (bufVis) over.vis = bufVis;
+      // The wrapper's own box, last: these are block-level props, so nothing
+      // read off the content above can collide with them.
+      if (bufBox) Object.assign(over, bufBox);
       out.push(blk('text', over));
     }
-    buf = []; bufFirstEl = null; bufTextEl = null; bufEls = []; bufVis = undefined;
+    buf = []; bufFirstEl = null; bufTextEl = null; bufEls = []; bufVis = undefined; bufBox = null;
   };
   nodes.forEach((n) => {
     if (n.nodeType === 3) {
@@ -978,8 +1027,17 @@ function blocksFromNodes(nodes) {
     // as padding does: the exporter writes exactly one such wrapper per
     // block, and without this two zero-padded text blocks buffered into one
     // -- the second lost its size, weight, everything -- on every save.
-    const boundary = n.nodeType === 1 && !INLINE_TAGS.test(target.tagName) && (hasOwnRunPad(target) || target !== n);
+    // A painted panel is one block, whatever it holds: its styling describes
+    // the whole run, so it must neither merge with the prose around it (a
+    // bg-only div carries no padding to make it a boundary on its own) nor
+    // split, since only the first block of a split would keep the panel.
+    const box = boxPropsOf(target);
+    const boundary = n.nodeType === 1 && !INLINE_TAGS.test(target.tagName) && (hasOwnRunPad(target) || target !== n || !!box);
     if (boundary && buf.length) flush();
+    // Claimed only when the panel opens the run, which after that flush is
+    // always -- a box nested inside a longer run is content, and its color
+    // must not be promoted to the block around it.
+    if (box && !bufFirstEl) bufBox = box;
     if (!bufFirstEl) bufFirstEl = target;
     bufEls.push(target);
     // Read off `n`, not `target`: the visibility class rides the wrapper

package/src/mailcraft-editor.js

@@ -137,6 +137,7 @@ export class MailCraftEditor extends ElementBase {
       return tag === 'input' || tag === 'textarea' || (target && target.isContentEditable);
     });
     this.core.onFormatChange = () => this.scheduleRteRefresh();
+    this.core.onFoldLiveEdit = () => this.syncLiveEdit();
     this.core.onCodeSourceChange = () => this.refreshCodeSource();
     this.core.onSavedChange = () => this.refreshSavedLabel();
     this.core.onToast = () => this.refreshToast();
@@ -151,6 +152,7 @@ export class MailCraftEditor extends ElementBase {
   disconnectedCallback() {
     this.unsubscribe?.();
     this.core.onFormatChange = null;
+    this.core.onFoldLiveEdit = null;
     this.core.onCodeSourceChange = null;
     this.core.onSavedChange = null;
     this.core.onToast = null;
@@ -889,6 +891,10 @@ export class MailCraftEditor extends ElementBase {
       this.renderInner();
     } finally {
       this.core.rendering = false;
+      // Every render rebuilds the canvas from props, so by here the live
+      // contenteditable is a copy of them again -- whatever `editStale`
+      // claimed is now true of the DOM as well (see `syncLiveEdit`).
+      this.core.editStale = null;
     }
     if (this.mainEl) {
       if (this.mainEl.scrollTop !== mainTop) this.mainEl.scrollTop = mainTop;
@@ -902,10 +908,26 @@ export class MailCraftEditor extends ElementBase {
 
   syncLiveEdit() {
     const c = this.core;
+    // One-shot right of way for the two cases where props are deliberately
+    // *ahead* of the live contenteditable: a rich-content rewrite
+    // (`syncRichContent`) and an undo/redo, both in editor-core.js. Syncing
+    // the DOM back then is the "props are the truth" rule pointing the wrong
+    // way -- it silently undid every Text size / color / spacing change made
+    // while the block was focused, and every undo of one. Props win this one
+    // render; the rebuild right after puts the new html into the DOM. The flag
+    // The flag is cleared by the rebuild in `render()`, not here: a fold can
+    // run several times (once per `setProp`) before the next frame, and
+    // clearing it on the first of those handed the render back to the DOM
+    // copy -- two quick clicks of the RTE's `+` moved nothing at all.
+    if (c.editStale && c.editStale === c.state.editing) return;
     if (!c.state.editing || !c.editEl || !c.editEl.isConnected || !c.editKey) return;
     const found = c.find(c.state.doc, c.state.editing);
     if (!found.block) return;
     const val = c.editPlain ? c.editEl.textContent : c.editEl.innerHTML;
+    // Unchanged since the render that built it (`editRendered`, canvas.js
+    // `onFocus`) means there is no user edit to fold -- only the render's own
+    // DOM decorations, which must not become part of the document.
+    if (val === c.editRendered) return;
     if (val !== found.block.props[c.editKey]) found.block.props[c.editKey] = val;
   }
 

package/src/render/canvas.js

@@ -118,6 +118,17 @@ function blockCtx(core, editingBlockId) {
       core.editEl = node;
       core.editKey = key;
       core.editPlain = !!isPlainText;
+      // What the renderer just produced for this node, before the user has
+      // touched it -- including the decorations the render applies to the DOM
+      // and not to props (`overrideRichFont`, `overrideLinkColor` in
+      // block-body.js). `syncLiveEdit` folds the node back into props only
+      // when it differs from this, so a *user* edit is still captured but a
+      // rendering decision is never written into the document. Without it,
+      // picking a block font while editing baked the strip into props.html,
+      // and switching the control back to Inherit could no longer bring the
+      // imported per-paragraph fonts back. Refreshed on every refocus, which
+      // is every rebuild (focus-preserve.js).
+      core.editRendered = isPlainText ? node.textContent : node.innerHTML;
       if (core.state.editing === block.id && core.state.sel && core.state.sel.type === 'block' && core.state.sel.id === block.id) return;
       // Snapshotted only on a genuine new focus (not the guarded no-op above,
       // which also covers every re-render-triggered refocus while typing --