@yogiswara/honcho-editor-ui 1.2.1 → 1.2.3

package/dist/hooks/editor/useHonchoEditor.d.ts

@@ -35,7 +35,6 @@ export type Preset = {
 export type ImageItem = {
     id: string;
     url: string;
-    name: string;
     file: File;
 };
 export declare function useHonchoEditor(controller: Controller, initImageId: string, firebaseUid: string, eventId: string): {

package/dist/hooks/editor/useHonchoEditor.js

@@ -182,7 +182,6 @@ export function useHonchoEditor(controller, initImageId, firebaseUid, eventId) {
                     const items = galleryList.map(g => ({
                         id: g.id,
                         url: g.raw_edited?.path || g.download?.path || '',
-                        name: g.uid,
                         file: new File([], g.id),
                     }));
                     setImageList(items);
@@ -334,15 +333,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.3",
   "description": "A complete UI component library for the Honcho photo editor.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",