@mjml-agent-editor/editor 0.5.0 → 0.5.1

package/dist/canvas.cjs

@@ -4047,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
     });
   }
 }
@@ -4090,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";
@@ -4372,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);
@@ -4528,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());
     });
@@ -4811,7 +4822,6 @@ function EmailEditor({
               {
                 view: sidebarView,
                 onViewChange: setSidebarView,
-                markLayersSource: () => selectionSource.current = "layers",
                 blockSearchRef
               }
             ),
@@ -4855,7 +4865,6 @@ function EmailEditor({
 function LeftSidebar({
   view,
   onViewChange,
-  markLayersSource,
   blockSearchRef
 }) {
   const editor = (0, import_react9.useEditorMaybe)();
@@ -4963,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({