@mjml-agent-editor/editor 0.5.0 → 0.5.1

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";
@@ -3483,7 +3494,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 +3649,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 +3933,6 @@ function EmailEditor({
               {
                 view: sidebarView,
                 onViewChange: setSidebarView,
-                markLayersSource: () => selectionSource.current = "layers",
                 blockSearchRef
               }
             ),
@@ -3966,7 +3976,6 @@ function EmailEditor({
 function LeftSidebar({
   view,
   onViewChange,
-  markLayersSource,
   blockSearchRef
 }) {
   const editor = useEditorMaybe2();
@@ -4074,36 +4083,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({