@gem-sdk/core 1.23.0-staging.24 → 1.23.0-staging.244

package/dist/cjs/components/ComponentToolbarPreview.js

@@ -0,0 +1,473 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('zustand');
+var BuilderPreviewContext = require('../contexts/BuilderPreviewContext.js');
+var ShopContext = require('../contexts/ShopContext.js');
+require('@gem-sdk/adapter-shopify');
+require('swr');
+require('swr/mutation');
+require('vanilla-lazyload');
+require('../hooks/useCartUI.js');
+var CreateThemeSection = require('./theme-section/CreateThemeSection.js');
+var Tooltip = require('./toolbar/Tooltip.js');
+var ThemeSectionStatus = require('./theme-section/ThemeSectionStatus.js');
+var Resize = require('./resize/Resize.js');
+require('../helpers/convert.js');
+
+const SECTION_LIMIT = 25;
+const notVisible = (el)=>{
+    const overflow = getComputedStyle(el).overflow;
+    return overflow !== 'visible';
+};
+const isSection = (el)=>{
+    const tag = el.getAttribute('data-component-tag');
+    return tag === 'Section';
+};
+const ComponentToolbarPreview = ({ ...props })=>{
+    const isThemeSection = props.isThemeSection;
+    const editingPageType = ShopContext.useShopStore((s)=>s.pageType);
+    const getParents = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getParents);
+    const root = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getItem('ROOT'));
+    const isThemeSectionEditor = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.isThemeSectionEditor);
+    const [activeAddSection, setActiveAddSection] = react.useState(null);
+    const [isShowParent, setIsShowParent] = react.useState(false);
+    const [isShowParentRevert, setIsShowParentRevert] = react.useState(false);
+    const [parents, setParents] = react.useState([]);
+    const isOverToolbarPosition = (el, parent)=>{
+        const parentLenght = parents.length;
+        const rect = el.getBoundingClientRect();
+        const rectP = parent.getBoundingClientRect();
+        // 36px = toolbar active height + 4 spaces
+        return rect.top - rectP.top < parentLenght * 36;
+    };
+    const findOverflowParent = (element, initEl)=>{
+        const thisEl = element;
+        const origEl = initEl || thisEl;
+        if (!thisEl) return;
+        if (isSection(thisEl)) return;
+        if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
+        if (thisEl.parentElement) {
+            return findOverflowParent(thisEl.parentElement, origEl);
+        } else {
+            return;
+        }
+    };
+    // Get parents
+    const onActiveComponent = react.useCallback((e)=>{
+        const detail = e.detail;
+        if (detail?.componentUid == props.uid) {
+            const currentParents = getParents(props.uid).filter((parent)=>{
+                if (parent.uid === 'ROOT') return false;
+                if (parent.tag === 'Section' && isThemeSectionEditor) return false;
+                if (parent.editorConfigs?.toolbar?.hide) return false;
+                if (parent.editorConfigs?.component?.noSetting) return false;
+                return true;
+            }).slice(0, 3);
+            setParents(currentParents);
+        } else {
+            setParents([]);
+            setIsShowParent(false);
+        }
+    }, [
+        setParents,
+        getParents,
+        props.uid,
+        isThemeSectionEditor
+    ]);
+    react.useEffect(()=>{
+        window.addEventListener('editor:active-component', onActiveComponent);
+        return ()=>{
+            window.removeEventListener('editor:active-component', onActiveComponent);
+        };
+    }, [
+        onActiveComponent
+    ]);
+    // End get parents
+    if (props.type === 'section') {
+        return null;
+    }
+    if (props.editorConfigs?.toolbar?.hide) {
+        return null;
+    }
+    const getSectionNumber = ()=>{
+        return root?.childrens?.length || 0;
+    };
+    const getIndexSection = ()=>{
+        if (props.tag !== 'Section') {
+            return -1;
+        }
+        if (root?.childrens?.length) {
+            return root.childrens.findIndex((sectionUid)=>sectionUid == props.uid);
+        }
+        return -1;
+    };
+    const onShowParent = (e)=>{
+        if (!parents.length) return;
+        const $target = (e?.target) || null;
+        const $toolbar = $target.closest('[data-toolbar-active]');
+        if (!$target || !$toolbar) return;
+        if (isShowParent) {
+            setIsShowParentRevert(false);
+            setIsShowParent(false);
+        } else {
+            const $parentOverflow = findOverflowParent($toolbar, $toolbar);
+            if ($parentOverflow) {
+                setIsShowParentRevert(true);
+            } else {
+                const rect = $toolbar.getBoundingClientRect();
+                if (rect.top < parents.length * 36) {
+                    setIsShowParentRevert(true);
+                } else {
+                    setIsShowParentRevert(false);
+                }
+            }
+            setIsShowParent(true);
+        }
+        const event = new CustomEvent('editor:toolbar:show-parents', {
+            bubbles: true,
+            detail: {
+                value: !isShowParent
+            }
+        });
+        window.dispatchEvent(event);
+    };
+    const onDelete = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        const event = new CustomEvent('editor:toolbar:delete-component', {
+            bubbles: true,
+            detail: {
+                componentUid: props.uid,
+                isThemeSection: isThemeSection
+            }
+        });
+        window.dispatchEvent(event);
+        return false;
+    };
+    const onDuplicate = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        if (getSectionNumber() >= SECTION_LIMIT && props.tag == 'Section') {
+            return false;
+        }
+        const event = new CustomEvent('editor:toolbar:duplicate-component', {
+            bubbles: true,
+            detail: {
+                componentUid: props.uid,
+                isThemeSection: isThemeSection
+            }
+        });
+        window.dispatchEvent(event);
+        return false;
+    };
+    const toolbarName = ()=>{
+        const tag = props.tag;
+        if (tag === 'IconListV2') {
+            return 'Item list';
+        }
+        if (tag === 'IconList') {
+            return 'Advanced list';
+        }
+        const name = props.customLabel || props.label;
+        return name;
+    };
+    const onZoomOut = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        const event = new CustomEvent('editor:toolbar:zoom-out-component', {
+            bubbles: true,
+            detail: {
+                componentUid: props.uid
+            }
+        });
+        window.dispatchEvent(event);
+        return false;
+    };
+    const closeAddSection = ()=>{
+        setActiveAddSection(null);
+        window.removeEventListener('editor:close-add-section-popup', closeAddSection);
+    };
+    const onAddSection = (e, position)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        if (getSectionNumber() >= SECTION_LIMIT) {
+            return false;
+        }
+        const $target = e.target;
+        if ($target) {
+            setActiveAddSection(position);
+            const rect = $target.getBoundingClientRect();
+            const event = new CustomEvent('editor:toolbar:add-section', {
+                bubbles: true,
+                detail: {
+                    componentUid: props.uid,
+                    position,
+                    top: rect.top + rect.height / 2
+                }
+            });
+            window.dispatchEvent(event);
+            window.addEventListener('editor:close-add-section-popup', closeAddSection);
+        }
+        return false;
+    };
+    const getSectionName = ()=>{
+        const checkRenamedSection = props.name && props.name === `Section ${props.uid}`;
+        if (getSectionNumber() >= SECTION_LIMIT - 5) {
+            return `${checkRenamedSection ? 'Section' : props?.name} ${getIndexSection() + 1}/${SECTION_LIMIT}`;
+        }
+        return checkRenamedSection ? `Section ${getIndexSection() + 1}` : props?.name;
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            !(props.tag == 'Section' && isThemeSectionEditor) && /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                "data-toolbar": true,
+                "data-toolbar-section": props.tag == 'Section',
+                "data-toolbar-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor,
+                "data-toolbar-limit": getIndexSection() >= SECTION_LIMIT,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        "data-toolbar-show-parent": true,
+                        onClick: (e)=>onShowParent(e),
+                        "aria-hidden": "true",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                "data-toolbar-icon-drag": true,
+                                children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
+                                    width: "16",
+                                    height: "16",
+                                    viewBox: "0 0 16 16",
+                                    fill: "none",
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                            d: "M5.5 4.5C6.32843 4.5 7 3.82843 7 3C7 2.17157 6.32843 1.5 5.5 1.5C4.67157 1.5 4 2.17157 4 3C4 3.82843 4.67157 4.5 5.5 4.5Z",
+                                            fill: "currentColor"
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                            d: "M5.5 9.5C6.32843 9.5 7 8.82843 7 8C7 7.17157 6.32843 6.5 5.5 6.5C4.67157 6.5 4 7.17157 4 8C4 8.82843 4.67157 9.5 5.5 9.5Z",
+                                            fill: "currentColor"
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                            d: "M7 13C7 13.8284 6.32843 14.5 5.5 14.5C4.67157 14.5 4 13.8284 4 13C4 12.1716 4.67157 11.5 5.5 11.5C6.32843 11.5 7 12.1716 7 13Z",
+                                            fill: "currentColor"
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                            d: "M10.5 4.5C11.3284 4.5 12 3.82843 12 3C12 2.17157 11.3284 1.5 10.5 1.5C9.67157 1.5 9 2.17157 9 3C9 3.82843 9.67157 4.5 10.5 4.5Z",
+                                            fill: "currentColor"
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                            d: "M12 8C12 8.82843 11.3284 9.5 10.5 9.5C9.67157 9.5 9 8.82843 9 8C9 7.17157 9.67157 6.5 10.5 6.5C11.3284 6.5 12 7.17157 12 8Z",
+                                            fill: "currentColor"
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                            d: "M10.5 14.5C11.3284 14.5 12 13.8284 12 13C12 12.1716 11.3284 11.5 10.5 11.5C9.67157 11.5 9 12.1716 9 13C9 13.8284 9.67157 14.5 10.5 14.5Z",
+                                            fill: "currentColor"
+                                        })
+                                    ]
+                                })
+                            }),
+                            props.tag == 'Section' ? /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                "data-toolbar-name": true,
+                                children: getSectionName()
+                            }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                "data-toolbar-name": true,
+                                children: toolbarName()
+                            }),
+                            props.tag !== 'Section' && parents.length > 0 && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                "data-toolbar-icon-parent": true,
+                                "data-toolbar-icon-parent-open": isShowParent,
+                                children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                                    width: "16",
+                                    height: "16",
+                                    viewBox: "0 0 16 16",
+                                    fill: "none",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                        d: "M5.65522 10C5.07265 10 4.7809 9.22865 5.19284 8.77753L7.53762 6.20974C7.79298 5.93009 8.20702 5.93009 8.46238 6.20974L10.8072 8.77754C11.2191 9.22866 10.9274 10 10.3448 10H5.65522Z",
+                                        fill: "currentColor"
+                                    })
+                                })
+                            })
+                        ]
+                    }),
+                    isShowParent && parents.map((parent, index)=>{
+                        // Update count columns of Row
+                        const parentLength = parent?.childrens?.length ?? 0;
+                        let parent_label = parent.label;
+                        if (parent.label === 'Row') {
+                            parent_label = parentLength <= 1 ? parent.label + ' ' + parentLength + ' col' : parent.label + ' ' + parentLength + ' cols';
+                        }
+                        return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                            "data-toolbar-parent": true,
+                            "data-parent-uid": parent.uid,
+                            "data-toolbar-theme-section": isThemeSectionEditor,
+                            "data-toolbar-parent-revert": isShowParentRevert,
+                            style: {
+                                top: !isShowParentRevert ? `${-36 * (index + 1)}px` // 32 height + 4 spacing
+                                 : `${36 * (index + 1)}px`
+                            },
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                    "data-toolbar-icon-drag": true,
+                                    children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
+                                        width: "16",
+                                        height: "16",
+                                        viewBox: "0 0 16 16",
+                                        fill: "none",
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                                d: "M5.5 4.5C6.32843 4.5 7 3.82843 7 3C7 2.17157 6.32843 1.5 5.5 1.5C4.67157 1.5 4 2.17157 4 3C4 3.82843 4.67157 4.5 5.5 4.5Z",
+                                                fill: "currentColor"
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                                d: "M5.5 9.5C6.32843 9.5 7 8.82843 7 8C7 7.17157 6.32843 6.5 5.5 6.5C4.67157 6.5 4 7.17157 4 8C4 8.82843 4.67157 9.5 5.5 9.5Z",
+                                                fill: "currentColor"
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                                d: "M7 13C7 13.8284 6.32843 14.5 5.5 14.5C4.67157 14.5 4 13.8284 4 13C4 12.1716 4.67157 11.5 5.5 11.5C6.32843 11.5 7 12.1716 7 13Z",
+                                                fill: "currentColor"
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                                d: "M10.5 4.5C11.3284 4.5 12 3.82843 12 3C12 2.17157 11.3284 1.5 10.5 1.5C9.67157 1.5 9 2.17157 9 3C9 3.82843 9.67157 4.5 10.5 4.5Z",
+                                                fill: "currentColor"
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                                d: "M12 8C12 8.82843 11.3284 9.5 10.5 9.5C9.67157 9.5 9 8.82843 9 8C9 7.17157 9.67157 6.5 10.5 6.5C11.3284 6.5 12 7.17157 12 8Z",
+                                                fill: "currentColor"
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                                d: "M10.5 14.5C11.3284 14.5 12 13.8284 12 13C12 12.1716 11.3284 11.5 10.5 11.5C9.67157 11.5 9 12.1716 9 13C9 13.8284 9.67157 14.5 10.5 14.5Z",
+                                                fill: "currentColor"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                    "data-toolbar-name": true,
+                                    children: parent_label
+                                })
+                            ]
+                        }, parent.uid);
+                    }),
+                    props.tag === 'Section' && !props.isThemeSection && editingPageType !== 'STATIC' && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(CreateThemeSection.CreateThemeSection, {
+                        ...props
+                    }),
+                    props.tag == 'Sticky' && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        "data-toolbar-zoom-out": true,
+                        onClick: (e)=>onZoomOut(e),
+                        "aria-hidden": "true",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 16 16",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                fillRule: "evenodd",
+                                clipRule: "evenodd",
+                                d: "M14.5 7C14.7761 7 15 6.77614 15 6.5C15 6.22386 14.7761 6 14.5 6L10.7072 6L14.8536 1.85355C15.0489 1.65829 15.0489 1.34171 14.8536 1.14645C14.6584 0.951186 14.3418 0.951185 14.1465 1.14645L10 5.29297L10 1.5C10 1.22386 9.77614 1 9.5 1C9.22386 1 9 1.22386 9 1.5L9 6.5C9 6.77614 9.22386 7 9.5 7L14.5 7ZM6 10.7073L6 14.5C6 14.7761 6.22386 15 6.5 15C6.77614 15 7 14.7761 7 14.5L7 9.5C7 9.22386 6.77614 9 6.5 9H1.5C1.22386 9 1 9.22386 1 9.5C1 9.77614 1.22386 10 1.5 10H5.29306L1.14662 14.1464C0.951353 14.3417 0.951353 14.6583 1.14662 14.8536C1.34188 15.0488 1.65846 15.0488 1.85372 14.8536L6 10.7073Z",
+                                fill: "currentColor"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
+                        enable: props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
+                        text: "Page has reached Shopify’s 25 section-limit",
+                        position: "bottom",
+                        "data-toolbar-duplicate": true,
+                        "data-toolbar-disable": props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
+                        onClick: (e)=>onDuplicate(e),
+                        "aria-hidden": "true",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 16 16",
+                            fill: "none",
+                            children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                fillRule: "evenodd",
+                                clipRule: "evenodd",
+                                d: "M6.08423 1.21289C5.53194 1.21289 5.08423 1.66061 5.08423 2.21289V3.78711H4.26172C3.43329 3.78711 2.76172 4.45868 2.76172 5.28711V13.2871C2.76172 14.1155 3.43329 14.7871 4.26172 14.7871H10.2617C11.0901 14.7871 11.7617 14.1155 11.7617 13.2871V12.4629H13.0842C13.6365 12.4629 14.0842 12.0152 14.0842 11.4629V2.21289C14.0842 1.66061 13.6365 1.21289 13.0842 1.21289H6.08423ZM10.7617 12.4629H6.08423C5.53194 12.4629 5.08423 12.0152 5.08423 11.4629V4.78711H4.26172C3.98558 4.78711 3.76172 5.01097 3.76172 5.28711V13.2871C3.76172 13.5633 3.98558 13.7871 4.26172 13.7871H10.2617C10.5379 13.7871 10.7617 13.5633 10.7617 13.2871V12.4629Z",
+                                fill: "currentColor"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        "data-toolbar-delete": true,
+                        onClick: (e)=>onDelete(e),
+                        "aria-hidden": "true",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 16 16",
+                            fill: "none",
+                            children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                fillRule: "evenodd",
+                                clipRule: "evenodd",
+                                d: "M11 2.88965V2.38965C11 1.56122 10.3284 0.889648 9.5 0.889648H6.5C5.67157 0.889648 5 1.56122 5 2.38965V2.88965H2C1.72386 2.88965 1.5 3.11351 1.5 3.38965C1.5 3.66579 1.72386 3.88965 2 3.88965H3.21997V13.1099C3.21997 14.2144 4.1154 15.1099 5.21997 15.1099H11.22C12.3245 15.1099 13.22 14.2144 13.22 13.1099V3.88965H14C14.2761 3.88965 14.5 3.66579 14.5 3.38965C14.5 3.11351 14.2761 2.88965 14 2.88965H11ZM6 2.88965H10V2.38965C10 2.11351 9.77614 1.88965 9.5 1.88965H6.5C6.22386 1.88965 6 2.11351 6 2.38965V2.88965ZM6.24976 6.13965C6.66397 6.13965 6.99976 6.47543 6.99976 6.88965V11.3896C6.99976 11.8039 6.66397 12.1396 6.24976 12.1396C5.83554 12.1396 5.49976 11.8039 5.49976 11.3896V6.88965C5.49976 6.47543 5.83554 6.13965 6.24976 6.13965ZM10.4998 6.88965C10.4998 6.47543 10.164 6.13965 9.74976 6.13965C9.33554 6.13965 8.99976 6.47543 8.99976 6.88965V11.3896C8.99976 11.8039 9.33554 12.1396 9.74976 12.1396C10.164 12.1396 10.4998 11.8039 10.4998 11.3896V6.88965Z",
+                                fill: "currentColor"
+                            })
+                        })
+                    })
+                ]
+            }),
+            editingPageType !== 'STATIC' && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(ThemeSectionStatus.ThemeSectionStatus, {
+                ...props
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                "data-outline": true,
+                "data-outline-section": props.tag == 'Section',
+                "data-outline-theme-section": props.tag == 'Section' && !!isThemeSection || isThemeSectionEditor,
+                "data-outline-limit": getIndexSection() >= SECTION_LIMIT
+            }),
+            props.tag == 'Section' && !isThemeSectionEditor && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
+                        enable: getSectionNumber() >= SECTION_LIMIT,
+                        text: "Page has reached Shopify’s 25 section-limit",
+                        position: "top",
+                        "data-toolbar-add-top": true,
+                        "data-toolbar-disable": getSectionNumber() >= SECTION_LIMIT,
+                        "data-toolbar-add-open": activeAddSection == 'above',
+                        onClick: (e)=>onAddSection(e, 'above'),
+                        "aria-hidden": "true",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 16 16",
+                            fill: "none",
+                            children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                d: "M8.45 3.95C8.45 3.70147 8.24853 3.5 8 3.5C7.75147 3.5 7.55 3.70147 7.55 3.95V7.55H3.95C3.70147 7.55 3.5 7.75147 3.5 8C3.5 8.24853 3.70147 8.45 3.95 8.45H7.55V12.05C7.55 12.2985 7.75147 12.5 8 12.5C8.24853 12.5 8.45 12.2985 8.45 12.05V8.45H12.05C12.2985 8.45 12.5 8.24853 12.5 8C12.5 7.75147 12.2985 7.55 12.05 7.55H8.45V3.95Z",
+                                fill: "#212121"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(Tooltip.default, {
+                        enable: getSectionNumber() >= SECTION_LIMIT,
+                        text: "Page has reached Shopify’s 25 section-limit",
+                        position: "top",
+                        "data-toolbar-add-bottom": true,
+                        "data-toolbar-disable": getSectionNumber() >= SECTION_LIMIT,
+                        "data-toolbar-add-open": activeAddSection == 'below',
+                        onClick: (e)=>onAddSection(e, 'below'),
+                        "aria-hidden": "true",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 16 16",
+                            fill: "none",
+                            children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                d: "M8.45 3.95C8.45 3.70147 8.24853 3.5 8 3.5C7.75147 3.5 7.55 3.70147 7.55 3.95V7.55H3.95C3.70147 7.55 3.5 7.75147 3.5 8C3.5 8.24853 3.70147 8.45 3.95 8.45H7.55V12.05C7.55 12.2985 7.75147 12.5 8 12.5C8.24853 12.5 8.45 12.2985 8.45 12.05V8.45H12.05C12.2985 8.45 12.5 8.24853 12.5 8C12.5 7.75147 12.2985 7.55 12.05 7.55H8.45V3.95Z",
+                                fill: "#212121"
+                            })
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(Resize.default, {
+                ...props
+            })
+        ]
+    });
+};
+
+exports.ComponentToolbarPreview = ComponentToolbarPreview;

