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

package/dist/esm/editor/EditorClient.js

@@ -0,0 +1,450 @@
+"use client";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import uuid from "react-uuid";
+import { PrimeReactProvider } from "primereact/api";
+import { Menubar } from "primereact/menubar";
+import { ProgressSpinner } from "primereact/progressspinner";
+import { TabView, TabPanel } from "primereact/tabview";
+import { Toast } from "primereact/toast";
+import { Splitter, SplitterPanel } from "primereact/splitter";
+import { BlockUI } from "primereact/blockui";
+import { ConfirmDialog, confirmDialog } from "primereact/confirmdialog";
+import { Sidebar } from "primereact/sidebar";
+import { EditContextProvider, } from "..";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import { FieldList } from "./FieldList";
+import { GraphQL } from "./GraphQL";
+import { ComponentTree } from "./ComponentTree";
+import { ComponentInfo } from "./ComponentInfo";
+import { LanguageSelector } from "./LanguageSelector";
+import { findComponent } from "./componentTreeHelper";
+import { ComponentPalette } from "./ComponentPalette";
+import { DictionaryEditor } from "./DictionaryEditor";
+import { AiTerminal } from "./AiTerminal";
+import { EditHistory } from "./EditHistory";
+import { Debug } from "./Debug";
+import { PageInfo } from "./PageInfo";
+import { VersionSelector } from "./VersionSelector";
+import { commitChanges, currentOperation, executeRedo, executeUndo, executeEditOperation, setCurrentOperation, } from "./editService";
+import "../../editor.css";
+// Hook
+function useEventListener(eventName, handler, element) {
+    // Create a ref that stores handler
+    const savedHandler = useRef();
+    // Update ref.current value if handler changes.
+    // This allows our effect below to always get latest handler ...
+    // ... without us needing to pass it in effect deps array ...
+    // ... and potentially cause effect to re-run every render.
+    useEffect(() => {
+        savedHandler.current = handler;
+    }, [handler]);
+    useEffect(() => {
+        // Make sure element supports addEventListener
+        // On
+        const isSupported = element && element.addEventListener;
+        if (!isSupported)
+            return;
+        // Create event listener that calls handler function stored in ref
+        const eventListener = (event) => savedHandler.current(event);
+        // Add event listener
+        element.addEventListener(eventName, eventListener);
+        // Remove event listener on cleanup
+        return () => {
+            element.removeEventListener(eventName, eventListener);
+        };
+    }, [eventName, element] // Re-run if eventName or element changes
+    );
+}
+export function EditorClient({ content, dictionaryObject, edit, children, }) {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const [selection, setSelection] = useState([]);
+    const [selectedForInsertion, setSelectedForInsertion] = useState("");
+    const [currentEditOperation, setCurrentEditOperation] = useState();
+    const [dictionary, setDictionary] = useState(dictionaryObject);
+    const [unresolvedDictionaryKeys, setUnresolvedDictionaryKeys] = useState([]);
+    const [editData, setEditData] = useState(edit);
+    const [refreshCompletedFlag, setRefreshCompletedFlag] = useState(false);
+    const [updateContentEditingFields, setUpdateContentEditingFields] = useState(false);
+    const [page, setPageData] = useState(null);
+    const [uiBlocked, setUiBlocked] = useState(false);
+    const [componentsPaletteVisible, setComponentsPaletteVisible] = useState(false);
+    const [dragObject, setDragObject] = useState();
+    const [hidePalette, setHidePalette] = useState(false);
+    const [refreshTimer, setRefreshTimer] = useState();
+    const sessionId = searchParams.get("session");
+    if (!sessionId)
+        return;
+    function switchLanguage(language) {
+        const current = new URLSearchParams(Array.from(searchParams.entries()));
+        current.set("language", language);
+        const newUrl = `${pathname}?${current.toString()}`;
+        router.replace(newUrl, { scroll: false });
+    }
+    function switchVersion(version) {
+        const current = new URLSearchParams(Array.from(searchParams.entries()));
+        current.set("version", version.toString());
+        const newUrl = `${pathname}?${current.toString()}`;
+        router.replace(newUrl, { scroll: false });
+    }
+    function handleErrorResult(result) {
+        if (result.type === "error") {
+            showErrorToast(result);
+            return true;
+        }
+        if (result.type === "unauthenticated") {
+            confirmDialog({
+                header: "Not logged in",
+                message: "You are not logged in anymore. Proceed to login page?",
+                accept: () => {
+                    window.location.href = edit.loginUrl;
+                },
+            });
+            showErrorToast(result);
+            return true;
+        }
+    }
+    useEffect(() => {
+        if (selection.length)
+            setSelectedForInsertion("");
+    }, [selection]);
+    useEffect(() => {
+        const sync = () => __awaiter(this, void 0, void 0, function* () {
+            if (currentEditOperation) {
+                const result = yield executeEditOperation(currentEditOperation, sessionId);
+                if (handleErrorResult(result))
+                    return;
+                if ((result.id && edit.operations.length == 0) ||
+                    edit.operations[edit.operations.length - 1].id !=
+                        result.id) {
+                    edit.operations = edit.operations.filter((x) => !x.undone);
+                    edit.operations.push(result);
+                    setEditData(Object.assign({}, edit));
+                }
+                if (result.type === "add-component" ||
+                    result.type === "link-component") {
+                    console.log("CURRENT: " + JSON.stringify(result));
+                    setSelection([result.componentId]);
+                }
+                if (!currentEditOperation.noRefresh)
+                    requestRefresh(currentEditOperation.refreshAfterQuietPeriod);
+            }
+        });
+        sync();
+    }, [currentEditOperation]);
+    const requestRefresh = (waitForQuietPeriod) => {
+        console.log("request refresh with " + waitForQuietPeriod);
+        if (waitForQuietPeriod && refreshTimer) {
+            clearTimeout(refreshTimer);
+        }
+        if (!refreshTimer || waitForQuietPeriod) {
+            setRefreshTimer(setTimeout(() => {
+                console.log("refreshing");
+                router.refresh();
+                setRefreshCompletedFlag(!refreshCompletedFlag);
+                setRefreshTimer(undefined);
+            }, waitForQuietPeriod ? 2000 : 1000));
+        }
+    };
+    const saveAndRefresh = (callback) => __awaiter(this, void 0, void 0, function* () {
+        if (!edit.operations.length) {
+            if (callback)
+                callback();
+            return;
+        }
+        setUiBlocked(true);
+        if (!(yield commitChanges(sessionId))) {
+            setUiBlocked(false);
+            return;
+        }
+        router.refresh();
+        //setEditOperations([]);
+        setUiBlocked(false);
+        toast.current.show({
+            severity: "success",
+            summary: "Saved",
+            detail: "Your changes were saved successfully.",
+            life: 3000,
+        });
+        if (callback)
+            callback();
+    });
+    // function ensureSaved(callback: () => void) {
+    //   if (!edit.operations.length) {
+    //     callback();
+    //     return;
+    //   }
+    //   confirmDialog({
+    //     message: "Save changes?",
+    //     header: "Save changes?",
+    //     icon: "pi pi-exclamation-triangle",
+    //     accept: () => saveAndRefresh(callback),
+    //     reject: callback,
+    //   });
+    // }
+    function handleKeyDown(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (event.ctrlKey && event.key === "s") {
+                event.preventDefault();
+                yield saveAndRefresh();
+            }
+            if (event.ctrlKey && event.key === "z") {
+                event.preventDefault();
+                yield undo();
+            }
+            if (event.ctrlKey && event.key === "y") {
+                event.preventDefault();
+                yield redo();
+            }
+        });
+    }
+    if (typeof window !== "undefined")
+        useEventListener("keydown", handleKeyDown, window);
+    const toast = useRef();
+    useEffect(() => {
+        setPageData(content);
+    }, [content]);
+    useEffect(() => {
+        setEditData(edit);
+    }, [edit]);
+    function getComponentById(id) {
+        if (!page)
+            return null;
+        return findComponent(id, page.placeholders);
+    }
+    function redo() {
+        return __awaiter(this, void 0, void 0, function* () {
+            setUpdateContentEditingFields(!updateContentEditingFields);
+            let result = yield executeRedo(sessionId);
+            if (result.type === "success") {
+                router.refresh();
+                return true;
+            }
+            else {
+                showErrorToast(result);
+                return false;
+            }
+        });
+    }
+    function showErrorToast(result) {
+        toast.current.show({
+            severity: "error",
+            summary: result.summary,
+            detail: result.details,
+            life: 3000,
+        });
+    }
+    function undo() {
+        return __awaiter(this, void 0, void 0, function* () {
+            setUpdateContentEditingFields(!updateContentEditingFields);
+            let result = yield executeUndo(sessionId);
+            if (result.type === "success") {
+                router.refresh();
+                return true;
+            }
+            else {
+                showErrorToast(result);
+                return false;
+            }
+        });
+    }
+    const selectedComponent = selection.length === 1 && page ? getComponentById(selection[0]) : null;
+    const editField = (field, value, noRefresh = true) => {
+        var _a;
+        if (!page)
+            return;
+        const component = findComponent(field.itemId, page.placeholders);
+        let op = currentOperation;
+        if (!op ||
+            op.type !== "edit-field" ||
+            op.itemId !== field.itemId ||
+            op.fieldId !== field.id ||
+            op.language !== field.language ||
+            op.version !== field.version) {
+            op = {
+                type: "edit-field",
+                itemId: field.itemId,
+                fieldId: field.id,
+                version: field.version,
+                language: field.language,
+                fieldName: field.name,
+                itemName: field.itemId == page.id ? "Page" : (_a = component === null || component === void 0 ? void 0 : component.name) !== null && _a !== void 0 ? _a : "<unknown>",
+                pageItemId: page.id,
+                pageItemLanguage: page.language,
+                pageItemVersion: page.version,
+                date: new Date(),
+                id: uuid(),
+            };
+        }
+        op.date = new Date();
+        op.noRefresh = noRefresh;
+        op.refreshAfterQuietPeriod = !noRefresh;
+        op.value = value;
+        function getField(fields, id) {
+            return Object.values(fields).find((f) => f.id === id);
+        }
+        if (component) {
+            const f = getField(component.fields, field.id);
+            if (f && f.value != value) {
+                f.value = value;
+            }
+        }
+        else {
+            const f = getField(page.fields, field.id);
+            if (f && f.value != value)
+                f.value = value;
+        }
+        setCurrentOperation(op);
+        setCurrentEditOperation(Object.assign({}, op));
+    };
+    const menuItems = [
+        {
+            label: "Save",
+            icon: "pi pi-fw pi-save text-red",
+            command: () => saveAndRefresh(),
+        },
+        {
+            label: "Insert",
+            icon: "pi pi-fw pi-sitemap",
+            command: () => setComponentsPaletteVisible(true),
+        },
+    ];
+    const spinner = _jsx(ProgressSpinner, {});
+    const endContent = (_jsxs(_Fragment, { children: [_jsx(LanguageSelector, { page: page, onLanguageSelected: (language) => {
+                    if (!language)
+                        return;
+                    //ensureSaved(() => switchLanguage(language));
+                    switchLanguage(language);
+                } }), _jsx(VersionSelector, { page: page, onVersionSelected: (version) => {
+                    switchVersion(version);
+                } })] }));
+    return (_jsxs(EditContextProvider, { value: {
+            sessionId: sessionId,
+            selection,
+            setSelection,
+            selectedForInsertion,
+            setSelectedForInsertion,
+            editField,
+            getComponentById,
+            dragObject,
+            dictionary,
+            setDictionary,
+            refreshCompletedFlag,
+            unresolvedDictionaryKeys,
+            setUnresolvedDictionaryKeys,
+            updateContentEditingFields,
+            showToast: () => { },
+            removeComponent: (componentId, callback) => {
+                confirmDialog({
+                    message: "Are you sure you want to remove this component?",
+                    header: "Remove component",
+                    icon: "pi pi-exclamation-triangle",
+                    accept: () => {
+                        var _a;
+                        const op = {
+                            type: "remove-component",
+                            date: new Date(),
+                            id: uuid(),
+                            pageItemId: page.id,
+                            pageItemLanguage: page.language,
+                            pageItemVersion: page.version,
+                            componentId,
+                            componentName: (_a = getComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.name,
+                        };
+                        setCurrentEditOperation(op);
+                        callback(true);
+                    },
+                });
+            },
+            openComponentPalette: () => setComponentsPaletteVisible(true),
+            dragStart: (dragObject) => {
+                console.log("dragging " + JSON.stringify(dragObject));
+                setDragObject(dragObject);
+            },
+            droppedInPlaceholder: (placeholderKey, index) => __awaiter(this, void 0, void 0, function* () {
+                if (!dragObject)
+                    return;
+                console.log(dragObject.templateId +
+                    " dropped in " +
+                    placeholderKey +
+                    " " +
+                    index);
+                // console.log(JSON.stringify(page));
+                const placeholderKeyComponents = placeholderKey.split("_");
+                const parentId = placeholderKeyComponents.length === 1
+                    ? null
+                    : placeholderKeyComponents[0];
+                const placeholderName = placeholderKeyComponents.length === 1
+                    ? placeholderKeyComponents[0]
+                    : placeholderKeyComponents[1];
+                let op;
+                if (dragObject.type == "template") {
+                    op = {
+                        type: "add-component",
+                        pageItemId: page.id,
+                        pageItemLanguage: page.language,
+                        pageItemVersion: page.version,
+                        parentItemId: parentId,
+                        placeholderName: placeholderName,
+                        placeholderIndex: index,
+                        templateId: dragObject === null || dragObject === void 0 ? void 0 : dragObject.templateId,
+                        date: new Date(),
+                        id: uuid(),
+                    };
+                }
+                if (dragObject.type == "component" ||
+                    (dragObject.type == "link-component" && dragObject.componentId)) {
+                    op = {
+                        type: dragObject.type == "link-component"
+                            ? "link-component"
+                            : "move-component",
+                        pageItemId: page.id,
+                        pageItemLanguage: page.language,
+                        pageItemVersion: page.version,
+                        parentItemId: parentId,
+                        placeholderName: placeholderName,
+                        placeholderIndex: index,
+                        componentId: dragObject.componentId,
+                        date: new Date(),
+                        id: uuid(),
+                    };
+                }
+                //const newOps = [...editOperations, op];
+                //setEditOperations();
+                // await sendEditOperationsToServer(newOps as EditOperation[]);
+                // router.refresh();
+                //setEditOperations(newOps);
+                if (op)
+                    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: {
+                            mask: {
+                                onDragOver: () => setHidePalette(true),
+                                style: {
+                                    left: hidePalette || !componentsPaletteVisible ? "100vw" : 0,
+                                },
+                            },
+                        }, children: page && (_jsx(ComponentPalette, { page: page, selection: selection, dragStart: (dragObject) => {
+                                //console.log("dragging " + JSON.stringify(dragObject));
+                                setDragObject(dragObject);
+                            }, dragEnd: () => {
+                                setDragObject(undefined);
+                                if (hidePalette) {
+                                    setComponentsPaletteVisible(false);
+                                    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: "overflow-hidden relative", children: _jsx("div", { className: "inset-0 absolute overflow-y-auto", children: _jsx(ComponentTree, { page: page, selection: selection }) }) }), _jsx(SplitterPanel, { className: "alpaca-editor-tabs", children: _jsxs(TabView, { className: "inset-0 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), children: children }) }), _jsx(SplitterPanel, { size: 20, children: _jsxs(Splitter, { layout: "vertical", className: "alpaca-editor", children: [_jsx(SplitterPanel, { className: "overflow-hidden relative", children: _jsx(EditHistory, { operations: editData === null || editData === void 0 ? void 0 : editData.operations }) }), _jsx(SplitterPanel, { className: "overflow-hidden relative", children: _jsx(AiTerminal, { selection: selection, requestRefresh: requestRefresh }) })] }) })] })] })] })] }));
+}

package/dist/esm/editor/EditorClientHost.js

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

package/dist/esm/editor/FieldList.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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;
+    if (!Array.isArray(fields))
+        fields = Object.values(fields);
+    const sections = fields.reduce((acc, value) => {
+        // Group initialization
+        if (!acc[value.section || "Default"]) {
+            acc[value.section || "Default"] = [];
+        }
+        // Grouping
+        acc[value.section || "Default"].push(value);
+        return acc;
+    }, {});
+    const sectionList = Object.values(sections);
+    sectionList.sort((a, b) => b[0].sortOrder - a[0].sortOrder);
+    return (_jsx("div", { className: "p-1", children: Object.keys(sections).map((section) => (_jsxs("div", { children: [_jsx("div", { className: "alpaca-fields-section-headline", children: section }), getSectionFields(sections[section])] }, 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: "text-xs p-0 m-1", children: "Reset " })) : (_jsx("button", { children: "Fallback" })), _jsx("div", { children: getFieldEditor(field) })] }, field.id)));
+}
+function getFieldEditor(field) {
+    switch (field.type) {
+        case "checkbox":
+            return checkbox(field);
+        case "picture":
+            return picture(field);
+        case "image":
+            return image(field);
+        case "rich text":
+            return _jsx(RichTextEditor, { field: field });
+        default:
+            return _jsx(SingleLineText, { field: field });
+    }
+}
+function checkbox(field) {
+    return _jsx(Checkbox, { checked: field.value === "1" });
+}
+// function singleLineText(field: Field) {
+//   return <InputText value={field.value as string} />;
+// }
+function picture(field) {
+    var _a, _b;
+    return (_jsxs(_Fragment, { children: [_jsx("label", { className: "alpaca-minor-label", children: "Alt" }), _jsx(InputText, { value: (_b = (_a = field.value) === null || _a === void 0 ? void 0 : _a.alt) !== null && _b !== void 0 ? _b : "" })] }));
+}
+function image(field) {
+    var _a, _b;
+    return (_jsxs(_Fragment, { children: [_jsx("label", { className: "alpaca-minor-label", children: "Alt" }), _jsx(InputText, { value: (_b = (_a = field.value) === null || _a === void 0 ? void 0 : _a.altText) !== null && _b !== void 0 ? _b : "" })] }));
+}

package/dist/esm/editor/GraphQL.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEditContext } from "..";
+import JSONPretty from "react-json-pretty";
+import "react-json-pretty/themes/monikai.css";
+import { TabView, TabPanel } from "primereact/tabview";
+import { FieldList } from "./FieldList";
+import { Splitter, SplitterPanel } from "primereact/splitter";
+import { InputTextarea } from "primereact/inputtextarea";
+import { Button } from "primereact/button";
+import { useEffect, useState } from "react";
+import { format } from "graphql-formatter";
+export function GraphQL({ component }) {
+    const editContext = useEditContext();
+    const [query, setQuery] = useState("");
+    const [showSpinner, setShowSpinner] = useState(false);
+    if (!(component === null || component === void 0 ? void 0 : component.graphql))
+        return;
+    useEffect(() => {
+        setQuery(component.graphql_query);
+    }, [component.graphql_query]);
+    useEffect(() => {
+        setShowSpinner(false);
+    }, [editContext === null || editContext === void 0 ? void 0 : editContext.refreshCompletedFlag]);
+    function findFields(json) {
+        let result = {};
+        for (let key in json) {
+            if (typeof json[key] === "object" && json[key] !== null) {
+                let subResult = findFields(json[key]);
+                for (let subKey in subResult) {
+                    if (result[subKey]) {
+                        result[subKey] = result[subKey].concat(subResult[subKey]);
+                    }
+                    else {
+                        result[subKey] = subResult[subKey];
+                    }
+                }
+            }
+            if (key === "jsonValue") {
+                let groupKey = `${json[key].itemId}_${json[key].language}_${json[key].version}`;
+                if (result[groupKey]) {
+                    result[groupKey].push(json[key]);
+                }
+                else {
+                    result[groupKey] = [json[key]];
+                }
+            }
+        }
+        return result;
+    }
+    const fieldsjsonValues = findFields(component.graphql);
+    function renderItem(fields) {
+        const first = fields[0];
+        return (_jsxs("div", { children: ["Item: ", first.path, " ", first.id, " ", first.language, " ", first.version, _jsx(FieldList, { fields: fields })] }, first.path + first.id + first.language + first.version));
+    }
+    function refresh() {
+        var _a, _b;
+        if (!component)
+            return;
+        let language = ((_a = component.hostingPageItem) === null || _a === void 0 ? void 0 : _a.language) || "en";
+        let version = ((_b = component.hostingPageItem) === null || _b === void 0 ? void 0 : _b.version) || 0;
+        if (component.linkedComponentItem) {
+            language = component.linkedComponentItem.language;
+            version = component.linkedComponentItem.version;
+        }
+        const field = {
+            name: "_GraphQL",
+            itemId: component === null || component === void 0 ? void 0 : component.id,
+            language: language,
+            version: version,
+            path: "graphql",
+            id: "3622F861-ECA9-45D7-8DA7-2CDA35235002",
+            value: query,
+            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);
+    }
+    return (_jsxs(Splitter, { layout: "vertical", style: { height: "100%" }, children: [_jsx(SplitterPanel, { size: 50, className: "relative", children: _jsxs("div", { className: "absolute inset-0 flex", children: [_jsx(InputTextarea, { value: query, onChange: (e) => setQuery(e.target.value), className: "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: "inset-0 absolute", children: [_jsx(TabPanel, { header: "Data", style: { height: "100%" }, className: "relative", children: _jsx("div", { className: "m-1", children: Object.values(fieldsjsonValues).map((x) => renderItem(x)) }) }), _jsx(TabPanel, { header: "JSON", className: "relative", style: { height: "100%" }, children: _jsx("div", { className: "inset-0 absolute overflow-y-auto", children: _jsx(JSONPretty, { data: component.graphql }) }) })] }) })] }));
+}

package/dist/esm/editor/LanguageSelector.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Dropdown } from "primereact/dropdown";
+export function LanguageSelector({ page, onLanguageSelected, }) {
+    if (page == null)
+        return;
+    const selectedCountryTemplate = (option, props) => {
+        if (option) {
+            return _jsx("div", { children: option.name });
+        }
+        return _jsx("span", { children: props.placeholder });
+    };
+    const countryOptionTemplate = (option) => {
+        return (_jsxs("div", { children: [option.name, " (", option.versions, ")"] }));
+    };
+    return (_jsx(_Fragment, { children: _jsx(Dropdown, { value: page.language, onChange: (e) => onLanguageSelected(e.value), options: page.languages, optionValue: "languageCode", optionLabel: "name", placeholder: "Select a language", filter: true, valueTemplate: selectedCountryTemplate, itemTemplate: countryOptionTemplate }) }));
+}

package/dist/esm/editor/MediaSelector.js

@@ -0,0 +1,54 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sidebar } from "primereact/sidebar";
+import ContentTree from "./ContentTree";
+import { Splitter, SplitterPanel } from "primereact/splitter";
+import { useEffect, useState } from "react";
+import { getChildren } from "./contentService";
+import { useEditContext } from "./editContext";
+import { Button } from "primereact/button";
+export const MediaSelector = ({ visible, onHide, onMediaSelected, }) => {
+    const [selectedFolderId, setSelectedFolderId] = useState();
+    const [images, setImages] = useState();
+    const [selectedImage, setSelectedImage] = useState();
+    const selection = selectedFolderId ? [selectedFolderId] : [];
+    const editContext = useEditContext();
+    useEffect(() => {
+        loadThumbnails(selectedFolderId);
+    }, [selectedFolderId]);
+    function loadThumbnails(selectedFolderId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!selectedFolderId)
+                setImages([]);
+            else {
+                const children = yield getChildren(selectedFolderId, editContext.sessionId, [
+                    "C97BA923-8009-4858-BDD5-D8BE5FCCECF7",
+                    "F1828A2C-7E5D-4BBD-98CA-320474871548",
+                ]);
+                setImages(children);
+            }
+        });
+    }
+    return (_jsx(Sidebar, { style: { width: "60%" }, position: "right", visible: visible, onHide: onHide, children: _jsxs("div", { className: "flex flex-col h-full", children: [_jsxs(Splitter, { className: "flex-1 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 relative", children: _jsx("div", { className: "grid grid-cols-3 gap-2 absolute inset-0", children: images === null || images === void 0 ? void 0 : images.map((t) => {
+                                    return (_jsxs("div", { className: "flex flex-col justify-between hover:shadow-md cursor-pointer p-1", onDoubleClick: () => {
+                                            onMediaSelected(t.id);
+                                            onHide();
+                                        }, onClick: () => setSelectedImage(t), children: [_jsx("img", { src: t.imageUrl }), _jsx("div", { className: "text-xs break-all", children: t.name })] }));
+                                }) }) })] }), _jsxs("div", { className: "flex justify-end gap-3", children: [_jsx(Button, { onClick: () => onHide(), children: "Cancel" }), _jsx(Button, { disabled: !selectedImage, onClick: () => {
+                                onMediaSelected(selectedImage.id);
+                                onHide();
+                            }, children: "Select" })] })] }) }));
+};