@seliseblocks/mailcraft 0.2.1 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seliseblocks/mailcraft",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "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/i18n/loaders.js

@@ -0,0 +1,78 @@
+import { EN } from './en.js';
+
+/**
+ * Lazy per-locale loading -- the code-splitting counterpart to tables.js.
+ *
+ * The 30 non-English tables are over half of everything under src/ (about
+ * 82 KB gzipped once minified), and the eager `LOCALE_TABLES` map forces all
+ * of them into any bundle that includes the element, whatever language the
+ * host actually renders. Each entry here is a *literal* dynamic import, which
+ * is the shape every bundler code-splits on: an app that never sets `locale`
+ * ships no tables at all, and one that sets `locale="fr"` fetches one small
+ * chunk on demand. tables.js stays exported for a host that wants the whole
+ * map eagerly (a language switcher with instant previews, say).
+ *
+ * The single-file demo bundle is unaffected: build.js rewrites `import(...)`
+ * onto its synchronous module map, so attribute-driven switching keeps
+ * working from `file://` with no network fetch.
+ */
+export const LOCALE_LOADERS = {
+  en: () => import('./en.js').then((m) => m.EN),
+  ar: () => import('./ar.js').then((m) => m.AR),
+  bg: () => import('./bg.js').then((m) => m.BG),
+  bn: () => import('./bn.js').then((m) => m.BN),
+  ca: () => import('./ca.js').then((m) => m.CA),
+  cs: () => import('./cs.js').then((m) => m.CS),
+  da: () => import('./da.js').then((m) => m.DA),
+  de: () => import('./de.js').then((m) => m.DE),
+  'de-CH': () => import('./de-CH.js').then((m) => m.DE_CH),
+  dz: () => import('./dz.js').then((m) => m.DZ),
+  el: () => import('./el.js').then((m) => m.EL),
+  es: () => import('./es.js').then((m) => m.ES),
+  et: () => import('./et.js').then((m) => m.ET),
+  fi: () => import('./fi.js').then((m) => m.FI),
+  fr: () => import('./fr.js').then((m) => m.FR),
+  hr: () => import('./hr.js').then((m) => m.HR),
+  hu: () => import('./hu.js').then((m) => m.HU),
+  it: () => import('./it.js').then((m) => m.IT),
+  lt: () => import('./lt.js').then((m) => m.LT),
+  lv: () => import('./lv.js').then((m) => m.LV),
+  nb: () => import('./nb.js').then((m) => m.NB),
+  nl: () => import('./nl.js').then((m) => m.NL),
+  pl: () => import('./pl.js').then((m) => m.PL),
+  pt: () => import('./pt.js').then((m) => m.PT),
+  ro: () => import('./ro.js').then((m) => m.RO),
+  ru: () => import('./ru.js').then((m) => m.RU),
+  sk: () => import('./sk.js').then((m) => m.SK),
+  sl: () => import('./sl.js').then((m) => m.SL),
+  sv: () => import('./sv.js').then((m) => m.SV),
+  tr: () => import('./tr.js').then((m) => m.TR),
+  uk: () => import('./uk.js').then((m) => m.UK),
+};
+
+// Module-level (not per-element): two editors on one page asking for the same
+// locale should trigger one fetch and share the parsed table. English is
+// seeded -- it is the translator's built-in base, always statically present.
+const cache = { en: EN };
+const pending = {};
+
+/**
+ * The already-loaded table for a tag. `undefined` means "shipped but not
+ * loaded yet" (call `loadLocale` and re-render when it lands); `null` means
+ * "no such locale" -- render the English base, exactly what the old eager
+ * `LOCALE_TABLES[tag] || null` lookup did for an unknown tag.
+ */
+export function localeTable(tag) {
+  if (Object.prototype.hasOwnProperty.call(cache, tag)) return cache[tag];
+  return LOCALE_LOADERS[tag] ? undefined : null;
+}
+
+/** Fetches (once) and caches a locale's table; resolves null for a tag that does not ship. */
+export function loadLocale(tag) {
+  const load = LOCALE_LOADERS[tag];
+  if (!load) return Promise.resolve(null);
+  if (!pending[tag]) {
+    pending[tag] = load().then((table) => { cache[tag] = table; return table; });
+  }
+  return pending[tag];
+}

