@alpaca-editor/core 1.0.0 → 1.0.3764-editor-mono

package/dist/editor/media-selector/UploadZone.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UploadZone = UploadZone;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("primereact/utils");
+const react_1 = require("react");
+const react_2 = require("react");
+const Spinner_1 = require("../ui/Spinner");
+function UploadZone({ selectedFolderId, uploadCompleted, }) {
+    const [isDragging, setIsDragging] = (0, react_2.useState)(false);
+    const [isUploading, setIsUploading] = (0, react_2.useState)(false);
+    const dragZoneRef = (0, react_1.useRef)(null);
+    const handleDragOver = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    const handleDragEnter = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (dragZoneRef.current === e.target) {
+            setIsDragging(true);
+        }
+    }, []);
+    const handleDragLeave = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (dragZoneRef.current?.contains(e.target)) {
+            return;
+        }
+        setIsDragging(false);
+    }, []);
+    const handleDrop = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+        const files = Array.from(e.dataTransfer.files);
+        if (files.length > 0) {
+            onFilesDropped(files);
+        }
+    }, [selectedFolderId]);
+    const onFilesDropped = (0, react_1.useCallback)(async (files) => {
+        const formData = new FormData();
+        files.forEach((file, index) => {
+            formData.append("file" + index, file);
+        });
+        try {
+            setIsUploading(true);
+            const response = await fetch("/alpaca/editor/upload?folder=" + selectedFolderId, {
+                method: "POST",
+                body: formData,
+            });
+            setIsUploading(false);
+            if (!response.ok) {
+                throw new Error("Upload failed");
+            }
+            uploadCompleted();
+        }
+        catch (error) {
+            console.error("Error uploading files:", error);
+        }
+    }, [selectedFolderId]);
+    if (isUploading) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "p-4 border-2 border-dashed rounded-lg items-center justify-center gap-2 text-gray-500 text-sm flex ", children: [(0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: "2xl" }), " Uploading..."] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: dragZoneRef, className: (0, utils_1.classNames)("p-4 border-2 border-dashed rounded-lg flex flex-col items-center justify-center gap-2", isDragging
+                    ? "border-blue-400 bg-blue-50"
+                    : "border-gray-300 hover:border-blue-300 hover:bg-gray-50"), onDragOverCapture: handleDragOver, onDragEnterCapture: handleDragEnter, onDragLeaveCapture: handleDragLeave, onDropCapture: handleDrop, onClick: () => {
+                    const fileInput = document.createElement("input");
+                    fileInput.type = "file";
+                    fileInput.multiple = true;
+                    fileInput.accept = "image/*,video/*";
+                    fileInput.onchange = (e) => {
+                        const files = Array.from(e.target.files || []);
+                        if (files.length > 0) {
+                            onFilesDropped(files);
+                        }
+                    };
+                    fileInput.click();
+                }, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("i", { className: "pi pi-upload text-gray-400" }), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: isDragging ? "Drop files here" : "Drag and drop files here" })] }) }), isDragging && ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 border-2 border-dashed border-blue-400 pointer-events-none" }))] }));
+}

