@alpaca-headless/alpaca-headless-nextjs 1.0.246 → 1.0.253

package/dist/editor.css

@@ -74,10 +74,6 @@
   top: 0.75rem;
 }
 
-.a-top-3\.5 {
-  top: 0.875rem;
-}
-
 .a-top-px {
   top: 1px;
 }

package/dist/esm/Editor.js

@@ -0,0 +1,13 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import "server-only";
+import { EditorClientHost } from "./editor/EditorClientHost";
+import { PreviewClientHost } from "./editor/PreviewClientHost";
+import { createClientContext } from "./renderContext";
+export function Editor({ children, context, clientBuilder, }) {
+    const data = context.page;
+    if (!data._editor && !data.previewing)
+        return _jsx(_Fragment, { children: children });
+    if (data.previewing)
+        return _jsx(PreviewClientHost, { children: children });
+    return (_jsx(EditorClientHost, { context: createClientContext(context), clientBuilder: clientBuilder, children: children }));
+}

package/dist/esm/client-components/ClientLink.js

@@ -11,7 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEditContext, usePreviewContext } from "../editor";
+import { useEditContext } from "../editor/editContext";
+import { usePreviewContext } from "../editor/previewContext";
 import LinkEditor from "./LinkEditor";
 import LinkPreview from "../components/LinkPreview";
 export function ClientLink(_a) {

package/dist/esm/client-components/MultiComponentEditor.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { EditFilterChildrenContextProvider, useEditContext, } from "../editor";
+import { EditFilterChildrenContextProvider, useEditContext, } from "../editor/editContext";
 export function MultiComponentEditor({ component, children, thumbZoom = 0.2, thumbHeight = "150px", thumbWidth = "150px", numComponentsVisibleWhenNotEditing = 1, listClassName = "", listClassNameEditing = "a-flex a-gap-2 a-flex-wrap a-items-center", }) {
     var editContext = useEditContext();
     if (!editContext)

package/dist/esm/components/Image.js

@@ -25,7 +25,7 @@ import "server-only";
 //   }
 // };
 export const Image = (_a) => {
-    var { field } = _a, otherProps = __rest(_a, ["field"]);
+    var { field, context } = _a, otherProps = __rest(_a, ["field", "context"]);
     if (!field)
         return;
     const attrs = Object.assign(Object.assign({}, field.value), otherProps);

package/dist/esm/components/Link.js

@@ -11,21 +11,19 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import "server-only";
-import { useAlpacaContext } from "../alpacaContext";
 import LinkEditor from "../client-components/LinkEditor";
 import LinkPreview from "./LinkPreview";
 export function Link(_a) {
-    var { field, children } = _a, props = __rest(_a, ["field", "children"]);
+    var { field, children, context } = _a, props = __rest(_a, ["field", "children", "context"]);
     if (field === null || field === void 0 ? void 0 : field.jsonValue) {
         field = field.jsonValue;
     }
-    const pageContext = useAlpacaContext().pageContext;
-    const editing = pageContext === null || pageContext === void 0 ? void 0 : pageContext.pageEditing;
+    const editing = context.isEditing;
     if (editing)
         return (_jsx(LinkEditor, Object.assign({ field: field }, props, { children: children })));
     if (!(field === null || field === void 0 ? void 0 : field.value))
         return;
-    if (pageContext === null || pageContext === void 0 ? void 0 : pageContext.previewing) {
+    if (context.isPreview) {
         return (_jsx(LinkPreview, Object.assign({ field: field }, props, { children: children })));
     }
     return (_jsx("a", Object.assign({ href: field.value.url }, props, { children: children })));

package/dist/esm/components/Picture.js

@@ -12,12 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import "server-only";
 import { hashImageUrl } from "../mediaProtection";
-import { getAlpacaContext } from "../alpacaContext";
 import { getRenderedPictureVariant, } from "./picture-shared";
 import { PictureEditorWrapper } from "./PictureEditorWrapper";
 export const Picture = (_a) => {
-    var _b, _c, _d, _e;
-    var { field, params, renderJsonLinkedData, renderEditButton } = _a, otherProps = __rest(_a, ["field", "params", "renderJsonLinkedData", "renderEditButton"]);
+    var _b, _c, _d;
+    var { field, params, renderJsonLinkedData, renderEditButton, context } = _a, otherProps = __rest(_a, ["field", "params", "renderJsonLinkedData", "renderEditButton", "context"]);
     if (!field)
         return null;
     if (field.jsonValue) {
@@ -75,7 +74,7 @@ export const Picture = (_a) => {
     //     }}
     //   />
     // ) : null}
-    if ((_e = getAlpacaContext().pageContext) === null || _e === void 0 ? void 0 : _e.pageEditing)
+    if (context.isEditing)
         return (_jsx(PictureEditorWrapper, { field: field, renderEditButton: renderEditButton, params: params, picture: picture }));
     else
         return picture;

package/dist/esm/components/PictureEditor.js

@@ -15,7 +15,7 @@ import React, { useEffect, useState } from "react";
 import { PictureEditorDialog } from "../editor/PictureEditorDialog";
 import { getFieldContextMenu } from "../editor/ContextMenu";
 import { isFieldActionExecuting } from "../editor/utils";
-import { useEditContext, useEditFrameContext } from "../editor";
+import { useEditContext, useEditFrameContext } from "../editor/editContext";
 export const PictureEditor = (_a) => {
     var _b, _c, _d, _e;
     var { field, params, renderEditButton, picture } = _a, otherProps = __rest(_a, ["field", "params", "renderEditButton", "picture"]);

package/dist/esm/components/PictureEditorWrapper.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import dynamic from "next/dynamic";
 const PictureEditor = dynamic(() => import("./PictureEditor").then((dnd) => dnd.PictureEditor), { ssr: false });

package/dist/esm/components/Placeholder.js

@@ -1,110 +1,134 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import "server-only";
-import { useAlpacaContext } from "../alpacaContext";
 import { PlaceholderDropZoneHost } from "../editor/PlaceholderDropZoneHost";
 import { EditFrameWrapper } from "../editor/EditFrameWrapper";
 import Slot from "./Slot";
 import { ErrorBoundary } from "react-error-boundary";
 import { ErrorFallback } from "./Error";
 import React from "react";
-export function Placeholder({ name, description, content, tag, className, mapComponent, getComponentProps, }) {
-    const data = content;
-    if (!data || !("placeholders" in data))
-        return;
-    const placeholderData = data.placeholders.find((x) => x.name == name);
-    if (!placeholderData)
-        return;
-    const context = useAlpacaContext();
-    const components = placeholderData === null || placeholderData === void 0 ? void 0 : placeholderData.components.filter((c) => c.visible).map((component, index) => {
-        if (component.componentType == "Slot")
+import { getRenderingById } from "../renderings";
+export function Placeholder({ name, description, content, tag, className, mapComponent, getComponentProps, context, }) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const data = content;
+        if (!data || !("placeholders" in data))
+            return;
+        const placeholderData = data.placeholders.find((x) => x.name == name);
+        if (!placeholderData)
+            return;
+        const componentPromises = placeholderData === null || placeholderData === void 0 ? void 0 : placeholderData.components.filter((c) => c.visible).map((component, index) => __awaiter(this, void 0, void 0, function* () {
+            if (component.componentType == "Slot")
+                return {
+                    Component: Slot,
+                    data: component,
+                    parent: data,
+                };
+            const componentType = mapComponent
+                ? mapComponent({ data: component, index })
+                : component.componentType;
+            if (!context.renderings) {
+                console.log("No components registered");
+                return {
+                    data: { name: componentType, id: "0" },
+                    Component: ComponentNotFound,
+                };
+            }
+            const reactComponent = context.renderings[componentType];
+            if (component.renderingId) {
+                const rendering = yield getRenderingById(component.renderingId);
+                if (rendering) {
+                    return {
+                        parent: data,
+                        data: component,
+                        Component: rendering,
+                    };
+                }
+            }
+            if (!reactComponent) {
+                console.log("Could not find module for component type: " + componentType);
+                return {
+                    data: { name: componentType, id: "0" },
+                    Component: ComponentNotFound,
+                };
+            }
             return {
-                Component: Slot,
-                data: component,
                 parent: data,
+                data: component,
+                Component: reactComponent,
             };
-        const componentType = mapComponent
-            ? mapComponent({ data: component, index })
-            : component.componentType;
-        if (!context.components) {
-            console.log("No components registered");
-            return {
-                data: { name: componentType, id: "0" },
-                Component: ComponentNotFound,
-            };
+        }));
+        const components = yield Promise.all(componentPromises);
+        function wrap(children) {
+            if (!tag)
+                return children;
+            if (context.isEditing || components.length > 0) {
+                return React.createElement(tag, { className }, children);
+            }
         }
-        const reactComponent = context.components[componentType];
-        if (!reactComponent) {
-            console.log("Could not find module for component type: " + componentType);
-            return {
-                data: { name: componentType, id: "0" },
-                Component: ComponentNotFound,
+        // const mappedComponents = mapComponent
+        //   ? components.map(({ Component, data, parent }, index) => ({
+        //       Component: mapComponent({
+        //         Component,
+        //         data: data as ComponentData,
+        //         index,
+        //       }),
+        //       data,
+        //       parent,
+        //     }))
+        //   : components;
+        const componentsWithProps = components.map(({ Component, data, parent }, index) => {
+            const defaultProps = {
+                component: data,
+                context,
+                index,
+                count: components.length,
             };
+            var props = getComponentProps
+                ? getComponentProps(defaultProps)
+                : defaultProps;
+            return { Component, props, data, parent };
+        });
+        if (context.isEditing) {
+            let phIndex = 0;
+            return wrap(_jsxs(_Fragment, { children: [componentsWithProps.map(({ Component, props, data, parent }) => {
+                        try {
+                            return (_jsxs(_Fragment, { children: [(!data._editor.hostingPageItem ||
+                                        data.componentType == "Slot") && (_jsx(PlaceholderDropZoneHost, { parentName: parent === null || parent === void 0 ? void 0 : parent.name, description: description, placeholder: placeholderData, index: phIndex++ }, data.id + "_zone" + phIndex)), _jsx(EditFrameWrapper, { componentId: data.id, index: phIndex, children: _jsx(Component, Object.assign({}, props)) }, data.id)] }));
+                        }
+                        catch (e) {
+                            return (_jsxs("div", { children: ["Error rendering component ", data.name, ": ", e.message] }));
+                        }
+                    }), (!data._editor.hostingPageItem ||
+                        data.componentType == "Slot") && (_jsx(PlaceholderDropZoneHost, { parentName: data === null || data === void 0 ? void 0 : data.name, description: description, placeholder: placeholderData, index: phIndex++ }, data.id + "_zone" + phIndex))] }));
         }
-        return {
-            parent: data,
-            data: component,
-            Component: reactComponent,
-        };
-    });
-    function wrap(children) {
-        if (!tag)
-            return children;
-        if (context.pageContext.pageEditing || components.length > 0) {
-            return React.createElement(tag, { className }, children);
+        else {
+            return wrap(_jsx(_Fragment, { children: components.map(({ Component, data }, index) => {
+                    var props = getComponentProps
+                        ? getComponentProps({
+                            component: data,
+                            context,
+                            index,
+                            count: components.length,
+                        })
+                        : {
+                            component: data,
+                            context,
+                            index,
+                            count: components.length,
+                        };
+                    return (_jsx(_Fragment, { children: _jsx(ErrorBoundary, { FallbackComponent: ErrorFallback, children: _createElement(Component, Object.assign({}, props, { key: data.id })) }, data.id) }));
+                }) }));
         }
-    }
-    // const mappedComponents = mapComponent
-    //   ? components.map(({ Component, data, parent }, index) => ({
-    //       Component: mapComponent({
-    //         Component,
-    //         data: data as ComponentData,
-    //         index,
-    //       }),
-    //       data,
-    //       parent,
-    //     }))
-    //   : components;
-    const componentsWithProps = components.map(({ Component, data, parent }, index) => {
-        const defaultProps = {
-            component: data,
-            index,
-            count: components.length,
-        };
-        var props = getComponentProps
-            ? getComponentProps(defaultProps)
-            : defaultProps;
-        return { Component, props, data, parent };
     });
-    if (context.pageContext.pageEditing) {
-        let phIndex = 0;
-        return wrap(_jsxs(_Fragment, { children: [componentsWithProps.map(({ Component, props, data, parent }) => {
-                    try {
-                        return (_jsxs(_Fragment, { children: [(!data._editor.hostingPageItem ||
-                                    data.componentType == "Slot") && (_jsx(PlaceholderDropZoneHost, { parentName: parent === null || parent === void 0 ? void 0 : parent.name, description: description, placeholder: placeholderData, index: phIndex++ }, data.id + "_zone" + phIndex)), _jsx(EditFrameWrapper, { componentId: data.id, index: phIndex, children: _jsx(Component, Object.assign({}, props)) }, data.id)] }));
-                    }
-                    catch (e) {
-                        return (_jsxs("div", { children: ["Error rendering component ", data.name, ": ", e.message] }));
-                    }
-                }), (!data._editor.hostingPageItem ||
-                    data.componentType == "Slot") && (_jsx(PlaceholderDropZoneHost, { parentName: data === null || data === void 0 ? void 0 : data.name, description: description, placeholder: placeholderData, index: phIndex++ }, data.id + "_zone" + phIndex))] }));
-    }
-    else {
-        return wrap(_jsx(_Fragment, { children: components.map(({ Component, data }, index) => {
-                var props = getComponentProps
-                    ? getComponentProps({
-                        component: data,
-                        index,
-                        count: components.length,
-                    })
-                    : {
-                        component: data,
-                        index,
-                        count: components.length,
-                    };
-                return (_jsx(_Fragment, { children: _jsx(ErrorBoundary, { FallbackComponent: ErrorFallback, children: _createElement(Component, Object.assign({}, props, { key: data.id })) }, data.id) }));
-            }) }));
-    }
 }
 function ComponentNotFound({ component }) {
     return (_jsxs("div", { style: {

package/dist/esm/components/RichText.js

@@ -12,10 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import "server-only";
 import React from "react";
-import { useAlpacaContext } from "../alpacaContext";
 import { RichTextEditorWrapper } from "./RichTextEditorWrapper";
 export function RichText(_a) {
-    var { field, tag, editable } = _a, props = __rest(_a, ["field", "tag", "editable"]);
+    var { field, tag, editable, context } = _a, props = __rest(_a, ["field", "tag", "editable", "context"]);
     if (!field)
         return;
     if (field.jsonValue) {
@@ -24,7 +23,7 @@ export function RichText(_a) {
     const internalProps = Object.assign(Object.assign({}, props), { dangerouslySetInnerHTML: {
             __html: field.value,
         } });
-    if (useAlpacaContext().pageContext.pageEditing)
+    if (context.isEditing)
         return (_jsx(RichTextEditorWrapper, Object.assign({ field: field, tag: tag }, props)));
     return React.createElement(tag || "div", Object.assign(props, internalProps));
 }

package/dist/esm/components/Slot.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import "server-only";
 import { Placeholder } from "./Placeholder";
-export default function Section({ component }) {
-    return (_jsx(_Fragment, { children: _jsx(Placeholder, { name: "ph-slot-content", content: component }) }));
+export default function Section({ component, context, }) {
+    return (_jsx(_Fragment, { children: _jsx(Placeholder, { name: "ph-slot-content", content: component, context: context }) }));
 }

package/dist/esm/components/Text.js

@@ -12,16 +12,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import "server-only";
 import React from "react";
-import { useAlpacaContext } from "../alpacaContext";
 import { TextEditorWrapper } from "./TextEditorWrapper";
 export function Text(_a) {
-    var { field, tag, editable } = _a, props = __rest(_a, ["field", "tag", "editable"]);
+    var { field, tag, editable, context } = _a, props = __rest(_a, ["field", "tag", "editable", "context"]);
     if (!field)
         return;
     if (field.jsonValue) {
         field = field.jsonValue;
     }
-    if (useAlpacaContext().pageContext.pageEditing) {
+    if (context.isEditing) {
         return (_jsx("div", { children: _jsx(TextEditorWrapper, Object.assign({ field: field, tag: tag }, props)) }));
     }
     else

package/dist/esm/components/Translate.js

@@ -1,12 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "server-only";
-import { useAlpacaContext } from "../alpacaContext";
-import dynamic from "next/dynamic";
-const TranslateEditor = dynamic(() => import("./TranslateEditor").then((dnd) => dnd.TranslateEditor), { ssr: false });
-export function Translate({ text }) {
-    const context = useAlpacaContext();
+import { TranslateEditorWrapper } from "./TranslateEditorWrapper";
+export function Translate({ text, context, }) {
     const dictionary = context.dictionary;
-    if (context.pageContext.pageEditing)
-        return _jsx(TranslateEditor, { text: text });
+    if (context.isEditing)
+        return _jsx(TranslateEditorWrapper, { text: text });
     return dictionary[text] || text;
 }

package/dist/esm/components/TranslateEditorWrapper.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from "next/dynamic";
+const TranslateEditor = dynamic(() => import("./TranslateEditor").then((dnd) => dnd.TranslateEditor), { ssr: false });
+export function TranslateEditorWrapper({ text }) {
+    return _jsx(TranslateEditor, { text: text });
+}

package/dist/esm/editor/ContentTree.js

@@ -10,15 +10,15 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ProgressSpinner } from "primereact/progressspinner";
-import { useEditContext } from ".";
+import { useEditContext } from "./editContext";
 import { Tree, } from "primereact/tree";
 import { useEffect, useRef, useState } from "react";
 import { getChildren } from "./services/contentService";
 import { ContextMenu } from "primereact/contextmenu";
 import { createItem, loadInsertOptions } from "./services/editService";
-import ItemNameDialog from "./ItemNameDialog";
+import ItemNameDialog from "./ui/ItemNameDialog";
 import { getDeleteItemCommand } from "./itemCommands";
-export default function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionMode, selectedItemIds, rootItemId, onSelectionChange, filter, templateIds, className, includeEmbeddedItems, onDoubleClick, secondarySelectedItemId, }) {
+export default function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionMode, selectedItemIds, rootItemId, onSelectionChange, filter, templateIds, className, includeEmbeddedItems, onDoubleClick, secondarySelectedItemId, selectPagesOnly, }) {
     const [treeNodes, setTreeNodes] = useState([]);
     const [selectedKeys, setSelectedKeys] = useState();
     const [expandedKeys, setExpandedKeys] = useState();
@@ -59,6 +59,7 @@ export default function ContentTree({ isDraggable, dragStart, dragEnd, expandIdP
             label: x.name,
             iconUrl: x.icon,
             isDraggable: isDraggable && isDraggable(x),
+            selectable: !selectPagesOnly || x.hasLayout,
             data: x,
             leaf: !x.hasChildren,
             parent: node,
@@ -116,9 +117,14 @@ export default function ContentTree({ isDraggable, dragStart, dragEnd, expandIdP
         if (node.url) {
             label = (_jsx("a", { onDragStart: (e) => e.preventDefault(), href: node.url, className: "a-text-primary hover:a-underline a-font-semibold", children: node.label }));
         }
+        const getNodeCursor = (node) => {
+            if (node.isDraggable)
+                return "a-cursor-grab";
+            return "";
+        };
         return (_jsxs("span", { onDragStart: (event) => {
                 handleDragStart(event, node.data);
-            }, onDragEnd: handleDragEnd, draggable: node.isDraggable, className: `a-flex a-items-center a-gap-2 ${node.isDraggable ? "a-cursor-grab" : ""} ${options.className}   ${node.data.id == secondarySelectedItemId ? "a-selected-secondary" : ""}`, children: [_jsx("img", { src: node.iconUrl, style: { height: "16px" }, width: "16", height: "16", onDragStart: (e) => e.preventDefault() }), label, node.loading && (_jsx(ProgressSpinner, { style: { width: "20px", height: "20px" } }))] }));
+            }, onDragEnd: handleDragEnd, draggable: node.isDraggable, className: `a-flex a-items-center a-gap-2 ${getNodeCursor(node)} ${options.className} ${node.data.id == secondarySelectedItemId ? "a-selected-secondary" : ""}`, children: [_jsx("img", { src: node.iconUrl, style: { height: "16px" }, width: "16", height: "16", onDragStart: (e) => e.preventDefault() }), label, node.loading && (_jsx(ProgressSpinner, { style: { width: "20px", height: "20px" } }))] }));
     };
     function handleDragStart(event, item) {
         if (dragStart)

package/dist/esm/editor/DictionaryEditor.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { DataTable } from "primereact/datatable";
 import { Column } from "primereact/column";
-import { useEditContext } from ".";
+import { useEditContext } from "./editContext";
 import { SingleLineText } from "./fieldTypes/SingleLineText";
 export function DictionaryEditor({}) {
     const context = useEditContext();

package/dist/esm/editor/EditFrame.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { EditFrameContextProvider, useEditContext, useEditFilterChildrenContext, } from ".";
+import { EditFrameContextProvider, useEditContext, useEditFilterChildrenContext, } from "./editContext";
 import React from "react";
 import { showComponentContextMenu } from "./ContextMenu";
 import { ErrorBoundary } from "react-error-boundary";