@alpaca-headless/alpaca-headless-nextjs 1.0.27 → 1.0.128

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

@@ -0,0 +1,36 @@
+"use strict";
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClientLink = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const __1 = require("..");
+const LinkEditor_1 = __importDefault(require("../components/LinkEditor"));
+function ClientLink(_a) {
+    var { field, children } = _a, props = __rest(_a, ["field", "children"]);
+    if (!field)
+        return;
+    if (field.jsonValue) {
+        field = field.jsonValue;
+    }
+    if (!field.value)
+        return;
+    const editing = (0, __1.useEditContext)();
+    if (editing)
+        return ((0, jsx_runtime_1.jsx)(LinkEditor_1.default, Object.assign({ field: field }, props, { children: children })));
+    return ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: field.value.url }, props, { children: children })));
+}
+exports.ClientLink = ClientLink;

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

@@ -0,0 +1,26 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiComponentEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const __1 = require("..");
+function MultiComponentEditor({ component, children, thumbZoom = 0.2, thumbHeight = "150px", thumbWidth = "150px", numComponentsVisibleWhenNotEditing = 1, }) {
+    var editContext = (0, __1.useEditContext)();
+    if (!editContext)
+        return null;
+    const style = {
+        "--a-mce-thumb-zoom": thumbZoom,
+        "--a-mce-thumb-width": thumbWidth,
+        "--a-mce-thumb-height": thumbHeight,
+    };
+    const filterChildCallback = ({ component, index, }) => {
+        var _a;
+        return index > numComponentsVisibleWhenNotEditing &&
+            ((_a = editContext === null || editContext === void 0 ? void 0 : editContext.selection) === null || _a === void 0 ? void 0 : _a.indexOf(component === null || component === void 0 ? void 0 : component.id)) === -1;
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "a-mce", style: style, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex a-mce-items gap-2 flex-wrap items-center", children: [children, (0, jsx_runtime_1.jsx)("div", { onClick: (ev) => {
+                            editContext === null || editContext === void 0 ? void 0 : editContext.setSelectedForInsertion(component.id);
+                            ev.stopPropagation();
+                        }, children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-plus-circle text-3xl cursor-pointer" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "a-mce-selected", children: (0, jsx_runtime_1.jsx)(__1.EditFilterChildrenContextProvider, { value: { filterChildCallback }, children: children }) })] }));
+}
+exports.MultiComponentEditor = MultiComponentEditor;

package/dist/cjs/client-components/index.js

@@ -0,0 +1,19 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ClientLink"), exports);
+__exportStar(require("./MultiComponentEditor"), exports);

package/dist/cjs/components/Link.js

@@ -30,7 +30,7 @@ function Link(_a) {
         return;
     const editing = (_b = (0, __1.useAlpacaContext)().pageContext) === null || _b === void 0 ? void 0 : _b.pageEditing;
     if (editing)
-        return ((0, jsx_runtime_1.jsx)(LinkEditor_1.default, Object.assign({ field: field, children: children }, props)));
+        return ((0, jsx_runtime_1.jsx)(LinkEditor_1.default, Object.assign({ field: field }, props, { children: children })));
     return ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: field.value.url }, props, { children: children })));
 }
 exports.Link = Link;

package/dist/cjs/components/LinkEditor.js

