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

package/dist/esm/editor/EditorClient.js

@@ -0,0 +1,877 @@
+"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 })] })] })) }));
+}