@seliseblocks/mailcraft 0.2.10 → 0.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seliseblocks/mailcraft",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "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 = [
@@ -419,11 +423,48 @@ export class EditorCore {
       if (this.onFormatChange) this.onFormatChange();
     };
     document.addEventListener('selectionchange', this.onSelect);
+    /**
+     * Click-outside fallback for closing the RTE toolbar. The blur path
+     * (`blockCtx.onBlur`, canvas.js) only runs if the edited block still holds
+     * focus at the moment of the outside press -- but several toolbar controls
+     * legitimately move focus to themselves (the Text style / Merge Tags
+     * selects, the color inputs, the link popover's href field). Dismiss one
+     * of those without committing and no block blur can ever fire again, so
+     * `state.editing` -- and the toolbar -- stayed open no matter where the
+     * user clicked. A completed click whose composed path contains neither the
+     * edited block nor the toolbar closes the edit explicitly.
+     *
+     * `click`, deliberately not `pointerdown`: by click time the press's
+     * native blur/focus transition has fully settled, so this never rebuilds
+     * the canvas mid-gesture (the dropped-click problem documented in
+     * `blockCtx.onFocus`, canvas.js) and never races focus-preserve into
+     * refocusing -- and thereby reopening -- the block it just closed. It also
+     * ignores scrollbar drags, which emit no click.
+     */
+    this.onOutsideClick = (e) => {
+      if (!this.state.editing || this.rendering) return;
+      // A drag-selection that starts inside the block but ends outside it
+      // fires its click on a common ancestor -- but the block keeps focus
+      // through such a drag, while a genuine outside press blurs it first
+      // (and the blur pipeline has then already handled the close).
+      const active = this.exportRoot && this.exportRoot.activeElement;
+      if (active && active === this.editEl) return;
+      const path = e.composedPath ? e.composedPath() : [];
+      for (const n of path) {
+        if (!n || n.nodeType !== 1) continue;
+        if (n.getAttribute && n.getAttribute('data-mc-content') === this.state.editing) return;
+        if (n.hasAttribute && n.hasAttribute('data-rte-root')) return;
+      }
+      this.closeEditing();
+    };
+    if (this.exportRoot) this.exportRoot.addEventListener('click', this.onOutsideClick);
   }
 
   unmountKeyboard() {
     window.removeEventListener('keydown', this.onKey);
     document.removeEventListener('selectionchange', this.onSelect);
+    if (this.exportRoot && this.onOutsideClick) this.exportRoot.removeEventListener('click', this.onOutsideClick);
+    this.onOutsideClick = null;
   }
 
   unmount() {
@@ -446,6 +487,30 @@ export class EditorCore {
 
   // ---- rich text editing ----------------------------------------------
 
+  /**
+   * Explicitly ends the active rich-text edit: commits the live content the
+   * way `blockCtx.onBlur` (canvas.js) would, then clears `editing`/`linkDraft`.
+   * Used by the click-outside fallback (`mountKeyboard`), which fires exactly
+   * when the block no longer holds focus, so no blur will ever arrive to do
+   * this. Any blur this close itself provokes is deliberately swallowed via
+   * `rteActive`: the commit below is the single commit path -- letting onBlur
+   * also run would compare against the same `editOriginal` and push a second
+   * undo entry for the same change.
+   */
+  closeEditing() {
+    const id = this.state.editing;
+    if (!id) return;
+    const elNode = this.editEl;
+    const val = elNode && elNode.isConnected && this.editKey
+      ? (this.editPlain ? elNode.textContent : elNode.innerHTML)
+      : null;
+    this.rteActive = true;
+    if (elNode && this.exportRoot && this.exportRoot.activeElement === elNode) elNode.blur();
+    this.rteActive = false;
+    if (val !== null && val !== this.editOriginal) this.setProp(id, this.editKey, val);
+    if (this.state.editing === id) this.setState({ editing: null, linkDraft: null });
+  }
+
   exec(cmd, arg) {
     this.rteActive = true;
     try {
@@ -557,15 +622,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 +689,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 +742,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/i18n/index.js

@@ -1,83 +1,83 @@
-import { EN as ENBase } from './en.js';
-
-/**
- * Builds a translator. `overrides` is whatever a host passes as `.messages`
- * on the element -- a host's own table, an imported locale, or both merged
- * via `defineMessages` below.
- *
- * Three deliberate properties:
- * 1. English always resolves. A locale is an overlay, never a replacement,
- *    so a partial or missing translation shows English rather than a gap.
- * 2. Params interpolate `{name}`.
- * 3. A truly missing key (not in `overrides`, not in `EN`) renders as the
- *    key itself, not an empty string -- a visible `toast.deleted` in the UI
- *    is obviously wrong and names the exact key to add, where blank text
- *    just looks like a broken build.
- */
-export function createTranslator(overrides) {
-  const table = overrides || {};
-  return function t(key, params) {
-    const template = table[key] ?? ENBase[key] ?? key;
-    if (!params) return template;
-    return template.replace(/\{(\w+)\}/g, (whole, name) => (name in params ? String(params[name]) : whole));
-  };
-}
-
-/** Merges a locale over a base, for a host assembling its own table -- the documented way to combine a shipped locale with a few product-specific overrides. */
-export function defineMessages(base, overrides) {
-  return Object.assign({}, base, overrides);
-}
-
-/** Keys in `base` that `locale` does not translate. What a translator has left to do. */
-export function missingKeys(locale, base) {
-  const source = base || ENBase;
-  return Object.keys(source).filter((key) => locale[key] === undefined).sort();
-}
-
-/**
- * Every locale that ships, for a host building a language switcher.
- * Metadata only -- no message tables -- so listing the locales never pulls
- * every translation file into a consumer's bundle; a host deep-imports the
- * one it wants, e.g. `mailcraft-editor/src/core/i18n/bn.js`.
- */
-export const LOCALES = [
-  { tag: 'en', name: 'English' },
-  { tag: 'ar', name: 'Arabic', rtl: true },
-  { tag: 'bn', name: 'Bangla' },
-  { tag: 'dz', name: 'Dzongkha' },
-  { tag: 'bg', name: 'Bulgarian' },
-  { tag: 'ca', name: 'Catalan' },
-  { tag: 'cs', name: 'Czech' },
-  { tag: 'da', name: 'Danish' },
-  { tag: 'de', name: 'German' },
-  { tag: 'de-CH', name: 'Swiss German' },
-  { tag: 'el', name: 'Greek' },
-  { tag: 'es', name: 'Spanish' },
-  { tag: 'et', name: 'Estonian' },
-  { tag: 'fi', name: 'Finnish' },
-  { tag: 'fr', name: 'French' },
-  { tag: 'hr', name: 'Croatian' },
-  { tag: 'hu', name: 'Hungarian' },
-  { tag: 'it', name: 'Italian' },
-  { tag: 'lt', name: 'Lithuanian' },
-  { tag: 'lv', name: 'Latvian' },
-  { tag: 'nb', name: 'Norwegian Bokmål' },
-  { tag: 'nl', name: 'Dutch' },
-  { tag: 'pl', name: 'Polish' },
-  { tag: 'pt', name: 'Portuguese' },
-  { tag: 'ro', name: 'Romanian' },
-  { tag: 'ru', name: 'Russian' },
-  { tag: 'sk', name: 'Slovak' },
-  { tag: 'sl', name: 'Slovenian' },
-  { tag: 'sv', name: 'Swedish' },
-  { tag: 'tr', name: 'Turkish' },
-  { tag: 'uk', name: 'Ukrainian' },
-];
-
-/** `true` when the tag is written right to left. Metadata only -- `dir` is still what actually flips the layout. */
-export function isRtl(tag) {
-  const entry = LOCALES.find((l) => l.tag === tag);
-  return entry ? entry.rtl === true : false;
-}
-
-export { EN, MESSAGE_KEYS } from './en.js';
+import { EN as ENBase } from './en.js';
+
+/**
+ * Builds a translator. `overrides` is whatever a host passes as `.messages`
+ * on the element -- a host's own table, an imported locale, or both merged
+ * via `defineMessages` below.
+ *
+ * Three deliberate properties:
+ * 1. English always resolves. A locale is an overlay, never a replacement,
+ *    so a partial or missing translation shows English rather than a gap.
+ * 2. Params interpolate `{name}`.
+ * 3. A truly missing key (not in `overrides`, not in `EN`) renders as the
+ *    key itself, not an empty string -- a visible `toast.deleted` in the UI
+ *    is obviously wrong and names the exact key to add, where blank text
+ *    just looks like a broken build.
+ */
+export function createTranslator(overrides) {
+  const table = overrides || {};
+  return function t(key, params) {
+    const template = table[key] ?? ENBase[key] ?? key;
+    if (!params) return template;
+    return template.replace(/\{(\w+)\}/g, (whole, name) => (name in params ? String(params[name]) : whole));
+  };
+}
+
+/** Merges a locale over a base, for a host assembling its own table -- the documented way to combine a shipped locale with a few product-specific overrides. */
+export function defineMessages(base, overrides) {
+  return Object.assign({}, base, overrides);
+}
+
+/** Keys in `base` that `locale` does not translate. What a translator has left to do. */
+export function missingKeys(locale, base) {
+  const source = base || ENBase;
+  return Object.keys(source).filter((key) => locale[key] === undefined).sort();
+}
+
+/**
+ * Every locale that ships, for a host building a language switcher.
+ * Metadata only -- no message tables -- so listing the locales never pulls
+ * every translation file into a consumer's bundle; a host deep-imports the
+ * one it wants, e.g. `mailcraft-editor/src/core/i18n/bn.js`.
+ */
+export const LOCALES = [
+  { tag: 'en', name: 'English' },
+  { tag: 'ar', name: 'Arabic', rtl: true },
+  { tag: 'bn', name: 'Bangla' },
+  { tag: 'dz', name: 'Dzongkha' },
+  { tag: 'bg', name: 'Bulgarian' },
+  { tag: 'ca', name: 'Catalan' },
+  { tag: 'cs', name: 'Czech' },
+  { tag: 'da', name: 'Danish' },
+  { tag: 'de', name: 'German' },
+  { tag: 'de-CH', name: 'Swiss German' },
+  { tag: 'el', name: 'Greek' },
+  { tag: 'es', name: 'Spanish' },
+  { tag: 'et', name: 'Estonian' },
+  { tag: 'fi', name: 'Finnish' },
+  { tag: 'fr', name: 'French' },
+  { tag: 'hr', name: 'Croatian' },
+  { tag: 'hu', name: 'Hungarian' },
+  { tag: 'it', name: 'Italian' },
+  { tag: 'lt', name: 'Lithuanian' },
+  { tag: 'lv', name: 'Latvian' },
+  { tag: 'nb', name: 'Norwegian Bokmål' },
+  { tag: 'nl', name: 'Dutch' },
+  { tag: 'pl', name: 'Polish' },
+  { tag: 'pt', name: 'Portuguese' },
+  { tag: 'ro', name: 'Romanian' },
+  { tag: 'ru', name: 'Russian' },
+  { tag: 'sk', name: 'Slovak' },
+  { tag: 'sl', name: 'Slovenian' },
+  { tag: 'sv', name: 'Swedish' },
+  { tag: 'tr', name: 'Turkish' },
+  { tag: 'uk', name: 'Ukrainian' },
+];
+
+/** `true` when the tag is written right to left. Metadata only -- `dir` is still what actually flips the layout. */
+export function isRtl(tag) {
+  const entry = LOCALES.find((l) => l.tag === tag);
+  return entry ? entry.rtl === true : false;
+}
+
+export { EN, MESSAGE_KEYS } from './en.js';

package/src/core/ids.js

@@ -1 +1 @@
-export const uid = () => Math.random().toString(36).slice(2, 9);
+export const uid = () => Math.random().toString(36).slice(2, 9);

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