@@ -13,10 +13,56 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const LinkEditorDialog_1 = require("../editor/LinkEditorDialog");
+const __1 = require("..");
 function LinkEditor(_a) {
     var { field, children } = _a, props = __rest(_a, ["field", "children"]);
+    const [showDialog, setShowDialog] = (0, react_1.useState)(false);
+    const [link, setLink] = (0, react_1.useState)();
+    const editContext = (0, __1.useEditContext)();
+    if (!editContext)
+        return;
+    (0, react_1.useEffect)(() => {
+        var _a;
+        setLink({
+            url: field.value.url,
+            target: field.value.target,
+            targetItemLongId: field.value.targetItemLongId,
+            type: field.value.type,
+            itemId: (_a = field.value.targetItemLongId) === null || _a === void 0 ? void 0 : _a.split("/").pop(),
+            queryString: field.value.queryString,
+        });
+    }, [field]);
     if (!field)
         return;
-    return ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: field.value.url }, props, { onClick: (e) => e.preventDefault(), children: children })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("a", Object.assign({ href: field.value.url }, props, { onClick: (e) => {
+                    editContext.setFocusedField(field);
+                    e.preventDefault();
+                }, children: [children, " ", (0, jsx_runtime_1.jsx)("i", { onClick: (e) => {
+                            setShowDialog(true);
+                            editContext.setFocusedField(field);
+                            e.preventDefault();
+                        }, className: "pi pi-link a-cursor-pointer" })] })), showDialog && ((0, jsx_runtime_1.jsx)(LinkEditorDialog_1.LinkEditorDialog, { linkValue: link || { type: "internal" }, onOk: (link) => {
+                    var _a, _b;
+                    const xml = link.type == "internal"
+                        ? '<link linktype="internal" querystring="' +
+                            ((_a = link.queryString) !== null && _a !== void 0 ? _a : "") +
+                            '" id="' +
+                            link.itemId +
+                            '" target="' +
+                            link.target +
+                            '" />'
+                        : '<link linktype="external" querystring="' +
+                            ((_b = link.queryString) !== null && _b !== void 0 ? _b : "") +
+                            ' url="' +
+                            link.url +
+                            '" target="' +
+                            link.target +
+                            '" />';
+                    editContext === null || editContext === void 0 ? void 0 : editContext.editField({ field, rawValue: xml });
+                    editContext === null || editContext === void 0 ? void 0 : editContext.requestRefresh("immediate");
+                    setShowDialog(false);
+                }, onCancel: () => setShowDialog(false) }))] }));
 }
 exports.default = LinkEditor;

package/dist/cjs/components/Picture.js

@@ -30,22 +30,24 @@ const PictureEditor_1 = require("./PictureEditor");
 //   }
 // };
 const Picture = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    var { field, imageParams, sources, defaultVariant, renderJsonLinkedData } = _a, otherProps = __rest(_a, ["field", "imageParams", "sources", "defaultVariant", "renderJsonLinkedData"]);
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var { field, imageParams, sources, defaultVariant, renderJsonLinkedData, renderEditButton } = _a, otherProps = __rest(_a, ["field", "imageParams", "sources", "defaultVariant", "renderJsonLinkedData", "renderEditButton"]);
     if (!field)
         return null;
     if (field.jsonValue) {
         field = field.jsonValue;
     }
