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

package/dist/esm/editor/fieldTypes/SingleLineText.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InputText } from "primereact/inputtext";
+import { useEditContext } from "..";
+export function SingleLineText({ field, readOnly, }) {
+    var _a;
+    const editContext = useEditContext();
+    if (!editContext)
+        return;
+    const liveField = editContext.getLiveField(field);
+    if (!editContext)
+        return;
+    const value = (liveField === null || liveField === void 0 ? void 0 : liveField.value) || field.value;
+    const fieldItem = (_a = field._editor) === null || _a === void 0 ? void 0 : _a.descriptor.item;
+    if (!fieldItem)
+        return;
+    return (_jsx(InputText, { value: value, disabled: readOnly, className: "a-p-2 a-focus-shadow a-text-sm", style: { width: "100%" }, onChange: (e) => {
+            editContext.editField({
+                field,
+                value: e.target.value,
+                refresh: "none",
+            });
+            // field.value = e.target.value;
+        } }, fieldItem.id + field.id + fieldItem.language + fieldItem.version));
+}

package/dist/esm/editor/fieldTypes/TreeListEditor.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Splitter, SplitterPanel } from "primereact/splitter";
+import { useEditContext } from "..";
+import ContentTree from "../ContentTree";
+import { useState } from "react";
+import { ListBox } from "primereact/listbox";
+export default function TreeListEditor({ field, readOnly, }) {
+    const editContext = useEditContext();
+    const [selectedItemIdsInTree, setSelectedItemIdsInTree] = useState([]);
+    const [selectedFromList, setSelectedFromList] = useState([]);
+    if (!editContext)
+        return;
+    const rootItemId = field._editor.customProperties.datasources &&
+        field._editor.customProperties.datasources.length
+        ? field._editor.customProperties.datasources[0]
+        : "{11111111-1111-1111-1111-111111111111}";
+    const trimPath = (path) => {
+        const splitPath = path.split("/");
+        if (splitPath.length > 2) {
+            return (splitPath[splitPath.length - 2] + "/" + splitPath[splitPath.length - 1]);
+        }
+        return path;
+    };
+    function removeFromList(items) {
+        editContext === null || editContext === void 0 ? void 0 : editContext.editField({
+            field: field,
+            rawValue: field.value
+                .filter((x) => !items.find((i) => x.id == i.id))
+                .map((x) => x.id)
+                .join("|"),
+            refresh: "immediate",
+        });
+    }
+    function addToList(itemIds) {
+        const ids = field.value.map((x) => x.id);
+        itemIds.forEach((element) => {
+            if (ids.indexOf(element) == -1) {
+                ids.push(element);
+            }
+        });
+        editContext === null || editContext === void 0 ? void 0 : editContext.editField({
+            field: field,
+            rawValue: ids.join("|"),
+            refresh: "immediate",
+        });
+    }
+    return (_jsx("div", { className: "a-border a-focus-shadow", children: _jsxs(Splitter, { className: "a-h-52", children: [_jsx(SplitterPanel, { size: 50, className: "a-relative", children: _jsx("div", { className: "a-absolute a-inset-0 a-overflow-auto", children: _jsx(ContentTree, { onDoubleClick: (node) => {
+                                if (!readOnly)
+                                    addToList([node.id]);
+                            }, selectionMode: "multiple", selectedItemIds: selectedItemIdsInTree, onSelectionChange: (e) => {
+                                const selcetedIds = e.map((x) => x.id);
+                                setSelectedItemIdsInTree(selcetedIds);
+                            }, rootItemId: rootItemId }) }) }), _jsx(SplitterPanel, { children: _jsx("div", { className: "a-h-full a-w-full a-relative", children: _jsxs("div", { className: "a-absolute a-inset-0 a-flex", children: [_jsxs("div", { className: "a-bg-gray-100 a-flex a-flex-col a-justify-center", children: [_jsx("button", { onClick: () => addToList(selectedItemIdsInTree), disabled: readOnly, children: _jsx("i", { className: "pi pi-angle-right a-p-2 hover:a-bg-gray-50" }) }), _jsx("button", { onClick: () => removeFromList(selectedFromList), disabled: readOnly, children: _jsx("i", { className: "pi pi-angle-left a-p-2 hover:a-bg-gray-50" }) })] }), _jsx("div", { className: "a-flex-1 a-h-full a-relative", children: _jsx(ListBox, { className: "a-absolute a-inset-0 a-overflow-auto a-text-xs", options: field.value || [], optionLabel: "path", emptyMessage: "None selected", multiple: true, value: selectedFromList, onChange: (e) => setSelectedFromList(e.value), itemTemplate: (option) => (_jsxs("div", { className: "a-select-none", onDoubleClick: () => {
+                                                if (!readOnly)
+                                                    removeFromList([option]);
+                                            }, children: [trimPath(option.path), " "] })) }) }), _jsx("div", {})] }) }) })] }) }));
+}