package/src/core/i18n/tables.js

@@ -37,10 +37,11 @@ import { UK } from './uk.js';
  * importing and assigning a table by hand.
  *
  * Deliberately a separate module from index.js's metadata-only `LOCALES`:
- * importing this one pulls all translations in. The element accepts that
- * (host-driven language is worth it, and the demo bundle carries every module
- * anyway); a size-sensitive host that bypasses the attribute can still
- * deep-import a single `core/i18n/<tag>.js` and assign `.messages` itself.
+ * importing this one pulls all translations in, eagerly. The element itself
+ * no longer does -- it resolves the `locale` attribute through the lazy
+ * per-tag loaders (loaders.js), so a bundled app ships only the locales it
+ * actually renders. This eager map remains for a host that wants every table
+ * up front (an instant-preview language switcher, a server-side pass).
  */
 export const LOCALE_TABLES = {
   en: EN, ar: AR, bg: BG, bn: BN, ca: CA, cs: CS, da: DA, de: DE, 'de-CH': DE_CH,

package/src/core/import-html.js

@@ -966,6 +966,15 @@ function themeFromParsedDoc(doc) {
       return w && !String(w).endsWith('%') && PX(w) === Number(bestWidth);
     });
     if (content) {
+      // The content column's own background -- including the literal
+      // `transparent` the exporter always writes for a see-through column.
+      // Without this the round trip lost it: export wrote
+      // `background:transparent`, the import never read it back, and the
+      // blank-doc default repainted the content area white on every
+      // save/reload. Only an explicit value is taken, so a foreign email
+      // whose content table declares nothing keeps the white default.
+      const cbg = bgOf(content);
+      if (cbg) theme.contentBg = cbg;
       const r = PX(content.style && content.style.borderRadius);
       if (r > 0) theme.radius = r;
       const cell = content.closest ? content.closest('td') : null;

package/src/index.js

@@ -5,5 +5,6 @@ export { renderDoc } from './render/canvas.js';
 export { BLOCKS, GROUPS, LAYOUTS, PALETTE } from './core/blocks.js';
 export { createTranslator, defineMessages, missingKeys, LOCALES, isRtl, EN, MESSAGE_KEYS } from './core/i18n/index.js';
 export { LOCALE_TABLES } from './core/i18n/tables.js';
+export { LOCALE_LOADERS, loadLocale, localeTable } from './core/i18n/loaders.js';
 export { ALL_FOLDER_ID, normalizeAsset, resolveLimits } from './core/storage.js';
 export { validateFiles, sanitizeName, acceptAttribute, limitsProblem } from './core/storage-limits.js';

package/src/mailcraft-editor.js

@@ -17,7 +17,7 @@ import { createStoryViewer } from './render/story.js';
 import { STYLE } from './render/style.js';
 import { createTranslator, isRtl } from './core/i18n/index.js';
 import { ACCENT_VARS, accentTokens, parseColor } from './core/accent.js';
-import { LOCALE_TABLES } from './core/i18n/tables.js';
+import { localeTable, loadLocale } from './core/i18n/loaders.js';
 
 /** `elS` mirrors the template's literal `style="..."` attribute strings verbatim -- copied, not re-derived, to keep the port pixel-exact. */
 function elS(tag, styleStr, attrs = {}, ...children) {
@@ -298,13 +298,26 @@ export class MailCraftEditor extends ElementBase {
 
   /**
    * Resolves the `locale` attribute to its shipped message table
-   * (core/i18n/tables.js) and overlays any host-set `.messages` on top --
+   * (core/i18n/loaders.js) and overlays any host-set `.messages` on top --
    * attribute picks the language, `.messages` stays the documented way to
    * override individual strings. With no locale attribute this degrades to
    * the old behavior: `.messages` alone over built-in English.
+   *
+   * Tables load lazily (a literal dynamic import per tag, so app bundlers
+   * code-split them instead of shipping all 31). A not-yet-loaded locale
+   * renders English for the tick the chunk takes to arrive, then this method
+   * re-runs; the load is a no-op re-render if the attribute changed again
+   * meanwhile -- the guard re-reads the live attribute, never the old tag.
    */
   refreshTranslator() {
-    const table = LOCALE_TABLES[this.getAttribute('locale')] || null;
+    const tag = this.getAttribute('locale') || '';
+    let table = tag ? localeTable(tag) : null;
+    if (table === undefined) {
+      table = null;
+      loadLocale(tag).then(() => {
+        if ((this.getAttribute('locale') || '') === tag) this.refreshTranslator();
+      });
+    }
     const overrides = this.core.messages;
     this.core.t = createTranslator(table ? Object.assign({}, table, overrides || {}) : overrides);
     this.story?.retranslate();
@@ -688,17 +701,19 @@ export class MailCraftEditor extends ElementBase {
     this.toastEl.textContent = s.toast || '';
   }
 
-  /** Repaint just the countdown digits on the canvas -- driven by the core's
-   * 1s tick (core.onTick), which used to re-render the whole editor. */
+  /** Repaint just the countdown digits on the canvas -- and in the preview,
+   * whose sheet is now memoized rather than rebuilt every render -- driven by
+   * the core's 1s tick (core.onTick), which used to re-render the whole editor. */
   refreshCountdowns() {
     const now = this.core.state.now;
-    this.canvasSlot.querySelectorAll('[data-mc-countdown]').forEach((wrap) => {
+    const slots = this.core.state.previewOpen && this.previewSlot ? [this.canvasSlot, this.previewSlot] : [this.canvasSlot];
+    slots.forEach((slot) => slot.querySelectorAll('[data-mc-countdown]').forEach((wrap) => {
       const ms = Math.max(0, new Date(wrap.getAttribute('data-mc-countdown')).getTime() - now);
       const vals = { days: Math.floor(ms / 86400000), hrs: Math.floor(ms / 3600000) % 24, min: Math.floor(ms / 60000) % 60, sec: Math.floor(ms / 1000) % 60 };
       wrap.querySelectorAll('[data-mc-count]').forEach((n) => {
         n.textContent = String(vals[n.getAttribute('data-mc-count')] ?? 0).padStart(2, '0');
       });
-    });
+    }));
   }
 
   /** The header's "Saved HH:MM" label -- autosave updates it through
@@ -964,7 +979,7 @@ export class MailCraftEditor extends ElementBase {
     this.renderExportModal();
     this.renderCodeModal();
     this.renderAiModal();
-    this.renderPreviewModal(false);
+    this.renderPreviewModal();
 
     this.refreshToast();
   }
@@ -1599,7 +1614,7 @@ export class MailCraftEditor extends ElementBase {
     // own page, then its content column. `is-device` (renderCodeModal) puts
     // the mat and the frame back for the 390px phone width, where the card
     // *is* the point.
-    const previewWrap = elS('div', 'overflow: auto; padding: 0; display: flex; justify-content: center; background: var(--ed-work);', { class: 'mc-code-preview-body' });
+    const previewWrap = elS('div', 'overflow: auto; display: flex; justify-content: center; background: var(--ed-work);', { class: 'mc-code-preview-body' });
     this.codePreviewBody = previewWrap;
     this.codeFrame = elS('iframe', "width: 100%; height: 100%; min-height: 420px; border: 0; background: #ffffff; transition: width 0.24s cubic-bezier(0.22,0.61,0.36,1);", { title: t('code.liveHtmlPreviewTitle'), 'data-i18n-title': 'code.liveHtmlPreviewTitle', class: 'mc-code-frame' });
     this.codeFrame.addEventListener('load', () => this.syncCodePreviewScrollbar());
@@ -1812,7 +1827,7 @@ export class MailCraftEditor extends ElementBase {
   buildPreviewModal() {
     const t = this.core.t;
     const overlay = elS('div', '', { class: 'mc-fullscreen-panel mc-preview-panel' });
-    overlay.style.cssText = 'position: absolute; inset: 0; z-index: 60; display: grid; grid-template-rows: 58px minmax(0, 1fr); animation: mcFade 0.16s ease; display: none;';
+    overlay.style.cssText = 'position: absolute; inset: 0; z-index: 60; background: var(--ed-work); display: grid; grid-template-rows: 58px minmax(0, 1fr); animation: mcFade 0.16s ease; display: none;';
     const head = elS('div', 'display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--ed-line); background: var(--ed-panel);', { class: 'mc-preview-toolbar' });
     const headText = elS('div', 'flex: 1; min-width: 0;');
     this.previewKickerEl = 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-preview-kicker' });
@@ -1826,10 +1841,12 @@ export class MailCraftEditor extends ElementBase {
     closeBtn.addEventListener('click', () => this.core.setState({ previewOpen: false }));
     head.append(headText, this.previewDeviceSeg, closeBtn);
     overlay.appendChild(head);
-    // Flush and unpainted: this body *is* the sent email's page, so the
-    // sheet sits edge to edge exactly as exportHtml() renders it -- the
-    // theme's page background is applied on each render (renderPreviewModal).
-    const body = elS('div', 'overflow-y: auto; padding: 0;', { class: 'mc-preview-body' });
+    // This body *is* the sent email's page: the theme's page background is
+    // applied on each render (renderPreviewModal), and the stylesheet gives
+    // it container padding painted in that background -- breathing room the
+    // way a mail client's viewport provides it, with the sheet itself, and
+    // everything exportHtml() renders, untouched.
+    const body = elS('div', 'overflow-y: auto;', { class: 'mc-preview-body' });
     // Kept on the instance: renderPreviewModal repaints it from the document's
     // page background on every render, and it runs long after this builder's
     // local has gone out of scope.
@@ -1845,7 +1862,7 @@ export class MailCraftEditor extends ElementBase {
     const s = this.core.state;
     const t = this.core.t;
     this.previewModal.style.display = s.previewOpen ? 'grid' : 'none';
-    if (!s.previewOpen) return;
+    if (!s.previewOpen) { this._previewDoc = null; return; }
     this.previewKickerEl.textContent = s.device === 'mobile' ? t('preview.kickerMobile') : t('preview.kickerDesktop', { width: s.doc.theme.width });
     this.previewDeviceSeg.innerHTML = '';
     [
@@ -1865,8 +1882,20 @@ export class MailCraftEditor extends ElementBase {
     // page colour of its own shows behind the email.
     const pageBg = s.doc.theme.bg || '';
     this.previewBody.style.background = /^(transparent|none)$/i.test(pageBg.trim()) ? '' : pageBg;
-    this.previewSlot.innerHTML = '';
-    this.previewSlot.appendChild(renderDoc(this.core, false));
+    // Rebuild the sheet only when what it renders from actually changed.
+    // renderPreviewModal runs on *every* render pass, and rebuilding the
+    // whole email document each time made the open preview visibly rough:
+    // every unrelated setState re-created every node (images re-decoded and
+    // flashed, the scroll anchor jumped). The three inputs are cheap
+    // identity checks -- commit/undo/redo always replace `doc` with a fresh
+    // parse, refreshTranslator always replaces `t` -- so a stale hit is
+    // impossible.
+    if (s.doc !== this._previewDoc || s.device !== this._previewDevice || t !== this._previewT) {
+      this._previewDoc = s.doc;
+      this._previewDevice = s.device;
+      this._previewT = t;
+      this.previewSlot.replaceChildren(renderDoc(this.core, false));
+    }
   }
 }