@gem-sdk/core 1.22.21 → 1.22.31-new-feature.2

package/dist/cjs/components/theme-section/ThemeSectionTooltip.js

@@ -0,0 +1,95 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactTransitionGroup = require('react-transition-group');
+var core = require('@gem-sdk/core');
+
+const TRANSITION_DURATION = 350;
+const defaultStyles = {
+    transition: `all ${TRANSITION_DURATION}ms ease-out`,
+    opacity: 0
+};
+const transitions = {
+    entering: {
+        opacity: 1
+    },
+    entered: {
+        opacity: 1
+    },
+    exiting: {
+        opacity: 0
+    },
+    exited: {
+        opacity: 0
+    },
+    unmounted: {
+        opacity: 0
+    }
+};
+const ThemeSectionTooltip = ({ isShow, isLimit, isRender, children, onMouseEnter, onMouseLeave, onActions })=>{
+    const nodeRef = react.useRef(null);
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+            className: "theme-section-tooltip-wrapper",
+            onMouseEnter: onMouseEnter,
+            onMouseLeave: onMouseLeave,
+            children: [
+                children,
+                isRender && /*#__PURE__*/ jsxRuntime.jsx(reactTransitionGroup.Transition, {
+                    in: isShow,
+                    timeout: TRANSITION_DURATION,
+                    nodeRef: nodeRef,
+                    unmountOnExit: true,
+                    children: (state)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
+                            className: "theme-section-tooltip",
+                            ref: nodeRef,
+                            style: {
+                                ...defaultStyles,
+                                ...transitions[state]
+                            },
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                    className: "theme-section-tooltip__image",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx("img", {
+                                        src: "https://ucarecdn.com/6a9f408a-aa8c-434a-890b-81067a14aceb/-/format/auto/-/preview/1920x1920/-/quality/lighter/theme-section-illustration.png",
+                                        alt: ""
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                    className: "theme-section-tooltip__body",
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                            className: "theme-section-tooltip__body-title",
+                                            children: "Create once, use everywhere with Theme section"
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                            className: "theme-section-tooltip__body-desc",
+                                            children: "A global section that can be used on all your GemPages & pages."
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                    className: core.cls('theme-section-tooltip__action', {
+                                        'theme-section-tooltip__action-limit': isLimit
+                                    }),
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                            onClick: (e)=>onActions(e),
+                                            children: isLimit ? 'Upgrade to create Theme section' : 'Create theme section'
+                                        }),
+                                        isLimit && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                            className: "theme-section-tooltip__action-learn-more",
+                                            children: "Learn more about Theme section"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                })
+            ]
+        })
+    });
+};
+
+exports.ThemeSectionTooltip = ThemeSectionTooltip;

package/dist/cjs/contexts/BuilderPreviewContext.js

@@ -28,9 +28,10 @@ const root = {
     label: 'Root',
     childrens: []
 };
