@alpaca-editor/core 1.0.4027 → 1.0.4030

package/src/editor/client/EditorClient.tsx

@@ -23,8 +23,10 @@ import {
   SelectionRange,
   EditorMode,
 } from "./editContext";
+import { fieldModificationStore } from "./fieldModificationStore";
 
 import type { OpenDialog } from "./editContext";
+import type { AiTerminalOptions } from "../ai/AiTerminal";
 
 import { EditorConfiguration, MenuItem } from "../../config/types";
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
@@ -67,7 +69,7 @@ import { EditContextMenu, EditContextMenuRef } from "../ContextMenu";
 import { FieldEditorPopup, FieldEditorPopupRef } from "../FieldEditorPopup";
 
 import { Command, CommandData } from "../commands/commands";
-import { AiPopup, AiPopupRef } from "../ai/AiPopup";
+
 import {
   EditorFormPopup,
   EditorFormPopupRef,
@@ -90,6 +92,7 @@ import {
   SuggestedEdit,
   UserInfo,
   UserPreferences,
+  EditorSettings,
 } from "../../types";
 
 import { post } from "../services/serviceHelper";
@@ -120,7 +123,6 @@ 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";
@@ -173,6 +175,7 @@ export function EditorClient({
   sessionId,
   userInfo,
   userPreferences,
+  editorSettings,
   setUserPreferences,
   children,
 }: {
@@ -182,6 +185,7 @@ export function EditorClient({
   sessionId: string;
   userInfo: UserInfo;
   userPreferences: UserPreferences;
+  editorSettings?: EditorSettings;
   setUserPreferences: (preferences: Partial<UserPreferences>) => void;
   children?: React.ReactNode;
 }) {
@@ -225,7 +229,6 @@ export function EditorClient({
   );
   const [renderedFields, setRenderedFields] = useState<FieldDescriptor[]>([]);
 
-  const aiPopupRef = React.useRef<AiPopupRef>(null);
   const fieldEditorPopupRef = React.useRef<FieldEditorPopupRef>(null);
   const editorFormPopupRef = React.useRef<EditorFormPopupRef>(null);
 
@@ -235,7 +238,23 @@ export function EditorClient({
 
   const [editHistory, setEditHistory] = useState<EditOperation[]>([]);
 
-  const [lastEditedFields, setLastEditedFields] = useState<EditedField[]>([]);
+  const [recentEdits, setRecentEdits] = useState<EditedField[]>([]);
+
+  const addRecentEdit = useCallback((edit: EditedField) => {
+    setRecentEdits((prevEditedFields) => {
+      return [
+        ...prevEditedFields.filter(
+          (x) =>
+            x.timestamp > Date.now() - 30000 &&
+            (x.fieldId !== edit.fieldId ||
+              x.item.id !== edit.item.id ||
+              x.item.language !== edit.item.language ||
+              x.item.version !== edit.item.version),
+        ),
+        edit,
+      ];
+    });
+  }, []);
 
   const [activeSessions, setActiveSessions] = useState<EditSession[]>([]);
 
@@ -385,10 +404,7 @@ export function EditorClient({
     }
   }, [selection]);
 
-  const itemsRepository = useItemsRepository(
-    setModifiedFields,
-    setLastEditedFields,
-  );
+  const itemsRepository = useItemsRepository(setModifiedFields, addRecentEdit);
 
   const pageViewContext = usePageViewContext({
     pageItemDescriptor: currentItemDescriptor,
@@ -398,12 +414,13 @@ export function EditorClient({
 
   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 addSocketMessageListener = useCallback(
+    (callback: (message: { type: string; payload: any }) => void) => {
+      socketMessageListeners.current.add(callback);
+      return () => socketMessageListeners.current.delete(callback);
+    },
+    [], // No dependencies - only uses ref
+  );
 
   const reviews = useReviews({
     currentItemDescriptor: contentEditorItem?.descriptor,
@@ -461,27 +478,33 @@ export function EditorClient({
     //}
   };
 
-  const startTour = () => {
+  const startTour = useCallback(() => {
     setIsTourActive(true);
-  };
-
-  const handleSetShowRightSidebar = (
-    value: boolean | ((prev: boolean) => boolean),
-  ) => {
-    const newValue =
-      typeof value === "function" ? value(showRightSidebar) : value;
-    setShowRightSidebar(newValue);
-    setUserPreferences({ showRightSidebar: newValue });
-  };
+  }, [setIsTourActive]);
+
+  const handleSetShowRightSidebar = useCallback(
+    (value: boolean | ((prev: boolean) => boolean)) => {
+      const newValue =
+        typeof value === "function" ? value(showRightSidebar) : value;
+      setShowRightSidebar(newValue);
+      setUserPreferences({ showRightSidebar: newValue });
+    },
+    [showRightSidebar, setShowRightSidebar, setUserPreferences],
+  );
 
-  const handleSetHideNonEditableComponents = (
-    value: boolean | ((prev: boolean) => boolean),
-  ) => {
-    const newValue =
-      typeof value === "function" ? value(hideNonEditableComponents) : value;
-    setHideNonEditableComponents(newValue);
-    setUserPreferences({ hideNonEditableComponents: newValue });
-  };
+  const handleSetHideNonEditableComponents = useCallback(
+    (value: boolean | ((prev: boolean) => boolean)) => {
+      const newValue =
+        typeof value === "function" ? value(hideNonEditableComponents) : value;
+      setHideNonEditableComponents(newValue);
+      setUserPreferences({ hideNonEditableComponents: newValue });
+    },
+    [
+      hideNonEditableComponents,
+      setHideNonEditableComponents,
+      setUserPreferences,
+    ],
+  );
 
   const messageHandler = useCallback(
     async (event: any) => {
@@ -565,7 +588,6 @@ export function EditorClient({
         if (currentItemDescriptorRef.current) {
           if (currentItemDescriptorRef.current.id === message.payload.item.id)
             await loadItemVersions();
-          setCurrentItemDescriptor({ ...currentItemDescriptorRef.current });
         }
       }
 
@@ -735,10 +757,13 @@ export function EditorClient({
 
       socketMessageListeners.current.forEach((listener) => listener(message));
     },
-    [currentItemDescriptorRef, setLastEditedFields],
+    [currentItemDescriptorRef, addRecentEdit],
   );
 
-  const user = activeSessions.find((x) => x.sessionId === sessionId)?.user;
+  const user = useMemo(
+    () => activeSessions.find((x) => x.sessionId === sessionId)?.user,
+    [activeSessions, sessionId],
+  );
 
   useEffect(() => {
     if (typeof window === "undefined") return;
@@ -883,7 +908,7 @@ export function EditorClient({
       tour === "default" ? "editor.tourShown" : "editor.tourShown." + tour;
     const tourShown = localStorage.getItem(key);
 
-    if (user?.isLimitedPreviewUser && !tourShown) {
+    if (!tourShown) {
       startTour();
       localStorage.setItem(key, "true");
     }
@@ -1023,7 +1048,7 @@ export function EditorClient({
       // Set a small timeout to ensure all initial state setting effects have run
       const timer = setTimeout(() => {
         setIsInitialLoad(false);
-        console.log("🔗 INITIAL LOAD COMPLETE - State now drives URL updates");
+        //console.log("🔗 INITIAL LOAD COMPLETE - State now drives URL updates");
       }, 100);
       return () => clearTimeout(timer);
     }
@@ -1073,7 +1098,7 @@ export function EditorClient({
   useEffect(() => {
     setRefreshCompletedFlag(!refreshCompletedFlag);
     setInserting(undefined);
-  }, [currentItemDescriptor, pageViewContext.page]);
+  }, [currentItemDescriptor, pageViewContext.page?.item.id]);
 
   useEffect(() => {
     sendClientInfo();
@@ -1198,7 +1223,7 @@ export function EditorClient({
         );
       }
     },
-    [contentEditorItem, router],
+    [],
   );
 
   useEffect(() => {
@@ -1257,12 +1282,6 @@ export function EditorClient({
       current.set("version", currentItemDescriptor.version.toString());
     }
     if (current.get("view") !== viewName) {
-      console.log(
-        "EditorClient: Updating view from",
-        current.get("view"),
-        "to",
-        viewName,
-      );
       current.set("view", viewName);
     }
     if (!compareMode) {
@@ -1425,33 +1444,6 @@ export function EditorClient({
       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 state = useMemo(
     () => ({
       page,
@@ -1473,6 +1465,7 @@ export function EditorClient({
       setSuggestedEdits,
       mode,
       setFocusFieldComponentId,
+      setInsertMode,
     }),
     [
       page,
@@ -1494,11 +1487,11 @@ export function EditorClient({
       setSuggestedEdits,
       mode,
       setFocusFieldComponentId,
+      setInsertMode,
     ],
   );
 
   useEffect(() => {
-    if (currentOverlay !== "ai") aiPopupRef.current?.close();
     if (currentOverlay !== "fields") fieldEditorPopupRef.current?.close();
     if (currentOverlay !== "context-menu") contextMenuRef.current?.close({});
   }, [currentOverlay]);
@@ -1546,31 +1539,36 @@ export function EditorClient({
     [],
   );
 
+  const onOperationExecuted = useCallback(
+    (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);
+      }
+    },
+    [contentEditorItem, setEditHistory, setInsertMode],
+  );
+
   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);
-        }
-      },
+      onOperationExecuted,
     }),
-    [showErrorToast, confirmationDialogRef, currentItemDescriptor],
+    [showErrorToast, confirmationDialogRef, onOperationExecuted],
   );
 
   const selectMedia = useCallback(
@@ -1703,16 +1701,48 @@ export function EditorClient({
 
   const [dialog, setDialog] = useState<ReactNode>(null);
 
-  const openDialog: OpenDialog = (Component, props) => {
-    return new Promise((resolve) => {
-      const handleClose = (result: any) => {
-        setDialog(null);
-        resolve(result);
+  const openDialog: OpenDialog = useCallback(
+    (Component, props) => {
+      return new Promise((resolve) => {
+        const handleClose = (result: any) => {
+          setDialog(null);
+          resolve(result);
+        };
+
+        setDialog(<Component {...(props as any)} onClose={handleClose} />);
+      });
+    },
+    [setDialog],
+  );
+
+  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,
       };
 
-      setDialog(<Component {...(props as any)} onClose={handleClose} />);
-    });
-  };
+      const result = await command.execute(context);
+
+      return result;
+    },
+    [editContextRef, pathname, router, searchParams, openDialog],
+  );
 
   const operationsContext = getOperationsContext(state, ui);
 
@@ -1839,8 +1869,44 @@ export function EditorClient({
     }
   }, [quotaInfo, getQuotaWarningMessage, isQuotaExceeded, showErrorToast]);
 
+  // Calculate visible views separately to avoid circular dependency
+  const visibleViews = useMemo(() => {
+    const allViews =
+      configuration.editor.views
+        ?.filter((x) => {
+          // For this calculation, we'll pass null for editContext since we're building it
+          // The visibility check will be recalculated after editContext is available
+          return !x.visible && !x.hidden;
+        })
+        .filter(
+          (x) =>
+            !userInfo.views ||
+            userInfo.views.map((view) => view.name).includes(x.name),
+        ) ?? [];
+
+    const pinnedViews =
+      userInfo.preferences?.pinnedViews ||
+      configuration.editor.defaultPinnedViews ||
+      [];
+
+    return allViews.filter(
+      (view) =>
+        // Always show selected view
+        view.name === viewName ||
+        // Show pinned views
+        pinnedViews.includes(view.name),
+    );
+  }, [
+    configuration.editor.views,
+    userInfo.views,
+    userInfo.preferences?.pinnedViews,
+    configuration.editor.defaultPinnedViews,
+    viewName,
+  ]);
+
   const editContext = useMemo(() => {
-    return {
+    // console.log('🔄 EditContext useMemo is being recalculated');
+    const context = {
       operations: operationsContext.ops,
       itemsRepository,
       configuration,
@@ -2081,13 +2147,7 @@ export function EditorClient({
         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);
@@ -2099,6 +2159,7 @@ export function EditorClient({
         setCurrentOverlay("editor-form");
         editorFormPopupRef.current?.show(event, activeTab);
       },
+
       inserting,
       validating,
       validationResult,
@@ -2135,6 +2196,7 @@ export function EditorClient({
       compareMode,
       setCompareMode,
       view: currentView,
+      visibleViews,
       pageView: pageViewContext,
       componentDesignerComponent,
       setComponentDesignerComponent,
@@ -2171,7 +2233,6 @@ export function EditorClient({
       currentItemDescriptor,
       compareTo,
       setCompareTo,
-      lastEditedFields,
       revision,
       selectedComment,
       setSelectedComment,
@@ -2260,6 +2321,7 @@ export function EditorClient({
       webSocketMessages,
       clearWebSocketMessages: () => setWebSocketMessages([]),
       userInfo: userInfo,
+      editorSettings,
       userPreferences,
       setUserPreferences,
       currentWizardId,
@@ -2267,6 +2329,8 @@ export function EditorClient({
       favorites,
       loadFavorites,
     };
+
+    return context;
   }, [
     operations,
     itemsRepository,
@@ -2319,7 +2383,6 @@ export function EditorClient({
     currentItemDescriptor,
     compareTo,
     setCompareTo,
-    lastEditedFields,
     revision,
     comments,
     setComments,
@@ -2355,20 +2418,250 @@ export function EditorClient({
     setCurrentWizardId,
     favorites,
     loadFavorites,
+    userInfo,
+    editorSettings,
+    visibleViews,
   ]);
 
+  // CRITICAL: Assign editContext to ref so keyboard handlers can access it
+  useEffect(() => {
+    editContextRef.current = editContext;
+  }, [editContext]);
+
   const modifiedFieldsContext = useMemo(() => {
     return {
       modifiedFields,
+      recentEdits,
       clear: () => {
         setModifiedFields([]);
+        fieldModificationStore.clear();
+      },
+      clearRecentEdits: () => {
+        setRecentEdits([]);
       },
+      addRecentEdit,
     };
-  }, [modifiedFields, setModifiedFields]);
+  }, [modifiedFields, recentEdits, addRecentEdit]);
 
-  useEffect(() => {
-    editContextRef.current = editContext;
-  }, [editContext]);
+  // Debug: Track editContext changes
+  const prevDependencies = useRef<any[]>([]);
+
+  // useEffect(() => {
+  //   // Create current dependencies array to match the useMemo dependency array
+  //   const currentDependencies = [
+  //     operations,
+  //     itemsRepository,
+  //     configuration,
+  //     contentEditorItem,
+  //     page?.item,
+  //     itemLanguages,
+  //     itemVersions,
+  //     sessionId,
+  //     isReadOnly,
+  //     selection,
+  //     selectedForInsertion,
+  //     dragObject,
+  //     requestRefresh,
+  //     refreshCompletedFlag,
+  //     searchParams,
+  //     pathname,
+  //     router,
+  //     selectMedia,
+  //     scrollIntoView,
+  //     focusedField,
+  //     renderedFields,
+  //     inserting,
+  //     page,
+  //     activeFieldActions,
+  //     editHistory,
+  //     isRefreshing,
+  //     activeSessions,
+  //     currentView,
+  //     componentDesignerComponent,
+  //     componentDesignerRendering,
+  //     insertMode,
+  //     currentOverlay,
+  //     inlineEditingFieldElement,
+  //     lockedField,
+  //     selectedRange,
+  //     pageViewContext,
+  //     browseHistory,
+  //     workboxItems,
+  //     validating,
+  //     setCenterPanelView,
+  //     handleKeyDown,
+  //     setTimings,
+  //     timings,
+  //     startTour,
+  //     viewName,
+  //     compareMode,
+  //     setCompareMode,
+  //     addSocketMessageListener,
+  //     currentItemDescriptor,
+  //     compareTo,
+  //     setCompareTo,
+  //     revision,
+  //     comments,
+  //     setComments,
+  //     selectedComment,
+  //     setSelectedComment,
+  //     loadComments,
+  //     mode,
+  //     setMode,
+  //     user,
+  //     reviews,
+  //     statusMessage,
+  //     setStatusMessage,
+  //     suggestedEdits,
+  //     setSuggestedEdits,
+  //     showSuggestedEdits,
+  //     setShowSuggestedEdits,
+  //     showSuggestedEditsDiff,
+  //     setShowSuggestedEditsDiff,
+  //     showRightSidebar,
+  //     handleSetShowRightSidebar,
+  //     activeEditorTab,
+  //     setActiveEditorTab,
+  //     hideNonEditableComponents,
+  //     handleSetHideNonEditableComponents,
+  //     quotaInfo,
+  //     isQuotaExceeded,
+  //     getQuotaWarningMessage,
+  //     isMobile,
+  //     openDialog,
+  //     pageWizard,
+  //     webSocketMessages,
+  //     currentWizardId,
+  //     setCurrentWizardId,
+  //     favorites,
+  //     loadFavorites,
+  //   ];
+
+  //   const dependencyNames = [
+  //     'operations',
+  //     'itemsRepository',
+  //     'configuration',
+  //     'contentEditorItem',
+  //     'page?.item',
+  //     'itemLanguages',
+  //     'itemVersions',
+  //     'sessionId',
+  //     'isReadOnly',
+  //     'selection',
+  //     'selectedForInsertion',
+  //     'dragObject',
+  //     'requestRefresh',
+  //     'refreshCompletedFlag',
+  //     'searchParams',
+  //     'pathname',
+  //     'router',
+  //     'selectMedia',
+  //     'scrollIntoView',
+  //     'focusedField',
+  //     'renderedFields',
+  //     'inserting',
+  //     'page',
+  //     'activeFieldActions',
+  //     'editHistory',
+  //     'isRefreshing',
+  //     'activeSessions',
+  //     'currentView',
+  //     'componentDesignerComponent',
+  //     'componentDesignerRendering',
+  //     'insertMode',
+  //     'currentOverlay',
+  //     'inlineEditingFieldElement',
+  //     'lockedField',
+  //     'selectedRange',
+  //     'pageViewContext',
+  //     'browseHistory',
+  //     'workboxItems',
+  //     'validating',
+  //     'setCenterPanelView',
+  //     'handleKeyDown',
+  //     'setTimings',
+  //     'timings',
+  //     'startTour',
+  //     'viewName',
+  //     'compareMode',
+  //     'setCompareMode',
+  //     'addSocketMessageListener',
+  //     'currentItemDescriptor',
+  //     'compareTo',
+  //     'setCompareTo',
+  //     'revision',
+  //     'comments',
+  //     'setComments',
+  //     'selectedComment',
+  //     'setSelectedComment',
+  //     'loadComments',
+  //     'mode',
+  //     'setMode',
+  //     'user',
+  //     'reviews',
+  //     'statusMessage',
+  //     'setStatusMessage',
+  //     'suggestedEdits',
+  //     'setSuggestedEdits',
+  //     'showSuggestedEdits',
+  //     'setShowSuggestedEdits',
+  //     'showSuggestedEditsDiff',
+  //     'setShowSuggestedEditsDiff',
+  //     'showRightSidebar',
+  //     'handleSetShowRightSidebar',
+  //     'activeEditorTab',
+  //     'setActiveEditorTab',
+  //     'hideNonEditableComponents',
+  //     'handleSetHideNonEditableComponents',
+  //     'quotaInfo',
+  //     'isQuotaExceeded',
+  //     'getQuotaWarningMessage',
+  //     'isMobile',
+  //     'openDialog',
+  //     'pageWizard',
+  //     'webSocketMessages',
+  //     'currentWizardId',
+  //     'setCurrentWizardId',
+  //     'favorites',
+  //     'loadFavorites',
+  //   ];
+
+  //   // Check which dependencies have changed
+  //   const changedDependencies: string[] = [];
+  //   currentDependencies.forEach((dep, index) => {
+  //     if (prevDependencies.current[index] !== dep) {
+  //       const depName = dependencyNames[index];
+  //       if (depName) {
+  //         changedDependencies.push(depName);
+  //       }
+  //     }
+  //   });
+
+  //   if (changedDependencies.length > 0) {
+  //     console.group('🔍 EditContext Changed');
+  //     console.log('Changed dependencies:', changedDependencies);
+  //     console.log('Total dependencies tracked:', currentDependencies.length);
+
+  //     // Log details about the changed dependencies
+  //     changedDependencies.forEach(depName => {
+  //       const index = dependencyNames.indexOf(depName);
+  //       const oldValue = prevDependencies.current[index];
+  //       const newValue = currentDependencies[index];
+
+  //       console.log(`📝 ${depName}:`, {
+  //         from: oldValue,
+  //         to: newValue,
+  //         changed: oldValue !== newValue
+  //       });
+  //     });
+
+  //     console.groupEnd();
+  //   }
+
+  //   // Store current dependencies for next comparison
+  //   prevDependencies.current = currentDependencies;
+  //   editContextRef.current = editContext;
+  // }, [editContext]);
 
   useEffect(() => {
     modifiedFieldsContext.clear();
@@ -2462,7 +2755,6 @@ export function EditorClient({
                 mode={mediaSelectorMode}
               />
             )}
-            <AiPopup ref={aiPopupRef} />
             <FieldEditorPopup ref={fieldEditorPopupRef} />
             <EditorFormPopup
               ref={editorFormPopupRef}