@alpaca-editor/core 1.0.0 → 1.0.3

package/dist/editor/client/EditorClient.js

@@ -0,0 +1,1298 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, useRef, useCallback, useMemo, } from "react";
+import { Toast } from "primereact/toast";
+import { EditContextProvider, ModifiedFieldsContextProvider, OperationsContextProvider, } from "./editContext";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import { getComponentById } from "../componentTreeHelper";
+import { getOperationsContext } from "./operations";
+import { handleErrorResult } from "./helpers";
+import { executeFieldAction as executeFieldServerAction, connectSocket, getEditHistory, releaseFieldLocks, validateItems, } from "../services/editService";
+import "primeicons/primeicons.css";
+import "primereact/resources/themes/md-light-indigo/theme.css";
+import "react-json-view-lite/dist/index.css";
+import { MediaSelector, } from "../media-selector/MediaSelector";
+import { getComponentCommands } from "../commands/componentCommands";
+import { getLanguagesAndVersions, getWorkbox, } from "../services/contentService";
+import ConfirmationDialog from "../ConfirmationDialog";
+import MainLayout from "../MainLayout";
+import { useEventListenerExt } from "../utils";
+import { EditContextMenu } from "../ContextMenu";
+import { FieldEditorPopup } from "../FieldEditorPopup";
+import { AiPopup } from "../ai/AiPopup";
+import { post } from "../services/serviceHelper";
+import { SidebarView } from "../sidebar/SidebarView";
+import { PageViewerFrame } from "../page-viewer/PageViewerFrame";
+import { useItemsRepository } from "./itemsRepository";
+import { Spinner } from "../ui/Spinner";
+import { cleanId } from "../utils/id-helper";
+import { useDialog } from "./DialogContext";
+import { useDebouncedCallback } from "use-debounce";
+import { Tour } from "../../tour/Tour";
+import { usePageViewContext } from "../page-viewer/pageViewContext";
+import { getComments } from "../services/reviewsService";
+import { useReviews } from "../reviews/useReviews";
+import uuid from "react-uuid";
+import { flushSync } from "react-dom";
+export function EditorClient({ configuration, className, item: loadItemDescriptor, sessionId, }) {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const [selection, setSelection] = useState([]);
+    const [selectedForInsertion, setSelectedForInsertion] = useState("");
+    const [refreshCompletedFlag, setRefreshCompletedFlag] = useState(false);
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const [dragObject, setDragObject] = useState();
+    const [mediaResolver, setMediaResolver] = useState();
+    const [mediaSelectorVisible, setMediaSelectorVisible] = useState(false);
+    const [mediaSelectorMode, setMediaSelectorMode] = useState("images");
+    const [selectedMediaIdPath, setSelectedMediaIdPath] = useState("");
+    const [scrollIntoView, setScrollIntoView] = useState();
+    const confirmationDialogRef = useRef(null);
+    const contextMenuRef = useRef(null);
+    const editContextRef = useRef(undefined);
+    const [currentOverlay, setCurrentOverlay] = useState();
+    const [contentEditorItem, setContentEditorItem] = useState();
+    const [focusedField, setFocusedField] = useState();
+    const [selectedRange, setSelectedRange] = useState();
+    const [validating, setValidating] = useState(false);
+    const [inserting, setInserting] = useState();
+    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 [validationResult, setValidationResult] = useState();
+    const [editHistory, setEditHistory] = useState([]);
+    const [lastEditedFields, setLastEditedFields] = useState([]);
+    const [activeSessions, setActiveSessions] = useState([]);
+    if (typeof window !== "undefined")
+        sessionStorage?.setItem("sessionId", sessionId);
+    const [viewName, setViewName] = useState(
+    // default from query string
+    searchParams.get("view") ??
+        configuration.editor.views[0]?.name ??
+        "splash-screen");
+    const [compareMode, setCompareMode] = useState(false);
+    const [compareTo, setCompareTo] = useState();
+    const [componentDesignerComponent, setComponentDesignerComponent] = useState();
+    const [componentDesignerRendering, setComponentDesignerRendering] = useState();
+    const [insertMode, setInsertMode] = useState(false);
+    const [ignoreBlur, setIgnoreBlur] = useState(false);
+    const [currentItemDescriptor, setCurrentItemDescriptor] = useState();
+    const currentItemDescriptorRef = useRef(undefined);
+    useEffect(() => {
+        currentItemDescriptorRef.current = currentItemDescriptor;
+    }, [currentItemDescriptor]);
+    const currentItemRef = useRef(undefined);
+    useEffect(() => {
+        currentItemRef.current = contentEditorItem;
+    }, [contentEditorItem]);
+    const [inlineEditingFieldElement, setInlineEditingFieldElement] = useState();
+    const [lockedField, setLockedField] = useState();
+    const [itemLanguages, setItemLanguages] = useState([]);
+    const [itemVersions, setItemVersions] = useState([]);
+    const [modifiedFields, setModifiedFields] = useState([]);
+    const [comments, setComments] = useState([]);
+    const [showComments, setShowComments] = useState(() => {
+        const savedShowComments = typeof window !== "undefined"
+            ? localStorage.getItem("editor.showComments")
+            : null;
+        return savedShowComments ? JSON.parse(savedShowComments) : true;
+    });
+    useEffect(() => {
+        if (typeof window !== "undefined") {
+            localStorage.setItem("editor.showComments", JSON.stringify(showComments));
+        }
+    }, [showComments]);
+    const [selectedComment, setSelectedComment] = useState();
+    const [browseHistory, setBrowseHistory] = useState(() => {
+        const savedHistory = typeof window !== "undefined"
+            ? localStorage.getItem("editor.browseHistory")
+            : null;
+        return savedHistory ? JSON.parse(savedHistory) : [];
+    });
+    const [centerPanelView, setCenterPanelView] = useState();
+    const [timings, setTimings] = useState({});
+    const [revision, setRevision] = useState();
+    const [workboxItems, setWorkboxItems] = useState([]);
+    const [isTourActive, setIsTourActive] = useState(false);
+    const [previewMode, setPreviewMode] = useState(false);
+    const [statusMessage, setStatusMessage] = useState("");
+    const mode = searchParams.get("mode");
+    useEffect(() => {
+        if (mode === "preview") {
+            setPreviewMode(true);
+        }
+    }, [mode]);
+    useEffect(() => {
+        if (previewMode) {
+        }
+    }, [previewMode]);
+    useEffect(() => {
+        if (focusedField &&
+            selection.length > 0 &&
+            selection[0] !== focusedField.item.id) {
+            setFocusedField(undefined);
+        }
+    }, [selection]);
+    const dialogContext = useDialog();
+    const itemsRepository = useItemsRepository(setModifiedFields, setLastEditedFields);
+    const pageViewContext = usePageViewContext({
+        pageItemDescriptor: currentItemDescriptor,
+        itemsRepository,
+        configuration,
+    });
+    const socketMessageListeners = useRef(new Set());
+    const addSocketMessageListener = (callback) => {
+        socketMessageListeners.current.add(callback);
+        return () => socketMessageListeners.current.delete(callback);
+    };
+    const reviews = useReviews({
+        currentItemDescriptor,
+        addSocketMessageListener: addSocketMessageListener,
+    });
+    const validate = useDebouncedCallback(async (items) => {
+        setValidating(true);
+        const result = await validateItems(items, sessionId);
+        if (result.type === "success")
+            setValidationResult(await result.data);
+        setValidating(false);
+    }, 1000);
+    useEffect(() => {
+        setSelectedForInsertion("");
+    }, [selection]);
+    useEffect(() => {
+        if (focusedField?.fieldId !== selectedRange?.fieldId) {
+            setSelectedRange(undefined);
+        }
+    }, [focusedField]);
+    const currentView = configuration.editor.views.find((x) => x.name === viewName) ??
+        configuration.editor.views[0];
+    useEffect(() => {
+        if (currentView?.defaultCenterPanelView)
+            setCenterPanelView(currentView.defaultCenterPanelView);
+    }, [currentView]);
+    const sendClientInfo = async () => {
+        const socket = globalThis.editorSocket;
+        const clientInfoMessage = {
+            type: "client-info",
+            sessionId: sessionId,
+            url: window.location.href,
+            userAgent: navigator.userAgent,
+            item: currentItemRef.current
+                ? {
+                    ...currentItemRef.current.descriptor,
+                    name: currentItemRef.current.name,
+                }
+                : null,
+        };
+        if (socket.readyState !== WebSocket.OPEN) {
+            const url = "/alpaca/editor/client";
+            await post(url, clientInfoMessage);
+        }
+        else
+            socket.send(JSON.stringify(clientInfoMessage));
+    };
+    const startTour = () => {
+        setIsTourActive(true);
+    };
+    const messageHandler = useCallback(async (event) => {
+        if (!event.data.startsWith("{"))
+            return;
+        const message = JSON.parse(event.data);
+        if (message.type === "active-sessions") {
+            setActiveSessions(() => {
+                return message.payload;
+            });
+        }
+        if (message.type === "item-deleted") {
+            itemsRepository.onItemsDeleted([
+                { item: message.payload.item, parentId: message.payload.parentId },
+            ]);
+            if (message.payload.item.id === currentItemDescriptor?.id) {
+                console.log("Load", message.payload.parentId);
+                loadItem({
+                    id: message.payload.parentId,
+                    language: currentItemDescriptor?.language ?? "en",
+                    version: 0,
+                });
+            }
+        }
+        if (message.type === "item-changed") {
+            await itemsRepository.refreshItems([message.payload.item]);
+            if (message.payload.item.id === currentItemDescriptor?.id)
+                loadItemVersions();
+        }
+        if (message.type === "item-version-added") {
+            if (currentItemDescriptorRef.current) {
+                if (currentItemDescriptorRef.current.id === message.payload.item.id)
+                    await loadItemVersions();
+                setCurrentItemDescriptor({ ...currentItemDescriptorRef.current });
+            }
+        }
+        if (message.type === "comment-updated") {
+            setComments((x) => {
+                const newComments = [...x];
+                const index = newComments.findIndex((c) => c.id === message.payload.comment.id);
+                if (index !== -1)
+                    newComments[index] = message.payload.comment;
+                else
+                    newComments.push(message.payload.comment);
+                return newComments;
+            });
+        }
+        if (message.type === "comment-deleted") {
+            setComments((x) => {
+                return x.filter((c) => c.id !== message.payload.id);
+            });
+        }
+        if (message.type === "edit-operation") {
+            const op = message.payload;
+            if (op.type === "edit-field") {
+                const editFieldOperation = op;
+                const field = await itemsRepository.getField(editFieldOperation);
+                if (!field ||
+                    (field.type !== "single-line text" &&
+                        field.type !== "multi-line text" &&
+                        field.type !== "rich text")) {
+                    itemsRepository.refreshItems([editFieldOperation.item]);
+                    requestRefresh("immediate");
+                }
+                //TODO: field value changes that require rerender
+                else
+                    itemsRepository.updateFieldValue({
+                        fieldId: editFieldOperation.fieldId,
+                        item: editFieldOperation.item,
+                    }, editFieldOperation.user ?? { name: "unknown", ai: false }, false, editFieldOperation.undone
+                        ? editFieldOperation.oldValue
+                        : editFieldOperation.value);
+            }
+            else {
+                requestRefresh("immediate");
+            }
+            if (op.mainItem &&
+                op.mainItem.id === currentItemRef.current?.descriptor.id &&
+                op.mainItem.language ===
+                    currentItemRef.current?.descriptor.language &&
+                op.mainItem.version === currentItemRef.current?.descriptor.version) {
+                loadHistory(op.mainItem);
+            }
+        }
+        socketMessageListeners.current.forEach((listener) => listener(message));
+    }, [currentItemDescriptorRef, setLastEditedFields]);
+    const user = activeSessions.find((x) => x.sessionId === sessionId)?.user;
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        var keepAliveUrl = "/alpaca/editor/keepalive";
+        const interval = setInterval(() => {
+            fetch(keepAliveUrl + "?ts=" + Date.now()).catch((error) => console.error("Keep Alive error:", error));
+        }, 5 * 60 * 1000);
+        const handleMessage = (event) => {
+            if (event.data.type === "componentsSelected") {
+                setSelection(event.data.componentIds);
+            }
+        };
+        window.addEventListener("message", handleMessage);
+        return () => {
+            window.removeEventListener("message", handleMessage);
+            clearInterval(interval);
+        };
+    }, []);
+    useEffect(() => {
+        const tour = configuration.activeTour;
+        const key = tour === "default" ? "editor.tourShown" : "editor.tourShown." + tour;
+        const tourShown = localStorage.getItem(key);
+        if (!tourShown) {
+            setIsTourActive(true);
+            localStorage.setItem(key, "true");
+        }
+    }, []);
+    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();
+            //TODO: Load clients
+        });
+        // Listen for messages
+        socket.addEventListener("message", messageHandler);
+        globalThis.editorSocket = socket;
+    }, []);
+    useEffect(() => {
+        const itemid = searchParams.get("itemid");
+        if (searchParams.has("view")) {
+            setViewName(searchParams.get("view"));
+        }
+        else if (!itemid) {
+            setViewName("splash-screen");
+        }
+        if (searchParams.has("compare"))
+            setCompareMode(searchParams.get("compare") === "true");
+        const itemId = cleanId(loadItemDescriptor?.id ?? itemid ?? undefined);
+        const language = loadItemDescriptor?.language ?? searchParams.get("lang");
+        const version = loadItemDescriptor?.version ??
+            (searchParams.has("version")
+                ? parseInt(searchParams.get("version"))
+                : 0);
+        if (itemid && viewName === "splash-screen") {
+            setViewName("page-editor");
+        }
+        if (!itemId || !language)
+            return;
+        if (currentItemDescriptor?.id === itemId &&
+            currentItemDescriptor?.language === language &&
+            (!version || currentItemDescriptor?.version === version)) {
+            return;
+        }
+        loadItem({ id: itemId, language, version });
+    }, [searchParams, loadItemDescriptor]);
+    useEffect(() => {
+        if (selection.length)
+            setSelectedForInsertion("");
+        // Does the current focused field belong to the current item?
+        const currentItem = selection.length > 0 ? selection[0] : pageViewContext.page?.item.id;
+        if (currentItem && focusedField?.item.id !== currentItem) {
+            setFocusedField(undefined);
+        }
+    }, [selection]);
+    const addToEditHistory = useCallback((currentEditOperation) => {
+        setEditHistory((history) => {
+            // Check if the operation was updated or needs to be added
+            const exists = history.some((item) => item.id === currentEditOperation.id);
+            return exists ? history : [currentEditOperation, ...history];
+        });
+    }, []);
+    useEffect(() => {
+        setRefreshCompletedFlag(!refreshCompletedFlag);
+        setInserting(undefined);
+    }, [currentItemDescriptor, pageViewContext.page]);
+    useEffect(() => {
+        sendClientInfo();
+    }, [currentItemRef.current]);
+    const loadComments = useCallback(async () => {
+        if (!currentItemDescriptor)
+            return;
+        const result = await getComments(currentItemDescriptor.id, currentItemDescriptor.language, currentItemDescriptor.version);
+        if (handleErrorResult(result, ui, state))
+            return;
+        setComments((x) => {
+            const loadedComments = result.data;
+            const newComments = x.filter((c) => c.isNew &&
+                c.mainItemId === currentItemDescriptor.id &&
+                c.language === currentItemDescriptor.language &&
+                c.version === currentItemDescriptor.version);
+            var allComments = [...loadedComments, ...newComments];
+            allComments.sort((a, b) => a.position - b.position);
+            return allComments;
+        });
+    }, [currentItemDescriptor]);
+    const page = pageViewContext.page;
+    useEffect(() => {
+        const isLoading = !page || (page?.editRevision ?? "") != (revision ?? "");
+        setIsRefreshing(isLoading && viewName === "page-editor");
+        if (!isLoading)
+            setInserting(undefined);
+    }, [page, viewName, revision]);
+    useEffect(() => {
+        if (searchParams.get("fullscreen")) {
+            pageViewContext.setFullscreen(true);
+        }
+        const handleMessage = (event) => {
+            if (event.data.action === "refresh") {
+                requestRefresh("immediate");
+            }
+        };
+        window.addEventListener("message", handleMessage);
+        return () => {
+            window.removeEventListener("message", handleMessage);
+        };
+    }, []);
+    const loadHistory = useDebouncedCallback(async (item) => {
+        const result = await getEditHistory(item);
+        if (handleErrorResult(result, ui, state))
+            return;
+        setEditHistory(result.data || []);
+    }, 200);
+    const refreshHistory = useCallback(async (item) => {
+        const result = await getEditHistory(item);
+        if (handleErrorResult(result, ui, state))
+            return;
+        setEditHistory(result.data || []);
+    }, []);
+    const requestRefresh = useCallback((mode) => {
+        const refreshTimer = globalThis.editorRefreshTimer;
+        const doRefresh = () => {
+            //console.log("Refreshing");
+            //const url = new URL(window.location.href);
+            //url.searchParams.set("edit_rev", uuid());
+            const newRevision = uuid();
+            setRevision(newRevision);
+            console.log("doRefresh", newRevision);
+            //router.replace(url.toString(), { scroll: false });
+            globalThis.editorRefreshTimer = undefined;
+        };
+        if (mode === "immediate") {
+            // console.error(
+            //   "Immediate refresh requested. Stack trace:",
+            //   new Error().stack
+            // );
+            console.log("Immediate refresh requested");
+            doRefresh();
+            return;
+        }
+        //console.log("request refresh with mode: " + mode, "timer: ", refreshTimer);
+        if (mode === "waitForQuietPeriod" && refreshTimer) {
+            clearTimeout(refreshTimer);
+        }
+        if (!refreshTimer || mode === "waitForQuietPeriod") {
+            globalThis.editorRefreshTimer = setTimeout(() => {
+                doRefresh();
+            }, mode === "waitForQuietPeriod" ? 1200 : 700);
+        }
+    }, [contentEditorItem, router]);
+    useEffect(() => {
+        if (!currentItemDescriptor)
+            return;
+        loadComments();
+    }, [currentItemDescriptor]);
+    useEffect(() => {
+        if (!currentItemDescriptor)
+            return;
+        const current = new URLSearchParams(Array.from(searchParams.entries()));
+        if (current.get("itemid") !== currentItemDescriptor?.id) {
+            current.set("itemid", currentItemDescriptor.id);
+        }
+        if (current.get("lang") !== currentItemDescriptor?.language) {
+            current.set("lang", currentItemDescriptor.language);
+        }
+        if (current.get("version") !== currentItemDescriptor?.version.toString()) {
+            current.set("version", currentItemDescriptor.version.toString());
+        }
+        if (current.get("view") !== viewName) {
+            current.set("view", viewName);
+        }
+        if (!compareMode) {
+            current.delete("compare");
+            current.delete("compareLanguage");
+            current.delete("compareVersion");
+            current.delete("compareDevice");
+        }
+        else {
+            current.set("compare", "true");
+        }
+        if (previewMode) {
+            current.set("mode", "preview");
+        }
+        else {
+            current.delete("mode");
+        }
+        const newUrl = `${pathname}?${current.toString()}`;
+        router.push(newUrl, { scroll: false });
+    }, [currentItemDescriptor, viewName, compareMode, previewMode]);
+    useEffect(() => {
+        async function load() {
+            if (!currentItemDescriptor)
+                return;
+            const item = await itemsRepository.getItem(currentItemDescriptor);
+            setContentEditorItem(item);
+            if (!item)
+                return;
+            if (contentEditorItem?.descriptor.id === currentItemDescriptor.id &&
+                contentEditorItem?.descriptor.language ===
+                    currentItemDescriptor.language &&
+                contentEditorItem?.descriptor.version !== item.version) {
+                showInfoToast({
+                    summary: "New version!",
+                    details: "New version of item loaded",
+                });
+            }
+        }
+        load();
+    }, [itemsRepository.revision]);
+    const addToBrowseHistory = useCallback((item) => {
+        let historyEntry = {
+            path: item.path || "unknown",
+            name: item.name || "unknown",
+            language: item.language,
+            templateName: item.templateName,
+            id: item.id,
+            hasLayout: item.hasLayout,
+            icon: item.icon,
+            version: item.version,
+        };
+        setBrowseHistory((history) => {
+            const newItem = item;
+            if (!newItem)
+                return history;
+            const newHistory = [
+                historyEntry,
+                ...history
+                    .filter((x) => x.id !== newItem.id || x.language !== newItem.language)
+                    .slice(0, 25),
+            ];
+            localStorage.setItem("editor.browseHistory", JSON.stringify(newHistory));
+            return newHistory;
+        });
+    }, [browseHistory, setBrowseHistory]);
+    const loadItem = useCallback(async (itemToLoad, options) => {
+        if (typeof itemToLoad === "string")
+            itemToLoad = {
+                id: itemToLoad,
+                language: contentEditorItem?.language || "en",
+                version: 0,
+            };
+        console.log("load item: " + itemToLoad.id, itemToLoad.language);
+        const item = await itemsRepository.getItem(itemToLoad);
+        if (!item) {
+            //TODO: Show error
+            console.log("item not found: ", itemToLoad.id, itemToLoad.language);
+            return undefined;
+        }
+        if (!item.hasLayout && viewName === "page-editor") {
+            setViewName("content-editor");
+        }
+        // Set state for the item
+        setCurrentItemDescriptor(itemToLoad);
+        setContentEditorItem(item);
+        setSelection([]);
+        // Directly update URL here
+        const current = new URLSearchParams(Array.from(searchParams.entries()));
+        current.set("itemid", itemToLoad.id);
+        current.set("lang", itemToLoad.language);
+        current.set("version", itemToLoad.version.toString());
+        current.set("view", viewName);
+        if (!compareMode) {
+            current.delete("compare");
+            current.delete("compareLanguage");
+            current.delete("compareVersion");
+            current.delete("compareDevice");
+        }
+        else {
+            current.set("compare", "true");
+        }
+        if (previewMode) {
+            current.set("mode", "preview");
+        }
+        else {
+            current.delete("mode");
+        }
+        const newUrl = `${pathname}?${current.toString()}`;
+        // Wait for the URL update to complete
+        await router.push(newUrl, { scroll: false });
+        // Now that URL is updated, load history and add to browse history
+        loadHistory(itemToLoad);
+        if (options?.addToBrowseHistory ||
+            options?.addToBrowseHistory === undefined) {
+            addToBrowseHistory(item);
+        }
+        return item;
+    }, [
+        itemsRepository,
+        setContentEditorItem,
+        searchParams,
+        pathname,
+        router,
+        viewName,
+        compareMode,
+        previewMode,
+    ]);
+    useEffect(() => {
+        if (pageViewContext.fullscreen && !searchParams.get("fullscreen"))
+            setShowFullscreenHint(true);
+    }, [pageViewContext.fullscreen]);
+    const executeCommand = useCallback(async ({ command, event, data, }) => {
+        if (!editContextRef.current)
+            return;
+        const context = {
+            editContext: editContextRef.current,
+            pathname,
+            router,
+            searchParams,
+            openDialog: dialogContext.openDialog,
+            event,
+            data,
+        };
+        const result = await command.execute(context);
+        return result;
+    }, [editContextRef, pathname, router, searchParams, dialogContext]);
+    const handleKeyDownDebounced = useDebouncedCallback(async (event) => {
+        if (!event.key)
+            return;
+        if (event.ctrlKey && event.key === "z") {
+            await operations.undo();
+        }
+        if (event.ctrlKey && event.key === "y") {
+            await operations.redo();
+        }
+        if (event.ctrlKey && event.key === "F11") {
+            event.preventDefault();
+            pageViewContext.setFullscreen(false);
+        }
+        const command = configuration.commands.allItemCommands.find((x) => x.keyBinding === event.key);
+        if (command) {
+            event.preventDefault();
+            const contentEditorItem = editContextRef.current?.contentEditorItem;
+            if (!contentEditorItem)
+                return;
+            const items = editContextRef.current?.selection?.map((x) => ({
+                id: x,
+                language: contentEditorItem.language,
+                version: 0,
+            })) || [];
+            if (!items.length)
+                items.push(contentEditorItem.descriptor);
+            if (items.length > 0) {
+                const fullItems = await editContextRef.current?.itemsRepository.getItems(items);
+                executeCommand({
+                    command,
+                    data: {
+                        items: fullItems,
+                    },
+                });
+            }
+        }
+    }, 50);
+    const handleKeyDown = useCallback(async (event) => {
+        if (event.key === "Insert") {
+            event.preventDefault();
+            event.stopPropagation();
+            editContext.setInsertMode((x) => !x);
+        }
+        if (event.ctrlKey && event.key === "s") {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        const target = event.target;
+        const isTyping = target instanceof HTMLInputElement ||
+            target instanceof HTMLTextAreaElement ||
+            target.isContentEditable;
+        if ((event.ctrlKey && event.key === "z") ||
+            (event.ctrlKey && event.key === "y")) {
+            if (!isTyping) {
+                event.preventDefault();
+                event.stopPropagation();
+                handleKeyDownDebounced(event);
+            }
+            return;
+        }
+        handleKeyDownDebounced(event);
+    }, [
+        configuration.commands.allItemCommands,
+        executeCommand,
+        editContextRef.current,
+    ]);
+    if (typeof window !== "undefined")
+        if (typeof window !== "undefined")
+            useEventListenerExt("keydown", handleKeyDown, window, true);
+    if (typeof window !== "undefined")
+        useEventListenerExt("click", () => {
+            contextMenuRef.current?.close({});
+        }, window, true);
+    const state = useMemo(() => ({
+        page,
+        configuration,
+        selection,
+        setSelection,
+        loadItem,
+        addToEditHistory,
+        setLockedField,
+        contentEditorItem,
+        sessionId,
+        requestRefresh,
+        lockedField,
+        itemsRepository,
+        user,
+        editHistory,
+        refreshHistory,
+    }), [
+        page,
+        configuration,
+        selection,
+        setSelection,
+        loadItem,
+        addToEditHistory,
+        setLockedField,
+        contentEditorItem,
+        sessionId,
+        requestRefresh,
+        lockedField,
+        itemsRepository,
+        user,
+        editHistory,
+        refreshHistory,
+    ]);
+    useEffect(() => {
+        if (currentOverlay !== "ai")
+            aiPopupRef.current?.close();
+        if (currentOverlay !== "fields")
+            fieldEditorPopupRef.current?.close();
+        if (currentOverlay !== "context-menu")
+            contextMenuRef.current?.close({});
+    }, [currentOverlay]);
+    const toast = useRef(null);
+    useEffect(() => {
+        loadItemVersions();
+    }, [currentItemDescriptor]);
+    const loadItemVersions = useCallback(async () => {
+        if (!currentItemDescriptorRef.current) {
+            setItemVersions([]);
+            setItemLanguages([]);
+            return;
+        }
+        const result = await getLanguagesAndVersions(currentItemDescriptorRef.current);
+        if (!result?.data) {
+            setItemVersions([]);
+            setItemLanguages([]);
+            showErrorToast({
+                summary: "Error",
+                details: "Failed to load item versions",
+            });
+            return;
+        }
+        var v = [...result.data.versions].reverse() || [];
+        setItemVersions(v);
+        setItemLanguages(result.data.languages);
+    }, [currentItemDescriptorRef.current, setItemVersions, setItemLanguages]);
+    const showErrorToast = useCallback(({ summary, details }) => {
+        toast.current?.show({
+            severity: "error",
+            summary: summary || "Error",
+            detail: details || "An error occurred",
+            life: 3000,
+        });
+    }, []);
+    const showInfoToast = useCallback(({ summary, details }) => {
+        toast.current?.show({
+            severity: "info",
+            summary: summary || "Info",
+            detail: details || "Information",
+            life: 3000,
+        });
+    }, []);
+    const ui = useMemo(() => ({
+        showErrorToast,
+        confirmationDialogRef,
+        onOperationExecuted: (op) => {
+            // Replace the operation in edit history with the executed operation
+            setEditHistory((prev) => {
+                const existingOpIndex = prev.findIndex((x) => x.id === op.id);
+                if (existingOpIndex >= 0) {
+                    prev[existingOpIndex] = op;
+                }
+                return prev;
+            });
+            if (contentEditorItem?.id === op.mainItem?.id &&
+                contentEditorItem?.language === op.mainItem?.language &&
+                contentEditorItem?.version === op.mainItem?.version) {
+                setInsertMode(false);
+            }
+        },
+    }), [showErrorToast, confirmationDialogRef, currentItemDescriptor]);
+    const selectMedia = useCallback(({ selectedIdPath, mode, }) => {
+        setSelectedMediaIdPath(selectedIdPath);
+        setMediaSelectorVisible(true);
+        if (mode)
+            setMediaSelectorMode(mode);
+        return new Promise((resolve) => {
+            setMediaResolver(() => resolve);
+        });
+    }, []);
+    const onMediaSelect = useCallback((mediaUrl) => {
+        mediaResolver?.(mediaUrl);
+        setMediaSelectorVisible(false);
+        setMediaResolver(undefined);
+    }, [mediaResolver]);
+    useEffect(() => {
+        if (!workboxItems || workboxItems.length === 0)
+            return;
+        const itemsToValidate = workboxItems.map((x) => x.item);
+        validate(itemsToValidate);
+    }, [workboxItems]);
+    async function loadWorkbox(items) {
+        if (!items.length) {
+            setWorkboxItems([]);
+            return;
+        }
+        const workbox = await getWorkbox(items);
+        const workboxItems = workbox.data || [];
+        const sortedWorkboxItems = workboxItems.sort((a, b) => {
+            if (a.isPublished === b.isPublished)
+                return ((b.workflowCommands?.length || 0) - (a.workflowCommands?.length || 0));
+            return !a.isPublished || !a.isPublishable ? -1 : 1;
+        });
+        setWorkboxItems(sortedWorkboxItems);
+    }
+    const loadWorkboxDebounced = useDebouncedCallback((items) => loadWorkbox(items), 3000);
+    useEffect(() => {
+        let items = [];
+        if (editContext.contentEditorItem) {
+            items.push(editContext.contentEditorItem.descriptor);
+        }
+        if (editContext.page) {
+            collectAllItems(editContext.page.rootComponent, items);
+        }
+        loadWorkboxDebounced(items.filter((x) => x));
+    }, [page, contentEditorItem]);
+    function collectAllItems(component, items) {
+        component.placeholders.forEach((x) => {
+            x.components.forEach((y) => {
+                if (y.isShared && y.datasourceItem) {
+                    items.push(y.datasourceItem.descriptor);
+                }
+                y.datasourceItem?.fields.forEach((z) => {
+                    if (z.type === "picture") {
+                        const picture = z.value;
+                        if (picture.variants) {
+                            picture.variants.forEach((v) => {
+                                if (v.mediaId) {
+                                    items.push({
+                                        id: v.mediaId,
+                                        language: y.datasourceItem.descriptor.language,
+                                        version: 0,
+                                    });
+                                }
+                            });
+                        }
+                    }
+                });
+                collectAllItems(y, items);
+            });
+        });
+    }
+    const switchView = (viewName) => {
+        document.startViewTransition(() => {
+            flushSync(() => {
+                setViewName(viewName);
+            });
+        });
+    };
+    const operationsContext = getOperationsContext(state, ui);
+    const operations = operationsContext.ops;
+    //const pageItem = page ?  itemsRepository.getItem(page.item) : undefined;
+    const isReadOnly = false; //pageItem && (!pageItem.hasLock || !pageItem.canWrite);
+    const updateUrl = useCallback((params) => {
+        const url = new URL(window.location.href);
+        Object.entries(params).forEach(([key, value]) => {
+            if (value)
+                url.searchParams.set(key, value);
+            else
+                url.searchParams.delete(key);
+        });
+        router.push(url.toString(), { scroll: false });
+    }, []);
+    const editContext = useMemo(() => {
+        return {
+            operations: operationsContext.ops,
+            itemsRepository,
+            configuration,
+            updateUrl,
+            openSplashScreen: () => {
+                router.push("/alpaca/editor");
+            },
+            item: contentEditorItem || page?.item,
+            itemLanguages,
+            itemVersions,
+            sessionId: sessionId,
+            readonly: isReadOnly,
+            selection,
+            select: (ids) => {
+                setSelection(ids);
+            },
+            selectedForInsertion,
+            setSelectedForInsertion,
+            dragObject,
+            workboxItems,
+            requestRefresh,
+            refreshCompletedFlag,
+            openCreatePageDialog: () => {
+                const current = new URLSearchParams(Array.from(searchParams.entries()));
+                current.delete("version");
+                current.delete("itemid");
+                current.delete("view");
+                current.set("create", "1");
+                const newUrl = `${pathname}?${current.toString()}`;
+                router.push(newUrl, { scroll: false });
+            },
+            selectMedia,
+            showToast: (message) => {
+                toast.current?.show(message);
+            },
+            scrollIntoView,
+            setScrollIntoView,
+            focusedField,
+            setFocusedField: async (field, requestLock) => {
+                if (field) {
+                    // if (nonComponentItems.find((x) => x.id == field.item.id))
+                    //   setSelection([field.item.id]);
+                    setIgnoreBlur(true);
+                    setTimeout(() => {
+                        setIgnoreBlur(false);
+                    }, 20);
+                    setFocusedField({ ...field });
+                    if (requestLock) {
+                        return (await operations.ensureLock(field)) || false;
+                    }
+                }
+                else {
+                    if (!ignoreBlur) {
+                        setFocusedField(undefined);
+                        releaseFieldLocks(sessionId);
+                    }
+                }
+                return true;
+            },
+            renderedFields,
+            setRenderedFields,
+            getComponentCommands: (components) => {
+                return getComponentCommands(components, editContext);
+            },
+            dragStart: (dragObject) => {
+                setDragObject(dragObject);
+            },
+            dragEnd: () => {
+                setDragObject(undefined);
+            },
+            droppedInPlaceholder: async (placeholderKey, index, spotPositionElement, spotPositionAnchor, insertOption) => {
+                if ((!dragObject && !insertOption) || !page)
+                    return;
+                setDragObject(undefined);
+                if (spotPositionElement && spotPositionAnchor) {
+                    setInserting({
+                        positionElement: spotPositionElement,
+                        positionAnchor: spotPositionAnchor,
+                    });
+                }
+                const placeholderKeyComponents = placeholderKey.split("_");
+                const parentId = placeholderKeyComponents.length === 1
+                    ? undefined
+                    : placeholderKeyComponents[1];
+                if (parentId)
+                    setSelection([parentId]);
+                let op;
+                if (insertOption) {
+                    operations.addComponent(insertOption.typeId, placeholderKey, index);
+                    return;
+                }
+                if (!dragObject)
+                    return;
+                if (dragObject && dragObject.type == "template") {
+                    operations.addComponent(dragObject.typeId, placeholderKey, index);
+                    return;
+                }
+                if (dragObject.type == "component" ||
+                    (dragObject.type == "link-component" && dragObject.component)) {
+                    const parentComponent = parentId && page ? getComponentById(parentId, page) : null;
+                    if (dragObject.type == "link-component") {
+                        op = {
+                            type: "link-component",
+                            mainItem: page.item.descriptor,
+                            parent: parentId && {
+                                id: parentId,
+                                language: page.item.descriptor.language,
+                                version: page.item.descriptor.version,
+                                name: parentComponent?.name,
+                            },
+                            placeholderKey,
+                            placeholderIndex: index,
+                            date: new Date().toISOString(),
+                            id: uuid(),
+                            linkedComponentItem: dragObject.component,
+                            description: "Link component",
+                        };
+                    }
+                    else {
+                        if (!dragObject.component)
+                            return;
+                        op = {
+                            type: "move-component",
+                            mainItem: page.item.descriptor,
+                            parent: parentId && {
+                                id: parentId,
+                                language: page.item.descriptor.language,
+                                version: page.item.descriptor.version,
+                            },
+                            placeholderKey,
+                            placeholderIndex: index,
+                            componentIds: [dragObject.component.id],
+                            date: new Date().toISOString(),
+                            id: uuid(),
+                            description: "Move component",
+                        };
+                    }
+                }
+                if (op)
+                    operations.executeEditOperation(op);
+            },
+            page,
+            triggerFieldAction: async (fieldDescriptor, actionButton) => {
+                const field = await itemsRepository.getField(fieldDescriptor);
+                if (!field)
+                    return;
+                const op = {
+                    field: fieldDescriptor,
+                    actionButton,
+                    state: "running",
+                };
+                const fieldItem = fieldDescriptor.item;
+                setActiveFieldActions((prevFieldActions) => [
+                    ...prevFieldActions.filter((x) => !(x.field.fieldId == fieldDescriptor.fieldId &&
+                        x.field.item.id == fieldItem.id &&
+                        x.field.item.language == fieldItem.language &&
+                        x.field.item.version == fieldItem.version)),
+                    op,
+                ]);
+                if ("clientAction" in actionButton) {
+                    await actionButton.clientAction({
+                        field,
+                        editContext,
+                        dialogContext,
+                    });
+                }
+                if (actionButton.action) {
+                    await executeFieldServerAction(fieldDescriptor.item, fieldDescriptor.fieldId, contentEditorItem.descriptor, actionButton.action, editContext.sessionId, selectedRange?.text || "", (data) => {
+                        op.message = data.responseText;
+                        setActiveFieldActions((prevFieldActions) => [
+                            ...prevFieldActions,
+                        ]);
+                    });
+                    itemsRepository.refreshItems([fieldDescriptor.item]);
+                    op.state = "success";
+                    requestRefresh("immediate");
+                }
+            },
+            activeFieldActions,
+            showContextMenu: (event, items) => {
+                contextMenuRef.current?.show(event, items);
+                setCurrentOverlay("context-menu");
+            },
+            showAiPopup: (event, aiTerminalOptions) => {
+                setCurrentOverlay("ai");
+                aiPopupRef.current?.show(event, aiTerminalOptions);
+            },
+            showFieldEditorPopup: (fields, sections, ev) => {
+                setCurrentOverlay("fields");
+                fieldEditorPopupRef.current?.show(fields, sections, ev);
+            },
+            inserting,
+            validating,
+            validationResult,
+            contentEditorItem,
+            loadItem,
+            editHistory,
+            isRefreshing,
+            activeSessions,
+            unlockField: async () => {
+                await releaseFieldLocks(sessionId);
+            },
+            isCommandDisabled: ({ command, data, }) => {
+                const props = {
+                    editContext,
+                    pathname,
+                    router,
+                    searchParams,
+                    data,
+                    openDialog: dialogContext.openDialog,
+                };
+                return command.disabled(props);
+            },
+            executeCommand,
+            viewName,
+            switchView,
+            compareMode,
+            setCompareMode,
+            view: currentView,
+            pageView: pageViewContext,
+            componentDesignerComponent,
+            setComponentDesignerComponent,
+            componentDesignerRendering,
+            setComponentDesignerRendering,
+            insertMode,
+            setInsertMode,
+            currentOverlay,
+            setCurrentOverlay,
+            inlineEditingFieldElement,
+            setInlineEditingFieldElement,
+            lockedField,
+            timings,
+            setTimings,
+            selectedRange,
+            setSelectedRange,
+            confirmationDialogRef,
+            confirm: (props) => {
+                confirmationDialogRef.current?.confirm(props);
+            },
+            showMessageDialog: (props) => {
+                confirmationDialogRef.current?.confirm({
+                    header: props.header,
+                    message: props.message,
+                    accept: () => { },
+                    acceptLabel: "Ok",
+                });
+            },
+            browseHistory,
+            setCenterPanelView,
+            handleKeyDown,
+            startTour,
+            addSocketMessageListener,
+            currentItemDescriptor,
+            compareTo,
+            setCompareTo,
+            lastEditedFields,
+            revision,
+            selectedComment,
+            setSelectedComment,
+            comments,
+            loadComments,
+            setComments,
+            showComments,
+            setShowComments,
+            addComment: async () => {
+                const descriptor = contentEditorItem?.descriptor;
+                if (!descriptor)
+                    return;
+                const itemId = focusedField?.item.id ||
+                    (selection.length > 0 ? selection[0] : undefined) ||
+                    descriptor.id;
+                if (!itemId)
+                    return;
+                const language = descriptor.language;
+                const version = descriptor.version;
+                const getFieldName = async () => {
+                    if (!focusedField)
+                        return "";
+                    const field = await itemsRepository.getField(focusedField);
+                    return field?.name;
+                };
+                const getItemName = async () => {
+                    const item = await itemsRepository.getItem({
+                        id: itemId,
+                        language,
+                        version,
+                    });
+                    return item?.name;
+                };
+                const newComment = {
+                    id: uuid(),
+                    isNew: true,
+                    itemId: focusedField?.item.id || descriptor.id,
+                    itemName: await getItemName(),
+                    fieldId: focusedField?.fieldId,
+                    fieldName: await getFieldName(),
+                    mainItemId: descriptor.id,
+                    language,
+                    version,
+                    position: 0,
+                    rangeStart: selectedRange?.startOffset || 0,
+                    rangeEnd: selectedRange?.endOffset || 0,
+                    author: user?.name,
+                    authorDisplayName: user?.displayName,
+                    date: new Date().toISOString(),
+                };
+                setComments([newComment, ...comments]);
+                setSelectedComment(newComment);
+                setShowComments(true);
+            },
+            previewMode,
+            setPreviewMode,
+            user,
+            reviews,
+            statusMessage,
+            setStatusMessage,
+        };
+    }, [
+        operations,
+        itemsRepository,
+        configuration,
+        contentEditorItem,
+        page?.item,
+        itemLanguages,
+        itemVersions,
+        sessionId,
+        isReadOnly,
+        selection,
+        selectedForInsertion,
+        dragObject,
+        requestRefresh,
+        refreshCompletedFlag,
+        searchParams,
+        pathname,
+        router,
+        selectMedia,
+        scrollIntoView,
+        focusedField,
+        renderedFields,
+        inserting,
+        page,
+        activeFieldActions,
+        editHistory,
+        isRefreshing,
+        activeSessions,
+        currentView,
+        componentDesignerComponent,
+        componentDesignerRendering,
+        insertMode,
+        currentOverlay,
+        inlineEditingFieldElement,
+        lockedField,
+        selectedRange,
+        pageViewContext,
+        browseHistory,
+        workboxItems,
+        validating,
+        setCenterPanelView,
+        handleKeyDown,
+        setTimings,
+        timings,
+        startTour,
+        viewName,
+        setViewName,
+        compareMode,
+        setCompareMode,
+        addSocketMessageListener,
+        currentItemDescriptor,
+        compareTo,
+        setCompareTo,
+        lastEditedFields,
+        revision,
+        comments,
+        setComments,
+        selectedComment,
+        setSelectedComment,
+        loadComments,
+        previewMode,
+        setPreviewMode,
+        showComments,
+        setShowComments,
+        user,
+        reviews,
+        statusMessage,
+        setStatusMessage,
+    ]);
+    const modifiedFieldsContext = useMemo(() => {
+        return {
+            modifiedFields,
+            setModifiedFields,
+        };
+    }, [modifiedFields, setModifiedFields]);
+    useEffect(() => {
+        editContextRef.current = editContext;
+    }, [editContext]);
+    if (!currentView)
+        return null;
+    return (_jsx("div", { className: `editor h-full`, children: _jsx(OperationsContextProvider, { value: operationsContext.context, children: _jsx(ModifiedFieldsContextProvider, { value: modifiedFieldsContext, children: _jsxs(EditContextProvider, { value: editContext, children: [pageViewContext.fullscreen ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 flex", children: _jsx(PageViewerFrame, { mode: editContext.previewMode ? "view" : "edit", pageViewContext: pageViewContext }) }), showFullscreenHint && (_jsx("div", { className: "fixed inset-0", onMouseMoveCapture: () => {
+                                        setTimeout(() => {
+                                            setShowFullscreenHint(false);
+                                        }, 600);
+                                    }, children: _jsx("div", { className: "fixed top-3 left-1/2 -translate-x-1/2 transform rounded-sm bg-gray-200 p-12", children: "Press Ctrl + F11 to exit fullscreen mode" }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Toast, { ref: toast }), _jsx(ConfirmationDialog, { ref: confirmationDialogRef }), _jsx(EditContextMenu, { ref: contextMenuRef }), _jsx(MainLayout, { className: className, view: currentView, centerPanelView: centerPanelView, rightSidebar: currentView.rightSidebar && (_jsx(SidebarView, { sidebar: currentView.rightSidebar, editContext: editContext, active: true })), rightSidebarTitle: currentView.rightSidebar?.title }), mediaSelectorVisible && (_jsx(MediaSelector, { language: editContext.currentItemDescriptor.language, visible: mediaSelectorVisible, onHide: () => setMediaSelectorVisible(false), onMediaSelected: onMediaSelect, selectedIdPath: selectedMediaIdPath, mode: mediaSelectorMode })), _jsx(AiPopup, { ref: aiPopupRef }), _jsx(FieldEditorPopup, { ref: fieldEditorPopupRef }), isTourActive && (_jsx(Tour, { tourStopCallback: () => setIsTourActive(false) }))] })), editContext.isRefreshing && (_jsx("div", { className: "pointer-events-none fixed right-0 bottom-0 flex h-24 w-24 items-center justify-center text-gray-600 opacity-50 select-none", children: _jsx(Spinner, {}) }))] }) }) }) }));
+}
+//# sourceMappingURL=EditorClient.js.map