@alpaca-editor/core 1.0.4026 → 1.0.4030

package/dist/editor/client/EditorClient.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React, { useState, useEffect, useRef, useCallback, useMemo, } from "react";
 import { toast } from "sonner";
 import { EditContextProvider, ModifiedFieldsContextProvider, OperationsContextProvider, } from "./editContext";
+import { fieldModificationStore } from "./fieldModificationStore";
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
 import { findComponent, getComponentById } from "../componentTreeHelper";
 import { getOperationsContext } from "./operations";
@@ -19,7 +20,6 @@ import MainLayout from "../MainLayout";
 import { getItemDescriptor, useEventListenerExt } from "../utils";
 import { EditContextMenu } from "../ContextMenu";
 import { FieldEditorPopup } from "../FieldEditorPopup";
-import { AiPopup } from "../ai/AiPopup";
 import { EditorFormPopup, } from "../page-viewer/EditorFormPopup";
 import { post } from "../services/serviceHelper";
 import { SidebarView } from "../sidebar/SidebarView";
@@ -40,7 +40,7 @@ import { getSuggestedEdits } from "../services/suggestedEditsService";
 import { usePageWizard } from "../../page-wizard/usePageWizard";
 import { requestQuota } from "../services/aiService";
 import { Shrink } from "lucide-react";
-export function EditorClient({ configuration, className, item: loadItemDescriptor, sessionId, userInfo, userPreferences, setUserPreferences, children, }) {
+export function EditorClient({ configuration, className, item: loadItemDescriptor, sessionId, userInfo, userPreferences, editorSettings, setUserPreferences, children, }) {
     const router = useRouter();
     const pathname = usePathname();
     const searchParams = useSearchParams();
@@ -67,12 +67,23 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
     // const [showPublishDialog, setShowPublishDialog] = useState(false);
     const [activeFieldActions, setActiveFieldActions] = useState([]);
     const [renderedFields, setRenderedFields] = useState([]);
-    const aiPopupRef = React.useRef(null);
     const fieldEditorPopupRef = React.useRef(null);
     const editorFormPopupRef = React.useRef(null);
     const [validationResult, setValidationResult] = useState();
     const [editHistory, setEditHistory] = useState([]);
-    const [lastEditedFields, setLastEditedFields] = useState([]);
+    const [recentEdits, setRecentEdits] = useState([]);
+    const addRecentEdit = useCallback((edit) => {
+        setRecentEdits((prevEditedFields) => {
+            return [
+                ...prevEditedFields.filter((x) => x.timestamp > Date.now() - 30000 &&
+                    (x.fieldId !== edit.fieldId ||
+                        x.item.id !== edit.item.id ||
+                        x.item.language !== edit.item.language ||
+                        x.item.version !== edit.item.version)),
+                edit,
+            ];
+        });
+    }, []);
     const [activeSessions, setActiveSessions] = useState([]);
     if (typeof window !== "undefined")
         sessionStorage?.setItem("sessionId", sessionId);
@@ -174,17 +185,17 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
             setFocusedField(undefined);
         }
     }, [selection]);
-    const itemsRepository = useItemsRepository(setModifiedFields, setLastEditedFields);
+    const itemsRepository = useItemsRepository(setModifiedFields, addRecentEdit);
     const pageViewContext = usePageViewContext({
         pageItemDescriptor: currentItemDescriptor,
         itemsRepository,
         configuration,
     });
     const socketMessageListeners = useRef(new Set());