-    if ((_b = (0, __1.useAlpacaContext)().pageContext) === null || _b === void 0 ? void 0 : _b.pageEditing)
-        return (0, jsx_runtime_1.jsx)(PictureEditor_1.PictureEditor, Object.assign({ field: field }, otherProps));
-    const variants = (_c = field.value) === null || _c === void 0 ? void 0 : _c.variants;
-    const img = (_e = (_d = field.value) === null || _d === void 0 ? void 0 : _d.variants.find((x) => x.name.toUpperCase() == (defaultVariant === null || defaultVariant === void 0 ? void 0 : defaultVariant.toUpperCase()))) !== null && _e !== void 0 ? _e : (_f = field.value) === null || _f === void 0 ? void 0 : _f.variants[0];
+    if (!((_b = field.value) === null || _b === void 0 ? void 0 : _b.variants))
+        return;
+    if ((_c = (0, __1.useAlpacaContext)().pageContext) === null || _c === void 0 ? void 0 : _c.pageEditing)
+        return ((0, jsx_runtime_1.jsx)(PictureEditor_1.PictureEditor, Object.assign({ field: field, renderEditButton: renderEditButton }, otherProps)));
+    const variants = (_d = field.value) === null || _d === void 0 ? void 0 : _d.variants;
+    const img = (_f = (_e = field.value) === null || _e === void 0 ? void 0 : _e.variants.find((x) => x.name.toUpperCase() == (defaultVariant === null || defaultVariant === void 0 ? void 0 : defaultVariant.toUpperCase()))) !== null && _f !== void 0 ? _f : (_g = field.value) === null || _g === void 0 ? void 0 : _g.variants[0];
     const attrs = Object.assign({ src: img === null || img === void 0 ? void 0 : img.src }, otherProps);
     const video = img === null || img === void 0 ? void 0 : img.videoUrl;
     const videoAttr = Object.assign({ src: video }, otherProps);
     if (!(sources === null || sources === void 0 ? void 0 : sources.length)) {
-        return (0, jsx_runtime_1.jsx)("img", Object.assign({}, attrs, { alt: (_g = field.value) === null || _g === void 0 ? void 0 : _g.alt }));
+        return (0, jsx_runtime_1.jsx)("img", Object.assign({}, attrs, { alt: (_h = field.value) === null || _h === void 0 ? void 0 : _h.alt }));
     }
     else {
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("picture", { children: [sources === null || sources === void 0 ? void 0 : sources.map((source) => {
@@ -100,21 +102,21 @@ const Picture = (_a) => {
                                 }
                             }
                             return ((0, jsx_runtime_1.jsx)("source", { srcSet: srcSet, media: source.media }, source.variant + source.media));
-                        }), (0, jsx_runtime_1.jsx)("img", Object.assign({}, attrs, { alt: (_h = field.value) === null || _h === void 0 ? void 0 : _h.alt }))] }), renderJsonLinkedData && !video ? ((0, jsx_runtime_1.jsx)("script", { type: "application/ld+json", dangerouslySetInnerHTML: {
+                        }), (0, jsx_runtime_1.jsx)("img", Object.assign({}, attrs, { alt: (_j = field.value) === null || _j === void 0 ? void 0 : _j.alt }))] }), renderJsonLinkedData && !video ? ((0, jsx_runtime_1.jsx)("script", { type: "application/ld+json", dangerouslySetInnerHTML: {
                         __html: JSON.stringify({
                             "@context": "http://schema.org",
                             "@type": "ImageObject",
                             image: img === null || img === void 0 ? void 0 : img.src,
-                            description: (_j = field.value) === null || _j === void 0 ? void 0 : _j.alt,
-                            name: (_k = field.value) === null || _k === void 0 ? void 0 : _k.name,
+                            description: (_k = field.value) === null || _k === void 0 ? void 0 : _k.alt,
+                            name: (_l = field.value) === null || _l === void 0 ? void 0 : _l.name,
                         }),
                     } })) : null, video && (0, jsx_runtime_1.jsx)("video", Object.assign({}, videoAttr)), renderJsonLinkedData && video ? ((0, jsx_runtime_1.jsx)("script", { type: "application/ld+json", dangerouslySetInnerHTML: {
                         __html: JSON.stringify({
                             "@context": "http://schema.org",
                             "@type": "VideoObject",
                             contentUrl: img === null || img === void 0 ? void 0 : img.src,
-                            description: (_l = field.value) === null || _l === void 0 ? void 0 : _l.alt,
-                            name: (_m = field.value) === null || _m === void 0 ? void 0 : _m.name,
+                            description: (_m = field.value) === null || _m === void 0 ? void 0 : _m.alt,
+                            name: (_o = field.value) === null || _o === void 0 ? void 0 : _o.name,
                         }),
                     } })) : null] }));
     }

package/dist/cjs/components/PictureEditor.js

@@ -17,52 +17,33 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Picture_1 = require("./Picture");
 const __1 = require("..");
