@mjml-agent-editor/editor 0.4.3 → 0.5.1

package/dist/canvas.cjs

@@ -2846,6 +2846,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 } },
@@ -3204,8 +3211,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) {
@@ -3268,6 +3279,7 @@ function StructureSection({
 }) {
   switch (tagOf3(component)) {
     case "mj-section":
+    case "mj-group":
       return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ColumnWidths, { component, labels, locked });
     case "mj-social":
       return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -3722,11 +3734,11 @@ function ElementSettings({
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(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__ */ (0, import_jsx_runtime16.jsxs)("section", { className: "border-b border-panel-border/60 py-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsxs)("section", { className: "py-1", children: [
@@ -4035,7 +4047,9 @@ function registerBlocks(editor, blocks, category, media) {
       category,
       media: block.media ?? media,
       content: withClosedTags(block.mjml),
-      attributes: tileAttributes(block.id)
+      attributes: tileAttributes(block.id),
+      // Selected once dropped, as grapesjs-mjml's own blocks are, so its Settings open.
+      select: true
     });
   }
 }
@@ -4078,6 +4092,15 @@ function builtinBlock(labels) {
 }
 var CANVAS_CSS = 'img:not([src]), img[src=""] { min-height: 120px; background: #f4f4f5; outline: 1px dashed #a1a1aa; outline-offset: -1px; }';
 
+// src/components/editor/settings-follow.ts
+function clickShowsSettings(selected, target) {
+  return !!selected && !!target && selected.contains(target);
+}
+function dropShowsSettings(added, selected) {
+  const first = Array.isArray(added) ? added[0] : added;
+  return first !== void 0 && first === selected;
+}
+
 // src/components/editor/table-type.ts
 var import_core3 = require("@mjml-agent-editor/core");
 var DROPPED = "script, style, link, iframe, frame, object, embed, applet, base, meta, animate, set, svg, math, template";
@@ -4173,12 +4196,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: "" }
@@ -4195,6 +4223,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
 var import_jsx_runtime17 = require("react/jsx-runtime");
@@ -4320,7 +4383,6 @@ function EmailEditor({
     requestAnimationFrame(() => blockSearchRef.current?.focus());
   };
   const [composeTarget, setComposeTarget] = (0, import_react10.useState)(null);
-  const selectionSource = (0, import_react10.useRef)("other");
   const editorRef = (0, import_react10.useRef)(null);
   const { running: turnRunning, locked: readOnly, setLocked } = useAgentTurn();
   const readOnlyRef = (0, import_react10.useRef)(false);
@@ -4335,9 +4397,10 @@ function EmailEditor({
       setLocked(false);
     };
   }, [turn, setLocked]);
+  const inert = readOnly || loading;
   const wasLocked = (0, import_react10.useRef)(false);
   (0, import_react10.useEffect)(() => {
-    if (readOnly) {
+    if (inert) {
       wasLocked.current = true;
       return;
     }
@@ -4352,7 +4415,7 @@ function EmailEditor({
       cancelAnimationFrame(frame);
       root.style.overflow = overflow;
     };
-  }, [readOnly]);
+  }, [inert]);
   const [crumbs, setCrumbs] = (0, import_react10.useState)([]);
   const [picker, setPicker] = (0, import_react10.useState)(
     null
@@ -4454,7 +4517,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;
@@ -4475,23 +4538,24 @@ function EmailEditor({
       decorate(c);
     });
     editor.on("load", () => {
-      const body = editor.Canvas.getBody();
-      body?.addEventListener(
-        "mousedown",
-        () => {
-          selectionSource.current = "canvas";
-        },
-        true
+      editor.Canvas.getBody()?.addEventListener(
+        "click",
+        (e) => setTimeout(() => {
+          if (clickShowsSettings(editor.getSelected()?.getEl(), e.target)) {
+            setSidebarView("settings");
+          }
+        })
       );
       editor.Canvas.getDocument()?.addEventListener("keydown", onBlockSearchKey);
       showBodyInLayers();
     });
     editor.on("component:selected", (c) => {
       keepStructureOpen();
-      if (selectionSource.current === "canvas") setSidebarView("settings");
-      selectionSource.current = "other";
       buildCrumbs(c);
     });
+    editor.on("block:drag:stop", (added) => {
+      if (dropShowsSettings(added, editor.getSelected())) setSidebarView("settings");
+    });
     editor.on("component:deselected", () => {
       buildCrumbs(editor.getSelected());
     });
@@ -4740,9 +4804,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__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "absolute inset-0 z-30 flex items-center justify-center gap-2 bg-white/70 text-sm text-zinc-500", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Spinner, {}),
+              " ",
+              labels.loadingEditor
+            ] }),
             readOnly && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "absolute inset-0 z-30 flex cursor-not-allowed items-start justify-center bg-white/20 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "flex items-center gap-2 rounded-full bg-panel px-3 py-1 text-xs text-panel-fg shadow", children: [
               /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Spinner, {}),
               " ",
@@ -4753,7 +4822,6 @@ function EmailEditor({
               {
                 view: sidebarView,
                 onViewChange: setSidebarView,
-                markLayersSource: () => selectionSource.current = "layers",
                 blockSearchRef
               }
             ),
@@ -4784,12 +4852,7 @@ function EmailEditor({
                       editorRef.current?.AssetManager.close();
                     }
                   }
-                ),
-                loading && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "absolute inset-0 z-10 flex items-center justify-center gap-2 bg-white/70 text-sm text-zinc-500", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Spinner, {}),
-                  " ",
-                  labels.loadingEditor
-                ] })
+                )
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Breadcrumb, { crumbs, onSelect: (c) => editorRef.current?.select(c) })
             ] })
@@ -4802,7 +4865,6 @@ function EmailEditor({
 function LeftSidebar({
   view,
   onViewChange,
-  markLayersSource,
   blockSearchRef
 }) {
   const editor = (0, import_react9.useEditorMaybe)();
@@ -4910,36 +4972,29 @@ function LeftSidebar({
         ] })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-      "div",
-      {
-        className: cn("flex min-h-0 flex-1 flex-col", view !== "layers" && "hidden"),
-        onMouseDownCapture: markLayersSource,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "flex items-center justify-between gap-2 border-b border-panel-border px-3 py-2 text-xs text-panel-muted-fg", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: labels.expandAll }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              Switch,
-              {
-                checked: layersExpanded,
-                onCheckedChange: toggleLayers,
-                className: "data-[state=checked]:bg-brand data-[state=unchecked]:bg-panel-border"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-            "div",
-            {
-              id: "gjs-layers",
-              className: "min-h-0 flex-1 overflow-y-auto",
-              onDoubleClickCapture: (e) => {
-                if (e.target.closest("[data-name]")) e.stopPropagation();
-              }
-            }
-          )
-        ]
-      }
-    )
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("flex min-h-0 flex-1 flex-col", view !== "layers" && "hidden"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "flex items-center justify-between gap-2 border-b border-panel-border px-3 py-2 text-xs text-panel-muted-fg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: labels.expandAll }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          Switch,
+          {
+            checked: layersExpanded,
+            onCheckedChange: toggleLayers,
+            className: "data-[state=checked]:bg-brand data-[state=unchecked]:bg-panel-border"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "div",
+        {
+          id: "gjs-layers",
+          className: "min-h-0 flex-1 overflow-y-auto",
+          onDoubleClickCapture: (e) => {
+            if (e.target.closest("[data-name]")) e.stopPropagation();
+          }
+        }
+      )
+    ] })
   ] });
 }
 function Breadcrumb({