@gem-sdk/pages 1.23.0 → 1.23.1

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

@@ -0,0 +1,736 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+const TOOLBAR_HOVER_HEIGHT = 24;
+const TOOLBAR_ACTIVE_HEIGHT = 32;
+const Toolbar = ()=>{
+    const currentComponentActive = react.useRef(null);
+    const isDragging = react.useRef(false);
+    const stopWatchReRenderComponent = react.useRef();
+    const isResizeSpacing = react.useRef(false);
+    /* Functions */ const changePositionToolbar = ({ state, $toolbar, $component })=>{
+        const $parentOverflow = findOverflowParent($component, $toolbar);
+        if ($parentOverflow) {
+            const rect = $component.getBoundingClientRect();
+            if (rect?.height <= 60) {
+                $toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
+            } else {
+                $toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
+            }
+        } else {
+            const rectComponent = $component.getBoundingClientRect();
+            if (rectComponent.top < TOOLBAR_ACTIVE_HEIGHT + 1) {
+                if (rectComponent?.height <= 60) {
+                    $toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
+                } else {
+                    $toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
+                }
+            }
+        }
+    };
+    const setHoverComponent = react.useCallback(({ $component, componentUid, focus, isThemeSection })=>{
+        if (!$component && !componentUid) return;
+        if (!$component) {
+            const $c = document.querySelector(`[data-uid="${componentUid}"]`);
+            if (!$c) return;
+            $component = $c;
+        }
+        if (!componentUid) {
+            const cUid = $component.getAttribute('data-uid');
+            if (!cUid) return;
+            componentUid = cUid;
+        }
+        const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
+        const $outline = getChildrenByAttrSelector($component, 'data-outline');
+        const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
+        const $btnAddBottom = getChildrenByAttrSelector($component, 'data-toolbar-add-bottom');
+        const $themeSectionStatus = getChildrenByAttrSelector($component, 'data-theme-section-status');
+        if (isThemeSection && $themeSectionStatus) {
+            $themeSectionStatus.setAttribute('data-theme-section-status-active', 'true');
+        }
+        if ($toolbar) {
+            $toolbar.removeAttribute('style');
+            $toolbar.setAttribute('data-toolbar-hover', 'true');
+            if (focus) {
+                $toolbar.setAttribute('data-toolbar-hover-focus', 'true');
+            }
+            changePositionToolbar({
+                $toolbar,
+                $component,
+                state: 'hover'
+            });
+        }
+        if ($outline) {
+            $outline.setAttribute('data-outline-hover', 'true');
+            if (isThemeSection) {
+                $outline.setAttribute('data-outline-overlay-theme-section', 'true');
+            }
+            if (focus) {
+                $outline.setAttribute('data-outline-hover-focus', 'true');
+            }
+        }
+        if ($btnAddTop) {
+            $btnAddTop.setAttribute('data-toolbar-add-hover', 'true');
+        }
+        if ($btnAddBottom) {
+            $btnAddBottom.setAttribute('data-toolbar-add-hover', 'true');
+        }
+    }, []);
+    const setHoverComponentParents = react.useCallback(({ $component, componentUid })=>{
+        if (!$component) {
+            const $c = document.querySelector(`[data-uid="${componentUid}"]`);
+            if (!$c) return;
+            $component = $c;
+        }
+        const $parents = getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])');
+        if ($parents.length) {
+            for (const $parent of $parents){
+                if ($parent) {
+                    setHoverComponent({
+                        $component: $parent
+                    });
+                }
+            }
+            changePositionToolbarParents({
+                $component,
+                $parents
+            });
+        }
+    }, [
+        setHoverComponent
+    ]);
+    const changePositionToolbarParents = ({ $component, $parents })=>{
+        if (!$component) return;
+        if (!$parents?.length) return;
+        const $currentToolbar = getChildrenByAttrSelector($component, 'data-toolbar-hover-focus');
+        if ($currentToolbar) {
+            const currentRect = $currentToolbar.getBoundingClientRect();
+            const isRevert = $currentToolbar.getAttribute('data-toolbar-hover-revert') ? true : false;
+            const isInside = $currentToolbar.getAttribute('data-toolbar-hover-inside') ? true : false;
+            let index = 1;
+            for (const $parent of $parents){
+                if ($parent) {
+                    const tag = $parent.getAttribute('data-component-tag');
+                    if (tag === 'Section') continue;
+                    const $toolbar = getChildrenByAttrSelector($parent, 'data-toolbar-hover');
+                    if ($toolbar) {
+                        // Ignore with toolbar active
+                        const isActive = $toolbar.getAttribute('data-toolbar-active');
+                        if (isActive) continue;
+                        // Start calc
+                        const parentRect = $toolbar.getBoundingClientRect();
+                        const checkRevert = isRevert || isInside;
+                        if (isOverParent({
+                            current: currentRect,
+                            parent: parentRect,
+                            index,
+                            revert: checkRevert
+                        })) {
+                            const parentStyle = getComputedStyle($toolbar);
+                            // parentStyle.top
+                            const diffTop = currentRect.top - parentRect.top;
+                            const diffLeft = currentRect.left - parentRect.left;
+                            let newTop = parseFloat(parentStyle.top) + diffTop - (TOOLBAR_HOVER_HEIGHT - 1) * index; // -1 border bottom
+                            if (checkRevert) {
+                                newTop = parseFloat(parentStyle.top) - diffTop + (TOOLBAR_HOVER_HEIGHT - 1) * index; // -1 border bottom
+                            }
+                            const newLeft = parseFloat(parentStyle.left) + diffLeft;
+                            $toolbar.setAttribute('style', `top: ${newTop}px;left: ${newLeft}px;`);
+                            index++;
+                        }
+                    }
+                }
+            }
+        }
+    };
+    const removeHoverOverlayComponent = react.useCallback(()=>{
+        const clearAttrs = [
+            'data-outline-overlay',
+            'data-outline-overlay-theme-section',
+            'data-theme-section-status-active'
+        ];
+        const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
+        if ($elms) {
+            clearAttrs.forEach((attr)=>{
+                $elms.forEach(($el)=>$el.removeAttribute(attr));
+            });
+        }
+    }, []);
+    const removeHoverComponent = react.useCallback(()=>{
+        const clearAttrs = [
+            'data-toolbar-hover-focus',
+            'data-toolbar-hover',
+            'data-outline-hover-focus',
+            'data-toolbar-hover-revert',
+            'data-toolbar-hover-inside',
+            'data-outline-hover',
+            'data-toolbar-add-hover'
+        ];
+        const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
+        if ($elms) {
+            clearAttrs.forEach((attr)=>{
+                $elms.forEach(($el)=>$el.removeAttribute(attr));
+            });
+        }
+        removeHoverOverlayComponent();
+    }, [
+        removeHoverOverlayComponent
+    ]);
+    const removeActiveComponent = react.useCallback(()=>{
+        currentComponentActive.current = null;
+        const clearAttrs = [
+            'data-toolbar-active',
+            'data-outline-active',
+            'data-toolbar-add-active',
+            'data-toolbar-active-revert',
+            'data-toolbar-active-inside',
+            'data-spacing-margin-bottom-active',
+            'data-toolbar-force-hover',
+            'data-outline-force-hover'
+        ];
+        const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
+        if ($elms) {
+            clearAttrs.forEach((attr)=>{
+                $elms.forEach(($el)=>$el.removeAttribute(attr));
+            });
+        }
+        setFocusTextEditor(false);
+        if (stopWatchReRenderComponent.current) stopWatchReRenderComponent.current();
+    }, []);
+    const watchComponentReRender = ($el, callback)=>{
+        // editor:component:render
+        const onComponentReRender = (e)=>{
+            const detail = e.detail;
+            if (detail?.componentUid == currentComponentActive.current?.componentUid) {
+                callback();
+            }
+        };
+        window.removeEventListener('editor:component:render', onComponentReRender);
+        window.addEventListener('editor:component:render', onComponentReRender);
+        const $images = $el.querySelectorAll('img');
+        if ($images?.length) {
+            $images.forEach(($img)=>{
+                $img.addEventListener('load', ()=>{
+                    callback();
+                });
+            });
+        }
+        stopWatchReRenderComponent.current = ()=>{
+            window.removeEventListener('editor:component:render', onComponentReRender);
+        };
+    };
+    const setActiveComponentSpacing = react.useCallback(({ $component })=>{
+        if (!$component) return;
+        const style = getComputedStyle($component);
+        const $spacing = getChildrenByAttrSelector($component, 'data-spacing');
+        const $marginBottom = ($spacing?.querySelector('[data-spacing-margin-bottom]')) || null;
+        if ($marginBottom) {
+            const $bg = $marginBottom.querySelector('[data-spacing-margin-bottom-bg]') || null;
+            const $drag = $marginBottom.querySelector('[data-spacing-margin-bottom-drag]') || null;
+            if ($bg && $drag) {
+                const value = style.marginBottom;
+                $bg.style.height = value;
+                $drag.style.top = value;
+                $marginBottom.setAttribute('data-spacing-margin-bottom-active', 'true');
+            }
+        }
+    }, []);
+    const setActiveComponentForceHoverSection = react.useCallback(($component, value)=>{
+        const $section = $component.closest('[data-toolbar-wrap][data-component-tag="Section"]');
+        if ($section) {
+            if (value) {
+                const $toolbar = getChildrenByAttrSelector($section, 'data-toolbar');
+                const $outline = getChildrenByAttrSelector($section, 'data-outline');
+                if ($toolbar) {
+                    $toolbar.setAttribute('data-toolbar-force-hover', 'true');
+                    changePositionToolbar({
+                        $toolbar,
+                        $component,
+                        state: 'hover'
+                    });
+                }
+                if ($outline) {
+                    $outline.setAttribute('data-outline-force-hover', 'true');
+                }
+            } else {
+                const $toolbar = getChildrenByAttrSelector($section, 'data-toolbar');
+                const $outline = getChildrenByAttrSelector($section, 'data-outline');
+                if ($toolbar) {
+                    $toolbar.removeAttribute('data-toolbar-force-hover');
+                }
+                if ($outline) {
+                    $outline.removeAttribute('data-outline-force-hover');
+                }
+            }
+        }
+    }, []);
+    const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
+        if (!componentUid) return;
+        let $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, timeAwait);
+        // check element fetch data: product, product list
+        if (!$component) {
+            const isLoading = document.querySelector(`.gp-loading-placeholder`);
+            if (!isLoading) {
+                return;
+            }
+            if (isLoading) {
+                // await element onload
+                $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, 15000);
+            }
+        }
+        if (!$component) {
+            return;
+        }
+        if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId) return;
+        if (componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || forceReActive) removeActiveComponent();
+        const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
+        const $outline = getChildrenByAttrSelector($component, 'data-outline');
+        const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
+        const $btnAddBottom = getChildrenByAttrSelector($component, 'data-toolbar-add-bottom');
+        if ($toolbar) {
+            currentComponentActive.current = {
+                componentUid,
+                productId
+            };
+            $toolbar.removeAttribute('style');
+            $toolbar.setAttribute('data-toolbar-active', 'true');
+            changePositionToolbar({
+                $toolbar,
+                $component,
+                state: 'active'
+            });
+        }
+        if ($outline) {
+            $outline.setAttribute('data-outline-active', 'true');
+        }
+        if ($btnAddTop) {
+            $btnAddTop.setAttribute('data-toolbar-add-active', 'true');
+        }
+        if ($btnAddBottom) {
+            $btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
+        }
+        // Active same element in product list
+        if (productId) {
+            const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
+            if ($relatedElements?.length) {
+                $relatedElements.forEach(($relatedElement)=>{
+                    const $outline = getChildrenByAttrSelector($relatedElement, 'data-outline');
+                    if ($outline) {
+                        $outline.setAttribute('data-outline-active', 'true');
+                    }
+                });
+            }
+        }
+        setActiveComponentSpacing({
+            $component
+        });
+        setActiveComponentForceHoverSection($component, true);
+        removeHoverComponent();
+        // Reactive when component re-render
+        watchComponentReRender($component, ()=>{
+            setActiveComponent({
+                componentUid,
+                productId,
+                timeAwait: 2000,
+                forceReActive: true
+            });
+        });
+    }, [
+        removeActiveComponent,
+        removeHoverComponent,
+        setActiveComponentForceHoverSection,
+        setActiveComponentSpacing
+    ]);
+    const setFocusTextEditor = async (value)=>{
+        if (!value) {
+            const $components = document.querySelectorAll('[data-outline-editor-inline-focus],[data-toolbar-editor-inline-focus],[data-spacing-hidden]');
+            if ($components.length) {
+                $components.forEach(($component)=>{
+                    if ($component) {
+                        $component.removeAttribute('data-toolbar-editor-inline-focus');
+                        $component.removeAttribute('data-outline-editor-inline-focus');
+                        $component.removeAttribute('data-spacing-hidden');
+                    }
+                });
+            }
+        } else {
+            if (currentComponentActive.current?.componentUid) {
+                const componentUid = currentComponentActive.current?.componentUid;
+                const productId = currentComponentActive.current?.productId;
+                const $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, 500);
+                if ($component) {
+                    const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
+                    const $outline = getChildrenByAttrSelector($component, 'data-outline');
+                    const $spacing = getChildrenByAttrSelector($component, 'data-spacing');
+                    if ($toolbar) {
+                        if (value) {
+                            $toolbar.setAttribute('data-toolbar-editor-inline-focus', 'true');
+                        }
+                    }
+                    if ($outline) {
+                        if (value) {
+                            $outline.setAttribute('data-outline-editor-inline-focus', 'true');
+                        }
+                    }
+                    if ($spacing) {
+                        if (value) {
+                            $spacing.setAttribute('data-spacing-hidden', 'true');
+                        }
+                    }
+                }
+            }
+        }
+    };
+    const hoverActiveThemeSection = react.useCallback(($target)=>{
+        const $themeSection = $target.closest('[data-theme-section]');
+        const $themeSectionUid = $themeSection?.getAttribute('data-uid');
+        const isActiveThemeSection = $themeSection && $themeSectionUid === currentComponentActive.current?.componentUid;
+        if (!isActiveThemeSection) return;
+        const $themeSectionStatus = getChildrenByAttrSelector($themeSection, 'data-theme-section-status');
+        if ($themeSectionStatus) {
+            $themeSectionStatus.setAttribute('data-theme-section-status-active', 'true');
+        }
+    }, []);
+    const setShowParents = async ({ value })=>{
+        if (!value) {
+            return;
+        }
+        const $component = await waitForElementToExist(`${currentComponentActive.current?.productId ? `[data-product-id="${currentComponentActive.current?.productId}"] ` : ''}[data-uid="${currentComponentActive.current?.componentUid}"]`, 500);
+        if ($component) {
+            const $parents = $component?.querySelectorAll('[data-toolbar-parent]');
+            if ($parents.length) {
+                const onHover = ($parent)=>{
+                    const uid = $parent.getAttribute('data-parent-uid');
+                    if (!uid) return;
+                    const $parentComponents = document.querySelectorAll(`[data-uid="${uid}"]`);
+                    if ($parentComponents.length) {
+                        $parentComponents.forEach(($parentComponent)=>{
+                            const $outline = getChildrenByAttrSelector($parentComponent, 'data-outline');
+                            if ($outline) {
+                                $outline.setAttribute('data-outline-force-hover', 'true');
+                                $outline.setAttribute('data-outline-force-overlay', 'true');
+                            }
+                        });
+                    }
+                };
+                const outHover = ($parent)=>{
+                    const uid = $parent.getAttribute('data-parent-uid');
+                    if (!uid) return;
+                    const $parentComponents = document.querySelectorAll(`[data-uid="${uid}"]`);
+                    if ($parentComponents.length) {
+                        $parentComponents.forEach(($parentComponent)=>{
+                            const $outline = getChildrenByAttrSelector($parentComponent, 'data-outline');
+                            if ($outline) {
+                                $outline.removeAttribute('data-outline-force-hover');
+                                $outline.removeAttribute('data-outline-force-overlay');
+                            }
+                        });
+                    }
+                };
+                const onClick = async ($parent)=>{
+                    const uid = $parent.getAttribute('data-parent-uid');
+                    if (!uid) return;
+                    const isElementInsideProduct = async ()=>{
+                        const $component = await waitForElementToExist(`[data-uid="${uid}"]`, 500);
+                        const $product = $component?.closest('[data-product-id]');
+                        const productId = $product?.getAttribute('data-product-id') || '';
+                        return productId ? true : false;
+                    };
+                    let productId = '';
+                    if (await isElementInsideProduct()) {
+                        productId = currentComponentActive.current?.productId || '';
+                    }
+                    const event = new CustomEvent('editor:toolbar:force-active-component', {
+                        bubbles: true,
+                        detail: {
+                            componentUid: uid,
+                            productId: productId
+                        }
+                    });
+                    outHover($parent);
+                    window.dispatchEvent(event);
+                };
+                $parents.forEach(($parent)=>{
+                    $parent.addEventListener('mouseover', ()=>onHover($parent));
+                    $parent.addEventListener('mouseout', ()=>outHover($parent));
+                    $parent.addEventListener('click', ()=>onClick($parent));
+                });
+            }
+        }
+    };
+    /* Event listener */ const onMouseMove = react.useCallback((e)=>{
+        if (isDragging.current) return;
+        if (isResizeSpacing.current) return;
+        const $target = e.target;
+        if (!$target) {
+            removeHoverOverlayComponent();
+            return;
+        }
+        const $toolbarHover = $target.closest('[data-toolbar-hover]');
+        if ($toolbarHover) {
+            // Disable feature overlay when hover to toolbar parents
+            return;
+        // removeHoverOverlayComponent(); // remove overlay old
+        // // Hover to toolbar is focus
+        // if ($toolbarHover?.getAttribute('data-toolbar-hover-focus')) return;
+        // const $component = $target.closest('[data-toolbar-wrap]');
+        // if (!$component) return;
+        // const $outline = getChildrenByAttrSelector($component, 'data-outline');
+        // if (!$outline) return;
+        // const isThemeSection = $component.getAttribute('data-theme-section');
+        // const outlineOverlay = isThemeSection
+        //   ? 'data-outline-overlay-theme-section'
+        //   : 'data-outline-overlay';
+        // $outline.setAttribute(outlineOverlay, 'true');
+        }
+        // Hover to other component
+        const $component = $target.closest('[data-toolbar-wrap]');
+        const componentUid = $component?.getAttribute('data-uid');
+        if (!$component || !componentUid || componentUid == 'ROOT') {
+            removeHoverComponent();
+            return;
+        }
+        const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
+        const $outline = getChildrenByAttrSelector($component, 'data-outline');
+        if ($outline) $outline.removeAttribute('data-outline-overlay');
+        if (!componentUid) return;
+        if (componentUid == 'ROOT') return;
+        if ($toolbar?.getAttribute('data-toolbar-hover-focus')) return;
+        if (!$toolbar?.getAttribute('data-toolbar-hover-focus')) removeHoverComponent();
+        hoverActiveThemeSection($target);
+        // Disable event when hover active component
+        if (componentUid == currentComponentActive.current?.componentUid) {
+            if (currentComponentActive.current.productId) {
+                const $product = $component.closest(`[data-product-id]`);
+                if ($product) {
+                    const productId = $product.getAttribute('data-product-id');
+                    if (productId == currentComponentActive.current.productId) {
+                        removeHoverComponent();
+                        return;
+                    }
+                }
+            }
+            const $themeSection = $target.closest('[data-theme-section]');
+            if ($themeSection) {
+                setHoverComponent({
+                    $component: $themeSection,
+                    focus: true,
+                    isThemeSection: true
+                });
+            } else {
+                return;
+            }
+        }
+        const $themeSection = $target.closest('[data-theme-section]');
+        if ($themeSection) {
+            setHoverComponent({
+                $component: $themeSection,
+                focus: true,
+                isThemeSection: true
+            });
+        } else {
+            setHoverComponent({
+                $component,
+                componentUid,
+                focus: true
+            });
+            setHoverComponentParents({
+                $component,
+                componentUid
+            });
+        }
+    }, [
+        hoverActiveThemeSection,
+        removeHoverComponent,
+        setHoverComponent,
+        setHoverComponentParents,
+        removeHoverOverlayComponent,
+        currentComponentActive
+    ]);
+    const onActiveComponent = react.useCallback((e)=>{
+        if (isDragging.current) return;
+        const detail = e.detail;
+        if (detail?.componentUid) {
+            setActiveComponent({
+                componentUid: detail.componentUid,
+                productId: detail.productId
+            });
+        } else {
+            removeActiveComponent();
+        }
+    }, [
+        setActiveComponent,
+        removeActiveComponent,
+        isDragging
+    ]);
+    const onFocusOutsidePreview = react.useCallback(()=>{
+        removeHoverComponent();
+    }, [
+        removeHoverComponent
+    ]);
+    const onIsDragging = react.useCallback((e)=>{
+        const detail = e.detail;
+        if (detail.value) {
+            removeHoverComponent();
+            removeActiveComponent();
+        }
+        isDragging.current = detail.value;
+    }, [
+        removeHoverComponent,
+        removeActiveComponent
+    ]);
+    const onIsEditingTextEditor = react.useCallback((e)=>{
+        const detail = e.detail;
+        if (detail.value) {
+            setFocusTextEditor(true);
+        } else {
+            setFocusTextEditor(false);
+        }
+    }, []);
+    const onShowParents = react.useCallback((e)=>{
+        if (isDragging.current) return;
+        const detail = e.detail;
+        setShowParents({
+            value: detail?.value || false
+        });
+    }, []);
+    const onResizeSpacing = react.useCallback((e)=>{
+        const detail = e.detail;
+        if (detail?.value) {
+            removeHoverComponent();
+            isResizeSpacing.current = true;
+        } else {
+            isResizeSpacing.current = false;
+        }
+    }, [
+        removeHoverComponent
+    ]);
+    /* Register event */ react.useEffect(()=>{
+        document.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('editor:active-component', onActiveComponent);
+        window.addEventListener('editor:focus-outside-preview', onFocusOutsidePreview);
+        window.addEventListener('editor:is-dragging', onIsDragging);
+        window.addEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
+        window.addEventListener('editor:toolbar:show-parents', onShowParents);
+        window.addEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
+        return ()=>{
+            document.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('editor:active-component', onActiveComponent);
+            window.removeEventListener('editor:is-dragging', onFocusOutsidePreview);
+            window.removeEventListener('editor:is-dragging', onIsDragging);
+            window.removeEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
+            window.removeEventListener('editor:toolbar:show-parents', onShowParents);
+            window.removeEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
+        };
+    }, [
+        onMouseMove,
+        onActiveComponent,
+        onFocusOutsidePreview,
+        onIsDragging,
+        onIsEditingTextEditor,
+        onShowParents,
+        onResizeSpacing
+    ]);
+    return null;
+};
+const getDOMElementParents = ($el, selector, limit)=>{
+    // Set up a parent array
+    const parents = [];
+    // Push each parent $elms to the array
+    while($el){
+        $el = $el.parentElement ?? undefined;
+        if ($el) {
+            if ($el.tagName === 'BODY' || $el.getAttribute('data-uid') === 'ROOT') {
+                break;
+            }
+            if (selector) {
+                if ($el.matches(selector)) {
+                    parents.push($el);
+                    if (limit && parents.length == limit) {
+                        return parents;
+                    }
+                }
+                continue;
+            }
+            parents.push($el);
+            if (limit && parents.length == limit) {
+                return parents;
+            }
+        }
+    }
+    // Return our parent array
+    return parents;
+};
+const getChildrenByAttrSelector = ($el, attrSelector)=>{
+    const childLen = $el.children.length;
+    if (childLen) {
+        for(let i = 0; i < childLen; i++){
+            const children = $el.children[i];
+            if (children) {
+                const is = children.getAttribute(attrSelector);
+                if (is) {
+                    return children;
+                }
+            }
+        }
+    }
+};
+const isOverParent = ({ current, parent, index, revert })=>{
+    for(let i = 0; i < index; i++){
+        let is = current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.top && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.top + parent.height || current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.top + parent.height && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.top;
+        if (revert) {
+            is = current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.bottom && current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.bottom - parent.height || current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.bottom - parent.height && current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.bottom;
+        }
+        if (is) return true;
+    }
+    return false;
+};
+const waitForElementToExist = (selector, timeout = 200)=>{
+    return new Promise((resolve)=>{
+        const intervalID = setInterval(()=>{
+            const el = document.querySelector(selector);
+            if (el) {
+                clearInterval(intervalID);
+                clearTimeout(timeoutID);
+                resolve(el);
+            }
+        }, 50);
+        const timeoutID = setTimeout(()=>{
+            clearInterval(intervalID);
+            clearTimeout(timeoutID);
+            resolve(null);
+        }, timeout);
+    });
+};
+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 isOverToolbarPosition = (el, parent)=>{
+    const rect = el.getBoundingClientRect();
+    const rectP = parent.getBoundingClientRect();
+    // 32px = toolbar active height
+    return rect.top - rectP.top < TOOLBAR_ACTIVE_HEIGHT + 1;
+};
+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;
+    }
+};
+var Toolbar$1 = /*#__PURE__*/ react.memo(Toolbar);
+
+exports.default = Toolbar$1;