@mjml-agent-editor/editor 0.5.1 → 0.5.3

package/dist/canvas.js

@@ -3302,6 +3302,7 @@ var COLUMN_CHILDREN = /* @__PURE__ */ new Set([
   "mj-table",
   "mj-text"
 ]);
+var HEAD_CSS = '[data-gjs-type="mj-head"] { display: none !important; }';
 function fixPluginTypes(editor) {
   addTableType(editor);
   for (const type of editor.Components.getTypes()) {
@@ -3311,6 +3312,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": {},
@@ -3369,6 +3372,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";
@@ -3871,7 +3943,7 @@ function EmailEditor({
         // privacy policy. Nothing we show uses it: GrapesJS draws its toolbar and layer icons
         // as SVG, and its icon-font panels and style manager are not rendered here.
         cssIcons: "",
-        canvasCss: CANVAS_CSS,
+        canvasCss: CANVAS_CSS + HEAD_CSS,
         fromElement: false,
         panels: { defaults: [] },
         blockManager: { appendTo: "#gjs-blocks" },