@mjml-agent-editor/editor 0.4.3 → 0.5.0

package/dist/canvas.js

@@ -1957,6 +1957,13 @@ var SCHEMA = {
     { attr: "direction", label: "reverseColumns", group: "advanced", control: { type: "toggle", on: "rtl" } },
     { attr: "border", label: "border", group: "advanced", control: { type: "text", placeholder: "1px solid #cccccc" } }
   ],
+  // MJML allows a group these and `width` only: padding or a border fails strict. Its width is
+  // not offered, as the canvas does not draw it: the plugin's group drops MJML's rule for it.
+  "mj-group": [
+    { attr: "vertical-align", label: "verticalAlign", group: "layout", control: { type: "segmented", options: VERTICAL_ALIGN } },
+    { attr: "background-color", label: "backgroundColor", group: "style", control: { type: "color" } },
+    { attr: "direction", label: "reverseColumns", group: "advanced", control: { type: "toggle", on: "rtl" } }
+  ],
   "mj-column": [
     { attr: "vertical-align", label: "verticalAlign", group: "layout", control: { type: "segmented", options: VERTICAL_ALIGN }, default: "top" },
     { attr: "padding", label: "padding", group: "spacing", control: { type: "box", units: PX_PCT } },
@@ -2315,8 +2322,12 @@ var COLUMN_RATIOS = {
     [1, 2, 1]
   ]
 };
