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

package/dist/esm/components/PictureEditor.js

@@ -11,11 +11,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Picture } from "./Picture";
 import { useEditContext } from "..";
 import { MediaSelector } from "../editor/MediaSelector";
 import { Dialog } from "primereact/dialog";
+import { Button } from "primereact/button";
 export const PictureEditor = (_a) => {
     var _b, _c;
     var { field, imageParams, sources, defaultVariant, renderJsonLinkedData } = _a, otherProps = __rest(_a, ["field", "imageParams", "sources", "defaultVariant", "renderJsonLinkedData"]);
@@ -26,13 +27,38 @@ export const PictureEditor = (_a) => {
     if (!editContext)
         return;
     function imageSelected(imageId) {
-        const value = (field === null || field === void 0 ? void 0 : field.value) || {};
-        //value.variants[0].mediaId = 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);
-        if (field)
+        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");
+        }
     }
-    console.log(JSON.stringify(field));
-    return (_jsxs(_Fragment, { children: [_jsx(MediaSelector, { visible: mediaSelectorVisible, onHide: () => setMediaSelectorVisible(false), onMediaSelected: imageSelected }), _jsx(Dialog, { header: "Edit picture", visible: editorVisible, style: { width: "50vw" }, onHide: () => setEditorVisible(false), children: _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) => (_jsxs("div", { onClick: () => setSelectedVariant(variant), children: [_jsxs("div", { className: "a-h-24 a-w-24 a-border a-relative" +
-                                    (selectedVariant == variant ? " a-shadow-xl " : ""), children: [variant.src && _jsx("img", { src: variant.src }), _jsx("div", { className: "a-absolute a-top-0 a-right-0 ", children: _jsx("i", { className: "pi pi-pencil a-m-1 a-cursor-pointer", onClick: () => setMediaSelectorVisible(true) }) })] }, variant.name), _jsx("div", { children: variant.name }), _jsx("div", { children: variant.aspectRatioText })] }))) }) }), _jsxs("span", Object.assign({}, otherProps, { onClick: () => setEditorVisible(true), children: ["PICTURE", _jsx(Picture, { field: field, imageParams: imageParams, sources: sources })] }))] }));
+    useEffect(() => {
+        var _a;
+        setSelectedVariant((_a = field === null || field === void 0 ? void 0 : field.value) === null || _a === void 0 ? void 0 : _a.variants[0]);
+    }, []);
+    console.log("Picture Field: " + JSON.stringify(field));
+    return (_jsxs(_Fragment, { children: [_jsx(MediaSelector, { visible: mediaSelectorVisible, onHide: () => setMediaSelectorVisible(false), onMediaSelected: imageSelected }), _jsx(Dialog, { header: "Edit picture", visible: editorVisible, style: { width: "50vw", height: "50vh" }, onHide: () => setEditorVisible(false), children: _jsxs("div", { className: "a-flex a-gap-1 a-flex-col a-justify a-h-full", children: [_jsxs("div", { className: "a-flex-1 a-flex a-gap-1", children: [_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) => (_jsxs("div", { onClick: () => setSelectedVariant(variant), children: [_jsxs("div", { className: "a-h-24 a-w-24 a-border a-relative" +
+                                                    (selectedVariant == variant ? " a-shadow-xl " : ""), children: [variant.src && _jsx("img", { src: variant.thumbSrc }), _jsx("div", { className: "a-absolute a-top-0 a-right-0 ", children: _jsx("i", { className: "pi pi-pencil a-m-1 a-cursor-pointer", onClick: () => setMediaSelectorVisible(true) }) })] }, variant.name), _jsx("div", { children: variant.name }), _jsx("div", { children: variant.aspectRatioText })] }))) }), _jsx("div", { className: "a-flex-1 a-relative", children: _jsx("div", { className: "a-absolute a-inset-0 a-overflow-auto", children: selectedVariant && _jsx("img", { src: selectedVariant.src }) }) })] }), _jsxs("div", { className: "a-flex a-justify-end a-gap-3 a-mt-3", children: [_jsx(Button, { onClick: () => {
+                                        setEditorVisible(false);
+                                    }, children: "Ok" }), _jsx(Button, { onClick: () => {
+                                        setEditorVisible(false);
+                                        editContext === null || editContext === void 0 ? void 0 : editContext.requestRefresh("immediate");
+                                    }, children: "Cancel" })] })] }) }), _jsx("span", Object.assign({}, otherProps, { onClick: () => setEditorVisible(true), className: "a-cursor-pointer", children: _jsx(Picture, { field: field, imageParams: imageParams, sources: sources }) }))] }));
 };

