@alpaca-editor/core 1.0.4027 → 1.0.4030

package/src/editor/client/editContext.ts

@@ -35,6 +35,7 @@ import {
   SuggestedEdit,
   UserInfo,
   UserPreferences,
+  EditorSettings,
 } from "../../types";
 
 import { ConfirmationProps } from "../ConfirmationDialog";
@@ -153,6 +154,7 @@ export type EditContextType = {
   itemLanguages: LanguageVersions[];
   itemVersions: Version[];
   view?: EditorView;
+  visibleViews: EditorView[];
 
   viewName: string;
   previousViewName?: string;
@@ -247,15 +249,12 @@ export type EditContextType = {
   setCurrentOverlay: React.Dispatch<React.SetStateAction<any>>;
   currentOverlay?: any;
 
-  showAiPopup: (
-    event: MouseEvent<HTMLElement>,
-    aiTerminalOptions?: AiTerminalOptions,
-  ) => void;
   showFieldEditorPopup: (fields: Field[], sections: string[], ev: any) => void;
   showEditorFormPopup: (
     event: MouseEvent<HTMLElement>,
     activeTab?: string,
   ) => void;
+
   validationResult: ValidationResult[] | undefined;
   contentEditorItem: FullItem | undefined;
 
@@ -315,7 +314,6 @@ export type EditContextType = {
   setCompareTo: React.Dispatch<
     React.SetStateAction<ItemDescriptor | undefined>
   >;
-  lastEditedFields: EditedField[];
   revision?: string;
   user?: User;
   statusMessage: React.ReactNode;
@@ -369,6 +367,7 @@ export type EditContextType = {
   webSocketMessages: WebSocketMessage[];
   clearWebSocketMessages: () => void;
   userInfo: UserInfo;
+  editorSettings?: EditorSettings;
   setUserPreferences: (preferences: Partial<UserPreferences>) => void;
   favorites: any[];
   loadFavorites: () => Promise<void>;
@@ -409,7 +408,10 @@ export type ModifiedField = FieldDescriptor & {
 
 export type ModifiedFieldsContextType = {
   modifiedFields: ModifiedField[];
+  recentEdits: EditedField[];
   clear: () => void;
+  clearRecentEdits: () => void;
+  addRecentEdit: (edit: EditedField) => void;
 };
 
 export type EditedField = FieldDescriptor & {

package/src/editor/client/fieldModificationStore.ts

@@ -0,0 +1,196 @@
+import { useEffect, useState, useRef } from "react";
+import { ModifiedField } from "./editContext";
+
+// Field-specific subscription store that doesn't rely on React context
+class FieldModificationStore {
+  private subscribers = new Map<
+    string,
+    Set<(field: ModifiedField | undefined) => void>
+  >();
+  private fieldData = new Map<string, ModifiedField>();
+
+  private getFieldKey(
+    fieldId: string,
+    itemId: string,
+    language: string,
+    version: number,
+  ): string {
+    return `${fieldId}:${itemId}:${language}:${version}`;
+  }
+
+  // Subscribe to a specific field's changes
+  subscribe(
+    fieldId: string,
+    itemId: string,
+    language: string,
+    version: number,
+    callback: (field: ModifiedField | undefined) => void,
+  ): () => void {
+    const key = this.getFieldKey(fieldId, itemId, language, version);
+
+    if (!this.subscribers.has(key)) {
+      this.subscribers.set(key, new Set());
+    }
+
+    this.subscribers.get(key)!.add(callback);
+
+    // Immediately call with current value
+    callback(this.fieldData.get(key));
+
+    // Return unsubscribe function
+    return () => {
+      const subscribers = this.subscribers.get(key);
+      if (subscribers) {
+        subscribers.delete(callback);
+        if (subscribers.size === 0) {
+          this.subscribers.delete(key);
+        }
+      }
+    };
+  }
+
+  // Update a specific field (called from itemsRepository)
+  updateField(field: ModifiedField): void {
+    const key = this.getFieldKey(
+      field.fieldId,
+      field.item.id,
+      field.item.language,
+      field.item.version,
+    );
+    const previousField = this.fieldData.get(key);
+
+    // Check for actual changes to avoid unnecessary re-renders
+    const hasChanged =
+      !previousField ||
+      previousField.value !== field.value ||
+      previousField.isDirty !== field.isDirty ||
+      previousField.saveSequence !== field.saveSequence;
+
+    // Always update the stored field data
+    this.fieldData.set(key, field);
+
+    if (hasChanged) {
+      // Notify only subscribers for this specific field
+      const subscribers = this.subscribers.get(key);
+      if (subscribers) {
+        subscribers.forEach((callback) => callback(field));
+      }
+    }
+  }
+
+  // Remove a field (when it's no longer modified)
+  removeField(
+    fieldId: string,
+    itemId: string,
+    language: string,
+    version: number,
+  ): void {
+    const key = this.getFieldKey(fieldId, itemId, language, version);
+    this.fieldData.delete(key);
+
+    // Notify subscribers that field is no longer modified
+    const subscribers = this.subscribers.get(key);
+    if (subscribers) {
+      subscribers.forEach((callback) => callback(undefined));
+    }
+  }
+
+  // Clear all fields
+  clear(): void {
+    this.fieldData.clear();
+    // Notify all subscribers that their fields are no longer modified
+    this.subscribers.forEach((subscribers) => {
+      subscribers.forEach((callback) => callback(undefined));
+    });
+  }
+
+  // Get current field data (for context compatibility)
+  getAllFields(): ModifiedField[] {
+    return Array.from(this.fieldData.values());
+  }
+
+  // Bulk update (for when itemsRepository updates multiple fields)
+  updateFields(fields: ModifiedField[]): void {
+    // Track which keys we've updated
+    const updatedKeys = new Set<string>();
+
+    // Update all provided fields
+    fields.forEach((field) => {
+      const key = this.getFieldKey(
+        field.fieldId,
+        field.item.id,
+        field.item.language,
+        field.item.version,
+      );
+      updatedKeys.add(key);
+
+      const previousField = this.fieldData.get(key);
+      if (
+        !previousField ||
+        previousField.value !== field.value ||
+        previousField.isDirty !== field.isDirty ||
+        previousField.saveSequence !== field.saveSequence
+      ) {
+        this.fieldData.set(key, field);
+
+        const subscribers = this.subscribers.get(key);
+        if (subscribers) {
+          subscribers.forEach((callback) => callback(field));
+        }
+      }
+    });
+
+    // Remove fields that are no longer in the update
+    for (const [key, field] of this.fieldData.entries()) {
+      if (!updatedKeys.has(key)) {
+        this.fieldData.delete(key);
+        const subscribers = this.subscribers.get(key);
+        if (subscribers) {
+          subscribers.forEach((callback) => callback(undefined));
+        }
+      }
+    }
+  }
+}
+
+// Global store instance
+const fieldModificationStore = new FieldModificationStore();
+
+// Hook for field-specific subscriptions - only rerenders when THIS field changes
+export function useFieldModification(
+  fieldId: string,
+  itemId: string,
+  language: string,
+  version: number,
+) {
+  const [modifiedField, setModifiedField] = useState<ModifiedField | undefined>(
+    undefined,
+  );
+  const [isModified, setIsModified] = useState(false);
+  const [isSaved, setIsSaved] = useState(false);
+
+  useEffect(() => {
+    const unsubscribe = fieldModificationStore.subscribe(
+      fieldId,
+      itemId,
+      language,
+      version,
+      (field) => {
+        setModifiedField(field);
+        setIsModified(!!field);
+        // isSaved logic:
+        // - If field exists and is not dirty → saved = true (field was modified and saved)
+        // - If field exists and is dirty → saved = false (field was modified but not saved)
+        // - If field doesn't exist → saved = false (field never modified, no indicator shown)
+        setIsSaved(field ? !field.isDirty : false);
+      },
+    );
+
+    return unsubscribe;
+  }, [fieldId, itemId, language, version]);
+
+  return { modifiedField, isModified, isSaved };
+}
+
+// Export store for itemsRepository to use
+export { fieldModificationStore };

package/src/editor/client/itemsRepository.ts

@@ -12,6 +12,7 @@ import { getItemDescriptor } from "../utils";
 import { EditedField, ModifiedField } from "./editContext";
 import { User } from "../../types";
 import { templatesRootItemId } from "../../config/config";
+import { fieldModificationStore } from "./fieldModificationStore";
 
 export type ItemChange = {
   item: ItemDescriptor;
@@ -96,7 +97,7 @@ const isTemplateChange = async (
 
 export function useItemsRepository(
   setModifiedFields: React.Dispatch<React.SetStateAction<ModifiedField[]>>,
-  setLastEditedFields: React.Dispatch<React.SetStateAction<EditedField[]>>,
+  addRecentEdit: (edit: EditedField) => void,
 ): ItemsRepository {
   const itemsMap = useRef<Map<string, FullItem>>(new Map());
   const stubsMap = useRef<Map<string, ItemStub>>(new Map());
@@ -403,47 +404,42 @@ export function useItemsRepository(
             x.item.language === field.item.language &&
             x.item.version === field.item.version,
         );
+
+        let newModifiedFields: ModifiedField[];
+        let updatedField: ModifiedField;
+
         if (!modifiedField) {
-          return [
-            ...prevModifiedFields,
-            {
-              ...field,
-              value: val,
-              isDirty: isDirty,
-              modifiedBy: user,
-              timestamp: Date.now(),
-              saveSequence: currentSaveSequence,
-            },
-          ];
+          updatedField = {
+            ...field,
+            value: val,
+            isDirty: isDirty,
+            modifiedBy: user,
+            timestamp: Date.now(),
+            saveSequence: currentSaveSequence,
+          };
+          newModifiedFields = [...prevModifiedFields, updatedField];
         } else {
           modifiedField.isDirty = isDirty;
           modifiedField.value = val;
           modifiedField.modifiedBy = user;
           modifiedField.timestamp = Date.now();
           modifiedField.saveSequence = currentSaveSequence;
+          updatedField = { ...modifiedField }; // Create new object to ensure change detection
+          newModifiedFields = [...prevModifiedFields];
         }
 
-        return [...prevModifiedFields];
-      });
+        // Update the field-specific store for optimized subscriptions
+        fieldModificationStore.updateField(updatedField);
 
-      setLastEditedFields((prevEditedFields) => {
-        return [
-          ...prevEditedFields.filter(
-            (x) =>
-              x.timestamp > Date.now() - 30000 &&
-              (x.fieldId !== field.fieldId ||
-                x.item.id !== field.item.id ||
-                x.item.language !== field.item.language ||
-                x.item.version !== field.item.version),
-          ),
-          { ...field, timestamp: Date.now(), user },
-        ];
+        return newModifiedFields;
       });
 
+      // addRecentEdit({ ...field, timestamp: Date.now(), user });
+
       //      setRevision((prev) => prev + 1);
       return currentSaveSequence;
     },
-    [getItem, setModifiedFields, setLastEditedFields],
+    [getItem, setModifiedFields, addRecentEdit],
   );
 
   const refreshItems = useCallback(
@@ -509,7 +505,12 @@ export function useItemsRepository(
           return field.rawValue !== x.value;
         };
 
-        setModifiedFields(updateModifiedFields);
+        setModifiedFields((prevFields) => {
+          const newFields = updateModifiedFields(prevFields);
+          // Update the field-specific store with the new fields
+          fieldModificationStore.updateFields(newFields);
+          return newFields;
+        });
         setRevision((prev) => prev + 1);
       }
       triggerItemsChangedEvent(
@@ -530,14 +531,23 @@ export function useItemsRepository(
             x.item.version === field.item.version,
         );
         if (modifiedField) {
-          // Only mark as not dirty if this save operation corresponds to the most recent edit
-          // or if the value matches and this is the latest save operation
-          if (
+          // If the field is already clean (isDirty: false), the save was successful
+          // so we should update the UI state even if save sequences don't match exactly
+          if (!modifiedField.isDirty) {
+            // Create new object to ensure change detection works
+            const savedField = { ...modifiedField };
+            fieldModificationStore.updateField(savedField);
+          }
+          // Otherwise, check save sequence for validation
+          else if (
             modifiedField.saveSequence === saveSequence ||
             (modifiedField.value === value &&
               modifiedField.saveSequence <= saveSequence)
           ) {
             modifiedField.isDirty = false;
+            // Create new object to ensure change detection works
+            const savedField = { ...modifiedField };
+            fieldModificationStore.updateField(savedField);
           }
           return [...prevModifiedFields];
         }