-const MediaSelector_1 = require("../editor/MediaSelector");
-const dialog_1 = require("primereact/dialog");
-const button_1 = require("primereact/button");
+const PictureEditorDialog_1 = require("../editor/PictureEditorDialog");
 const PictureEditor = (_a) => {
     var _b, _c;
-    var { field, imageParams, sources, defaultVariant, renderJsonLinkedData } = _a, otherProps = __rest(_a, ["field", "imageParams", "sources", "defaultVariant", "renderJsonLinkedData"]);
+    var { field, imageParams, sources, defaultVariant, renderEditButton } = _a, otherProps = __rest(_a, ["field", "imageParams", "sources", "defaultVariant", "renderEditButton"]);
     const editContext = (0, __1.useEditContext)();
-    const [mediaSelectorVisible, setMediaSelectorVisible] = (0, react_1.useState)(false);
     const [editorVisible, setEditorVisible] = (0, react_1.useState)(false);
-    const [selectedVariant, setSelectedVariant] = (0, react_1.useState)();
     if (!editContext)
         return;
-    function imageSelected(imageId) {
-        if (!selectedVariant)
-            return;
-        const value = (field === null || field === void 0 ? void 0 : field.rawValue)
-            ? JSON.parse(field === null || field === void 0 ? void 0 : field.rawValue)
-            : { variants: [] };
-        const selected = value.variants.find((x) => x.name == selectedVariant.name);
-        if (!selected) {
-            value.variants.push({
-                name: selectedVariant.name,
-                mediaId: imageId,
-            });
-        }
-        else {
-            selected.mediaId = imageId;
-        }
-        console.log(imageId);
-        console.log(JSON.stringify(value));
-        if (field) {
-            editContext === null || editContext === void 0 ? void 0 : editContext.editField(field, JSON.stringify(value), false);
-            editContext === null || editContext === void 0 ? void 0 : editContext.requestRefresh("immediate");
-        }
-    }
+    const editFrameContext = (0, __1.useEditFrameContext)();
+    if (!editFrameContext)
+        return;
     (0, react_1.useEffect)(() => {
-        var _a;
-        setSelectedVariant((_a = field === null || field === void 0 ? void 0 : field.value) === null || _a === void 0 ? void 0 : _a.variants[0]);
+        if (renderEditButton && editFrameContext.componentId === (field === null || field === void 0 ? void 0 : field.item.id)) {
+            editFrameContext.setCustomButtons([
+                ...editFrameContext.customButtons,
+                {
+                    icon: "pi pi-image",
+                    onClick: () => setEditorVisible(true),
+                    tooltip: "Edit " + (field === null || field === void 0 ? void 0 : field.name),
+                },
+            ]);
+        }
     }, []);
-    console.log("Picture Field: " + JSON.stringify(field));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MediaSelector_1.MediaSelector, { visible: mediaSelectorVisible, onHide: () => setMediaSelectorVisible(false), onMediaSelected: imageSelected }), (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { header: "Edit picture", visible: editorVisible, style: { width: "50vw", height: "50vh" }, onHide: () => setEditorVisible(false), children: (0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-gap-1 a-flex-col a-justify a-h-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "a-flex-1 a-flex a-gap-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "a-flex a-flex-col a-gap-1 a-h-full a-border-r", children: (_c = (_b = field === null || field === void 0 ? void 0 : field.value) === null || _b === void 0 ? void 0 : _b.variants) === null || _c === void 0 ? void 0 : _c.map((variant) => ((0, jsx_runtime_1.jsxs)("div", { onClick: () => setSelectedVariant(variant), children: [(0, jsx_runtime_1.jsxs)("div", { className: "a-h-24 a-w-24 a-border a-relative" +
-                                                    (selectedVariant == variant ? " a-shadow-xl " : ""), children: [variant.src && (0, jsx_runtime_1.jsx)("img", { src: variant.thumbSrc }), (0, jsx_runtime_1.jsx)("div", { className: "a-absolute a-top-0 a-right-0 ", children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-pencil a-m-1 a-cursor-pointer", onClick: () => setMediaSelectorVisible(true) }) })] }, variant.name), (0, jsx_runtime_1.jsx)("div", { children: variant.name }), (0, jsx_runtime_1.jsx)("div", { children: variant.aspectRatioText })] }))) }), (0, jsx_runtime_1.jsx)("div", { className: "a-flex-1 a-relative", children: (0, jsx_runtime_1.jsx)("div", { className: "a-absolute a-inset-0 a-overflow-auto", children: selectedVariant && (0, jsx_runtime_1.jsx)("img", { src: selectedVariant.src }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-justify-end a-gap-3 a-mt-3", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => {
-                                        setEditorVisible(false);
-                                    }, children: "Ok" }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => {
-                                        setEditorVisible(false);
-                                        editContext === null || editContext === void 0 ? void 0 : editContext.requestRefresh("immediate");
-                                    }, children: "Cancel" })] })] }) }), (0, jsx_runtime_1.jsx)("span", Object.assign({}, otherProps, { onClick: () => setEditorVisible(true), className: "a-cursor-pointer", children: (0, jsx_runtime_1.jsx)(Picture_1.Picture, { field: field, imageParams: imageParams, sources: sources }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({}, otherProps, { onClick: (e) => {
+                    if (editFrameContext.isSelected && !e.ctrlKey && !e.altKey)
+                        setEditorVisible(true);
+                    editContext.setFocusedField(field);
+                }, className: "a-cursor-pointer", children: [(0, jsx_runtime_1.jsx)(Picture_1.Picture, { field: field, imageParams: imageParams, sources: sources }), !((_c = (_b = field === null || field === void 0 ? void 0 : field.value) === null || _b === void 0 ? void 0 : _b.variants) === null || _c === void 0 ? void 0 : _c.find((x) => x.src)) && ((0, jsx_runtime_1.jsx)("div", { className: "pi pi-image a-text-6xl a-text-gray-300" }))] })), editorVisible && ((0, jsx_runtime_1.jsx)(PictureEditorDialog_1.PictureEditorDialog, { field: field, onCancel: () => setEditorVisible(false), onOk: () => setEditorVisible(false) }))] }));
 };
 exports.PictureEditor = PictureEditor;

