@gem-sdk/pages 1.13.0-next.9 → 1.13.8

package/dist/cjs/components/AddSectionImageToLayout.js

@@ -32,7 +32,7 @@ const defaultPadding = {
     tablet: 'var(--g-ct-p)',
     mobile: 'var(--g-ct-p)'
 };
-const AddSectionImageToLayout = ()=>{
+const AddSectionImageToLayout = ({ editorImageToLayout  })=>{
     const [link, setLink] = react.useState('');
     const [isInput, setIsInput] = react.useState(false);
     const onClick = (index)=>{

package/dist/cjs/components/ImageToLayout.js

@@ -134,10 +134,10 @@ const ImageToLayout = ({ editorImageToLayout  })=>{
                             })
                         }),
                         /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                            className: "image-to-layout-input-border max-w-[calc(100%_-_32px)]",
+                            className: "image-to-layout-input-border relative max-w-[calc(100%_-_32px)]",
                             children: [
                                 /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                                    className: "image-to-layout-input-wrapper  flex h-[60px] w-[600px] max-w-[calc(100%)] items-center rounded-[3px] border py-[10px] pl-3 pr-2",
+                                    className: "image-to-layout-input-wrapper  flex h-[60px] w-[600px] max-w-[calc(100%)] items-center rounded-[3px] py-[10px] pl-3 pr-2",
                                     children: [
                                         /*#__PURE__*/ jsxRuntime.jsxs("svg", {
                                             width: "54",
@@ -206,7 +206,7 @@ const ImageToLayout = ({ editorImageToLayout  })=>{
                                         }),
                                         /*#__PURE__*/ jsxRuntime.jsx("div", {
                                             id: "gp-img-to-layout-generate-btn",
-                                            className: "generate-image-to-layout-btn flex h-[40px] w-[94px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white",
+                                            className: `generate-image-to-layout-btn flex h-[40px] w-[94px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white ${!link ? 'btn-disable' : ''}`,
                                             children: "Generate"
                                         }),
                                         /*#__PURE__*/ jsxRuntime.jsx(PagesSuggestion.PagesSuggestion, {
@@ -218,7 +218,7 @@ const ImageToLayout = ({ editorImageToLayout  })=>{
                                     ]
                                 }),
                                 /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                                    className: "error-url mx-[-1px] mb-[-1px] hidden items-center bg-white pt-[8px]",
+                                    className: "error-url items-cente absolute bottom-[-24px] mx-[-1px] mb-[-1px] hidden",
                                     children: [
                                         /*#__PURE__*/ jsxRuntime.jsx("svg", {
                                             width: "16",
@@ -242,7 +242,7 @@ const ImageToLayout = ({ editorImageToLayout  })=>{
                             ]
                         }),
                         /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                            className: "mt-4 flex items-center text-xs",
+                            className: "mt-[24px] flex items-center text-xs",
                             children: [
                                 /*#__PURE__*/ jsxRuntime.jsx("span", {
                                     className: "font-normal text-[#676767]",

package/dist/cjs/components/PagesSuggestion.js

@@ -18,7 +18,7 @@ const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion  })=>{
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx("div", {
-                className: `z-9 gps-page-suggestion max-w-[calc(100%_+_2px)]  bg-white ${isOpen ? 'block' : 'hidden'} absolute left-[-1px] top-[-1px]`,
+                className: `z-9 gps-page-suggestion max-w-[calc(100%)]  bg-white ${isOpen ? 'block' : 'hidden'} absolute left-[0px] top-[0px]`,
                 children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
                     className: "h-full w-full overflow-hidden rounded-[3px]",
                     children: [
@@ -95,7 +95,7 @@ const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion  })=>{
                                     onClick: ()=>setOpenSuggestion(false),
                                     id: "gp-img-to-layout-generate-btn-modal",
                                     "aria-hidden": true,
-                                    className: "generate-image-to-layout-btn flex h-[40px] w-[94px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white",
+                                    className: `generate-image-to-layout-btn flex h-[40px] w-[94px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white ${!link ? 'btn-disable' : ''}`,
                                     children: "Generate"
                                 })
                             ]
@@ -116,6 +116,7 @@ const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion  })=>{
                                                     height: "32",
                                                     viewBox: "0 0 32 32",
                                                     fill: "none",
+                                                    className: "min-h-[32px] min-w-[32px]",
                                                     xmlns: "http://www.w3.org/2000/svg",
                                                     children: [
                                                         /*#__PURE__*/ jsxRuntime.jsx("path", {
@@ -133,14 +134,14 @@ const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion  })=>{
                                                     ]
                                                 }),
                                                 /*#__PURE__*/ jsxRuntime.jsx("span", {
-                                                    className: "item-link ml-[24px] whitespace-nowrap text-xs text-[#212121]",
+                                                    className: "item-link mobile:whitespace-pre-wrap ml-[24px] whitespace-nowrap text-xs text-[#212121]",
                                                     children: page
                                                 })
                                             ]
                                         }),
                                         /*#__PURE__*/ jsxRuntime.jsxs("div", {
                                             "data-url": page,
-                                            className: "gps-suggestion-item-btn invisible ml-[24px] flex h-[32px] cursor-pointer items-center rounded-[3px] px-2 hover:bg-black/10",
+                                            className: "gps-suggestion-item-btn mobile:ml-0 ml-[24px] hidden h-[32px] cursor-pointer items-center rounded-[3px] px-2 hover:bg-black/10",
                                             children: [
                                                 /*#__PURE__*/ jsxRuntime.jsxs("svg", {
                                                     width: "16",
@@ -174,7 +175,7 @@ const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion  })=>{
             /*#__PURE__*/ jsxRuntime.jsx("div", {
                 onClick: ()=>setOpenSuggestion(false),
                 "aria-hidden": true,
-                className: `fixed left-0 top-0 h-[100vh] w-[100vw] bg-transparent ${isOpen ? 'block' : 'hidden'}`
+                className: `gps-bg-fixed fixed left-0 top-0 h-[100vh] w-[100vw] bg-transparent ${isOpen ? 'block' : 'hidden'}`
             })
         ]
     });

package/dist/cjs/components/builder/Toolbox.js

@@ -5,12 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
 var react = require('react');
+var getStorefrontApi = require('../../libs/get-storefront-api.js');
 var googleFonts = require('../../libs/google-fonts.js');
 var genCss = require('../../libs/helpers/gen-css.js');
-var getStorefrontApi = require('../../libs/get-storefront-api.js');
-var shopifyCdnWithGoogleFonts = require('../../libs/shopify-cdn-with-google-fonts.js');
-var normalize = require('../../libs/helpers/normalize.js');
 var genFonts = require('../../libs/helpers/gen-fonts.js');
+var shopifyCdnWithGoogleFonts = require('../../libs/shopify-cdn-with-google-fonts.js');
 
 const globalStyleId = 'global-style';
 const globalFontId = 'google-font-builder';
@@ -20,6 +19,7 @@ const Toolbox = ()=>{
     const provider = core.useShopStore((s)=>s.provider);
     const changeStorefrontInfo = core.useShopStore((s)=>s.changeStorefrontInfo);
     const initState = core.useBuilderPreviewStore((s)=>s.initState);
+    const state = core.useBuilderPreviewStore((s)=>s.state);
     const initNormalizeState = core.useBuilderPreviewStore((s)=>s.forceChangeState);
     const changeItemPropByKey = core.useBuilderPreviewStore((s)=>s.changeItemPropByKey);
     const addItem = core.useBuilderPreviewStore((s)=>s.addItem);
@@ -29,7 +29,14 @@ const Toolbox = ()=>{
     const changeSwatches = core.useShopStore((s)=>s.changeSwatches);
     const changeLayoutSettings = core.useShopStore((s)=>s.changeLayoutSettings);
     const clearModal = core.useModalStore((s)=>s.clearModal);
-    const [fonts, setFonts] = react.useState([]);
+    const fonts = react.useMemo(()=>genFonts.getFontsFromDataBuilder(state), [
+        state
+    ]);
+    const customFontUrl = react.useMemo(()=>{
+        return googleFonts.createFontUrl(fonts);
+    }, [
+        fonts
+    ]);
     // Revalidate all query with key match query/
     const onRevalidateQuery = react.useCallback(()=>{
         matchMutate(/query\//, {
@@ -100,24 +107,10 @@ const Toolbox = ()=>{
         try {
             const detail = e.detail;
             if (detail.data) {
-                let dataBuilder = {};
                 if (detail.type === 'flat') {
                     initNormalizeState(detail.data);
-                    dataBuilder = detail.data;
                 } else {
                     initState(detail.data);
-                    dataBuilder = detail.data.reduceRight((prev, current)=>{
-                        const item = normalize.normalizeBuilderData(current);
-                        return {
-                            ...prev,
-                            ...item
-                        };
-                    }, {});
-                }
-                // Append link font to head
-                if (dataBuilder) {
-                    const fonts = genFonts.getFontsFromDataBuilder(dataBuilder);
-                    setFonts(fonts);
                 }
             }
         } catch  {
@@ -161,21 +154,11 @@ const Toolbox = ()=>{
                     data: detail.propValue,
                     group: detail.group
                 });
-                // Check link google font to <head>
-                if (detail.propValue?.custom) {
-                    const settings = {
-                        [detail.propName]: detail.propValue
-                    };
-                    const currentFonts = JSON.parse(JSON.stringify(fonts));
-                    genFonts.getFontFromGroupSetting(currentFonts, settings);
-                    setFonts(currentFonts);
-                }
             }
         } catch  {
         //
         }
-    }, // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
+    }, [
         changeItemPropByKey
     ]);
     // Move entity
@@ -225,30 +208,24 @@ const Toolbox = ()=>{
         changeLayoutSettings
     ]);
     react.useEffect(()=>{
-        if (fonts?.length) {
-            fonts.forEach((font)=>{
-                const fontUrl = googleFonts.createFontUrl([
-                    font
-                ]);
-                if (fontUrl) {
-                    const googleFont = document.querySelector(`.${fontElementSettingClassName}[data-font="${encodeURI(font.family)}"]`);
-                    if (googleFont) {
-                        if (googleFont.getAttribute('href') !== fontUrl) {
-                            googleFont.setAttribute('href', fontUrl);
-                        }
-                    } else {
-                        const link = document.createElement('link');
-                        link.className = fontElementSettingClassName;
-                        link.dataset.font = encodeURI(font.family);
-                        link.href = fontUrl;
-                        link.rel = 'stylesheet';
-                        document.head.appendChild(link);
-                    }
+        if (customFontUrl) {
+            const fontId = 'google-font';
+            const googleFont = document.querySelector(`.${fontElementSettingClassName}[data-font="${fontId}"]`);
+            if (googleFont) {
+                if (googleFont.getAttribute('href') !== customFontUrl) {
+                    googleFont.setAttribute('href', customFontUrl);
                 }
-            });
+            } else {
+                const link = document.createElement('link');
+                link.className = fontElementSettingClassName;
+                link.dataset.font = fontId;
+                link.href = customFontUrl;
+                link.rel = 'stylesheet';
+                document.head.appendChild(link);
+            }
         }
     }, [
-        fonts
+        customFontUrl
     ]);
     react.useEffect(()=>{
         window.addEventListener('update-shop-info', onChangeShopInfo);

package/dist/cjs/libs/google-fonts.js

@@ -11,14 +11,34 @@ async function getFontForUA(url, UA) {
         }
     }).then((res)=>res.text());
 }
+const composeFonts = (fonts)=>{
+    const uniqFonts = fonts.filter((font, index, arr)=>{
+        return index === arr.findIndex((t)=>t.family === font.family);
+    });
+    return uniqFonts.map((font)=>{
+        const variants = fonts.filter((t)=>t.family === font.family).reduce((acc, t)=>{
+            return [
+                ...acc,
+                ...t.variants
+            ];
+        }, []).filter((t, index, arr)=>{
+            return index === arr.findIndex((v)=>v === t);
+        });
+        return {
+            ...font,
+            variants
+        };
+    });
+};
 const createFontUrl = (fonts, option)=>{
     const googleFonts = fonts.filter((font)=>font.type === 'google' || !font.type);
     if (!googleFonts.length) return;
     const params = new URLSearchParams();
     const display = option?.display || 'swap';
-    const family = googleFonts.filter((font, index, arr)=>{
+    const uniqFonts = googleFonts.filter((font, index, arr)=>{
         return index === arr.findIndex((t)=>t.family === font.family);
-    }).map((font)=>{
+    });
+    const family = composeFonts(uniqFonts).map((font)=>{
         return `${font.family.replace(/ /g, '+')}:${font.variants.join(',')}`;
     }).join('|');
     params.append('family', family);
@@ -75,6 +95,7 @@ async function getFontStyleFromPageTemplate(pageTemplate) {
     return await Promise.all(fontStyle);
 }
 
+exports.composeFonts = composeFonts;
 exports.createFontUrl = createFontUrl;
 exports.getFontFromGlobalStyle = getFontFromGlobalStyle;
 exports.getFontStyleFromPageTemplate = getFontStyleFromPageTemplate;

package/dist/cjs/pages/builder.js

@@ -75,7 +75,9 @@ const BuilderPage = ({ components , seo , themeStyle , fontStyle , sectionData ,
                                     /*#__PURE__*/ jsxRuntime.jsx(ImageToLayout.default, {
                                         editorImageToLayout: editorImageToLayout || false
                                     }),
-                                    /*#__PURE__*/ jsxRuntime.jsx(AddSectionImageToLayout.default, {}),
+                                    /*#__PURE__*/ jsxRuntime.jsx(AddSectionImageToLayout.default, {
+                                        editorImageToLayout: editorImageToLayout || false
+                                    }),
                                     /*#__PURE__*/ jsxRuntime.jsx("div", {
                                         id: "visual-content"
                                     }),

package/dist/esm/components/AddSectionImageToLayout.js

@@ -28,7 +28,7 @@ const defaultPadding = {
     tablet: 'var(--g-ct-p)',
     mobile: 'var(--g-ct-p)'
 };
-const AddSectionImageToLayout = ()=>{
+const AddSectionImageToLayout = ({ editorImageToLayout  })=>{
     const [link, setLink] = useState('');
     const [isInput, setIsInput] = useState(false);
     const onClick = (index)=>{

package/dist/esm/components/ImageToLayout.js

@@ -130,10 +130,10 @@ const ImageToLayout = ({ editorImageToLayout  })=>{
                             })
                         }),
                         /*#__PURE__*/ jsxs("div", {
-                            className: "image-to-layout-input-border max-w-[calc(100%_-_32px)]",
+                            className: "image-to-layout-input-border relative max-w-[calc(100%_-_32px)]",
                             children: [
                                 /*#__PURE__*/ jsxs("div", {
-                                    className: "image-to-layout-input-wrapper  flex h-[60px] w-[600px] max-w-[calc(100%)] items-center rounded-[3px] border py-[10px] pl-3 pr-2",
+                                    className: "image-to-layout-input-wrapper  flex h-[60px] w-[600px] max-w-[calc(100%)] items-center rounded-[3px] py-[10px] pl-3 pr-2",
                                     children: [
                                         /*#__PURE__*/ jsxs("svg", {
                                             width: "54",
@@ -202,7 +202,7 @@ const ImageToLayout = ({ editorImageToLayout  })=>{
                                         }),
                                         /*#__PURE__*/ jsx("div", {
                                             id: "gp-img-to-layout-generate-btn",
-                                            className: "generate-image-to-layout-btn flex h-[40px] w-[94px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white",
+                                            className: `generate-image-to-layout-btn flex h-[40px] w-[94px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white ${!link ? 'btn-disable' : ''}`,
                                             children: "Generate"
                                         }),
                                         /*#__PURE__*/ jsx(PagesSuggestion, {
@@ -214,7 +214,7 @@ const ImageToLayout = ({ editorImageToLayout  })=>{
                                     ]
                                 }),
                                 /*#__PURE__*/ jsxs("div", {
-                                    className: "error-url mx-[-1px] mb-[-1px] hidden items-center bg-white pt-[8px]",
+                                    className: "error-url items-cente absolute bottom-[-24px] mx-[-1px] mb-[-1px] hidden",
                                     children: [
                                         /*#__PURE__*/ jsx("svg", {
                                             width: "16",
@@ -238,7 +238,7 @@ const ImageToLayout = ({ editorImageToLayout  })=>{
                             ]
                         }),
                         /*#__PURE__*/ jsxs("div", {
-                            className: "mt-4 flex items-center text-xs",
+                            className: "mt-[24px] flex items-center text-xs",
                             children: [
                                 /*#__PURE__*/ jsx("span", {
                                     className: "font-normal text-[#676767]",

package/dist/esm/components/PagesSuggestion.js

@@ -16,7 +16,7 @@ const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion  })=>{
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx("div", {
-                className: `z-9 gps-page-suggestion max-w-[calc(100%_+_2px)]  bg-white ${isOpen ? 'block' : 'hidden'} absolute left-[-1px] top-[-1px]`,
+                className: `z-9 gps-page-suggestion max-w-[calc(100%)]  bg-white ${isOpen ? 'block' : 'hidden'} absolute left-[0px] top-[0px]`,
                 children: /*#__PURE__*/ jsxs("div", {
                     className: "h-full w-full overflow-hidden rounded-[3px]",
                     children: [
@@ -93,7 +93,7 @@ const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion  })=>{
                                     onClick: ()=>setOpenSuggestion(false),
                                     id: "gp-img-to-layout-generate-btn-modal",
                                     "aria-hidden": true,
-                                    className: "generate-image-to-layout-btn flex h-[40px] w-[94px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white",
+                                    className: `generate-image-to-layout-btn flex h-[40px] w-[94px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white ${!link ? 'btn-disable' : ''}`,
                                     children: "Generate"
                                 })
                             ]
@@ -114,6 +114,7 @@ const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion  })=>{
                                                     height: "32",
                                                     viewBox: "0 0 32 32",
                                                     fill: "none",
+                                                    className: "min-h-[32px] min-w-[32px]",
                                                     xmlns: "http://www.w3.org/2000/svg",
                                                     children: [
                                                         /*#__PURE__*/ jsx("path", {
@@ -131,14 +132,14 @@ const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion  })=>{
                                                     ]
                                                 }),
                                                 /*#__PURE__*/ jsx("span", {
-                                                    className: "item-link ml-[24px] whitespace-nowrap text-xs text-[#212121]",
+                                                    className: "item-link mobile:whitespace-pre-wrap ml-[24px] whitespace-nowrap text-xs text-[#212121]",
                                                     children: page
                                                 })
                                             ]
                                         }),
                                         /*#__PURE__*/ jsxs("div", {
                                             "data-url": page,
-                                            className: "gps-suggestion-item-btn invisible ml-[24px] flex h-[32px] cursor-pointer items-center rounded-[3px] px-2 hover:bg-black/10",
+                                            className: "gps-suggestion-item-btn mobile:ml-0 ml-[24px] hidden h-[32px] cursor-pointer items-center rounded-[3px] px-2 hover:bg-black/10",
                                             children: [
                                                 /*#__PURE__*/ jsxs("svg", {
                                                     width: "16",
@@ -172,7 +173,7 @@ const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion  })=>{
             /*#__PURE__*/ jsx("div", {
                 onClick: ()=>setOpenSuggestion(false),
                 "aria-hidden": true,
-                className: `fixed left-0 top-0 h-[100vh] w-[100vw] bg-transparent ${isOpen ? 'block' : 'hidden'}`
+                className: `gps-bg-fixed fixed left-0 top-0 h-[100vh] w-[100vw] bg-transparent ${isOpen ? 'block' : 'hidden'}`
             })
         ]
     });

package/dist/esm/components/builder/Toolbox.js

@@ -1,12 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { useMatchMutate, useShopStore, useBuilderPreviewStore, useSectionStore, useModalStore } from '@gem-sdk/core';
-import { memo, useState, useCallback, useEffect } from 'react';
+import { memo, useMemo, useCallback, useEffect } from 'react';
+import { getStorefrontApi } from '../../libs/get-storefront-api.js';
 import { createFontUrl } from '../../libs/google-fonts.js';
 import { genCSS } from '../../libs/helpers/gen-css.js';
-import { getStorefrontApi } from '../../libs/get-storefront-api.js';
+import { getFontsFromDataBuilder } from '../../libs/helpers/gen-fonts.js';
 import { shopifyCdnWithGoogleFonts } from '../../libs/shopify-cdn-with-google-fonts.js';
-import { normalizeBuilderData } from '../../libs/helpers/normalize.js';
-import { getFontsFromDataBuilder, getFontFromGroupSetting } from '../../libs/helpers/gen-fonts.js';
 
 const globalStyleId = 'global-style';
 const globalFontId = 'google-font-builder';
@@ -16,6 +15,7 @@ const Toolbox = ()=>{
     const provider = useShopStore((s)=>s.provider);
     const changeStorefrontInfo = useShopStore((s)=>s.changeStorefrontInfo);
     const initState = useBuilderPreviewStore((s)=>s.initState);
+    const state = useBuilderPreviewStore((s)=>s.state);
     const initNormalizeState = useBuilderPreviewStore((s)=>s.forceChangeState);
     const changeItemPropByKey = useBuilderPreviewStore((s)=>s.changeItemPropByKey);
     const addItem = useBuilderPreviewStore((s)=>s.addItem);
@@ -25,7 +25,14 @@ const Toolbox = ()=>{
     const changeSwatches = useShopStore((s)=>s.changeSwatches);
     const changeLayoutSettings = useShopStore((s)=>s.changeLayoutSettings);
     const clearModal = useModalStore((s)=>s.clearModal);
-    const [fonts, setFonts] = useState([]);
+    const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
+        state
+    ]);
+    const customFontUrl = useMemo(()=>{
+        return createFontUrl(fonts);
+    }, [
+        fonts
+    ]);
     // Revalidate all query with key match query/
     const onRevalidateQuery = useCallback(()=>{
         matchMutate(/query\//, {
@@ -96,24 +103,10 @@ const Toolbox = ()=>{
         try {
             const detail = e.detail;
             if (detail.data) {
-                let dataBuilder = {};
                 if (detail.type === 'flat') {
                     initNormalizeState(detail.data);
-                    dataBuilder = detail.data;
                 } else {
                     initState(detail.data);
-                    dataBuilder = detail.data.reduceRight((prev, current)=>{
-                        const item = normalizeBuilderData(current);
-                        return {
-                            ...prev,
-                            ...item
-                        };
-                    }, {});
-                }
-                // Append link font to head
-                if (dataBuilder) {
-                    const fonts = getFontsFromDataBuilder(dataBuilder);
-                    setFonts(fonts);
                 }
             }
         } catch  {
@@ -157,21 +150,11 @@ const Toolbox = ()=>{
                     data: detail.propValue,
                     group: detail.group
                 });
-                // Check link google font to <head>
-                if (detail.propValue?.custom) {
-                    const settings = {
-                        [detail.propName]: detail.propValue
-                    };
-                    const currentFonts = JSON.parse(JSON.stringify(fonts));
-                    getFontFromGroupSetting(currentFonts, settings);
-                    setFonts(currentFonts);
-                }
             }
         } catch  {
         //
         }
-    }, // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
+    }, [
         changeItemPropByKey
     ]);
     // Move entity
@@ -221,30 +204,24 @@ const Toolbox = ()=>{
         changeLayoutSettings
     ]);
     useEffect(()=>{
-        if (fonts?.length) {
-            fonts.forEach((font)=>{
-                const fontUrl = createFontUrl([
-                    font
-                ]);
-                if (fontUrl) {
-                    const googleFont = document.querySelector(`.${fontElementSettingClassName}[data-font="${encodeURI(font.family)}"]`);
-                    if (googleFont) {
-                        if (googleFont.getAttribute('href') !== fontUrl) {
-                            googleFont.setAttribute('href', fontUrl);
-                        }
-                    } else {
-                        const link = document.createElement('link');
-                        link.className = fontElementSettingClassName;
-                        link.dataset.font = encodeURI(font.family);
-                        link.href = fontUrl;
-                        link.rel = 'stylesheet';
-                        document.head.appendChild(link);
-                    }
+        if (customFontUrl) {
+            const fontId = 'google-font';
+            const googleFont = document.querySelector(`.${fontElementSettingClassName}[data-font="${fontId}"]`);
+            if (googleFont) {
+                if (googleFont.getAttribute('href') !== customFontUrl) {
+                    googleFont.setAttribute('href', customFontUrl);
                 }
-            });
+            } else {
+                const link = document.createElement('link');
+                link.className = fontElementSettingClassName;
+                link.dataset.font = fontId;
+                link.href = customFontUrl;
+                link.rel = 'stylesheet';
+                document.head.appendChild(link);
+            }
         }
     }, [
-        fonts
+        customFontUrl
     ]);
     useEffect(()=>{
         window.addEventListener('update-shop-info', onChangeShopInfo);

package/dist/esm/libs/google-fonts.js

@@ -9,14 +9,34 @@ async function getFontForUA(url, UA) {
         }
     }).then((res)=>res.text());
 }
+const composeFonts = (fonts)=>{
+    const uniqFonts = fonts.filter((font, index, arr)=>{
+        return index === arr.findIndex((t)=>t.family === font.family);
+    });
+    return uniqFonts.map((font)=>{
+        const variants = fonts.filter((t)=>t.family === font.family).reduce((acc, t)=>{
+            return [
+                ...acc,
+                ...t.variants
+            ];
+        }, []).filter((t, index, arr)=>{
+            return index === arr.findIndex((v)=>v === t);
+        });
+        return {
+            ...font,
+            variants
+        };
+    });
+};
 const createFontUrl = (fonts, option)=>{
     const googleFonts = fonts.filter((font)=>font.type === 'google' || !font.type);
     if (!googleFonts.length) return;
     const params = new URLSearchParams();
     const display = option?.display || 'swap';
-    const family = googleFonts.filter((font, index, arr)=>{
+    const uniqFonts = googleFonts.filter((font, index, arr)=>{
         return index === arr.findIndex((t)=>t.family === font.family);
-    }).map((font)=>{
+    });
+    const family = composeFonts(uniqFonts).map((font)=>{
         return `${font.family.replace(/ /g, '+')}:${font.variants.join(',')}`;
     }).join('|');
     params.append('family', family);
@@ -73,4 +93,4 @@ async function getFontStyleFromPageTemplate(pageTemplate) {
     return await Promise.all(fontStyle);
 }
 
-export { createFontUrl, getFontFromGlobalStyle, getFontStyleFromPageTemplate, getFonts };
+export { composeFonts, createFontUrl, getFontFromGlobalStyle, getFontStyleFromPageTemplate, getFonts };

package/dist/esm/pages/builder.js

@@ -73,7 +73,9 @@ const BuilderPage = ({ components , seo , themeStyle , fontStyle , sectionData ,
                                     /*#__PURE__*/ jsx(ImageToLayout, {
                                         editorImageToLayout: editorImageToLayout || false
                                     }),
-                                    /*#__PURE__*/ jsx(AddSectionImageToLayout, {}),
+                                    /*#__PURE__*/ jsx(AddSectionImageToLayout, {
+                                        editorImageToLayout: editorImageToLayout || false
+                                    }),
                                     /*#__PURE__*/ jsx("div", {
                                         id: "visual-content"
                                     }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/pages",
-  "version": "1.13.0-next.9",
+  "version": "1.13.8",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",