package/dist/esm/components/Placeholder.js

@@ -12,6 +12,8 @@ import { EditFrame } from "../editor/EditFrame";
 import { useAlpacaContext, } from "..";
 import { PlaceholderDropZoneHost } from "../editor/PlaceholderDropZoneHost";
 import Slot from "./Slot";
+import { ErrorBoundary } from "react-error-boundary";
+import { ErrorFallbackWithDetails, ErrorFallback } from "./Error";
 export function Placeholder({ name, content, }) {
     return __awaiter(this, void 0, void 0, function* () {
         const data = yield content;
@@ -44,11 +46,16 @@ export function Placeholder({ name, content, }) {
         const components = yield Promise.all(promises);
         if (context.pageContext.pageEditing) {
             return (_jsxs(_Fragment, { children: [components.map(({ Component, data, parent }, index) => {
-                        return (_jsxs(_Fragment, { children: [_jsx(PlaceholderDropZoneHost, { parentName: parent === null || parent === void 0 ? void 0 : parent.name, placeholder: placeholderData, index: index + 1 }), _jsx(EditFrame, { componentId: data.id, children: _jsx(Component, { component: data }) }, data.id)] }));
+                        try {
+                            return (_jsxs(_Fragment, { children: [_jsx(PlaceholderDropZoneHost, { parentName: parent === null || parent === void 0 ? void 0 : parent.name, placeholder: placeholderData, index: index + 1 }), _jsx(EditFrame, { componentId: data.id, children: _jsx(ErrorBoundary, { FallbackComponent: ErrorFallbackWithDetails, children: _jsx(Component, { component: data }) }) }, data.id)] }));
+                        }
+                        catch (e) {
+                            return (_jsxs("div", { children: ["Error rendering component ", data.name, ": ", e.message] }));
+                        }
                     }), _jsx(PlaceholderDropZoneHost, { parentName: data === null || data === void 0 ? void 0 : data.name, placeholder: placeholderData, index: components.length + 1 })] }));
         }
         else
-            return (_jsx(_Fragment, { children: components.map(({ Component, data }) => (_jsx(_Fragment, { children: _jsx(Component, { component: data }) }))) }));
+            return (_jsx(_Fragment, { children: components.map(({ Component, data }) => (_jsx(_Fragment, { children: _jsx(ErrorBoundary, { FallbackComponent: ErrorFallback, children: _jsx(Component, { component: data }) }) }))) }));
     });
 }
 function ComponentNotFound({ component }) {

package/dist/esm/components/RichText.js

@@ -27,9 +27,12 @@ export function RichText(_a) {
     return __awaiter(this, void 0, void 0, function* () {
         if (!field)
             return;
+        if (field.jsonValue) {
+            field = field.jsonValue;
+        }
         const internalProps = Object.assign(Object.assign({}, props), { dangerouslySetInnerHTML: {
                 __html: field.value,
-            }, editable: editable, contentEditable: true, "data-test": "test", placeholder: '[' + field.name + ']' });
+            }, editable: editable, contentEditable: true, "data-test": "test", placeholder: "[" + field.name + "]" });
         if (useAlpacaContext().pageContext.pageEditing)
             return _jsx(RichTextEditor, Object.assign({ field: field, tag: tag }, props));
         return React.createElement(tag || "div", Object.assign(props, internalProps));

package/dist/esm/components/RichTextEditor.js

@@ -20,10 +20,7 @@ export function RichTextEditor(_a) {
     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);
+    const liveField = editContext.getLiveField(field);
     useEffect(() => {
         if (editedValue != liveField.value &&
             "<p>" + editedValue + "</p>" != liveField.value) {

package/dist/esm/components/Text.js

@@ -30,8 +30,9 @@ export function Text(_a) {
         if (field.jsonValue) {
             field = field.jsonValue;
         }
-        if (useAlpacaContext().pageContext.pageEditing)
-            return _jsx(TextEditor, Object.assign({ field: field, tag: tag }, props));
+        if (useAlpacaContext().pageContext.pageEditing) {
+            return (_jsx("div", { children: _jsx(TextEditor, Object.assign({ field: field, tag: tag }, props)) }));
+        }
         else
             return React.createElement(tag || "div", props, field.value);
     });

package/dist/esm/components/TextEditor.js

@@ -20,10 +20,7 @@ export function TextEditor(_a) {
     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);
+    const liveField = editContext.getLiveField(field);
     useEffect(() => {
         if (editedValue != liveField.value)
             setValue(liveField.value);

package/dist/esm/editor/AiTerminal.js

@@ -42,7 +42,7 @@ export function AiTerminal({ requestRefresh, selection, }) {
                 handleResponse(response, callback, false);
                 if (response.editOperations.length) {
                     if (new Date().getTime() - lastRefresh > 500) {
-                        requestRefresh(false);
+                        requestRefresh("delayed");
                         router.refresh();
                         lastRefresh = new Date().getTime();
                     }
@@ -83,7 +83,7 @@ export function AiTerminal({ requestRefresh, selection, }) {
             TerminalService.off("command", commandHandler);
         };
     }, []);
-    return (_jsxs("div", { className: "a-h-full a-flex a-flex-col a-relative", children: [_jsx("div", { className: "a-flex-1 a-relative", children: _jsx("div", { className: "a-inset-0 a-absolute", children: _jsx(Terminal, { onReset: () => setMessages([]), commandHandler: (v, callback) => {
+    return (_jsxs("div", { className: "a-h-full a-flex a-flex-col a-relative a-flex-1", children: [_jsx("div", { className: "a-flex-1 a-relative", children: _jsx("div", { className: "a-inset-0 a-absolute", children: _jsx(Terminal, { onReset: () => setMessages([]), commandHandler: (v, callback) => {
                             commandHandler(v, callback);
                         } }) }) }), _jsxs("div", { className: "a-text-xs", children: ["Tokens in: ", tokens.in, " out: ", tokens.out] })] }));
 }

package/dist/esm/editor/ComponentPalette.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TabPanel, TabView } from "primereact/tabview";
 import { useEditContext } from "..";
 import ContentTree from "./ContentTree";
 export function ComponentPalette({ selection, page, dragStart, dragEnd, }) {
@@ -28,25 +29,25 @@ export function ComponentPalette({ selection, page, dragStart, dragEnd, }) {
     //     editContext!.droppedInPlaceholder(key, parseInt(index));
     //   }
     // }
-    return (_jsxs(_Fragment, { children: [_jsx("h2", { className: "a-text-xl a-font-bold a-mb-8", children: "New" }), _jsx("div", { className: "a-grid a-grid-cols-4 a-gap-1", children: insertOptions.map((option) => {
-                    function handleDragStart(event) {
-                        dragStart({ type: "template", templateId: option.id });
-                        event.stopPropagation();
-                    }
-                    function handleDragEnd() {
-                        dragEnd();
-                    }
-                    return (_jsxs("div", { 
-                        //    onClick={directInsert}
-                        draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, className: "a-p-3 a-shadow-md a-flex a-items-center a-flex-col a-gap-1 a-cursor-grab", children: [_jsx("img", { src: option.icon, width: "32", height: "32" }), option.name] }, option.id));
-                }) }), _jsx("h2", { className: "a-text-xl a-font-bold a-my-8", children: "Existing" }), _jsx(ContentTree, { rootItemId: "0DE95AE4-41AB-4D01-9EB0-67441B7C2450", dragStart: (itemNode) => {
-                    dragStart({
-                        type: "link-component",
-                        templateId: itemNode.templateId,
-                        componentId: itemNode.id,
-                    });
-                }, expandIdPath: page.idPath, dragEnd: dragEnd, isDraggable: (x) => x.isComponent &&
-                    (insertOptions === null || insertOptions === void 0 ? void 0 : insertOptions.find((insertOption) => insertOption.id == x.templateId)) != undefined })] }));
+    return (_jsxs(TabView, { children: [_jsx(TabPanel, { header: "New", children: _jsx("div", { className: "a-grid a-grid-cols-4 a-gap-1", children: insertOptions.map((option) => {
+                        function handleDragStart(event) {
+                            dragStart({ type: "template", templateId: option.id });
+                            event.stopPropagation();
+                        }
+                        function handleDragEnd() {
+                            dragEnd();
+                        }
+                        return (_jsxs("div", { 
+                            //    onClick={directInsert}
+                            draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, className: "a-p-3 a-shadow-md a-flex a-items-center a-flex-col a-gap-1 a-cursor-grab", children: [_jsx("img", { src: option.icon, width: "32", height: "32" }), option.name] }, option.id));
+                    }) }) }), _jsx(TabPanel, { header: "Existing", children: _jsx(ContentTree, { rootItemId: "0DE95AE4-41AB-4D01-9EB0-67441B7C2450", dragStart: (itemNode) => {
+                        dragStart({
+                            type: "link-component",
+                            templateId: itemNode.templateId,
+                            componentId: itemNode.id,
+                        });
+                    }, expandIdPath: page.idPath, dragEnd: dragEnd, isDraggable: (x) => x.isComponent &&
+                        (insertOptions === null || insertOptions === void 0 ? void 0 : insertOptions.find((insertOption) => insertOption.id == x.templateId)) != undefined }) })] }));
 }
 function collectInsertOptions(page, placeholderKeys) {
     const insertOptionsMap = new Map();

package/dist/esm/editor/EditorClient.js

@@ -74,6 +74,7 @@ export function EditorClient({ content, dictionaryObject, edit, children, }) {
     const searchParams = useSearchParams();
     const [selection, setSelection] = useState([]);
     const [selectedForInsertion, setSelectedForInsertion] = useState("");
+    const [liveUpdatingFields, setLiveUpdatingFields] = useState([]);
     const [currentEditOperation, setCurrentEditOperation] = useState();
     const [dictionary, setDictionary] = useState(dictionaryObject);
     const [unresolvedDictionaryKeys, setUnresolvedDictionaryKeys] = useState([]);
@@ -141,23 +142,33 @@ export function EditorClient({ content, dictionaryObject, edit, children, }) {
                     setSelection([result.componentId]);
                 }
                 if (!currentEditOperation.noRefresh)
-                    requestRefresh(currentEditOperation.refreshAfterQuietPeriod);
+                    requestRefresh(currentEditOperation.refreshAfterQuietPeriod
+                        ? "waitForQuietPeriod"
+                        : "delayed");
             }
         });
         sync();
     }, [currentEditOperation]);
-    const requestRefresh = (waitForQuietPeriod) => {
-        console.log("request refresh with " + waitForQuietPeriod);
-        if (waitForQuietPeriod && refreshTimer) {
+    const requestRefresh = (mode) => {
+        if (mode === "immediate") {
+            console.log("Immediate refresh requested");
+            clearTimeout(refreshTimer);
+            router.refresh();
+            setRefreshCompletedFlag(!refreshCompletedFlag);
+            setRefreshTimer(undefined);
+            return;
+        }
+        console.log("request refresh with mode: " + mode);
+        if (mode === "waitForQuietPeriod" && refreshTimer) {
             clearTimeout(refreshTimer);
         }
-        if (!refreshTimer || waitForQuietPeriod) {
+        if (!refreshTimer || mode === "waitForQuietPeriod") {
             setRefreshTimer(setTimeout(() => {
                 console.log("refreshing");
                 router.refresh();
                 setRefreshCompletedFlag(!refreshCompletedFlag);
                 setRefreshTimer(undefined);
-            }, waitForQuietPeriod ? 2000 : 1000));
+            }, mode === "waitForQuietPeriod" ? 2000 : 1000));
         }
     };
     const saveAndRefresh = (callback) => __awaiter(this, void 0, void 0, function* () {
@@ -262,6 +273,16 @@ export function EditorClient({ content, dictionaryObject, edit, children, }) {
             }
         });
     }
+    const getLiveField = (field) => {
+        const existingField = liveUpdatingFields.find((f) => f.id === field.id &&
+            f.language === field.language &&
+            f.version === field.version &&
+            f.itemId === field.itemId);
+        if (existingField)
+            return existingField;
+        setLiveUpdatingFields([...liveUpdatingFields, field]);
+        return field;
+    };
     const selectedComponent = selection.length === 1 && page ? getComponentById(selection[0]) : null;
     const editField = (field, value, noRefresh = true) => {
         var _a;
@@ -294,6 +315,7 @@ export function EditorClient({ content, dictionaryObject, edit, children, }) {
         op.noRefresh = noRefresh;
         op.refreshAfterQuietPeriod = !noRefresh;
         op.value = value;
+        getLiveField(field).value = value;
         function getField(fields, id) {
             return Object.values(fields).find((f) => f.id === id);
         }
@@ -343,10 +365,12 @@ export function EditorClient({ content, dictionaryObject, edit, children, }) {
             dragObject,
             dictionary,
             setDictionary,
+            requestRefresh,
             refreshCompletedFlag,
             unresolvedDictionaryKeys,
             setUnresolvedDictionaryKeys,
             updateContentEditingFields,
+            getLiveField,
             showToast: () => { },
             removeComponent: (componentId, callback) => {
                 confirmDialog({
@@ -432,7 +456,7 @@ export function EditorClient({ content, dictionaryObject, edit, children, }) {
                     setCurrentEditOperation(op);
                 setDragObject(undefined);
             }),
-        }, children: [_jsx(Toast, { ref: toast }), _jsxs(PrimeReactProvider, { children: [_jsx(ConfirmDialog, {}), _jsx(Sidebar, { style: { width: "40%" }, visible: componentsPaletteVisible, position: "right", onHide: () => setComponentsPaletteVisible(false), pt: {
+        }, children: [_jsx(Toast, { ref: toast }), _jsxs(PrimeReactProvider, { children: [_jsx(ConfirmDialog, {}), _jsx(Sidebar, { style: { width: "40%" }, visible: componentsPaletteVisible, position: "right", onHide: () => setComponentsPaletteVisible(false), header: "Insert component", pt: {
                             mask: {
                                 onDragOver: () => setHidePalette(true),
                                 style: {
@@ -449,5 +473,5 @@ export function EditorClient({ content, dictionaryObject, edit, children, }) {
                                     setHidePalette(false);
                                 }
                                 setSelectedForInsertion("");
-                            } })) }), _jsxs(BlockUI, { blocked: uiBlocked, template: spinner, children: [_jsx(Menubar, { model: menuItems, end: endContent }), _jsxs(Splitter, { children: [_jsx(SplitterPanel, { size: 25, className: "alpaca-overflow-scroll", children: _jsxs(Splitter, { layout: "vertical", children: [_jsx(SplitterPanel, { className: "a-overflow-hidden a-relative", children: _jsx("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: _jsx(ComponentTree, { page: page, selection: selection }) }) }), _jsx(SplitterPanel, { className: "alpaca-editor-tabs", children: _jsxs(TabView, { className: "a-inset-0 a-absolute", scrollable: true, children: [selectedComponent && (_jsxs(TabPanel, { header: "Fields", children: [_jsx(ComponentInfo, { component: selectedComponent }), _jsx(FieldList, { fields: selectedComponent.fields })] })), selectedComponent && (_jsx(TabPanel, { header: "GraphQL", style: { height: "100%" }, children: _jsx(GraphQL, { component: selectedComponent }) })), _jsxs(TabPanel, { header: "Page", children: [page && _jsx(PageInfo, { page: page }), page && _jsx(FieldList, { fields: page.fields })] }), _jsx(TabPanel, { header: "Dictionary", children: _jsx(DictionaryEditor, { dictionary: dictionary }) }), _jsx(TabPanel, { header: "Debug", children: _jsx(Debug, { component: selectedComponent, page: page }) })] }) })] }) }), _jsx(SplitterPanel, { size: 55, className: "alpaca-overflow-scroll alpaca-editor-content", children: _jsx("div", { onDragEndCapture: () => setDragObject(undefined), className: "alpaca-editor-container", children: children }) }), _jsx(SplitterPanel, { size: 20, children: _jsxs(Splitter, { layout: "vertical", className: "alpaca-editor", children: [_jsx(SplitterPanel, { className: "overflow-hidden a-relative", children: _jsx(EditHistory, { operations: editData === null || editData === void 0 ? void 0 : editData.operations }) }), _jsx(SplitterPanel, { className: "overflow-hidden a-relative", children: _jsx(AiTerminal, { selection: selection, requestRefresh: requestRefresh }) })] }) })] })] })] })] }));
+                            } })) }), _jsxs(BlockUI, { blocked: uiBlocked, template: spinner, children: [_jsx(Menubar, { model: menuItems, end: endContent }), _jsxs(Splitter, { children: [_jsx(SplitterPanel, { size: 30, className: "alpaca-overflow-scroll", children: _jsxs(Splitter, { layout: "vertical", children: [_jsx(SplitterPanel, { size: 30, className: "a-overflow-hidden a-relative", children: _jsx("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: _jsx(ComponentTree, { page: page, selection: selection }) }) }), _jsx(SplitterPanel, { className: "alpaca-editor-tabs", children: _jsxs(TabView, { className: "a-inset-0 a-absolute", scrollable: true, children: [selectedComponent && (_jsxs(TabPanel, { header: "Fields", children: [_jsx(ComponentInfo, { component: selectedComponent }), _jsx(FieldList, { fields: selectedComponent.fields })] })), selectedComponent && (_jsx(TabPanel, { header: "GraphQL", style: { height: "100%" }, children: _jsx(GraphQL, { component: selectedComponent }) })), _jsxs(TabPanel, { header: "Page", children: [page && _jsx(PageInfo, { page: page }), page && _jsx(FieldList, { fields: page.fields })] }), _jsx(TabPanel, { header: "Dictionary", children: _jsx(DictionaryEditor, { dictionary: dictionary }) }), _jsx(TabPanel, { header: "Debug", children: _jsx(Debug, { component: selectedComponent, page: page }) })] }) })] }) }), _jsx(SplitterPanel, { size: 55, className: "alpaca-overflow-scroll alpaca-editor-content", children: _jsx("div", { onDragEndCapture: () => setDragObject(undefined), className: "alpaca-editor-container", children: children }) }), _jsx(SplitterPanel, { size: 15, children: _jsxs(Splitter, { layout: "vertical", className: "alpaca-editor", children: [_jsx(SplitterPanel, { className: "overflow-hidden a-relative", children: _jsx(EditHistory, { operations: editData === null || editData === void 0 ? void 0 : editData.operations }) }), _jsx(SplitterPanel, { className: "overflow-hidden a-relative", children: _jsx(AiTerminal, { selection: selection, requestRefresh: requestRefresh }) })] }) })] })] })] })] }));
 }

package/dist/esm/editor/FieldList.js

@@ -1,12 +1,15 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEditContext, } from "..";
 import { InputText } from "primereact/inputtext";
 import { Checkbox } from "primereact/checkbox";
 import { SingleLineText } from "./fieldTypes/SingleLineText";
 import { RichTextEditor } from "./fieldTypes/RichTextEditor";
 export function FieldList({ fields }) {
-    if (!fields)
-        return;
+    const editContext = useEditContext();
+    if (!editContext)
+        if (!fields)
+            return;
     if (!Array.isArray(fields))
         fields = Object.values(fields);
     const sections = fields.reduce((acc, value) => {
@@ -20,10 +23,12 @@ export function FieldList({ fields }) {
     }, {});
     const sectionList = Object.values(sections);
     sectionList.sort((a, b) => b[0].sortOrder - a[0].sortOrder);
-    return (_jsx("div", { className: "a-p-1", children: Object.keys(sections).map((section) => (_jsxs("div", { children: [_jsx("div", { className: "alpaca-fields-section-headline", children: section }), getSectionFields(sections[section])] }, section))) }));
+    return (_jsx("div", { className: "a-p-1", children: Object.keys(sections).map((section) => (_jsxs("div", { children: [_jsx("div", { className: "alpaca-fields-section-headline", children: section }), getSectionFields(sections[section], editContext)] }, section))) }));
 }
-function getSectionFields(fields) {
-    return fields.map((field) => (_jsxs("div", { children: [_jsx("label", { className: "alpaca-field-label", children: field.name }), !field.containsFallbackValue ? (_jsx("button", { className: "a-text-xs a-p-0 a-m-1", children: "Reset " })) : (_jsx("button", { children: "Fallback" })), _jsx("div", { children: getFieldEditor(field) })] }, field.id)));
+function getSectionFields(fields, editContext) {
+    return fields
+        .map((field) => editContext.getLiveField(field))
+        .map((field) => (_jsxs("div", { children: [_jsx("label", { className: "alpaca-field-label", children: field.name }), !field.containsFallbackValue ? (_jsx("button", { className: "a-text-xs a-p-0 a-m-1", children: "Reset " })) : (_jsx("button", { children: "Fallback" })), _jsx("div", { children: getFieldEditor(field) })] }, field.id)));
 }
 function getFieldEditor(field) {
     switch (field.type) {

package/dist/esm/editor/GraphQL.js

@@ -73,11 +73,10 @@ export function GraphQL({ component }) {
             type: "jsonValue",
         };
         const prettyQuery = format(query);
-        console.log(query);
-        console.log(prettyQuery);
         setQuery(prettyQuery);
         editContext === null || editContext === void 0 ? void 0 : editContext.editField(field, prettyQuery, false);
         setShowSpinner(true);
+        editContext === null || editContext === void 0 ? void 0 : editContext.requestRefresh("immediate");
     }
     return (_jsxs(Splitter, { layout: "vertical", style: { height: "100%" }, children: [_jsx(SplitterPanel, { size: 50, className: "a-relative", children: _jsxs("div", { className: "a-absolute a-inset-0 a-flex", children: [_jsx(InputTextarea, { value: query, onChange: (e) => setQuery(e.target.value), className: "a-flex-1", style: { height: "100%" } }), _jsx(Button, { icon: "pi pi-refresh" + (showSpinner ? " pi-spin" : ""), onClick: refresh, disabled: showSpinner })] }) }), _jsx(SplitterPanel, { className: "alpaca-editor-tabs", children: _jsxs(TabView, { className: "a-inset-0 a-absolute", children: [_jsx(TabPanel, { header: "Data", style: { height: "100%" }, className: "a-relative", children: _jsx("div", { className: "a-m-1", children: Object.values(fieldsjsonValues).map((x) => renderItem(x)) }) }), _jsx(TabPanel, { header: "JSON", className: "a-relative", style: { height: "100%" }, children: _jsx("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: _jsx(JSONPretty, { data: component.graphql }) }) })] }) })] }));
 }

package/dist/esm/editor/MediaSelector.js

@@ -15,6 +15,7 @@ import { getChildren } from "./contentService";
 import { useEditContext } from "./editContext";
 import { Button } from "primereact/button";
 import { Dialog } from "primereact/dialog";
+import { FileUpload } from "primereact/fileupload";
 export const MediaSelector = ({ visible, onHide, onMediaSelected, }) => {
     const [selectedFolderId, setSelectedFolderId] = useState();
     const [images, setImages] = useState();
@@ -34,21 +35,26 @@ export const MediaSelector = ({ visible, onHide, onMediaSelected, }) => {
                     "F1828A2C-7E5D-4BBD-98CA-320474871548",
                 ]);
                 setImages(children);
+                return children;
             }
         });
     }
-    return (_jsx(Dialog, { style: { width: "60%" }, visible: visible, onHide: onHide, children: _jsxs("div", { className: "a-flex a-flex-col a-h-full", children: [_jsxs(Splitter, { className: "a-flex-1 a-border-0", children: [_jsx(SplitterPanel, { size: 35, className: "alpaca-overflow-scroll", children: _jsxs(Splitter, { layout: "vertical", children: [_jsx(SplitterPanel, { size: 70, children: _jsx(ContentTree, { rootItemId: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", selectionMode: "single", selectedItemIds: selection, templateIds: ["FE5DD826-48C6-436D-B87A-7C4210C7413B"], expandIdPath: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", onSelectionChange: (selection) => {
-                                                if (selection.length)
-                                                    setSelectedFolderId(selection[0]);
-                                                else
-                                                    setSelectedFolderId(undefined);
-                                            } }) }), _jsx(SplitterPanel, { children: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.name })] }) }), _jsx(SplitterPanel, { className: "alpaca-overflow-scroll a-relative", children: _jsx("div", { className: "a-grid a-grid-cols-3 a-gap-2 a-absolute a-inset-0", children: images === null || images === void 0 ? void 0 : images.map((t) => {
-                                    return (_jsxs("div", { className: "a-flex a-flex-col a-justify-between hover:a-shadow-md a-cursor-pointer a-p-1", onDoubleClick: () => {
+    return (_jsx(Dialog, { style: { width: "80%", height: "80%" }, visible: visible, onHide: onHide, children: _jsxs("div", { className: "a-flex a-flex-col a-h-full", children: [_jsxs(Splitter, { className: "a-flex-1 a-border-0", children: [_jsx(SplitterPanel, { size: 35, className: "alpaca-overflow-scroll", children: _jsxs(Splitter, { layout: "vertical", children: [_jsx(SplitterPanel, { size: 70, className: "a-relative", children: _jsx("div", { className: "a-absolute a-inset-0 a-overflow-auto", children: _jsx(ContentTree, { rootItemId: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", selectionMode: "single", selectedItemIds: selection, templateIds: ["FE5DD826-48C6-436D-B87A-7C4210C7413B"], expandIdPath: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", onSelectionChange: (selection) => {
+                                                    if (selection.length)
+                                                        setSelectedFolderId(selection[0]);
+                                                    else
+                                                        setSelectedFolderId(undefined);
+                                                } }) }) }), _jsx(SplitterPanel, { className: "a-flex a-justify-center a-align-center", children: _jsx("img", { src: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.previewUrl }) })] }) }), _jsx(SplitterPanel, { className: "a-relative", children: _jsx("div", { className: "a-flex a-flex-wrap a-content-start a-items-start a-gap-2 a-absolute a-inset-0 a-overflow-auto", children: images === null || images === void 0 ? void 0 : images.map((t) => {
+                                    return (_jsxs("div", { className: "a-w-24 a-flex a-flex-col a-justify-between hover:a-shadow-md a-cursor-pointer a-p-1", onDoubleClick: () => {
                                             onMediaSelected(t.id);
                                             onHide();
-                                        }, onClick: () => setSelectedImage(t), children: [_jsx("img", { src: t.imageUrl }), _jsx("div", { className: "a-text-xs a-break-all", children: t.name })] }));
-                                }) }) })] }), _jsxs("div", { className: "a-flex a-justify-end a-gap-3", children: [_jsx(Button, { onClick: () => onHide(), children: "Cancel" }), _jsx(Button, { disabled: !selectedImage, onClick: () => {
+                                        }, onClick: () => setSelectedImage(t), children: [_jsx("img", { src: t.imageUrl, className: "a-w-24 a-h-24" }), _jsx("div", { className: "a-text-xs a-break-all", children: t.name })] }, t.id));
+                                }) }) })] }), _jsxs("div", { className: "a-flex a-justify-end a-gap-3 a-mt-3", children: [_jsx(FileUpload, { mode: "basic", disabled: !selectedFolderId, auto: true, chooseLabel: "Upload", accept: "image/*", url: "/alpaca/headless/editor/upload?folder=" + selection[0], onUpload: ({ xhr }) => __awaiter(void 0, void 0, void 0, function* () {
+                                const response = JSON.parse(xhr.responseText);
+                                const thumbs = yield loadThumbnails(selectedFolderId);
+                                setSelectedImage(thumbs === null || thumbs === void 0 ? void 0 : thumbs.find((x) => x.id === response.id));
+                            }) }), _jsx(Button, { disabled: !selectedImage, onClick: () => {
                                 onMediaSelected(selectedImage.id);
                                 onHide();
-                            }, children: "Select" })] })] }) }));
+                            }, children: "Select" }), _jsx(Button, { onClick: () => onHide(), children: "Cancel" })] })] }) }));
 };