@accelerated-agency/visual-editor 0.2.0 → 0.2.1

package/dist/index.js

@@ -1832,8 +1832,10 @@ function ElementIcon({ tag }) {
   return /* @__PURE__ */ jsx("span", { className: "shrink-0 w-5 h-5 rounded flex items-center justify-center", style: { backgroundColor: bgColor }, children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("rect", { x: "1.5", y: "1.5", width: "9", height: "9", rx: "1.5", stroke: iconColor, strokeWidth: "1.2" }) }) });
 }
 var CHANNEL = "conversion-editor";
+var IFRAME_LOAD_GUARD_MS = 13e4;
 function IframeCanvas({ url, password, proxyBaseUrl = "", onBridgeReady, onPong }) {
   const iframeElRef = useRef(null);
+  const loadGuardRef = useRef(null);
   const setSelectedElement = useMutationsStore((s) => s.setSelectedElement);
   const addMutationToActive = useVariationsStore((s) => s.addMutationToActive);
   const [loading, setLoading] = useState(false);
@@ -1876,8 +1878,24 @@ function IframeCanvas({ url, password, proxyBaseUrl = "", onBridgeReady, onPong
     return () => window.removeEventListener("message", handleMessage);
   }, [handleMessage]);
   useEffect(() => {
-    if (url) setLoading(true);
+    if (!url) return;
+    setLoading(true);
+    if (loadGuardRef.current) clearTimeout(loadGuardRef.current);
+    loadGuardRef.current = setTimeout(() => {
+      loadGuardRef.current = null;
+      setLoading(false);
+    }, IFRAME_LOAD_GUARD_MS);
+    return () => {
+      if (loadGuardRef.current) clearTimeout(loadGuardRef.current);
+    };
   }, [url]);
+  const clearLoadGuard = useCallback(() => {
+    if (loadGuardRef.current) {
+      clearTimeout(loadGuardRef.current);
+      loadGuardRef.current = null;
+    }
+    setLoading(false);
+  }, []);
   let resolvedUrl;
   if (url.toLowerCase() === "test") {
     resolvedUrl = "/test";
@@ -1908,7 +1926,8 @@ function IframeCanvas({ url, password, proxyBaseUrl = "", onBridgeReady, onPong
         src: resolvedUrl,
         className: "w-full h-full border-0",
         sandbox: "allow-scripts allow-same-origin allow-forms allow-popups",
-        onLoad: () => setLoading(false)
+        onLoad: clearLoadGuard,
+        onError: clearLoadGuard
       }
     )
   ] });

package/dist/vite.cjs