package/dist/editor/menubar/ActionsMenu.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionsMenu = ActionsMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+const react_1 = require("react");
+const overlaypanel_1 = require("primereact/overlaypanel");
+const menu_1 = require("primereact/menu");
+function ActionsMenu() {
+    const overlaypanel = (0, react_1.useRef)(null);
+    const editContext = (0, editContext_1.useEditContext)();
+    if (!editContext)
+        return null;
+    const items = editContext.configuration.editor.actionsMenu?.itemsFactory(editContext);
+    // Enhance each item to call overlaypanel.hide() after executing its original command
+    const enhancedItems = items?.map((item) => {
+        // Preserve the original command if present
+        const originalCommand = item.command;
+        return {
+            ...item,
+            command: (e) => {
+                if (originalCommand) {
+                    originalCommand(e);
+                }
+                // Close the overlay panel
+                overlaypanel.current?.hide();
+            },
+        };
+    });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { id: "actions-menu", className: "flex gap-2 items-center bg-blue-500 text-white px-4 h-12 hover:bg-blue-600 cursor-pointer ml-2", onClick: async (ev) => {
+                    overlaypanel.current.toggle(ev);
+                }, children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-sort-down-fill" }) }), (0, jsx_runtime_1.jsx)(overlaypanel_1.OverlayPanel, { dismissable: true, ref: overlaypanel, closeOnEscape: true, children: (0, jsx_runtime_1.jsx)(menu_1.Menu, { model: enhancedItems }) })] }));
+}

package/dist/editor/menubar/ActiveUsers.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActiveUsers = ActiveUsers;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+const User_1 = require("./User");
+function ActiveUsers() {
+    const editContext = (0, editContext_1.useEditContext)();
+    const mySession = editContext?.activeSessions.find((x) => x.sessionId === editContext?.sessionId);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "border-gray-200 flex gap-2 items-center", children: editContext?.activeSessions
+            .filter((x) => x.item?.id === mySession?.item?.id)
+            .map((s) => (0, jsx_runtime_1.jsx)(User_1.User, { session: s }, s.sessionId)) }));
+}

package/dist/editor/menubar/ApproveAndPublish.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApproveAndPublishButton = ApproveAndPublishButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+function ApproveAndPublishButton() {
+    const editContext = (0, editContext_1.useEditContext)();
+    return ((0, jsx_runtime_1.jsx)("div", { className: "bg-alpaca-blue hover:bg-alpaca-blue-light text-white p-4 cursor-pointer text-sm rounded-l-full", onClick: () => {
+            const workboxView = editContext?.configuration.editor.views.find((x) => x.name == "workbox");
+            if (workboxView)
+                editContext?.switchView(workboxView.name);
+        }, children: "Approve & Publish" }));
+}

package/dist/editor/menubar/BrowseHistory.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BrowseHistory = BrowseHistory;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+function BrowseHistory({ setHoveredItem, itemSelected, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    if (!editContext)
+        return;
+    const history = editContext.browseHistory;
+    return ((0, jsx_runtime_1.jsx)("div", { className: "overflow-y-auto flex flex-col gap-1 flex-1", children: history
+            .filter((x, i) => x.language && i < 7)
+            .map((x) => ((0, jsx_runtime_1.jsxs)("div", { className: "text-xs cursor-pointer hover:text-gray-400 flex gap-1", onMouseEnter: () => setHoveredItem(x), onMouseLeave: () => setHoveredItem(undefined), onClick: () => itemSelected(x), children: [x.icon && (0, jsx_runtime_1.jsx)("img", { src: x.icon, width: "16", height: "16" }), " ", x.path, " ", (0, jsx_runtime_1.jsxs)("span", { className: "text-500", children: ["(", x.language, ")"] })] }, x.id + x.language))) }));
+}

package/dist/editor/menubar/ItemLanguageVersion.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemLanguageVersion = ItemLanguageVersion;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+//import { BrowseHistory } from "./BrowseHistory";
+const LanguageSelector_1 = require("./LanguageSelector");
+const PageSelector_1 = require("./PageSelector");
+const Separator_1 = require("./Separator");
+const VersionSelector_1 = require("./VersionSelector");
+const NavButtons_1 = require("./NavButtons");
+const utils_1 = require("../utils");
+const itemutils_1 = require("../utils/itemutils");
+function ItemLanguageVersion() {
+    const editContext = (0, editContext_1.useEditContext)();
+    if (!editContext)
+        return;
+    const item = editContext.currentItemDescriptor;
+    if (!item)
+        return;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1 items-center", children: [(0, jsx_runtime_1.jsx)(PageSelector_1.PageSelector, { itemDescriptor: item }), (0, jsx_runtime_1.jsx)(Separator_1.Separator, {}), (0, jsx_runtime_1.jsx)(LanguageSelector_1.LanguageSelector, { showAllLanguagesSwitch: true, selectedLanguage: item.language, onLanguageSelected: (language) => {
+                    if (!language.versions) {
+                        if (editContext) {
+                            (0, itemutils_1.confirmCreateVersion)(editContext, language);
+                        }
+                    }
+                    else
+                        editContext?.loadItem({
+                            ...(0, utils_1.getItemDescriptor)(item),
+                            language: language.languageCode,
+                            version: 0,
+                        });
+                } }), (0, jsx_runtime_1.jsx)(Separator_1.Separator, {}), (0, jsx_runtime_1.jsx)(VersionSelector_1.VersionSelector, { itemDescriptor: item, versions: editContext.itemVersions, actualVersion: editContext.contentEditorItem?.version, onVersionSelected: (version) => {
+                    editContext.loadItem({ ...item, version });
+                } }), (0, jsx_runtime_1.jsx)(Separator_1.Separator, {}), (0, jsx_runtime_1.jsx)(NavButtons_1.NavButtons, {})] }));
+}

