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

package/dist/esm/editor/EditorClient.js

@@ -1,877 +0,0 @@
-"use client";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState, useEffect, useRef, useCallback, } from "react";
-import uuid from "react-uuid";
-import { PrimeReactProvider } from "primereact/api";
-import { ProgressSpinner } from "primereact/progressspinner";
-import { Toast } from "primereact/toast";
-import { BlockUI } from "primereact/blockui";
-import { ConfirmDialog } from "primereact/confirmdialog";
-import { EditContextProvider, } from ".";
-import { useRouter, useSearchParams, usePathname } from "next/navigation";
-import { findComponent, getComponentById } from "./componentTreeHelper";
-import { executeRedo, executeUndo, executeEditOperation, createVersion, executeWorkflowCommand, executeFieldAction, validateItems, connectSocket, lockField, lockItems, unlockItems, getEditHistory, releaseFieldLocks, } from "./services/editService";
-import "../../editor.css";
-import "../../primeicons/primeicons.css";
-import "../../primereact/resources/themes/md-light-indigo/theme.css";
-import "react-json-view-lite/dist/index.css";
-import { MediaSelector } from "./MediaSelector";
-import { getComponentCommands } from "./commands/componentCommands";
-import { getItem } from "./services/contentService";
-import ConfirmationDialog from "./ConfirmationDialog";
-import MainLayout from "./MainLayout";
-import { getItemDescriptor, getSelectedText, useEventListenerExt, } from "./utils";
-import { PublishDialog } from "./PublishDialog";
-import { EditContextMenu } from "./ContextMenu";
-import { FieldEditorPopup } from "./FieldEditorPopup";
-import { Sidebar } from "./sidebar/Sidebar";
-import { Menu } from "./menubar/Menu";
-import { AiPopup } from "./ai/AiPopup";
-export function EditorClient({ page, dictionaryObject, editData, children, configuration, }) {
-    var _a, _b;
-    const router = useRouter();
-    const pathname = usePathname();
-    const searchParams = useSearchParams();
-    const [selection, setSelection] = useState([]);
-    const [selectedForInsertion, setSelectedForInsertion] = useState("");
-    const [currentEditOperation, setCurrentEditOperation] = useState();
-    const [dictionary, setDictionary] = useState(dictionaryObject);
-    const [unresolvedDictionaryKeys, setUnresolvedDictionaryKeys] = useState([]);
-    const [refreshCompletedFlag, setRefreshCompletedFlag] = useState(false);
-    //const [refreshing, setRefreshing] = useState(false);
-    const [updateContentEditingFields, setUpdateContentEditingFields] = useState(false);
-    const [dragObject, setDragObject] = useState();
-    const [refreshTimer, setRefreshTimer] = useState();
-    const [mediaResolver, setMediaResolver] = useState();
-    const [mediaSelectorVisible, setMediaSelectorVisible] = useState(false);
-    const [selectedMediaIdPath, setSelectedMediaIdPath] = useState("");
-    const [scrollIntoView, setScrollIntoView] = useState();
-    const [nextSelection, setNextSelection] = useState();
-    const [zoom, setZoom] = useState(1);
-    const [device, setDevice] = useState("desktop");
-    const [windowSize, setWindowSize] = useState();
-    const confirmationDialogRef = useRef(null);
-    const contextMenuRef = useRef(null);
-    const [secondaryItem, setSecondaryItem] = useState();
-    const [focusedField, setFocusedField] = useState();
-    const [fullscreen, setFullscreen] = useState(false);
-    const [scroll, setScroll] = useState(0);
-    const [viewportRect, setViewportRect] = React.useState({
-        width: 0,
-        height: 0,
-    });
-    const editorContainerRef = useRef(null);
-    const [showFullscreenHint, setShowFullscreenHint] = useState(false);
-    const [showPublishDialog, setShowPublishDialog] = useState(false);
-    const [activeFieldActions, setActiveFieldActions] = useState([]);
-    const [renderedFields, setRenderedFields] = useState([]);
-    const aiPopupRef = React.useRef(null);
-    const fieldEditorPopupRef = React.useRef(null);
-    const [pageValidationResult, setPageValidationResult] = useState();
-    const [editHistory, setEditHistory] = useState([]);
-    const sessionId = sessionStorage.getItem("sessionId") || uuid();
-    const [activeSessions, setActiveSessions] = useState([]);
-    sessionStorage.setItem("sessionId", sessionId);
-    const [view, setView] = useState(configuration.chrome.editor.views[0]);
-    const [centerPanelView, setCenterPanelView] = useState("edit");
-    const validate = () => __awaiter(this, void 0, void 0, function* () {
-        if (page._editor.workbox.items.length === 0)
-            return;
-        const result = yield validateItems(page._editor.workbox.items.map((x) => x.item), sessionId);
-        if (result.type === "success")
-            setPageValidationResult(yield result.response.json());
-    });
-    useEffect(() => {
-        validate();
-    }, [page._editor.workbox]);
-    const sendClientInfo = () => {
-        const socket = globalThis.editorSocket;
-        if (socket.readyState !== WebSocket.OPEN)
-            return;
-        socket.send(JSON.stringify({
-            type: "client-info",
-            sessionId: sessionId,
-            url: window.location.href,
-            userAgent: navigator.userAgent,
-            page: getPageItemDescriptor(),
-            item: secondaryItem ? getItemDescriptor(secondaryItem) : null,
-        }));
-    };
-    const messageHandler = useCallback((event) => {
-        if (!event.data.startsWith("{"))
-            return;
-        const message = JSON.parse(event.data);
-        if (message.type === "active-sessions") {
-            setActiveSessions(() => {
-                return message.payload;
-            });
-        }
-        if (message.type === "edit-operation") {
-            const op = message.payload;
-            if (op.type === "edit-field") {
-                const editFieldOperation = op;
-                const liveField = getLiveFieldIfExists({
-                    item: editFieldOperation.item,
-                    fieldId: editFieldOperation.fieldId,
-                });
-                if (liveField) {
-                    liveField.value = editFieldOperation.value;
-                    liveField.rawValue = editFieldOperation.value;
-                    setSelection([...selection]);
-                }
-            }
-            else
-                requestRefresh("waitForQuietPeriod");
-            addToEditHistory(op);
-            loadHistory(secondaryItem || page);
-        }
-    }, []);
-    useEffect(() => {
-        if (view.centerPanelView) {
-            setCenterPanelView(view.centerPanelView);
-        }
-    }, [view]);
-    useEffect(() => {
-        let socket = globalThis.editorSocket;
-        if (socket &&
-            (socket.readyState === WebSocket.OPEN ||
-                socket.readyState === WebSocket.CONNECTING))
-            return;
-        socket = connectSocket(sessionId);
-        // Connection opened
-        socket.addEventListener("open", () => {
-            console.log("Connected!");
-            sendClientInfo();
-            requestRefresh("immediate");
-        });
-        // Listen for messages
-        socket.addEventListener("message", messageHandler);
-        globalThis.editorSocket = socket;
-    }, []);
-    if (!globalThis.editorLiveUpdatingFields)
-        globalThis.editorLiveUpdatingFields = [];
-    function loadUrl(url) {
-        //setRefreshing(true);
-        releaseFieldLocks(sessionId);
-        router.push(url, { scroll: false });
-    }
-    function switchLanguage(language) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const current = new URLSearchParams(Array.from(searchParams.entries()));
-            current.set("language", language);
-            current.delete("version");
-            const newUrl = `${pathname}?${current.toString()}`;
-            loadUrl(newUrl);
-        });
-    }
-    function switchVersion(version) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const current = new URLSearchParams(Array.from(searchParams.entries()));
-            current.set("version", version.toString());
-            const newUrl = `${pathname}?${current.toString()}`;
-            loadUrl(newUrl);
-        });
-    }
-    function navigateToPage(pageId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            console.log("navigate to page: " + pageId);
-            const current = new URLSearchParams(Array.from(searchParams.entries()));
-            current.set("itemid", pageId);
-            current.delete("version");
-            const newUrl = `${pathname}?${current.toString()}`;
-            setNextSelection([]);
-            setSecondaryItem(undefined);
-            loadUrl(newUrl);
-        });
-    }
-    function createAndSwitchToNewVersion() {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield createVersion(getPageItemDescriptor(), sessionId);
-            const current = new URLSearchParams(Array.from(searchParams.entries()));
-            current.delete("version");
-            const newUrl = `${pathname}?${current.toString()}`;
-            router.push(newUrl, { scroll: false });
-        });
-    }
-    function loadItem(itemToLoad) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (itemToLoad.hasLayout) {
-                if (itemToLoad.id !== page.id) {
-                    navigateToPage(itemToLoad.id);
-                    return;
-                }
-                if (itemToLoad.language !== page.language) {
-                    switchLanguage(itemToLoad.language);
-                    return;
-                }
-                switchVersion(itemToLoad.version);
-                return;
-            }
-            const result = yield getItem(itemToLoad, sessionId);
-            setSecondaryItem(result);
-            setSelection([]);
-            setEditHistory([]);
-            loadHistory(itemToLoad);
-        });
-    }
-    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 = editData.loginUrl;
-                },
-            });
-            showErrorToast(result);
-            return true;
-        }
-    }
-    useEffect(() => {
-        if (selection.length)
-            setSelectedForInsertion("");
-    }, [selection]);
-    const addToEditHistory = (currentEditOperation) => {
-        setEditHistory((history) => {
-            const existing = history.find((x) => x.id == currentEditOperation.id);
-            if (!existing)
-                return [currentEditOperation, ...history];
-            else {
-                existing.date = currentEditOperation.date;
-                return history;
-            }
-        });
-    };
-    const handleResult = (result) => {
-        if (handleErrorResult(result))
-            return;
-        if (result.type == "move-component" ||
-            result.type === "add-component" ||
-            result.type === "link-component" ||
-            result.type === "duplicate-components") {
-            setNextSelection(result.components.map((x) => x.id));
-            requestRefresh("immediate");
-            return;
-        }
-    };
-    useEffect(() => {
-        const sync = () => __awaiter(this, void 0, void 0, function* () {
-            if (currentEditOperation) {
-                const result = yield executeEditOperation(currentEditOperation, sessionId);
-                addToEditHistory(currentEditOperation);
-                handleResult(result);
-                if (!currentEditOperation.noRefresh)
-                    requestRefresh(currentEditOperation.refreshAfterQuietPeriod
-                        ? "waitForQuietPeriod"
-                        : "immediate");
-            }
-        });
-        sync();
-    }, [currentEditOperation]);
-    const ensureLock = (field) => __awaiter(this, void 0, void 0, function* () {
-        var _c;
-        if (!field || !field.item)
-            return;
-        const result = yield lockField(field.item, field.fieldId, sessionId);
-        const status = yield ((_c = result.response) === null || _c === void 0 ? void 0 : _c.json());
-        if (status.success) {
-            const existingField = getLiveFieldIfExists(field);
-            if (!existingField)
-                return;
-            updateLockedBy(existingField);
-            return true;
-        }
-        else {
-            toast.current.show({
-                severity: "error",
-                summary: "Could not lock field",
-                detail: status.error,
-                life: 3000,
-            });
-            return false;
-        }
-    });
-    const lockItemsAndRefresh = (items) => __awaiter(this, void 0, void 0, function* () {
-        yield lockItems(items);
-        if (items.length == 1 && items[0].id == (secondaryItem === null || secondaryItem === void 0 ? void 0 : secondaryItem.id)) {
-            yield loadItem(items[0]);
-        }
-        else
-            requestRefresh("immediate");
-    });
-    const unlockItemsAndRefresh = (items) => __awaiter(this, void 0, void 0, function* () {
-        yield unlockItems(items);
-        if (items.length == 1 && items[0].id == (secondaryItem === null || secondaryItem === void 0 ? void 0 : secondaryItem.id)) {
-            yield loadItem(items[0]);
-        }
-        else
-            requestRefresh("immediate");
-    });
-    const executeWorkflowCommandAndRefresh = (item, commandId) => __awaiter(this, void 0, void 0, function* () {
-        yield executeWorkflowCommand(item, commandId, "");
-        requestRefresh("immediate");
-    });
-    useEffect(() => {
-        if (focusedField === null || focusedField === void 0 ? void 0 : focusedField.item) {
-            if (!getComponentById(focusedField.item.id, page))
-                loadItem(focusedField.item);
-        }
-    }, [focusedField]);
-    const addParentComponentReferencesToPlaceholders = (component) => {
-        component.placeholders.forEach((p) => {
-            p.parentComponent = component;
-            p.components.forEach((c) => {
-                c._editor.placeholderReference = p;
-                addParentComponentReferencesToPlaceholders(c);
-            });
-        });
-    };
-    useEffect(() => {
-        var _a, _b;
-        setRefreshCompletedFlag(!refreshCompletedFlag);
-        page.hasLayout = true;
-        if (nextSelection) {
-            setSelection(nextSelection);
-            setNextSelection(undefined);
-        }
-        globalThis.editorLiveUpdatingFields = [];
-        addParentComponentReferencesToPlaceholders(page);
-        if (((_a = page === null || page === void 0 ? void 0 : page._editor) === null || _a === void 0 ? void 0 : _a.versions.length) === 0) {
-            (_b = confirmationDialogRef.current) === null || _b === void 0 ? void 0 : _b.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(),
-            });
-        }
-        loadHistory(page);
-        sendClientInfo();
-    }, [page]);
-    function loadHistory(item) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const operations = yield getEditHistory(item);
-            setEditHistory(operations);
-        });
-    }
-    const requestRefresh = (mode) => {
-        const doRefresh = () => {
-            clearTimeout(refreshTimer);
-            //setRefreshing(true);
-            if (secondaryItem)
-                loadItem(secondaryItem);
-            router.refresh();
-            setRefreshTimer(undefined);
-        };
-        if (mode === "immediate") {
-            console.log("Immediate refresh requested");
-            doRefresh();
-            return;
-        }
-        console.log("request refresh with mode: " + mode);
-        if (mode === "waitForQuietPeriod" && refreshTimer) {
-            clearTimeout(refreshTimer);
-        }
-        if (!refreshTimer || mode === "waitForQuietPeriod") {
-            setRefreshTimer(setTimeout(() => {
-                console.log("refreshing");
-                doRefresh();
-            }, mode === "waitForQuietPeriod" ? 1200 : 700));
-        }
-    };
-    useEffect(() => {
-        if (fullscreen)
-            setShowFullscreenHint(true);
-    }, [fullscreen]);
-    // function requestPageLock(page: Item) {
-    //   if (page.lockedBy) {
-    //     const message =
-    //       "This page is currently locked by " +
-    //       page.lockedBy +
-    //       ". Do you want to take over the lock and edit the page?";
-    //     confirmationDialogRef.current?.confirm({
-    //       message: message,
-    //       header: "Take over lock?",
-    //       icon: "pi pi-exclamation-triangle",
-    //       acceptLabel: "Yes, take over lock",
-    //       showCancel: true,
-    //       accept: () => {
-    //         lockItemsAndRefresh([getItemDescriptor(page)]);
-    //       },
-    //     });
-    //   } else {
-    //     confirmationDialogRef.current?.confirm({
-    //       message: "Do you want to lock and edit this page?",
-    //       header: "Lock page",
-    //       icon: "pi pi-exclamation-triangle",
-    //       acceptLabel: "Lock end edit page",
-    //       showCancel: true,
-    //       accept: () => lockItemsAndRefresh([getItemDescriptor(page)]),
-    //       reject: () => {},
-    //     });
-    //   }
-    // }
-    function handleKeyDown(event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            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();
-                setFullscreen(!fullscreen);
-            }
-        });
-    }
-    useEffect(() => {
-        setWindowSize({ width: window.innerWidth, height: window.innerHeight });
-    }, []);
-    if (typeof window !== "undefined")
-        useEventListenerExt("keydown", handleKeyDown, window);
-    useEventListenerExt("resize", () => {
-        setWindowSize({ width: window.innerWidth, height: window.innerHeight });
-    }, window);
-    useEventListenerExt("click", () => {
-        var _a;
-        (_a = contextMenuRef.current) === null || _a === void 0 ? void 0 : _a.close({});
-    }, window, true);
-    const toast = useRef();
-    useEffect(() => {
-        var _a;
-        const rect = (_a = editorContainerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (rect)
-            setViewportRect({ width: rect.width, height: rect.height });
-    }, [windowSize]);
-    function redo() {
-        return __awaiter(this, void 0, void 0, function* () {
-            setUpdateContentEditingFields(!updateContentEditingFields);
-            let result = yield executeRedo(sessionId, secondaryItem || page);
-            handleResult(result);
-            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 executeUndo(sessionId, secondaryItem || page, numOperations);
-            if (result.type === "success") {
-                router.refresh();
-                //setRefreshing(true);
-                setCurrentEditOperation(undefined);
-                return true;
-            }
-            else {
-                showErrorToast(result);
-                return false;
-            }
-        });
-    }
-    const getLiveFieldIfExists = (field) => {
-        const liveUpdatingFields = globalThis.editorLiveUpdatingFields;
-        const existingField = liveUpdatingFields.find((f) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            return ((_a = f._editor) === null || _a === void 0 ? void 0 : _a.descriptor.fieldId) === field.fieldId &&
-                ((_c = (_b = f._editor) === null || _b === void 0 ? void 0 : _b.descriptor.item) === null || _c === void 0 ? void 0 : _c.language) === field.item.language &&
-                ((_e = (_d = f._editor) === null || _d === void 0 ? void 0 : _d.descriptor.item) === null || _e === void 0 ? void 0 : _e.version) === field.item.version &&
-                ((_g = (_f = f._editor) === null || _f === void 0 ? void 0 : _f.descriptor.item) === null || _g === void 0 ? void 0 : _g.id) === field.item.id;
-        });
-        if (!existingField)
-            return null;
-        updateLockedBy(existingField);
-        return existingField;
-    };
-    const getLiveField = (field) => {
-        if (!field._editor)
-            return field;
-        const descriptor = field._editor.descriptor;
-        const liveUpdatingFields = globalThis.editorLiveUpdatingFields;
-        let liveField = liveUpdatingFields.find((f) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            return ((_a = f._editor) === null || _a === void 0 ? void 0 : _a.descriptor.fieldId) === descriptor.fieldId &&
-                ((_c = (_b = f._editor) === null || _b === void 0 ? void 0 : _b.descriptor.item) === null || _c === void 0 ? void 0 : _c.language) === descriptor.item.language &&
-                ((_e = (_d = f._editor) === null || _d === void 0 ? void 0 : _d.descriptor.item) === null || _e === void 0 ? void 0 : _e.version) === descriptor.item.version &&
-                ((_g = (_f = f._editor) === null || _f === void 0 ? void 0 : _f.descriptor.item) === null || _g === void 0 ? void 0 : _g.id) === descriptor.item.id;
-        });
-        if (!liveField) {
-            var component = findComponent(field._editor.descriptor.item.id, page.placeholders);
-            if (component) {
-                const existingField = Object.values(component.fields).find((f) => f.id === field.id);
-                if (existingField)
-                    field = existingField;
-            }
-            liveUpdatingFields.push(field);
-            liveField = field;
-        }
-        updateLockedBy(liveField);
-        return liveField;
-    };
-    const editField = ({ field, value, rawValue, refresh = "immediate", }) => {
-        if (!page)
-            return;
-        setCurrentEditOperation((op) => {
-            const newOp = getEditOP(op, field, refresh, rawValue, value);
-            return Object.assign({}, newOp);
-        });
-    };
-    const selectMedia = useCallback(({ selectedIdPath }) => {
-        setSelectedMediaIdPath(selectedIdPath);
-        setMediaSelectorVisible(true);
-        return new Promise((resolve) => {
-            setMediaResolver(() => resolve);
-        });
-    }, []);
-    const onMediaSelect = useCallback((mediaUrl) => {
-        mediaResolver === null || mediaResolver === void 0 ? void 0 : mediaResolver(mediaUrl);
-        setMediaSelectorVisible(false);
-        setMediaResolver(undefined);
-    }, [mediaResolver]);
-    function getEditOP(currentOp, field, refresh, rawValue, value) {
-        var _a;
-        const fieldItem = field._editor.descriptor.item;
-        const component = findComponent(fieldItem.id, page.placeholders);
-        let op = currentOp;
-        if (!op ||
-            op.undone ||
-            op.type !== "edit-field" ||
-            op.item.id !== fieldItem.id ||
-            op.fieldId !== field.id ||
-            op.item.language !== fieldItem.language ||
-            op.item.version !== fieldItem.version) {
-            op = {
-                type: "edit-field",
-                item: {
-                    id: fieldItem.id,
-                    version: fieldItem.version,
-                    language: fieldItem.language,
-                    name: fieldItem.id == page.id ? "Page" : (_a = component === null || component === void 0 ? void 0 : component.name) !== null && _a !== void 0 ? _a : "<unknown>",
-                },
-                fieldId: field.id,
-                fieldName: field._editor.name,
-                pageItem: getPageItemDescriptor(),
-                date: new Date().toISOString(),
-                id: uuid(),
-                description: "Edit " + field._editor.name,
-                focus: fieldItem.id + ":" + field.id,
-            };
-        }
-        op.date = new Date().toISOString();
-        op.noRefresh = refresh === "none";
-        op.refreshAfterQuietPeriod = refresh === "waitForQuietPeriod";
-        op.value = rawValue !== null && rawValue !== void 0 ? rawValue : value;
-        const firstEditInheritedComponent = (component === null || component === void 0 ? void 0 : component._editor.isInheritedFromMasterLanguage) &&
-            op.item.language != page.language;
-        if (firstEditInheritedComponent)
-            op.item.language = page.language;
-        if (value || value === "") {
-            const liveField = getLiveField(field);
-            liveField.value = value;
-            liveField.rawValue = op.value;
-        }
-        return op;
-    }
-    function updateLockedBy(existingField) {
-        const fieldItem = existingField._editor.descriptor.item;
-        const lockedBy = activeSessions.find((x) => {
-            var _a, _b, _c, _d;
-            return ((_a = x.fieldLock) === null || _a === void 0 ? void 0 : _a.item.id) === fieldItem.id &&
-                ((_b = x.fieldLock) === null || _b === void 0 ? void 0 : _b.item.language) === fieldItem.language &&
-                ((_c = x.fieldLock) === null || _c === void 0 ? void 0 : _c.item.version) === fieldItem.version &&
-                ((_d = x.fieldLock) === null || _d === void 0 ? void 0 : _d.fieldId) === existingField.id;
-        });
-        if (existingField._editor)
-            existingField._editor.lockedBy = lockedBy;
-    }
-    function getPageItemDescriptor() {
-        return getItemDescriptor(page);
-    }
-    function addComponent(templateId, templateName, placeholderName, index, parentId) {
-        const op = {
-            type: "add-component",
-            pageItem: getPageItemDescriptor(),
-            parent: parentId && {
-                id: parentId,
-                language: page.language,
-                version: page.version,
-            },
-            placeholderName: placeholderName,
-            placeholderIndex: index,
-            templateId: templateId,
-            date: new Date().toISOString(),
-            id: uuid(),
-            description: "Add " + templateName,
-        };
-        setCurrentEditOperation(op);
-    }
-    const editContext = {
-        configuration,
-        item: centerPanelView == "form" ? secondaryItem || page : page,
-        renderedPage: children,
-        sessionId: sessionId,
-        readonly: !page._editor.hasLock,
-        selection,
-        select: (ids) => {
-            setView(configuration.chrome.editor.views.find((x) => x.name == "edit"));
-            setSelection(ids);
-            setSecondaryItem(undefined);
-        },
-        selectedForInsertion,
-        setSelectedForInsertion,
-        editField,
-        dragObject,
-        dictionary,
-        setDictionary,
-        requestRefresh,
-        refreshCompletedFlag,
-        unresolvedDictionaryKeys,
-        setUnresolvedDictionaryKeys,
-        updateContentEditingFields,
-        getLiveField,
-        getLiveFieldIfExists,
-        selectMedia,
-        showToast: (message) => {
-            toast.current.show(message);
-        },
-        scrollIntoView,
-        setScrollIntoView,
-        focusedField,
-        setFocusedField: (field, requestLock) => {
-            if (field)
-                setFocusedField(Object.assign({}, field));
-            else
-                setFocusedField(undefined);
-            if (field && requestLock)
-                ensureLock(field);
-            if (!field)
-                releaseFieldLocks(sessionId);
-        },
-        undo,
-        redo,
-        renderedFields,
-        registerAsRenderedField: (field) => {
-            setRenderedFields((prev) => {
-                if (!field._editor ||
-                    prev.find((x) => {
-                        var _a;
-                        return x.fieldId === field.id &&
-                            x.item.id === ((_a = field._editor) === null || _a === void 0 ? void 0 : _a.descriptor.item.id);
-                    }))
-                    return prev;
-                return [...prev, field._editor.descriptor];
-            });
-        },
-        getComponentCommands: (components) => {
-            return getComponentCommands(components, editContext);
-        },
-        dragStart: (dragObject) => {
-            //      console.log("dragging " + JSON.stringify(dragObject));
-            setDragObject(dragObject);
-        },
-        dragEnd: () => {
-            setDragObject(undefined);
-        },
-        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
-                ? undefined
-                : placeholderKeyComponents[0];
-            if (parentId)
-                setSelection([parentId]);
-            const placeholderName = placeholderKeyComponents.length === 1
-                ? placeholderKeyComponents[0]
-                : placeholderKeyComponents[1];
-            let op;
-            if (dragObject.type == "template") {
-                addComponent(dragObject.templateId, dragObject.name || "component", placeholderName, index, parentId);
-                return;
-            }
-            if (dragObject.type == "component" ||
-                (dragObject.type == "link-component" && dragObject.component)) {
-                const parentComponent = parentId
-                    ? getComponentById(parentId, page)
-                    : 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().toISOString(),
-                        id: uuid(),
-                        linkedComponentItem: dragObject.component,
-                        description: "Link 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,
-                        components: [dragObject.component],
-                        date: new Date().toISOString(),
-                        id: uuid(),
-                        description: "Move component",
-                    };
-                }
-            }
-            if (op)
-                setCurrentEditOperation(op);
-            setDragObject(undefined);
-        }),
-        addComponent,
-        executeEditOperation: (op) => {
-            setCurrentEditOperation(op);
-        },
-        page,
-        windowSize,
-        triggerFieldAction: (field, actionButton) => __awaiter(this, void 0, void 0, function* () {
-            const op = { field, actionButton, state: "running" };
-            const fieldItem = field._editor.descriptor.item;
-            setActiveFieldActions((prevFieldActions) => [
-                ...prevFieldActions.filter((x) => {
-                    var _a, _b, _c;
-                    return !(x.field.id == field.id &&
-                        ((_a = x.field._editor) === null || _a === void 0 ? void 0 : _a.descriptor.item.id) == fieldItem.id &&
-                        ((_b = x.field._editor) === null || _b === void 0 ? void 0 : _b.descriptor.item.language) == fieldItem.language &&
-                        ((_c = x.field._editor) === null || _c === void 0 ? void 0 : _c.descriptor.item.version) == fieldItem.version);
-                }),
-                op,
-            ]);
-            yield executeFieldAction(field._editor.descriptor.item, field.id, { id: page.id, language: page.language, version: page.version }, actionButton.action, editContext.sessionId, getSelectedText(), (data) => {
-                op.message = data.responseText;
-                setActiveFieldActions((prevFieldActions) => [...prevFieldActions]);
-            });
-            op.state = "success";
-            requestRefresh("immediate");
-        }),
-        activeFieldActions,
-        showContextMenu: (event, items) => {
-            var _a;
-            (_a = contextMenuRef.current) === null || _a === void 0 ? void 0 : _a.show(event, items);
-        },
-        showAiPopup: (event) => {
-            var _a;
-            (_a = aiPopupRef.current) === null || _a === void 0 ? void 0 : _a.show(event);
-        },
-        showFieldEditorPopup: (fields, sections, ev) => {
-            var _a;
-            (_a = fieldEditorPopupRef.current) === null || _a === void 0 ? void 0 : _a.show(fields, sections, ev);
-        },
-        lockItems: lockItemsAndRefresh,
-        unlockItems: unlockItemsAndRefresh,
-        pageValidationResult,
-        secondaryItem,
-        loadItem,
-        editHistory,
-        activeSessions,
-        unlockField: () => __awaiter(this, void 0, void 0, function* () {
-            yield releaseFieldLocks(sessionId);
-        }),
-        executeWorkflowCommand: executeWorkflowCommandAndRefresh,
-        editData,
-        duplicateComponents: ({ componentIds, parent, placeholderName, }) => {
-            const op = {
-                type: "duplicate-components",
-                pageItem: getPageItemDescriptor(),
-                sourceComponentIds: componentIds,
-                date: new Date().toISOString(),
-                id: uuid(),
-                description: "Duplicate components",
-                placeholderName,
-                parent: getItemDescriptor(parent),
-            };
-            setCurrentEditOperation(op);
-        },
-        isCommandDisabled: (command) => {
-            if (!command.disabled)
-                return false;
-            return command.disabled({
-                editContext,
-                pathname,
-                router,
-                searchParams,
-            });
-        },
-        executeCommand: ({ command, event, }) => {
-            return command.execute({
-                editContext,
-                pathname,
-                router,
-                searchParams,
-                event,
-            });
-        },
-        setView,
-        view,
-        pageView: {
-            device,
-            setDevice,
-            scroll,
-            setScroll,
-            zoom,
-            setZoom,
-            viewport: viewportRect,
-            fullscreen,
-            setFullscreen,
-            editorContainerRef,
-        },
-    };
-    const spinner = _jsx(ProgressSpinner, {});
-    return (_jsx(EditContextProvider, { value: editContext, children: fullscreen ? (_jsxs("div", { onMouseMoveCapture: () => setTimeout(() => setShowFullscreenHint(false), 600), children: [children, showFullscreenHint && (_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" }))] })) : (_jsxs(_Fragment, { children: [_jsx(Toast, { ref: toast }), _jsxs(PrimeReactProvider, { children: [_jsx(ConfirmationDialog, { ref: confirmationDialogRef }), _jsx(ConfirmDialog, {}), _jsxs(BlockUI, { blocked: false, template: spinner, children: [_jsx(EditContextMenu, { ref: contextMenuRef }), _jsx(Menu, {}), _jsx(MainLayout, { content: ((_a = configuration.chrome.editor.centerPanelViews.find((x) => x.name === centerPanelView)) === null || _a === void 0 ? void 0 : _a.content) || "Unknown view " + centerPanelView, leftSidebar: _jsx(Sidebar, { views: (_b = configuration.chrome.editor.views) !== null && _b !== void 0 ? _b : [] }) })] }), _jsx(MediaSelector, { visible: mediaSelectorVisible, onHide: () => setMediaSelectorVisible(false), onMediaSelected: onMediaSelect, selectedIdPath: selectedMediaIdPath }), _jsx(PublishDialog, { visible: showPublishDialog, onHide: () => setShowPublishDialog(false), page: page, 
-                            // lockItems={lockItemsAndRefresh}
-                            // unlockItems={unlockItemsAndRefresh}
-                            executeWorkflowCommand: executeWorkflowCommandAndRefresh }), _jsx(AiPopup, { ref: aiPopupRef }), _jsx(FieldEditorPopup, { ref: fieldEditorPopupRef })] })] })) }));
-}