@@ -1800,7 +1800,7 @@ function createVisualEditorMiddleware(options) {
     }
   }
   return async (req, res, next) => {
-    const pathname = (req.url || "").split("?")[0];
+    let pathname = (req.url || "").split("?")[0];
     if (pathname === "/bridge.js") {
       res.removeHeader("X-Frame-Options");
       res.setHeader("Content-Type", "application/javascript; charset=utf-8");
@@ -1937,8 +1937,8 @@ function createVisualEditorMiddleware(options) {
       return;
     }
     if (pathname.startsWith("/api/proxy")) {
-      const rewritten = (req.url || "").replace("/api/proxy", "/api/conversion-proxy");
-      req.url = rewritten;
+      req.url = (req.url || "").replace("/api/proxy", "/api/conversion-proxy");
+      pathname = (req.url || "").split("?")[0];
     }
     if (pathname.startsWith("/api/conversion-proxy")) {
       try {
@@ -2001,17 +2001,39 @@ function createVisualEditorMiddleware(options) {
           }
           if (chunks.length > 0) requestBody = Buffer.concat(chunks);
         }
-        const upstream = await fetch(targetUrl, {
-          method,
-          headers: fetchHeaders,
-          body: requestBody ? Buffer.from(requestBody) : null,
-          redirect: "follow"
-        });
+        const upstreamTimeoutMs = 12e4;
+        const ac = new AbortController();
+        const timeoutId = setTimeout(() => ac.abort(), upstreamTimeoutMs);
+        let upstream;
+        try {
+          upstream = await fetch(targetUrl, {
+            method,
+            headers: fetchHeaders,
+            body: requestBody ? Buffer.from(requestBody) : null,
+            redirect: "follow",
+            signal: ac.signal
+          });
+        } catch (fetchErr) {
+          clearTimeout(timeoutId);
+          const aborted = fetchErr?.name === "AbortError";
+          res.statusCode = aborted ? 504 : 502;
+          res.setHeader("Content-Type", "application/json");
+          res.end(
+            JSON.stringify({
+              error: aborted ? `Upstream request timed out after ${upstreamTimeoutMs / 1e3}s` : fetchErr?.message || "Upstream fetch failed"
+            })
+          );
+          return;
+        }
+        clearTimeout(timeoutId);
         const responseContentType = upstream.headers.get("content-type") || "";
         const isHtmlResponse = responseContentType.includes("text/html");
+        const secFetchMode = (req.headers?.["sec-fetch-mode"] || "").toLowerCase();
         const secFetchDest = (req.headers?.["sec-fetch-dest"] || "").toLowerCase();
-        const isNavigationRequest = secFetchDest === "iframe" || secFetchDest === "document" || secFetchDest === "";
-        if (!isHtmlResponse || !isNavigationRequest) {
+        const isLikelyDocumentNavigation = secFetchMode === "navigate" || secFetchDest === "iframe" || secFetchDest === "document" || secFetchDest === "nested-document" || secFetchDest === "frame";
+        const isLikelyFetchOrXHR = secFetchDest === "empty" && (secFetchMode === "cors" || secFetchMode === "same-origin" || secFetchMode === "no-cors");
+        const shouldInjectHtmlBridge = isHtmlResponse && (isLikelyDocumentNavigation || !isLikelyFetchOrXHR);
+        if (!isHtmlResponse || !shouldInjectHtmlBridge) {
           const binary = Buffer.from(await upstream.arrayBuffer());
           res.statusCode = upstream.status;
           if (responseContentType) {
@@ -2044,7 +2066,7 @@ function createVisualEditorMiddleware(options) {
           html = html.replace("</head>", `${popupHideCss}
 </head>`);
         }
-        const runtimeProxyScript = `<script>(function(){try{var TARGET_ORIGIN=${JSON.stringify(origin)};var TARGET_PAGE_URL=${JSON.stringify(targetUrl)};var EMPTY_JSON_DATA="data:application/json;charset=utf-8,%7B%7D";function isSkippable(raw){if(!raw||typeof raw!=="string")return true;return raw.startsWith("data:")||raw.startsWith("blob:")||raw.startsWith("javascript:")||raw.startsWith("#")||raw.startsWith("http")||raw.startsWith("//");}function toAbsoluteOriginUrl(raw){if(isSkippable(raw))return raw;try{var base=raw.startsWith("/")?TARGET_ORIGIN:TARGET_PAGE_URL;var abs=new URL(raw,base);if(abs.origin!==TARGET_ORIGIN)return raw;return abs.toString();}catch(_){return raw;}}function resolveUrl(s){try{return new URL(s,window.location.href);}catch(_){return null;}}function isNestedMalformedProxy(u){if(!u)return false;var p=u.pathname||"";if(p==="/api/conversion-proxy"||p.indexOf("/api/conversion-proxy/")===0)return false;return p.indexOf("api/conversion-proxy")!==-1;}function skipNestedProxyNetwork(s){var u=typeof s==="string"?resolveUrl(s):null;return u&&isNestedMalformedProxy(u);}function emptyJsonFetchResponse(){return Promise.resolve(new Response("{}",{status:200,headers:{"Content-Type":"application/json; charset=utf-8"}}));}if(window.fetch){var _fetch=window.fetch.bind(window);window.fetch=function(input,init){try{var rawUrl=typeof input==="string"?input:(input&&input.url?String(input.url):"");if(rawUrl&&skipNestedProxyNetwork(rawUrl))return emptyJsonFetchResponse();if(typeof input==="string"){input=toAbsoluteOriginUrl(input);}else if(input&&input.url){var next=toAbsoluteOriginUrl(input.url);if(next!==input.url){input=new Request(next,input);}}var after=typeof input==="string"?input:(input&&input.url?String(input.url):"");if(after&&skipNestedProxyNetwork(after))return emptyJsonFetchResponse();}catch(_){}return _fetch(input,init);};}if(window.XMLHttpRequest&&window.XMLHttpRequest.prototype&&window.XMLHttpRequest.prototype.open){var _open=window.XMLHttpRequest.prototype.open;window.XMLHttpRequest.prototype.open=function(method,url){try{var u=resolveUrl(String(url));if(u&&isNestedMalformedProxy(u)){arguments[1]=EMPTY_JSON_DATA;}else{arguments[1]=toAbsoluteOriginUrl(url);}}catch(_){}return _open.apply(this,arguments);};}if(window.navigator&&window.navigator.serviceWorker&&typeof window.navigator.serviceWorker.register==="function"){window.navigator.serviceWorker.register=function(){return Promise.resolve({scope:"disabled-in-editor-proxy"});};}}catch(_){}})();</script>`;
+        const runtimeProxyScript = `<script>(function(){try{var TARGET_ORIGIN=${JSON.stringify(origin)};var TARGET_PAGE_URL=${JSON.stringify(targetUrl)};var EMPTY_JSON_DATA="data:application/json;charset=utf-8,%7B%7D";function isSkippable(raw){if(!raw||typeof raw!=="string")return true;return raw.startsWith("data:")||raw.startsWith("blob:")||raw.startsWith("javascript:")||raw.startsWith("#")||raw.startsWith("http")||raw.startsWith("//");}function toAbsoluteOriginUrl(raw){if(isSkippable(raw))return raw;try{var base=raw.startsWith("/")?TARGET_ORIGIN:TARGET_PAGE_URL;var abs=new URL(raw,base);if(abs.origin!==TARGET_ORIGIN)return raw;return abs.toString();}catch(_){return raw;}}function resolveUrl(s){try{return new URL(s,window.location.href);}catch(_){return null;}}function isNestedMalformedProxy(u){if(!u)return false;var p=u.pathname||"";if(p==="/api/conversion-proxy"||p.indexOf("/api/conversion-proxy/")===0)return false;return p.indexOf("api/conversion-proxy")!==-1;}function skipNestedProxyNetwork(s){var u=typeof s==="string"?resolveUrl(s):null;return u&&isNestedMalformedProxy(u);}function emptyJsonFetchResponse(){return Promise.resolve(new Response("{}",{status:200,headers:{"Content-Type":"application/json; charset=utf-8"}}));}if(window.fetch){var _fetch=window.fetch.bind(window);window.fetch=function(input,init){try{var rawUrl=typeof input==="string"?input:(input&&input.url?String(input.url):"");if(rawUrl&&skipNestedProxyNetwork(rawUrl))return emptyJsonFetchResponse();if(typeof input==="string"){input=toAbsoluteOriginUrl(input);}else if(input&&input.url){var next=toAbsoluteOriginUrl(input.url);if(next!==input.url){input=new Request(next,input);}}var after=typeof input==="string"?input:(input&&input.url?String(input.url):"");if(after&&skipNestedProxyNetwork(after))return emptyJsonFetchResponse();}catch(_){}return _fetch(input,init);};}if(window.XMLHttpRequest&&window.XMLHttpRequest.prototype&&window.XMLHttpRequest.prototype.open){var _open=window.XMLHttpRequest.prototype.open;window.XMLHttpRequest.prototype.open=function(method,url){try{var u=resolveUrl(String(url));if(u&&isNestedMalformedProxy(u)){arguments[1]=EMPTY_JSON_DATA;}else{arguments[1]=toAbsoluteOriginUrl(url);}}catch(_){}return _open.apply(this,arguments);};}if(window.navigator&&typeof window.navigator.sendBeacon==="function"){var _beacon=window.navigator.sendBeacon.bind(window.navigator);window.navigator.sendBeacon=function(url,data){try{if(skipNestedProxyNetwork(String(url)))return true;}catch(_){}return _beacon(url,data);};}if(window.navigator&&window.navigator.serviceWorker&&typeof window.navigator.serviceWorker.register==="function"){window.navigator.serviceWorker.register=function(){return Promise.resolve({scope:"disabled-in-editor-proxy"});};}}catch(_){}})();</script>`;
         if (html.includes("</head>")) {
           html = html.replace("</head>", `${runtimeProxyScript}
 </head>`);

package/dist/vite.js

@@ -1792,7 +1792,7 @@ function createVisualEditorMiddleware(options) {
     }
   }
   return async (req, res, next) => {
-    const pathname = (req.url || "").split("?")[0];
+    let pathname = (req.url || "").split("?")[0];
     if (pathname === "/bridge.js") {
       res.removeHeader("X-Frame-Options");
       res.setHeader("Content-Type", "application/javascript; charset=utf-8");
@@ -1929,8 +1929,8 @@ function createVisualEditorMiddleware(options) {
       return;
     }
     if (pathname.startsWith("/api/proxy")) {
-      const rewritten = (req.url || "").replace("/api/proxy", "/api/conversion-proxy");
-      req.url = rewritten;
+      req.url = (req.url || "").replace("/api/proxy", "/api/conversion-proxy");
+      pathname = (req.url || "").split("?")[0];
     }
     if (pathname.startsWith("/api/conversion-proxy")) {
       try {
@@ -1993,17 +1993,39 @@ function createVisualEditorMiddleware(options) {
           }
           if (chunks.length > 0) requestBody = Buffer.concat(chunks);
         }
-        const upstream = await fetch(targetUrl, {
-          method,
-          headers: fetchHeaders,
-          body: requestBody ? Buffer.from(requestBody) : null,
-          redirect: "follow"
-        });
+        const upstreamTimeoutMs = 12e4;
+        const ac = new AbortController();
+        const timeoutId = setTimeout(() => ac.abort(), upstreamTimeoutMs);
+        let upstream;
+        try {
+          upstream = await fetch(targetUrl, {
+            method,
+            headers: fetchHeaders,
+            body: requestBody ? Buffer.from(requestBody) : null,
+            redirect: "follow",
+            signal: ac.signal
+          });
+        } catch (fetchErr) {
+          clearTimeout(timeoutId);
+          const aborted = fetchErr?.name === "AbortError";
+          res.statusCode = aborted ? 504 : 502;
+          res.setHeader("Content-Type", "application/json");
+          res.end(
+            JSON.stringify({
+              error: aborted ? `Upstream request timed out after ${upstreamTimeoutMs / 1e3}s` : fetchErr?.message || "Upstream fetch failed"
+            })
+          );
+          return;
+        }
+        clearTimeout(timeoutId);
         const responseContentType = upstream.headers.get("content-type") || "";
         const isHtmlResponse = responseContentType.includes("text/html");
+        const secFetchMode = (req.headers?.["sec-fetch-mode"] || "").toLowerCase();
         const secFetchDest = (req.headers?.["sec-fetch-dest"] || "").toLowerCase();
-        const isNavigationRequest = secFetchDest === "iframe" || secFetchDest === "document" || secFetchDest === "";
-        if (!isHtmlResponse || !isNavigationRequest) {
+        const isLikelyDocumentNavigation = secFetchMode === "navigate" || secFetchDest === "iframe" || secFetchDest === "document" || secFetchDest === "nested-document" || secFetchDest === "frame";
+        const isLikelyFetchOrXHR = secFetchDest === "empty" && (secFetchMode === "cors" || secFetchMode === "same-origin" || secFetchMode === "no-cors");
+        const shouldInjectHtmlBridge = isHtmlResponse && (isLikelyDocumentNavigation || !isLikelyFetchOrXHR);
+        if (!isHtmlResponse || !shouldInjectHtmlBridge) {
           const binary = Buffer.from(await upstream.arrayBuffer());
           res.statusCode = upstream.status;
           if (responseContentType) {
@@ -2036,7 +2058,7 @@ function createVisualEditorMiddleware(options) {
           html = html.replace("</head>", `${popupHideCss}
 </head>`);
         }
-        const runtimeProxyScript = `<script>(function(){try{var TARGET_ORIGIN=${JSON.stringify(origin)};var TARGET_PAGE_URL=${JSON.stringify(targetUrl)};var EMPTY_JSON_DATA="data:application/json;charset=utf-8,%7B%7D";function isSkippable(raw){if(!raw||typeof raw!=="string")return true;return raw.startsWith("data:")||raw.startsWith("blob:")||raw.startsWith("javascript:")||raw.startsWith("#")||raw.startsWith("http")||raw.startsWith("//");}function toAbsoluteOriginUrl(raw){if(isSkippable(raw))return raw;try{var base=raw.startsWith("/")?TARGET_ORIGIN:TARGET_PAGE_URL;var abs=new URL(raw,base);if(abs.origin!==TARGET_ORIGIN)return raw;return abs.toString();}catch(_){return raw;}}function resolveUrl(s){try{return new URL(s,window.location.href);}catch(_){return null;}}function isNestedMalformedProxy(u){if(!u)return false;var p=u.pathname||"";if(p==="/api/conversion-proxy"||p.indexOf("/api/conversion-proxy/")===0)return false;return p.indexOf("api/conversion-proxy")!==-1;}function skipNestedProxyNetwork(s){var u=typeof s==="string"?resolveUrl(s):null;return u&&isNestedMalformedProxy(u);}function emptyJsonFetchResponse(){return Promise.resolve(new Response("{}",{status:200,headers:{"Content-Type":"application/json; charset=utf-8"}}));}if(window.fetch){var _fetch=window.fetch.bind(window);window.fetch=function(input,init){try{var rawUrl=typeof input==="string"?input:(input&&input.url?String(input.url):"");if(rawUrl&&skipNestedProxyNetwork(rawUrl))return emptyJsonFetchResponse();if(typeof input==="string"){input=toAbsoluteOriginUrl(input);}else if(input&&input.url){var next=toAbsoluteOriginUrl(input.url);if(next!==input.url){input=new Request(next,input);}}var after=typeof input==="string"?input:(input&&input.url?String(input.url):"");if(after&&skipNestedProxyNetwork(after))return emptyJsonFetchResponse();}catch(_){}return _fetch(input,init);};}if(window.XMLHttpRequest&&window.XMLHttpRequest.prototype&&window.XMLHttpRequest.prototype.open){var _open=window.XMLHttpRequest.prototype.open;window.XMLHttpRequest.prototype.open=function(method,url){try{var u=resolveUrl(String(url));if(u&&isNestedMalformedProxy(u)){arguments[1]=EMPTY_JSON_DATA;}else{arguments[1]=toAbsoluteOriginUrl(url);}}catch(_){}return _open.apply(this,arguments);};}if(window.navigator&&window.navigator.serviceWorker&&typeof window.navigator.serviceWorker.register==="function"){window.navigator.serviceWorker.register=function(){return Promise.resolve({scope:"disabled-in-editor-proxy"});};}}catch(_){}})();</script>`;
+        const runtimeProxyScript = `<script>(function(){try{var TARGET_ORIGIN=${JSON.stringify(origin)};var TARGET_PAGE_URL=${JSON.stringify(targetUrl)};var EMPTY_JSON_DATA="data:application/json;charset=utf-8,%7B%7D";function isSkippable(raw){if(!raw||typeof raw!=="string")return true;return raw.startsWith("data:")||raw.startsWith("blob:")||raw.startsWith("javascript:")||raw.startsWith("#")||raw.startsWith("http")||raw.startsWith("//");}function toAbsoluteOriginUrl(raw){if(isSkippable(raw))return raw;try{var base=raw.startsWith("/")?TARGET_ORIGIN:TARGET_PAGE_URL;var abs=new URL(raw,base);if(abs.origin!==TARGET_ORIGIN)return raw;return abs.toString();}catch(_){return raw;}}function resolveUrl(s){try{return new URL(s,window.location.href);}catch(_){return null;}}function isNestedMalformedProxy(u){if(!u)return false;var p=u.pathname||"";if(p==="/api/conversion-proxy"||p.indexOf("/api/conversion-proxy/")===0)return false;return p.indexOf("api/conversion-proxy")!==-1;}function skipNestedProxyNetwork(s){var u=typeof s==="string"?resolveUrl(s):null;return u&&isNestedMalformedProxy(u);}function emptyJsonFetchResponse(){return Promise.resolve(new Response("{}",{status:200,headers:{"Content-Type":"application/json; charset=utf-8"}}));}if(window.fetch){var _fetch=window.fetch.bind(window);window.fetch=function(input,init){try{var rawUrl=typeof input==="string"?input:(input&&input.url?String(input.url):"");if(rawUrl&&skipNestedProxyNetwork(rawUrl))return emptyJsonFetchResponse();if(typeof input==="string"){input=toAbsoluteOriginUrl(input);}else if(input&&input.url){var next=toAbsoluteOriginUrl(input.url);if(next!==input.url){input=new Request(next,input);}}var after=typeof input==="string"?input:(input&&input.url?String(input.url):"");if(after&&skipNestedProxyNetwork(after))return emptyJsonFetchResponse();}catch(_){}return _fetch(input,init);};}if(window.XMLHttpRequest&&window.XMLHttpRequest.prototype&&window.XMLHttpRequest.prototype.open){var _open=window.XMLHttpRequest.prototype.open;window.XMLHttpRequest.prototype.open=function(method,url){try{var u=resolveUrl(String(url));if(u&&isNestedMalformedProxy(u)){arguments[1]=EMPTY_JSON_DATA;}else{arguments[1]=toAbsoluteOriginUrl(url);}}catch(_){}return _open.apply(this,arguments);};}if(window.navigator&&typeof window.navigator.sendBeacon==="function"){var _beacon=window.navigator.sendBeacon.bind(window.navigator);window.navigator.sendBeacon=function(url,data){try{if(skipNestedProxyNetwork(String(url)))return true;}catch(_){}return _beacon(url,data);};}if(window.navigator&&window.navigator.serviceWorker&&typeof window.navigator.serviceWorker.register==="function"){window.navigator.serviceWorker.register=function(){return Promise.resolve({scope:"disabled-in-editor-proxy"});};}}catch(_){}})();</script>`;
         if (html.includes("</head>")) {
           html = html.replace("</head>", `${runtimeProxyScript}
 </head>`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@accelerated-agency/visual-editor",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": false,
   "description": "Conversion visual editor as a reusable React package",
   "type": "module",