package/dist/cjs/components/Placeholder.js

@@ -13,6 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Placeholder = void 0;
+const react_1 = require("react");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const EditFrame_1 = require("../editor/EditFrame");
 const __1 = require("..");
@@ -20,7 +21,8 @@ const PlaceholderDropZoneHost_1 = require("../editor/PlaceholderDropZoneHost");
 const Slot_1 = __importDefault(require("./Slot"));
 const react_error_boundary_1 = require("react-error-boundary");
 const Error_1 = require("./Error");
-function Placeholder({ name, content, }) {
+const react_2 = __importDefault(require("react"));
+function Placeholder({ name, content, tag, className, mapComponent, getComponentProps, }) {
     return __awaiter(this, void 0, void 0, function* () {
         const data = yield content;
         if (!data || !("placeholders" in data))
@@ -30,9 +32,13 @@ function Placeholder({ name, content, }) {
             return;
         const context = (0, __1.useAlpacaContext)();
         const loader = context.componentModuleLoader;
-        const promises = placeholderData === null || placeholderData === void 0 ? void 0 : placeholderData.components.map((component) => __awaiter(this, void 0, void 0, function* () {
+        const promises = placeholderData === null || placeholderData === void 0 ? void 0 : placeholderData.components.filter((c) => c.visible).map((component) => __awaiter(this, void 0, void 0, function* () {
             if (component.componentType == "Slot")
-                return { Component: Slot_1.default, data: component, parent: data };
+                return {
+                    Component: Slot_1.default,
+                    data: component,
+                    parent: data,
+                };
             let module = null;
             try {
                 module = yield loader(component.componentType);
@@ -47,21 +53,57 @@ function Placeholder({ name, content, }) {
                     Component: ComponentNotFound,
                 };
             }
-            return { parent: data, data: component, Component: module.default };
+            return {
+                parent: data,
+                data: component,
+                Component: module.default,
+            };
         }));
         const components = yield Promise.all(promises);
+        function wrap(children) {
+            if (!tag)
+                return children;
+            if (context.pageContext.pageEditing || components.length > 0) {
+                return react_2.default.createElement(tag, { className }, children);
+            }
+        }
+        const mappedComponents = mapComponent
+            ? components.map(({ Component, data, parent }, index) => ({
+                Component: mapComponent({
+                    Component,
+                    data: data,
+                    index,
+                }),
+                data,
+                parent,
+            }))
+            : components;
+        const componentsWithProps = mappedComponents.map(({ Component, data, parent }, index) => {
+            var props = getComponentProps
+                ? getComponentProps({ component: data, index })
+                : { component: data, index };
+            return { Component, props, data, parent };
+        });
         if (context.pageContext.pageEditing) {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [components.map(({ Component, data, parent }, index) => {
+            let phIndex = 0;
+            return wrap((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [componentsWithProps.map(({ Component, props, data, parent }) => {
                         try {
-                            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PlaceholderDropZoneHost_1.PlaceholderDropZoneHost, { parentName: parent === null || parent === void 0 ? void 0 : parent.name, placeholder: placeholderData, index: index + 1 }), (0, jsx_runtime_1.jsx)(EditFrame_1.EditFrame, { componentId: data.id, children: (0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { FallbackComponent: Error_1.ErrorFallbackWithDetails, children: (0, jsx_runtime_1.jsx)(Component, { component: data }) }) }, data.id)] }));
+                            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(!data.hostingPageItem ||
+                                        data.componentType == "Slot") && ((0, jsx_runtime_1.jsx)(PlaceholderDropZoneHost_1.PlaceholderDropZoneHost, { parentName: parent === null || parent === void 0 ? void 0 : parent.name, placeholder: placeholderData, index: phIndex++ }, data.id + "_zone" + phIndex)), (0, jsx_runtime_1.jsx)(EditFrame_1.EditFrame, { componentId: data.id, index: phIndex, children: (0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { FallbackComponent: Error_1.ErrorFallbackWithDetails, children: (0, jsx_runtime_1.jsx)(Component, Object.assign({}, props)) }) }, data.id)] }));
                         }
                         catch (e) {
                             return ((0, jsx_runtime_1.jsxs)("div", { children: ["Error rendering component ", data.name, ": ", e.message] }));
                         }
-                    }), (0, jsx_runtime_1.jsx)(PlaceholderDropZoneHost_1.PlaceholderDropZoneHost, { parentName: data === null || data === void 0 ? void 0 : data.name, placeholder: placeholderData, index: components.length + 1 })] }));
+                    }), (!data.hostingPageItem ||
+                        data.componentType == "Slot") && ((0, jsx_runtime_1.jsx)(PlaceholderDropZoneHost_1.PlaceholderDropZoneHost, { parentName: data === null || data === void 0 ? void 0 : data.name, placeholder: placeholderData, index: phIndex++ }, data.id + "_zone" + phIndex))] }));
         }
         else
