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

package/dist/cjs/editor/EditorClient.js

@@ -1,753 +0,0 @@
-"use strict";
-"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());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EditorClient = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_uuid_1 = __importDefault(require("react-uuid"));
-const api_1 = require("primereact/api");
-const menubar_1 = require("primereact/menubar");
-const progressspinner_1 = require("primereact/progressspinner");
-const toast_1 = require("primereact/toast");
-const splitter_1 = require("primereact/splitter");
-const blockui_1 = require("primereact/blockui");
-const confirmdialog_1 = require("primereact/confirmdialog");
-const __1 = require("..");
-const navigation_1 = require("next/navigation");
-const ComponentTree_1 = require("./ComponentTree");
-const LanguageSelector_1 = require("./LanguageSelector");
-const componentTreeHelper_1 = require("./componentTreeHelper");
-const ComponentPalette_1 = require("./ComponentPalette");
-const AiTerminal_1 = require("./AiTerminal");
-const EditHistory_1 = require("./EditHistory");
-const VersionSelector_1 = require("./VersionSelector");
-const editService_1 = require("./editService");
-require("../../editor.css");
-require("../../primeicons/primeicons.css");
-//import "../../primereact/resources/themes/lara-light-indigo/theme.css";
-require("../../primereact/resources/themes/md-light-indigo/theme.css");
-const MediaSelector_1 = require("./MediaSelector");
-const componentCommands_1 = require("./componentCommands");
-const contentService_1 = require("./contentService");
-const ConfirmationDialog_1 = __importDefault(require("./ConfirmationDialog"));
-const SidebarTabs_1 = __importDefault(require("./SidebarTabs"));
-const MainLayout_1 = __importDefault(require("./MainLayout"));
-const button_1 = require("primereact/button");
-const Utils_1 = require("./Utils");
-const utils_1 = require("primereact/utils");
-const ContentTree_1 = __importDefault(require("./ContentTree"));
-const Workbox_1 = __importDefault(require("./Workbox"));
-function EditorClient({ page, dictionaryObject, edit, site, children, }) {
-    const router = (0, navigation_1.useRouter)();
-    const pathname = (0, navigation_1.usePathname)();
-    const searchParams = (0, navigation_1.useSearchParams)();
-    const [selection, setSelection] = (0, react_1.useState)([]);
-    const [selectedForInsertion, setSelectedForInsertion] = (0, react_1.useState)("");
-    const [liveUpdatingFields, setLiveUpdatingFields] = (0, react_1.useState)([]);
-    const [currentEditOperation, setCurrentEditOperation] = (0, react_1.useState)();
-    const [dictionary, setDictionary] = (0, react_1.useState)(dictionaryObject);
-    const [unresolvedDictionaryKeys, setUnresolvedDictionaryKeys] = (0, react_1.useState)([]);
-    const [editData, setEditData] = (0, react_1.useState)(edit);
-    const [refreshCompletedFlag, setRefreshCompletedFlag] = (0, react_1.useState)(false);
-    const [refreshing, setRefreshing] = (0, react_1.useState)(false);
-    const [updateContentEditingFields, setUpdateContentEditingFields] = (0, react_1.useState)(false);
-    const [uiBlocked, setUiBlocked] = (0, react_1.useState)(false);
-    const [dragObject, setDragObject] = (0, react_1.useState)();
-    const [refreshTimer, setRefreshTimer] = (0, react_1.useState)();
-    const [mediaResolver, setMediaResolver] = (0, react_1.useState)();
-    const [mediaSelectorVisible, setMediaSelectorVisible] = (0, react_1.useState)(false);
-    const [selectedMediaIdPath, setSelectedMediaIdPath] = (0, react_1.useState)("");
-    const [scrollIntoView, setScrollIntoView] = (0, react_1.useState)();
-    const [nextSelection, setNextSelection] = (0, react_1.useState)();
-    const editorContainerRef = (0, react_1.useRef)(null);
-    const confirmationDialogRef = (0, react_1.useRef)(null);
-    const [showRightSidebar, setShowRightSidebar] = (0, Utils_1.useLocalStorage)("alpaca-headless-editor-show-right-sidebar", false);
-    const [showTabsCenter, setShowTabsCenter] = (0, react_1.useState)(false);
-    const [item, setItem] = (0, react_1.useState)();
-    const [focusedField, setFocusedField] = (0, react_1.useState)();
-    const [device, setDevice] = (0, react_1.useState)("desktop");
-    const [zoom, setZoom] = (0, react_1.useState)(1);
-    const [scroll, setScroll] = (0, react_1.useState)(0);
-    const [fullscreen, setFullscreen] = (0, react_1.useState)(false);
-    const [showFullscreenHint, setShowFullscreenHint] = (0, react_1.useState)(false);
-    const sessionId = searchParams.get("session");
-    if (!sessionId)
-        return;
-    const hasUnsavedChanges = () => edit.operations.filter((op) => !op.isCommitted).length;
-    function ensureSavedBeforeLeaving(callback, title) {
-        var _a;
-        if (!hasUnsavedChanges()) {
-            callback();
-            return;
-        }
-        (_a = confirmationDialogRef.current) === null || _a === void 0 ? void 0 : _a.confirm({
-            message: "You have unsaved changes.",
-            header: title || "Close document",
-            icon: "pi pi-exclamation-triangle",
-            acceptLabel: "Save changes",
-            rejectLabel: "Discard changes",
-            showCancel: true,
-            accept: () => saveAndRefresh(callback),
-            reject: () => {
-                callback();
-            },
-        });
-    }
-    function loadUrl(url) {
-        setRefreshing(true);
-        router.push(url, { scroll: false });
-    }
-    function createAndSwitchToNewVersion() {
-        ensureSavedBeforeLeaving(() => __awaiter(this, void 0, void 0, function* () {
-            yield (0, editService_1.createVersion)(getPageItemDescriptor(), sessionId);
-            const current = new URLSearchParams(Array.from(searchParams.entries()));
-            current.delete("version");
-            current.set("session", (0, react_uuid_1.default)());
-            const newUrl = `${pathname}?${current.toString()}`;
-            router.push(newUrl, { scroll: false });
-        }), "Create version");
-    }
-    function switchLanguage(language) {
-        ensureSavedBeforeLeaving(() => __awaiter(this, void 0, void 0, function* () {
-            const current = new URLSearchParams(Array.from(searchParams.entries()));
-            current.set("language", language);
-            current.delete("version");
-            current.set("session", (0, react_uuid_1.default)());
-            const newUrl = `${pathname}?${current.toString()}`;
-            loadUrl(newUrl);
-        }));
-    }
-    function switchVersion(version) {
-        ensureSavedBeforeLeaving(() => __awaiter(this, void 0, void 0, function* () {
-            const current = new URLSearchParams(Array.from(searchParams.entries()));
-            current.set("version", version.toString());
-            current.set("session", (0, react_uuid_1.default)());
-            const newUrl = `${pathname}?${current.toString()}`;
-            loadUrl(newUrl);
-        }));
-    }
-    function navigateToPage(pageId) {
-        ensureSavedBeforeLeaving(() => __awaiter(this, void 0, void 0, function* () {
-            const current = new URLSearchParams(Array.from(searchParams.entries()));
-            current.set("itemid", pageId);
-            current.delete("version");
-            current.set("session", (0, react_uuid_1.default)());
-            const newUrl = `${pathname}?${current.toString()}`;
-            setNextSelection([]);
-            setItem(undefined);
-            loadUrl(newUrl);
-        }));
-    }
-    function loadItem(itemToLoad) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const isNewItem = itemToLoad.id != (item === null || item === void 0 ? void 0 : item.id) ||
-                itemToLoad.language != (item === null || item === void 0 ? void 0 : item.language) ||
-                itemToLoad.version != (item === null || item === void 0 ? void 0 : item.version);
-            const isPageItem = itemToLoad.id == page.id && itemToLoad.language == page.language;
-            if (isNewItem && !isPageItem) {
-                const result = yield (0, contentService_1.getItem)(page, itemToLoad, sessionId);
-                setItem(result);
-            }
-        });
-    }
-    function handleErrorResult(result) {
-        var _a;
-        if (result.type === "error") {
-            showErrorToast(result);
-            return true;
-        }
-        if (result.type === "unauthenticated") {
-            (_a = confirmationDialogRef.current) === null || _a === void 0 ? void 0 : _a.confirm({
-                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;
-        }
-    }
-    (0, react_1.useEffect)(() => {
-        if (selection.length)
-            setSelectedForInsertion("");
-    }, [selection]);
-    (0, react_1.useEffect)(() => {
-        const sync = () => __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            if (currentEditOperation) {
-                const result = yield (0, editService_1.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);
-                }
-                else {
-                    const lastOp = edit.operations.findLast((x) => x);
-                    if (lastOp === null || lastOp === void 0 ? void 0 : lastOp.isCommitted) {
-                        lastOp.isCommitted = false;
-                    }
-                }
-                setEditData(Object.assign({}, edit));
-                if (result.type == "move-component" ||
-                    result.type === "add-component" ||
-                    result.type === "link-component") {
-                    setNextSelection([(_a = result.component) === null || _a === void 0 ? void 0 : _a.id]);
-                    requestRefresh("immediate");
-                    return;
-                }
-                if (!currentEditOperation.noRefresh)
-                    requestRefresh(currentEditOperation.refreshAfterQuietPeriod
-                        ? "waitForQuietPeriod"
-                        : "delayed");
-            }
-        });
-        sync();
-    }, [currentEditOperation]);
-    const ensureLock = (field) => __awaiter(this, void 0, void 0, function* () {
-        if (!field || !field.item)
-            return;
-        if (!field.hasLock) {
-            lockItemAndRefresh(field.item);
-        }
-    });
-    const lockItemAndRefresh = (item) => __awaiter(this, void 0, void 0, function* () {
-        yield (0, editService_1.lockItem)(item);
-        requestRefresh("immediate");
-    });
-    const executeWorkflowCommandAndRefresh = (item, commandId) => __awaiter(this, void 0, void 0, function* () {
-        yield (0, editService_1.executeWorkflowCommand)(item, commandId, "");
-        requestRefresh("immediate");
-    });
-    (0, react_1.useEffect)(() => {
-        if (focusedField === null || focusedField === void 0 ? void 0 : focusedField.item) {
-            if (!getComponentById(focusedField.item.id))
-                loadItem(focusedField.item);
-            ensureLock(focusedField);
-        }
-    }, [focusedField]);
-    const addParentComponentReferencesToPlaceholders = (component) => {
-        component.placeholders.forEach((p) => {
-            p.parentComponent = component;
-        });
-    };
-    (0, react_1.useEffect)(() => {
-        var _a;
-        setRefreshCompletedFlag(!refreshCompletedFlag);
-        if (nextSelection) {
-            setSelection(nextSelection);
-            setNextSelection(undefined);
-        }
-        setLiveUpdatingFields([]);
-        page === null || page === void 0 ? void 0 : page.placeholders.forEach((p) => {
-            p.components.forEach((c) => {
-                addParentComponentReferencesToPlaceholders(c);
-            });
-        });
-        if ((page === null || page === void 0 ? void 0 : page.versions.length) === 0) {
-            (_a = confirmationDialogRef.current) === null || _a === void 0 ? void 0 : _a.confirm({
-                message: "This page has no version in language " +
-                    (page === null || page === void 0 ? void 0 : page.language) +
-                    ". Do you want to create a new version?",
-                header: "Create Version?",
-                icon: "pi pi-exclamation-triangle",
-                acceptLabel: "Yes, create version",
-                rejectLabel: "No",
-                accept: () => createAndSwitchToNewVersion(),
-            });
-        }
-        setRefreshing(false);
-    }, [page]);
-    const requestRefresh = (mode) => {
-        if (mode === "immediate") {
-            console.log("Immediate refresh requested");
-            clearTimeout(refreshTimer);
-            setRefreshing(true);
-            router.refresh();
-            setRefreshTimer(undefined);
-            return;
-        }
-        console.log("request refresh with mode: " + mode);
-        if (mode === "waitForQuietPeriod" && refreshTimer) {
-            clearTimeout(refreshTimer);
-        }
-        if (!refreshTimer || mode === "waitForQuietPeriod") {
-            setRefreshTimer(setTimeout(() => {
-                console.log("refreshing");
-                router.refresh();
-                setRefreshing(true);
-                setRefreshTimer(undefined);
-            }, mode === "waitForQuietPeriod" ? 2000 : 700));
-        }
-    };
-    const saveAndRefresh = (callback) => __awaiter(this, void 0, void 0, function* () {
-        if (!edit.operations.length) {
-            if (callback)
-                callback();
-            return;
-        }
-        setUiBlocked(true);
-        if (!(yield (0, editService_1.commitChanges)(sessionId))) {
-            setUiBlocked(false);
-            return;
-        }
-        setCurrentEditOperation(undefined);
-        router.refresh();
-        setRefreshing(true);
-        //setEditOperations([]);
-        setUiBlocked(false);
-        toast.current.show({
-            severity: "success",
-            summary: "Saved",
-            detail: "Your changes were saved successfully.",
-            life: 3000,
-        });
-        if (callback)
-            callback();
-    });
-    (0, react_1.useEffect)(() => {
-        if (fullscreen)
-            setShowFullscreenHint(true);
-    }, [fullscreen]);
-    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 (event.ctrlKey && event.key === "F11") {
-                event.preventDefault();
-                console.log("toggle fullscreen");
-                setFullscreen(!fullscreen);
-            }
-        });
-    }
-    if (typeof window !== "undefined")
-        (0, Utils_1.useEventListenerExt)("keydown", handleKeyDown, window);
-    const toast = (0, react_1.useRef)();
-    (0, react_1.useEffect)(() => {
-        setEditData(edit);
-    }, [edit]);
-    function getComponentById(id) {
-        if (!page)
-            return null;
-        return (0, componentTreeHelper_1.findComponent)(id, page.placeholders);
-    }
-    function redo() {
-        return __awaiter(this, void 0, void 0, function* () {
-            setUpdateContentEditingFields(!updateContentEditingFields);
-            let result = yield (0, editService_1.executeRedo)(sessionId);
-            if (result.type === "success") {
-                router.refresh();
-                setRefreshing(true);
-                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(numOperations) {
-        return __awaiter(this, void 0, void 0, function* () {
-            setUpdateContentEditingFields(!updateContentEditingFields);
-            let result = yield (0, editService_1.executeUndo)(sessionId, numOperations);
-            if (result.type === "success") {
-                router.refresh();
-                setRefreshing(true);
-                return true;
-            }
-            else {
-                showErrorToast(result);
-                return false;
-            }
-        });
-    }
-    const getLiveFieldIfExists = (field) => {
-        const existingField = liveUpdatingFields.find((f) => {
-            var _a, _b, _c, _d, _e, _f;
-            return f.id === field.id &&
-                ((_a = f.item) === null || _a === void 0 ? void 0 : _a.language) === ((_b = field.item) === null || _b === void 0 ? void 0 : _b.language) &&
-                ((_c = f.item) === null || _c === void 0 ? void 0 : _c.version) === ((_d = field.item) === null || _d === void 0 ? void 0 : _d.version) &&
-                ((_e = f.item) === null || _e === void 0 ? void 0 : _e.id) === ((_f = field.item) === null || _f === void 0 ? void 0 : _f.id);
-        });
-        if (existingField)
-            return existingField;
-        return null;
-    };
-    const getLiveField = (field) => {
-        const existingField = liveUpdatingFields.find((f) => {
-            var _a, _b, _c, _d, _e, _f;
-            return f.id === field.id &&
-                ((_a = f.item) === null || _a === void 0 ? void 0 : _a.language) === ((_b = field.item) === null || _b === void 0 ? void 0 : _b.language) &&
-                ((_c = f.item) === null || _c === void 0 ? void 0 : _c.version) === ((_d = field.item) === null || _d === void 0 ? void 0 : _d.version) &&
-                ((_e = f.item) === null || _e === void 0 ? void 0 : _e.id) === ((_f = field.item) === null || _f === void 0 ? void 0 : _f.id);
-        });
-        if (existingField)
-            return existingField;
-        liveUpdatingFields.push(field);
-        return field;
-    };
-    const editField = ({ field, value, rawValue, refresh = "immediate", }) => {
-        var _a, _b;
-        if (!page)
-            return;
-        const component = (0, componentTreeHelper_1.findComponent)(field.item.id, page.placeholders);
-        let op = editService_1.currentOperation;
-        if (!op ||
-            op.type !== "edit-field" ||
-            op.itemId !== ((_a = field.item) === null || _a === void 0 ? void 0 : _a.id) ||
-            op.fieldId !== field.id ||
-            op.language !== field.item.language ||
-            op.version !== field.item.version ||
-            op.isCommitted) {
-            op = {
-                type: "edit-field",
-                itemId: field.item.id,
-                fieldId: field.id,
-                version: field.item.version,
-                language: field.item.language,
-                fieldName: field.name,
-                itemName: field.item.id == page.id ? "Page" : (_b = component === null || component === void 0 ? void 0 : component.name) !== null && _b !== void 0 ? _b : "<unknown>",
-                pageItem: getPageItemDescriptor(),
-                date: new Date(),
-                id: (0, react_uuid_1.default)(),
-            };
-        }
-        op.date = new Date();
-        op.noRefresh = refresh === "none" || refresh === "immediate";
-        op.refreshAfterQuietPeriod = refresh === "waitForQuietPeriod";
-        op.value = rawValue !== null && rawValue !== void 0 ? rawValue : value;
-        op.isCommitted = false;
-        const firstEditInheritedComponent = (component === null || component === void 0 ? void 0 : component.isInheritedFromMasterLanguage) && op.language != page.language;
-        if (firstEditInheritedComponent)
-            op.language = page.language;
-        if (value || value === "") {
-            const liveField = getLiveField(field);
-            liveField.value = value;
-            liveField.rawValue = op.value;
-        }
-        (0, editService_1.setCurrentOperation)(op);
-        setCurrentEditOperation(Object.assign({}, op));
-        if (refresh == "immediate" || firstEditInheritedComponent)
-            requestRefresh("immediate");
-    };
-    const selectMedia = (0, react_1.useCallback)(({ selectedIdPath }) => {
-        setSelectedMediaIdPath(selectedIdPath);
-        setMediaSelectorVisible(true);
-        return new Promise((resolve) => {
-            setMediaResolver(() => resolve);
-        });
-    }, []);
-    const onMediaSelect = (0, react_1.useCallback)((mediaUrl) => {
-        mediaResolver === null || mediaResolver === void 0 ? void 0 : mediaResolver(mediaUrl);
-        setMediaSelectorVisible(false);
-        setMediaResolver(undefined);
-    }, [mediaResolver]);
-    function getPageItemDescriptor() {
-        return {
-            id: page.id,
-            language: page.language,
-            version: page.version,
-        };
-    }
-    const editContext = {
-        sessionId: sessionId,
-        editorContainerRef,
-        selection,
-        setSelection,
-        selectedForInsertion,
-        setSelectedForInsertion,
-        editField,
-        getComponentById,
-        dragObject,
-        dictionary,
-        setDictionary,
-        requestRefresh,
-        refreshCompletedFlag,
-        unresolvedDictionaryKeys,
-        setUnresolvedDictionaryKeys,
-        updateContentEditingFields,
-        getLiveField,
-        getLiveFieldIfExists,
-        selectMedia,
-        showToast: () => { },
-        scrollIntoView,
-        setScrollIntoView,
-        focusedField,
-        setFocusedField,
-        zoom,
-        fullscreen,
-        undo,
-        getPictureFieldValue: (field, rawValue) => __awaiter(this, void 0, void 0, function* () {
-            return (0, editService_1.getPictureValue)(field, rawValue, site, sessionId);
-        }),
-        // removeComponents: deleteComponents,
-        // removeSelectedComponents: deleteSelectedComponents,
-        getComponentCommands: (components) => {
-            return (0, componentCommands_1.getComponentCommands)(components, editContext);
-        },
-        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];
-            if (parentId)
-                setSelection([parentId]);
-            const placeholderName = placeholderKeyComponents.length === 1
-                ? placeholderKeyComponents[0]
-                : placeholderKeyComponents[1];
-            let op;
-            if (dragObject.type == "template") {
-                op = {
-                    type: "add-component",
-                    pageItem: getPageItemDescriptor(),
-                    parent: parentId && {
-                        id: parentId,
-                        language: page.language,
-                        version: page.version,
-                    },
-                    placeholderName: placeholderName,
-                    placeholderIndex: index,
-                    templateId: dragObject === null || dragObject === void 0 ? void 0 : dragObject.templateId,
-                    date: new Date(),
-                    id: (0, react_uuid_1.default)(),
-                };
-            }
-            if (dragObject.type == "component" ||
-                (dragObject.type == "link-component" && dragObject.component)) {
-                const parentComponent = parentId ? getComponentById(parentId) : null;
-                if (dragObject.type == "link-component") {
-                    op = {
-                        type: "link-component",
-                        pageItem: getPageItemDescriptor(),
-                        parent: parentId && {
-                            id: parentId,
-                            language: page.language,
-                            version: page.version,
-                            name: parentComponent === null || parentComponent === void 0 ? void 0 : parentComponent.name,
-                        },
-                        placeholderName: placeholderName,
-                        placeholderIndex: index,
-                        date: new Date(),
-                        id: (0, react_uuid_1.default)(),
-                        linkedComponentItem: dragObject.component,
-                    };
-                }
-                else {
-                    op = {
-                        type: "move-component",
-                        pageItem: getPageItemDescriptor(),
-                        parent: parentId && {
-                            id: parentId,
-                            language: page.language,
-                            version: page.version,
-                            name: parentComponent === null || parentComponent === void 0 ? void 0 : parentComponent.name,
-                        },
-                        placeholderName: placeholderName,
-                        placeholderIndex: index,
-                        component: dragObject.component,
-                        date: new Date(),
-                        id: (0, react_uuid_1.default)(),
-                    };
-                }
-            }
-            //const newOps = [...editOperations, op];
-            //setEditOperations();
-            // await sendEditOperationsToServer(newOps as EditOperation[]);
-            // router.refresh();
-            //setEditOperations(newOps);
-            if (op)
-                setCurrentEditOperation(op);
-            setDragObject(undefined);
-        }),
-        executeEditOperation: (op) => {
-            setCurrentEditOperation(op);
-        },
-        page,
-        scroll,
-    };
-    const selectedComponents = selection
-        .map((x) => getComponentById(x))
-        .filter((x) => x);
-    const selectedComponent = selectedComponents.length === 1 ? selectedComponents[0] : null;
-    const componentCommands = (0, componentCommands_1.getComponentCommands)(selectedComponents, editContext);
-    const insertingPlaceholderKeys = [editContext.selectedForInsertion]
-        .map((x) => editContext.getComponentById(x))
-        .filter((x) => x)
-        .reduce((a, x) => a.concat(x.placeholders.map((y) => y.key)), []);
-    const selectedPlaceholderKeys = [
-        //...selection.filter((x) => x.indexOf("_") > 0),
-        ...insertingPlaceholderKeys,
-    ];
-    const currentInsertOptions = collectInsertOptions(page, selectedPlaceholderKeys);
-    function collectInsertOptions(page, placeholderKeys) {
-        const insertOptionsMap = new Map();
-        function traverse(placeholders) {
-            for (const placeholder of placeholders) {
-                if (placeholder.insertOptions &&
-                    (placeholderKeys.length === 0 ||
-                        placeholderKeys.includes(placeholder.key))) {
-                    for (const option of placeholder.insertOptions) {
-                        insertOptionsMap.set(option.id, option);
-                    }
-                }
-                for (const component of placeholder.components) {
-                    traverse(component.placeholders);
-                }
-            }
-        }
-        traverse(page.placeholders);
-        // Convert the map back into an array of objects
-        const insertOptionsArray = Array.from(insertOptionsMap.values());
-        insertOptionsArray.sort((a, b) => a.name.localeCompare(b.name));
-        return insertOptionsArray;
-    }
-    const componentCommandMenuItems = componentCommands.map((x) => {
-        return {
-            label: x.label,
-            icon: x.icon,
-            command: () => x.execute(),
-            disabled: x.disabled,
-        };
-    });
-    const menuItems = [
-        {
-            label: "Save",
-            icon: "pi pi-fw pi-save text-red",
-            command: () => saveAndRefresh(),
-            disabled: !hasUnsavedChanges(),
-        },
-        {
-            label: "Undo",
-            icon: "pi pi-fw pi-undo",
-            command: () => undo(),
-            disabled: !editData.operations.filter((x) => !x.undone).length,
-        },
-        {
-            label: "Redo",
-            icon: "pi pi-fw pi-refresh",
-            command: () => redo(),
-            disabled: !editData.operations.filter((x) => x.undone).length,
-        },
-        {
-            label: "Selection",
-            icon: "pi pi-fw pi-bars",
-            items: componentCommandMenuItems,
-        },
-        {
-            label: "Create Version",
-            icon: "pi pi-fw pi-plus",
-            command: () => createAndSwitchToNewVersion(),
-        },
-        { separator: true },
-        {
-            label: "Preview",
-            icon: "pi pi-fw pi-external-link",
-            command: () => {
-                if (page)
-                    window.open(page.previewUrl + "&session=" + sessionId, "_blank");
-            },
-        },
-        { label: "Publish", icon: "pi pi-fw pi-upload" },
-        { separator: true },
-    ];
-    const spinner = (0, jsx_runtime_1.jsx)(progressspinner_1.ProgressSpinner, {});
-    const endContent = ((0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-gap-3 a-items-center", children: [(0, jsx_runtime_1.jsx)(LanguageSelector_1.LanguageSelector, { page: page, onLanguageSelected: (language) => {
-                    if (!language)
-                        return;
-                    //ensureSaved(() => switchLanguage(language));
-                    switchLanguage(language);
-                } }), (0, jsx_runtime_1.jsx)(VersionSelector_1.VersionSelector, { page: page, onVersionSelected: (version) => {
-                    switchVersion(version);
-                } }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", icon: "pi pi-arrows-h", onClick: () => setShowTabsCenter(!showTabsCenter) }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", icon: showRightSidebar ? "pi pi-chevron-right " : "pi pi-chevron-left", onClick: () => setShowRightSidebar(!showRightSidebar) }), (0, jsx_runtime_1.jsx)("i", { className: (0, utils_1.classNames)("pi pi-cog a-flex a-items-center a-text-xl a-m-2", refreshing ? "pi-spin" : "") })] }));
-    const sidebarTabs = ((0, jsx_runtime_1.jsx)(SidebarTabs_1.default, { selectedComponent: selectedComponent, page: page, dictionary: dictionary, item: item }));
-    const renderedPage = ((0, jsx_runtime_1.jsxs)("div", { onDragEndCapture: () => setDragObject(undefined), className: "a-flex a-flex-col a-w-full a-h-full a-items-center a-bg-gray-100", ref: editorContainerRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-gap-1 a-bg-gray-50 a-w-full a-border-b a-items-center a-justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-p-1.5  a-items-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "pi pi-search-plus a-p-2 a-cursor-pointer", onClick: () => {
-                                    if (zoom < 50)
-                                        setZoom(zoom * 1.2);
-                                } }), (0, jsx_runtime_1.jsx)("i", { className: "pi pi-search-minus a-p-2 a-cursor-pointer", onClick: () => {
-                                    if (zoom > 0.1)
-                                        setZoom(zoom / 1.2);
-                                } }), (0, jsx_runtime_1.jsx)("div", { className: "a-cursor-pointer a-text-xs a-p-1", onClick: () => {
-                                    setZoom(0.5);
-                                }, children: "50%" }), (0, jsx_runtime_1.jsx)("div", { className: "a-cursor-pointer a-text-xs a-p-1", onClick: () => {
-                                    setZoom(1);
-                                }, children: "1:1" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-p-1.5  a-items-center", children: [(0, jsx_runtime_1.jsx)("i", { className: (0, utils_1.classNames)(device === "desktop" ? "a-bg-gray-100" : "", "pi pi-desktop a-p-2 a-cursor-pointer"), onClick: () => {
-                                    setDevice("desktop");
-                                } }), (0, jsx_runtime_1.jsx)("i", { className: (0, utils_1.classNames)(device === "mobile" ? "a-bg-gray-100" : "", "pi pi-tablet a-p-2 a-cursor-pointer"), onClick: () => {
-                                    setDevice("mobile");
-                                } }), (0, jsx_runtime_1.jsx)("i", { className: "pi pi-external-link a-p-2 a-cursor-pointer", onClick: () => setFullscreen(true) })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "a-flex-1 a-relative a-h-full a-bg-white", style: { width: device == "desktop" ? "100%" : "640px" }, children: (0, jsx_runtime_1.jsx)("div", { className: "alpaca-editor-container a-absolute a-inset-0 a-overflow-auto", style: { zoom: zoom }, onScroll: (e) => {
-                        setScroll(e.currentTarget.scrollTop);
-                    }, children: children }) })] }));
-    return ((0, jsx_runtime_1.jsx)(__1.EditContextProvider, { value: editContext, children: fullscreen ? ((0, jsx_runtime_1.jsxs)("div", { onMouseMoveCapture: () => setTimeout(() => setShowFullscreenHint(false), 600), children: [children, showFullscreenHint && ((0, jsx_runtime_1.jsx)("div", { className: "a-fixed a-left-1/2 a-top-3 a-transform \r\n            -a-translate-x-1/2 a-p-12 a-bg-gray-200", children: "Press Ctrl + F11 to exit fullscreen mode" }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(toast_1.Toast, { ref: toast }), (0, jsx_runtime_1.jsxs)(api_1.PrimeReactProvider, { children: [(0, jsx_runtime_1.jsx)(ConfirmationDialog_1.default, { ref: confirmationDialogRef }), (0, jsx_runtime_1.jsx)(confirmdialog_1.ConfirmDialog, {}), (0, jsx_runtime_1.jsxs)(blockui_1.BlockUI, { blocked: uiBlocked, template: spinner, children: [(0, jsx_runtime_1.jsx)(menubar_1.Menubar, { model: menuItems, end: endContent, className: "a-p-1 a-text-sm" }), (0, jsx_runtime_1.jsx)(MainLayout_1.default, { content: showTabsCenter ? sidebarTabs : renderedPage, rightSidebar: showRightSidebar && ((0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", className: "alpaca-editor a-h-full", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "a-overflow-hidden a-relative", children: (0, jsx_runtime_1.jsx)(EditHistory_1.EditHistory, { operations: edit.operations }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "a-h-full a-flex a-flex-col", children: (0, jsx_runtime_1.jsx)(Workbox_1.default, { workbox: page.workbox, lockItem: lockItemAndRefresh, executeWorkflowCommand: executeWorkflowCommandAndRefresh }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "a-overflow-hidden a-relative", children: (0, jsx_runtime_1.jsx)(AiTerminal_1.AiTerminal, { selection: selection }) })] })), leftSidebar: (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", className: "a-h-full", children: [(0, jsx_runtime_1.jsxs)(splitter_1.SplitterPanel, { size: 20, className: "a-h-full a-flex a-flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "a-p-3 a-bg-gray-50 a-text-gray-600 a-text-sm a-border-b-2", children: "Content" }), (0, jsx_runtime_1.jsx)("div", { className: "a-overflow-hidden a-relative a-flex-1", children: (0, jsx_runtime_1.jsx)("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: (0, jsx_runtime_1.jsx)(ContentTree_1.default, { rootItemId: "{11111111-1111-1111-1111-111111111111}", expandIdPath: page.idPath, className: "a-p-1", selectionMode: "single", selectedItemIds: [page.id], secondarySelectedItemId: item === null || item === void 0 ? void 0 : item.id, onSelectionChange: (selection) => {
-                                                                    const selectedItem = selection;
-                                                                    if (selectedItem.hasLayout)
-                                                                        navigateToPage(selectedItem.id);
-                                                                    else
-                                                                        loadItem({
-                                                                            id: selectedItem.id,
-                                                                            language: selectedItem.language,
-                                                                            version: selectedItem.version,
-                                                                        });
-                                                                }, isDraggable: (x) => (currentInsertOptions === null || currentInsertOptions === void 0 ? void 0 : currentInsertOptions.find((insertOption) => {
-                                                                    var _a;
-                                                                    return insertOption.id == x.templateId ||
-                                                                        ((_a = insertOption.compatibleTemplates) === null || _a === void 0 ? void 0 : _a.find((compatibleTemplate) => compatibleTemplate == x.templateId)) !== undefined;
-                                                                })) !== undefined, dragStart: (itemNode) => {
-                                                                    setDragObject({
-                                                                        type: "link-component",
-                                                                        templateId: itemNode.templateId,
-                                                                        component: {
-                                                                            id: itemNode.id,
-                                                                            language: itemNode.language,
-                                                                            version: itemNode.version,
-                                                                        },
-                                                                    });
-                                                                } }) }) })] }), (0, jsx_runtime_1.jsxs)(splitter_1.SplitterPanel, { size: 15, className: "a-h-full a-flex a-flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "a-p-3 a-bg-gray-50 a-text-gray-600 a-text-sm a-border-b-2", children: "Page Components" }), (0, jsx_runtime_1.jsx)("div", { className: "a-overflow-hidden a-relative a-flex-1", children: (0, jsx_runtime_1.jsx)("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: (0, jsx_runtime_1.jsx)(ComponentTree_1.ComponentTree, { page: page, selection: selection }) }) })] }), (0, jsx_runtime_1.jsxs)(splitter_1.SplitterPanel, { size: 15, className: "a-h-full a-flex a-flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "a-p-3 a-bg-gray-50 a-text-gray-600 a-text-sm a-border-b-2", children: "New Component" }), (0, jsx_runtime_1.jsx)("div", { className: "a-overflow-hidden a-relative a-flex-1", children: (0, jsx_runtime_1.jsx)("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: (0, jsx_runtime_1.jsx)(ComponentPalette_1.ComponentPalette, { insertOptions: currentInsertOptions, dragStart: (dragObject) => {
-                                                                    //console.log("dragging " + JSON.stringify(dragObject));
-                                                                    setDragObject(dragObject);
-                                                                }, dragEnd: () => {
-                                                                    setDragObject(undefined);
-                                                                    setSelectedForInsertion("");
-                                                                } }) }) })] }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 50, className: "a-overflow-hidden a-relative", children: !showTabsCenter ? sidebarTabs : renderedPage })] }) })] }), (0, jsx_runtime_1.jsx)(MediaSelector_1.MediaSelector, { visible: mediaSelectorVisible, onHide: () => setMediaSelectorVisible(false), onMediaSelected: onMediaSelect, selectedIdPath: selectedMediaIdPath })] })] })) }));
-}
-exports.EditorClient = EditorClient;