package/dist/editor/menubar/LanguageSelector.js

@@ -0,0 +1,33 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LanguageSelector = LanguageSelector;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Icons_1 = require("../ui/Icons");
+const overlaypanel_1 = require("primereact/overlaypanel");
+const react_1 = require("react");
+const inputswitch_1 = require("primereact/inputswitch");
+const editContext_1 = require("../client/editContext");
+function LanguageSelector({ selectedLanguage, darkMode, onLanguageSelected, showAllLanguagesSwitch, showAllLanguages = false, disabled = false, }) {
+    const overlaypanel = (0, react_1.useRef)(null);
+    const [showAllLanguagesInternal, setShowAllLanguagesInternal] = (0, react_1.useState)(showAllLanguages);
+    const editContext = (0, editContext_1.useEditContext)();
+    const allLanguages = editContext?.itemLanguages || [];
+    const currentLanguage = allLanguages.find((x) => x.languageCode === selectedLanguage);
+    const languages = showAllLanguagesInternal
+        ? allLanguages
+        : allLanguages.filter((x) => x.versions > 0);
+    languages.sort((a, b) => a.name.localeCompare(b.name));
+    const selectLanguage = async (language) => {
+        onLanguageSelected(language);
+        overlaypanel.current?.hide();
+        return;
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `p-[7px] text-sm cursor-pointer flex items-center gap-3 ${darkMode
+                    ? "text-gray-500 hover:bg-gray-300"
+                    : "text-gray-200 hover:bg-gray-500"}  rounded-md ${disabled ? "opacity-50" : ""}`, onClick: (ev) => {
+                    if (disabled)
+                        return;
+                    overlaypanel.current?.toggle(ev, ev.currentTarget);
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [currentLanguage && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: currentLanguage.icon, className: "h-5" }), " ", currentLanguage.name] })), !currentLanguage && (0, jsx_runtime_1.jsx)("div", { children: "Select language" })] }), (0, jsx_runtime_1.jsx)("div", { className: `p-dropdown-trigger ${darkMode ? "text-gray-500" : "text-gray-200"}`, role: "button", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-label": "Select a language", "data-pc-section": "trigger", children: (0, jsx_runtime_1.jsx)(Icons_1.ArrowDownIcon, {}) })] }), (0, jsx_runtime_1.jsx)(overlaypanel_1.OverlayPanel, { dismissable: true, ref: overlaypanel, closeOnEscape: true, children: (0, jsx_runtime_1.jsxs)("div", { className: "max-h-[50vh] min-w-64 flex flex-col", children: [showAllLanguagesSwitch && ((0, jsx_runtime_1.jsxs)("div", { className: "text-xs p-2 flex items-center gap-2 justify-center", children: [(0, jsx_runtime_1.jsx)("span", { className: "cursor-pointer", onClick: () => setShowAllLanguagesInternal(false), children: "Item languages" }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: showAllLanguagesInternal, onChange: (e) => setShowAllLanguagesInternal(e.value) }), (0, jsx_runtime_1.jsx)("span", { className: "cursor-pointer", onClick: () => setShowAllLanguagesInternal(true), children: "All languages" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 overflow-y-auto", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex flex-col text-sm", children: languages.map((x) => ((0, jsx_runtime_1.jsxs)("div", { className: "cursor-pointer hover:bg-gray-200 flex gap-2 p-2", onClick: () => selectLanguage(x), children: [(0, jsx_runtime_1.jsx)("img", { src: x.icon, className: "h-5" }), " ", x.name, " (", x.versions, ")"] }, x.languageCode))) }), languages.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "p-2 text-gray-500", children: "This item has no languages" }))] })] }) })] }));
+}

package/dist/editor/menubar/Menu.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = Menu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const menubar_1 = require("primereact/menubar");
+const editContext_1 = require("../client/editContext");
+const ItemLanguageVersion_1 = require("./ItemLanguageVersion");
+const config_1 = require("../../config/config");
+const PageViewerControls_1 = require("./PageViewerControls");
+const ApproveAndPublish_1 = require("./ApproveAndPublish");
+function Menu() {
+    const editContext = (0, editContext_1.useEditContext)();
+    if (!editContext)
+        return;
+    const configuration = (0, config_1.getConfiguration)();
+    if (!configuration.editor.mainNavigation)
+        return null;
+    const getSubItems = (items) => {
+        if (typeof items === "function")
+            items = items(editContext);
+        return items.map((y) => {
+            if ("execute" in y)
+                return {
+                    id: y.id,
+                    label: y.label,
+                    icon: y.icon,
+                    disabled: editContext.isCommandDisabled({ command: y }),
+                    command: async (event) => {
+                        await editContext.executeCommand({
+                            command: y,
+                            event: event.originalEvent,
+                        });
+                    },
+                };
+            return {
+                id: y.id,
+                label: y.label,
+                icon: y.icon,
+            };
+        });
+    };
+    const menuItems = configuration.editor.mainNavigation.map((x) => {
+        if ("execute" in x)
+            return {
+                id: x.id,
+                label: x.label,
+                icon: x.icon,
+                disabled: editContext.isCommandDisabled({ command: x }),
+                command: async (event) => {
+                    await editContext.executeCommand({
+                        command: x,
+                        event: event.originalEvent,
+                    });
+                },
+            };
+        return {
+            id: x.id,
+            label: x.label,
+            icon: x.icon,
+            items: x.items ? getSubItems(x.items) : undefined,
+        };
+    });
+    const endContent = ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3 items-center", children: [(0, jsx_runtime_1.jsx)(PageViewerControls_1.PageViewerControls, {}), (0, jsx_runtime_1.jsx)(ItemLanguageVersion_1.ItemLanguageVersion, {}), (0, jsx_runtime_1.jsx)(ApproveAndPublish_1.ApproveAndPublishButton, {})] }));
+    return ((0, jsx_runtime_1.jsx)(menubar_1.Menubar, { model: menuItems, end: endContent, className: "p-0 text-sm rounded-none border-0 border-b bg-gray-50 shadow-bottom-soft z-10 min-h-12" }));
+}

package/dist/editor/menubar/NavButtons.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavButtons = NavButtons;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+const utils_1 = require("primereact/utils");
+function NavButtons() {
+    const editContext = (0, editContext_1.useEditContext)();
+    if (!editContext)
+        return;
+    const item = editContext.contentEditorItem;
+    if (!item)
+        return;
+    const history = editContext.browseHistory;
+    const currentIndex = history.findIndex((x) => x.id === item.id && x.language === item.language);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.classNames)(currentIndex < history.length - 1
+                    ? " text-gray-200"
+                    : "text-gray-400", "cursor-pointer hover:bg-gray-500 flex gap-2 p-2 rounded-md "), onClick: () => {
+                    const currentIndex = history.findIndex((x) => x.id === item.id && x.language === item.language);
+                    if (currentIndex < history.length - 1) {
+                        const historyItem = history[currentIndex + 1];
+                        if (!historyItem)
+                            return;
+                        editContext.loadItem({
+                            id: historyItem.id,
+                            language: historyItem.language,
+                            version: historyItem.version || 0,
+                        }, { addToBrowseHistory: false });
+                    }
+                }, children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-chevron-left text-sm" }) }, "nav-fwd"), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.classNames)(currentIndex > 0 ? " text-gray-200" : "text-gray-400", "cursor-pointer hover:bg-gray-500 flex gap-2 p-2 rounded-md "), onClick: () => {
+                    const currentIndex = history.findIndex((x) => x.id === item.id && x.language === item.language);
+                    if (currentIndex > 0) {
+                        const historyItem = history[currentIndex - 1];
+                        if (!historyItem)
+                            return;
+                        editContext.loadItem({
+                            id: historyItem.id,
+                            language: historyItem.language,
+                            version: historyItem.version || 0,
+                        }, { addToBrowseHistory: false });
+                    }
+                }, children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-chevron-right text-sm" }) }, "nav-back")] }));
+}

