@alpaca-headless/alpaca-headless-nextjs 0.0.4 → 1.0.19

package/dist/cjs/components/Image.js

@@ -0,0 +1,36 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Image = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// const addClassName = (otherAttrs: { [key: string]: unknown }): void => {
+//   if (otherAttrs.class) {
+//     // if any classes are defined properly already
+//     if (otherAttrs.className) {
+//       let className: string = otherAttrs.className as string;
+//       className += ` ${otherAttrs.class}`;
+//       otherAttrs.className = className;
+//     } else {
+//       otherAttrs.className = otherAttrs.class;
+//     }
+//     delete otherAttrs.class;
+//   }
+// };
+const Image = (_a) => {
+    var { field } = _a, otherProps = __rest(_a, ["field"]);
+    if (!field)
+        return;
+    const attrs = Object.assign(Object.assign({}, field.value), otherProps);
+    return (0, jsx_runtime_1.jsx)("img", Object.assign({}, attrs, { alt: "" }));
+};
+exports.Image = Image;

package/dist/cjs/components/Link.js

@@ -0,0 +1,31 @@
+"use strict";
+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.Link = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const __1 = require("..");
+const LinkEditor_1 = __importDefault(require("./LinkEditor"));
+function Link(_a) {
+    var _b;
+    var { field, children } = _a, props = __rest(_a, ["field", "children"]);
+    if (!field)
+        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)("a", Object.assign({ href: field.value.url }, props, { children: children })));
+}
+exports.Link = Link;

package/dist/cjs/components/LinkEditor.js

@@ -0,0 +1,22 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+function LinkEditor(_a) {
+    var { field, children } = _a, props = __rest(_a, ["field", "children"]);
+    if (!field)
+        return;
+    return ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: field.value.url }, props, { onClick: (e) => e.preventDefault(), children: children })));
+}
+exports.default = LinkEditor;

package/dist/cjs/components/Picture.js

@@ -0,0 +1,119 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Picture = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const mediaProtection_1 = require("../mediaProtection");
+const __1 = require("..");
+const PictureEditor_1 = require("./PictureEditor");
+// const addClassName = (otherAttrs: { [key: string]: unknown }): void => {
+//   if (otherAttrs.class) {
+//     // if any classes are defined properly already
+//     if (otherAttrs.className) {
+//       let className: string = otherAttrs.className as string;
+//       className += ` ${otherAttrs.class}`;
+//       otherAttrs.className = className;
+//     } else {
+//       otherAttrs.className = otherAttrs.class;
+//     }
+//     delete otherAttrs.class;
+//   }
+// };
+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"]);
+    if (!field)
+        return null;
+    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];
+    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 }));
+    }
+    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) => {
+                            const variant = variants === null || variants === void 0 ? void 0 : variants.find((v) => v.name.toLowerCase() == source.variant.toLowerCase());
+                            if (!(variant === null || variant === void 0 ? void 0 : variant.src))
+                                return;
+                            let srcSet = (0, mediaProtection_1.hashImageUrl)(variant.src);
+                            const getScaledImage = (variant, width) => {
+                                if (width > variant.width)
+                                    return { src: variant.src, width: 0 };
+                                else
+                                    return {
+                                        src: variant.src +
+                                            `${variant.src.includes("?") ? "&" : "?"}mw=` +
+                                            width,
+                                        width: width,
+                                    };
+                            };
+                            if (source.widths && source.widths.length) {
+                                let scaledImages = source.widths.map((x) => getScaledImage(variant, x));
+                                srcSet = "";
+                                for (let w = 0; w < scaledImages.length; w++) {
+                                    if (srcSet.length)
+                                        srcSet = srcSet + ", ";
+                                    srcSet +=
+                                        (0, mediaProtection_1.hashImageUrl)(scaledImages[w].src) +
+                                            " " +
+                                            source.widths[w] +
+                                            "w";
+                                    if (scaledImages[w].width === 0)
+                                        break;
+                                }
+                            }
+                            else {
+                                if (source.width) {
+                                    srcSet = (0, mediaProtection_1.hashImageUrl)(getScaledImage(variant, source.width).src);
+                                    if (source.scales) {
+                                        let scaledImages = source.scales.map((x) => { var _a; return getScaledImage(variant, ((_a = source.width) !== null && _a !== void 0 ? _a : 0) * x); });
+                                        srcSet = "";
+                                        for (let w = 0; w < scaledImages.length; w++) {
+                                            if (srcSet.length)
+                                                srcSet = srcSet + ", ";
+                                            srcSet +=
+                                                (0, mediaProtection_1.hashImageUrl)(scaledImages[w].src) +
+                                                    " " +
+                                                    source.scales[w] +
+                                                    "x";
+                                            if (scaledImages[w].width === 0)
+                                                break;
+                                        }
+                                    }
+                                }
+                            }
+                            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: {
+                        __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,
+                        }),
+                    } })) : 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,
+                        }),
+                    } })) : null] }));
+    }
+};
+exports.Picture = Picture;

