@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/editor/client/EditorClient.tsx

@@ -1,2197 +0,0 @@
-"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 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!");
-      sendClientInfo();
-      requestQuota();
-      //TODO: Load clients
-    });
-
-    // Listen for messages
-    socket.addEventListener("message", messageHandler);
-
-    (globalThis as any).editorSocket = socket;
-  }, []);
-
-  useEffect(() => {
-    const itemid = searchParams.get("itemid");
-
-    if (searchParams.has("view")) {
-      setViewName(searchParams.get("view")!);
-    } else if (!itemid) {
-      setViewName("splash-screen");
-    }
-
-    if (searchParams.has("compare"))
-      setCompareMode(searchParams.get("compare") === "true");
-    const itemId = cleanId(loadItemDescriptor?.id ?? itemid ?? undefined);
-    const language = loadItemDescriptor?.language ?? searchParams.get("lang");
-    const version =
-      loadItemDescriptor?.version ??
-      (searchParams.has("version")
-        ? parseInt(searchParams.get("version")!)
-        : 0);
-
-    // if (itemid && viewName === "splash-screen") {
-    //   setViewName("page-editor");
-    // }
-
-    if (!itemId || !language) return;
-
-    if (
-      currentItemDescriptor?.id === itemId &&
-      currentItemDescriptor?.language === language &&
-      (!version || currentItemDescriptor?.version === version)
-    ) {
-      return;
-    }
-
-    loadItem({ id: itemId, language, version });
-  }, [searchParams, loadItemDescriptor]);
-
-  useEffect(() => {
-    if (selection.length) setSelectedForInsertion("");
-
-    // Does the current focused field belong to the current item?
-    const currentItem =
-      selection.length > 0 ? selection[0] : pageViewContext.page?.item.id;
-    if (currentItem && focusedField?.item.id !== currentItem) {
-      setFocusedField(undefined);
-    }
-  }, [selection]);
-
-  const addToEditHistory = useCallback(
-    (currentEditOperation: 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,
-      ) => {
-        const field = await itemsRepository.getField(fieldDescriptor);
-
-        if (!field) return;
-
-        const op: FieldAction = {
-          field: fieldDescriptor,
-          //  actionButton,
-          label: actionButton.label,
-          state: "running",
-        };
-        const fieldItem = fieldDescriptor.item;
-        setActiveFieldActions((prevFieldActions) => [
-          ...prevFieldActions.filter(
-            (x) =>
-              !(
-                x.field.fieldId == fieldDescriptor.fieldId &&
-                x.field.item.id == fieldItem.id &&
-                x.field.item.language == fieldItem.language &&
-                x.field.item.version == fieldItem.version
-              ),
-          ),
-          op,
-        ]);
-
-        if ("clientAction" in actionButton) {
-          await (actionButton as ClientFieldButton).clientAction!({
-            field,
-            editContext,
-            //dialogContext,
-          });
-        }
-
-        if (actionButton.action) {
-          await executeFieldServerAction(
-            fieldDescriptor.item,
-            fieldDescriptor.fieldId,
-            contentEditorItem!.descriptor,
-            actionButton.action,
-            editContext!.sessionId,
-            selectedRange?.text || "",
-            (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>
-  );
-}