@mjml-agent-editor/editor 0.5.0 → 0.5.2

package/dist/canvas.js

@@ -3158,7 +3158,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
     });
   }
 }
@@ -3201,6 +3203,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
 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";
@@ -3300,6 +3311,8 @@ function fixPluginTypes(editor) {
     editor.Components.addType(type.id, {
       ...type.id === "mj-column" && { view: groupedColumnView(view) },
       ...type.id === "mj-group" && { view: redrawnGroupView(view) },
+      ...type.id === "mj-social" && { view: stackedSocialGroupView(view) },
+      ...type.id === "mj-social-element" && { view: socialIconView(view) },
       model: {
         defaults: {
           "style-default": {},
@@ -3358,6 +3371,75 @@ function redrawnGroupView(base) {
     }
   };
 }
+function socialLayout(mode, align) {
+  if (mode !== "vertical") {
+    return {
+      icon: { display: "inline-table", gridColumn: "", gridTemplateColumns: "", alignItems: "" },
+      column: { display: "", gridTemplateColumns: "", justifyContent: "" }
+    };
+  }
+  const side = align === "left" ? "start" : align === "right" ? "end" : "center";
+  return {
+    icon: {
+      display: "grid",
+      gridColumn: "1 / -1",
+      gridTemplateColumns: "subgrid",
+      alignItems: "center"
+    },
+    column: { display: "grid", gridTemplateColumns: "auto auto", justifyContent: side }
+  };
+}
+var groupLayout = (group) => {
+  const attributes = group?.getAttributes() ?? {};
+  return socialLayout(attributes.mode, attributes.align);
+};
+function stackedSocialGroupView(base) {
+  return {
+    render() {
+      const drawn = base.render.call(this);
+      Object.assign(this.getChildrenContainer().style, groupLayout(this.model).column);
+      return drawn;
+    }
+  };
+}
+function socialLabel(icon) {
+  const row = icon.querySelector("tr");
+  const cell = Array.from(row?.cells ?? []).find((td) => !td.querySelector("table"));
+  return cell?.firstElementChild ?? null;
+}
+function socialIconView(base) {
+  return {
+    // The label decides whether MJML draws a label cell, so a change to it redraws the icon.
+    init() {
+      base.init.call(this);
+      this.listenTo(this.model.components(), "add remove", this.render);
+    },
+    // A change to the group's attributes redraws its icons, so each lays out the cell as well.
+    render() {
+      const drawn = base.render.call(this);
+      const { icon, column } = groupLayout(this.model.parent());
+      Object.assign(this.el.style, icon);
+      if (icon.display === "grid") {
+        for (const part of this.el.querySelectorAll(
+          ":scope > tbody, :scope > tbody > tr"
+        )) {
+          part.style.display = "contents";
+        }
+      }
+      if (this.el.parentElement) Object.assign(this.el.parentElement.style, column);
+      return drawn;
+    },
+    // With its label, so MJML draws the label's cell, and on the side `icon-position` says.
+    getInnerMjmlTemplate() {
+      const { start, end } = base.getInnerMjmlTemplate.call(this);
+      return { start: `${start}${this.model.getInnerHTML()}`, end };
+    },
+    // The label's components are drawn in that cell; the plugin's container is the `<img>`.
+    getChildrenContainer() {
+      return socialLabel(this.el) ?? base.getChildrenContainer.call(this);
+    }
+  };
+}
 
 // src/components/editor/EmailEditor.tsx
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -3483,7 +3565,6 @@ function EmailEditor({
     requestAnimationFrame(() => blockSearchRef.current?.focus());
   };
   const [composeTarget, setComposeTarget] = useState5(null);
-  const selectionSource = useRef5("other");
   const editorRef = useRef5(null);
   const { running: turnRunning, locked: readOnly, setLocked } = useAgentTurn();
   const readOnlyRef = useRef5(false);
@@ -3639,23 +3720,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());
     });
@@ -3922,7 +4004,6 @@ function EmailEditor({
               {
                 view: sidebarView,
                 onViewChange: setSidebarView,
-                markLayersSource: () => selectionSource.current = "layers",
                 blockSearchRef
               }
             ),
@@ -3966,7 +4047,6 @@ function EmailEditor({
 function LeftSidebar({
   view,
   onViewChange,
-  markLayersSource,
   blockSearchRef
 }) {
   const editor = useEditorMaybe2();
@@ -4074,36 +4154,29 @@ function LeftSidebar({
         ] })
       }
     ) }),
-    /* @__PURE__ */ jsxs7(
-      "div",
-      {
-        className: cn("flex min-h-0 flex-1 flex-col", view !== "layers" && "hidden"),
-        onMouseDownCapture: markLayersSource,
-        children: [
-          /* @__PURE__ */ jsxs7("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__ */ jsx8("span", { children: labels.expandAll }),
-            /* @__PURE__ */ jsx8(
-              Switch,
-              {
-                checked: layersExpanded,
-                onCheckedChange: toggleLayers,
-                className: "data-[state=checked]:bg-brand data-[state=unchecked]:bg-panel-border"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx8(
-            "div",
-            {
-              id: "gjs-layers",
-              className: "min-h-0 flex-1 overflow-y-auto",
-              onDoubleClickCapture: (e) => {
-                if (e.target.closest("[data-name]")) e.stopPropagation();
-              }
-            }
-          )
-        ]
-      }
-    )
+    /* @__PURE__ */ jsxs7("div", { className: cn("flex min-h-0 flex-1 flex-col", view !== "layers" && "hidden"), children: [
+      /* @__PURE__ */ jsxs7("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__ */ jsx8("span", { children: labels.expandAll }),
+        /* @__PURE__ */ jsx8(
+          Switch,
+          {
+            checked: layersExpanded,
+            onCheckedChange: toggleLayers,
+            className: "data-[state=checked]:bg-brand data-[state=unchecked]:bg-panel-border"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx8(
+        "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({