package/dist/cjs/components/PictureEditor.js

@@ -0,0 +1,42 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PictureEditor = void 0;
+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 PictureEditor = (_a) => {
+    var _b, _c;
+    var { field, imageParams, sources, defaultVariant, renderJsonLinkedData } = _a, otherProps = __rest(_a, ["field", "imageParams", "sources", "defaultVariant", "renderJsonLinkedData"]);
+    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) {
+        const value = (field === null || field === void 0 ? void 0 : field.value) || {};
+        //value.variants[0].mediaId = imageId;
+        console.log(imageId);
+        if (field)
+            editContext === null || editContext === void 0 ? void 0 : editContext.editField(field, JSON.stringify(value), false);
+    }
+    console.log(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: "Header", visible: editorVisible, style: { width: "50vw" }, onHide: () => setEditorVisible(false), children: (0, jsx_runtime_1.jsx)("div", { className: "a-flex a-gap-1", 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.src }), (0, jsx_runtime_1.jsx)("div", { className: "a-absolute " })] }, variant.name), (0, jsx_runtime_1.jsx)("div", { children: variant.name }), (0, jsx_runtime_1.jsx)("div", { children: variant.aspectRatioText })] }))) }) }), (0, jsx_runtime_1.jsxs)("span", Object.assign({}, otherProps, { onClick: () => setEditorVisible(true), children: ["PICTURE", (0, jsx_runtime_1.jsx)(Picture_1.Picture, { field: field, imageParams: imageParams, sources: sources })] }))] }));
+};
+exports.PictureEditor = PictureEditor;

package/dist/cjs/components/Placeholder.js

@@ -8,14 +8,20 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Placeholder = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const EditFrame_1 = require("../editor/EditFrame");
 const __1 = require("..");
+const PlaceholderDropZoneHost_1 = require("../editor/PlaceholderDropZoneHost");
+const Slot_1 = __importDefault(require("./Slot"));
 function Placeholder({ name, content, }) {
     return __awaiter(this, void 0, void 0, function* () {
         const data = yield content;
-        if (data.type !== "page" && data.type !== "component")
+        if (!data || !("placeholders" in data))
             return;
         const placeholderData = data.placeholders.find((x) => x.name == name);
         if (!placeholderData)
@@ -23,11 +29,41 @@ function Placeholder({ name, content, }) {
         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 module = yield loader(component.componentType);
-            return { data: component, Component: module.default };
+            if (component.componentType == "Slot")
+                return { Component: Slot_1.default, data: component, parent: data };
+            let module = null;
+            try {
+                module = yield loader(component.componentType);
+            }
+            catch (e) {
+                console.log(e);
+            }
+            if (!module) {
+                console.log("Could not find module " + component.componentType);
+                return {
+                    data: { name: component.componentType, id: "0" },
+                    Component: ComponentNotFound,
+                };
+            }
+            return { parent: data, data: component, Component: module.default };
         }));
         const components = yield Promise.all(promises);
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: components.map(({ Component, data }) => ((0, jsx_runtime_1.jsx)(Component, { component: data }))) }));
+        if (context.pageContext.pageEditing) {
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [components.map(({ Component, data, parent }, index) => {
+                        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)(Component, { component: data }) }, data.id)] }));
+                    }), (0, jsx_runtime_1.jsx)(PlaceholderDropZoneHost_1.PlaceholderDropZoneHost, { parentName: data === null || data === void 0 ? void 0 : data.name, placeholder: placeholderData, index: components.length + 1 })] }));
+        }
+        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)(Component, { component: data }) }))) }));
     });
 }
 exports.Placeholder = Placeholder;
+function ComponentNotFound({ component }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            backgroundColor: "orange",
+            color: "red",
+            fontSize: 18,
+            padding: 10,
+            border: "3px solid red",
+        }, children: ["Component not found: ", component.name, " "] }));
+}

package/dist/cjs/components/RichText.js

@@ -0,0 +1,44 @@
+"use strict";
+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());
+    });
+};
+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.RichText = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const RichTextEditor_1 = require("./RichTextEditor");
+const __1 = require("..");
+function RichText(_a) {
+    var { field, tag, editable } = _a, props = __rest(_a, ["field", "tag", "editable"]);
+    return __awaiter(this, void 0, void 0, function* () {
+        if (!field)
+            return;
+        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));
+    });
+}
+exports.RichText = RichText;

package/dist/cjs/components/RichTextEditor.js