-    const addSocketMessageListener = (callback) => {
+    const addSocketMessageListener = useCallback((callback) => {
         socketMessageListeners.current.add(callback);
         return () => socketMessageListeners.current.delete(callback);
-    };
+    }, []);
     const reviews = useReviews({
         currentItemDescriptor: contentEditorItem?.descriptor,
         addSocketMessageListener: addSocketMessageListener,
@@ -232,19 +243,23 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
         //  socket.send(JSON.stringify(clientInfoMessage));
         //}
     };
-    const startTour = () => {
+    const startTour = useCallback(() => {
         setIsTourActive(true);
-    };
-    const handleSetShowRightSidebar = (value) => {
+    }, [setIsTourActive]);
+    const handleSetShowRightSidebar = useCallback((value) => {
         const newValue = typeof value === "function" ? value(showRightSidebar) : value;
         setShowRightSidebar(newValue);
         setUserPreferences({ showRightSidebar: newValue });
-    };
-    const handleSetHideNonEditableComponents = (value) => {
+    }, [showRightSidebar, setShowRightSidebar, setUserPreferences]);
+    const handleSetHideNonEditableComponents = useCallback((value) => {
         const newValue = typeof value === "function" ? value(hideNonEditableComponents) : value;
         setHideNonEditableComponents(newValue);
         setUserPreferences({ hideNonEditableComponents: newValue });
-    };
+    }, [
+        hideNonEditableComponents,
+        setHideNonEditableComponents,
+        setUserPreferences,
+    ]);
     const messageHandler = useCallback(async (event) => {
         if (!event.data.startsWith("{"))
             return;
@@ -310,7 +325,6 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
             if (currentItemDescriptorRef.current) {
                 if (currentItemDescriptorRef.current.id === message.payload.item.id)
                     await loadItemVersions();
-                setCurrentItemDescriptor({ ...currentItemDescriptorRef.current });
             }
         }
         if (message.type === "comment-updated") {
@@ -452,8 +466,8 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
             }
         }
         socketMessageListeners.current.forEach((listener) => listener(message));
-    }, [currentItemDescriptorRef, setLastEditedFields]);
-    const user = activeSessions.find((x) => x.sessionId === sessionId)?.user;
+    }, [currentItemDescriptorRef, addRecentEdit]);
+    const user = useMemo(() => activeSessions.find((x) => x.sessionId === sessionId)?.user, [activeSessions, sessionId]);
     useEffect(() => {
         if (typeof window === "undefined")
             return;
@@ -561,7 +575,7 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
         const tour = configuration.activeTour;
         const key = tour === "default" ? "editor.tourShown" : "editor.tourShown." + tour;
         const tourShown = localStorage.getItem(key);
-        if (user?.isLimitedPreviewUser && !tourShown) {
+        if (!tourShown) {
             startTour();
             localStorage.setItem(key, "true");
         }
@@ -670,7 +684,7 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
             // Set a small timeout to ensure all initial state setting effects have run
             const timer = setTimeout(() => {
                 setIsInitialLoad(false);
-                console.log("🔗 INITIAL LOAD COMPLETE - State now drives URL updates");
+                //console.log("🔗 INITIAL LOAD COMPLETE - State now drives URL updates");
             }, 100);
             return () => clearTimeout(timer);
         }
@@ -710,7 +724,7 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
     useEffect(() => {
         setRefreshCompletedFlag(!refreshCompletedFlag);
         setInserting(undefined);
-    }, [currentItemDescriptor, pageViewContext.page]);
+    }, [currentItemDescriptor, pageViewContext.page?.item.id]);
     useEffect(() => {
         sendClientInfo();
     }, [currentItemDescriptor]);
@@ -811,7 +825,7 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
                 doRefresh();
             }, mode === "waitForQuietPeriod" ? 1200 : 700);
         }
-    }, [contentEditorItem, router]);
+    }, []);
     useEffect(() => {
         if (!currentItemDescriptor)
             return;
@@ -860,7 +874,6 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
             current.set("version", currentItemDescriptor.version.toString());
         }
         if (current.get("view") !== viewName) {
-            console.log("EditorClient: Updating view from", current.get("view"), "to", viewName);
             current.set("view", viewName);
         }
         if (!compareMode) {
@@ -990,21 +1003,6 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
         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: openDialog,
-            event,
-            data,
-        };
-        const result = await command.execute(context);
-        return result;
-    }, [editContextRef, pathname, router, searchParams]);
     const state = useMemo(() => ({
         page,
         configuration,
@@ -1025,6 +1023,7 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
         setSuggestedEdits,
         mode,
         setFocusFieldComponentId,
+        setInsertMode,
     }), [
         page,
         configuration,
@@ -1045,10 +1044,9 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
         setSuggestedEdits,
         mode,
         setFocusFieldComponentId,
+        setInsertMode,
     ]);
     useEffect(() => {
-        if (currentOverlay !== "ai")
-            aiPopupRef.current?.close();
         if (currentOverlay !== "fields")
             fieldEditorPopupRef.current?.close();
         if (currentOverlay !== "context-menu")
@@ -1083,25 +1081,26 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
     const showInfoToast = useCallback(({ summary, details }) => {
         toast.info(details || summary || "Information");
     }, []);
+    const onOperationExecuted = useCallback((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);
+        }
+    }, [contentEditorItem, setEditHistory, setInsertMode]);
     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]);
