@accelerated-agency/visual-editor 0.6.1 → 0.7.0

package/dist/index.js

@@ -4801,7 +4801,110 @@ function PlatformVisualEditor({
     /* @__PURE__ */ jsx("div", { className: editorClassName, children: /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(EditorShell, { initialExperiment: experiment, embeddedMode: true, proxyBaseUrl }) }) })
   ] });
 }
+
+// src/lib/uploadImageMessage.ts
+var VISUAL_EDITOR_MAX_UPLOAD_BYTES = 1e7;
+var ALLOWED_TYPES = /* @__PURE__ */ new Set([
+  "image/jpeg",
+  "image/png",
+  "image/gif",
+  "image/webp"
+]);
+var EXT_TO_TYPE = {
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  png: "image/png",
+  gif: "image/gif",
+  webp: "image/webp"
+};
+function uploadImageErrorMessage(err, fallback = "The upload was refused") {
+  if (err instanceof Error && err.message) return err.message;
+  if (typeof err === "string" && err.trim()) return err;
+  return fallback;
+}
+function fileFromUploadImagePayload(payload) {
+  if (!payload || typeof payload !== "object") {
+    throw new Error("No image was sent");
+  }
+  const existing = asBlob(payload.file);
+  const name = sanitizeName(payload.name, existing instanceof File ? existing.name : "");
+  const type = normalizeType(
+    typeof payload.type === "string" ? payload.type : existing?.type,
+    name
+  );
+  const bytes = existing ? void 0 : bytesFromUnknown(payload.bytes !== void 0 ? payload.bytes : payload.data);
+  if (!existing && !bytes) {
+    throw new Error("No image bytes were sent");
+  }
+  const size = existing?.size ?? bytes.byteLength;
+  if (typeof payload.size === "number" && payload.size > VISUAL_EDITOR_MAX_UPLOAD_BYTES) {
+    throw new Error("Image is larger than 10MB");
+  }
+  if (size > VISUAL_EDITOR_MAX_UPLOAD_BYTES) {
+    throw new Error("Image is larger than 10MB");
+  }
+  if (!ALLOWED_TYPES.has(type)) {
+    throw new Error("Use a JPEG, PNG, GIF, or WebP image");
+  }
+  if (existing instanceof File) {
+    if (existing.type && !ALLOWED_TYPES.has(normalizeType(existing.type, existing.name))) {
+      throw new Error("Use a JPEG, PNG, GIF, or WebP image");
+    }
+    return existing;
+  }
+  if (existing) {
+    return new File([existing], name, { type });
+  }
+  return new File([bytes], name, { type });
+}
+function sanitizeName(value, fallback) {
+  const raw = typeof value === "string" ? value.trim() : "";
+  const name = raw || fallback || "image.png";
+  return name.replace(/[/\\]/g, "").slice(0, 180) || "image.png";
+}
+function normalizeType(value, name) {
+  const raw = typeof value === "string" ? value.trim().toLowerCase() : "";
+  if (raw === "image/jpg") return "image/jpeg";
+  if (ALLOWED_TYPES.has(raw)) return raw;
+  const ext = name.split(".").pop()?.toLowerCase() || "";
+  return EXT_TO_TYPE[ext] || raw;
+}
+function asBlob(value) {
+  if (typeof File !== "undefined" && value instanceof File) return value;
+  if (typeof Blob !== "undefined" && value instanceof Blob) return value;
+  return null;
+}
+function bytesFromUnknown(value) {
+  if (!value) return null;
+  if (value instanceof ArrayBuffer) return new Uint8Array(value);
+  if (ArrayBuffer.isView(value)) {
+    const view = value;
+    return new Uint8Array(view.buffer, view.byteOffset, view.byteLength);
+  }
+  if (Array.isArray(value)) {
+    return Uint8Array.from(value.map((n) => Number(n) & 255));
+  }
+  if (typeof value === "string") {
+    return bytesFromBase64(value);
+  }
+  return null;
+}
+function bytesFromBase64(value) {
+  const comma = value.indexOf(",");
+  const raw = value.startsWith("data:") && comma !== -1 ? value.slice(comma + 1) : value;
+  const binary = atob(raw);
+  const out = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i += 1) out[i] = binary.charCodeAt(i);
+  return out;
+}
 var VVVEB_CHANNEL = "vvveb-bridge";
