@yogiswara/honcho-editor-ui 2.7.15 → 2.7.16

package/dist/components/editor/HHeaderEditor.d.ts

@@ -3,6 +3,8 @@ interface Props {
     anchorEl?: null | HTMLElement;
     valueSelect?: string;
     isPasteEnabled?: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
     onBack?: () => void;
     onUndo?: () => void;
     onRedo?: () => void;

package/dist/components/editor/HHeaderEditor.js

@@ -22,7 +22,7 @@ export default function HHeaderEditor(props) {
                                 transform: 'scale(0.92)',
                             },
                             transition: 'transform 0.1s ease-in-out',
-                        }, children: _jsx(CardMedia, { title: "back", src: "svg/Back.svg", component: "img" }) }) }), _jsxs(Stack, { direction: "row", justifyContent: "flex-end", alignItems: "center", sx: { pt: "20px", pb: "12px" }, spacing: 0.1, children: [_jsx(Button, { variant: "text", onClick: props.onSelectButton, sx: { color: colors.outlineVariant }, children: props.valueSelect }), _jsx(IconButton, { "aria-label": "undo", onClick: props.onUndo, sx: { color: colors.outlineVariant }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/undo-editor.svg" }) }), _jsx(IconButton, { "aria-label": "redo", onClick: props.onRedo, sx: { color: colors.outlineVariant }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/redo-editor.svg" }) }), _jsx(IconButton, { "aria-label": "option", onClick: props.onMenuClick, "aria-controls": open ? 'options-menu' : undefined, "aria-haspopup": "true", "aria-expanded": open ? 'true' : undefined, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/dots-editor.svg" }) }), _jsxs(Menu, { id: "options-menu", anchorEl: props.anchorEl, open: open, onClose: props.onMenuClose, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' }, slotProps: {
+                        }, children: _jsx(CardMedia, { title: "back", src: "svg/Back.svg", component: "img" }) }) }), _jsxs(Stack, { direction: "row", justifyContent: "flex-end", alignItems: "center", sx: { pt: "20px", pb: "12px" }, spacing: 0.1, children: [_jsx(Button, { variant: "text", onClick: props.onSelectButton, sx: { color: colors.outlineVariant }, children: props.valueSelect }), _jsx(IconButton, { "aria-label": "undo", onClick: props.onUndo, sx: { color: colors.outlineVariant }, disabled: !props.canUndo, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/undo-editor.svg" }) }), _jsx(IconButton, { "aria-label": "redo", onClick: props.onRedo, sx: { color: colors.outlineVariant }, disabled: !props.canRedo, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/redo-editor.svg" }) }), _jsx(IconButton, { "aria-label": "option", onClick: props.onMenuClick, "aria-controls": open ? 'options-menu' : undefined, "aria-haspopup": "true", "aria-expanded": open ? 'true' : undefined, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/dots-editor.svg" }) }), _jsxs(Menu, { id: "options-menu", anchorEl: props.anchorEl, open: open, onClose: props.onMenuClose, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' }, slotProps: {
                                 paper: {
                                     sx: {
                                         backgroundColor: colors.onBackground,

package/dist/hooks/useAdjustmentHistory.d.ts

@@ -37,8 +37,6 @@ export interface HistoryActions {
     undo: () => void;
     /** Redo to next adjustment state */
     redo: () => void;
-    /** Reset history with new initial adjustment state */
-    reset: (newInitialState: AdjustmentState) => void;
     /** Jump to specific index in history */
     jumpToIndex: (index: number) => void;
     /** Clear all history and start fresh */
@@ -47,8 +45,6 @@ export interface HistoryActions {
     getHistory: () => AdjustmentState[];
     /** Trim history to specified size, keeping most recent entries */
     trimHistory: (keepLast: number) => void;
-    /** Replace entire history with new list of adjustment states */
-    syncHistory: (newHistory: AdjustmentState[], targetIndex?: number) => void;
     /** Sync history from backend using getEditorHistory */
     syncFromBackend: () => Promise<void>;
 }
@@ -69,6 +65,8 @@ export interface HistoryConfig {
 export interface UseAdjustmentHistoryReturn {
     /** Current adjustment state value */
     currentState: AdjustmentState;
+    /** Current index in history */
+    currentIndex: number;
     /** Information about history state */
     historyInfo: HistoryInfo;
     /** Available history actions */

package/dist/hooks/useAdjustmentHistory.js

@@ -99,8 +99,9 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
     ]);
     // Core state management
     const [history, setHistory] = useState([{ state: initialState, taskId: `initial_${Date.now()}` }]);
-    const [currentIndex, setCurrentIndex] = useState(0);
     const [currentState, setCurrentState] = useState(initialState);
+    const currentIndexRef = useRef(0);
+    const currentStateRef = useRef(initialState);
     // Batch mode state - ref to avoid triggering effects
     const batchModeRef = useRef(internalOptions.enableBatching);
     const batchStartIndexRef = useRef(null);
@@ -109,6 +110,8 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
     // Configuration refs - prevent re-renders when config changes
     const maxSizeRef = useRef(internalOptions.maxSize);
     const devWarningsRef = useRef(internalOptions.devWarnings);
+    // Computed current index for return value (defined early for dependencies)
+    const currentIndex = currentIndexRef.current;
     // Performance monitoring
     const performanceRef = useRef({
         lastHistorySize: 1,
@@ -162,10 +165,9 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
             const startIndex = Math.max(0, prevHistory.length - size);
             const trimmedHistory = prevHistory.slice(startIndex);
             // Adjust current index to maintain relative position
-            setCurrentIndex(prevIndex => {
-                const adjustedIndex = prevIndex - startIndex;
-                return Math.max(0, Math.min(adjustedIndex, trimmedHistory.length - 1));
-            });
+            const prevIndex = currentIndexRef.current;
+            const adjustedIndex = prevIndex - startIndex;
+            currentIndexRef.current = Math.max(0, Math.min(adjustedIndex, trimmedHistory.length - 1));
             return trimmedHistory;
         });
     }, []);
@@ -181,6 +183,7 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
     // Push new state to history
     const pushState = useCallback((newState) => {
         // Always update currentState immediately for smooth UI
+        currentStateRef.current = newState;
         setCurrentState(newState);
         if (batchModeRef.current) {
             // In batch mode: Don't update history yet, just update UI state
@@ -189,22 +192,24 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
             return;
         }
         // Normal mode: Update history immediately
+        console.log(`[useAdjustmentHistory] Pushing new state to history:`, newState);
         setHistory(prevHistory => {
-            const truncatedHistory = prevHistory.slice(0, currentIndex + 1);
+            const truncatedHistory = prevHistory.slice(0, currentIndexRef.current + 1);
             // const taskId = `task_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
             // we put the taskId empty to check this state no need to save it
             const newHistory = [...truncatedHistory, { state: newState, taskId: "" }];
-            setCurrentIndex(newHistory.length - 1);
+            currentIndexRef.current = newHistory.length - 1;
             return newHistory;
         });
-    }, [currentState, currentIndex]);
+    }, []);
     // Undo to previous state
     const undo = useCallback(async () => {
-        if (currentIndex > 0) {
-            const newIndex = currentIndex - 1;
+        if (currentIndexRef.current > 0) {
+            const newIndex = currentIndexRef.current - 1;
             const historyEntry = history[newIndex];
             const newState = historyEntry.state;
-            setCurrentIndex(newIndex);
+            currentIndexRef.current = newIndex;
+            currentStateRef.current = newState;
             setCurrentState(newState);
             console.log(`[useAdjustmentHistory] Undoing to index ${newIndex}:`, newState);
             // Call controller to set history index in backend if taskId exists
@@ -228,14 +233,15 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
                 batchStartStateRef.current = null;
             }
         }
-    }, [currentIndex, history, internalOptions]);
+    }, [history, internalOptions]);
     // Redo to next state
     const redo = useCallback(async () => {
-        if (currentIndex < history.length - 1) {
-            const newIndex = currentIndex + 1;
+        if (currentIndexRef.current < history.length - 1) {
+            const newIndex = currentIndexRef.current + 1;
             const historyEntry = history[newIndex];
             const newState = historyEntry.state;
-            setCurrentIndex(newIndex);
+            currentIndexRef.current = newIndex;
+            currentStateRef.current = newState;
             setCurrentState(newState);
             console.log(`[useAdjustmentHistory] Redoing to index ${newIndex}:`, newState);
             // Call controller to set history index in backend if taskId exists
@@ -253,22 +259,24 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
                 console.warn('🔄 Redo: No taskId available for setting history index', historyEntry.taskId, internalOptions.firebaseUid, internalOptions.currentImageId);
             }
         }
-    }, [currentIndex, history, internalOptions]);
+    }, [history, internalOptions]);
     // Reset history with new initial state
