@vonaffenfels/contentful-slate-editor 1.0.34 → 1.0.41

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/contentful-slate-editor",
-    "version": "1.0.34",
+    "version": "1.0.41",
     "scripts": {
         "prepublish": "yarn run build",
         "dev": "yarn run start",
@@ -89,10 +89,10 @@
         "webpack-dev-server": "^4.0.0-beta.2"
     },
     "dependencies": {
-        "@vonaffenfels/slate-editor": "^1.0.34",
+        "@vonaffenfels/slate-editor": "^1.0.41",
         "webpack": "5.88.2"
     },
-    "gitHead": "09afee2ada365a370687380dbcb426fdb6e4d51f",
+    "gitHead": "1ad8ddd858ff27ea19e568d79f189f20a2ef0488",
     "publishConfig": {
         "access": "public"
     }

package/src/components/EditorField.js

@@ -13,6 +13,7 @@ import componentLoader from "@vonaffenfels/slate-editor/componentLoader";
 
 let isLoadingCountGlobal = 0;
 let loaderTimeout;
+let isInitialLoad = true;
 
 const EditorField = ({
     fieldSdk,
@@ -65,6 +66,10 @@ const EditorField = ({
         if (windowSdk) {
             windowSdk.startAutoResizer();
         }
+
+        setTimeout(() => {
+            isInitialLoad = false;
+        }, 1000);
     }, []);
 
     useEffect(() => {
@@ -93,6 +98,61 @@ const EditorField = ({
         fakeActiveContent[field] = entrySdk.fields[field].getValue();
     }
 
+    const executeLoader = async (block, attributes) => {
+        let loaderResult = {};
+
+        setIsLoadingCount(++isLoadingCountGlobal);
+
+        try {
+            const fetchUrl = `/api/loader/?${new URLSearchParams({
+                portal: portal,
+                block: block,
+                variables: JSON.stringify({
+                    ...attributes,
+                    entries: null,
+                    items: null,
+                }),
+            })}`;
+
+            loaderResult = await fetch(fetchUrl)
+                .then(res => res.json())
+                .catch(err => {
+                    console.error(err);
+                });
+
+            if (loaderResult) {
+                for (let key in loaderResult) {
+                    attributes[key] = loaderResult[key];
+                }
+            }
+
+            setIsLoadingCount(--isLoadingCountGlobal);
+        } catch (e) {
+            console.error(`Error in loader for ${block}`);
+            console.error(e);
+
+            setIsLoadingCount(--isLoadingCountGlobal);
+        }
+
+        return loaderResult;
+    };
+
+    const getLoaderResult = async (block, attributes) => {
+        return new Promise((resolve, reject) => {
+            if (isInitialLoad) {
+                executeLoader(block, attributes).then(result => resolve(result));
+
+                return;
+            }
+
+            clearTimeout(loaderTimeout);
+
+            loaderTimeout = setTimeout(async () => {
+                resolve(await executeLoader(block, attributes));
+            }, 1000);
+        });
+    };
+
     return <div ref={wrapperRef} className="editor-field h-full">
         <BlockEditor
             onChange={onChange}
@@ -103,42 +163,7 @@ const EditorField = ({
             storybookComponentLoader={componentLoader}
             storybookStories={storybookStories}
             isLoading={isLoadingCount !== 0}
-            storybookComponentDataLoader={async (block, attributes) => {
-                let loaderResult = {};
-
-                clearTimeout(loaderTimeout);
-
-                loaderTimeout = await setTimeout(async () => {
-                    setIsLoadingCount(++isLoadingCountGlobal);
-
-                    try {
-                        const fetchUrl = `/api/loader/?${new URLSearchParams({
-                            portal: portal,
-                            block: block,
-                            variables: JSON.stringify({
-                                ...attributes,
-                                entries: null,
-                                items: null,
-                            }),
-                        })}`;
-
-                        loaderResult = await fetch(fetchUrl).then(res => res.json());
-
-                        if (loaderResult) {
-                            for (let key in loaderResult) {
-                                attributes[key] = loaderResult[key];
-                            }
-                        }
-                    } catch (e) {
-                        console.error(`Error in loader for ${block}`);
-                        console.error(e);
-                    }
-
-                    setIsLoadingCount(--isLoadingCountGlobal);
-                }, 1000);
-
-                return loaderResult;
-            }}
+            storybookComponentDataLoader={async (block, attributes) => await getLoaderResult(block, attributes)}
             onStorybookElementClick={onStorybookElementClick}
         />
     </div>;