@alpaca-editor/core 1.0.3942 → 1.0.3943

package/src/editor/client/EditorClient.tsx

@@ -0,0 +1,2241 @@
+"use client";
+
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  MouseEvent,
+  useMemo,
+  ReactNode,
+} from "react";
+
+import { Toast, ToastMessage } from "primereact/toast";
+
+import {
+  EditContextProvider,
+  DragObject,
+  ModifiedFieldsContextProvider,
+  OperationsContextProvider,
+  ModifiedField,
+  EditContextType,
+  EditedField,
+  SelectionRange,
+  EditorMode,
+} from "./editContext";
+
+import type { OpenDialog } from "./editContext";
+
+import { EditorConfiguration, MenuItem } from "../../config/types";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import { findComponent, 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,
+  MediaSelectorMode,
+} from "../media-selector/MediaSelector";
+import { getComponentCommands } from "../commands/componentCommands";
+
+import {
+  getLanguagesAndVersions,
+  getWorkbox,
+} from "../services/contentService";
+import ConfirmationDialog, {
+  ConfirmationDialogHandle,
+  ConfirmationProps,
+} from "../ConfirmationDialog";
+
+import MainLayout from "../MainLayout";
+import { getItemDescriptor, useEventListenerExt } from "../utils";
+
+import { EditContextMenu, EditContextMenuRef } from "../ContextMenu";
+
+import { FieldEditorPopup, FieldEditorPopupRef } from "../FieldEditorPopup";
+
+import { Command, CommandData } from "../commands/commands";
+import { AiPopup, AiPopupRef } from "../ai/AiPopup";
+
+import { ComponentDetails } from "../services/componentDesignerService";
+import {
+  EditFieldOperation,
+  EditOperation,
+  EditSession,
+  FieldDescriptor,
+  HistoryEntry,
+  InsertOption,
+  LanguageVersions,
+  LinkComponentOperation,
+  MoveComponentOperation,
+  ValidationResult,
+  WorkboxItem,
+  Comment,
+  SuggestedEdit,
+  UserInfo,
+} from "../../types";
+
+import { post } from "../services/serviceHelper";
+import { SidebarView } from "../sidebar/SidebarView";
+import { PageViewerFrame } from "../page-viewer/PageViewerFrame";
+import { ClientFieldButton } from "../../config/types";
+
+import {
+  Component,
+  FieldButton,
+  ItemDescriptor,
+  FullItem,
+  Version,
+  Timings,
+  Field,
+} from "../pageModel";
+
+import { useItemsRepository } from "./itemsRepository";
+
+import { Spinner } from "../ui/Spinner";
+import { cleanId } from "../utils/id-helper";
+
+import { useDebouncedCallback } from "use-debounce";
+
+import { Tour } from "../../tour/Tour";
+import { usePageViewContext } from "../page-viewer/pageViewContext";
+
+import { getComments } from "../services/reviewsService";
+import { AiTerminalOptions } from "../ai/AiTerminal";
+import { useReviews } from "../reviews/useReviews";
+import uuid from "react-uuid";
+import { flushSync } from "react-dom";
+import { getSuggestedEdits } from "../services/suggestedEditsService";
+import { usePageWizard } from "../../page-wizard/usePageWizard";
+import { requestQuota } from "../services/aiService";
+
+export type FieldAction = {
+  field: FieldDescriptor;
+  message?: string;
+  state: "running" | "success" | "error";
+  label?: string;
+};
+
+export type WindowSize = { width: number; height: number };
+export type InsertingState = {
+  positionElement: Element;
+  positionAnchor: "left" | "right" | "top" | "bottom";
+};
+export type QuotaUsage = {
+  totalTokens: number;
+  totalImages: number;
+  dailyTokens: number;
+  dailyImages: number;
+};
+export type QuotaLimits = {
+  totalTokens: number;
+  dailyTokens: number;
+  monthlyTokens: number;
+  totalImages: number;
+  dailyImages: number;
+  monthlyImages: number;
+};
+export type QuotaInfo = { usage: QuotaUsage; limits: QuotaLimits };
+
+export type WebSocketMessage = {
+  id: string;
+  timestamp: string;
+  type: string;
+  payload: any;
+  rawMessage: string;
+};
+
+export function EditorClient({
+  configuration,
+  className,
+  item: loadItemDescriptor,
+  sessionId,
+  userInfo,
+}: {
+  configuration: EditorConfiguration;
+  className?: string;
+  item?: ItemDescriptor;
+  sessionId: string;
+  userInfo: UserInfo;
+}) {
+  const router = useRouter();
+
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [selection, setSelection] = useState<string[]>([]);
+  const [selectedForInsertion, setSelectedForInsertion] = useState<string>("");
+
+  const [refreshCompletedFlag, setRefreshCompletedFlag] = useState(false);
+
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [dragObject, setDragObject] = useState<DragObject>();
+  const [mediaResolver, setMediaResolver] = useState<(value: string) => void>();
+  const [mediaSelectorVisible, setMediaSelectorVisible] = useState(false);
+  const [mediaSelectorMode, setMediaSelectorMode] = useState<
+    "images" | "video"
+  >("images");
+  const [selectedMediaIdPath, setSelectedMediaIdPath] = useState<string>("");
+  const [scrollIntoView, setScrollIntoView] = useState<string>();
+
+  const confirmationDialogRef = useRef<ConfirmationDialogHandle>(null);
+  const contextMenuRef = useRef<EditContextMenuRef>(null);
+  const editContextRef = useRef<EditContextType>(undefined);
+
+  const [currentOverlay, setCurrentOverlay] = useState<string>();
+  const [contentEditorItem, setContentEditorItem] = useState<FullItem>();
+
+  const [focusedField, setFocusedField] = useState<FieldDescriptor>();
+  const [selectedRange, setSelectedRange] = useState<SelectionRange>();
+
+  const [validating, setValidating] = useState(false);
+
+  const [inserting, setInserting] = useState<InsertingState>();
+
+  const [showFullscreenHint, setShowFullscreenHint] = useState(false);
+  // const [showPublishDialog, setShowPublishDialog] = useState(false);
+  const [activeFieldActions, setActiveFieldActions] = useState<FieldAction[]>(
+    [],
+  );
+  const [renderedFields, setRenderedFields] = useState<FieldDescriptor[]>([]);
+
+  const aiPopupRef = React.useRef<AiPopupRef>(null);
+  const fieldEditorPopupRef = React.useRef<FieldEditorPopupRef>(null);
+
+  const [validationResult, setValidationResult] = useState<
+    ValidationResult[] | undefined
+  >();
+
+  const [editHistory, setEditHistory] = useState<EditOperation[]>([]);
+
+  const [lastEditedFields, setLastEditedFields] = useState<EditedField[]>([]);
+
+  const [activeSessions, setActiveSessions] = useState<EditSession[]>([]);
+
+  if (typeof window !== "undefined")
+    sessionStorage?.setItem("sessionId", sessionId);
+
+  const [viewName, setViewName] = useState<string>(
+    // default from query string
+    searchParams.get("view") ??
+      configuration.editor.views[0]?.name ??
+      "splash-screen",
+  );
+
+  const [compareMode, setCompareMode] = useState(false);
+  const [compareTo, setCompareTo] = useState<ItemDescriptor>();
+
+  const [componentDesignerComponent, setComponentDesignerComponent] =
+    useState<ComponentDetails>();
+  const [componentDesignerRendering, setComponentDesignerRendering] =
+    useState<FullItem>();
+
+  const [insertMode, setInsertMode] = useState(false);
+
+  const [ignoreBlur, setIgnoreBlur] = useState(false);
+
+  const [currentItemDescriptor, setCurrentItemDescriptor] =
+    useState<ItemDescriptor>();
+  const currentItemDescriptorRef = useRef<ItemDescriptor>(undefined);
+  useEffect(() => {
+    currentItemDescriptorRef.current = currentItemDescriptor;
+  }, [currentItemDescriptor]);
+
+  const currentItemRef = useRef<FullItem>(undefined);
+  useEffect(() => {
+    currentItemRef.current = contentEditorItem;
+  }, [contentEditorItem]);
+
+  const [inlineEditingFieldElement, setInlineEditingFieldElement] =
+    useState<HTMLElement>();
+
+  const [lockedField, setLockedField] = useState<FieldDescriptor>();
+
+  const [itemLanguages, setItemLanguages] = useState<LanguageVersions[]>([]);
+  const [itemVersions, setItemVersions] = useState<Version[]>([]);
+  const [modifiedFields, setModifiedFields] = useState<ModifiedField[]>([]);
+  const [comments, setComments] = useState<Comment[]>([]);
+  const [suggestedEdits, setSuggestedEdits] = useState<SuggestedEdit[]>([]);
+  const [showSuggestedEdits, setShowSuggestedEdits] = useState(false);
+  const [showSuggestedEditsDiff, setShowSuggestedEditsDiff] = useState(false);
+  const [showComments, setShowComments] = useState<boolean>(() => {
+    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<Comment>();
+
+  const [browseHistory, setBrowseHistory] = useState<HistoryEntry[]>(() => {
+    const savedHistory =
+      typeof window !== "undefined"
+        ? localStorage.getItem("editor.browseHistory")
+        : null;
+    return savedHistory ? JSON.parse(savedHistory) : [];
+  });
+
+  const [centerPanelView, setCenterPanelView] = useState<ReactNode>();
+  const [timings, setTimings] = useState<Timings>({});
+
+  const [revision, setRevision] = useState<string>();
+
+  const [workboxItems, setWorkboxItems] = useState<WorkboxItem[]>([]);
+  const [isTourActive, setIsTourActive] = useState(false);
+
+  const [mode, setMode] = useState<EditorMode>("edit");
+
+  const [statusMessage, setStatusMessage] = useState<React.ReactNode>("");
+  const [focusFieldComponentId, setFocusFieldComponentId] = useState<string>();
+
+  const [enableCompletions, setEnableCompletions] = useState(false);
+  const [quotaInfo, setQuotaInfo] = useState<QuotaInfo | null>(null);
+  const pageWizard = usePageWizard();
+
+  const [webSocketMessages, setWebSocketMessages] = useState<
+    WebSocketMessage[]
+  >([]);
+
+  useEffect(() => {
+    const queryMode = searchParams.get("mode");
+    if (queryMode) setMode(queryMode as EditorMode);
+  }, [searchParams]);
+
+  useEffect(() => {
+    if (mode === "suggestions") {
+      setViewName("reviews");
+    }
+  }, [mode]);
+
+  useEffect(() => {
+    if (
+      focusedField &&
+      selection.length > 0 &&
+      selection[0] !== focusedField.item.id
+    ) {
+      setFocusedField(undefined);
+    }
+  }, [selection]);
+
+  const itemsRepository = useItemsRepository(
+    setModifiedFields,
+    setLastEditedFields,
+  );
+
+  const pageViewContext = usePageViewContext({
+    pageItemDescriptor: currentItemDescriptor,
+    itemsRepository,
+    configuration,
+  });
+
+  const socketMessageListeners = useRef<Set<(data: any) => void>>(new Set());
+
+  const addSocketMessageListener = (
+    callback: (message: { type: string; payload: any }) => void,
+  ) => {
+    socketMessageListeners.current.add(callback);
+    return () => socketMessageListeners.current.delete(callback);
+  };
+
+  const reviews = useReviews({
+    currentItemDescriptor: contentEditorItem?.descriptor,
+    addSocketMessageListener: addSocketMessageListener,
+  });
+
+  const validate = useDebouncedCallback(async (items: ItemDescriptor[]) => {
+    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 as any).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: any) => {
+      if (!event.data.startsWith("{")) return;
+      const message = JSON.parse(event.data);
+
+      // Track all WebSocket messages for debugging/monitoring
+      try {
+        const webSocketMessage: WebSocketMessage = {
+          id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
+          timestamp: new Date().toISOString(),
+          type: message.type || "unknown",
+          payload: message.payload,
+          rawMessage: JSON.stringify(message, null, 2),
+        };
+
+        setWebSocketMessages((prev) => {
+          const updated = [webSocketMessage, ...prev];
+          // Keep only the latest 1000 messages
+          return updated.slice(0, 1000);
+        });
+      } catch (error) {
+        console.error("Error tracking WebSocket message:", error);
+      }
+
+      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.commentId);
+        });
+      }
+
+      if (message.type === "suggested-edit-updated") {
+        setSuggestedEdits((x) => {
+          const index = x.findIndex(
+            (s) => s.id === message.payload.suggestedEdit.id,
+          );
+          if (index !== -1) x[index] = message.payload.suggestedEdit;
+          else x.push(message.payload.suggestedEdit);
+          return x;
+        });
+      }
+
+      if (message.type === "suggested-edit-deleted") {
+        setSuggestedEdits((x) => {
+          return x.filter((s) => s.id !== message.payload.id);
+        });
+      }
+
+      if (message.type === "executing-field-action") {
+        setActiveFieldActions((x) => {
+          const payload = message.payload;
+          const fieldId = payload.fieldId;
+          const item = payload.item;
+          const status = payload.status;
+          const msg = payload.message;
+          const label = payload.label;
+
+          // Map backend status to FieldAction state
+          let state: "running" | "success" | "error";
+          switch (status?.toLowerCase()) {
+            case "completed":
+            case "success":
+              state = "success";
+              break;
+            case "failed":
+            case "error":
+              state = "error";
+              break;
+            default:
+              state = "running";
+              break;
+          }
+
+          // Check if action already exists
+          const existingActionIndex = x.findIndex(
+            (action) =>
+              action.field.fieldId === fieldId &&
+              action.field.item.id === item.id &&
+              action.field.item.language === item.language &&
+              action.field.item.version === item.version,
+          );
+
+          if (existingActionIndex !== -1) {
+            // Update existing action
+            const newActions = [...x];
+            newActions[existingActionIndex]!.state = state;
+            newActions[existingActionIndex]!.message = msg;
+            return newActions;
+          } else {
+            // Insert new action
+            const fieldDescriptor: FieldDescriptor = {
+              fieldId: fieldId,
+              item: item,
+            };
+
+            const newAction: FieldAction = {
+              field: fieldDescriptor,
+              state,
+              message: msg,
+              label: label,
+            };
+            // console.log(newAction);
+            return [...x, newAction];
+          }
+        });
+      }
+
+      if (message.type === "update-quota") {
+        setQuotaInfo(message.payload);
+      }
+
+      if (message.type === "edit-operation") {
+        const op = message.payload as EditOperation;
+
+        if (op.type === "edit-field") {
+          const editFieldOperation = op as EditFieldOperation;
+
+          const field = await itemsRepository.getField({
+            item: {
+              ...editFieldOperation.mainItem,
+              id: editFieldOperation.itemId,
+            },
+            fieldId: editFieldOperation.fieldId,
+          });
+
+          if (
+            !field ||
+            (field.type !== "single-line text" &&
+              field.type !== "multi-line text" &&
+              field.type !== "rich text")
+          ) {
+            itemsRepository.refreshItems([
+              {
+                ...editFieldOperation.mainItem,
+                id: editFieldOperation.itemId,
+              },
+            ]);
+            requestRefresh("immediate");
+          }
+          //TODO: field value changes that require rerender
+          else
+            itemsRepository.updateFieldValue(
+              {
+                fieldId: editFieldOperation.fieldId,
+                item: {
+                  ...editFieldOperation.mainItem,
+                  id: editFieldOperation.itemId,
+                },
+              },
+              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;
+    const 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: MessageEvent) => {
+      if (event.data.type === "componentsSelected") {
+        setSelection(event.data.componentIds);
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+
+    return () => {
+      window.removeEventListener("message", handleMessage);
+      clearInterval(interval);
+    };
+  }, []);
+
+  // Custom hook for responsive design
+  const useMediaQuery = (query: string) => {
+    const [matches, setMatches] = useState(false);
+
+    useEffect(() => {
+      const media = window.matchMedia(query);
+      const updateMatch = () => setMatches(media.matches);
+
+      // Set initial value
+      updateMatch();
+
+      // Listen for changes
+      media.addEventListener("change", updateMatch);
+
+      // Cleanup
+      return () => {
+        media.removeEventListener("change", updateMatch);
+      };
+    }, [query]);
+
+    return matches;
+  };
+
+  // Detect mobile screens (max-width: 768px)
+  const isMobile = useMediaQuery("(max-width: 768px)");
+
+  useEffect(() => {
+    const tour = configuration.activeTour;
+    const key =
+      tour === "default" ? "editor.tourShown" : "editor.tourShown." + tour;
+    const tourShown = localStorage.getItem(key);
+
+    if (user?.isLimitedPreviewUser && !tourShown) {
+      startTour();
+      localStorage.setItem(key, "true");
+    }
+  }, [user]);
+
+  useEffect(() => {
+    let reconnectTimeout: NodeJS.Timeout | null = null;
+    let reconnectAttempts = 0;
+
+    const connectWebSocket = () => {
+      let socket: WebSocket = (globalThis as any).editorSocket;
+
+      if (
+        socket &&
+        (socket.readyState === WebSocket.OPEN ||
+          socket.readyState === WebSocket.CONNECTING)
+      )
+        return;
+
+      socket = connectSocket(sessionId);
+
+      // Connection opened
+      socket.addEventListener("open", () => {
+        console.log("Connected!");
+        reconnectAttempts = 0; // Reset attempts on successful connection
+        sendClientInfo();
+        requestQuota();
+        //TODO: Load clients
+      });
+
+      // Listen for messages
+      socket.addEventListener("message", messageHandler);
+
+      // Handle connection close
+      socket.addEventListener("close", (event) => {
+        console.log("WebSocket connection closed:", event.code, event.reason);
+
+        // Only attempt to reconnect if it wasn't a clean close
+        if (event.code !== 1000) {
+          // Start with 1 second, increase exponentially up to 30 seconds
+          const delay = Math.min(
+            1000 * Math.pow(2, Math.min(reconnectAttempts, 5)),
+            30000,
+          );
+          console.log(
+            `Attempting to reconnect in ${delay}ms... (attempt ${reconnectAttempts + 1})`,
+          );
+
+          reconnectTimeout = setTimeout(() => {
+            reconnectAttempts++;
+            connectWebSocket();
+          }, delay);
+        }
+      });
+
+      // Handle connection errors
+      socket.addEventListener("error", (error) => {
+        console.error("WebSocket error:", error);
+      });
+
+      (globalThis as any).editorSocket = socket;
+    };
+
+    connectWebSocket();
+
+    // Cleanup function
+    return () => {
+      if (reconnectTimeout) {
+        clearTimeout(reconnectTimeout);
+      }
+    };
+  }, []);
+
+  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: EditOperation) => {
+      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();
+  }, [currentItemDescriptor]);
+
+  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 as Comment[];
+      const newComments = x.filter(
+        (c) =>
+          c.isNew &&
+          c.mainItemId === currentItemDescriptor.id &&
+          c.language === currentItemDescriptor.language &&
+          c.version === currentItemDescriptor.version,
+      );
+      const allComments = [...loadedComments, ...newComments];
+      allComments.sort((a, b) => a.position - b.position);
+      return allComments;
+    });
+  }, [currentItemDescriptor]);
+
+  // Assuming currentItemDescriptor, ui, state, handleErrorResult, and setSuggestedEdits
+  // are available in your component context.
+  const loadSuggestedEdits = useCallback(async () => {
+    if (!contentEditorItem) return;
+
+    const result = await getSuggestedEdits(
+      contentEditorItem.descriptor.id,
+      contentEditorItem.descriptor.language,
+      contentEditorItem.descriptor.version,
+    );
+
+    if (handleErrorResult(result, ui, state)) return;
+
+    setSuggestedEdits(result.data || []);
+  }, [contentEditorItem]);
+
+  const page = pageViewContext.page;
+
+  useEffect(() => {
+    const isLoading =
+      !!contentEditorItem &&
+      contentEditorItem.hasLayout &&
+      (!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: MessageEvent) => {
+      if (event.data.action === "refresh") {
+        requestRefresh("immediate");
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, []);
+
+  const loadHistory = useDebouncedCallback(async (item: ItemDescriptor) => {
+    const result = await getEditHistory(item);
+    if (handleErrorResult(result, ui, state)) return;
+    setEditHistory(result.data || []);
+  }, 200);
+
+  const refreshHistory = useCallback(async (item: ItemDescriptor) => {
+    const result = await getEditHistory(item);
+    if (handleErrorResult(result, ui, state)) return;
+    setEditHistory(result.data || []);
+  }, []);
+
+  const requestRefresh = useCallback(
+    (mode?: "immediate" | "delayed" | "waitForQuietPeriod") => {
+      const refreshTimer = (globalThis as any).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 as any).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 as any).editorRefreshTimer = setTimeout(
+          () => {
+            doRefresh();
+          },
+          mode === "waitForQuietPeriod" ? 1200 : 700,
+        );
+      }
+    },
+    [contentEditorItem, router],
+  );
+
+  useEffect(() => {
+    if (!currentItemDescriptor) return;
+    loadComments();
+    loadSuggestedEdits();
+  }, [currentItemDescriptor]);
+
+  // Automatically focus the first rendered field when a new component is added
+  useEffect(() => {
+    async function setFocus() {
+      if (!focusFieldComponentId) return;
+
+      const component = findComponent(
+        focusFieldComponentId,
+        page?.rootComponent?.placeholders ?? [],
+      );
+
+      if (component?.datasourceItem) {
+        const item = await itemsRepository.getItem(component.datasourceItem);
+        if (!item) return;
+        const field = item.fields.find(
+          (f) =>
+            component.datasourceItem?.renderedFieldIds?.includes(f.id) &&
+            (f.type === "single-line text" ||
+              f.type === "multi-line text" ||
+              f.type === "rich text"),
+        );
+        if (field) {
+          setFocusedField(field.descriptor);
+          setFocusFieldComponentId(undefined);
+        }
+      }
+    }
+    if (mode === "edit") setFocus();
+  }, [page]);
+
+  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");
+    }
+
+    current.set("mode", mode);
+
+    const newUrl = `${pathname}?${current.toString()}`;
+    router.push(newUrl, { scroll: false });
+  }, [currentItemDescriptor, viewName, compareMode, mode]);
+
+  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: FullItem) => {
+      const 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: HistoryEntry[]) => {
+        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: ItemDescriptor | string,
+      options?: { addToBrowseHistory?: boolean },
+    ): Promise<FullItem | undefined> => {
+      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") ||
+        viewName == "splash-screen"
+      ) {
+        setViewName("content-editor");
+      }
+
+      // ensure this is object has no additional properties
+      itemToLoad = getItemDescriptor(itemToLoad);
+
+      // 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");
+      }
+
+      current.set("mode", 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,
+    ],
+  );
+
+  useEffect(() => {
+    if (pageViewContext.fullscreen && !searchParams.get("fullscreen"))
+      setShowFullscreenHint(true);
+  }, [pageViewContext.fullscreen]);
+
+  const executeCommand = useCallback(
+    async <T extends CommandData>({
+      command,
+      event,
+      data,
+    }: {
+      command: Command<T>;
+      data?: any;
+      event?: React.SyntheticEvent;
+    }): Promise<any> => {
+      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 handleKeyDownDebounced = useDebouncedCallback(
+    async (event: KeyboardEvent) => {
+      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: KeyboardEvent) => {
+      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 as HTMLElement;
+      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,
+      suggestedEdits,
+      setSuggestedEdits,
+      mode,
+      setFocusFieldComponentId,
+    }),
+    [
+      page,
+      configuration,
+      selection,
+      setSelection,
+      loadItem,
+      addToEditHistory,
+      setLockedField,
+      contentEditorItem,
+      sessionId,
+      requestRefresh,
+      lockedField,
+      itemsRepository,
+      user,
+      editHistory,
+      refreshHistory,
+      suggestedEdits,
+      setSuggestedEdits,
+      mode,
+      setFocusFieldComponentId,
+    ],
+  );
+
+  useEffect(() => {
+    if (currentOverlay !== "ai") aiPopupRef.current?.close();
+    if (currentOverlay !== "fields") fieldEditorPopupRef.current?.close();
+    if (currentOverlay !== "context-menu") contextMenuRef.current?.close({});
+  }, [currentOverlay]);
+
+  const toast = useRef<Toast | null>(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;
+    }
+    const v = [...result.data.versions].reverse() || [];
+
+    setItemVersions(v);
+    setItemLanguages(result.data.languages);
+  }, [currentItemDescriptorRef.current, setItemVersions, setItemLanguages]);
+
+  const showErrorToast = useCallback(
+    ({ summary, details }: { summary?: string; details?: string }) => {
+      toast.current?.show({
+        severity: "error",
+        summary: summary || "Error",
+        detail: details || "An error occurred",
+        life: 3000,
+      });
+    },
+    [],
+  );
+
+  const showInfoToast = useCallback(
+    ({ summary, details }: { summary?: string; details?: string }) => {
+      toast.current?.show({
+        severity: "info",
+        summary: summary || "Info",
+        detail: details || "Information",
+        life: 3000,
+      });
+    },
+    [],
+  );
+
+  const ui = useMemo(
+    () => ({
+      showErrorToast,
+      confirmationDialogRef,
+      onOperationExecuted: (op: EditOperation) => {
+        // 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,
+    }: {
+      selectedIdPath: string;
+      mode?: MediaSelectorMode;
+    }) => {
+      setSelectedMediaIdPath(selectedIdPath);
+      setMediaSelectorVisible(true);
+      if (mode) setMediaSelectorMode(mode);
+      return new Promise<string>((resolve) => {
+        setMediaResolver(() => resolve);
+      });
+    },
+    [],
+  );
+
+  const onMediaSelect = useCallback(
+    (mediaUrl: string) => {
+      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: ItemDescriptor[]) {
+    if (!items.length) {
+      setWorkboxItems([]);
+      return;
+    }
+
+    const workbox = await getWorkbox(items);
+    const workboxItems: WorkboxItem[] = 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: ItemDescriptor[]) => loadWorkbox(items),
+    5000,
+  );
+
+  useEffect(() => {
+    const items: ItemDescriptor[] = [];
+
+    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: Component, items: ItemDescriptor[]) {
+    component.placeholders.forEach((x) => {
+      x.components.forEach((y) => {
+        if (y.isShared && y.datasourceItem) {
+          items.push(y.datasourceItem);
+        }
+
+        //TODO: Add picture fields
+        // y.datasourceItem?.fields.forEach((z) => {
+        //   if (z.type === "picture") {
+        //     const picture = z.value as PictureValue;
+        //     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: string,
+    options?: { skipConfirmation?: boolean },
+  ) => {
+    async function switchView() {
+      if (currentView?.beforeClose && !options?.skipConfirmation) {
+        const result = await currentView.beforeClose(editContext);
+        if (!result) return;
+      }
+      if (typeof document.startViewTransition === "function") {
+        document.startViewTransition(() => {
+          flushSync(() => {
+            setViewName(viewName);
+          });
+        });
+      } else {
+        setViewName(viewName);
+      }
+    }
+    switchView();
+  };
+
+  const [dialog, setDialog] = useState<ReactNode>(null);
+
+  const openDialog: OpenDialog = (Component, props) => {
+    return new Promise((resolve) => {
+      const handleClose = (result: any) => {
+        setDialog(null);
+        resolve(result);
+      };
+
+      setDialog(<Component {...(props as any)} onClose={handleClose} />);
+    });
+  };
+
+  const operationsContext = getOperationsContext(state, ui);
+
+  const operations = operationsContext.ops;
+
+  useEffect(() => {
+    if (mode === "suggestions") {
+      setShowSuggestedEdits(true);
+    } else {
+      setShowSuggestedEdits(false);
+    }
+  }, [mode]);
+
+  const isReadOnly =
+    !contentEditorItem ||
+    !contentEditorItem.canWriteItem ||
+    !contentEditorItem.canWriteLanguage ||
+    !contentEditorItem.canWriteWorkflow;
+
+  const updateUrl = useCallback((params: Record<string, string>) => {
+    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 });
+  }, []);
+
+  // Quota checking functions
+  const isQuotaExceeded = useCallback(() => {
+    if (!quotaInfo) return false;
+
+    const { usage, limits } = quotaInfo;
+
+    // Check absolute limits
+    if (limits.totalTokens > 0 && usage.totalTokens >= limits.totalTokens)
+      return true;
+    if (limits.totalImages > 0 && usage.totalImages >= limits.totalImages)
+      return true;
+
+    // For now, we're only checking absolute limits as daily/monthly would require server-side logic
+    // You can extend this to check daily/monthly limits if the server provides that information
+
+    return false;
+  }, [quotaInfo]);
+
+  const getQuotaWarningMessage = useCallback(() => {
+    if (!quotaInfo) return null;
+
+    const { usage, limits } = quotaInfo;
+    const warnings: string[] = [];
+
+    // Check tokens
+    if (limits.totalTokens > 0) {
+      const tokenPercentage = (usage.totalTokens / limits.totalTokens) * 100;
+      if (tokenPercentage >= 100) {
+        warnings.push(
+          `Token limit exceeded (${usage.totalTokens}/${limits.totalTokens})`,
+        );
+      } else if (tokenPercentage >= 90) {
+        warnings.push(
+          `Token usage high: ${Math.round(tokenPercentage)}% (${usage.totalTokens}/${limits.totalTokens})`,
+        );
+      }
+    }
+
+    // Check images
+    if (limits.totalImages > 0) {
+      const imagePercentage = (usage.totalImages / limits.totalImages) * 100;
+      if (imagePercentage >= 100) {
+        warnings.push(
+          `Image limit exceeded (${usage.totalImages}/${limits.totalImages})`,
+        );
+      } else if (imagePercentage >= 90) {
+        warnings.push(
+          `Image usage high: ${Math.round(imagePercentage)}% (${usage.totalImages}/${limits.totalImages})`,
+        );
+      }
+    }
+
+    return warnings.length > 0 ? warnings.join(", ") : null;
+  }, [quotaInfo]);
+
+  // Show warning when quota is exceeded
+  useEffect(() => {
+    const warningMessage = getQuotaWarningMessage();
+    if (warningMessage) {
+      const isExceeded = isQuotaExceeded();
+      showErrorToast({
+        summary: isExceeded ? "AI Quota Exceeded" : "AI Quota Warning",
+        details: warningMessage,
+      });
+    }
+  }, [quotaInfo, getQuotaWarningMessage, isQuotaExceeded, showErrorToast]);
+
+  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: string[]) => {
+        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: ToastMessage | ToastMessage[]) => {
+        toast.current?.show(message);
+      },
+      scrollIntoView,
+      setScrollIntoView,
+      focusedField,
+      setFocusedField: async (
+        field: FieldDescriptor | undefined,
+        requestLock: boolean,
+      ) => {
+        if (field) {
+          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: async (components: Component[]) => {
+        return await getComponentCommands(components, editContext);
+      },
+      dragStart: (dragObject: DragObject) => {
+        setDragObject(dragObject);
+      },
+      dragEnd: () => {
+        setDragObject(undefined);
+      },
+      droppedInPlaceholder: async (
+        placeholderKey: string,
+        index: number,
+        spotPositionElement?: Element,
+        spotPositionAnchor?: "left" | "right" | "top" | "bottom",
+        insertOption?: 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: EditOperation | undefined;
+
+        if (!currentItemDescriptorRef.current) return;
+
+        if (insertOption) {
+          operations.addComponent(
+            insertOption.typeId,
+            placeholderKey,
+            index,
+            currentItemDescriptorRef.current,
+          );
+          return;
+        }
+
+        if (!dragObject) return;
+
+        if (dragObject && dragObject.type == "template") {
+          operations.addComponent(
+            dragObject.typeId,
+            placeholderKey,
+            index,
+            currentItemDescriptorRef.current,
+          );
+          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",
+            } as LinkComponentOperation;
+          } 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",
+            } as MoveComponentOperation;
+          }
+        }
+
+        if (op) operations.executeEditOperation(op);
+      },
+      page,
+      triggerFieldAction: async (
+        fieldDescriptor: FieldDescriptor,
+        actionButton: FieldButton,
+        parameters?: Record<string, string>,
+      ) => {
+        const field = await itemsRepository.getField(fieldDescriptor);
+
+        if (!field) return;
+
+        const op: FieldAction = {
+          field: fieldDescriptor,
+          //  actionButton,
+          label: actionButton.label,
+          state: "running",
+        };
+        const fieldItem = fieldDescriptor.item;
+
+        if ("clientAction" in actionButton) {
+          await (actionButton as ClientFieldButton).clientAction!({
+            field,
+            editContext,
+            //dialogContext,
+          });
+        }
+
+        if (actionButton.action) {
+          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,
+          ]);
+          await executeFieldServerAction(
+            fieldDescriptor.item,
+            fieldDescriptor.fieldId,
+            contentEditorItem!.descriptor,
+            actionButton.action,
+            editContext!.sessionId,
+            selectedRange?.text || "",
+            parameters || {},
+            (data: any) => {
+              op.message = data.responseText;
+              setActiveFieldActions((prevFieldActions) => [
+                ...prevFieldActions,
+              ]);
+            },
+          );
+
+          itemsRepository.refreshItems([fieldDescriptor.item]);
+
+          op.state = "success";
+          requestRefresh("immediate");
+        }
+      },
+      activeFieldActions,
+      showContextMenu: (event: any, items: MenuItem[]) => {
+        contextMenuRef.current?.show(event, items);
+        setCurrentOverlay("context-menu");
+      },
+      showAiPopup: (
+        event: MouseEvent<HTMLElement>,
+        aiTerminalOptions?: AiTerminalOptions,
+      ) => {
+        setCurrentOverlay("ai");
+        aiPopupRef.current?.show(event, aiTerminalOptions);
+      },
+      showFieldEditorPopup: (fields: Field[], sections: string[], ev: any) => {
+        setCurrentOverlay("fields");
+        fieldEditorPopupRef.current?.show(fields, sections, ev);
+      },
+      inserting,
+      validating,
+      validationResult,
+      contentEditorItem,
+      loadItem,
+      editHistory,
+      isRefreshing,
+      activeSessions,
+      unlockField: async () => {
+        await releaseFieldLocks(sessionId);
+      },
+      isCommandDisabled: <T extends CommandData>({
+        command,
+        data,
+      }: {
+        command: Command<T>;
+        data?: T;
+      }): boolean => {
+        const props = {
+          editContext,
+          pathname,
+          router,
+          searchParams,
+          data,
+          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: ConfirmationProps) => {
+        confirmationDialogRef.current?.confirm(props);
+      },
+      showMessageDialog: (props: { header: string; message: string }) => {
+        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,
+          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);
+      },
+      mode,
+      setMode,
+
+      user,
+      reviews,
+      statusMessage,
+      setStatusMessage,
+      suggestedEdits,
+      showSuggestedEdits,
+      setShowSuggestedEdits,
+      showSuggestedEditsDiff,
+      setShowSuggestedEditsDiff,
+      enableCompletions,
+      setEnableCompletions,
+      quotaInfo,
+      isQuotaExceeded: isQuotaExceeded(),
+      getQuotaWarningMessage,
+      isMobile,
+      openDialog,
+      pageWizard,
+      webSocketMessages,
+      clearWebSocketMessages: () => setWebSocketMessages([]),
+      userInfo,
+    };
+  }, [
+    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,
+    lastEditedFields,
+    revision,
+    comments,
+    setComments,
+    selectedComment,
+    setSelectedComment,
+    loadComments,
+    mode,
+    setMode,
+    user,
+    reviews,
+    statusMessage,
+    setStatusMessage,
+    suggestedEdits,
+    setSuggestedEdits,
+    showSuggestedEdits,
+    setShowSuggestedEdits,
+    showSuggestedEditsDiff,
+    setShowSuggestedEditsDiff,
+    quotaInfo,
+    isQuotaExceeded,
+    getQuotaWarningMessage,
+    isMobile,
+    openDialog,
+    pageWizard,
+    webSocketMessages,
+    userInfo,
+  ]);
+
+  const modifiedFieldsContext = useMemo(() => {
+    return {
+      modifiedFields,
+      clear: () => {
+        setModifiedFields([]);
+      },
+    };
+  }, [modifiedFields, setModifiedFields]);
+
+  useEffect(() => {
+    editContextRef.current = editContext;
+  }, [editContext]);
+
+  useEffect(() => {
+    modifiedFieldsContext.clear();
+  }, [currentItemDescriptor]);
+
+  if (!currentView) return null;
+
+  return (
+    <div className={`editor h-full`}>
+      <OperationsContextProvider value={operationsContext.context}>
+        <ModifiedFieldsContextProvider value={modifiedFieldsContext}>
+          <EditContextProvider value={editContext}>
+            {pageViewContext.fullscreen ? (
+              <>
+                <div className="fixed inset-0 flex">
+                  <PageViewerFrame
+                    compareView={compareMode}
+                    pageViewContext={pageViewContext}
+                  />
+                </div>
+                {showFullscreenHint && (
+                  <div
+                    className="fixed inset-0"
+                    onMouseMoveCapture={() => {
+                      setTimeout(() => {
+                        setShowFullscreenHint(false);
+                      }, 600);
+                    }}
+                  >
+                    <div className="fixed top-3 left-1/2 -translate-x-1/2 transform rounded-sm bg-gray-200 p-12">
+                      Press Ctrl + F11 to exit fullscreen mode
+                    </div>
+                  </div>
+                )}
+              </>
+            ) : (
+              <>
+                <Toast ref={toast} />
+                <ConfirmationDialog ref={confirmationDialogRef} />
+                <EditContextMenu ref={contextMenuRef} />
+                <MainLayout
+                  className={className}
+                  view={currentView}
+                  centerPanelView={centerPanelView}
+                  rightSidebar={
+                    currentView.rightSidebar && (
+                      <SidebarView
+                        sidebar={currentView.rightSidebar}
+                        editContext={editContext}
+                        active={true}
+                      />
+                    )
+                  }
+                  rightSidebarTitle={currentView.rightSidebar?.title}
+                />
+
+                {mediaSelectorVisible && (
+                  <MediaSelector
+                    language={editContext.currentItemDescriptor!.language}
+                    visible={mediaSelectorVisible}
+                    onHide={() => setMediaSelectorVisible(false)}
+                    onMediaSelected={onMediaSelect}
+                    selectedIdPath={selectedMediaIdPath}
+                    mode={mediaSelectorMode}
+                  />
+                )}
+
+                <AiPopup ref={aiPopupRef} />
+                <FieldEditorPopup ref={fieldEditorPopupRef} />
+                {isTourActive && (
+                  <Tour tourStopCallback={() => setIsTourActive(false)} />
+                )}
+              </>
+            )}
+            {editContext.isRefreshing && (
+              <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">
+                <Spinner />
+              </div>
+            )}
+            {dialog}
+          </EditContextProvider>
+        </ModifiedFieldsContextProvider>
+      </OperationsContextProvider>
+    </div>
+  );
+}