package/dist/editor/menubar/PageSelector.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageSelector = PageSelector;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const overlaypanel_1 = require("primereact/overlaypanel");
+const editContext_1 = require("../client/editContext");
+const BrowseHistory_1 = require("./BrowseHistory");
+const Icons_1 = require("../ui/Icons");
+const button_1 = require("primereact/button");
+const ItemSearch_1 = require("../ui/ItemSearch");
+const ScrollingContentTree_1 = require("../ScrollingContentTree");
+function PageSelector({ itemDescriptor, }) {
+    const overlaypanel = (0, react_1.useRef)(null);
+    const editContext = (0, editContext_1.useEditContext)();
+    const [item, setItem] = (0, react_1.useState)();
+    const [hoveredItem, setHoveredItem] = (0, react_1.useState)();
+    const loadItem = (selectedItem) => {
+        if (Array.isArray(selectedItem) && selectedItem[0]) {
+            selectedItem = selectedItem[0];
+        }
+        if (!selectedItem)
+            return;
+        const itemDescriptor = selectedItem;
+        editContext?.loadItem({
+            id: itemDescriptor.id,
+            language: itemDescriptor.language,
+            version: 0,
+        });
+        overlaypanel.current?.hide();
+    };
+    (0, react_1.useEffect)(() => {
+        const setName = async () => {
+            if (!itemDescriptor)
+                return;
+            const item = await editContext?.itemsRepository.getItem(itemDescriptor);
+            setItem(item);
+        };
+        setName();
+    }, [itemDescriptor]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { id: "page-selector-button", className: "p-[7px] text-sm cursor-pointer flex items-center gap-3 text-gray-200 hover:bg-gray-500 rounded-md", onClick: (ev) => overlaypanel.current?.toggle(ev, ev.currentTarget), "data-testid": "page-selector-button", children: [item?.name || "unknown", (0, jsx_runtime_1.jsx)("div", { className: "p-dropdown-trigger", role: "button", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-label": "Select a page", "data-pc-section": "trigger", children: (0, jsx_runtime_1.jsx)(Icons_1.ArrowDownIcon, {}) })] }), (0, jsx_runtime_1.jsx)(overlaypanel_1.OverlayPanel, { dismissable: true, ref: overlaypanel, closeOnEscape: true, children: (0, jsx_runtime_1.jsxs)("div", { className: "h-[75vh] min-w-48 flex flex-col overflow-hidden", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex flex-col gap-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: "p-2 flex flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-gray-500 mb-2 flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(Icons_1.ArrowDownIcon, {}), " Search"] }), (0, jsx_runtime_1.jsx)(ItemSearch_1.ItemSearch, { autoFocus: true, setHoveredItem: setHoveredItem, itemSelected: (item) => loadItem(item) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-t p-2 pb-1 text-xs text-gray-500 flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(Icons_1.ArrowDownIcon, {}), " Select"] }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 overflow-auto", children: (0, jsx_runtime_1.jsx)(ScrollingContentTree_1.ScrollingContentTree, { selectedItemId: hoveredItem?.id ?? item?.id, onSelectionChange: loadItem }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "border-t p-2 flex flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-gray-500 mb-2 flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(Icons_1.ArrowDownIcon, {}), " Last visited"] }), (0, jsx_runtime_1.jsx)(BrowseHistory_1.BrowseHistory, { setHoveredItem: setHoveredItem, itemSelected: (item) => loadItem(item) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "border-t p-2 flex flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-gray-500 mb-2 flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(Icons_1.ArrowDownIcon, {}), " Actions"] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", icon: "pi pi-plus", label: "New Page", onClick: () => editContext?.openCreatePageDialog() }), (0, jsx_runtime_1.jsx)(button_1.Button, { id: "delete-page-button", severity: "danger", size: "small", icon: "pi pi-times", label: "Delete", onClick: async (ev) => {
+                                                if (item &&
+                                                    (await editContext?.executeCommand({
+                                                        command: editContext?.configuration.commands.deleteItem,
+                                                        event: ev,
+                                                        data: { items: [item] },
+                                                    })))
+                                                    editContext?.openSplashScreen();
+                                            } })] })] })] }) })] }));
+}

