@vonaffenfels/contentful-slate-editor 1.0.26 → 1.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/contentful-slate-editor",
-    "version": "1.0.26",
+    "version": "1.0.30",
     "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.26",
-        "webpack": "5.73.0"
+        "@vonaffenfels/slate-editor": "^1.0.30",
+        "webpack": "5.88.2"
     },
-    "gitHead": "7089b60e41691c2c382e25c8447f74d0bd031aaa",
+    "gitHead": "fe88a0b3ce82331fa3d7193a4cd62b8e2c8ecfb9",
     "publishConfig": {
         "access": "public"
     }

package/src/components/Dialog.js

@@ -21,27 +21,18 @@ const Dialog = ({
         },
     ];
     const [value, setValue] = useState(sdk.parameters.invocation.value || defaultValue);
-    const [loadedStorybookStories, setLoadedStorybookStories] = useState([]);
-
-    const loadStories = async () => {
-        setLoadedStorybookStories(await storybookStories());
-    };
 
     const saveChanges = () => {
         sdk.close(value);
     };
 
-    useEffect(() => {
-        loadStories();
-    }, []);
-
     switch (sdk.parameters.invocation.type) {
         case "cloudinary":
             return <DialogCloudinary sdk={sdk} config={sdk.parameters.invocation}/>;
         default:
             return <div className="relative flex h-full max-h-full justify-between">
                 <BlockEditor
-                    storybookStories={loadedStorybookStories}
+                    storybookStories={storybookStories}
                     onChange={setValue}
                     elementPropsMap={elementPropsMap}
                     value={value}

package/src/components/EditorField.js

@@ -11,6 +11,9 @@ import storybookStories from "storybookStories";
 // eslint-disable-next-line import/no-unresolved
 import componentLoader from "@vonaffenfels/slate-editor/componentLoader";
 
+let isLoadingCountGlobal = 0;
+let controller = new AbortController();
+
 const EditorField = ({
     fieldSdk,
     windowSdk,
@@ -33,6 +36,7 @@ const EditorField = ({
     ];
     const [value, setValue] = useState(validateValue(loadedValue));
     const [externalValue, setExternalValue] = useState(value);
+    const [isLoadingCount, setIsLoadingCount] = useState(isLoadingCount);
     const isVisible = useOnScreen(wrapperRef);
 
     function validateValue(value) {
@@ -89,7 +93,7 @@ const EditorField = ({
         fakeActiveContent[field] = entrySdk.fields[field].getValue();
     }
 
-    return <div ref={wrapperRef} className="editor-field">
+    return <div ref={wrapperRef} className="editor-field h-full">
         <BlockEditor
             onChange={onChange}
             value={validateValue(value)}
@@ -98,8 +102,40 @@ const EditorField = ({
             elementPropsMap={elementPropsMap}
             storybookComponentLoader={componentLoader}
             storybookStories={storybookStories}
+            isLoading={isLoadingCount !== 0}
             storybookComponentDataLoader={async (block, attributes) => {
-                return [];
+                let loaderResult = {};
+                setIsLoadingCount(++isLoadingCountGlobal);
+
+                controller.abort();
+
+                controller = new AbortController();
+
+                try {
+                    const fetchUrl = `/api/loader/?${new URLSearchParams({
+                        portal: portal,
+                        block: block,
+                        variables: JSON.stringify({
+                            ...attributes,
+                            entries: null,
+                            items: null,
+                        }),
+                    })}`;
+                    loaderResult = await fetch(fetchUrl, {signal: controller.signal}).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);
+
+                return loaderResult;
             }}
             onStorybookElementClick={onStorybookElementClick}
         />

package/src/scss/index.scss

@@ -12,6 +12,7 @@ html, body, div {
 }
 
 .editor-field {
+    position: relative;
     height: 100%;
 }
 

package/webpack.config.js

@@ -72,11 +72,21 @@ module.exports = ({
                 },
                 {
                     test: /\.s[ac]ss$/i,
-                    include: path.resolve(__dirname, 'src', 'scss'),
+                    include: [
+                        path.resolve(__dirname, 'src', 'scss'),
+                        relativePathToComponents,
+                        ...transpilePaths,
+                    ],
                     use: [
                         "style-loader",
-                        {loader: 'css-loader', options: {importLoaders: 1}},
-                        {loader: 'postcss-loader', options: {postcssOptions: postCssConfig}},
+                        {
+                            loader: 'css-loader',
+                            options: {importLoaders: 1},
+                        },
+                        {
+                            loader: 'postcss-loader',
+                            options: {postcssOptions: postCssConfig},
+                        },
                         "sass-loader",
                     ],
                 },
@@ -91,7 +101,10 @@ module.exports = ({
                                 modules: {exportLocalsConvention: "camelCase"},
                             },
                         },
-                        {loader: 'postcss-loader', options: {postcssOptions: postCssConfig}},
+                        {
+                            loader: 'postcss-loader',
+                            options: {postcssOptions: postCssConfig},
+                        },
                     ],
                 },
                 {
@@ -103,7 +116,10 @@ module.exports = ({
                             loader: 'css-loader',
                             options: {importLoaders: 1},
                         },
-                        {loader: 'postcss-loader', options: {postcssOptions: postCssConfig}},
+                        {
+                            loader: 'postcss-loader',
+                            options: {postcssOptions: postCssConfig},
+                        },
                     ],
                 },
                 {
@@ -152,9 +168,7 @@ module.exports = ({
                 path: false,
                 timers: false,
             },
-            alias: {
-                storybookStories: '@vonaffenfels/slate-editor/storyLoader.js',
-            },
+            alias: {storybookStories: '@vonaffenfels/slate-editor/storyLoader.js'},
         },
         output: {
             filename: '[name].js',