+        onOperationExecuted,
+    }), [showErrorToast, confirmationDialogRef, onOperationExecuted]);
     const selectMedia = useCallback(({ selectedIdPath, mode, }) => {
         setSelectedMediaIdPath(selectedIdPath);
         setMediaSelectorVisible(true);
@@ -1197,7 +1196,7 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
         switchView();
     };
     const [dialog, setDialog] = useState(null);
-    const openDialog = (Component, props) => {
+    const openDialog = useCallback((Component, props) => {
         return new Promise((resolve) => {
             const handleClose = (result) => {
                 setDialog(null);
@@ -1205,7 +1204,22 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
             };
             setDialog(_jsx(Component, { ...props, onClose: handleClose }));
         });
-    };
+    }, [setDialog]);
+    const executeCommand = useCallback(async ({ command, event, data, }) => {
+        if (!editContextRef.current)
+            return;
+        const context = {
+            editContext: editContextRef.current,
+            pathname,
+            router,
+            searchParams,
+            openDialog: openDialog,
+            event,
+            data,
+        };
+        const result = await command.execute(context);
+        return result;
+    }, [editContextRef, pathname, router, searchParams, openDialog]);
     const operationsContext = getOperationsContext(state, ui);
     const operations = operationsContext.ops;
     const { handleKeyDown } = useKeyboardNavigation({
@@ -1302,8 +1316,34 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
             });
         }
     }, [quotaInfo, getQuotaWarningMessage, isQuotaExceeded, showErrorToast]);
+    // Calculate visible views separately to avoid circular dependency
+    const visibleViews = useMemo(() => {
+        const allViews = configuration.editor.views
+            ?.filter((x) => {
+            // For this calculation, we'll pass null for editContext since we're building it
+            // The visibility check will be recalculated after editContext is available
+            return !x.visible && !x.hidden;
+        })
+            .filter((x) => !userInfo.views ||
+            userInfo.views.map((view) => view.name).includes(x.name)) ?? [];
+        const pinnedViews = userInfo.preferences?.pinnedViews ||
+            configuration.editor.defaultPinnedViews ||
+            [];
+        return allViews.filter((view) => 
+        // Always show selected view
+        view.name === viewName ||
+            // Show pinned views
+            pinnedViews.includes(view.name));
+    }, [
+        configuration.editor.views,
+        userInfo.views,
+        userInfo.preferences?.pinnedViews,
+        configuration.editor.defaultPinnedViews,
+        viewName,
+    ]);
     const editContext = useMemo(() => {
-        return {
+        // console.log('🔄 EditContext useMemo is being recalculated');
+        const context = {
             operations: operationsContext.ops,
             itemsRepository,
             configuration,
@@ -1493,10 +1533,6 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
                 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);
@@ -1534,6 +1570,7 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
             compareMode,
             setCompareMode,
             view: currentView,
+            visibleViews,
             pageView: pageViewContext,
             componentDesignerComponent,
             setComponentDesignerComponent,
@@ -1570,7 +1607,6 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
             currentItemDescriptor,
             compareTo,
             setCompareTo,
-            lastEditedFields,
             revision,
             selectedComment,
             setSelectedComment,
@@ -1653,6 +1689,7 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
             webSocketMessages,
             clearWebSocketMessages: () => setWebSocketMessages([]),
             userInfo: userInfo,
+            editorSettings,
             userPreferences,
             setUserPreferences,
             currentWizardId,
@@ -1660,6 +1697,7 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
             favorites,
             loadFavorites,
         };
+        return context;
     }, [
         operations,
         itemsRepository,
@@ -1712,7 +1750,6 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
         currentItemDescriptor,
         compareTo,
         setCompareTo,
-        lastEditedFields,
         revision,
         comments,
         setComments,
@@ -1748,18 +1785,239 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
         setCurrentWizardId,
         favorites,
         loadFavorites,
+        userInfo,
+        editorSettings,
+        visibleViews,
     ]);