-            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: components.map(({ Component, data }) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { FallbackComponent: Error_1.ErrorFallback, children: (0, jsx_runtime_1.jsx)(Component, { component: data }) }) }))) }));
+            return wrap((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: mappedComponents.map(({ Component, data }, index) => {
+                    var props = getComponentProps
+                        ? getComponentProps({ component: data, index })
+                        : { component: data, index };
+                    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { FallbackComponent: Error_1.ErrorFallback, children: (0, react_1.createElement)(Component, Object.assign({}, props, { key: data.id })) }, data.id) }));
+                }) }));
     });
 }
 exports.Placeholder = Placeholder;
@@ -72,5 +114,5 @@ function ComponentNotFound({ component }) {
             fontSize: 18,
             padding: 10,
             border: "3px solid red",
-        }, children: ["Component not found: ", component.name, " "] }));
+        }, children: ["Component not found: ", component.name] }));
 }

package/dist/cjs/components/RichText.js

@@ -38,7 +38,7 @@ function RichText(_a) {
         }
         const internalProps = Object.assign(Object.assign({}, props), { dangerouslySetInnerHTML: {
                 __html: field.value,
-            }, editable: editable, contentEditable: true, "data-test": "test", placeholder: "[" + field.name + "]" });
+            } });
         if ((0, __1.useAlpacaContext)().pageContext.pageEditing)
             return (0, jsx_runtime_1.jsx)(RichTextEditor_1.RichTextEditor, Object.assign({ field: field, tag: tag }, props));
         return react_1.default.createElement(tag || "div", Object.assign(props, internalProps));