-    const reset = useCallback((newInitialState) => {
-        setHistory([{ state: newInitialState, taskId: `reset_${Date.now()}` }]);
-        setCurrentIndex(0);
-        setCurrentState(newInitialState);
-        batchModeRef.current = internalOptions.enableBatching;
-        batchStartIndexRef.current = null;
-        batchStartStateRef.current = null;
-    }, [internalOptions.enableBatching]);
+    // const reset = useCallback((newInitialState: AdjustmentState) => {
+    //     console.log("Reset called setHistory");
+    //     setHistory([{ state: newInitialState, taskId: `reset_${Date.now()}` }]);
+    //     currentIndexRef.current = 0;
+    //     currentStateRef.current = newInitialState;
+    //     batchModeRef.current = internalOptions.enableBatching;
+    //     batchStartIndexRef.current = null;
+    //     batchStartStateRef.current = null;
+    // }, [internalOptions.enableBatching]);
     // Jump to specific index in history
     const jumpToIndex = useCallback((index) => {
         if (index >= 0 && index < history.length) {
             const historyEntry = history[index];
             const newState = historyEntry.state;
-            setCurrentIndex(index);
+            currentIndexRef.current = index;
+            currentStateRef.current = newState;
             setCurrentState(newState);
             // Exit batch mode when jumping
             if (batchModeRef.current) {
@@ -280,12 +288,13 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
     }, [history]);
     // Clear all history and start fresh
     const clearHistory = useCallback(() => {
-        setHistory([{ state: currentState, taskId: `clear_${Date.now()}` }]);
-        setCurrentIndex(0);
+        console.log("clearHistory called setHistory");
+        setHistory([{ state: currentStateRef.current, taskId: `clear_${Date.now()}` }]);
+        currentIndexRef.current = 0;
         batchModeRef.current = internalOptions.enableBatching;
         batchStartIndexRef.current = null;
         batchStartStateRef.current = null;
-    }, [currentState, internalOptions.enableBatching]);
+    }, [internalOptions.enableBatching]);
     // Get copy of entire history
     const getHistory = useCallback(() => {
         return history.map(entry => entry.state);
@@ -369,16 +378,16 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
     }, [enforceMaxSize]);
     const setBatchMode = useCallback(async (enabled, forceHistory = false) => {
         const wasInBatch = batchModeRef.current;
-        console.log(`🔧 setBatchMode called: enabled=${enabled}, wasInBatch=${wasInBatch}, currentIndex=${currentIndex}, historyLength=${history.length}`);
+        console.log(`🔧 setBatchMode called: enabled=${enabled}, wasInBatch=${wasInBatch}, currentIndex=${currentIndexRef.current}, historyLength=${history.length}`);
         if (enabled && !wasInBatch) {
             // Starting batch mode - save current state as batch start
             batchModeRef.current = true;
-            batchStartIndexRef.current = currentIndex;
-            batchStartStateRef.current = currentState;
+            batchStartIndexRef.current = currentIndexRef.current;
+            batchStartStateRef.current = currentStateRef.current;
             console.log("🔧 setBatchMode(true): Starting batch mode", {
-                currentState,
-                currentIndex,
-                batchStartState: currentState
+                currentState: currentStateRef.current,
+                currentIndex: currentIndexRef.current,
+                batchStartState: currentStateRef.current
             });
         }
         else if (!enabled && wasInBatch) {
@@ -388,15 +397,15 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
                 console.log("⚠️ setBatchMode(false) already processing, skipping duplicate call");
                 return;
             }
-            console.log("🔧 setBatchMode: Ending batch mode", currentState, `batchStartIndex=${batchStartIndexRef.current}`);
+            console.log("🔧 setBatchMode: Ending batch mode", currentStateRef.current, `batchStartIndex=${batchStartIndexRef.current}`);
             // Ending batch mode - commit final state to history
             batchModeProcessingRef.current = true;
             batchModeRef.current = false;
             // Only add to history if state actually changed from batch start
             const statesEqual = batchStartStateRef.current ?
-                compareAdjustmentStates(currentState, batchStartStateRef.current) : true;
+                compareAdjustmentStates(currentStateRef.current, batchStartStateRef.current) : true;
             console.log("🔧 setBatchMode(false): Comparing states", {
-                currentState,
+                currentState: currentStateRef.current,
                 batchStartState: batchStartStateRef.current,
                 statesEqual,
                 forceHistory,
@@ -405,39 +414,42 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
             if (batchStartStateRef.current && (!statesEqual || forceHistory)) {
                 // Generate a unique task ID for this history entry
                 const taskId = `task_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+                console.log('📋 Before SetHistory state for backend:', batchStartIndexRef.current, currentStateRef.current, history.length);
+                // Store variables for backend call BEFORE setHistory
+                let replaceFromTaskId;
+                const batchStartIndex = batchStartIndexRef.current ?? currentIndexRef.current;
+                const wasInMiddleOfHistory = batchStartIndex < history.length - 1;
+                if (wasInMiddleOfHistory) {
+                    // Get the task_id from the original history entry to use as replace_from
+                    const currentHistoryEntry = history[batchStartIndex];
+                    replaceFromTaskId = currentHistoryEntry?.taskId;
+                    console.log(`📍 Was in middle of history (index ${batchStartIndex}), using replace_from: ${replaceFromTaskId}`);
+                }
+                else {
+                    console.log(`📍 At latest history (index ${batchStartIndex}), no replace_from needed`);
+                }
                 setHistory(prevHistory => {
                     // Check if we were in the middle of history BEFORE any truncation
                     // Handle case where batchStartIndexRef.current might be null (e.g., after undo)
-                    const batchStartIndex = batchStartIndexRef.current ?? currentIndex;
+                    const batchStartIndex = batchStartIndexRef.current ?? currentIndexRef.current;
                     const truncatedHistory = prevHistory.slice(0, batchStartIndex + 1);
                     const newHistoryEntry = {
-                        state: currentState,
+                        state: currentStateRef.current,
                         taskId: taskId
                     };
                     const newHistory = [...truncatedHistory, newHistoryEntry];
-                    setCurrentIndex(newHistory.length - 1);
+                    currentIndexRef.current = newHistory.length - 1;
                     return newHistory;
                 });
                 // Call controller to create history in backend - OUTSIDE of setHistory callback
                 if (internalOptions.controller && internalOptions.firebaseUid && internalOptions.currentImageId) {
                     try {
                         console.log('🔄 Creating editor history in backend for batch mode end');
-                        let replaceFromTaskId;
-                        const batchStartIndex = batchStartIndexRef.current ?? currentIndex;
-                        const wasInMiddleOfHistory = batchStartIndex < history.length - 1;
-                        if (wasInMiddleOfHistory) {
-                            // Get the task_id from the original history entry to use as replace_from
-                            const currentHistoryEntry = history[batchStartIndex];
-                            replaceFromTaskId = currentHistoryEntry?.taskId;
-                            console.log(`📍 Was in middle of history (index ${batchStartIndex}), using replace_from: ${replaceFromTaskId}`);
-                        }
-                        else {
-                            console.log(`📍 At latest history (index ${batchStartIndex}), no replace_from needed`);
-                        }
+                        console.log('📋 Current state for backend:', batchStartIndexRef.current, currentStateRef.current, history.length);
                         const createEditorConfigPayload = {
                             gallery_id: internalOptions.currentImageId,
                             task_id: taskId,
-                            color_adjustment: convertAdjustmentStateToColorAdjustment(currentState),
+                            color_adjustment: convertAdjustmentStateToColorAdjustment(currentStateRef.current),
                             ...(replaceFromTaskId && { replace_from: replaceFromTaskId })
                         };
                         // Create editor config with current adjustments
@@ -469,7 +481,7 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
             batchStartStateRef.current = null;
             batchModeProcessingRef.current = false; // Reset processing flag
         }
-    }, [currentIndex, currentState, internalOptions]);
+    }, [internalOptions, history]);
     // Sync history from backend using getEditorHistory
     const syncFromBackend = useCallback(async () => {
         if (!internalOptions.controller || !internalOptions.firebaseUid || !internalOptions.currentImageId) {
@@ -479,17 +491,12 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
         try {
             console.log('🔄 Syncing history from backend using getEditorHistory');
             const historyResponse = await internalOptions.controller.getEditorHistory(internalOptions.firebaseUid, internalOptions.currentImageId);
-            console.log('📥 Received history response from backend:', historyResponse);
             // Sort history by timestamp (oldest first) before processing
             const sortedHistory = [...historyResponse.history].sort((a, b) => {
                 const timeA = new Date(a.log.created_at).getTime();
                 const timeB = new Date(b.log.created_at).getTime();
                 return timeA - timeB; // Ascending order (oldest first)
             });
-            console.log('📋 Sorted history by timestamp:', sortedHistory.map(entry => ({
-                task_id: entry.task_id,
-                timestamp: entry.log.created_at
-            })));
             // Convert backend history to AdjustmentState format with taskIds
             const backendHistoryEntries = sortedHistory.map((entry) => ({
                 state: convertColorAdjustmentToAdjustmentState(entry.editor_config.color_adjustment),
@@ -518,8 +525,9 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
             }
             // Update history state with backend data
             setHistory(backendHistoryEntries);
-            setCurrentIndex(Math.max(0, currentTaskIndex));
+            currentIndexRef.current = Math.max(0, currentTaskIndex);
             console.log(`📍 Setting current index to: ${Math.max(0, currentTaskIndex)} (task_id: ${historyResponse.current_task_id})`);
+            currentStateRef.current = backendHistoryEntries[Math.max(0, currentTaskIndex)].state;
             setCurrentState(backendHistoryEntries[Math.max(0, currentTaskIndex)].state);
             console.log(`✅ Successfully synced ${backendHistoryEntries.length} history entries from backend`);
             console.log(`📍 Set current index to: ${Math.max(0, currentTaskIndex)} (task_id: ${historyResponse.current_task_id})`);
@@ -531,26 +539,24 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
     }, [internalOptions]);
     // History info object
     const historyInfo = useMemo(() => ({
-        canUndo: currentIndex > 0,
-        canRedo: currentIndex < history.length - 1,
-        currentIndex,
+        canUndo: currentIndexRef.current > 0,
+        canRedo: currentIndexRef.current < history.length - 1,
+        currentIndex: currentIndexRef.current,
         totalStates: history.length,
         historySize: getMemoryUsage(),
         isBatchMode: batchModeRef.current
-    }), [currentIndex, history.length, getMemoryUsage]);
+    }), [history.length, getMemoryUsage]);
     // Actions object - stabilized with useMemo
     const actions = useMemo(() => ({
         pushState,
         undo,
         redo,
-        reset,
         jumpToIndex,
         clearHistory,
         getHistory,
         trimHistory,
-        syncHistory,
         syncFromBackend
-    }), [pushState, undo, redo, reset, jumpToIndex, clearHistory, getHistory, trimHistory, syncHistory, syncFromBackend]);
+    }), [pushState, undo, redo, jumpToIndex, clearHistory, getHistory, trimHistory, syncFromBackend]);
     // Config object - stabilized with useMemo
     const config = useMemo(() => ({
         setMaxSize,
@@ -564,6 +570,7 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
     }, [enforceMaxSize, checkPerformance]);
     return {
         currentState,
+        currentIndex,
         historyInfo,
         actions,
         config

package/dist/lib/hooks/useEditorHeadless.js

@@ -125,7 +125,7 @@ export function useEditorHeadless(options = {}) {
                     console.debug('HonchoEditor instance created successfully');
                 }
                 console.debug('Initializing HonchoEditor...');
-                await editorRef.current.initialize(true);
+                await editorRef.current.initialize(false);
                 console.debug('HonchoEditor initialized successfully');
                 setIsReady(true);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yogiswara/honcho-editor-ui",
-  "version": "2.7.15",
+  "version": "2.7.16",
   "description": "A complete UI component library for the Honcho photo editor.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",