@@ -0,0 +1,82 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextEditor = void 0;
+const react_1 = __importStar(require("react"));
+const editContext_1 = require("../editor/editContext");
+function RichTextEditor(_a) {
+    var { field, tag } = _a, props = __rest(_a, ["field", "tag"]);
+    const editContext = (0, editContext_1.useEditContext)();
+    const [value, setValue] = (0, react_1.useState)("");
+    const [editedValue, setEditedValue] = (0, react_1.useState)();
+    if (!editContext)
+        return;
+    const { updateContentEditingFields } = editContext;
+    const component = editContext.getComponentById(field.itemId);
+    if (!component)
+        return;
+    const liveField = Object.values(component.fields).find((f) => f.id == field.id);
+    (0, react_1.useEffect)(() => {
+        if (editedValue != liveField.value &&
+            "<p>" + editedValue + "</p>" != liveField.value) {
+            // console.log(
+            //   "editedValue:" + editedValue + " liveField.value " + liveField.value
+            // );
+            setValue(liveField.value);
+        }
+    }, [liveField.value]);
+    (0, react_1.useEffect)(() => {
+        setValue(liveField.value); // Otherwise react would not update the field after the refresh
+    }, [updateContentEditingFields]);
+    const setFieldValue = (val) => {
+        if (val != editedValue) {
+            setEditedValue(val);
+            if (editContext)
+                editContext.editField(field, val, true);
+        }
+    };
+    const eventHandler = (0, react_1.useCallback)((e) => {
+        setFieldValue(e.currentTarget.innerHTML);
+    }, [editContext.editField]);
+    return (0, react_1.useMemo)(() => {
+        const properies = Object.assign(Object.assign({}, props), { contentEditable: true, suppressContentEditableWarning: true, onInput: eventHandler, placeholder: "[" + field.name + "]", dangerouslySetInnerHTML: {
+                __html: value,
+            } });
+        return react_1.default.createElement(tag || "div", properies);
+    }, [value]);
+}
+exports.RichTextEditor = RichTextEditor;

package/dist/cjs/components/Slot.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const __1 = require("..");
+function Section({ component }) {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(__1.Placeholder, { name: "ph-slot-content", content: component }) }));
+}
+exports.default = Section;

package/dist/cjs/components/Text.js

@@ -8,18 +8,38 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+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.Text = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
-function Text({ field, tag, editable, }) {
+const TextEditor_1 = require("./TextEditor");
+const __1 = require("..");
+function Text(_a) {
+    var { field, tag, editable } = _a, props = __rest(_a, ["field", "tag", "editable"]);
     return __awaiter(this, void 0, void 0, function* () {
-        if (editable)
-            return react_1.default.createElement(tag || "div", null, field.value);
+        if (!field)
+            return;
+        if (field.jsonValue) {
+            field = field.jsonValue;
+        }
+        if ((0, __1.useAlpacaContext)().pageContext.pageEditing)
+            return (0, jsx_runtime_1.jsx)(TextEditor_1.TextEditor, Object.assign({ field: field, tag: tag }, props));
         else
-            return react_1.default.createElement(tag || "div", null, field.value);
+            return react_1.default.createElement(tag || "div", props, field.value);
     });
 }
 exports.Text = Text;

package/dist/cjs/components/TextEditor.js

@@ -0,0 +1,68 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextEditor = void 0;
+const react_1 = __importStar(require("react"));
+const editContext_1 = require("../editor/editContext");
+function TextEditor(_a) {
+    var { field, tag } = _a, props = __rest(_a, ["field", "tag"]);
+    const editContext = (0, editContext_1.useEditContext)();
+    const [value, setValue] = (0, react_1.useState)("");
+    const [editedValue, setEditedValue] = (0, react_1.useState)();
+    if (!editContext)
+        return;
+    const { updateContentEditingFields } = editContext;
+    const component = editContext.getComponentById(field.itemId);
+    if (!component)
+        return;
+    const liveField = Object.values(component.fields).find((f) => f.id == field.id);
+    (0, react_1.useEffect)(() => {
+        if (editedValue != liveField.value)
+            setValue(liveField.value);
+    }, [liveField.value]);
+    (0, react_1.useEffect)(() => {
+        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 setFieldValue = (val) => {
+        setEditedValue(val);
+        if (editContext)
+            editContext.editField(field, val, true);
+    };
+    return react_1.default.createElement(tag || "div", properies, value);
+}
+exports.TextEditor = TextEditor;

package/dist/cjs/components/Translate.js

@@ -0,0 +1,14 @@
+"use strict";
+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");
+function Translate({ text }) {
+    const context = (0, __1.useAlpacaContext)();
+    const dictionary = context.dictionary;
+    if (context.pageContext.pageEditing)
+        return (0, jsx_runtime_1.jsx)(TranslateEditor_1.TranslateEditor, { text: text });
+    return dictionary[text] || text;
+}
+exports.Translate = Translate;

package/dist/cjs/components/index.js

@@ -16,3 +16,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Placeholder"), exports);
 __exportStar(require("./Text"), exports);
+__exportStar(require("./Picture"), exports);
+__exportStar(require("./RichText"), exports);
+__exportStar(require("./Image"), exports);
+__exportStar(require("./Link"), exports);
+__exportStar(require("./Translate"), exports);