package/dist/cjs/components/RichTextEditor.js

@@ -48,6 +48,8 @@ function RichTextEditor(_a) {
     const { updateContentEditingFields } = editContext;
     const liveField = editContext.getLiveField(field);
     (0, react_1.useEffect)(() => {
+        if (!liveField)
+            return;
         if (editedValue != liveField.value &&
             "<p>" + editedValue + "</p>" != liveField.value) {
             // console.log(
@@ -55,15 +57,23 @@ function RichTextEditor(_a) {
             // );
             setValue(liveField.value);
         }
-    }, [liveField.value]);
+    }, [liveField === null || liveField === void 0 ? void 0 : liveField.value]);
     (0, react_1.useEffect)(() => {
+        if (!liveField)
+            return;
         setValue(liveField.value); // Otherwise react would not update the field after the refresh
     }, [updateContentEditingFields]);
+    (0, react_1.useEffect)(() => {
+        if (liveField) {
+            setValue(field.value);
+            liveField.value = field.value;
+        }
+    }, [field]);
     const setFieldValue = (val) => {
         if (val != editedValue) {
             setEditedValue(val);
             if (editContext)
-                editContext.editField(field, val, true);
+                editContext.editField({ field, value: val, refresh: "none" });
         }
     };
     const eventHandler = (0, react_1.useCallback)((e) => {
@@ -72,6 +82,11 @@ function RichTextEditor(_a) {
     return (0, react_1.useMemo)(() => {
         const properies = Object.assign(Object.assign({}, props), { contentEditable: true, suppressContentEditableWarning: true, onInput: eventHandler, placeholder: "[" + field.name + "]", dangerouslySetInnerHTML: {
                 __html: value,
+            }, onFocus: () => {
+                editContext.setFocusedField(field);
+            }, onClick: () => {
+                if (!field.canWrite || !field.hasLock)
+                    editContext.setFocusedField(field);
             } });
         return react_1.default.createElement(tag || "div", properies);
     }, [value]);

package/dist/cjs/components/TextEditor.js

@@ -48,17 +48,29 @@ function TextEditor(_a) {
     const { updateContentEditingFields } = editContext;
     const liveField = editContext.getLiveField(field);
     (0, react_1.useEffect)(() => {
+        if (!liveField)
+            return;
         if (editedValue != liveField.value)
             setValue(liveField.value);
-    }, [liveField.value]);
+    }, [liveField === null || liveField === void 0 ? void 0 : liveField.value]);
     (0, react_1.useEffect)(() => {
+        if (liveField) {
+            setValue(field.value);
+            liveField.value = field.value;
+        }
+    }, [field]);
+    (0, react_1.useEffect)(() => {
+        if (!liveField)
+            return;
         setValue(liveField.value); // Otherwise react would not update the field after the refresh
     }, [updateContentEditingFields]);
-    const properies = Object.assign(Object.assign({}, props), { contentEditable: true, suppressContentEditableWarning: true, onInput: (e) => setFieldValue(e.currentTarget.textContent), placeholder: "[" + field.name + "]" });
+    const properies = Object.assign(Object.assign({}, props), { contentEditable: true, suppressContentEditableWarning: true, onInput: (e) => setFieldValue(e.currentTarget.textContent), placeholder: "[" + field.name + "]", onFocus: () => {
+            editContext.setFocusedField(field);
+        } });
     const setFieldValue = (val) => {
         setEditedValue(val);
         if (editContext)
-            editContext.editField(field, val, true);
+            editContext.editField({ field, value: val, refresh: "none" });
     };
     return react_1.default.createElement(tag || "div", properies, value);
 }

package/dist/cjs/components/Translate.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Translate = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const __1 = require("..");
-const TranslateEditor_1 = require("../editor/TranslateEditor");
+const TranslateEditor_1 = require("./TranslateEditor");
 function Translate({ text }) {
     const context = (0, __1.useAlpacaContext)();
     const dictionary = context.dictionary;

package/dist/cjs/{editor → components}/TranslateEditor.js

@@ -5,6 +5,7 @@ exports.TranslateEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const __1 = require("..");
+const TextEditor_1 = require("./TextEditor");
 function TranslateEditor({ text }) {
     const context = (0, __1.useEditContext)();
     if (!context || !context.dictionary)
@@ -13,13 +14,15 @@ function TranslateEditor({ text }) {
     (0, react_1.useEffect)(() => {
         if (Object.keys(dictionary).indexOf(text) < 0 &&
             context.unresolvedDictionaryKeys.indexOf(text) < 0) {
-            console.log("Pushing...");
             context.setUnresolvedDictionaryKeys([
                 ...context.unresolvedDictionaryKeys,
                 text,
             ]);
         }
     }, []);
-    return (dictionary[text] || ((0, jsx_runtime_1.jsx)("span", { className: "a-p-1 a-ring-2 a-ring-red-500", children: text })));
+    if (dictionary[text]) {
+        return (0, jsx_runtime_1.jsx)(TextEditor_1.TextEditor, { field: dictionary[text] });
+    }
+    return ((0, jsx_runtime_1.jsx)("span", { className: "a-p-1 a-ring-2 a-ring-red-500", onClick: () => console.log("create dictionary entry"), children: text }));
 }
 exports.TranslateEditor = TranslateEditor;

package/dist/cjs/editor/AiPopup.js

@@ -0,0 +1,33 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AiPopup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const overlaypanel_1 = require("primereact/overlaypanel");
+const AiTerminal_1 = require("./AiTerminal");
+const button_1 = require("primereact/button");
+const react_1 = require("react");
+const __1 = require("..");
+exports.AiPopup = (0, react_1.forwardRef)((props, ref) => {
+    const overlayRef = (0, react_1.useRef)(null);
+    const [operations, setOperations] = (0, react_1.useState)([]);
+    const editContext = (0, __1.useEditContext)();
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        show: (ev) => {
+            var _a;
+            setOperations([]);
+            (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.toggle(ev);
+        },
+        close: () => {
+            var _a;
+            (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.hide();
+        },
+    }));
+    return ((0, jsx_runtime_1.jsx)(overlaypanel_1.OverlayPanel, { ref: overlayRef, children: (0, jsx_runtime_1.jsxs)("div", { className: "a-w-96 a-h-96 a-flex a-flex-col a-gap-2", children: [(0, jsx_runtime_1.jsx)(AiTerminal_1.AiTerminal, { selection: [props.componentId], newEditOperations: (ops) => setOperations([...operations, ...ops]) }), operations.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "a-text-xs", children: [operations.length, " changes"] })), (0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-gap-4 a-justify-end", children: [!operations.length && ((0, jsx_runtime_1.jsx)(button_1.Button, { label: "Close", onClick: () => { var _a; return (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.hide(); }, size: "small" })), operations.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: "pi pi-check", severity: "success", label: "Accept", onClick: () => { var _a; return (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.hide(); }, size: "small" }), (0, jsx_runtime_1.jsx)(button_1.Button, { icon: "pi pi-times", severity: "danger", label: "Reject", onClick: () => {
+                                        var _a;
+                                        if (operations.length > 0) {
+                                            editContext === null || editContext === void 0 ? void 0 : editContext.undo(operations.length);
+                                            (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.hide();
+                                        }
+                                    }, size: "small" })] }))] })] }) }));
+});