@alpaca-headless/alpaca-headless-nextjs 1.0.4621 → 1.0.4623

package/dist/client-components/MultiComponentEditor.js

@@ -1,35 +1,18 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import React, { Fragment, useCallback, useEffect, useState, } from "react";
 export function MultiComponentEditor({ children, component, placeholderName, thumbZoom, thumbWidth, thumbHeight, onSelectedComponentChange, }) {
-    var _a, _b, _c;
+    var _a, _b;
     const [selectedId, setSelectedId] = useState(null);
-    const thumbnailContainerRef = useRef(null);
     const placeholder = component.placeholders.find((x) => x.name === placeholderName);
-    const components = useMemo(() => { var _a; return (_a = placeholder === null || placeholder === void 0 ? void 0 : placeholder.components) !== null && _a !== void 0 ? _a : null; }, [placeholder]);
+    if (!placeholder)
+        return;
+    const components = placeholder.components;
+    if (!components)
+        return;
     const handleMessage = useCallback((event) => {
-        var _a, _b, _c, _d;
-        const data = event.data;
-        if (!data || !components)
-            return;
-        if (data.type === "componentsSelected") {
-            setSelectedId((_b = (_a = data.componentIds) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : null);
-            return;
-        }
-        // Parhelia (editing-bridge) selects the surrounding component as a
-        // whole, so only ids that resolve to one of our items may change the
-        // selection — everything else would snap back to the first item.
-        if (data.family === "parhelia/editing-bridge" &&
-            data.name === "setSelection") {
-            const ids = (_d = (_c = data.payload) === null || _c === void 0 ? void 0 : _c.componentIds) !== null && _d !== void 0 ? _d : [];
-            const matches = components.filter((c) => ids.some((id) => matchesComponent(id, c)));
-            if (matches.length === 1) {
-                setSelectedId(matches[0].id);
-            }
-            else if (matches.length > 1) {
-                console.warn("[MultiComponentEditor] ambiguous setSelection: %d components matched ids %o, selecting first", matches.length, ids);
-                setSelectedId(matches[0].id);
-            }
+        if (event.data.type === "componentsSelected") {
+            setSelectedId(event.data.componentIds[0]);
         }
     }, [components]);
     useEffect(() => {
@@ -37,35 +20,11 @@ export function MultiComponentEditor({ children, component, placeholderName, thu
         return () => {
             window.removeEventListener("message", handleMessage);
         };
-    }, [handleMessage]);
-    // Parhelia's interaction overlay swallows click and pointerup before they
-    // reach the thumbnails (its pointer capture retargets the release event),
-    // but pointerdown still hits the DOM — select thumbnails with a native
-    // capture listener so switching works in both editors.
-    useEffect(() => {
-        const container = thumbnailContainerRef.current;
-        if (!container)
-            return;
-        const handlePointerDown = (event) => {
-            var _a;
-            if (event.button !== 0)
-                return;
-            const thumb = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest("[data-mce-component-id]");
-            const id = thumb === null || thumb === void 0 ? void 0 : thumb.getAttribute("data-mce-component-id");
-            if (id) {
-                setSelectedId(id);
-                selectComponents([id]);
-            }
-        };
-        container.addEventListener("pointerdown", handlePointerDown, true);
-        return () => {
-            container.removeEventListener("pointerdown", handlePointerDown, true);
-        };
     }, []);
-    const selectedIndex = (_a = components === null || components === void 0 ? void 0 : components.findIndex((x) => x.id === selectedId)) !== null && _a !== void 0 ? _a : -1;
+    const selectedIndex = components.findIndex((x) => x.id === selectedId);
     const resolvedIndex = selectedIndex < 0 ? 0 : selectedIndex;
-    const resolvedComponent = (_b = components === null || components === void 0 ? void 0 : components[resolvedIndex]) !== null && _b !== void 0 ? _b : null;
-    const resolvedId = (_c = resolvedComponent === null || resolvedComponent === void 0 ? void 0 : resolvedComponent.id) !== null && _c !== void 0 ? _c : null;
+    const resolvedComponent = (_a = components[resolvedIndex]) !== null && _a !== void 0 ? _a : null;
+    const resolvedId = (_b = resolvedComponent === null || resolvedComponent === void 0 ? void 0 : resolvedComponent.id) !== null && _b !== void 0 ? _b : null;
     useEffect(() => {
         if (resolvedId !== null && selectedId !== resolvedId) {
             setSelectedId(resolvedId);
@@ -77,11 +36,9 @@ export function MultiComponentEditor({ children, component, placeholderName, thu
             selectedIndex: resolvedIndex,
         });
     }, [resolvedId, resolvedIndex, onSelectedComponentChange]);
-    if (!placeholder || !components)
-        return;
     const childrenArray = React.Children.toArray(children);
     const filteredChildren = childrenArray.filter((child) => child.type !== "script");
-    return (_jsxs(_Fragment, { children: [filteredChildren[resolvedIndex], _jsxs("div", { className: "a-editor-mce", ref: thumbnailContainerRef, children: [_jsx("script", { "data-placeholder-start": placeholder.key, "data-orientation": "horizontal" }), filteredChildren.map((x, index) => thumbnail(x, index)), _jsx("script", { "data-placeholder-end": placeholder.key })] })] }));
+    return (_jsxs(_Fragment, { children: [filteredChildren[resolvedIndex], _jsxs("div", { className: "a-editor-mce", children: [_jsx("script", { "data-placeholder-start": placeholder.key, "data-orientation": "horizontal" }), filteredChildren.map((x, index) => thumbnail(x, index)), _jsx("script", { "data-placeholder-end": placeholder.key })] })] }));
     function thumbnail(x, index) {
         var _a, _b, _c, _d, _e, _f, _g;
         const style = {};
@@ -91,31 +48,14 @@ export function MultiComponentEditor({ children, component, placeholderName, thu
         if (thumbWidth) {
             style.width = thumbWidth;
         }
-        // Mid-transition renders (RSC refetch, fresh inserts) can deliver child
-        // elements whose nesting doesn't match yet — render an empty tile for
-        // that frame instead of crashing into the placeholder error boundary.
         const componentArray = (_c = (_b = (_a = x.props) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.props) === null || _c === void 0 ? void 0 : _c.children;
-        const thumbnailContent = Array.isArray(componentArray)
-            ? componentArray.slice(1, -1)
-            : null;
         const component = components[index];
         return (_jsxs(Fragment, { children: [_jsxs("div", { className: "a-editor-mce-thumbnail" +
-                        (index === resolvedIndex ? " a-editor-mce-thumbnail--selected" : ""), style: style, "data-mce-component-id": component.id, children: [_jsx("script", { "data-component-start": component.id, "data-itemid": ((_e = (_d = component._editor) === null || _d === void 0 ? void 0 : _d.linkedComponentItem) === null || _e === void 0 ? void 0 : _e.id) || component.id, "data-layoutid": (_g = (_f = component._editor) === null || _f === void 0 ? void 0 : _f.hostingPageItem) === null || _g === void 0 ? void 0 : _g.id }), _jsx("div", { style: { pointerEvents: "none", zoom: thumbZoom || 0.25 }, children: thumbnailContent }), _jsx("script", { "data-component-end": component.id })] }), _jsx("div", { "data-dropzone": component.id })] }, index));
+                        (index === resolvedIndex ? " a-editor-mce-thumbnail--selected" : ""), style: style, onClick: () => {
+                        selectComponents([components[index].id]);
+                    }, children: [_jsx("script", { "data-component-start": component.id, "data-itemid": ((_e = (_d = component._editor) === null || _d === void 0 ? void 0 : _d.linkedComponentItem) === null || _e === void 0 ? void 0 : _e.id) || component.id, "data-layoutid": (_g = (_f = component._editor) === null || _f === void 0 ? void 0 : _f.hostingPageItem) === null || _g === void 0 ? void 0 : _g.id }), _jsx("div", { style: { pointerEvents: "none", zoom: thumbZoom || 0.25 }, children: componentArray.slice(1, -1) }), _jsx("script", { "data-component-end": component.id })] }), _jsx("div", { "data-dropzone": components[index].id })] }, index));
     }
 }
-function matchesComponent(id, component) {
-    var _a, _b;
-    const normalized = normalizeId(id);
-    if (!normalized)
-        return false;
-    return (normalized === normalizeId(component.id) ||
-        normalized === normalizeId((_b = (_a = component._editor) === null || _a === void 0 ? void 0 : _a.linkedComponentItem) === null || _b === void 0 ? void 0 : _b.id));
-}
-function normalizeId(id) {
-    // Like Editor/packages/core/src/editor/utils.ts#stripGuid, but also removes
-    // dashes to handle Parhelia's editing-bridge id format variations.
-    return id ? id.replace(/[{}-]/g, "").toLowerCase() : null;
-}
 function selectComponents(componentIds) {
     var _a;
     (_a = window.top) === null || _a === void 0 ? void 0 : _a.window.postMessage({ componentIds, type: "componentsSelected" }, "*");

package/dist/proxy/index.js

@@ -1,21 +1,29 @@
 import axios from "axios";
+// import { HttpsProxyAgent } from "https-proxy-agent";
 import { NextResponse } from "next/server";
-async function GET(req, target) {
+async function GET(req, target
+//{ proxy }: { proxy?: string }
+) {
     const reqUrl = new URL(req.url);
     const url = target + reqUrl.pathname + "?" + reqUrl.searchParams.toString();
     const headers = {
         Authorization: req.headers.get("Authorization") || "",
         Cookie: req.headers.get("Cookie") || "",
     };
+    // const agent = proxy ? new HttpsProxyAgent(proxy) : undefined;
     const externalResponse = await axios.get(url, {
         headers: headers,
+        // httpAgent: agent,
+        // httpsAgent: agent,
         responseType: "stream",
     });
     return new NextResponse(nodeReadableToReadableStream(externalResponse.data), {
         status: externalResponse.status,
     });
 }
-async function POST(req) {
+async function POST(req
+//{ proxy }: { proxy?: string }
+) {
     const reqUrl = new URL(req.url);
     const body = await req.text();
     const url = process.env.EDITOR_SERVICE_URL +
@@ -27,8 +35,11 @@ async function POST(req) {
         Authorization: req.headers.get("Authorization") || "",
         Cookie: req.headers.get("Cookie") || "",
     };
+    // const agent = proxy ? new HttpsProxyAgent(proxy) : undefined;
     const externalResponse = await axios.post(url, body, {
         headers: headers,
+        // httpAgent: agent,
+        // httpsAgent: agent,
         responseType: "stream",
     });
     const responseHeaders = getResponseHeaders(externalResponse);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpaca-headless/alpaca-headless-nextjs",
-  "version": "1.0.4621",
+  "version": "1.0.4623",
   "type": "module",
   "description": "Alpaca Headless",
   "main": "dist/index.js",
@@ -44,15 +44,17 @@
   },
   "homepage": "https://github.com/yourusername/your-module-name#readme",
   "devDependencies": {
-    "@types/node": "^25.5.0",
-    "@types/react": "19.2.14",
-    "eslint": "^9.39.4",
+    "@types/node": "^20.14.2",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
+    "eslint": "^9.22.0",
     "eslint-config-next": "16.2.6",
-    "typescript": "5.9.3"
+    "typescript": "^5"
   },
   "dependencies": {
-    "@alpaca-headless/alpaca-headless": "^1.0.4621",
+    "@alpaca-headless/alpaca-headless": "^1.0.4623",
     "axios": "^1.16.1",
+    "https-proxy-agent": "^7.0.4",
     "next": "16.2.6",
     "react": "19.2.4",
     "react-dom": "19.2.4",

package/src/client-components/MultiComponentEditor.tsx

@@ -7,8 +7,6 @@ import React, {
   ReactNode,
   useCallback,
   useEffect,
-  useMemo,
-  useRef,
   useState,
 } from "react";
 
@@ -35,46 +33,17 @@ export function MultiComponentEditor({
   onSelectedComponentChange,
 }: MultiComponentEditorProps) {
   const [selectedId, setSelectedId] = useState<string | null>(null);
-  const thumbnailContainerRef = useRef<HTMLDivElement | null>(null);
   const placeholder = component.placeholders.find(
     (x) => x.name === placeholderName
   );
-  const components = useMemo(
-    () => placeholder?.components ?? null,
-    [placeholder]
-  );
+  if (!placeholder) return;
+  const components = placeholder.components;
+  if (!components) return;
 
   const handleMessage = useCallback(
     (event: MessageEvent) => {
-      const data = event.data;
-      if (!data || !components) return;
-
-      if (data.type === "componentsSelected") {
-        setSelectedId(data.componentIds?.[0] ?? null);
-        return;
-      }
-
-      // Parhelia (editing-bridge) selects the surrounding component as a
-      // whole, so only ids that resolve to one of our items may change the
-      // selection — everything else would snap back to the first item.
-      if (
-        data.family === "parhelia/editing-bridge" &&
-        data.name === "setSelection"
-      ) {
-        const ids: string[] = data.payload?.componentIds ?? [];
-        const matches = components.filter((c: ComponentData) =>
-          ids.some((id) => matchesComponent(id, c))
-        );
-        if (matches.length === 1) {
-          setSelectedId(matches[0].id);
-        } else if (matches.length > 1) {
-          console.warn(
-            "[MultiComponentEditor] ambiguous setSelection: %d components matched ids %o, selecting first",
-            matches.length,
-            ids
-          );
-          setSelectedId(matches[0].id);
-        }
+      if (event.data.type === "componentsSelected") {
+        setSelectedId(event.data.componentIds[0]);
       }
     },
     [components]
@@ -86,38 +55,13 @@ export function MultiComponentEditor({
     return () => {
       window.removeEventListener("message", handleMessage);
     };
-  }, [handleMessage]);
-
-  // Parhelia's interaction overlay swallows click and pointerup before they
-  // reach the thumbnails (its pointer capture retargets the release event),
-  // but pointerdown still hits the DOM — select thumbnails with a native
-  // capture listener so switching works in both editors.
-  useEffect(() => {
-    const container = thumbnailContainerRef.current;
-    if (!container) return;
-
-    const handlePointerDown = (event: PointerEvent) => {
-      if (event.button !== 0) return;
-      const thumb = (event.target as Element | null)?.closest(
-        "[data-mce-component-id]"
-      );
-      const id = thumb?.getAttribute("data-mce-component-id");
-      if (id) {
-        setSelectedId(id);
-        selectComponents([id]);
-      }
-    };
-
-    container.addEventListener("pointerdown", handlePointerDown, true);
-    return () => {
-      container.removeEventListener("pointerdown", handlePointerDown, true);
-    };
   }, []);
 
-  const selectedIndex =
-    components?.findIndex((x: ComponentData) => x.id === selectedId) ?? -1;
+  const selectedIndex = components.findIndex(
+    (x: ComponentData) => x.id === selectedId
+  );
   const resolvedIndex = selectedIndex < 0 ? 0 : selectedIndex;
-  const resolvedComponent = components?.[resolvedIndex] ?? null;
+  const resolvedComponent = components[resolvedIndex] ?? null;
   const resolvedId = resolvedComponent?.id ?? null;
 
   useEffect(() => {
@@ -133,8 +77,6 @@ export function MultiComponentEditor({
     });
   }, [resolvedId, resolvedIndex, onSelectedComponentChange]);
 
-  if (!placeholder || !components) return;
-
   const childrenArray = React.Children.toArray(children) as ReactElement[];
 
   const filteredChildren = childrenArray.filter(
@@ -144,7 +86,7 @@ export function MultiComponentEditor({
   return (
     <>
       {filteredChildren[resolvedIndex]}
-      <div className="a-editor-mce" ref={thumbnailContainerRef}>
+      <div className="a-editor-mce">
         <script
           data-placeholder-start={placeholder.key}
           data-orientation="horizontal"
@@ -170,13 +112,7 @@ export function MultiComponentEditor({
       style.width = thumbWidth;
     }
 
-    // Mid-transition renders (RSC refetch, fresh inserts) can deliver child
-    // elements whose nesting doesn't match yet — render an empty tile for
-    // that frame instead of crashing into the placeholder error boundary.
     const componentArray = (x as any).props?.children?.props?.children;
-    const thumbnailContent = Array.isArray(componentArray)
-      ? componentArray.slice(1, -1)
-      : null;
 
     const component = components![index];
 
@@ -188,7 +124,9 @@ export function MultiComponentEditor({
             (index === resolvedIndex ? " a-editor-mce-thumbnail--selected" : "")
           }
           style={style}
-          data-mce-component-id={component.id}
+          onClick={() => {
+            selectComponents([components![index].id]);
+          }}
         >
           <script
             data-component-start={component.id}
@@ -198,31 +136,16 @@ export function MultiComponentEditor({
             data-layoutid={component._editor?.hostingPageItem?.id}
           />
           <div style={{ pointerEvents: "none", zoom: thumbZoom || 0.25 }}>
-            {thumbnailContent}
+            {componentArray.slice(1, -1)}
           </div>
           <script data-component-end={component.id} />
         </div>
-        <div data-dropzone={component.id}></div>
+        <div data-dropzone={components[index].id}></div>
       </Fragment>
     );
   }
 }
 
-function matchesComponent(id: string, component: ComponentData) {
-  const normalized = normalizeId(id);
-  if (!normalized) return false;
-  return (
-    normalized === normalizeId(component.id) ||
-    normalized === normalizeId(component._editor?.linkedComponentItem?.id)
-  );
-}
-
-function normalizeId(id: string | undefined | null) {
-  // Like Editor/packages/core/src/editor/utils.ts#stripGuid, but also removes
-  // dashes to handle Parhelia's editing-bridge id format variations.
-  return id ? id.replace(/[{}-]/g, "").toLowerCase() : null;
-}
-
 function selectComponents(componentIds: string[]) {
   window.top?.window.postMessage(
     { componentIds, type: "componentsSelected" },

package/src/proxy/index.ts

@@ -1,9 +1,11 @@
 import axios from "axios";
+// import { HttpsProxyAgent } from "https-proxy-agent";
 import { NextResponse } from "next/server";
 
 async function GET(
   req: Request,
   target: string
+  //{ proxy }: { proxy?: string }
 ) {
   const reqUrl = new URL(req.url);
 
@@ -15,8 +17,12 @@ async function GET(
     Cookie: req.headers.get("Cookie") || "",
   };
 
+  // const agent = proxy ? new HttpsProxyAgent(proxy) : undefined;
+
   const externalResponse = await axios.get(url, {
     headers: headers,
+    // httpAgent: agent,
+    // httpsAgent: agent,
     responseType: "stream",
   });
 
@@ -25,7 +31,10 @@ async function GET(
   });
 }
 
-async function POST(req: Request) {
+async function POST(
+  req: Request
+  //{ proxy }: { proxy?: string }
+) {
   const reqUrl = new URL(req.url);
   const body = await req.text();
 
@@ -41,8 +50,12 @@ async function POST(req: Request) {
     Cookie: req.headers.get("Cookie") || "",
   };
 
+  // const agent = proxy ? new HttpsProxyAgent(proxy) : undefined;
+
   const externalResponse = await axios.post(url, body, {
     headers: headers,
+    // httpAgent: agent,
+    // httpsAgent: agent,
     responseType: "stream",
   });
 

package/tsconfig.json

@@ -5,7 +5,6 @@
     "moduleResolution": "bundler",
     "jsx": "react-jsx",
     "declaration": true,
-    "rootDir": "./src",
     "outDir": "./dist",
     "strict": true,
     "lib": ["dom", "dom.iterable", "es2021"],

package/tsconfig.tsbuildinfo

@@ -1 +0,0 @@
-{"root":["./src/editorintegration.tsx","./src/editorintegrationclient.tsx","./src/handlebasicauthroute.ts","./src/index.ts","./src/useexposerefreshfunction.ts","./src/client-components/multicomponenteditor.tsx","./src/client-components/index.ts","./src/middleware/handlerequest.ts","./src/middleware/index.ts","./src/proxy/index.ts"],"version":"5.9.3"}