-function columnsOf(section) {
-  const children = section.components().models;
+function columnsOf(container) {
+  let children = container.components().models;
+  const only = children.length === 1 ? children[0] : null;
+  if (tagOf2(container) === "mj-section" && only && tagOf2(only) === "mj-group") {
+    children = only.components().models;
+  }
   return children.length > 0 && children.every((c) => tagOf2(c) === "mj-column") ? children : null;
 }
 function ratioWidths(ratio) {
@@ -2379,6 +2390,7 @@ function StructureSection({
 }) {
   switch (tagOf3(component)) {
     case "mj-section":
+    case "mj-group":
       return /* @__PURE__ */ jsx6(ColumnWidths, { component, labels, locked });
     case "mj-social":
       return /* @__PURE__ */ jsx6(
@@ -2833,11 +2845,11 @@ function ElementSettings({
     ] }),
     /* @__PURE__ */ jsx7(StructureSection, { editor, component, labels, locked }),
     GROUPS.map((group) => {
-      const inGroup = visible.filter((f) => f.group === group);
-      if (inGroup.length === 0) return null;
+      const inGroup2 = visible.filter((f) => f.group === group);
+      if (inGroup2.length === 0) return null;
       return /* @__PURE__ */ jsxs6("section", { className: "border-b border-panel-border/60 py-2", children: [
         /* @__PURE__ */ jsx7("h3", { className: "px-3 pb-1 text-[10px] font-semibold tracking-wider text-panel-muted-fg/80 uppercase", children: groupName(group, labels) }),
-        inGroup.map(row)
+        inGroup2.map(row)
       ] }, group);
     }),
     advancedCount > 0 && /* @__PURE__ */ jsxs6("section", { className: "py-1", children: [
@@ -3284,12 +3296,17 @@ function fixPluginTypes(editor) {
   for (const type of editor.Components.getTypes()) {
     if (!type.id.startsWith("mj-") || type.id === "mj-table") continue;
     const base = type.model.prototype.getAttrToHTML;
+    const view = type.view.prototype;
     editor.Components.addType(type.id, {
+      ...type.id === "mj-column" && { view: groupedColumnView(view) },
+      ...type.id === "mj-group" && { view: redrawnGroupView(view) },
       model: {
         defaults: {
           "style-default": {},
           ...type.id === "mj-column" && {
-            droppable: (source) => COLUMN_CHILDREN.has(String(source.get("tagName")))
+            droppable: (source) => COLUMN_CHILDREN.has(String(source.get("tagName"))),
+            // The plugin moves a column only within sections, so a group's could not even swap.
+            draggable: '[data-gjs-type="mj-section"], [data-gjs-type="mj-group"]'
           },
           // GrapesJS's own is an SVG's markup, which the canvas wrote into `src` and saved.
           ...type.id === "mj-image" && { src: "" }
@@ -3306,6 +3323,41 @@ function fixPluginTypes(editor) {
     });
   }
 }
+var inGroup = (column) => column.parent()?.get("type") === "mj-group";
+function groupedColumnView(base) {
+  return {
+    getMjmlTemplate() {
+      if (!inGroup(this.model)) return base.getMjmlTemplate.call(this);
+      const siblings = "<mj-column></mj-column>".repeat(
+        Math.max((this.model.collection?.length ?? 1) - 1, 0)
+      );
+      const width = (c) => {
+        const value = c?.getAttributes().width;
+        return typeof value === "string" && value ? ` width="${value.replace(/"/g, "")}"` : "";
+      };
+      let body = this.model;
+      while (body && body.get("type") !== "mj-body") body = body.parent();
+      return {
+        start: `<mjml><mj-body${width(body)}><mj-section><mj-group${width(this.model.parent())}>`,
+        end: `${siblings}</mj-group></mj-section></mj-body></mjml>`
+      };
+    },
+    getTemplateFromEl(container) {
+      if (!inGroup(this.model)) return base.getTemplateFromEl.call(this, container);
+      return container.firstChild?.querySelector(
+        "div > table > tbody > tr > td > div > div"
+      ) ?? null;
+    }
+  };
+}
+function redrawnGroupView(base) {
+  return {
+    init() {
+      base.init.call(this);
+      this.listenTo(this.model.components(), "add remove", this.render);
+    }
+  };
+}
 
 // src/components/editor/EmailEditor.tsx
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -3446,9 +3498,10 @@ function EmailEditor({
       setLocked(false);
     };
   }, [turn, setLocked]);
+  const inert = readOnly || loading;
   const wasLocked = useRef5(false);
   useEffect5(() => {
-    if (readOnly) {
+    if (inert) {
       wasLocked.current = true;
       return;
     }
@@ -3463,7 +3516,7 @@ function EmailEditor({
       cancelAnimationFrame(frame);
       root.style.overflow = overflow;
     };
-  }, [readOnly]);
+  }, [inert]);
   const [crumbs, setCrumbs] = useState5([]);
   const [picker, setPicker] = useState5(
     null
@@ -3565,7 +3618,7 @@ function EmailEditor({
     fixPluginTypes(editor);
     registerBlocks(editor, blocks, labels.blockCategorySections, SECTION_SVG);
     setupLayerNames(editor, labels);
-    const STRUCTURE = /* @__PURE__ */ new Set(["mj-wrapper", "mj-section", "mj-column"]);
+    const STRUCTURE = /* @__PURE__ */ new Set(["mj-wrapper", "mj-section", "mj-group", "mj-column"]);
     const showBodyInLayers = () => {
       const body = findByTag("mj-body");
       if (!body) return;
@@ -3851,9 +3904,14 @@ function EmailEditor({
         "div",
         {
           className: "relative flex h-full min-h-0 flex-1",
-          inert: readOnly,
+          inert,
           onKeyDown: (e) => onBlockSearchKey(e.nativeEvent),
           children: [
+            loading && /* @__PURE__ */ jsxs7("div", { className: "absolute inset-0 z-30 flex items-center justify-center gap-2 bg-white/70 text-sm text-zinc-500", children: [
+              /* @__PURE__ */ jsx8(Spinner, {}),
+              " ",
+              labels.loadingEditor
+            ] }),
             readOnly && /* @__PURE__ */ jsx8("div", { className: "absolute inset-0 z-30 flex cursor-not-allowed items-start justify-center bg-white/20 pt-3", children: /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-2 rounded-full bg-panel px-3 py-1 text-xs text-panel-fg shadow", children: [
               /* @__PURE__ */ jsx8(Spinner, {}),
               " ",
@@ -3895,12 +3953,7 @@ function EmailEditor({
                       editorRef.current?.AssetManager.close();
                     }
                   }
-                ),
-                loading && /* @__PURE__ */ jsxs7("div", { className: "absolute inset-0 z-10 flex items-center justify-center gap-2 bg-white/70 text-sm text-zinc-500", children: [
-                  /* @__PURE__ */ jsx8(Spinner, {}),
-                  " ",
-                  labels.loadingEditor
-                ] })
+                )
               ] }),
               /* @__PURE__ */ jsx8(Breadcrumb, { crumbs, onSelect: (c) => editorRef.current?.select(c) })
             ] })