package/dist/cjs/components/ComponentWrapper.js

@@ -7,8 +7,12 @@ var react = require('react');
 var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
 var constant = require('./constant.js');
 var RenderCustomCode = require('./RenderCustomCode.js');
+var useApplyAnimation = require('../hooks/animation/useApplyAnimation.js');
 
 const ComponentWrapper = ({ children, ...props })=>{
+    useApplyAnimation.default({
+        props
+    });
     if (props.type === 'section') return null;
     const style = composeAdvanceStyle.composeAdvanceStyle(props.advanced, props.tag);
     const advanced = props.advanced;
@@ -20,6 +24,7 @@ const ComponentWrapper = ({ children, ...props })=>{
                     advanced: advanced
                 }),
                 /*#__PURE__*/ jsxRuntime.jsx(children.type, {
+                    className: advanced?.cssClass,
                     ...children.props,
                     style,
                     advanced
@@ -35,7 +40,7 @@ const ComponentWrapper = ({ children, ...props })=>{
             }),
             /*#__PURE__*/ jsxRuntime.jsx("div", {
                 style: style,
-                className: `${props.uid}`,
+                className: `${props.uid} ${advanced?.cssClass}`,
                 children: children
             })
         ]

package/dist/cjs/components/ComponentWrapperPreview.js