package/dist/esm/editor/index.js

@@ -0,0 +1,4 @@
+export * from "./Editor";
+export * from "./editContext";
+export * from "./previewContext";
+export * from "./EditorWarning";

package/dist/esm/editor/itemCommands.js

@@ -0,0 +1,27 @@
+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 { deleteItem } from "./services/editService";
+import { confirmDialog } from "primereact/confirmdialog";
+export function getDeleteItemCommand(item, editContext, callback) {
+    return () => {
+        confirmDialog({
+            message: "Are you sure you want to delete " +
+                item.name +
+                "? This cannot be undone.",
+            header: "Confirmation",
+            icon: "pi pi-exclamation-triangle",
+            accept: () => __awaiter(this, void 0, void 0, function* () {
+                yield deleteItem(item);
+                editContext === null || editContext === void 0 ? void 0 : editContext.requestRefresh("immediate");
+                callback();
+            }),
+        });
+    };
+}

package/dist/esm/editor/menubar/BrowseHistory.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Dropdown } from "primereact/dropdown";
+import { useEditContext } from "../editContext";
+import { useEffect, useState } from "react";
+export function BrowseHistory({ item }) {
+    const editContext = useEditContext();
+    if (!editContext)
+        return;
+    // Initialize state with data from local storage (if available)
+    const [history, setHistory] = useState(() => {
+        const savedHistory = localStorage.getItem("editor.browseHistory");
+        return savedHistory ? JSON.parse(savedHistory) : [];
+    });
+    let currentValue = {
+        name: item._editor.path || "unknown",
+        id: item.id,
+        hasLayout: item._editor.hasLayout,
+    };
+    useEffect(() => {
+        setHistory((history) => {
+            const newItem = item;
+            if (!newItem)
+                return history;
+            const newHistory = [
+                currentValue,
+                ...history.filter((x) => x.id !== newItem.id).slice(0, 100),
+            ];
+            return newHistory;
+        });
+    }, [item]);
+    return (_jsx(_Fragment, { children: _jsx(Dropdown, { className: "a-text-sm", value: currentValue, onChange: (e) => {
+                editContext.loadItem({
+                    id: e.value.id,
+                    language: item.language,
+                    version: 0,
+                    hasLayout: e.value.hasLayout,
+                });
+            }, options: history, optionLabel: "name", filter: true }) }));
+}

package/dist/esm/editor/menubar/ItemLanguageVersion.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEditContext } from "../editContext";
+import { BrowseHistory } from "./BrowseHistory";
+import { LanguageSelector } from "./LanguageSelector";
+import { VersionSelector } from "./VersionSelector";
+export function ItemLanguageVersion() {
+    const editContext = useEditContext();
+    if (!editContext)
+        return;
+    const item = editContext.view.centerPanelView === "form"
+        ? editContext.secondaryItem || editContext.page
+        : editContext.page;
+    if (!item)
+        return;
+    return (_jsxs("div", { children: [_jsx(BrowseHistory, { item: item }), _jsx(LanguageSelector, { item: item, onLanguageSelected: (language) => {
+                    editContext.loadItem(Object.assign(Object.assign({}, item), { language }));
+                } }), _jsx(VersionSelector, { item: item, onVersionSelected: (version) => {
+                    editContext.loadItem(Object.assign(Object.assign({}, item), { version }));
+                } })] }));
+}

package/dist/esm/editor/menubar/LanguageSelector.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Dropdown } from "primereact/dropdown";
+export function LanguageSelector({ item, onLanguageSelected, }) {
+    var _a;
+    if (item == 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, { className: "a-text-sm", value: item.language, onChange: (e) => onLanguageSelected(e.value), options: (_a = item._editor) === null || _a === void 0 ? void 0 : _a.languages, optionValue: "languageCode", optionLabel: "name", placeholder: "Select a language", filter: true, valueTemplate: selectedCountryTemplate, itemTemplate: countryOptionTemplate }) }));
+}

