@yogiswara/honcho-editor-ui 1.2.1 → 1.2.2

package/dist/hooks/editor/useHonchoEditor.js

@@ -334,15 +334,25 @@ export function useHonchoEditor(controller, initImageId, firebaseUid, eventId) {
         }
     }, [imageList, currentImageId]);
     useEffect(() => {
-        if (initImageId) {
-            setCurrentImageId(initImageId);
-        }
-    }, [initImageId]);
-    useEffect(() => {
-        if (currentImageId && firebaseUid) {
-            loadImageFromId(firebaseUid, currentImageId);
+        // This is now the single point of control for loading an image based on the initial props.
+        // 1. First, check if all conditions are met to even attempt loading.
+        //    We ensure the editor itself is ready before doing anything.
+        const canLoad = initImageId && firebaseUid && controller && isEditorReady;
+        if (!canLoad) {
+            return;
         }
-    }, [currentImageId, firebaseUid, loadImageFromId]);
+        // 2. Define the loading sequence as an async function inside the effect.
+        const loadInitialImage = async () => {
+            console.log(`[EFFECT] Starting to load initial image ID: ${initImageId}`);
+            // This directly calls the loading function. We don't need to set
+            // an intermediate 'currentImageId' state, which avoids an extra re-render and potential loop.
+            await loadImageFromId(firebaseUid, initImageId);
+        };
+        // 3. Execute the loading sequence.
+        loadInitialImage();
+        // Dependencies: The external props and readiness flags that trigger this logic.
+        // Whenever any of these change, this effect will re-evaluate.
+    }, [initImageId, firebaseUid, controller, isEditorReady, loadImageFromId]);
     const handleFileChange = (event) => {
         const files = event.target?.files;
         if (!files || files.length === 0)

package/package.json

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