+    // CRITICAL: Assign editContext to ref so keyboard handlers can access it
+    useEffect(() => {
+        editContextRef.current = editContext;
+    }, [editContext]);
     const modifiedFieldsContext = useMemo(() => {
         return {
             modifiedFields,
+            recentEdits,
             clear: () => {
                 setModifiedFields([]);
+                fieldModificationStore.clear();
             },
+            clearRecentEdits: () => {
+                setRecentEdits([]);
+            },
+            addRecentEdit,
         };
-    }, [modifiedFields, setModifiedFields]);
-    useEffect(() => {
-        editContextRef.current = editContext;
-    }, [editContext]);
+    }, [modifiedFields, recentEdits, addRecentEdit]);
+    // Debug: Track editContext changes
+    const prevDependencies = useRef([]);
+    // useEffect(() => {
+    //   // Create current dependencies array to match the useMemo dependency array
+    //   const currentDependencies = [
+    //     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,
+    //     compareMode,
+    //     setCompareMode,
+    //     addSocketMessageListener,
+    //     currentItemDescriptor,
+    //     compareTo,
+    //     setCompareTo,
+    //     revision,
+    //     comments,
+    //     setComments,
+    //     selectedComment,
+    //     setSelectedComment,
+    //     loadComments,
+    //     mode,
+    //     setMode,
+    //     user,
+    //     reviews,
+    //     statusMessage,
+    //     setStatusMessage,
+    //     suggestedEdits,
+    //     setSuggestedEdits,
+    //     showSuggestedEdits,
+    //     setShowSuggestedEdits,
+    //     showSuggestedEditsDiff,
+    //     setShowSuggestedEditsDiff,
+    //     showRightSidebar,
+    //     handleSetShowRightSidebar,
+    //     activeEditorTab,
+    //     setActiveEditorTab,
+    //     hideNonEditableComponents,
+    //     handleSetHideNonEditableComponents,
+    //     quotaInfo,
+    //     isQuotaExceeded,
+    //     getQuotaWarningMessage,
+    //     isMobile,
+    //     openDialog,
+    //     pageWizard,
+    //     webSocketMessages,
+    //     currentWizardId,
+    //     setCurrentWizardId,
+    //     favorites,
+    //     loadFavorites,
+    //   ];
+    //   const dependencyNames = [
+    //     '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',
+    //     'compareMode',
+    //     'setCompareMode',
+    //     'addSocketMessageListener',
+    //     'currentItemDescriptor',
+    //     'compareTo',
+    //     'setCompareTo',
+    //     'revision',
+    //     'comments',
+    //     'setComments',
+    //     'selectedComment',
+    //     'setSelectedComment',
+    //     'loadComments',
+    //     'mode',
+    //     'setMode',
+    //     'user',
+    //     'reviews',
+    //     'statusMessage',
+    //     'setStatusMessage',
+    //     'suggestedEdits',
+    //     'setSuggestedEdits',
+    //     'showSuggestedEdits',
+    //     'setShowSuggestedEdits',
+    //     'showSuggestedEditsDiff',
+    //     'setShowSuggestedEditsDiff',
+    //     'showRightSidebar',
+    //     'handleSetShowRightSidebar',
+    //     'activeEditorTab',
+    //     'setActiveEditorTab',
+    //     'hideNonEditableComponents',
+    //     'handleSetHideNonEditableComponents',
+    //     'quotaInfo',
+    //     'isQuotaExceeded',
+    //     'getQuotaWarningMessage',
+    //     'isMobile',
+    //     'openDialog',
+    //     'pageWizard',
+    //     'webSocketMessages',
+    //     'currentWizardId',
+    //     'setCurrentWizardId',
+    //     'favorites',
+    //     'loadFavorites',
+    //   ];
+    //   // Check which dependencies have changed
+    //   const changedDependencies: string[] = [];
+    //   currentDependencies.forEach((dep, index) => {
+    //     if (prevDependencies.current[index] !== dep) {
+    //       const depName = dependencyNames[index];
+    //       if (depName) {
+    //         changedDependencies.push(depName);
+    //       }
+    //     }
+    //   });
+    //   if (changedDependencies.length > 0) {
+    //     console.group('🔍 EditContext Changed');
+    //     console.log('Changed dependencies:', changedDependencies);
+    //     console.log('Total dependencies tracked:', currentDependencies.length);
+    //     // Log details about the changed dependencies
+    //     changedDependencies.forEach(depName => {
+    //       const index = dependencyNames.indexOf(depName);
+    //       const oldValue = prevDependencies.current[index];
+    //       const newValue = currentDependencies[index];
+    //       console.log(`📝 ${depName}:`, {
+    //         from: oldValue,
+    //         to: newValue,
+    //         changed: oldValue !== newValue
+    //       });
+    //     });
+    //     console.groupEnd();
+    //   }
+    //   // Store current dependencies for next comparison
+    //   prevDependencies.current = currentDependencies;
+    //   editContextRef.current = editContext;
+    // }, [editContext]);
     useEffect(() => {
         modifiedFieldsContext.clear();
     }, [currentItemDescriptor]);