@@ -7,12 +7,31 @@ var react = require('react');
 var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
 var constant = require('./constant.js');
 var RenderCustomCode = require('./RenderCustomCode.js');
+var ComponentToolbarPreview = require('./ComponentToolbarPreview.js');
+var useApplyAnimation = require('../hooks/animation/useApplyAnimation.js');
 
 const ComponentWrapperPreview = ({ children, ...props })=>{
+    react.useEffect(()=>{
+        const event = new CustomEvent('editor:component:render', {
+            bubbles: true,
+            detail: {
+                componentUid: props.uid
+            }
+        });
+        window.dispatchEvent(event);
+    }, [
+        props.uid
+    ]);
+    useApplyAnimation.default({
+        props
+    });
     if (props.type === 'section') {
         return null;
     }
     const customProps = {};
+    if (props.tag === 'Section' && props.isThemeSection) {
+        customProps['data-theme-section'] = true;
+    }
     // Build editor configs
     if (props.editorConfigs) {
         const editorConfigs = props.editorConfigs;
@@ -43,6 +62,13 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
         if (editorConfigs.slots?.children) {
             customProps['data-slots-children'] = true;
         }
+        if (!editorConfigs.toolbar?.hide) {
+            customProps['data-toolbar-wrap'] = true;
+        }
+    }
+    // Show toolbar wrapper
+    if (!props?.editorConfigs?.toolbar?.hide) {
+        customProps['data-toolbar-wrap'] = true;
     }
     const style = composeAdvanceStyle.composeAdvanceStyle(props.advanced, props.tag);
     const advanced = props.advanced;
@@ -60,12 +86,18 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
                     uid: props.uid,
                     advanced: advanced
                 }),