package/dist/editor/menubar/PageViewerControls.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageViewerControls = PageViewerControls;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("primereact/utils");
+const editContext_1 = require("../client/editContext");
+const Separator_1 = require("./Separator");
+const Icons_1 = require("../ui/Icons");
+const SimpleIconButton_1 = require("../ui/SimpleIconButton");
+function PageViewerControls() {
+    const editContext = (0, editContext_1.useEditContext)();
+    if (!editContext)
+        return null;
+    const hasLayout = editContext.contentEditorItem?.hasLayout;
+    const pageViewContext = editContext.pageView;
+    const device = pageViewContext.device;
+    const setDevice = pageViewContext.setDevice;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [hasLayout && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [" ", (0, jsx_runtime_1.jsx)("i", { className: (0, utils_1.classNames)(device === "desktop"
+                            ? "bg-gray-200"
+                            : " hover:bg-gray-200 text-gray-100 hover:text-gray-800", "pi pi-desktop cursor-pointer p-2 rounded-full"), title: "Desktop", onClick: () => {
+                            setDevice("desktop");
+                        } }), (0, jsx_runtime_1.jsx)("i", { className: (0, utils_1.classNames)(device && device !== "desktop"
+                            ? "bg-gray-200"
+                            : " hover:bg-gray-200 text-gray-100 hover:text-gray-800", "pi pi-mobile cursor-pointer p-2 rounded-full"), title: "Mobile", onClick: () => {
+                            if (editContext.configuration.devices[0]) {
+                                setDevice(editContext.configuration.devices[0].name);
+                            }
+                        } }), (0, jsx_runtime_1.jsx)("i", { className: (0, utils_1.classNames)(!device
+                            ? "bg-gray-200"
+                            : " hover:bg-gray-200 text-gray-100 hover:text-gray-800", "w-8 h-8 cursor-pointer p-1 rounded-full"), title: "Form", onClick: () => {
+                            setDevice("");
+                        }, children: (0, jsx_runtime_1.jsx)(Icons_1.FormEditIcon, {}) }), (0, jsx_runtime_1.jsx)(Separator_1.Separator, { size: "large" }), (0, jsx_runtime_1.jsx)("i", { className: "pi pi-external-link cursor-pointer hover:bg-gray-200 p-2 rounded-full text-gray-100 hover:text-gray-800", title: "Fullscreen", onClick: () => pageViewContext.setFullscreen(true) }), !editContext.user?.isLimitedPreviewUser && ((0, jsx_runtime_1.jsx)("i", { className: (0, utils_1.classNames)(editContext.previewMode
+                            ? "bg-gray-200"
+                            : " hover:bg-gray-200 text-gray-100 hover:text-gray-800", "pi pi-eye cursor-pointer p-2 rounded-full"), title: "Preview", onClick: () => editContext.setPreviewMode((x) => !x) })), (0, jsx_runtime_1.jsx)(Separator_1.Separator, { size: "large" })] })), (0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { icon: (0, jsx_runtime_1.jsx)(Icons_1.CompareIcon, { className: "w-6 h-6 p-1" }), label: "Compare", size: "large", className: editContext.compareMode
+                    ? "text-gray-600"
+                    : "text-gray-100 hover:text-gray-600", selected: editContext.compareMode, onClick: () => editContext.setCompareMode(!editContext.compareMode) })] }));
+}

