@alpaca-editor/core 1.0.0

package/src/editor/client/EditorClient.tsx

@@ -0,0 +1,1831 @@
+"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,
+} from "./editContext";
+
+import { EditorConfiguration } from "../../config/types";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import { getComponentById } from "../componentTreeHelper";
+
+import { getOperationsContext } from "./operations";
+import { handleErrorResult } from "./helpers";
+
+import {
+  executeFieldAction as executeFieldServerAction,
+  connectSocket,
+  getEditHistory,
+  releaseFieldLocks,
+  validateItems,
+} from "../services/editService";
+
+import { GeistSans } from "geist/font/sans";
+
+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 { useEventListenerExt } from "../utils";
+
+import { EditContextMenu, EditContextMenuRef } from "../ContextMenu";
+import { MenuItem } from "primereact/menuitem";
+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,
+} 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 { useDialog } from "./DialogContext";
+import { useDebouncedCallback } from "use-debounce";
+import { PictureValue } from "../fieldTypes";
+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";
+
+export type FieldAction = {
+  field: FieldDescriptor;
+  actionButton: FieldButton;
+  message?: string;
+  state: "running" | "success" | "error";
+};
+
+export type WindowSize = {
+  width: number;
+  height: number;
+};
+
+export type InsertingState = {
+  positionElement: Element;
+  positionAnchor: "left" | "right" | "top" | "bottom";
+};
+
+export function EditorClient({
+  configuration,
+  className,
+  item: loadItemDescriptor,
+  sessionId,
+}: {
+  configuration: EditorConfiguration;
+  className?: string;
+  item?: ItemDescriptor;
+  sessionId: string;
+}) {
+  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 [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 [previewMode, setPreviewMode] = useState(false);
+  const [statusMessage, setStatusMessage] = useState<React.ReactNode>("");
+
+  const mode = searchParams.get("mode");
+
+  useEffect(() => {
+    if (mode === "preview") {
+      setPreviewMode(true);
+    }
+  }, [mode]);
+
+  useEffect(() => {
+    if (previewMode) {
+    }
+  }, [previewMode]);
+
+  useEffect(() => {
+    if (
+      focusedField &&
+      selection.length > 0 &&
+      selection[0] !== focusedField.item.id
+    ) {
+      setFocusedField(undefined);
+    }
+  }, [selection]);
+
+  const dialogContext = useDialog();
+
+  const itemsRepository = useItemsRepository(
+    setModifiedFields,
+    setLastEditedFields,
+  );
+
+  const pageViewContext = usePageViewContext({
+    pageItemDescriptor: currentItemDescriptor,
+    itemsRepository,
+    configuration,
+  });
+
+  const socketMessageListeners = useRef<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,
+    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);
+
+      if (message.type === "active-sessions") {
+        setActiveSessions(() => {
+          return message.payload;
+        });
+      }
+
+      if (message.type === "item-deleted") {
+        itemsRepository.onItemsDeleted([
+          { item: message.payload.item, parentId: message.payload.parentId },
+        ]);
+        if (message.payload.item.id === currentItemDescriptor?.id) {
+          console.log("Load", message.payload.parentId);
+          loadItem({
+            id: message.payload.parentId,
+            language: currentItemDescriptor?.language ?? "en",
+            version: 0,
+          });
+        }
+      }
+
+      if (message.type === "item-changed") {
+        await itemsRepository.refreshItems([message.payload.item]);
+        if (message.payload.item.id === currentItemDescriptor?.id)
+          loadItemVersions();
+      }
+
+      if (message.type === "item-version-added") {
+        if (currentItemDescriptorRef.current) {
+          if (currentItemDescriptorRef.current.id === message.payload.item.id)
+            await loadItemVersions();
+          setCurrentItemDescriptor({ ...currentItemDescriptorRef.current });
+        }
+      }
+
+      if (message.type === "comment-updated") {
+        setComments((x) => {
+          const newComments = [...x];
+          const index = newComments.findIndex(
+            (c) => c.id === message.payload.comment.id,
+          );
+          if (index !== -1) newComments[index] = message.payload.comment;
+          else newComments.push(message.payload.comment);
+          return newComments;
+        });
+      }
+
+      if (message.type === "comment-deleted") {
+        setComments((x) => {
+          return x.filter((c) => c.id !== message.payload.id);
+        });
+      }
+
+      if (message.type === "edit-operation") {
+        const op = message.payload as EditOperation;
+
+        if (op.type === "edit-field") {
+          const editFieldOperation = op as EditFieldOperation;
+
+          const field = await itemsRepository.getField(editFieldOperation);
+
+          if (
+            !field ||
+            (field.type !== "single-line text" &&
+              field.type !== "multi-line text" &&
+              field.type !== "rich text")
+          ) {
+            itemsRepository.refreshItems([editFieldOperation.item]);
+            requestRefresh("immediate");
+          }
+          //TODO: field value changes that require rerender
+          else
+            itemsRepository.updateFieldValue(
+              {
+                fieldId: editFieldOperation.fieldId,
+                item: editFieldOperation.item,
+              },
+              editFieldOperation.user ?? { name: "unknown", ai: false },
+              false,
+              editFieldOperation.undone
+                ? editFieldOperation.oldValue
+                : editFieldOperation.value,
+            );
+        } else {
+          requestRefresh("immediate");
+        }
+
+        if (
+          op.mainItem &&
+          op.mainItem.id === currentItemRef.current?.descriptor.id &&
+          op.mainItem.language ===
+            currentItemRef.current?.descriptor.language &&
+          op.mainItem.version === currentItemRef.current?.descriptor.version
+        ) {
+          loadHistory(op.mainItem);
+        }
+      }
+
+      socketMessageListeners.current.forEach((listener) => listener(message));
+    },
+    [currentItemDescriptorRef, setLastEditedFields],
+  );
+
+  const user = activeSessions.find((x) => x.sessionId === sessionId)?.user;
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    var keepAliveUrl = "/alpaca/editor/keepalive";
+    const interval = setInterval(
+      () => {
+        fetch(keepAliveUrl + "?ts=" + Date.now()).catch((error) =>
+          console.error("Keep Alive error:", error),
+        );
+      },
+      5 * 60 * 1000,
+    );
+
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data.type === "componentsSelected") {
+        setSelection(event.data.componentIds);
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+
+    return () => {
+      window.removeEventListener("message", handleMessage);
+      clearInterval(interval);
+    };
+  }, []);
+
+  useEffect(() => {
+    const tour = configuration.activeTour;
+    const key =
+      tour === "default" ? "editor.tourShown" : "editor.tourShown." + tour;
+    const tourShown = localStorage.getItem(key);
+    if (!tourShown) {
+      setIsTourActive(true);
+      localStorage.setItem(key, "true");
+    }
+  }, []);
+
+  useEffect(() => {
+    let socket: 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();
+
+      //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();
+  }, [currentItemRef.current]);
+
+  const loadComments = useCallback(async () => {
+    if (!currentItemDescriptor) return;
+    const result = await getComments(
+      currentItemDescriptor.id,
+      currentItemDescriptor.language,
+      currentItemDescriptor.version,
+    );
+    if (handleErrorResult(result, ui, state)) return;
+    setComments((x) => {
+      const loadedComments = result.data as Comment[];
+      const newComments = x.filter(
+        (c) =>
+          c.isNew &&
+          c.mainItemId === currentItemDescriptor.id &&
+          c.language === currentItemDescriptor.language &&
+          c.version === currentItemDescriptor.version,
+      );
+      var allComments = [...loadedComments, ...newComments];
+      allComments.sort((a, b) => a.position - b.position);
+      return allComments;
+    });
+  }, [currentItemDescriptor]);
+
+  const page = pageViewContext.page;
+
+  useEffect(() => {
+    const isLoading = !page || (page?.editRevision ?? "") != (revision ?? "");
+    setIsRefreshing(isLoading && viewName === "page-editor");
+    if (!isLoading) setInserting(undefined);
+  }, [page, viewName, revision]);
+
+  useEffect(() => {
+    if (searchParams.get("fullscreen")) {
+      pageViewContext.setFullscreen(true);
+    }
+    const handleMessage = (event: 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();
+  }, [currentItemDescriptor]);
+
+  useEffect(() => {
+    if (!currentItemDescriptor) return;
+
+    const current = new URLSearchParams(Array.from(searchParams.entries()));
+    if (current.get("itemid") !== currentItemDescriptor?.id) {
+      current.set("itemid", currentItemDescriptor.id);
+    }
+    if (current.get("lang") !== currentItemDescriptor?.language) {
+      current.set("lang", currentItemDescriptor.language);
+    }
+    if (current.get("version") !== currentItemDescriptor?.version.toString()) {
+      current.set("version", currentItemDescriptor.version.toString());
+    }
+    if (current.get("view") !== viewName) {
+      current.set("view", viewName);
+    }
+    if (!compareMode) {
+      current.delete("compare");
+      current.delete("compareLanguage");
+      current.delete("compareVersion");
+      current.delete("compareDevice");
+    } else {
+      current.set("compare", "true");
+    }
+
+    if (previewMode) {
+      current.set("mode", "preview");
+    } else {
+      current.delete("mode");
+    }
+
+    const newUrl = `${pathname}?${current.toString()}`;
+    router.push(newUrl, { scroll: false });
+  }, [currentItemDescriptor, viewName, compareMode, previewMode]);
+
+  useEffect(() => {
+    async function load() {
+      if (!currentItemDescriptor) return;
+      const item = await itemsRepository.getItem(currentItemDescriptor);
+
+      setContentEditorItem(item);
+      if (!item) return;
+      if (
+        contentEditorItem?.descriptor.id === currentItemDescriptor.id &&
+        contentEditorItem?.descriptor.language ===
+          currentItemDescriptor.language &&
+        contentEditorItem?.descriptor.version !== item.version
+      ) {
+        showInfoToast({
+          summary: "New version!",
+          details: "New version of item loaded",
+        });
+      }
+    }
+    load();
+  }, [itemsRepository.revision]);
+
+  const addToBrowseHistory = useCallback(
+    (item: FullItem) => {
+      let historyEntry = {
+        path: item.path || "unknown",
+        name: item.name || "unknown",
+        language: item.language,
+        templateName: item.templateName,
+        id: item.id,
+        hasLayout: item.hasLayout,
+        icon: item.icon,
+        version: item.version,
+      };
+
+      setBrowseHistory((history: 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") {
+        setViewName("content-editor");
+      }
+
+      // Set state for the item
+      setCurrentItemDescriptor(itemToLoad);
+      setContentEditorItem(item);
+      setSelection([]);
+
+      // Directly update URL here
+      const current = new URLSearchParams(Array.from(searchParams.entries()));
+
+      current.set("itemid", itemToLoad.id);
+      current.set("lang", itemToLoad.language);
+      current.set("version", itemToLoad.version.toString());
+      current.set("view", viewName);
+
+      if (!compareMode) {
+        current.delete("compare");
+        current.delete("compareLanguage");
+        current.delete("compareVersion");
+        current.delete("compareDevice");
+      } else {
+        current.set("compare", "true");
+      }
+
+      if (previewMode) {
+        current.set("mode", "preview");
+      } else {
+        current.delete("mode");
+      }
+
+      const newUrl = `${pathname}?${current.toString()}`;
+
+      // Wait for the URL update to complete
+      await router.push(newUrl, { scroll: false });
+
+      // Now that URL is updated, load history and add to browse history
+      loadHistory(itemToLoad);
+      if (
+        options?.addToBrowseHistory ||
+        options?.addToBrowseHistory === undefined
+      ) {
+        addToBrowseHistory(item);
+      }
+
+      return item;
+    },
+    [
+      itemsRepository,
+      setContentEditorItem,
+      searchParams,
+      pathname,
+      router,
+      viewName,
+      compareMode,
+      previewMode,
+    ],
+  );
+
+  useEffect(() => {
+    if (pageViewContext.fullscreen && !searchParams.get("fullscreen"))
+      setShowFullscreenHint(true);
+  }, [pageViewContext.fullscreen]);
+
+  const executeCommand = useCallback(
+    async <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: dialogContext.openDialog,
+        event,
+        data,
+      };
+      const result = await command.execute(context);
+
+      return result;
+    },
+    [editContextRef, pathname, router, searchParams, dialogContext],
+  );
+
+  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,
+    }),
+    [
+      page,
+      configuration,
+      selection,
+      setSelection,
+      loadItem,
+      addToEditHistory,
+      setLockedField,
+      contentEditorItem,
+      sessionId,
+      requestRefresh,
+      lockedField,
+      itemsRepository,
+      user,
+      editHistory,
+      refreshHistory,
+    ],
+  );
+
+  useEffect(() => {
+    if (currentOverlay !== "ai") aiPopupRef.current?.close();
+    if (currentOverlay !== "fields") fieldEditorPopupRef.current?.close();
+    if (currentOverlay !== "context-menu") contextMenuRef.current?.close({});
+  }, [currentOverlay]);
+
+  const toast = useRef<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;
+    }
+    var 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),
+    3000,
+  );
+
+  useEffect(() => {
+    let 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.descriptor);
+        }
+
+        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) => {
+    document.startViewTransition(() => {
+      flushSync(() => {
+        setViewName(viewName);
+      });
+    });
+  };
+
+  const operationsContext = getOperationsContext(state, ui);
+  const operations = operationsContext.ops;
+
+  //const pageItem = page ?  itemsRepository.getItem(page.item) : undefined;
+  const isReadOnly = false; //pageItem && (!pageItem.hasLock || !pageItem.canWrite);
+
+  const updateUrl = useCallback((params: 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 });
+  }, []);
+
+  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) {
+          // if (nonComponentItems.find((x) => x.id == field.item.id))
+          //   setSelection([field.item.id]);
+          setIgnoreBlur(true);
+          setTimeout(() => {
+            setIgnoreBlur(false);
+          }, 20);
+          setFocusedField({ ...field });
+          if (requestLock) {
+            return (await operations.ensureLock(field)) || false;
+          }
+        } else {
+          if (!ignoreBlur) {
+            setFocusedField(undefined);
+            releaseFieldLocks(sessionId);
+          }
+        }
+        return true;
+      },
+
+      renderedFields,
+      setRenderedFields,
+
+      getComponentCommands: (components: Component[]) => {
+        return 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 (insertOption) {
+          operations.addComponent(insertOption.typeId, placeholderKey, index);
+          return;
+        }
+
+        if (!dragObject) return;
+
+        if (dragObject && dragObject.type == "template") {
+          operations.addComponent(dragObject.typeId, placeholderKey, index);
+          return;
+        }
+
+        if (
+          dragObject.type == "component" ||
+          (dragObject.type == "link-component" && dragObject.component)
+        ) {
+          const parentComponent =
+            parentId && page ? getComponentById(parentId, page) : null;
+
+          if (dragObject.type == "link-component") {
+            op = {
+              type: "link-component",
+              mainItem: page!.item.descriptor,
+              parent: parentId && {
+                id: parentId,
+                language: page!.item.descriptor.language,
+                version: page!.item.descriptor.version,
+                name: parentComponent?.name,
+              },
+              placeholderKey,
+              placeholderIndex: index,
+              date: new Date().toISOString(),
+              id: uuid(),
+              linkedComponentItem: dragObject.component,
+              description: "Link component",
+            } 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,
+          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: dialogContext.openDialog,
+        };
+
+        return command.disabled(props);
+      },
+      executeCommand,
+      viewName,
+      switchView,
+      compareMode,
+      setCompareMode,
+      view: currentView,
+      pageView: pageViewContext,
+      componentDesignerComponent,
+      setComponentDesignerComponent,
+      componentDesignerRendering,
+      setComponentDesignerRendering,
+      insertMode,
+      setInsertMode,
+      currentOverlay,
+      setCurrentOverlay,
+      inlineEditingFieldElement,
+      setInlineEditingFieldElement,
+
+      lockedField,
+      timings,
+      setTimings,
+      selectedRange,
+      setSelectedRange,
+
+      confirmationDialogRef,
+
+      confirm: (props: 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 () => {
+        if (!currentItemDescriptor) return;
+        const itemId =
+          focusedField?.item.id ||
+          (selection.length > 0 ? selection[0] : undefined) ||
+          currentItemDescriptor.id;
+
+        if (!itemId) return;
+
+        const language = currentItemDescriptor.language;
+        const version = currentItemDescriptor.version;
+
+        const getFieldName = async () => {
+          if (!focusedField) return "";
+          const field = await itemsRepository.getField(focusedField);
+          return field?.name;
+        };
+
+        const getItemName = async () => {
+          const item = await itemsRepository.getItem({
+            id: itemId,
+            language,
+            version,
+          });
+          return item?.name;
+        };
+
+        const newComment = {
+          id: uuid(),
+          isNew: true,
+          itemId: focusedField?.item.id || currentItemDescriptor.id,
+          itemName: await getItemName(),
+          fieldId: focusedField?.fieldId,
+          fieldName: await getFieldName(),
+          mainItemId: currentItemDescriptor.id,
+          language,
+          version,
+          position: 0,
+          rangeStart: selectedRange?.startOffset || 0,
+          rangeEnd: selectedRange?.endOffset || 0,
+          author: user?.name,
+          authorDisplayName: user?.displayName,
+          date: new Date().toISOString(),
+        };
+
+        setComments([newComment, ...comments]);
+        setSelectedComment(newComment);
+        setShowComments(true);
+      },
+      previewMode,
+      setPreviewMode,
+      user,
+      reviews,
+      statusMessage,
+      setStatusMessage,
+    };
+  }, [
+    operations,
+    itemsRepository,
+    configuration,
+    contentEditorItem,
+
+    page?.item,
+    itemLanguages,
+    itemVersions,
+    sessionId,
+    isReadOnly,
+    selection,
+    selectedForInsertion,
+    dragObject,
+    requestRefresh,
+    refreshCompletedFlag,
+    searchParams,
+    pathname,
+    router,
+    selectMedia,
+    scrollIntoView,
+    focusedField,
+    renderedFields,
+    inserting,
+    page,
+    activeFieldActions,
+    editHistory,
+    isRefreshing,
+    activeSessions,
+    currentView,
+    componentDesignerComponent,
+    componentDesignerRendering,
+    insertMode,
+    currentOverlay,
+    inlineEditingFieldElement,
+    lockedField,
+    selectedRange,
+
+    pageViewContext,
+    browseHistory,
+    workboxItems,
+    validating,
+    setCenterPanelView,
+    handleKeyDown,
+    setTimings,
+    timings,
+    startTour,
+    viewName,
+    setViewName,
+    compareMode,
+    setCompareMode,
+    addSocketMessageListener,
+    currentItemDescriptor,
+    compareTo,
+    setCompareTo,
+    lastEditedFields,
+    revision,
+    comments,
+    setComments,
+    selectedComment,
+    setSelectedComment,
+    loadComments,
+    previewMode,
+    setPreviewMode,
+    showComments,
+    setShowComments,
+    user,
+    reviews,
+    statusMessage,
+    setStatusMessage,
+  ]);
+
+  const modifiedFieldsContext = useMemo(() => {
+    return {
+      modifiedFields,
+      setModifiedFields,
+    };
+  }, [modifiedFields, setModifiedFields]);
+
+  useEffect(() => {
+    editContextRef.current = editContext;
+  }, [editContext]);
+
+  if (!currentView) return null;
+
+  return (
+    <div className={`${GeistSans.className} editor h-full`}>
+      <OperationsContextProvider value={operationsContext.context}>
+        <ModifiedFieldsContextProvider value={modifiedFieldsContext}>
+          <EditContextProvider value={editContext}>
+            {pageViewContext.fullscreen ? (
+              <>
+                <div className="fixed inset-0 flex">
+                  <PageViewerFrame
+                    mode={editContext.previewMode ? "view" : "edit"}
+                    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>
+            )}
+          </EditContextProvider>
+        </ModifiedFieldsContextProvider>
+      </OperationsContextProvider>
+    </div>
+  );
+}