-                /*#__PURE__*/ jsxRuntime.jsx(children.type, {
+                /*#__PURE__*/ jsxRuntime.jsxs(children.type, {
                     className: advanced?.cssClass,
                     ...children.props,
                     style,
                     builderAttrs,
-                    advanced
+                    advanced,
+                    children: [
+                        children.props['children'],
+                        /*#__PURE__*/ jsxRuntime.jsx(ComponentToolbarPreview.ComponentToolbarPreview, {
+                            ...props
+                        })
+                    ]
                 })
             ]
         });
@@ -77,11 +109,25 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
                 uid: props.uid,
                 advanced: advanced
             }),
-            /*#__PURE__*/ jsxRuntime.jsx("div", {
-                style: style,
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                style: !constant.excludeApplyStyle.includes(props.tag) ? style : {
+                    '--mb': style?.['--mb'],
+                    '--mb-tablet': style?.['--mb-tablet'],
+                    '--mb-mobile': style?.['--mb-mobile']
+                },
                 className: `${props.uid} ${props.advanced?.cssClass ? props.advanced?.cssClass : ''}`,
                 ...builderAttrs,
-                children: children
+                children: [
+                    !constant.excludeApplyStyle.includes(props.tag) && children,
+                    /*#__PURE__*/ react.isValidElement(children) && constant.excludeApplyStyle.includes(props.tag) && /*#__PURE__*/ jsxRuntime.jsx(children.type, {
+                        ...children.props,
+                        style,
+                        advanced
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(ComponentToolbarPreview.ComponentToolbarPreview, {
+                        ...props
+                    })
+                ]
             })
         ]
     });