package/dist/editor/menubar/Separator.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Separator = Separator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("primereact/utils");
+function Separator({ size }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.classNames)("border-r border-gray-300", size === "large" ? "h-7 mx-2" : "h-4 mx-1") }));
+}

package/dist/editor/menubar/SiteInfo.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SiteInfo = SiteInfo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const overlaypanel_1 = require("primereact/overlaypanel");
+const editContext_1 = require("../client/editContext");
+const react_1 = require("react");
+const contentService_1 = require("../services/contentService");
+const progressspinner_1 = require("primereact/progressspinner");
+function SiteInfo() {
+    const editContext = (0, editContext_1.useEditContext)();
+    const overlaypanel = (0, react_1.useRef)(null);
+    const [sites, setSites] = (0, react_1.useState)();
+    if (!editContext)
+        return null;
+    const loadSites = async () => {
+        const sites = await (0, contentService_1.getSites)();
+        if (sites.data)
+            setSites(sites.data);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "my-2 flex gap-2 items-center text-gray-200 cursor-pointer", title: editContext.pageView.site?.name, onClick: async (ev) => {
+            setSites(undefined);
+            overlaypanel.current.toggle(ev);
+            await loadSites();
+        }, children: [(0, jsx_runtime_1.jsx)("i", { className: "pi pi-globe text-lg" }), (0, jsx_runtime_1.jsx)(overlaypanel_1.OverlayPanel, { dismissable: true, ref: overlaypanel, closeOnEscape: true, children: (0, jsx_runtime_1.jsx)("div", { className: "max-h-[45vh] min-w-20 flex flex-col overflow-hidden text-xs", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-4", children: ["This page is part of the site:", " ", (0, jsx_runtime_1.jsx)("span", { className: "font-bold", children: editContext.pageView.site?.name }), !sites && (0, jsx_runtime_1.jsx)(progressspinner_1.ProgressSpinner, { className: "w-5 h-5" }), sites && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "border-b my-2", children: "Sites registered:" }), (0, jsx_runtime_1.jsx)("ul", { children: sites.map((site) => ((0, jsx_runtime_1.jsx)("li", { children: site.name }, site.name))) })] }))] }) }) })] }));
+}

package/dist/editor/menubar/User.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.User = User;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+function User({ session }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    if (!editContext)
+        return;
+    const userName = session.user.displayName || session.user.name;
+    const idxBackslash = userName.indexOf("\\");
+    const letter = idxBackslash >= 0
+        ? userName[idxBackslash + 1]
+        : userName[0]
+            ? userName[0].toUpperCase()
+            : "";
+    return ((0, jsx_runtime_1.jsx)("div", { className: "rounded-full w-8 h-8 grid items-center justify-center text-white", style: { background: session.color }, title: userName + " (" + session.user.email + ")", children: letter }));
+}

package/dist/editor/menubar/VersionSelector.js

@@ -0,0 +1,49 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VersionSelector = VersionSelector;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Icons_1 = require("../ui/Icons");
+const react_1 = require("react");
+const overlaypanel_1 = require("primereact/overlaypanel");
+const button_1 = require("primereact/button");
+const editContext_1 = require("../client/editContext");
+const createVersionCommand_1 = require("../commands/createVersionCommand");
+const deleteVersionCommand_1 = require("../commands/deleteVersionCommand");
+function VersionSelector({ itemDescriptor, actualVersion, onVersionSelected, readOnly, darkMode, versions, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const overlaypanel = (0, react_1.useRef)(null);
+    if (itemDescriptor == null)
+        return;
+    const getVersionLabel = () => {
+        if (versions.length === 0)
+            return "No versions";
+        if (itemDescriptor.version === 0)
+            return "Latest" + (actualVersion ? " (" + actualVersion + ")" : "");
+        return itemDescriptor.version;
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `p-[7px] text-sm cursor-pointer flex items-center gap-3 ${darkMode
+                    ? "text-gray-500 hover:bg-gray-200"
+                    : "text-gray-200 hover:bg-gray-500"} rounded-md a`, onClick: (ev) => overlaypanel.current?.toggle(ev, ev.currentTarget), children: [(0, jsx_runtime_1.jsx)("div", { className: "flex gap-2", children: getVersionLabel() }), (0, jsx_runtime_1.jsx)("div", { className: `p-dropdown-trigger ${darkMode ? "text-gray-500" : "text-gray-200"}`, role: "button", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-label": "Select a version", "data-pc-section": "trigger", children: (0, jsx_runtime_1.jsx)(Icons_1.ArrowDownIcon, {}) })] }), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, { dismissable: true, ref: overlaypanel, closeOnEscape: true, children: [(0, jsx_runtime_1.jsx)("div", { className: "max-h-[50vh] min-w-20 flex flex-col", children: (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-auto", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col text-sm", children: [versions.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "p-2", children: "No versions" })), versions.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "cursor-pointer hover:bg-gray-200 flex gap-2 p-2", onClick: () => {
+                                            onVersionSelected(0);
+                                            overlaypanel.current?.hide();
+                                        }, children: "Latest" }, "latest")), versions.map((x) => ((0, jsx_runtime_1.jsxs)("div", { className: "cursor-pointer hover:bg-gray-200 flex gap-2 p-2", onClick: () => {
+                                            onVersionSelected(x.version);
+                                            overlaypanel.current?.hide();
+                                        }, children: [itemDescriptor.version === x.version && ((0, jsx_runtime_1.jsx)("i", { className: "pi pi-check", style: { fontSize: "1rem" } })), " ", x.version] }, x.version)))] }) }) }), !readOnly && ((0, jsx_runtime_1.jsxs)("div", { className: "border-t p-2 flex flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-gray-500 mb-2 flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(Icons_1.ArrowDownIcon, {}), " Actions"] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { text: true, size: "small", icon: "pi pi-plus", label: "Add Version", onClick: async (ev) => {
+                                            await editContext?.executeCommand({
+                                                command: (0, createVersionCommand_1.getCreateAndSwitchToNewVersionCommand)({}),
+                                                event: ev,
+                                            });
+                                            overlaypanel.current?.hide();
+                                            onVersionSelected(0);
+                                        } }), (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, size: "small", icon: "pi pi-times", label: "Delete Version", severity: "danger", disabled: versions.length === 0, onClick: async (ev) => {
+                                            editContext;
+                                            await editContext?.executeCommand({
+                                                command: (0, deleteVersionCommand_1.getDeleteVersionCommand)({}),
+                                                event: ev,
+                                            });
+                                            overlaypanel.current?.hide();
+                                            onVersionSelected(0);
+                                        } }), " "] })] }))] })] }));
+}