package/dist/esm/editor/menubar/Menu.js

@@ -0,0 +1,105 @@
+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 { Menubar } from "primereact/menubar";
+import { useEditContext } from "../editContext";
+import { ItemLanguageVersion } from "./ItemLanguageVersion";
+import { configuration } from "../config/config";
+import { PageViewerControls } from "./PageViewerControls";
+export function Menu() {
+    const editContext = useEditContext();
+    if (!editContext)
+        return;
+    const getSubItems = (items) => {
+        if (typeof items === "function")
+            items = items(editContext);
+        return items.map((y) => {
+            if ("execute" in y)
+                return {
+                    label: y.label,
+                    icon: y.icon,
+                    disabled: editContext.isCommandDisabled(y),
+                    command: (event) => __awaiter(this, void 0, void 0, function* () {
+                        yield editContext.executeCommand({
+                            command: y,
+                            event: event.originalEvent,
+                        });
+                    }),
+                };
+            return {
+                label: y.label,
+                icon: y.icon,
+            };
+        });
+    };
+    const menuItems = configuration.chrome.editor.mainNavigation.map((x) => {
+        if ("execute" in x)
+            return {
+                label: x.label,
+                icon: x.icon,
+                disabled: editContext.isCommandDisabled(x),
+                command: (event) => __awaiter(this, void 0, void 0, function* () {
+                    yield editContext.executeCommand({
+                        command: x,
+                        event: event.originalEvent,
+                    });
+                }),
+            };
+        return {
+            label: x.label,
+            icon: x.icon,
+            items: getSubItems(x.items),
+        };
+    });
+    //   [
+    //     {
+    //       label: "Undo",
+    //       icon: "pi pi-fw pi-undo",
+    //       command: () => editContext.undo(),
+    //       disabled:
+    //         editHistory.length === 0 ||
+    //         !editHistory.find((x) => x.sessionId === sessionId && x.canUndo),
+    //     },
+    //     {
+    //       label: "Redo",
+    //       icon: "pi pi-fw pi-refresh",
+    //       //command: () => editContext.redo(),
+    //       disabled:
+    //         editHistory.length === 0 ||
+    //         !editHistory.find((x) => x.sessionId === sessionId && x.canRedo),
+    //     },
+    //     {
+    //       label: "Selection",
+    //       icon: "pi pi-fw pi-bars",
+    //       items: componentCommandMenuItems,
+    //     },
+    //     { separator: true },
+    //     {
+    //       label: "Preview",
+    //       icon: "pi pi-fw pi-external-link",
+    //       command: () => {
+    //         const currentUrl = new URL(window.location.href);
+    //         const searchParams = currentUrl.searchParams;
+    //         if (searchParams.get("mode") === "edit") {
+    //           searchParams.set("mode", "preview");
+    //         }
+    //         window.open(currentUrl.href);
+    //       },
+    //     },
+    //     // {
+    //     //   label: "Publish",
+    //     //   icon: "pi pi-fw pi-upload",
+    //     //   // command: () => publish(),
+    //     // },
+    //     //{ separator: true },
+    //   ];
+    const endContent = (_jsxs("div", { className: "a-flex a-gap-3 a-items-center", children: [_jsx(PageViewerControls, {}), _jsx(ItemLanguageVersion, {})] }));
+    return (_jsx(Menubar, { model: menuItems, end: endContent, className: "a-p-1 a-text-sm a-rounded-none a-border-0 a-border-b" }));
+}

