@seliseblocks/mailcraft 0.2.8 → 0.2.9

package/src/mailcraft-editor.js

@@ -1039,6 +1039,22 @@ export class MailCraftEditor extends ElementBase {
   }
 
   renderTabBody() {
+    // The browser's native colour dialog is bound to the identity of its
+    // <input type="color"> node: Chromium closes the dialog the moment that
+    // node leaves the document -- even if the same node is spliced back into
+    // the rebuilt tree within the same task (unlike the range slider's mouse
+    // capture, which focus-preserve.js does save that way). The picker lives
+    // in this panel, and its `input` events commit (debounced) to the doc, so
+    // every colour the user tried used to rebuild the panel ~120ms later and
+    // slam the dialog shut. While the picker holds focus -- the only time its
+    // dialog can be open -- the panel therefore skips its rebuild: the canvas
+    // has already re-rendered above (that is the live preview), and the pill
+    // previews itself (fields.js mutates its swatch and hex text directly on
+    // every `input`). Nothing else in the panel changes on a colour commit,
+    // so nothing is stale; the moment focus moves anywhere else, the next
+    // render rebuilds the panel as usual.
+    const active = this.shadowRoot.activeElement;
+    if (active && active.tagName === 'INPUT' && active.type === 'color' && this.tabBody.contains(active)) return;
     this.tabBody.innerHTML = '';
     const tab = this.core.state.tab;
     if (tab === 'design') this.tabBody.appendChild(this.renderDesignTab());
@@ -1579,7 +1595,30 @@ export class MailCraftEditor extends ElementBase {
     this.codeStatusEl = elS('div', 'font-family: var(--ed-font); font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ed-muted);', { class: 'mc-code-kicker' });
     headText.append(this.codeStatusEl, elS('div', 'font-family: var(--ed-font); font-weight: 600; font-size: 15px; line-height: 1.2;', { text: t('modal.rawHtmlTitle'), 'data-i18n': 'modal.rawHtmlTitle', class: 'mc-code-heading' }));
     this.codeWidthSeg = elS('div', '', { class: 'mc-segment' });
-    const reloadBtn = elS('button', 'border: 1px solid var(--ed-line); background: transparent; color: var(--ed-text); cursor: pointer; height: 30px; padding: 0 11px; display: flex; align-items: center; gap: 6px; font-family: var(--ed-font); font-size: 11px; font-weight: 600; transition: border-color 0.16s, background 0.16s;', { type: 'button', title: t('action.reloadHint'), 'data-i18n-title': 'action.reloadHint' });
+    // Ghost-button chrome shared by the header's Copy and Reload.
+    const GHOST_BTN = 'border: 1px solid var(--ed-line); background: transparent; color: var(--ed-text); cursor: pointer; height: 30px; padding: 0 11px; display: flex; align-items: center; gap: 6px; font-family: var(--ed-font); font-size: 11px; font-weight: 600; transition: border-color 0.16s, background 0.16s;';
+    const copyBtn = elS('button', GHOST_BTN, { type: 'button', title: t('toast.htmlCopied'), 'data-i18n-title': 'toast.htmlCopied', class: 'mc-code-copy' });
+    copyBtn.appendChild(icon('copy', 14));
+    // Reuses keys every locale already carries (story.copy / export.copied)
+    // rather than minting new ones across 32 translations.
+    const copyLabel = elS('span', '', { text: t('story.copy'), 'data-i18n': 'story.copy' });
+    copyBtn.appendChild(copyLabel);
+    copyBtn.addEventListener('mouseenter', () => { copyBtn.style.borderColor = 'var(--ed-accent)'; copyBtn.style.background = 'var(--ed-soft)'; });
+    copyBtn.addEventListener('mouseleave', () => { copyBtn.style.borderColor = 'var(--ed-line)'; copyBtn.style.background = 'transparent'; });
+    copyBtn.addEventListener('click', () => {
+      this.core.copyCode();
+      // Momentary "Copied": swap the i18n key itself, not just the text --
+      // refreshStrings relabels every [data-i18n] node on each render and
+      // would otherwise revert the feedback mid-flash.
+      copyLabel.setAttribute('data-i18n', 'export.copied');
+      copyLabel.textContent = this.core.t('export.copied');
+      clearTimeout(this._codeCopyTimer);
+      this._codeCopyTimer = setTimeout(() => {
+        copyLabel.setAttribute('data-i18n', 'story.copy');
+        copyLabel.textContent = this.core.t('story.copy');
+      }, 1600);
+    });
+    const reloadBtn = elS('button', GHOST_BTN, { type: 'button', title: t('action.reloadHint'), 'data-i18n-title': 'action.reloadHint' });
     reloadBtn.appendChild(icon('refresh', 14));
     reloadBtn.appendChild(elS('span', '', { text: t('action.reload'), 'data-i18n': 'action.reload' }));
     reloadBtn.addEventListener('mouseenter', () => { reloadBtn.style.borderColor = 'var(--ed-accent)'; reloadBtn.style.background = 'var(--ed-soft)'; });
@@ -1601,7 +1640,7 @@ export class MailCraftEditor extends ElementBase {
     closeBtn.addEventListener('mouseleave', () => { closeBtn.style.borderColor = 'var(--ed-line)'; });
     closeBtn.addEventListener('click', () => this.core.setState({ libraryOpen: false, exportOpen: false, aiOpen: false, codeOpen: false, assetTarget: null, libHot: false }));
     tip(closeBtn, t('action.closeWithoutApplyingHint'), 'down', 'end');
-    head.append(headIcon, headText, this.codeWidthSeg, reloadBtn, applyBtn, closeBtn);
+    head.append(headIcon, headText, this.codeWidthSeg, copyBtn, reloadBtn, applyBtn, closeBtn);
     overlay.appendChild(head);
 
     const cols = elS('div', 'display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; min-height: 0; background: var(--ed-work);', { class: 'mc-code-split' });

package/src/render/fields.js

@@ -12,6 +12,23 @@ function el(tag, style, attrs) {
   return node;
 }
 
+/**
+ * The native `<input type="color">` accepts ONLY `#rrggbb` -- handed an
+ * imported `rgba(...)`, `rgb(...)`, `#abc` or a keyword it silently stays at
+ * black, so opening the picker on such a value read as "the color was not
+ * picked up". Normalizes what can be normalized (alpha is dropped -- the
+ * picker cannot represent it; the text field beside it still holds the exact
+ * value); anything else returns '' and the picker keeps its default.
+ */
+function pickerHex(v) {
+  const s = String(v == null ? '' : v).trim();
+  if (/^#[0-9a-f]{6}$/i.test(s)) return s;
+  if (/^#[0-9a-f]{3}$/i.test(s)) return '#' + s.slice(1).split('').map((c) => c + c).join('');
+  const m = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i.exec(s);
+  if (m) return '#' + [m[1], m[2], m[3]].map((n) => Math.min(255, Number(n)).toString(16).padStart(2, '0')).join('');
+  return '';
+}
+
 /**
  * Trailing debounce for free-typing inputs. Every commit rebuilds the whole
  * canvas and panel (full re-render, no diffing) -- fine per click, but per
@@ -570,11 +587,20 @@ export function renderField(f) {
       });
     }
     const picker = el('input', { position: 'absolute', inset: '0', width: '100%', height: '100%', opacity: '0', cursor: 'pointer', padding: '0', border: '0' }, { type: 'color' });
-    picker.value = f.swatch;
+    const ph = pickerHex(f.swatch);
+    if (ph) picker.value = ph;
     // The native picker fires `input` continuously while dragging the hue
     // wheel -- committed raw, that is a full re-render per mouse move.
     const pickCommit = typeCommit(f.onChange);
-    picker.addEventListener('input', (e) => pickCommit.call(e.target.value));
+    picker.addEventListener('input', (e) => {
+      // Self-preview: while this picker's dialog is open the inspector skips
+      // its rebuilds (renderTabBody, mailcraft-editor.js) so the dialog's
+      // host node survives -- which also means no rebuild will repaint this
+      // pill. Mutate it directly so swatch and hex track the dialog live.
+      swatch.style.background = e.target.value;
+      hex.value = e.target.value;
+      pickCommit.call(e.target.value);
+    });
     picker.addEventListener('change', () => pickCommit.flush());
     swatch.appendChild(picker);
     const hex = el('input', { width: '82px', boxSizing: 'border-box', background: 'transparent', border: '0', outline: 'none', color: 'var(--ed-text)', fontFamily: 'ui-monospace, monospace', fontSize: '11px', padding: '0 9px' }, { placeholder: 'inherit', class: 'mc-stepper-input', 'data-focus-key': `f${f.key}`, dir: 'ltr' });

package/src/render/focus-preserve.js

@@ -1,158 +1,158 @@
-/**
- * The original relies on React's reconciliation to keep a focused `<input>`'s
- * DOM node alive across a per-keystroke re-render (Design-tab fields, the
- * campaign title, AI brief/goal/tone, search boxes, the code textarea all
- * commit on every `input` event, not just on blur). This renderer has no
- * VDOM -- it rebuilds DOM from scratch -- so without this, typing a single
- * character into any of those fields would lose focus immediately after.
- *
- * The fix: every such input (and every RTE-edited block: text, heading, box,
- * html) carries a stable `data-focus-key`. Before a rebuild, capture the
- * focused element's key + selection range; after, find the new element with
- * the same key and restore focus and the caret position, so the net effect
- * matches React's outcome even though the DOM node identity changed.
- *
- * Contenteditable blocks need this just as much as plain inputs: focusing
- * one sets `core.state.editing`, and `EditorCore.mountKeyboard`'s
- * `selectionchange` listener refreshes the toolbar's active states on every
- * caret move. Without
- * caret-position restoration here, that would blow away and recreate the
- * focused div each time, so the very first keystroke would silently drop
- * focus and the RTE toolbar would appear to do nothing.
- */
-export function withFocusPreserved(root, rebuild) {
-  const active = root.activeElement;
-  const key = active && active.dataset ? active.dataset.focusKey : null;
-  let selStart = null; let selEnd = null; let scrollTop = null; let editable = false;
-  // A range slider mid-drag is the one focus-preservation case where
-  // restoring focus on a rebuilt node isn't enough: dragging its thumb is a
-  // native, implicit mouse capture tied to that exact element, and replacing
-  // the element (as every other rebuilt input does here) silently drops that
-  // capture -- the thumb stops tracking the mouse and the slider feels like
-  // it's snapping/jumping instead of gliding. So this one case skips
-  // rebuilding the node entirely: the live element is pulled out before
-  // `rebuild()` and spliced back into the freshly-built tree afterward.
-  const rangeNode = key && active.tagName === 'INPUT' && active.type === 'range' ? active : null;
-  if (rangeNode) {
-    // nothing to capture -- the node itself is preserved below, after rebuild()
-  } else if (key && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA')) {
-    try { selStart = active.selectionStart; selEnd = active.selectionEnd; } catch { /* some input types don't support selection */ }
-    scrollTop = active.scrollTop;
-  } else if (key && active.isContentEditable) {
-    editable = true;
-    const sel = shadowSelection(root);
-    if (sel && sel.rangeCount && active.contains(sel.anchorNode)) {
-      const range = sel.getRangeAt(0);
-      selStart = textOffset(active, range.startContainer, range.startOffset);
-      selEnd = textOffset(active, range.endContainer, range.endOffset);
-    }
-    scrollTop = active.scrollTop;
-  }
-
-  rebuild();
-
-  if (!key) return;
-  const next = root.querySelector(`[data-focus-key="${cssEscape(key)}"]`);
-  if (!next) return;
-  if (rangeNode) {
-    for (const attr of ['min', 'max', 'step']) {
-      const v = next.getAttribute(attr);
-      if (v === null) rangeNode.removeAttribute(attr); else rangeNode.setAttribute(attr, v);
-    }
-    next.replaceWith(rangeNode);
-    return;
-  }
-  if (editable) {
-    // Set the Range *before* focusing: focusing a contenteditable establishes
-    // its own default collapsed selection as a side effect, and doing that
-    // after we've placed the real caret fires a second, out-of-order
-    // `selectionchange` notification for that now-stale default -- which
-    // arrives *after* the one for our real restore, so it looks like a fresh,
-    // later selection change and clobbers the correct caret right back to
-    // collapsed. Setting the range first means `.focus()` adopts the
-    // selection that's already there instead of replacing it.
-    if (selStart != null) {
-      try {
-        const range = document.createRange();
-        setPointAtOffset(range, next, selStart, true);
-        setPointAtOffset(range, next, selEnd, false);
-        const sel = shadowSelection(root);
-        sel.removeAllRanges();
-        sel.addRange(range);
-      } catch { /* ignore -- element structure changed under the caret */ }
-    }
-    // `preventScroll` matters a lot here: this `.focus()` fires on every
-    // re-render of a block mid-edit (every keystroke), not just once. Without
-    // it, the browser's default focus-scroll-into-view runs every time --
-    // harmless on a short template, but on a long one it yanks the canvas
-    // back toward the focused block on every keystroke, fighting whatever
-    // scroll position the user actually had.
-    next.focus({ preventScroll: true });
-  } else {
-    next.focus({ preventScroll: true });
-    if (selStart != null) {
-      try { next.setSelectionRange(selStart, selEnd); } catch { /* ignore */ }
-    }
-  }
-  if (scrollTop != null) next.scrollTop = scrollTop;
-}
-
-/**
- * `document.getSelection()`/`window.getSelection()` is redacted to the host
- * document when the real selection lives inside an open shadow root -- in
- * Chrome its `anchorNode` reports as `<body>` rather than the actual text
- * node being edited, even though the visible caret and `execCommand` both
- * still operate on the real position. Reading through that redacted object
- * (as this file needs to, to compute/restore a caret offset) silently gives
- * back garbage -- not an error, just always "position 0" -- which is what
- * made every re-render-while-typing reset the caret to the start and type
- * new characters in reverse. `ShadowRoot.getSelection()` (Chromium-only; no
- * standard equivalent yet) reports the real node/offset.
- */
-function shadowSelection(root) {
-  return typeof root.getSelection === 'function' ? root.getSelection() : window.getSelection();
-}
-
-/** Character offset of (node, offset) counting only text within `root`, walking in document order. */
-export function textOffset(root, node, offset) {
-  if (node.nodeType !== Node.TEXT_NODE) {
-    // A range boundary can land on an element (e.g. offset counts child nodes) --
-    // resolve it to the text position right before its `offset`-th child.
-    let n = 0;
-    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-    let cur; let target = node.childNodes[offset];
-    if (!target) { while (walker.nextNode()) n += walker.currentNode.nodeValue.length; return n; }
-    while ((cur = walker.nextNode())) { if (cur === target || target.contains(cur)) return n; n += cur.nodeValue.length; }
-    return n;
-  }
-  let n = 0;
-  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-  let cur;
-  while ((cur = walker.nextNode())) {
-    if (cur === node) return n + offset;
-    n += cur.nodeValue.length;
-  }
-  return n;
-}
-
-/** Sets the start or end point of `range` to the text-offset position inside `root`. */
-function setPointAtOffset(range, root, targetOffset, isStart) {
-  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-  let n = 0; let cur; let last = null;
-  while ((cur = walker.nextNode())) {
-    last = cur;
-    const len = cur.nodeValue.length;
-    if (n + len >= targetOffset) {
-      const point = targetOffset - n;
-      if (isStart) range.setStart(cur, point); else range.setEnd(cur, point);
-      return;
-    }
-    n += len;
-  }
-  if (last) { if (isStart) range.setStart(last, last.nodeValue.length); else range.setEnd(last, last.nodeValue.length); }
-  else { if (isStart) range.setStart(root, 0); else range.setEnd(root, 0); }
-}
-
-function cssEscape(s) {
-  return String(s).replace(/["\\]/g, '\\$&');
-}
+/**
+ * The original relies on React's reconciliation to keep a focused `<input>`'s
+ * DOM node alive across a per-keystroke re-render (Design-tab fields, the
+ * campaign title, AI brief/goal/tone, search boxes, the code textarea all
+ * commit on every `input` event, not just on blur). This renderer has no
+ * VDOM -- it rebuilds DOM from scratch -- so without this, typing a single
+ * character into any of those fields would lose focus immediately after.
+ *
+ * The fix: every such input (and every RTE-edited block: text, heading, box,
+ * html) carries a stable `data-focus-key`. Before a rebuild, capture the
+ * focused element's key + selection range; after, find the new element with
+ * the same key and restore focus and the caret position, so the net effect
+ * matches React's outcome even though the DOM node identity changed.
+ *
+ * Contenteditable blocks need this just as much as plain inputs: focusing
+ * one sets `core.state.editing`, and `EditorCore.mountKeyboard`'s
+ * `selectionchange` listener refreshes the toolbar's active states on every
+ * caret move. Without
+ * caret-position restoration here, that would blow away and recreate the
+ * focused div each time, so the very first keystroke would silently drop
+ * focus and the RTE toolbar would appear to do nothing.
+ */
+export function withFocusPreserved(root, rebuild) {
+  const active = root.activeElement;
+  const key = active && active.dataset ? active.dataset.focusKey : null;
+  let selStart = null; let selEnd = null; let scrollTop = null; let editable = false;
+  // A range slider mid-drag is the one focus-preservation case where
+  // restoring focus on a rebuilt node isn't enough: dragging its thumb is a
+  // native, implicit mouse capture tied to that exact element, and replacing
+  // the element (as every other rebuilt input does here) silently drops that
+  // capture -- the thumb stops tracking the mouse and the slider feels like
+  // it's snapping/jumping instead of gliding. So this one case skips
+  // rebuilding the node entirely: the live element is pulled out before
+  // `rebuild()` and spliced back into the freshly-built tree afterward.
+  const rangeNode = key && active.tagName === 'INPUT' && active.type === 'range' ? active : null;
+  if (rangeNode) {
+    // nothing to capture -- the node itself is preserved below, after rebuild()
+  } else if (key && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA')) {
+    try { selStart = active.selectionStart; selEnd = active.selectionEnd; } catch { /* some input types don't support selection */ }
+    scrollTop = active.scrollTop;
+  } else if (key && active.isContentEditable) {
+    editable = true;
+    const sel = shadowSelection(root);
+    if (sel && sel.rangeCount && active.contains(sel.anchorNode)) {
+      const range = sel.getRangeAt(0);
+      selStart = textOffset(active, range.startContainer, range.startOffset);
+      selEnd = textOffset(active, range.endContainer, range.endOffset);
+    }
+    scrollTop = active.scrollTop;
+  }
+
+  rebuild();
+
+  if (!key) return;
+  const next = root.querySelector(`[data-focus-key="${cssEscape(key)}"]`);
+  if (!next) return;
+  if (rangeNode) {
+    for (const attr of ['min', 'max', 'step']) {
+      const v = next.getAttribute(attr);
+      if (v === null) rangeNode.removeAttribute(attr); else rangeNode.setAttribute(attr, v);
+    }
+    next.replaceWith(rangeNode);
+    return;
+  }
+  if (editable) {
+    // Set the Range *before* focusing: focusing a contenteditable establishes
+    // its own default collapsed selection as a side effect, and doing that
+    // after we've placed the real caret fires a second, out-of-order
+    // `selectionchange` notification for that now-stale default -- which
+    // arrives *after* the one for our real restore, so it looks like a fresh,
+    // later selection change and clobbers the correct caret right back to
+    // collapsed. Setting the range first means `.focus()` adopts the
+    // selection that's already there instead of replacing it.
+    if (selStart != null) {
+      try {
+        const range = document.createRange();
+        setPointAtOffset(range, next, selStart, true);
+        setPointAtOffset(range, next, selEnd, false);
+        const sel = shadowSelection(root);
+        sel.removeAllRanges();
+        sel.addRange(range);
+      } catch { /* ignore -- element structure changed under the caret */ }
+    }
+    // `preventScroll` matters a lot here: this `.focus()` fires on every
+    // re-render of a block mid-edit (every keystroke), not just once. Without
+    // it, the browser's default focus-scroll-into-view runs every time --
+    // harmless on a short template, but on a long one it yanks the canvas
+    // back toward the focused block on every keystroke, fighting whatever
+    // scroll position the user actually had.
+    next.focus({ preventScroll: true });
+  } else {
+    next.focus({ preventScroll: true });
+    if (selStart != null) {
+      try { next.setSelectionRange(selStart, selEnd); } catch { /* ignore */ }
+    }
+  }
+  if (scrollTop != null) next.scrollTop = scrollTop;
+}
+
+/**
+ * `document.getSelection()`/`window.getSelection()` is redacted to the host
+ * document when the real selection lives inside an open shadow root -- in
+ * Chrome its `anchorNode` reports as `<body>` rather than the actual text
+ * node being edited, even though the visible caret and `execCommand` both
+ * still operate on the real position. Reading through that redacted object
+ * (as this file needs to, to compute/restore a caret offset) silently gives
+ * back garbage -- not an error, just always "position 0" -- which is what
+ * made every re-render-while-typing reset the caret to the start and type
+ * new characters in reverse. `ShadowRoot.getSelection()` (Chromium-only; no
+ * standard equivalent yet) reports the real node/offset.
+ */
+function shadowSelection(root) {
+  return typeof root.getSelection === 'function' ? root.getSelection() : window.getSelection();
+}
+
+/** Character offset of (node, offset) counting only text within `root`, walking in document order. */
+export function textOffset(root, node, offset) {
+  if (node.nodeType !== Node.TEXT_NODE) {
+    // A range boundary can land on an element (e.g. offset counts child nodes) --
+    // resolve it to the text position right before its `offset`-th child.
+    let n = 0;
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    let cur; let target = node.childNodes[offset];
+    if (!target) { while (walker.nextNode()) n += walker.currentNode.nodeValue.length; return n; }
+    while ((cur = walker.nextNode())) { if (cur === target || target.contains(cur)) return n; n += cur.nodeValue.length; }
+    return n;
+  }
+  let n = 0;
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let cur;
+  while ((cur = walker.nextNode())) {
+    if (cur === node) return n + offset;
+    n += cur.nodeValue.length;
+  }
+  return n;
+}
+
+/** Sets the start or end point of `range` to the text-offset position inside `root`. */
+function setPointAtOffset(range, root, targetOffset, isStart) {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let n = 0; let cur; let last = null;
+  while ((cur = walker.nextNode())) {
+    last = cur;
+    const len = cur.nodeValue.length;
+    if (n + len >= targetOffset) {
+      const point = targetOffset - n;
+      if (isStart) range.setStart(cur, point); else range.setEnd(cur, point);
+      return;
+    }
+    n += len;
+  }
+  if (last) { if (isStart) range.setStart(last, last.nodeValue.length); else range.setEnd(last, last.nodeValue.length); }
+  else { if (isStart) range.setStart(root, 0); else range.setEnd(root, 0); }
+}
+
+function cssEscape(s) {
+  return String(s).replace(/["\\]/g, '\\$&');
+}

package/src/render/rte.js

@@ -110,6 +110,12 @@ export function renderRte(core, b) {
     btn('inlineCode', 'Inline code', () => core.exec('insertHTML', '<code style="font-family:ui-monospace,monospace;font-size:0.92em;background:var(--ed-soft);padding:1px 4px">' + (core.getSelection().toString() || 'code') + '</code>')),
     btn('superscript', 'Superscript', () => core.exec('superscript'), st('superscript')),
     btn('subscript', 'Subscript', () => core.exec('subscript'), st('subscript')),
+  );
+  // Only where a size is actually rendered: `box` hardcodes 15px and `html`
+  // sets no font-size at all, so on those two the ± pair moved nothing while
+  // still persisting a junk `size` prop into the saved document, with the
+  // readout counting up beside it.
+  if (b.type === 'text' || b.type === 'heading') r1.append(
     sep(),
     btn('minus', 'Smaller text', () => core.size(b, -1)),
     el('span', { fontFamily: 'var(--ed-font)', fontSize: '9.5px', color: 'var(--rte-muted)', minWidth: '32px', textAlign: 'center' }, { text: (b.props.size || 16) + 'px' }),