+function frameOrigin(frame) {
+  try {
+    return new URL(frame?.src || "", window.location.href).origin;
+  } catch {
+    return window.location.origin;
+  }
+}
 function PlatformVisualEditorV2({
   // channel kept for API compatibility; VvvebJs uses its own internal channel
   embeddedGlobalKey = "__CONVERSION_EMBEDDED__",
@@ -4832,6 +4935,7 @@ function PlatformVisualEditorV2({
   onSaveSuccess,
   onSaveError,
   onRequestSave,
+  onUploadImage,
   onNavigateRequested,
   onDiscardDirty,
   renderHeader,
@@ -4860,9 +4964,36 @@ function PlatformVisualEditorV2({
   const sendToVvveb = useCallback((type, payload) => {
     iframeRef.current?.contentWindow?.postMessage(
       { channel: VVVEB_CHANNEL, type, payload },
-      "*"
+      frameOrigin(iframeRef.current)
     );
   }, []);
+  const sendSaveResult = useCallback(
+    (payload, err) => {
+      const requestId = typeof payload?.requestId === "string" ? payload.requestId : null;
+      if (!err) {
+        sendToVvveb("save-result", { requestId, ok: true, savedAt: (/* @__PURE__ */ new Date()).toISOString() });
+        return;
+      }
+      const message = err instanceof Error ? err.message : typeof err === "string" ? err : "The save was refused";
+      sendToVvveb("save-result", { requestId, ok: false, error: message });
+    },
+    [sendToVvveb]
+  );
+  const sendUploadImageResult = useCallback(
+    (payload, result, err) => {
+      const requestId = typeof payload?.requestId === "string" ? payload.requestId : null;
+      if (!err) {
+        sendToVvveb("upload-image-result", { requestId, ok: true, url: result?.url || "" });
+        return;
+      }
+      sendToVvveb("upload-image-result", {
+        requestId,
+        ok: false,
+        error: uploadImageErrorMessage(err)
+      });
+    },
+    [sendToVvveb]
+  );
   const loadPayload = useMemo(
     () => ({
       iid: experiment?.iid,
@@ -4874,9 +5005,16 @@ function PlatformVisualEditorV2({
       conversionProxyBaseUrl: typeof conversionProxyBaseUrl === "string" ? conversionProxyBaseUrl.trim().replace(/\/+$/, "") : "",
       strictObserverFreeze: !!strictObserverFreeze,
       trackingMarkers: Array.isArray(trackingMarkers) ? trackingMarkers.filter((m) => typeof m === "string" && m.trim().length > 0) : [],
-      variations: experiment?.variations ?? []
+      variations: experiment?.variations ?? [],
+      // S1: this package answers every save with "save-result". A shell that
+      // knows the field waits for the answer before it clears its working
+      // state; an older shell ignores the field and behaves as it did before.
+      capabilities: {
+        saveResult: true,
+        ...onUploadImage ? { uploadImage: true } : {}
+      }
     }),
-    [conversionProxyBaseUrl, experiment, strictObserverFreeze, trackingMarkers]
+    [conversionProxyBaseUrl, experiment, onUploadImage, strictObserverFreeze, trackingMarkers]
   );
   const editorSrc = useMemo(() => {
     const workerBase = normalizeProxyBaseUrl(conversionProxyBaseUrl);
@@ -4895,6 +5033,8 @@ function PlatformVisualEditorV2({
   const handleMessage = useCallback(
     async (e) => {
       if (!e.data || e.data.channel !== VVVEB_CHANNEL) return;
+      if (!iframeRef.current || e.source !== iframeRef.current.contentWindow) return;
+      if (e.origin !== frameOrigin(iframeRef.current)) return;
       const { type, payload } = e.data;
       switch (type) {
         case "editor-ready":
@@ -4922,8 +5062,10 @@ function PlatformVisualEditorV2({
           try {
             await onRequestSave(payload ?? {});
             setDirty(false);
+            sendSaveResult(payload, null);
             onSaveSuccess?.(payload ?? {});
           } catch (err) {
+            sendSaveResult(payload, err);
             onSaveError?.(err);
           }
           break;
@@ -4932,13 +5074,35 @@ function PlatformVisualEditorV2({
           try {
             await onRequestSave(payload ?? {});
             setDirty(false);
+            sendSaveResult(payload, null);
             onSaveSuccess?.(payload ?? {});
             if (payload?.hash) onNavigateRequested?.(payload.hash);
           } catch (err) {
+            sendSaveResult(payload, err);
             onSaveError?.(err);
           }
           break;
+        case "upload-image":
+          if (typeof e.stopImmediatePropagation === "function") e.stopImmediatePropagation();
+          if (!onUploadImage) {
+            sendUploadImageResult(payload, null, "Image upload is not available");
+            return;
+          }
+          try {
+            const file = fileFromUploadImagePayload(payload);
+            const result = await onUploadImage(file);
+            const url = typeof result?.url === "string" ? result.url.trim() : "";
+            if (!url) throw new Error("The upload did not return a URL");
+            sendUploadImageResult(payload, { url }, null);
+          } catch (err) {
+            sendUploadImageResult(payload, null, err);
+          }
+          break;
         case "close-editor":
+          if (payload?.discard === true) {
+            onClose?.();
+            return;
+          }
           if (!dirtyRef.current) {
             onClose?.();
             return;
@@ -4959,12 +5123,15 @@ function PlatformVisualEditorV2({
       onEditorReady,
       onEditorUrlChanged,
       onRequestSave,
+      onUploadImage,
       onSaveSuccess,
       onSaveError,
       onNavigateRequested,
       onClose,
       onDiscardDirty,
-      sendToVvveb
+      sendToVvveb,
+      sendSaveResult,
+      sendUploadImageResult
     ]
   );
   useLayoutEffect(() => {