-const createBuilderPreviewProvider = (args)=>zustand.createStore((set, get)=>({
+const createBuilderPreviewProvider = (args, isEditThemeSection)=>zustand.createStore((set, get)=>({
             state: args,
             loaded: false,
+            isEditThemeSection: !!isEditThemeSection,
             addItem: (args)=>{
                 const { position, data } = args;
                 const state = get().state;
@@ -390,14 +391,33 @@ const createBuilderPreviewProvider = (args)=>zustand.createStore((set, get)=>({
                         ROOT: cloneDeep.cloneDeep(ROOT)
                     }
                 });
+            },
+            getParents: (id, limit)=>{
+                const state = get().state;
+                const parents = [];
+                let index = 0;
+                let currentId = id;
+                // eslint-disable-next-line no-constant-condition
+                while(true){
+                    if (limit && index >= limit) break;
+                    const parent = Object.entries(state).find(([, value])=>value.type !== 'section' && value.childrens?.includes(currentId));
+                    if (!parent) break;
+                    const [, parentItem] = parent;
+                    if (!parentItem) break;
+                    parents.push(parentItem);
+                    currentId = parentItem.uid;
+                    index++;
+                }
+                return parents;
             }
         }));
-const BuilderPreviewProvider = ({ children, state, lazy, ...passProps })=>{
+const BuilderPreviewProvider = ({ children, state, isEditThemeSection, lazy, ...passProps })=>{
     const Component = lazy ? react.Suspense : react.Fragment;
     const value = react.useMemo(()=>{
-        return createBuilderPreviewProvider(state);
+        return createBuilderPreviewProvider(state, isEditThemeSection);
     }, [
-        state
+        state,
+        isEditThemeSection
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx(Component, {
         children: /*#__PURE__*/ jsxRuntime.jsx(BuilderPreviewContext.Provider, {

package/dist/cjs/contexts/ShopContext.js

@@ -37,6 +37,16 @@ const createShopStoreProvider = (data)=>zustand.createStore((set)=>({
                     storefrontUrl: url,
                     storefrontToken: token
                 });
+            },
+            changeCreateThemeSectionCount: (count)=>{
+                set({
+                    createThemeSectionCount: count
+                });
+            },
+            changeShopPlan: (plan)=>{
+                set({
+                    plan
+                });
             }
         }));
 const ShopProvider = ({ children, addons, storeOption, queryOption, ...passProps })=>{

package/dist/cjs/helpers/filter-toolbar-preview.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var ComponentToolbarPreview = require('../components/ComponentToolbarPreview.js');
+
+const filterToolbarPreview = (children, keep = false)=>{
+    const arrChild = react.Children.toArray(children);
+    return arrChild.filter((child)=>!keep ? child?.type != ComponentToolbarPreview.ComponentToolbarPreview : child?.type == ComponentToolbarPreview.ComponentToolbarPreview);
+};
+
+exports.default = filterToolbarPreview;
+exports.filterToolbarPreview = filterToolbarPreview;

package/dist/cjs/helpers/is-empty-children.js

@@ -3,9 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
+var ComponentToolbarPreview = require('../components/ComponentToolbarPreview.js');
 
 const isEmptyChildren = (children)=>{
-    return react.Children.count(children) < 1 || !children;
+    let arrChild = react.Children.toArray(children);
+    arrChild = arrChild.filter((child)=>child?.type != ComponentToolbarPreview.ComponentToolbarPreview && react.isValidElement(child));
+    return react.Children.count(arrChild) < 1 || !children;
 };
 
 exports.default = isEmptyChildren;

package/dist/cjs/hooks/useProduct.js

@@ -3,10 +3,18 @@
 var react = require('react');
 var ProductContext = require('../contexts/ProductContext.js');
 var flattenConnection = require('../helpers/flatten-connection.js');
+require('react/jsx-runtime');
+require('zustand');
 require('swr');
+require('@gem-sdk/adapter-shopify');
+require('swr/mutation');
+require('vanilla-lazyload');
+require('./useCartUI.js');
+var variant = require('../helpers/variant.js');
+require('react-transition-group');
+require('@gem-sdk/core');
 var product = require('../helpers/product.js');
 require('../helpers/convert.js');
-var variant = require('../helpers/variant.js');
 
 const useUniqProductID = ()=>{
     return ProductContext.useProductStore((s)=>s.uiqueId);

package/dist/cjs/index.js

@@ -32,6 +32,7 @@ var GlobalEvent = require('./helpers/GlobalEvent.js');
 var isBrowser = require('./helpers/is-browser.js');
 var isSafari = require('./helpers/is-safari.js');
 var isEmptyChildren = require('./helpers/is-empty-children.js');
+var filterToolbarPreview = require('./helpers/filter-toolbar-preview.js');
 var makeStyle = require('./helpers/make-style.js');
 var normalizeBuilderData = require('./helpers/normalize-builder-data.js');
 var prefetchQueries = require('./helpers/prefetch-queries.js');
@@ -148,6 +149,7 @@ exports.globalEvent = GlobalEvent.default;
 exports.isBrowser = isBrowser.default;
 exports.isSafari = isSafari.default;
 exports.isEmptyChildren = isEmptyChildren.isEmptyChildren;
+exports.filterToolbarPreview = filterToolbarPreview.filterToolbarPreview;
 exports.makeAspectRatio = makeStyle.makeAspectRatio;
 exports.makeHeight = makeStyle.makeHeight;
 exports.makeLineClamp = makeStyle.makeLineClamp;

package/dist/esm/components/ComponentToolbarPreview.js

@@ -0,0 +1,360 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect } from 'react';
+import 'zustand';
+import { useBuilderPreviewStore } from '../contexts/BuilderPreviewContext.js';
+import 'swr';
+import '@gem-sdk/adapter-shopify';
+import 'swr/mutation';
+import 'vanilla-lazyload';
+import '../hooks/useCartUI.js';
+import { CreateThemeSection } from './theme-section/CreateThemeSection.js';
+import '../helpers/convert.js';
+
+const ComponentToolbarPreview = ({ ...props })=>{
+    const getParents = useBuilderPreviewStore((s)=>s.getParents);
+    const root = useBuilderPreviewStore((s)=>s.getItem('ROOT'));
+    const isThemeSection = props.isThemeSection;
+    const isEditThemeSection = useBuilderPreviewStore((s)=>s.isEditThemeSection);
+    const [activeAddSection, setActiveAddSection] = useState(null);
+    const [isShowParent, setIsShowParent] = useState(false);
+    const [isShowParentRevert, setIsShowParentRevert] = useState(false);
+    const [parents, setParents] = useState([]);
+    // Get parents
+    const onActiveComponent = 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') 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
+    ]);
+    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 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 rect = $toolbar.getBoundingClientRect();
+            if (rect.top < parents.length * 24) {
+                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();
+        const event = new CustomEvent('editor:toolbar:duplicate-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();
+        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;
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                "data-toolbar": true,
+                "data-toolbar-section": props.tag == 'Section',
+                "data-toolbar-theme-section": props.tag == 'Section' && !!isThemeSection,
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        "data-toolbar-show-parent": true,
+                        onClick: (e)=>onShowParent(e),
+                        "aria-hidden": "true",
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                "data-toolbar-icon-drag": true,
+                                children: /*#__PURE__*/ jsxs("svg", {
+                                    width: "16",
+                                    height: "16",
+                                    viewBox: "0 0 16 16",
+                                    fill: "none",
+                                    children: [
+                                        /*#__PURE__*/ 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__*/ 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__*/ 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__*/ 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__*/ 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__*/ 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__*/ jsx("div", {
+                                "data-toolbar-name": true,
+                                children: isThemeSection ? props.name : `Section ${getIndexSection() + 1}`
+                            }) : /*#__PURE__*/ jsx("div", {
+                                "data-toolbar-name": true,
+                                children: props.label
+                            }),
+                            props.tag !== 'Section' && parents.length > 0 && /*#__PURE__*/ jsx("div", {
+                                "data-toolbar-icon-parent": true,
+                                "data-toolbar-icon-parent-open": isShowParent,
+                                children: /*#__PURE__*/ jsx("svg", {
+                                    width: "16",
+                                    height: "16",
+                                    viewBox: "0 0 16 16",
+                                    fill: "none",
+                                    children: /*#__PURE__*/ 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)=>/*#__PURE__*/ jsxs("div", {
+                            "data-toolbar-parent": true,
+                            "data-parent-uid": parent.uid,
+                            style: {
+                                top: !isShowParentRevert ? `${-24 * (index + 1) + index}px` : `${31 + 24 * index - index}px`
+                            },
+                            children: [
+                                /*#__PURE__*/ jsx("div", {
+                                    "data-toolbar-icon-drag": true,
+                                    children: /*#__PURE__*/ jsxs("svg", {
+                                        width: "16",
+                                        height: "16",
+                                        viewBox: "0 0 16 16",
+                                        fill: "none",
+                                        children: [
+                                            /*#__PURE__*/ 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__*/ 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__*/ 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__*/ 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__*/ 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__*/ 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__*/ jsx("div", {
+                                    "data-toolbar-name": true,
+                                    children: parent.label
+                                })
+                            ]
+                        }, parent.uid)),
+                    /*#__PURE__*/ jsx(CreateThemeSection, {
+                        ...props
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        "data-toolbar-duplicate": true,
+                        onClick: (e)=>onDuplicate(e),
+                        "aria-hidden": "true",
+                        children: /*#__PURE__*/ jsx("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 16 16",
+                            fill: "none",
+                            children: /*#__PURE__*/ 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__*/ jsx("div", {
+                        "data-toolbar-delete": true,
+                        onClick: (e)=>onDelete(e),
+                        "aria-hidden": "true",
+                        children: /*#__PURE__*/ jsx("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 16 16",
+                            fill: "none",
+                            children: /*#__PURE__*/ 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"
+                            })
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                "data-outline": true,
+                "data-outline-section": props.tag == 'Section',
+                "data-outline-theme-section": props.tag == 'Section' && !!isThemeSection
+            }),
+            props.tag == 'Section' && !!isEditThemeSection && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        "data-toolbar-add-top": true,
+                        "data-toolbar-add-open": activeAddSection == 'above',
+                        onClick: (e)=>onAddSection(e, 'above'),
+                        "aria-hidden": "true",
+                        children: /*#__PURE__*/ jsx("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 16 16",
+                            fill: "none",
+                            children: /*#__PURE__*/ jsx("path", {
+                                d: "M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V7.5H1.5C1.22386 7.5 1 7.72386 1 8C1 8.27614 1.22386 8.5 1.5 8.5H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H8.5V1.5Z",
+                                fill: "currentColor"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        "data-toolbar-add-bottom": true,
+                        "data-toolbar-add-open": activeAddSection == 'below',
+                        onClick: (e)=>onAddSection(e, 'below'),
+                        "aria-hidden": "true",
+                        children: /*#__PURE__*/ jsx("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 16 16",
+                            fill: "none",
+                            children: /*#__PURE__*/ jsx("path", {
+                                d: "M8.5 1.5C8.5 1.22386 8.27614 1 8 1C7.72386 1 7.5 1.22386 7.5 1.5V7.5H1.5C1.22386 7.5 1 7.72386 1 8C1 8.27614 1.22386 8.5 1.5 8.5H7.5V14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5V8.5H14.5C14.7761 8.5 15 8.27614 15 8C15 7.72386 14.7761 7.5 14.5 7.5H8.5V1.5Z",
+                                fill: "currentColor"
+                            })
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                "data-spacing": true,
+                children: /*#__PURE__*/ jsxs("div", {
+                    "data-spacing-margin-bottom": true,
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            "data-spacing-margin-bottom-bg": true,
+                            children: /*#__PURE__*/ jsx("div", {
+                                "data-spacing-margin-bottom-value": true
+                            })
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            "data-spacing-margin-bottom-drag": true
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+
+export { ComponentToolbarPreview };

package/dist/esm/components/ComponentWrapperPreview.js

@@ -3,12 +3,16 @@ import { isValidElement } from 'react';
 import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';
 import { disableWrap } from './constant.js';
 import RenderCustomCode from './RenderCustomCode.js';
+import { ComponentToolbarPreview } from './ComponentToolbarPreview.js';
 
 const ComponentWrapperPreview = ({ children, ...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;
@@ -39,6 +43,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(props.advanced, props.tag);
     const advanced = props.advanced;
@@ -56,12 +67,18 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
                     uid: props.uid,
                     advanced: advanced
                 }),
-                /*#__PURE__*/ jsx(children.type, {
+                /*#__PURE__*/ jsxs(children.type, {
                     className: advanced?.cssClass,
                     ...children.props,
                     style,
                     builderAttrs,
-                    advanced
+                    advanced,
+                    children: [
+                        children.props['children'],
+                        /*#__PURE__*/ jsx(ComponentToolbarPreview, {
+                            ...props
+                        })
+                    ]
                 })
             ]
         });
@@ -73,11 +90,16 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
                 uid: props.uid,
                 advanced: advanced
             }),
-            /*#__PURE__*/ jsx("div", {
+            /*#__PURE__*/ jsxs("div", {
                 style: style,
                 className: `${props.uid} ${props.advanced?.cssClass ? props.advanced?.cssClass : ''}`,
                 ...builderAttrs,
-                children: children
+                children: [
+                    children,
+                    /*#__PURE__*/ jsx(ComponentToolbarPreview, {
+                        ...props
+                    })
+                ]
             })
         ]
     });