@@ -1771,6 +2029,6 @@ export function EditorClient({ configuration, className, item: loadItemDescripto
                     }, 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(MainLayout, { className: className, view: currentView, centerPanelView: centerPanelView, rightSidebar: currentView.rightSidebar &&
                     showRightSidebar && (_jsx(SidebarView, { sidebar: currentView.rightSidebar, editContext: editContext, active: true, detached: true, onClose: () => handleSetShowRightSidebar(false) })), rightSidebarTitle: currentView.rightSidebar?.title }), isTourActive && _jsx(Tour, { tourStopCallback: () => setIsTourActive(false) })] }));
-    return (_jsx("div", { className: `editor h-full`, children: _jsx(OperationsContextProvider, { value: operationsContext.context, children: _jsx(ModifiedFieldsContextProvider, { value: modifiedFieldsContext, children: _jsxs(EditContextProvider, { value: editContext, children: [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, {}) })), children || editorUi, dialog, _jsx(Toaster, { position: "top-center" }), " ", _jsx(ConfirmationDialog, { ref: confirmationDialogRef }), _jsx(EditContextMenu, { ref: contextMenuRef }), 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 }), _jsx(EditorFormPopup, { ref: editorFormPopupRef, pageViewContext: pageViewContext })] }) }) }) }));
+    return (_jsx("div", { className: `editor h-full`, children: _jsx(OperationsContextProvider, { value: operationsContext.context, children: _jsx(ModifiedFieldsContextProvider, { value: modifiedFieldsContext, children: _jsxs(EditContextProvider, { value: editContext, children: [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, {}) })), children || editorUi, dialog, _jsx(Toaster, { position: "top-center" }), " ", _jsx(ConfirmationDialog, { ref: confirmationDialogRef }), _jsx(EditContextMenu, { ref: contextMenuRef }), mediaSelectorVisible && (_jsx(MediaSelector, { language: editContext.currentItemDescriptor.language, visible: mediaSelectorVisible, onHide: () => setMediaSelectorVisible(false), onMediaSelected: onMediaSelect, selectedIdPath: selectedMediaIdPath, mode: mediaSelectorMode })), _jsx(FieldEditorPopup, { ref: fieldEditorPopupRef }), _jsx(EditorFormPopup, { ref: editorFormPopupRef, pageViewContext: pageViewContext })] }) }) }) }));
 }
 //# sourceMappingURL=EditorClient.js.map