@seliseblocks/mailcraft 0.2.11 → 0.2.12

package/package.json

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

@@ -423,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() {
@@ -450,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 {

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/layout-style.js

@@ -1,46 +1,46 @@
-/**
- * Pure style-computation functions shared by the live renderer and the export
- * builder, ported verbatim. Objects use camelCase keys so they can be applied
- * directly via `Object.assign(el.style, obj)`.
- */
-
-import { cssUrl } from './sanitize.js';
-export function pad(p) {
-  return (p.py || 0) + 'px ' + (p.px || 0) + 'px';
-}
-
-export function boxStyle(p) {
-  const on = (key) => p[key] !== false;
-  const side = (key) => (p.bBorder && on(key) ? p.bBorder + 'px ' + (p.bStyle || 'solid') + ' ' + (p.bLine || '#e2e2e5') : '0');
-  return {
-    background: p.bBg || 'transparent',
-    borderTop: side('bTop'), borderRight: side('bRight'), borderBottom: side('bBottom'), borderLeft: side('bLeft'),
-    borderRadius: (p.bRadius || 0) + 'px',
-    padding: (p.bPad || 0) + 'px',
-  };
-}
-
-export function boxCss(p) {
-  const bits = [];
-  if (p.bBg) bits.push('background:' + p.bBg);
-  if (p.bBorder) {
-    const value = p.bBorder + 'px ' + (p.bStyle || 'solid') + ' ' + (p.bLine || '#e2e2e5');
-    const sides = { top: p.bTop !== false, right: p.bRight !== false, bottom: p.bBottom !== false, left: p.bLeft !== false };
-    if (sides.top && sides.right && sides.bottom && sides.left) bits.push('border:' + value);
-    else Object.keys(sides).filter((key) => sides[key]).forEach((key) => bits.push('border-' + key + ':' + value));
-  }
-  if (p.bRadius) bits.push('border-radius:' + p.bRadius + 'px');
-  if (p.bPad) bits.push('padding:' + p.bPad + 'px');
-  return bits.length ? bits.join(';') + ';' : 'margin:0';
-}
-
-/** A row's effective padding as a four-value CSS shorthand. `pt/pb/pl/pr` are optional per-side overrides (set by the inspector's "Per-side padding" split, or by the importer for asymmetric source padding); wherever a side is absent it follows the linked `py`/`px` pair, so documents that never split keep behaving exactly as before. */
+/**
+ * Pure style-computation functions shared by the live renderer and the export
+ * builder, ported verbatim. Objects use camelCase keys so they can be applied
+ * directly via `Object.assign(el.style, obj)`.
+ */
+
+import { cssUrl } from './sanitize.js';
+export function pad(p) {
+  return (p.py || 0) + 'px ' + (p.px || 0) + 'px';
+}
+
+export function boxStyle(p) {
+  const on = (key) => p[key] !== false;
+  const side = (key) => (p.bBorder && on(key) ? p.bBorder + 'px ' + (p.bStyle || 'solid') + ' ' + (p.bLine || '#e2e2e5') : '0');
+  return {
+    background: p.bBg || 'transparent',
+    borderTop: side('bTop'), borderRight: side('bRight'), borderBottom: side('bBottom'), borderLeft: side('bLeft'),
+    borderRadius: (p.bRadius || 0) + 'px',
+    padding: (p.bPad || 0) + 'px',
+  };
+}
+
+export function boxCss(p) {
+  const bits = [];
+  if (p.bBg) bits.push('background:' + p.bBg);
+  if (p.bBorder) {
+    const value = p.bBorder + 'px ' + (p.bStyle || 'solid') + ' ' + (p.bLine || '#e2e2e5');
+    const sides = { top: p.bTop !== false, right: p.bRight !== false, bottom: p.bBottom !== false, left: p.bLeft !== false };
+    if (sides.top && sides.right && sides.bottom && sides.left) bits.push('border:' + value);
+    else Object.keys(sides).filter((key) => sides[key]).forEach((key) => bits.push('border-' + key + ':' + value));
+  }
+  if (p.bRadius) bits.push('border-radius:' + p.bRadius + 'px');
+  if (p.bPad) bits.push('padding:' + p.bPad + 'px');
+  return bits.length ? bits.join(';') + ';' : 'margin:0';
+}
+
+/** A row's effective padding as a four-value CSS shorthand. `pt/pb/pl/pr` are optional per-side overrides (set by the inspector's "Per-side padding" split, or by the importer for asymmetric source padding); wherever a side is absent it follows the linked `py`/`px` pair, so documents that never split keep behaving exactly as before. */
 export function rowPad(p) {
-  const t = p.pt ?? p.py ?? 0;
-  const b = p.pb ?? p.py ?? 0;
-  const l = p.pl ?? p.px ?? 0;
-  const r = p.pr ?? p.px ?? 0;
-  return t + 'px ' + r + 'px ' + b + 'px ' + l + 'px';
+  const t = p.pt ?? p.py ?? 0;
+  const b = p.pb ?? p.py ?? 0;
+  const l = p.pl ?? p.px ?? 0;
+  const r = p.pr ?? p.px ?? 0;
+  return t + 'px ' + r + 'px ' + b + 'px ' + l + 'px';
 }
 
 /** A row's outside spacing in CSS clockwise order, with the old vertical `my` value as a saved-document fallback. Empty horizontal margins can remain `auto` in the live canvas so the advanced max-width control stays centered. */
@@ -52,64 +52,64 @@ export function rowMargin(p, centerEmpty) {
   const emptyHorizontal = centerEmpty && !r && !l;
   return t + 'px ' + (emptyHorizontal ? 'auto' : r + 'px') + ' ' + b + 'px ' + (emptyHorizontal ? 'auto' : l + 'px');
 }
-
-/** Which sides a row's border draws on. Sides default ON (`!== false`) so documents saved before per-side toggles existed keep their full border. */
-export function rowBorderSides(p) {
-  return { top: p.bTop !== false, right: p.bRight !== false, bottom: p.bBottom !== false, left: p.bLeft !== false };
-}
-
-/** The row border as an inline-CSS string (export path). Empty when the width is 0 or every side is toggled off. */
-export function rowBorderCss(p) {
-  if (!p.border) return '';
-  const s = rowBorderSides(p);
-  const value = p.border + 'px ' + (p.borderStyle || 'solid') + ' ' + (p.lineColor || '#e2e2e5');
-  if (s.top && s.right && s.bottom && s.left) return 'border:' + value + ';';
-  return ['top', 'right', 'bottom', 'left'].filter((k) => s[k]).map((k) => 'border-' + k + ':' + value + ';').join('');
-}
-
-export function rowBg(p) {
-  const ov = (p.overlay || 0) / 100;
-  const layers = [];
-  if (p.bgImage && ov) layers.push('linear-gradient(rgba(20,22,24,' + ov + '),rgba(20,22,24,' + ov + '))');
-  if (p.bgImage) layers.push('url("' + cssUrl(p.bgImage) + '")');
-  const s = rowBorderSides(p);
-  const side = (on) => (p.border && on ? p.border + 'px ' + (p.borderStyle || 'solid') + ' ' + (p.lineColor || '#e2e2e5') : '0');
-  return {
-    backgroundColor: p.bg || 'transparent',
-    backgroundImage: layers.length ? layers.join(',') : 'none',
-    backgroundSize: p.bgSize || 'cover',
-    backgroundPosition: p.bgPos || 'center',
-    backgroundRepeat: p.bgRepeat || 'no-repeat',
-    borderTop: side(s.top),
-    borderRight: side(s.right),
-    borderBottom: side(s.bottom),
-    borderLeft: side(s.left),
-    borderRadius: (p.radius || 0) + 'px',
-    // A raw CSS string, not a boolean: imports keep the source's exact
-    // shadow; the inspector toggle writes/clears a standard one.
-    boxShadow: p.shadow || 'none',
-    maxWidth: (p.maxW || 100) + '%',
+
+/** Which sides a row's border draws on. Sides default ON (`!== false`) so documents saved before per-side toggles existed keep their full border. */
+export function rowBorderSides(p) {
+  return { top: p.bTop !== false, right: p.bRight !== false, bottom: p.bBottom !== false, left: p.bLeft !== false };
+}
+
+/** The row border as an inline-CSS string (export path). Empty when the width is 0 or every side is toggled off. */
+export function rowBorderCss(p) {
+  if (!p.border) return '';
+  const s = rowBorderSides(p);
+  const value = p.border + 'px ' + (p.borderStyle || 'solid') + ' ' + (p.lineColor || '#e2e2e5');
+  if (s.top && s.right && s.bottom && s.left) return 'border:' + value + ';';
+  return ['top', 'right', 'bottom', 'left'].filter((k) => s[k]).map((k) => 'border-' + k + ':' + value + ';').join('');
+}
+
+export function rowBg(p) {
+  const ov = (p.overlay || 0) / 100;
+  const layers = [];
+  if (p.bgImage && ov) layers.push('linear-gradient(rgba(20,22,24,' + ov + '),rgba(20,22,24,' + ov + '))');
+  if (p.bgImage) layers.push('url("' + cssUrl(p.bgImage) + '")');
+  const s = rowBorderSides(p);
+  const side = (on) => (p.border && on ? p.border + 'px ' + (p.borderStyle || 'solid') + ' ' + (p.lineColor || '#e2e2e5') : '0');
+  return {
+    backgroundColor: p.bg || 'transparent',
+    backgroundImage: layers.length ? layers.join(',') : 'none',
+    backgroundSize: p.bgSize || 'cover',
+    backgroundPosition: p.bgPos || 'center',
+    backgroundRepeat: p.bgRepeat || 'no-repeat',
+    borderTop: side(s.top),
+    borderRight: side(s.right),
+    borderBottom: side(s.bottom),
+    borderLeft: side(s.left),
+    borderRadius: (p.radius || 0) + 'px',
+    // A raw CSS string, not a boolean: imports keep the source's exact
+    // shadow; the inspector toggle writes/clears a standard one.
+    boxShadow: p.shadow || 'none',
+    maxWidth: (p.maxW || 100) + '%',
     margin: rowMargin(p, true),
   };
 }
-
-export function colsWrap(p) {
-  const gap = p.gap || 0;
-  if (p.layout === 'grid') return { display: 'grid', gridTemplateColumns: 'repeat(' + (p.gridCols || 2) + ', minmax(0, 1fr))', gap: gap + 'px' };
-  if (p.layout === 'flex') {
-    return {
-      display: 'flex', flexDirection: p.flexDir || 'row', justifyContent: p.justify || 'flex-start',
-      alignItems: p.alignItems || 'stretch', flexWrap: p.wrap ? 'wrap' : 'nowrap', gap: gap + 'px',
-    };
-  }
-  return { display: 'flex', alignItems: 'stretch', margin: '0 ' + (-gap / 2) + 'px' };
-}
-
-export function colStyle(p, c) {
-  if (p.layout === 'grid') return { minWidth: 0 };
-  if (p.layout === 'flex') return { flex: (p.flexDir || 'row').indexOf('column') === 0 ? '0 0 auto' : c.span + ' 1 auto', minWidth: 0 };
-  return {
-    flex: c.span + ' 1 0%', minWidth: 0, padding: '0 ' + (p.gap || 0) / 2 + 'px',
-    alignSelf: p.valign === 'middle' ? 'center' : (p.valign === 'bottom' ? 'flex-end' : 'flex-start'),
-  };
-}
+
+export function colsWrap(p) {
+  const gap = p.gap || 0;
+  if (p.layout === 'grid') return { display: 'grid', gridTemplateColumns: 'repeat(' + (p.gridCols || 2) + ', minmax(0, 1fr))', gap: gap + 'px' };
+  if (p.layout === 'flex') {
+    return {
+      display: 'flex', flexDirection: p.flexDir || 'row', justifyContent: p.justify || 'flex-start',
+      alignItems: p.alignItems || 'stretch', flexWrap: p.wrap ? 'wrap' : 'nowrap', gap: gap + 'px',
+    };
+  }
+  return { display: 'flex', alignItems: 'stretch', margin: '0 ' + (-gap / 2) + 'px' };
+}
+
+export function colStyle(p, c) {
+  if (p.layout === 'grid') return { minWidth: 0 };
+  if (p.layout === 'flex') return { flex: (p.flexDir || 'row').indexOf('column') === 0 ? '0 0 auto' : c.span + ' 1 auto', minWidth: 0 };
+  return {
+    flex: c.span + ' 1 0%', minWidth: 0, padding: '0 ' + (p.gap || 0) / 2 + 'px',
+    alignSelf: p.valign === 'middle' ? 'center' : (p.valign === 'bottom' ? 'flex-end' : 'flex-start'),
+  };
+}

package/src/core/parse.js

@@ -1,10 +1,10 @@
-export function parseItems(s) {
-  return String(s || '').split('\n').map((l) => l.trim()).filter(Boolean).map((l) => {
-    const i = l.indexOf('|');
-    return i < 0 ? { label: l, href: '#' } : { label: l.slice(0, i).trim(), href: l.slice(i + 1).trim() };
-  });
-}
-
-export function cellsOf(p) {
-  return String(p.data || '').split('\n').filter((l) => l.trim()).map((l) => l.split('|').map((c) => c.trim()));
-}
+export function parseItems(s) {
+  return String(s || '').split('\n').map((l) => l.trim()).filter(Boolean).map((l) => {
+    const i = l.indexOf('|');
+    return i < 0 ? { label: l, href: '#' } : { label: l.slice(0, i).trim(), href: l.slice(i + 1).trim() };
+  });
+}
+
+export function cellsOf(p) {
+  return String(p.data || '').split('\n').filter((l) => l.trim()).map((l) => l.split('|').map((c) => c.trim()));
+}

package/src/core/placeholder.js

@@ -1,15 +1,15 @@
-/** Data-URI placeholder image generator, ported verbatim from the original. */
-function enc(s) {
-  return encodeURIComponent(s).replace(/\(/g, '%28').replace(/\)/g, '%29');
-}
-
-export function PH(label, w, ht) {
-  return 'data:image/svg+xml;utf8,' + enc(
-    '<svg xmlns="http://www.w3.org/2000/svg" width="' + w + '" height="' + ht + '">' +
-    '<defs><pattern id="s" width="9" height="9" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">' +
-    '<rect width="9" height="9" fill="#ececed"/><line x1="0" y1="0" x2="0" y2="9" stroke="#cfd3d8" stroke-width="3"/></pattern></defs>' +
-    '<rect width="100%" height="100%" fill="url(#s)"/>' +
-    '<rect x="0.5" y="0.5" width="' + (w - 1) + '" height="' + (ht - 1) + '" fill="none" stroke="#9aa2ab"/>' +
-    '<text x="50%" y="50%" dy="4" text-anchor="middle" font-family="ui-monospace,monospace" font-size="' + Math.max(11, Math.round(w / 40)) + '" fill="#5b6672">' + label + '</text></svg>',
-  );
-}
+/** Data-URI placeholder image generator, ported verbatim from the original. */
+function enc(s) {
+  return encodeURIComponent(s).replace(/\(/g, '%28').replace(/\)/g, '%29');
+}
+
+export function PH(label, w, ht) {
+  return 'data:image/svg+xml;utf8,' + enc(
+    '<svg xmlns="http://www.w3.org/2000/svg" width="' + w + '" height="' + ht + '">' +
+    '<defs><pattern id="s" width="9" height="9" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">' +
+    '<rect width="9" height="9" fill="#ececed"/><line x1="0" y1="0" x2="0" y2="9" stroke="#cfd3d8" stroke-width="3"/></pattern></defs>' +
+    '<rect width="100%" height="100%" fill="url(#s)"/>' +
+    '<rect x="0.5" y="0.5" width="' + (w - 1) + '" height="' + (ht - 1) + '" fill="none" stroke="#9aa2ab"/>' +
+    '<text x="50%" y="50%" dy="4" text-anchor="middle" font-family="ui-monospace,monospace" font-size="' + Math.max(11, Math.round(w / 40)) + '" fill="#5b6672">' + label + '</text></svg>',
+  );
+}

package/src/core/variables.js

@@ -1,11 +1,11 @@
-export const DEFAULT_VARS = 'first_name\nlast_name\nemail\ncompany\ncity\norder_id\nplan\ndiscount\nunsubscribe_url';
-export const TOKEN = (t) => '{' + '{ ' + t + ' }' + '}';
-
-/** Variables are supplied by the host application -- the editor only ever shows the tokens, never a substituted value. */
-export function vars(raw) {
-  const list = Array.isArray(raw) ? raw : String(raw == null ? DEFAULT_VARS : raw).split(/[\n,]/);
-  return list.map((v) => String(v).trim().replace(/^\{\{\s*|\s*\}\}$/g, '')).filter(Boolean);
-}
-
-/** Which prop field a merge tag lands in when inserted from the Data tab, keyed by the selected block's type. */
-export const INSERT_KEYS = { text: 'html', heading: 'text', button: 'label', html: 'code', codeblock: 'code', quote: 'text', list: 'items', table: 'data' };
+export const DEFAULT_VARS = 'first_name\nlast_name\nemail\ncompany\ncity\norder_id\nplan\ndiscount\nunsubscribe_url';
+export const TOKEN = (t) => '{' + '{ ' + t + ' }' + '}';
+
+/** Variables are supplied by the host application -- the editor only ever shows the tokens, never a substituted value. */
+export function vars(raw) {
+  const list = Array.isArray(raw) ? raw : String(raw == null ? DEFAULT_VARS : raw).split(/[\n,]/);
+  return list.map((v) => String(v).trim().replace(/^\{\{\s*|\s*\}\}$/g, '')).filter(Boolean);
+}
+
+/** Which prop field a merge tag lands in when inserted from the Data tab, keyed by the selected block's type. */
+export const INSERT_KEYS = { text: 'html', heading: 'text', button: 'label', html: 'code', codeblock: 'code', quote: 'text', list: 'items', table: 'data' };