@alpaca-headless/alpaca-headless-nextjs 1.0.4458 → 1.0.4459

package/dist/client-components/MultiComponentEditor.d.ts

@@ -7,6 +7,10 @@ interface MultiComponentEditorProps {
     thumbZoom?: number;
     thumbWidth?: string;
     thumbHeight?: string;
+    onSelectedComponentChange?: (payload: {
+        selectedId: string | null;
+        selectedIndex: number;
+    }) => void;
 }
-export declare function MultiComponentEditor({ children, component, placeholderName, thumbZoom, thumbWidth, thumbHeight, }: MultiComponentEditorProps): import("react/jsx-runtime").JSX.Element | undefined;
+export declare function MultiComponentEditor({ children, component, placeholderName, thumbZoom, thumbWidth, thumbHeight, onSelectedComponentChange, }: MultiComponentEditorProps): import("react/jsx-runtime").JSX.Element | undefined;
 export {};

package/dist/client-components/MultiComponentEditor.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState, useEffect, Fragment, useCallback, } from "react";
-export function MultiComponentEditor({ children, component, placeholderName, thumbZoom, thumbWidth, thumbHeight, }) {
+import React, { Fragment, useCallback, useEffect, useState, } from "react";
+export function MultiComponentEditor({ children, component, placeholderName, thumbZoom, thumbWidth, thumbHeight, onSelectedComponentChange, }) {
+    var _a, _b;
     const [selectedId, setSelectedId] = useState(null);
     const placeholder = component.placeholders.find((x) => x.name === placeholderName);
     if (!placeholder)
@@ -21,9 +22,23 @@ export function MultiComponentEditor({ children, component, placeholderName, thu
         };
     }, []);
     const selectedIndex = components.findIndex((x) => x.id === selectedId);
+    const resolvedIndex = selectedIndex < 0 ? 0 : selectedIndex;
+    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);
+        }
+    }, [resolvedId, selectedId]);
+    useEffect(() => {
+        onSelectedComponentChange === null || onSelectedComponentChange === void 0 ? void 0 : onSelectedComponentChange({
+            selectedId: resolvedId,
+            selectedIndex: resolvedIndex,
+        });
+    }, [resolvedId, resolvedIndex, onSelectedComponentChange]);
     const childrenArray = React.Children.toArray(children);
     const filteredChildren = childrenArray.filter((child) => child.type !== "script");
-    return (_jsxs(_Fragment, { children: [filteredChildren[selectedIndex < 0 ? 0 : selectedIndex], _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 })] })] }));
+    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 = {};
@@ -36,7 +51,7 @@ export function MultiComponentEditor({ children, component, placeholderName, thu
         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 component = components[index];
         return (_jsxs(Fragment, { children: [_jsxs("div", { className: "a-editor-mce-thumbnail" +
-                        (index === selectedIndex ? " a-editor-mce-thumbnail--selected" : ""), style: style, onClick: () => {
+                        (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));
     }

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.4458",
+  "version": "1.0.4459",
   "type": "module",
   "description": "Alpaca Headless",
   "main": "dist/index.js",
@@ -44,18 +44,20 @@
   },
   "homepage": "https://github.com/yourusername/your-module-name#readme",
   "devDependencies": {
-    "@types/node": "^25.5.0",
-    "@types/react": "19.2.14",
-    "eslint": "^9.39.4",
-    "eslint-config-next": "16.2.1",
-    "typescript": "5.9.3"
+    "@types/node": "^20.14.2",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
+    "eslint": "^9.22.0",
+    "eslint-config-next": "16.0.10",
+    "typescript": "^5"
   },
   "dependencies": {
-    "@alpaca-headless/alpaca-headless": "^1.0.4458",
-    "axios": "^1.13.6",
-    "next": "16.2.1",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
+    "@alpaca-headless/alpaca-headless": "^1.0.4459",
+    "axios": "^1.8.1",
+    "https-proxy-agent": "^7.0.4",
+    "next": "16.0.10",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "react-uuid": "^2.0.0"
   }
 }

package/src/client-components/MultiComponentEditor.tsx

@@ -2,12 +2,12 @@
 import { ComponentData } from "@alpaca-headless/alpaca-headless";
 
 import React, {
-  useState,
+  Fragment,
   ReactElement,
   ReactNode,
-  useEffect,
-  Fragment,
   useCallback,
+  useEffect,
+  useState,
 } from "react";
 
 interface MultiComponentEditorProps {
@@ -17,6 +17,10 @@ interface MultiComponentEditorProps {
   thumbZoom?: number;
   thumbWidth?: string;
   thumbHeight?: string;
+  onSelectedComponentChange?: (payload: {
+    selectedId: string | null;
+    selectedIndex: number;
+  }) => void;
 }
 
 export function MultiComponentEditor({
@@ -26,6 +30,7 @@ export function MultiComponentEditor({
   thumbZoom,
   thumbWidth,
   thumbHeight,
+  onSelectedComponentChange,
 }: MultiComponentEditorProps) {
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const placeholder = component.placeholders.find(
@@ -55,6 +60,22 @@ export function MultiComponentEditor({
   const selectedIndex = components.findIndex(
     (x: ComponentData) => x.id === selectedId
   );
+  const resolvedIndex = selectedIndex < 0 ? 0 : selectedIndex;
+  const resolvedComponent = components[resolvedIndex] ?? null;
+  const resolvedId = resolvedComponent?.id ?? null;
+
+  useEffect(() => {
+    if (resolvedId !== null && selectedId !== resolvedId) {
+      setSelectedId(resolvedId);
+    }
+  }, [resolvedId, selectedId]);
+
+  useEffect(() => {
+    onSelectedComponentChange?.({
+      selectedId: resolvedId,
+      selectedIndex: resolvedIndex,
+    });
+  }, [resolvedId, resolvedIndex, onSelectedComponentChange]);
 
   const childrenArray = React.Children.toArray(children) as ReactElement[];
 
@@ -64,7 +85,7 @@ export function MultiComponentEditor({
 
   return (
     <>
-      {filteredChildren[selectedIndex < 0 ? 0 : selectedIndex]}
+      {filteredChildren[resolvedIndex]}
       <div className="a-editor-mce">
         <script
           data-placeholder-start={placeholder.key}
@@ -100,7 +121,7 @@ export function MultiComponentEditor({
         <div
           className={
             "a-editor-mce-thumbnail" +
-            (index === selectedIndex ? " a-editor-mce-thumbnail--selected" : "")
+            (index === resolvedIndex ? " a-editor-mce-thumbnail--selected" : "")
           }
           style={style}
           onClick={() => {

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"}