@mjml-agent-editor/editor 0.2.0 → 0.3.0

package/dist/canvas.js

@@ -16,7 +16,7 @@ import {
   useDocumentStore,
   useImageLibrary,
   useLabels
-} from "./chunk-FTEJNUJL.js";
+} from "./chunk-K7KQC7LX.js";
 import {
   Button,
   Input,
@@ -29,11 +29,35 @@ import {
 } from "./chunk-V6RR4VRD.js";
 
 // src/components/editor/EmailEditor.tsx
-import grapesjs from "grapesjs";
+import grapesjs2 from "grapesjs";
 import GjsEditor, { Canvas, useEditorMaybe as useEditorMaybe2 } from "@grapesjs/react";
-import grapesjsMJML from "grapesjs-mjml";
+import grapesjsMJML2 from "grapesjs-mjml";
 import { useEffect as useEffect5, useRef as useRef5, useState as useState5 } from "react";
-import { STARTER_MJML } from "@mjml-agent-editor/core";
+import { listSections, STARTER_MJML } from "@mjml-agent-editor/core";
+
+// src/lib/save-baseline.ts
+function createSaveBaseline() {
+  let stored = "";
+  let loaded = null;
+  return {
+    /** The MJML the store holds, as far as this editor knows. */
+    get stored() {
+      return stored;
+    },
+    /** `canvas` is what the load serialises to, or null when it repaired something to write. */
+    load(mjml, canvas) {
+      stored = mjml;
+      loaded = canvas;
+    },
+    saved(mjml) {
+      stored = mjml;
+      loaded = null;
+    },
+    changed(mjml) {
+      return mjml !== stored && mjml !== loaded;
+    }
+  };
+}
 
 // src/lib/save-queue.ts
 function createSaveQueue(save, delayMs) {
@@ -64,6 +88,39 @@ function createSaveQueue(save, delayMs) {
   };
 }
 
+// src/lib/turn-follower.ts
+function createTurnFollower() {
+  let running = false;
+  let mounted = true;
+  let apply = null;
+  return {
+    turn(on) {
+      if (on === running) return;
+      running = on;
+      if (mounted) apply?.(on);
+    },
+    /**
+     * Whether the canvas is still mounted. An unmounted one's late reload must not unlock
+     * the shared state a canvas mounted since has locked.
+     */
+    get mounted() {
+      return mounted;
+    },
+    // Both, as React mounts twice in development.
+    mount() {
+      mounted = true;
+    },
+    unmount() {
+      mounted = false;
+    },
+    /** A turn already under way is applied at once; none means nothing to apply. */
+    ready(fn) {
+      apply = fn;
+      if (running) fn(true);
+    }
+  };
+}
+
 // src/lib/shortcuts.ts
 function opensBlockSearch(e) {
   if (e.key !== "/" || e.metaKey || e.ctrlKey || e.altKey || e.isComposing) return false;
@@ -397,6 +454,7 @@ import {
 } from "lucide-react";
 
 // src/components/editor/inspector/values.ts
+import { isSafeLink, isSafeNavbarLink } from "@mjml-agent-editor/core";
 var SIDES = ["top", "right", "bottom", "left"];
 function expandBox(value) {
   const parts = value.trim().split(/\s+/).filter(Boolean);
@@ -427,15 +485,6 @@ function parseNetwork(name) {
 function networkName(network, share) {
   return share || network === "custom" ? network : `${network}${NO_SHARE}`;
 }
-var LINK_SCHEMES = /* @__PURE__ */ new Set(["http", "https", "mailto", "tel", "sms"]);
-function isSafeLink(value) {
-  const decoded = value.replace(/&#x([0-9a-f]+);?/gi, (_, hex) => String.fromCodePoint(parseInt(hex, 16))).replace(/&#(\d+);?/g, (_, dec) => String.fromCodePoint(Number(dec))).replace(/:/g, ":").replace(/&(Tab|NewLine);/g, "").replace(/[\u0000-\u0020]/g, "");
-  const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(decoded)?.[1];
-  return !scheme || LINK_SCHEMES.has(scheme.toLowerCase());
-}
-function isSafeNavbarLink(baseUrl, href) {
-  return isSafeLink(baseUrl) && isSafeLink(href) && isSafeLink(baseUrl + href);
-}
 
 // src/components/editor/inspector/controls.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -1241,6 +1290,23 @@ function withoutEditorProps(mjml) {
     )
   );
 }
+function withClosedTags(mjml) {
+  return mjml.replace(START_TAG, (tag) => {
+    const selfClosed = /^<(mj-[\w-]+)([\s\S]*?)\s*\/>$/i.exec(tag);
+    return selfClosed ? `<${selfClosed[1]}${selfClosed[2]}></${selfClosed[1]}>` : tag;
+  });
+}
+var TABLE = /<!--[\s\S]*?(?:-->|$)|(<mj-table\b(?:[^>"']|"[^"]*"|'[^']*')*>)((?:<!--[\s\S]*?-->|(?!<!--)[\s\S])*?)(<\/mj-table\s*>)/gi;
+function withTableRowsKept(mjml) {
+  return mjml.replace(
+    TABLE,
+    (match, open, rows, close) => open ? `${open}<template>${rows}</template>${close}` : match
+  );
+}
+function sourceForEditor(mjml) {
+  const cleaned = withoutEditorProps(mjml);
+  return { mjml: withTableRowsKept(withClosedTags(cleaned)), repaired: cleaned !== mjml };
+}
 function illegalAttributes(tag, attributes) {
   const allowed = ALLOWED_ATTRIBUTES[tag];
   if (!allowed) return [];
@@ -2117,7 +2183,10 @@ var ICONS = {
   "mj-navbar-link": svg(
     '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>'
   ),
-  "mj-raw": svg('<path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/>')
+  "mj-raw": svg('<path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/>'),
+  "mj-table": svg(
+    '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/><path d="M12 3v18"/>'
+  )
 };
 function tagOf(c) {
   return String(c.get("tagName") || c.get("type") || "");
@@ -2893,8 +2962,15 @@ function Header({
   ] });
 }
 
+// src/components/editor/blocks.ts
+import grapesjs from "grapesjs";
+import grapesjsMJML from "grapesjs-mjml";
+
 // src/components/editor/ids.ts
-var ID_RE = { sec: /\bsec-([A-Za-z0-9_-]+)\b/, obj: /\bobj-([A-Za-z0-9_-]+)\b/ };
+var ID_RE = {
+  sec: /(?:^|\s)sec-([A-Za-z0-9_-]+)(?=\s|$)/,
+  obj: /(?:^|\s)obj-([A-Za-z0-9_-]+)(?=\s|$)/
+};
 function idOf(c, prefix) {
   return String(c.getAttributes()["css-class"] ?? "").match(ID_RE[prefix])?.[1] ?? null;
 }
@@ -2923,19 +2999,292 @@ function freshenCopiedIds(root, added) {
       const id = idOf(c, prefix);
       if (!id || !used(prefix, id, c)) continue;
       const cssClass = String(c.getAttributes()["css-class"]);
-      c.addAttributes({ "css-class": cssClass.replace(`${prefix}-${id}`, `${prefix}-${newId()}`) });
+      const fresh = cssClass.replace(
+        ID_RE[prefix],
+        (token) => token.replace(`${prefix}-${id}`, `${prefix}-${newId()}`)
+      );
+      c.addAttributes({ "css-class": fresh });
+    }
+  });
+}
+
+// src/components/editor/insert-block.ts
+var addsBlock = (e) => (e.key === "Enter" || e.key === " ") && !e.repeat && !e.ctrlKey && !e.metaKey && !e.altKey;
+var tileAttributes = (id) => ({ tabindex: "0", role: "button", "data-block": id });
+var tagOf5 = (c) => String(c.get("tagName") ?? "");
+function closest(c, tag) {
+  for (let cur = c; cur; cur = cur.parent() ?? void 0) if (tagOf5(cur) === tag) return cur;
+  return void 0;
+}
+function childOf(parent, c) {
+  let cur = c;
+  while (cur.parent() && cur.parent() !== parent) cur = cur.parent();
+  return cur;
+}
+function insertBlock(editor, block) {
+  const content = block.getContent();
+  let body;
+  editor.getWrapper()?.onAll((c) => {
+    if (!body && tagOf5(c) === "mj-body") body = c;
+  });
+  if (typeof content !== "string" || !body) return void 0;
+  const selected = editor.getSelected();
+  const section = closest(selected, "mj-section");
+  const sections = section?.parent() ?? body;
+  const afterSection = section ? { at: section.index() + 1 } : {};
+  const column = closest(selected, "mj-column");
+  let added;
+  if (/^\s*<mj-section\b/i.test(content)) {
+    added = sections.append(content, afterSection)[0];
+  } else if (column && selected) {
+    const at = selected === column ? {} : { at: childOf(column, selected).index() + 1 };
+    added = column.append(content, at)[0];
+  } else {
+    const [wrapper] = sections.append(
+      `<mj-section><mj-column>${content}</mj-column></mj-section>`,
+      afterSection
+    );
+    added = wrapper?.components().at(0)?.components().at(0);
+  }
+  if (!added) return void 0;
+  editor.select(added);
+  if (block.get("activate")) added.getView()?.onActive(void 0);
+  return added;
+}
+
+// src/components/editor/blocks.ts
+var EDITABLE_TAGS = /* @__PURE__ */ new Set([
+  "mj-section",
+  "mj-group",
+  "mj-column",
+  "mj-text",
+  "mj-image",
+  "mj-button",
+  "mj-divider",
+  "mj-spacer",
+  "mj-social",
+  "mj-social-element",
+  "mj-navbar",
+  "mj-navbar-link"
+]);
+var CONTENT_TAGS = /* @__PURE__ */ new Set(["mj-text", "mj-button", "mj-social-element", "mj-navbar-link"]);
+var EDITOR_INTERNALS = /data-gjs-|__p\b|custom-name/i;
+var DROPPED_MARKUP = /<(?:script|style|link|meta|iframe|object|embed|form)\b/i;
+var INLINE_IMAGE = /\b(?:src|srcset|background-url|icon)\s*=\s*(?:"[^"]*data:|'[^']*data:|data:)/i;
+var LINK_IN_MARKUP = /[\s/"'](?:xlink:)?(?:href|action|formaction)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/gi;
+var validator;
+function blockProblems(mjml, editor = validator ??= grapesjs.init({
+  headless: true,
+  storageManager: false,
+  telemetry: false,
+  plugins: [grapesjsMJML]
+})) {
+  if (EDITOR_INTERNALS.test(mjml)) return ["it contains GrapesJS's own attributes"];
+  if (INLINE_IMAGE.test(mjml)) return ["it inlines an image as a data: URL"];
+  let tree;
+  try {
+    tree = editor.runCommand("mjml-code-to-html", {
+      mjml: `<mjml><mj-body>${withClosedTags(mjml)}</mj-body></mjml>`,
+      validationLevel: "strict"
+    }).json;
+  } catch (e) {
+    const errors = e.errors;
+    if (!errors) throw e;
+    return errors.map((error) => error.formattedMessage ?? error.message ?? String(error));
+  }
+  const problems = [];
+  const top = tree.children?.find((c) => c.tagName === "mj-body")?.children ?? [];
+  if (top.length !== 1 || top[0].tagName !== "mj-section") {
+    problems.push("it is not exactly one mj-section");
+  }
+  const visit = (node, parent) => {
+    const tag = node.tagName;
+    const attributes = node.attributes ?? {};
+    const content = node.content ?? "";
+    if (!EDITABLE_TAGS.has(tag)) problems.push(`${tag} is not editable here`);
+    const cssClass = attributes["css-class"] ?? "";
+    if (ID_RE.sec.test(cssClass) || ID_RE.obj.test(cssClass)) {
+      problems.push(`${tag} carries a sec-* or obj-* id`);
+    }
+    if ("mj-class" in attributes) problems.push(`${tag} uses mj-class`);
+    const links = [attributes.href ?? ""];
+    for (const match of content.matchAll(LINK_IN_MARKUP)) {
+      links.push(match[1] ?? match[2] ?? match[3] ?? "");
+    }
+    const linked = tag === "mj-navbar-link" ? isSafeNavbarLink(parent?.attributes?.["base-url"] ?? "", attributes.href ?? "") : true;
+    if (!linked || !links.every(isSafeLink)) {
+      problems.push(`${tag} has a link scheme mail must not carry`);
+    }
+    if (CONTENT_TAGS.has(tag) ? /<mj-/i.test(content) || DROPPED_MARKUP.test(content) : content.trim()) {
+      problems.push(`${tag} holds content the editor does not keep`);
+    }
+    node.children?.forEach((child) => visit(child, node));
+  };
+  top.forEach((node) => visit(node));
+  return problems;
+}
+var escapeHtml3 = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+function registerBlocks(editor, blocks, category, media) {
+  for (const block of blocks) {
+    const problems = editor.Blocks.get(block.id) ? [`the id is already taken`] : blockProblems(block.mjml, editor);
+    if (problems.length > 0) {
+      console.error(`Block "${block.id}" is left out of the palette: ${problems.join("; ")}`);
+      continue;
+    }
+    editor.Blocks.add(block.id, {
+      // GrapesJS writes the label into the tile as markup.
+      label: escapeHtml3(block.label),
+      category,
+      media: block.media ?? media,
+      content: withClosedTags(block.mjml),
+      attributes: tileAttributes(block.id)
+    });
+  }
+}
+
+// src/components/editor/builtin-blocks.ts
+var BUILTIN_BLOCKS = [
+  "mj-1-column",
+  "mj-2-columns",
+  "mj-3-columns",
+  "mj-text",
+  "mj-image",
+  "mj-button",
+  "mj-divider",
+  "mj-spacer",
+  "mj-social-group",
+  "mj-navbar"
+];
+var LAYOUT_BLOCKS = /* @__PURE__ */ new Set(["mj-1-column", "mj-2-columns", "mj-3-columns"]);
+var CONTENT2 = {
+  // The plugin's version links Google+ and shares the page: a bare network name makes the
+  // icon open a "share this link" dialog, while `-noshare` links to the profile a footer
+  // means. Without `alt` each link is an unnamed image to a screen reader.
+  "mj-social-group": `<mj-social icon-size="24px" mode="horizontal">
+  <mj-social-element name="facebook-noshare" href="https://facebook.com/" alt="Facebook"></mj-social-element>
+  <mj-social-element name="instagram-noshare" href="https://instagram.com/" alt="Instagram"></mj-social-element>
+  <mj-social-element name="x-noshare" href="https://x.com/" alt="X"></mj-social-element>
+</mj-social>`,
+  // The plugin's sample is a via.placeholder.com picture, stored in the email and loaded by
+  // every reader's mail client. Dropping one opens the image picker instead.
+  "mj-image": "<mj-image></mj-image>"
+};
+function builtinBlock(labels) {
+  return (id) => ({
+    label: labels.blockLabels[id] ?? id,
+    // By id: a regex on the label broke as soon as a host translated it.
+    category: LAYOUT_BLOCKS.has(id) ? labels.blockCategoryLayout : labels.blockCategoryContent,
+    ...id in CONTENT2 && { content: CONTENT2[id] },
+    attributes: tileAttributes(id)
+  });
+}
+var CANVAS_CSS = 'img:not([src]), img[src=""] { min-height: 120px; background: #f4f4f5; outline: 1px dashed #a1a1aa; outline-offset: -1px; }';
+
+// src/components/editor/table-type.ts
+import { isSafeLink as isSafeLink2 } from "@mjml-agent-editor/core";
+var DROPPED = "script, style, link, iframe, frame, object, embed, applet, base, meta, animate, set, svg, math, template";
+var LINK_ATTRIBUTES = /* @__PURE__ */ new Set(["href", "xlink:href", "action", "formaction"]);
+function cleanRows(rows) {
+  rows.querySelectorAll(DROPPED).forEach((el) => el.remove());
+  rows.querySelectorAll("*").forEach((el) => {
+    for (const { name, value } of [...el.attributes]) {
+      const lower = name.toLowerCase();
+      const script = /^(java|vb)script:/i.test(value.replace(/[\u0000-\u0020]/g, ""));
+      if (lower.startsWith("on") || script || LINK_ATTRIBUTES.has(lower) && !isSafeLink2(value)) {
+        el.removeAttribute(name);
+      }
+    }
+  });
+}
+var ROW_STYLE = "pointer-events: all; display: table; width: 100%;";
+function tablePreview(doc, attributes, rows) {
+  const attr = (name, fallback) => String(attributes[name] ?? fallback);
+  const template = doc.createElement("template");
+  template.innerHTML = `<table>${rows}</table>`;
+  const table = doc.createElement("table");
+  table.setAttribute("cellpadding", String(parseInt(attr("cellpadding", "0"), 10) || 0));
+  table.setAttribute("cellspacing", String(parseInt(attr("cellspacing", "0"), 10) || 0));
+  Object.assign(table.style, {
+    width: attr("width", "100%"),
+    border: attr("border", "none"),
+    color: attr("color", "#000000"),
+    fontFamily: attr("font-family", "Ubuntu, Helvetica, Arial, sans-serif"),
+    fontSize: attr("font-size", "13px"),
+    lineHeight: attr("line-height", "22px"),
+    tableLayout: attr("table-layout", "auto")
+  });
+  for (const row of template.content.querySelectorAll("tr")) {
+    const tr = table.insertRow();
+    for (const cell2 of row.querySelectorAll(":scope > th, :scope > td")) {
+      const copy = doc.createElement(cell2.tagName.toLowerCase());
+      copy.textContent = cell2.textContent;
+      const align = cell2.getAttribute("align");
+      if (align && /^(left|right|center)$/i.test(align)) copy.setAttribute("align", align);
+      tr.append(copy);
+    }
+  }
+  const cell = doc.createElement("td");
+  cell.style.padding = attr("padding", "10px 25px");
+  cell.append(table);
+  return cell;
+}
+function addTableType(editor) {
+  const base = editor.Components.getType("default").view.prototype;
+  editor.Components.addType("mj-table", {
+    isComponent: (el) => {
+      if (el.tagName?.toLowerCase() !== "mj-table") return false;
+      const rows = el.querySelector(":scope > template");
+      if (rows) cleanRows(rows.content);
+      return { type: "mj-table", content: rows?.innerHTML ?? "", components: [] };
+    },
+    model: { defaults: { tagName: "mj-table", droppable: false, editable: false } },
+    view: {
+      tagName: "tr",
+      // GrapesJS clears the element's attributes, style among them, when the model's change.
+      updateAttributes(...args) {
+        base.updateAttributes.apply(this, args);
+        this.el.style.cssText = ROW_STYLE;
+      },
+      updateContent() {
+        const { el, model } = this;
+        el.style.cssText = ROW_STYLE;
+        el.replaceChildren(
+          tablePreview(el.ownerDocument, model.getAttributes(), String(model.get("content") ?? ""))
+        );
+      }
     }
   });
 }
 
 // src/components/editor/plugin-types.ts
+var COLUMN_CHILDREN = /* @__PURE__ */ new Set([
+  "mj-accordion",
+  "mj-button",
+  "mj-carousel",
+  "mj-divider",
+  "mj-image",
+  "mj-navbar",
+  "mj-raw",
+  "mj-social",
+  "mj-spacer",
+  "mj-table",
+  "mj-text"
+]);
 function fixPluginTypes(editor) {
+  addTableType(editor);
   for (const type of editor.Components.getTypes()) {
-    if (!type.id.startsWith("mj-")) continue;
+    if (!type.id.startsWith("mj-") || type.id === "mj-table") continue;
     const base = type.model.prototype.getAttrToHTML;
     editor.Components.addType(type.id, {
       model: {
-        defaults: { "style-default": {} },
+        defaults: {
+          "style-default": {},
+          ...type.id === "mj-column" && {
+            droppable: (source) => COLUMN_CHILDREN.has(String(source.get("tagName")))
+          },
+          // GrapesJS's own is an SVG's markup, which the canvas wrote into `src` and saved.
+          ...type.id === "mj-image" && { src: "" }
+        },
         getAttrToHTML() {
           const attributes = base.call(this);
           delete attributes.__p;
@@ -2957,16 +3306,17 @@ var TYPE_LABEL = {
   "mj-image": "Image",
   "mj-column": "Column"
 };
-function tagOf5(c) {
+function tagOf6(c) {
   return String(c.get("tagName") || c.get("type") || "");
 }
 var SPARKLES_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>';
 var IMAGE_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10l-3.1-3.1a2 2 0 0 0-2.814.014L6 21"/><path d="m14 19.5 3-3 3 3"/><path d="M17 22v-5.5"/><circle cx="9" cy="9" r="2"/></svg>';
+var SECTION_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="7" x="3" y="3" rx="1"/><rect width="9" height="7" x="3" y="14" rx="1"/><rect width="5" height="7" x="16" y="14" rx="1"/></svg>';
 function isSection(c) {
-  return tagOf5(c) === "mj-section";
+  return tagOf6(c) === "mj-section";
 }
 function isCommentable(c) {
-  const t = tagOf5(c);
+  const t = tagOf6(c);
   return t === "mj-section" || t in TYPE_LABEL;
 }
 function closestSection(c) {
@@ -2978,29 +3328,11 @@ function closestSection(c) {
   return null;
 }
 function crumbName(c, labels) {
-  const t = tagOf5(c);
+  const t = tagOf6(c);
   return labels.elementNames[t] ?? t.replace(/^mj-/, "");
 }
-var BLOCKS = [
-  "mj-1-column",
-  "mj-2-columns",
-  "mj-3-columns",
-  "mj-text",
-  "mj-image",
-  "mj-button",
-  "mj-divider",
-  "mj-spacer",
-  "mj-social-group",
-  "mj-navbar"
-];
-var LAYOUT_BLOCKS = /* @__PURE__ */ new Set(["mj-1-column", "mj-2-columns", "mj-3-columns"]);
-var SOCIAL_BLOCK = `<mj-social icon-size="24px" mode="horizontal">
-  <mj-social-element name="facebook-noshare" href="https://facebook.com/"></mj-social-element>
-  <mj-social-element name="instagram-noshare" href="https://instagram.com/"></mj-social-element>
-  <mj-social-element name="x-noshare" href="https://x.com/"></mj-social-element>
-</mj-social>`;
 function objectLabel(c) {
-  const base = TYPE_LABEL[tagOf5(c)] ?? tagOf5(c);
+  const base = TYPE_LABEL[tagOf6(c)] ?? tagOf6(c);
   const text = String(c.getEl?.()?.textContent ?? "").replace(/\s+/g, " ").trim().slice(0, 30);
   return text ? `${base}: \u201C${text}\u201D` : base;
 }
@@ -3068,7 +3400,13 @@ function setupRichText(editor, labels) {
     result: (r, action) => r.exec("hiliteColor", val(action, "input"))
   });
 }
-function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
+function EmailEditor({
+  docId,
+  onReady,
+  commentsRefresh,
+  onOpenCountChange,
+  blocks = []
+}) {
   const documents = useDocumentStore();
   const labels = useLabels();
   const loadingRef = useRef5(false);
@@ -3090,8 +3428,15 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
   const readOnlyRef = useRef5(false);
   const applyReadOnly = useRef5(async () => {
   });
-  useEffect5(() => void applyReadOnly.current(turnRunning), [turnRunning]);
-  useEffect5(() => () => setLocked(false), [setLocked]);
+  const [turn] = useState5(createTurnFollower);
+  useEffect5(() => turn.turn(turnRunning), [turn, turnRunning]);
+  useEffect5(() => {
+    turn.mount();
+    return () => {
+      turn.unmount();
+      setLocked(false);
+    };
+  }, [turn, setLocked]);
   const [crumbs, setCrumbs] = useState5([]);
   const [picker, setPicker] = useState5(
     null
@@ -3102,7 +3447,7 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
       const chain = [];
       let cur = c;
       while (cur) {
-        const t = tagOf5(cur);
+        const t = tagOf6(cur);
         if (!t || t === "mj-body" || t === "wrapper" || t === "Wrapper") break;
         chain.unshift(cur);
         cur = cur.parent() ?? void 0;
@@ -3151,7 +3496,7 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
       if (isSection(c)) addIdClass(c, "sec");
       if (!isCommentable(c)) return;
       const toolbar = [...c.get("toolbar") ?? []];
-      if (tagOf5(c) === "mj-image" && !toolbar.some((t) => t.command === "open-image-picker")) {
+      if (tagOf6(c) === "mj-image" && !toolbar.some((t) => t.command === "open-image-picker")) {
         toolbar.push({
           command: "open-image-picker",
           label: IMAGE_SVG,
@@ -3171,7 +3516,7 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
     editor.Commands.add("open-image-picker", {
       run(ed) {
         const target = ed.getSelected();
-        if (!target || tagOf5(target) !== "mj-image") return;
+        if (!target || tagOf6(target) !== "mj-image") return;
         const am = ed.AssetManager;
         am.open({
           target,
@@ -3191,6 +3536,7 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
     });
     setupRichText(editor, labels);
     fixPluginTypes(editor);
+    registerBlocks(editor, blocks, labels.blockCategorySections, SECTION_SVG);
     setupLayerNames(editor, labels);
     const STRUCTURE = /* @__PURE__ */ new Set(["mj-wrapper", "mj-section", "mj-column"]);
     const showBodyInLayers = () => {
@@ -3198,14 +3544,14 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
       if (!body) return;
       editor.Layers.setRoot(body);
       body.onAll((c) => {
-        if (STRUCTURE.has(tagOf5(c))) editor.Layers.setOpen(c, true);
+        if (STRUCTURE.has(tagOf6(c))) editor.Layers.setOpen(c, true);
       });
     };
     const keepStructureOpen = () => {
       const layers = editor.Layers;
       const opened = layers.model?.get("opened") ?? {};
       for (const [cid, c] of Object.entries(opened)) {
-        if (STRUCTURE.has(tagOf5(c))) delete opened[cid];
+        if (STRUCTURE.has(tagOf6(c))) delete opened[cid];
       }
     };
     editor.on("component:add", (c) => {
@@ -3233,16 +3579,16 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
     editor.on("component:deselected", () => {
       buildCrumbs(editor.getSelected());
     });
-    let stored = "";
+    const baseline = createSaveBaseline();
     const save = async () => {
       const view = editor.getEditing()?.getView();
       await view?.syncContent?.();
       const mjml = editor.getHtml();
-      if (mjml === stored) return;
+      if (!baseline.changed(mjml)) return;
       setSave("saving");
       try {
         await documents.save(docId, { mjml, projectData: editor.getProjectData() });
-        stored = mjml;
+        baseline.saved(mjml);
         setSave("saved");
       } catch (e) {
         setSave("error");
@@ -3273,6 +3619,7 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
       });
     }
     const lock = (on) => {
+      if (!turn.mounted) return;
       readOnlyRef.current = on;
       setLocked(on);
       notifyState();
@@ -3298,37 +3645,36 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
         return;
       }
       lock(false);
+      queue.schedule();
     };
     const reload = () => queue.run(async () => {
       const fresh = await documents.get(docId);
-      if (fresh.mjml !== stored) loadMjml(fresh.mjml);
+      if (fresh.mjml !== baseline.stored) loadMjml(fresh.mjml);
     });
     const loadMjml = (mjml) => {
       loadingRef.current = true;
       let repaired = false;
+      const adds = !mjml || listSections(mjml).some((s) => !s.sectionId);
       try {
         queue.cancel();
-        stored = mjml;
-        const source = withoutEditorProps(mjml || STARTER_MJML);
-        repaired = source !== (mjml || STARTER_MJML);
-        editor.setComponents(source);
-        editor.getWrapper()?.find("mj-section").forEach(decorate);
-        for (const t of Object.keys(TYPE_LABEL)) {
-          editor.getWrapper()?.find(t).forEach(decorate);
-        }
+        baseline.load(mjml, null);
+        const source = sourceForEditor(mjml || STARTER_MJML);
+        repaired = source.repaired;
+        editor.setComponents(source.mjml);
         editor.getWrapper()?.onAll((c) => {
-          const illegal = illegalAttributes(tagOf5(c), c.getAttributes());
+          const illegal = illegalAttributes(tagOf6(c), c.getAttributes());
           if (illegal.length === 0) return;
           c.removeAttributes(illegal);
           repaired = true;
         });
+        if (!repaired && !adds) baseline.load(mjml, editor.getHtml());
         showBodyInLayers();
         editor.UndoManager.clear();
       } finally {
         loadingRef.current = false;
       }
       notifyState();
-      if (repaired && !readOnlyRef.current) queue.schedule();
+      if ((repaired || adds) && !readOnlyRef.current) queue.schedule();
     };
     const ensureHighlightStyles = () => {
       const cdoc = editor.Canvas.getDocument();
@@ -3350,7 +3696,10 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
       cdoc.head.appendChild(style);
     };
     const sectionEl = (sectionId) => {
-      const comp = editor.getWrapper()?.find("mj-section").find((c) => sectionIdOf(c) === sectionId);
+      let comp;
+      editor.getWrapper()?.onAll((c) => {
+        if (!comp && isSection(c) && sectionIdOf(c) === sectionId) comp = c;
+      });
       return comp?.getEl?.() ?? void 0;
     };
     const compiledHtml = () => {
@@ -3361,9 +3710,9 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
         return editor.getHtml();
       }
     };
+    turn.ready((on) => void applyReadOnly.current(on));
     try {
-      const doc = await documents.get(docId);
-      loadMjml(doc.mjml);
+      await queue.run(async () => loadMjml((await documents.get(docId)).mjml));
     } catch (e) {
       toast2.error(labels.documentLoadFailed);
       console.error(e);
@@ -3418,7 +3767,7 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
   return /* @__PURE__ */ jsx8(
     GjsEditor,
     {
-      grapesjs,
+      grapesjs: grapesjs2,
       className: "h-full",
       options: {
         height: "100%",
@@ -3427,6 +3776,7 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
         // app.grapesjs.com and leave a session-storage entry, which a host would then have
         // to disclose and, for the entry, ask consent for.
         telemetry: false,
+        canvasCss: CANVAS_CSS,
         fromElement: false,
         panels: { defaults: [] },
         blockManager: { appendTo: "#gjs-blocks" },
@@ -3446,7 +3796,12 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
             close: () => setPicker(null)
           }
         },
-        canvas: { customBadgeLabel: badgeLabel(labels) },
+        canvas: {
+          customBadgeLabel: badgeLabel(labels),
+          // A file or text dragged in from outside lands as `<img>` or `<div>`, which no MJML
+          // validator accepts; drags from the palette are unaffected.
+          allowExternalDrop: false
+        },
         deviceManager: {
           devices: [
             { id: "desktop", name: "Desktop", width: "" },
@@ -3454,14 +3809,9 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
           ]
         },
         plugins: [
-          (editor) => grapesjsMJML(editor, {
-            blocks: BLOCKS,
-            block: (id) => ({
-              label: labels.blockLabels[id] ?? id,
-              // By id: a regex on the label broke as soon as a host translated it.
-              category: LAYOUT_BLOCKS.has(id) ? labels.blockCategoryLayout : labels.blockCategoryContent,
-              ...id === "mj-social-group" && { content: SOCIAL_BLOCK }
-            })
+          (editor) => grapesjsMJML2(editor, {
+            blocks: BUILTIN_BLOCKS,
+            block: builtinBlock(labels)
           })
         ]
       },
@@ -3543,7 +3893,7 @@ function LeftSidebar({
   const selectBody = () => {
     let body;
     editor?.getWrapper()?.onAll((c) => {
-      if (!body && tagOf5(c) === "mj-body") body = c;
+      if (!body && tagOf6(c) === "mj-body") body = c;
     });
     if (body) editor?.select(body);
   };
@@ -3551,6 +3901,13 @@ function LeftSidebar({
     setLayersExpanded(expand);
     editor?.getWrapper()?.onAll((c) => c.set("open", expand));
   };
+  const onTileKey = (e) => {
+    const tile = e.target.closest("[data-block]");
+    const block = tile && editor?.Blocks.get(tile.dataset.block ?? "");
+    if (!editor || !block || !addsBlock(e)) return;
+    e.preventDefault();
+    if (insertBlock(editor, block)) toast2(labels.blockAdded(tile.textContent?.trim() ?? ""));
+  };
   const filterBlocks = (q) => {
     setBlockSearch(q);
     const root = document.getElementById("gjs-blocks");
@@ -3607,7 +3964,7 @@ function LeftSidebar({
         /* @__PURE__ */ jsx8("kbd", { className: "pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 rounded border border-panel-border bg-panel px-1 py-0.5 font-mono text-[10px] text-panel-muted-fg", children: "/" })
       ] }),
       noBlockMatches && /* @__PURE__ */ jsx8("p", { className: "px-3 py-6 text-center text-xs text-panel-muted-fg", children: labels.noBlocksMatch }),
-      /* @__PURE__ */ jsx8("div", { id: "gjs-blocks", className: "min-h-0 flex-1 overflow-y-auto" })
+      /* @__PURE__ */ jsx8("div", { id: "gjs-blocks", className: "min-h-0 flex-1 overflow-y-auto", onKeyDown: onTileKey })
     ] }),
     /* @__PURE__ */ jsx8("div", { className: cn("min-h-0 flex-1 overflow-y-auto", view !== "settings" && "hidden"), children: /* @__PURE__ */ jsx8(
       Inspector,
@@ -3687,6 +4044,7 @@ function Breadcrumb({
   ] }, i)) });
 }
 export {
-  EmailEditor
+  EmailEditor,
+  blockProblems
 };
 //# sourceMappingURL=canvas.js.map