@mjml-agent-editor/editor 0.3.0 → 0.4.1

package/README.md

@@ -116,7 +116,8 @@ const images: ImageLibrary = {
 
 `quota` (`{ used, limit }`) is shown in the picker and stops uploads when reached. Leave
 `remove` out for a read-only gallery — a host that caps uploads but cannot reclaim the
-storage would otherwise be handing out a way round its own cap.
+storage would otherwise be handing out a way round its own cap. Leave `upload` out, and set
+`allowUrl: false`, for a gallery of your own images and nothing else.
 
 Without a library the picker takes URLs only. The editor never inlines a file as base64:
 most mail clients block `data:` images, and every agent turn would pay for the bytes.

package/dist/canvas.cjs

@@ -1124,7 +1124,8 @@ function ImagePicker({
   const accepts = (file) => matchesAccept(file, library?.accept);
   const full = quota !== void 0 && quota.used >= quota.limit;
   const upload = async (files) => {
-    if (!library || !files?.length) return;
+    const send = library?.upload?.bind(library);
+    if (!send || !files?.length) return;
     const mine = session.current;
     const list = Array.from(files).filter((f) => {
       if (accepts(f)) return true;
@@ -1133,7 +1134,7 @@ function ImagePicker({
     });
     if (!list.length) return;
     setPending((n) => n + list.length);
-    const results = await Promise.allSettled(list.map(async (f) => library.upload(f)));
+    const results = await Promise.allSettled(list.map(async (f) => send(f)));
     setPending((n) => n - list.length);
     for (const r of results) {
       if (r.status === "rejected") {
@@ -1168,155 +1169,163 @@ function ImagePicker({
     setDragging(false);
     if (!full) void upload(e.dataTransfer.files);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Dialog, { open, onOpenChange: (next) => !next && onClose(), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DialogContent, { className: "editor-dark gap-0 overflow-hidden border border-panel-border bg-panel p-0 text-panel-fg ring-0 sm:max-w-3xl", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DialogHeader, { className: "border-b border-panel-border px-5 py-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogTitle, { children: labels.imagePickerTitle }),
-      quota && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogDescription, { className: "text-panel-muted-fg", children: labels.imagePickerQuota(quota.used, quota.limit) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex max-h-[70vh] flex-col gap-4 overflow-y-auto p-5", children: [
-      library && (full ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "rounded-lg border border-panel-border bg-panel-elevated px-4 py-3 text-sm text-panel-muted-fg", children: labels.imagePickerQuotaFull }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-        "div",
-        {
-          onDragOver: (e) => {
-            e.preventDefault();
-            setDragging(true);
-          },
-          onDragLeave: () => setDragging(false),
-          onDrop,
-          className: cn(
-            "flex flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed px-6 py-8 text-center transition-colors",
-            dragging ? "border-brand bg-brand-soft" : "border-panel-border bg-panel-elevated"
-          ),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.ImageUp, { className: "size-8 text-panel-muted-fg" }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-wrap items-center justify-center gap-2 text-sm text-panel-muted-fg", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: labels.imagePickerDrop }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                Button,
-                {
-                  type: "button",
-                  size: "sm",
-                  className: "bg-brand text-brand-fg hover:bg-brand/90",
-                  onClick: () => fileInput.current?.click(),
-                  children: labels.imagePickerBrowse
-                }
-              )
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              "input",
-              {
-                ref: fileInput,
-                type: "file",
-                accept: library.accept ?? "image/*",
-                multiple: true,
-                hidden: true,
-                onChange: (e) => {
-                  void upload(e.target.files);
-                  e.target.value = "";
-                }
-              }
-            )
-          ]
-        }
-      )),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-        "form",
-        {
-          className: "flex gap-2",
-          onSubmit: (e) => {
-            e.preventDefault();
-            const value = url.trim();
-            if (value) onSelect(value);
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative flex-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Link2, { className: "pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-panel-muted-fg" }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                Input,
-                {
-                  value: url,
-                  onChange: (e) => setUrl(e.target.value),
-                  placeholder: labels.imagePickerUrlPlaceholder,
-                  className: "h-9 border-panel-border bg-panel-elevated pl-8 text-panel-fg placeholder:text-panel-muted-fg"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              Button,
-              {
-                type: "submit",
-                size: "lg",
-                variant: "outline",
-                disabled: !url.trim(),
-                className: "border-panel-border bg-panel-elevated text-panel-fg hover:bg-panel-hover hover:text-panel-fg",
-                children: labels.imagePickerUseUrl
-              }
-            )
-          ]
-        }
-      ),
-      library && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("section", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: "mb-2 text-xs font-medium tracking-wide text-panel-muted-fg uppercase", children: labels.imagePickerGallery }),
-        loading && images.length === 0 && pending === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex justify-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Spinner, {}) }) : images.length === 0 && pending === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "py-6 text-center text-sm text-panel-muted-fg", children: labels.imagePickerEmpty }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("ul", { className: "grid grid-cols-3 gap-3 sm:grid-cols-4", children: [
-          Array.from({ length: pending }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            "li",
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Dialog, { open, onOpenChange: (next) => !next && onClose(), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    DialogContent,
+    {
+      onDragOver: (e) => e.preventDefault(),
+      onDrop: (e) => e.preventDefault(),
+      className: "editor-dark gap-0 overflow-hidden border border-panel-border bg-panel p-0 text-panel-fg ring-0 sm:max-w-3xl",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DialogHeader, { className: "border-b border-panel-border px-5 py-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogTitle, { children: labels.imagePickerTitle }),
+          quota && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogDescription, { className: "text-panel-muted-fg", children: labels.imagePickerQuota(quota.used, quota.limit) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex max-h-[70vh] flex-col gap-4 overflow-y-auto p-5", children: [
+          library?.upload && (full ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "rounded-lg border border-panel-border bg-panel-elevated px-4 py-3 text-sm text-panel-muted-fg", children: labels.imagePickerQuotaFull }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            "div",
             {
-              className: "flex aspect-[4/3] items-center justify-center rounded-lg border border-panel-border bg-panel-elevated",
-              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Spinner, {})
-            },
-            `pending-${i}`
+              onDragOver: (e) => {
+                e.preventDefault();
+                setDragging(true);
+              },
+              onDragLeave: () => setDragging(false),
+              onDrop,
+              className: cn(
+                "flex flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed px-6 py-8 text-center transition-colors",
+                dragging ? "border-brand bg-brand-soft" : "border-panel-border bg-panel-elevated"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.ImageUp, { className: "size-8 text-panel-muted-fg" }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-wrap items-center justify-center gap-2 text-sm text-panel-muted-fg", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: labels.imagePickerDrop }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    Button,
+                    {
+                      type: "button",
+                      size: "sm",
+                      className: "bg-brand text-brand-fg hover:bg-brand/90",
+                      onClick: () => fileInput.current?.click(),
+                      children: labels.imagePickerBrowse
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "input",
+                  {
+                    ref: fileInput,
+                    type: "file",
+                    accept: library.accept ?? "image/*",
+                    multiple: true,
+                    hidden: true,
+                    onChange: (e) => {
+                      void upload(e.target.files);
+                      e.target.value = "";
+                    }
+                  }
+                )
+              ]
+            }
           )),
-          images.map((image) => {
-            const selected = image.url === currentUrl;
-            const confirming = confirmId === image.id;
-            return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("li", { className: "group relative", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => onSelect(image.url),
-                  title: image.name,
-                  className: cn(
-                    "block aspect-[4/3] w-full overflow-hidden rounded-lg border bg-black/25 transition outline-none focus-visible:ring-2 focus-visible:ring-brand",
-                    selected ? "border-brand ring-2 ring-brand" : "border-panel-border hover:border-panel-muted-fg"
-                  ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                    "img",
+          library?.allowUrl !== false && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            "form",
+            {
+              className: "flex gap-2",
+              onSubmit: (e) => {
+                e.preventDefault();
+                const value = url.trim();
+                if (value) onSelect(value);
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative flex-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Link2, { className: "pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-panel-muted-fg" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    Input,
                     {
-                      src: image.url,
-                      alt: image.name ?? "",
-                      loading: "lazy",
-                      className: "size-full object-contain"
+                      value: url,
+                      onChange: (e) => setUrl(e.target.value),
+                      placeholder: labels.imagePickerUrlPlaceholder,
+                      className: "h-9 border-panel-border bg-panel-elevated pl-8 text-panel-fg placeholder:text-panel-muted-fg"
                     }
                   )
-                }
-              ),
-              selected && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "pointer-events-none absolute top-1.5 left-1.5 flex size-5 items-center justify-center rounded-full bg-brand text-brand-fg", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Check, { className: "size-3" }) }),
-              image.name && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "pointer-events-none absolute inset-x-0 bottom-0 truncate rounded-b-lg bg-black/60 px-2 py-1 text-[11px] text-white opacity-0 transition group-hover:opacity-100", children: image.name }),
-              library.remove && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-                "button",
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  Button,
+                  {
+                    type: "submit",
+                    size: "lg",
+                    variant: "outline",
+                    disabled: !url.trim(),
+                    className: "border-panel-border bg-panel-elevated text-panel-fg hover:bg-panel-hover hover:text-panel-fg",
+                    children: labels.imagePickerUseUrl
+                  }
+                )
+              ]
+            }
+          ),
+          library && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("section", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: "mb-2 text-xs font-medium tracking-wide text-panel-muted-fg uppercase", children: labels.imagePickerGallery }),
+            loading && images.length === 0 && pending === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex justify-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Spinner, {}) }) : images.length === 0 && pending === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "py-6 text-center text-sm text-panel-muted-fg", children: labels.imagePickerEmpty }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("ul", { className: "grid grid-cols-3 gap-3 sm:grid-cols-4", children: [
+              Array.from({ length: pending }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                "li",
                 {
-                  type: "button",
-                  onClick: () => void remove(image),
-                  onBlur: () => confirming && setConfirmId(null),
-                  title: confirming ? labels.imagePickerConfirmDelete : labels.imagePickerDelete,
-                  "aria-label": labels.imagePickerDelete,
-                  className: cn(
-                    "absolute top-1.5 right-1.5 flex h-6 items-center gap-1 rounded-md px-1.5 text-xs text-white transition focus-visible:opacity-100",
-                    confirming ? "bg-red-600 opacity-100" : "bg-black/60 opacity-0 group-hover:opacity-100 hover:bg-black/80"
+                  className: "flex aspect-[4/3] items-center justify-center rounded-lg border border-panel-border bg-panel-elevated",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Spinner, {})
+                },
+                `pending-${i}`
+              )),
+              images.map((image) => {
+                const selected = image.url === currentUrl;
+                const confirming = confirmId === image.id;
+                return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("li", { className: "group relative", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => onSelect(image.url),
+                      title: image.name,
+                      className: cn(
+                        "block aspect-[4/3] w-full overflow-hidden rounded-lg border bg-black/25 transition outline-none focus-visible:ring-2 focus-visible:ring-brand",
+                        selected ? "border-brand ring-2 ring-brand" : "border-panel-border hover:border-panel-muted-fg"
+                      ),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                        "img",
+                        {
+                          src: image.url,
+                          alt: image.name ?? "",
+                          loading: "lazy",
+                          className: "size-full object-contain"
+                        }
+                      )
+                    }
                   ),
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Trash2, { className: "size-3.5" }),
-                    confirming && labels.imagePickerConfirmDelete
-                  ]
-                }
-              )
-            ] }, image.id);
-          })
+                  selected && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "pointer-events-none absolute top-1.5 left-1.5 flex size-5 items-center justify-center rounded-full bg-brand text-brand-fg", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Check, { className: "size-3" }) }),
+                  image.name && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "pointer-events-none absolute inset-x-0 bottom-0 truncate rounded-b-lg bg-black/60 px-2 py-1 text-[11px] text-white opacity-0 transition group-hover:opacity-100", children: image.name }),
+                  library.remove && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => void remove(image),
+                      onBlur: () => confirming && setConfirmId(null),
+                      title: confirming ? labels.imagePickerConfirmDelete : labels.imagePickerDelete,
+                      "aria-label": labels.imagePickerDelete,
+                      className: cn(
+                        "absolute top-1.5 right-1.5 flex h-6 items-center gap-1 rounded-md px-1.5 text-xs text-white transition focus-visible:opacity-100",
+                        confirming ? "bg-red-600 opacity-100" : "bg-black/60 opacity-0 group-hover:opacity-100 hover:bg-black/80"
+                      ),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Trash2, { className: "size-3.5" }),
+                        confirming && labels.imagePickerConfirmDelete
+                      ]
+                    }
+                  )
+                ] }, image.id);
+              })
+            ] })
+          ] })
         ] })
-      ] })
-    ] })
-  ] }) });
+      ]
+    }
+  ) });
 }
 function matchesAccept(file, accept) {
   if (!accept) return file.type.startsWith("image/");
@@ -4665,6 +4674,10 @@ function EmailEditor({
         // app.grapesjs.com and leave a session-storage entry, which a host would then have
         // to disclose and, for the entry, ask consent for.
         telemetry: false,
+        // Font Awesome from cdnjs by default, a third party a host would have to name in its
+        // 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,
         fromElement: false,
         panels: { defaults: [] },