package/dist/esm/editor/menubar/PageViewerControls.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "primereact/utils";
+import { useEditContext } from "../editContext";
+import { Menubar } from "primereact/menubar";
+export function PageViewerControls() {
+    const editContext = useEditContext();
+    if (!editContext)
+        return null;
+    if (editContext.view.centerPanelView !== "page")
+        return null;
+    const zoom = editContext.pageView.zoom;
+    const setZoom = editContext.pageView.setZoom;
+    const device = editContext.pageView.device;
+    const setDevice = editContext.pageView.setDevice;
+    const zoomMenu = {
+        label: Math.floor(zoom * 100) + "%",
+        icon: "pi pi-search",
+        items: [
+            {
+                label: "25%",
+                icon: "pi pi-search",
+                command: () => setZoom(0.25),
+            },
+            {
+                label: "50%",
+                icon: "pi pi-search",
+                command: () => setZoom(0.5),
+            },
+            {
+                label: "75%",
+                icon: "pi pi-search",
+                command: () => setZoom(0.75),
+            },
+            {
+                label: "100%",
+                icon: "pi pi-search",
+                command: () => setZoom(1),
+            },
+            {
+                label: "125%",
+                icon: "pi pi-search",
+                command: () => setZoom(1.25),
+            },
+            {
+                label: "150%",
+                icon: "pi pi-search",
+                command: () => setZoom(1.5),
+            },
+            {
+                label: "200%",
+                icon: "pi pi-search",
+                command: () => setZoom(2),
+            },
+            {
+                label: "400%",
+                icon: "pi pi-search",
+                command: () => setZoom(4),
+            },
+        ],
+    };
+    return (_jsxs("div", { className: "a-flex a-gap-2 a-items-center a-mr-4", children: [_jsx(Menubar, { model: [zoomMenu], className: "a-border-0 a-p-0" }), _jsx("i", { className: classNames(device === "desktop" ? "a-bg-gray-100" : "", "pi pi-desktop  a-cursor-pointer"), onClick: () => {
+                    setDevice("desktop");
+                } }), _jsx("i", { className: classNames(device === "mobile" ? "a-bg-gray-100" : "", "pi pi-tablet  a-cursor-pointer"), onClick: () => {
+                    setDevice("mobile");
+                } }), _jsx("i", { className: "pi pi-external-link a-cursor-pointer", onClick: () => editContext.pageView.setFullscreen(true) })] }));
+}

package/dist/esm/editor/menubar/VersionSelector.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Dropdown } from "primereact/dropdown";
+export function VersionSelector({ item, onVersionSelected, }) {
+    var _a;
+    if (item == null)
+        return;
+    const selectedVersionTemplate = (option, props) => {
+        if (option) {
+            return _jsx("div", { children: option.version });
+        }
+        return _jsx("span", { children: props.placeholder });
+    };
+    const versionOptionTemplate = (option) => {
+        return (_jsxs("div", { children: [option.version, " ", _jsxs("div", { className: "a-text-xs", children: ["(", option.updated.toString(), " by ", option.updatedBy, ")"] })] }));
+    };
+    return (_jsx(_Fragment, { children: _jsx(Dropdown, { className: "a-text-sm", value: item.version, onChange: (e) => onVersionSelected(e.value), options: (_a = item._editor) === null || _a === void 0 ? void 0 : _a.versions, optionValue: "version", optionLabel: "version", placeholder: "Select a version", valueTemplate: selectedVersionTemplate, itemTemplate: versionOptionTemplate }) }));
+}

package/dist/esm/editor/previewContext.js

@@ -0,0 +1,5 @@
+"use client";
+import React, { useContext } from "react";
+const PreviewContext = React.createContext(undefined);
+export const PreviewContextProvider = PreviewContext.Provider;
+export const usePreviewContext = () => useContext(PreviewContext);

package/dist/esm/editor/services/contentService.js

@@ -0,0 +1,58 @@
+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 Cookies from "universal-cookie";
+export function getChildren(itemId, sessionId, templateIds = [], includeEmbeddedItems) {
+    return __awaiter(this, void 0, void 0, function* () {
+        let url = "/alpaca/headless/editor/children?itemId=" +
+            itemId +
+            "&sessionId=" +
+            sessionId +
+            "&includeEmbeddedItems=" +
+            includeEmbeddedItems;
+        url = templateIds.reduce((u, t) => u + "&templateIds=" + t, url);
+        const response = yield fetch(url, {
+            method: "GET",
+            credentials: "include",
+            headers: {
+                "Content-Type": "application/json",
+                Cookie: new Cookies().getAll(),
+            },
+            next: {
+                revalidate: 0,
+            },
+        });
+        return yield response.json();
+    });
+}
+export function getItem(item, sessionId) {
+    return __awaiter(this, void 0, void 0, function* () {
+        let url = "/alpaca/headless/editor/item?itemId=" +
+            item.id +
+            "&language=" +
+            item.language +
+            "&version=" +
+            item.version +
+            "&sessionId=" +
+            sessionId;
+        const response = yield fetch(url, {
+            method: "GET",
+            credentials: "include",
+            headers: {
+                "Content-Type": "application/json",
+                Cookie: new Cookies().getAll(),
+            },
+            next: {
+                revalidate: 0,
+            },
+        });
+        const json = yield response.json();
+        return json;
+    });
+}