@innovastudio/contentbox 1.6.168 → 1.6.171

package/public/contentbox/contentbox.esm.js

@@ -2395,16 +2395,25 @@ class SideBar {
         const imageObserver = new IntersectionObserver((entries, imgObserver) => {
             entries.forEach((entry) => {
                 if (entry.isIntersecting) {
-                    const lazyImage = entry.target
-                    // console.log("lazy loading ", lazyImage)
-                    lazyImage.src = lazyImage.dataset.src
-                    lazyImage.classList.remove("lzy-img");
-                    imgObserver.unobserve(lazyImage);
+                    try {
+                        const lazyImage = entry.target
+                        // console.log("lazy loading ", lazyImage)
+                        lazyImage.src = lazyImage.dataset.src
+                        lazyImage.classList.remove("lzy-img");
+                        imgObserver.unobserve(lazyImage);
+                    } catch(e) {
+                        console.error('Image loading error:', e);
+                        imgObserver.unobserve(entry.target);
+                    }
                 }
             })
+        }, {
+            rootMargin: '50px'
         });
         
-        const makeid = () => { //http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript
+        let renderTimeout = null;
+
+        const makeid = () => {
             var text = "";
             var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
             for (var i = 0; i < 2; i++)
@@ -2588,7 +2597,17 @@ class SideBar {
                 });
             });
         }
-        
+
+        // Setup single event listener for all design buttons (prevents memory leak)
+        const designList = document.querySelector('.is-design-list');
+        designList.addEventListener('click', (e) => {
+            const btn = e.target.closest('button[data-id]');
+            if (btn) {
+                const designid = btn.getAttribute('data-id');
+                addDesign(designid);
+            }
+        });
+
         const showDesigns = (catId, designId) => {
 
             if(template_list.length>0) {
@@ -2597,8 +2616,16 @@ class SideBar {
             }
         
             const designList = document.querySelector('.is-design-list');
+    
+            // Unobserve old images to prevent memory leak
+            const oldImages = designList.querySelectorAll('img.lzy-img');
+            oldImages.forEach(img => imageObserver.unobserve(img));
+
+            // Cancel any pending render
+            if (renderTimeout) clearTimeout(renderTimeout);
+
             designList.style.opacity = 0;
-            setTimeout(()=>{
+            renderTimeout = setTimeout(()=>{
                 designList.innerHTML = '';
                 designList.style.opacity = 1;
                 designList.scrollTop = 0;
@@ -2637,54 +2664,24 @@ class SideBar {
                                 if(slider==='glide') {
                                     if(item.type === 'glide') {
                                         designList.insertAdjacentHTML('beforeend', html);
-                                        const btn = designList.querySelector('[data-id="' + item.id + '"]');
-                                        btn.addEventListener('click', (e)=>{
-                                            const designid = btn.getAttribute('data-id');
-                                            addDesign(designid);
-                                        });
                                     } 
                                 } else if(slider==='slick') {
                                     if(item.type === 'slick') {
                                         designList.insertAdjacentHTML('beforeend', html);
-                                        const btn = designList.querySelector('[data-id="' + item.id + '"]');
-                                        btn.addEventListener('click', (e)=>{
-                                            const designid = btn.getAttribute('data-id');
-                                            addDesign(designid);
-                                        });
                                     } 
                                 } else if(slider==='all') {
                                     designList.insertAdjacentHTML('beforeend', html);
-                                    const btn = designList.querySelector('[data-id="' + item.id + '"]');
-                                    btn.addEventListener('click', (e)=>{
-                                        const designid = btn.getAttribute('data-id');
-                                        addDesign(designid);
-                                    });
                                 } 
                             } else if(item.type === 'navbar' ) {
                                 if(navbar) {
                                     designList.insertAdjacentHTML('beforeend', html);
-                                    const btn = designList.querySelector('[data-id="' + item.id + '"]');
-                                    btn.addEventListener('click', (e)=>{
-                                        const designid = btn.getAttribute('data-id');
-                                        addDesign(designid);
-                                    });
                                 }
                             } else if(item.type === 'canvas' ) {
                                 if(canvas) {
                                     designList.insertAdjacentHTML('beforeend', html);
-                                    const btn = designList.querySelector('[data-id="' + item.id + '"]');
-                                    btn.addEventListener('click', (e)=>{
-                                        const designid = btn.getAttribute('data-id');
-                                        addDesign(designid);
-                                    });
                                 }
                             } else {
                                 designList.insertAdjacentHTML('beforeend', html);
-                                const btn = designList.querySelector('[data-id="' + item.id + '"]');
-                                btn.addEventListener('click', (e)=>{
-                                    const designid = btn.getAttribute('data-id');
-                                    addDesign(designid);
-                                });
                             }
                         }`;
     html += `
@@ -8807,6 +8804,7 @@ class Text {
     // Get element block (eg. h1, h2, p, div,  ..) that is under the column (column's child)
     let activeColumn = this.builder.controlpanel.activeColumn;
     let elm = this.getElm();
+    if (!activeColumn) activeColumn = elm.parentNode;
     let children = this.elementChildren(activeColumn);
     let elmBlock;
     children.forEach(item => {
@@ -8870,15 +8868,30 @@ class Text {
     activeColumn.querySelectorAll('.grow').forEach(elm => elm.classList.remove('grow'));
   }
 
+  cleanColorClasses(elm) {
+    elm.classList.remove('text-gray-50');
+    elm.classList.remove('text-gray-100');
+    elm.classList.remove('text-gray-200');
+    elm.classList.remove('text-gray-300');
+    elm.classList.remove('text-gray-400');
+    elm.classList.remove('text-gray-500');
+    elm.classList.remove('text-gray-600');
+    elm.classList.remove('text-gray-700');
+    elm.classList.remove('text-gray-800');
+    elm.classList.remove('text-gray-900');
+  }
+
   setTextColor(color) {
     let elm = this.getElm();
     const text = this.getSelectedText();
 
     if (text.trim() === '') {
       elm.style.color = color;
+      this.cleanColorClasses(elm);
     } else {
       if (elm.innerText === text) {
         elm.style.color = color;
+        this.cleanColorClasses(elm);
       } else {
         this.builder.doc.execCommand('ForeColor', false, color); //Cleanup FONTs
 
@@ -8913,48 +8926,55 @@ class Text {
 
   setAction(command, onFinish) {
     let activeColumn = this.builder.controlpanel.activeColumn;
-    let spans = activeColumn.querySelectorAll('span');
-    Array.prototype.forEach.call(spans, span => {
-      span.setAttribute('data-keep', '1');
-      if (span.style.cssText) span.setAttribute('data-style', span.style.cssText);
-    });
+
+    if (activeColumn) {
+      let spans = activeColumn.querySelectorAll('span');
+      Array.prototype.forEach.call(spans, span => {
+        span.setAttribute('data-keep', '1');
+        if (span.style.cssText) span.setAttribute('data-style', span.style.cssText);
+      });
+    }
+
     setTimeout(() => {
       this.builder.doc.execCommand(command, false, null);
       activeColumn = this.builder.controlpanel.activeColumn;
-      spans = activeColumn.querySelectorAll('span');
-      Array.prototype.forEach.call(spans, span => {
-        let attr = span.getAttribute('data-keep');
 
-        if (attr) {
-          // span.removeAttribute('data-keep');
-          let cssText = span.getAttribute('data-style');
-          if (cssText) span.style.cssText = cssText;
-          span.removeAttribute('data-style');
-        }
-      });
-      spans = activeColumn.querySelectorAll('span');
-      Array.prototype.forEach.call(spans, span => {
-        let attr = span.getAttribute('data-keep');
+      if (activeColumn) {
+        let spans = activeColumn.querySelectorAll('span');
+        Array.prototype.forEach.call(spans, span => {
+          let attr = span.getAttribute('data-keep');
 
-        if (!attr) {
-          span.outerHTML = span.innerHTML;
-        }
-      });
-      spans = activeColumn.querySelectorAll('span');
-      Array.prototype.forEach.call(spans, span => {
-        let attr = span.getAttribute('data-keep');
+          if (attr) {
+            // span.removeAttribute('data-keep');
+            let cssText = span.getAttribute('data-style');
+            if (cssText) span.style.cssText = cssText;
+            span.removeAttribute('data-style');
+          }
+        });
+        spans = activeColumn.querySelectorAll('span');
+        Array.prototype.forEach.call(spans, span => {
+          let attr = span.getAttribute('data-keep');
 
-        if (attr) {
-          span.removeAttribute('data-keep');
-        }
-      }); // clean
-      // let elms = activeColumn.querySelectorAll('ul,p'); 
-      // Array.prototype.forEach.call(elms, (elm) => {
-      //     let text = elm.innerHTML.trim();
-      //     if(text==='') {
-      //         elm.parentNode.removeChild(elm);
-      //     }
-      // });
+          if (!attr) {
+            span.outerHTML = span.innerHTML;
+          }
+        });
+        spans = activeColumn.querySelectorAll('span');
+        Array.prototype.forEach.call(spans, span => {
+          let attr = span.getAttribute('data-keep');
+
+          if (attr) {
+            span.removeAttribute('data-keep');
+          }
+        }); // clean
+        // let elms = activeColumn.querySelectorAll('ul,p'); 
+        // Array.prototype.forEach.call(elms, (elm) => {
+        //     let text = elm.innerHTML.trim();
+        //     if(text==='') {
+        //         elm.parentNode.removeChild(elm);
+        //     }
+        // });
+      }
 
       let elm = this.getElm();
       const ul = elm.closest('ul,ol');
@@ -10321,12 +10341,17 @@ class Text {
     const anchorNode = selection.anchorNode;
     if (!anchorNode) return false;
     let container = anchorNode.nodeType !== Node.TEXT_NODE && anchorNode.nodeType !== Node.COMMENT_NODE ? anchorNode : anchorNode.parentElement;
+
+    if (container && container.closest('.is-overlay') && this.builder.controlpanel.activeElement && !container.closest('[data-cb-type]')) {
+      return this.builder.controlpanel.activeElement; // container => is-overlay when drag & drop bloxk
+    }
     /*
     There is a strange behavior that when clicking an icon i.icon and then clicking its div wrapper, 
     the window.getSelection stays on the icon, not the div.
     To fix this, we check icon selection and compare it with the actual clicked element
     */
 
+
     if (container && container.classList.contains('icon') && this.builder.editor.inspectedElement) {
       if (container !== this.builder.editor.inspectedElement) {
         container = this.builder.editor.inspectedElement;
@@ -11161,14 +11186,16 @@ class PanelText {
     this.panel.querySelectorAll('[data-justify]').forEach(elm => elm.classList.remove('on'));
     let activeColumn = this.builder.controlpanel.activeColumn;
 
-    if (activeColumn.classList.contains('justify-start')) {
-      this.panel.querySelector('[data-justify=justify-start]').classList.add('on');
-    } else if (activeColumn.classList.contains('justify-center')) {
-      this.panel.querySelector('[data-justify=justify-center]').classList.add('on');
-    } else if (activeColumn.classList.contains('justify-end')) {
-      this.panel.querySelector('[data-justify=justify-end]').classList.add('on');
-    } else if (activeColumn.classList.contains('justify-between')) {
-      this.panel.querySelector('[data-justify=justify-between]').classList.add('on');
+    if (activeColumn) {
+      if (activeColumn.classList.contains('justify-start')) {
+        this.panel.querySelector('[data-justify=justify-start]').classList.add('on');
+      } else if (activeColumn.classList.contains('justify-center')) {
+        this.panel.querySelector('[data-justify=justify-center]').classList.add('on');
+      } else if (activeColumn.classList.contains('justify-end')) {
+        this.panel.querySelector('[data-justify=justify-end]').classList.add('on');
+      } else if (activeColumn.classList.contains('justify-between')) {
+        this.panel.querySelector('[data-justify=justify-between]').classList.add('on');
+      }
     }
 
     if (!document.body.classList.contains('controlpanel')) return;
@@ -11232,6 +11259,13 @@ class PanelText {
     } catch (e) {// Do Nothing
     }
 
+    if (activeElement.closest('[data-cb-type]')) {
+      btnPlacementText.style.display = 'none';
+      btnPlacementText.setAttribute('aria-expanded', 'false');
+      btnPlacementText.nextElementSibling.style.display = 'none';
+      btnPlacementText.nextElementSibling.setAttribute('aria-hidden', 'true');
+    }
+
     const config = this.builder.cssClasses;
     let elm = this.text.getElm();
     this.panel.querySelector('button[data-format=uppercase]').classList.remove('on');
@@ -12252,9 +12286,14 @@ class PanelSpacer {
     });
     let html = `
         <div class="submain">
-            <div class="label mt-0">${out('Height')}:</div>
+            <div class="label mt-2 changedevice" style="width:222px;">
+                <span>${out('Height')}: &nbsp;<span class="val-box-size"></span></span>
+                <button title="${out('Change Device')}" class="btn-device"><svg style="width:13px;height:13px;"><use xlink:href="#icon-devices"></use></svg></button>
+            </div>
+
             <div class="group fontsizes">
                 ${spacerHtml}
+                 <button title="${out('Clear')}" data-spacer=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
             </div>
         </div>
         `;
@@ -12265,10 +12304,61 @@ class PanelSpacer {
       btn.addEventListener('click', () => {
         const val = btn.getAttribute('data-spacer');
         let spacer = this.builder.controlpanel.activeElement;
-        spacerList.forEach(val => spacer.classList.remove(`height-${val}`));
-        spacer.classList.add(`height-${val}`);
         btns.forEach(elm => elm.classList.remove('on'));
         btn.classList.add('on');
+        let prefix = '';
+        let screenMode = this.builder.screenMode;
+
+        if (screenMode === 'desktop') {
+          prefix = '';
+        } else if (screenMode === 'tablet-landscape') {
+          prefix = 'md-';
+        } else if (screenMode === 'tablet') {
+          prefix = 'sm-';
+        } else if (screenMode === 'mobile') {
+          prefix = 'xs-';
+        }
+
+        if (this.builder.doc.body.hasAttribute('data-breakpoint')) {
+          const breakpoint = this.builder.doc.body.getAttribute('data-breakpoint');
+
+          if (breakpoint <= 760) {
+            prefix = 'xs-';
+          } else if (760 < breakpoint && breakpoint <= 970) {
+            prefix = 'sm-';
+          } else if (970 < breakpoint && breakpoint <= 1280) {
+            prefix = 'md-';
+          } else if (1280 < breakpoint && breakpoint <= 1920) {
+            prefix = '';
+          } else {
+            // 1920<breakpoint
+            prefix = '';
+          }
+        }
+
+        if (val !== '') {
+          // Clear
+          spacer.classList.forEach(item => {
+            if (prefix === '' && item.startsWith('height-')) {
+              spacer.classList.remove(item);
+            }
+
+            if (prefix === 'md-' && item.startsWith('md-')) spacer.classList.remove(item);
+            if (prefix === 'sm-' && item.startsWith('sm-')) spacer.classList.remove(item);
+            if (prefix === 'xs-' && item.startsWith('xs-')) spacer.classList.remove(item);
+          });
+          spacer.classList.add(prefix + 'height-' + val);
+        } else {
+          // Clear
+          spacer.classList.forEach(item => {
+            if (prefix === 'md-' && item.startsWith('md-')) spacer.classList.remove(item);
+            if (prefix === 'sm-' && item.startsWith('sm-')) spacer.classList.remove(item);
+            if (prefix === 'xs-' && item.startsWith('xs-')) spacer.classList.remove(item);
+          });
+        }
+
+        this.getState();
+        this.builder.editor.hideElementTools();
       });
     });
   }
@@ -12286,16 +12376,65 @@ class PanelSpacer {
   }
 
   getState() {
+    this.getStateTargeted();
+  }
+
+  getStateTargeted() {
     let spacer = this.builder.controlpanel.activeElement;
     const panel = this.panel;
+    let prefix = '';
+    let screenMode = this.builder.screenMode;
+
+    if (screenMode === 'desktop') {
+      prefix = '';
+    } else if (screenMode === 'tablet-landscape') {
+      prefix = 'md-';
+    } else if (screenMode === 'tablet') {
+      prefix = 'sm-';
+    } else if (screenMode === 'mobile') {
+      prefix = 'xs-';
+    }
+
+    if (this.builder.doc.body.hasAttribute('data-breakpoint')) {
+      const breakpoint = parseInt(this.builder.doc.body.getAttribute('data-breakpoint'));
+
+      if (breakpoint <= 760) {
+        prefix = 'xs-';
+      } else if (760 < breakpoint && breakpoint <= 970) {
+        prefix = 'sm-';
+      } else if (970 < breakpoint && breakpoint <= 1280) {
+        prefix = 'md-';
+      } else if (1280 < breakpoint && breakpoint <= 1920) {
+        prefix = '';
+      } else {
+        // 1920<breakpoint
+        prefix = '';
+      }
+    }
+
     const btns = panel.querySelectorAll('[data-spacer]');
-    spacer.classList.forEach(item => {
-      if (item.indexOf('height-') !== -1) {
-        let val = item.replace('height-', '');
+    if (spacer) spacer.classList.forEach(item => {
+      let val;
+      if (prefix === '' && item.startsWith('height-')) val = item.replace('height-', '');
+      if (prefix === 'md-' && item.startsWith('md-')) val = item.replace('md-height-', '');
+      if (prefix === 'sm-' && item.startsWith('sm-')) val = item.replace('sm-height-', '');
+      if (prefix === 'xs-' && item.startsWith('xs-')) val = item.replace('xs-height-', '');
+
+      if (val) {
+        panel.querySelector('.val-box-size').innerHTML = val === 'none' ? '' : val;
         btns.forEach(elm => elm.classList.remove('on'));
         panel.querySelector(`[data-spacer="${val}"]`).classList.add('on');
       }
     });
+
+    if (prefix !== '') {
+      const hasPrefix = Array.from(spacer.classList).some(c => c.startsWith(prefix));
+
+      if (!hasPrefix) {
+        btns.forEach(elm => elm.classList.remove('on'));
+        panel.querySelector('.val-box-size').innerHTML = '';
+      }
+    }
   }
 
 }
@@ -12327,9 +12466,10 @@ class SettingsUIGenerator$1 {
 
     if (!plugin || !plugin.settings) {
       // console.warn(`Plugin "${pluginName}" has no settings schema`);
-      return this.createEmptyForm();
+      if (!plugin.editor) return this.createEmptyForm();
     }
 
+    if (!plugin.settings) plugin.settings = {};
     const form = document.createElement('div');
     form.className = 'cb-settings-form'; // Get current values from element
 
@@ -12783,6 +12923,7 @@ class SettingsUIGenerator$1 {
 
   getCurrentValues(element, settings) {
     const values = {};
+    if (!settings) return values;
     Object.keys(settings).forEach(key => {
       if (key.startsWith('_')) return;
       const attrName = 'data-cb-' + key.replace(/([A-Z])/g, '-$1').toLowerCase();
@@ -12909,9 +13050,16 @@ class PanelPlugin {
             if (child.nodeType === 1 && child.tagName !== 'STYLE' && child.tagName !== 'SCRIPT') child.setAttribute('data-index', index);
           });
         } //----
-        // Store edited content from clone
+        // Add data-edit-id for editable area 
 
 
+        let editables = editableClone.querySelectorAll('.edit');
+        editables.forEach((area, index) => {
+          const id = `content-${Date.now()}-${index}`;
+          area.setAttribute('data-edit-id', id);
+        }); //-----
+        // Store edited content from clone
+
         currentElement.setAttribute('data-cb-original-content', editableClone.innerHTML); // Also performs similar value updates like the applyChanges()
         // currentElement.setAttribute('data-cb-content', editableClone.getAttribute('data-cb-content'));
 
@@ -13812,7 +13960,7 @@ class PanelBox {
                 </div>
             </div>
 
-            <div class="box-bg-settings">
+            <div class="box-bg-color">
                 <div class="flex">
                     <div class="mr-8">
                         <div class="label mt-3">${out('Background Color')}:</div>
@@ -13827,7 +13975,8 @@ class PanelBox {
                         </div>
                     </div>
                 </div>
-
+            </div>
+            <div class="box-bg-image">
                 <div class="label mt-3">${out('Background Image')}:</div>
 
                 <div class="asset-preview"></div>
@@ -15279,9 +15428,12 @@ class PanelBox {
     this.divPluginSettings = divPluginSettings;
     const runtime = this.builder.win.builderRuntime; // Reset (can be changed by renderPluginSettings)
 
-    const divBgSettings = this.panel.querySelector('.box-bg-settings');
-    divBgSettings.style.display = '';
-    this.divBgSettings = divBgSettings;
+    const divBgColor = this.panel.querySelector('.box-bg-color');
+    divBgColor.style.display = '';
+    this.divBgColor = divBgColor;
+    const divBgImage = this.panel.querySelector('.box-bg-image');
+    divBgImage.style.display = '';
+    this.divBgImage = divBgImage;
     const divPanelTitle = this.panel.parentNode.querySelector('.part-title');
     divPanelTitle.style.display = '';
     this.divPanelTitle = divPanelTitle;
@@ -15310,20 +15462,84 @@ class PanelBox {
     const pluginName = currentElement.getAttribute('data-cb-type');
     const plugin = runtime.getPlugin(pluginName);
     if (!plugin) return;
-    let displayName = out(plugin.displayName || plugin.name);
+    let displayName = out(plugin.displayName || plugin.name); // Hide unused tabs for plugin
+
+    /*
+    contentbox: {
+        title: false,
+        bg: false,
+        text: false,
+        //...
+    },
+    */
 
     if (plugin.contentbox) {
-      if (!plugin.contentbox.bg) {
-        this.divBgSettings.style.display = 'none';
+      if (plugin.contentbox.bg !== undefined && plugin.contentbox.bg !== null && plugin.contentbox.bg === false) {
+        this.divBgColor.style.display = 'none';
+        this.divBgImage.style.display = 'none';
+      }
+
+      if (plugin.contentbox.bgColor !== undefined && plugin.contentbox.bgColor !== null && plugin.contentbox.bgColor === false) {
+        this.divBgColor.style.display = 'none';
+      }
+
+      if (plugin.contentbox.bgImage !== undefined && plugin.contentbox.bgImage !== null && plugin.contentbox.bgImage === false) {
+        this.divBgImage.style.display = 'none';
       }
 
-      if (!plugin.contentbox.text) {
+      if (plugin.contentbox.text !== undefined && plugin.contentbox.text !== null && plugin.contentbox.text === false) {
         this.divDefaultTextColor.style.display = 'none';
       }
 
-      if (!plugin.contentbox.title) {
+      if (plugin.contentbox.title !== undefined && plugin.contentbox.title !== null && plugin.contentbox.title === false) {
         this.divPanelTitle.style.display = 'none';
       }
+
+      if (plugin.contentbox.boxTabs !== undefined && plugin.contentbox.boxTabs !== null && plugin.contentbox.boxTabs === false) {
+        const tabs = this.panel.querySelectorAll('.accordion-item');
+        tabs.forEach(tab => {
+          tab.style.display = 'none';
+          tab.setAttribute('aria-expanded', false);
+        });
+        const tabContents = this.panel.querySelectorAll('.accordion-content');
+        tabContents.forEach(tabContent => {
+          tabContent.style.display = 'none';
+          tabContent.setAttribute('aria-hidden', true);
+        });
+      }
+
+      if (plugin.contentbox.boxTabContent !== undefined && plugin.contentbox.boxTabContent !== null && plugin.contentbox.boxTabContent === false) {
+        const tabs = this.panel.querySelectorAll('.accordion-item.btn-accordion-content');
+        tabs.forEach(tab => {
+          tab.style.display = 'none';
+          tab.setAttribute('aria-expanded', false);
+          const tabContent = tab.nextElementSibling;
+          tabContent.style.display = 'none';
+          tabContent.setAttribute('aria-hidden', true);
+        });
+      }
+
+      if (plugin.contentbox.boxTabOnClick !== undefined && plugin.contentbox.boxTabOnClick !== null && plugin.contentbox.boxTabOnClick === false) {
+        const tabs = this.panel.querySelectorAll('.accordion-item.btn-accordion-boxonclick');
+        tabs.forEach(tab => {
+          tab.style.display = 'none';
+          tab.setAttribute('aria-expanded', false);
+          const tabContent = tab.nextElementSibling;
+          tabContent.style.display = 'none';
+          tabContent.setAttribute('aria-hidden', true);
+        });
+      }
+
+      if (plugin.contentbox.boxTabResponsive !== undefined && plugin.contentbox.boxTabResponsive !== null && plugin.contentbox.boxTabResponsive === false) {
+        const tabs = this.panel.querySelectorAll('.accordion-item.btn-accordion-boxresponsive');
+        tabs.forEach(tab => {
+          tab.style.display = 'none';
+          tab.setAttribute('aria-expanded', false);
+          const tabContent = tab.nextElementSibling;
+          tabContent.style.display = 'none';
+          tabContent.setAttribute('aria-hidden', true);
+        });
+      }
     }
 
     const divTitle = document.createElement('h3');
@@ -15349,7 +15565,8 @@ class PanelBox {
       const originalElement = editableClone.cloneNode(false); // Let plugin handle everything - pass the editable clone
 
       const editorUI = plugin.editor.openContentEditor(editableClone, this.builder, async () => {
-        this.builder.editor.saveForUndo(); // Add index for sortable grid (for easy reorder)
+        this.builder.editor.saveForUndo(); // Do the same process like reinitialize, needed for newly added item (which requires data-cb-original-content update)
+        // Add index for sortable grid (for easy reorder)
 
         let grid = editableClone.querySelector('.grid-sortable');
 
@@ -15364,9 +15581,16 @@ class PanelBox {
             if (child.nodeType === 1 && child.tagName !== 'STYLE' && child.tagName !== 'SCRIPT') child.setAttribute('data-index', index);
           });
         } //----
-        // Store edited content from clone
+        // Add data-edit-id for editable area 
 
 
+        let editables = editableClone.querySelectorAll('.edit');
+        editables.forEach((area, index) => {
+          const id = `content-${Date.now()}-${index}`;
+          area.setAttribute('data-edit-id', id);
+        }); //-----
+        // Store edited content from clone
+
         currentElement.setAttribute('data-cb-original-content', editableClone.innerHTML); // Also performs similar value updates like the applyChanges()
         // currentElement.setAttribute('data-cb-content', editableClone.getAttribute('data-cb-content'));
 
@@ -16951,23 +17175,25 @@ class PanelSection {
                 </button>
             </div>
 
-            <div class="label">${out('Height')}:</div>
-            <div class="group sectionheight">
-                <button title="10%" data-height="10">10%</button>
-                <button title="15%" data-height="15">15%</button>
-                <button title="20%" data-height="20">20%</button>
-                <button title="25%" data-height="25">25%</button>
-                <button title="30%" data-height="30">30%</button>
-                <button title="40%" data-height="40">40%</button>
-                <button title="50%" data-height="50">50%</button>
-                <button title="60%" data-height="60">60%</button>
-                <button title="70%" data-height="70">70%</button>
-                <button title="75%" data-height="75">75%</button>
-                <button title="80%" data-height="80">80%</button>
-                <button title="85%" data-height="85">85%</button>
-                <button title="90%" data-height="90">90%</button>
-                <button title="100%" data-height="100">100%</button>
-                <button title="${out('Clear')}" class="btn-clear" data-height="0"><svg><use xlink:href="#icon-eraser"></use></svg></button>
+            <div class="div-section-height">
+                <div class="label">${out('Height')}:</div>
+                <div class="group sectionheight">
+                    <button title="10%" data-height="10">10%</button>
+                    <button title="15%" data-height="15">15%</button>
+                    <button title="20%" data-height="20">20%</button>
+                    <button title="25%" data-height="25">25%</button>
+                    <button title="30%" data-height="30">30%</button>
+                    <button title="40%" data-height="40">40%</button>
+                    <button title="50%" data-height="50">50%</button>
+                    <button title="60%" data-height="60">60%</button>
+                    <button title="70%" data-height="70">70%</button>
+                    <button title="75%" data-height="75">75%</button>
+                    <button title="80%" data-height="80">80%</button>
+                    <button title="85%" data-height="85">85%</button>
+                    <button title="90%" data-height="90">90%</button>
+                    <button title="100%" data-height="100">100%</button>
+                    <button title="${out('Clear')}" class="btn-clear" data-height="0"><svg><use xlink:href="#icon-eraser"></use></svg></button>
+                </div>
             </div>
 
         </div>
@@ -17149,6 +17375,7 @@ class PanelSection {
     this.panel = panel;
     this.btnClearHeight = panel.querySelector('.sectionheight .btn-clear');
     this.btnAccordionSpacing = panel.querySelector('.btn-accordion-spacing');
+    this.divSectionHeight = panel.querySelector('.div-section-height');
     const btnMove = panel.querySelectorAll('[data-move]');
     btnMove.forEach(btn => {
       btn.addEventListener('click', () => {
@@ -17574,6 +17801,44 @@ class PanelSection {
     } else {
       divReverseBoxes.style.display = 'none';
       divBoxesPerLine.style.display = 'none';
+    } // Hide unused tabs and height settings for plugin
+
+
+    const tabs = this.panel.querySelectorAll('.accordion-item');
+    tabs.forEach(tab => {
+      tab.style.display = '';
+    });
+    const tabContents = this.panel.querySelectorAll('.accordion-content');
+    tabContents.forEach(tabContent => {
+      tabContent.style.display = '';
+    });
+    this.divSectionHeight.style.display = '';
+    const singleSectionBox = activeSection.classList.contains('is-box');
+    const pluginElement = activeSection.querySelector('.is-overlay-content [data-cb-type]');
+
+    if (singleSectionBox && pluginElement) {
+      const runtime = this.builder.win.builderRuntime;
+      const pluginName = pluginElement.getAttribute('data-cb-type');
+      const plugin = runtime.getPlugin(pluginName);
+
+      if (plugin.contentbox) {
+        if (plugin.contentbox.sectionHeight !== undefined && plugin.contentbox.sectionHeight !== null && plugin.contentbox.sectionHeight === false) {
+          this.divSectionHeight.style.display = 'none';
+        }
+
+        if (plugin.contentbox.sectionTabs !== undefined && plugin.contentbox.sectionTabs !== null && plugin.contentbox.sectionTabs === false) {
+          const tabs = this.panel.querySelectorAll('.accordion-item');
+          tabs.forEach(tab => {
+            tab.style.display = 'none';
+            tab.setAttribute('aria-expanded', false);
+          });
+          const tabContents = this.panel.querySelectorAll('.accordion-content');
+          tabContents.forEach(tabContent => {
+            tabContent.style.display = 'none';
+            tabContent.setAttribute('aria-hidden', true);
+          });
+        }
+      }
     }
   }
 
@@ -22747,8 +23012,8 @@ class SpacingContainer {
                     <button title="110" data-topspacing="11">110</button>
                     <button title="120" data-topspacing="12">120</button>
                     <button title="140" data-topspacing="14">140</button>
-                    <!--<button title="160" data-topspacing="16">160</button>
-                    <button title="200" data-topspacing="20">200</button>-->
+                    <button title="160" data-topspacing="16">160</button>
+                    <button title="200" data-topspacing="20">200</button>
                     <button title="${out('Clear')}" data-topspacing=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
                 </div>
 
@@ -22771,6 +23036,8 @@ class SpacingContainer {
                     <button title="110" data-bottomspacing="11">110</button>
                     <button title="120" data-bottomspacing="12">120</button>
                     <button title="140" data-bottomspacing="14">140</button>
+                    <button title="160" data-bottomspacing="16">160</button>
+                    <button title="200" data-bottomspacing="20">200</button>
                     <button title="${out('Clear')}" data-bottomspacing=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
                 </div>
 
@@ -22793,6 +23060,8 @@ class SpacingContainer {
                     <button title="110" data-leftspacing="11">110</button>
                     <button title="120" data-leftspacing="12">120</button>
                     <button title="140" data-leftspacing="14">140</button>
+                    <button title="160" data-leftspacing="16">160</button>
+                    <button title="200" data-leftspacing="20">200</button>
                     <button title="${out('Clear')}" data-leftspacing=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
                 </div>
 
@@ -22815,6 +23084,8 @@ class SpacingContainer {
                     <button title="110" data-rightspacing="11">110</button>
                     <button title="120" data-rightspacing="12">120</button>
                     <button title="140" data-rightspacing="14">140</button>
+                    <button title="160" data-rightspacing="16">160</button>
+                    <button title="200" data-rightspacing="20">200</button>
                     <button title="${out('Clear')}" data-rightspacing=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
                 </div>
             </div>
@@ -25271,7 +25542,7 @@ class Element$2 {
 
   getDeviceTarget(divTarget) {
     const btn = divTarget.querySelector('button.on');
-    return btn.getAttribute('data-device');
+    if (btn) return btn.getAttribute('data-device');else return '';
   }
 
   realtimeVisibility(elm) {
@@ -26428,6 +26699,47 @@ class ControlPanel {
     let old = this.builder.onPageContentClick;
 
     this.builder.onPageContentClick = e => {
+      const editArea = e.target.closest('.is-subblock');
+
+      if (editArea) {
+        this.builder.editor.elmTool.click(editArea, e); // Icon
+
+        const icons = this.builder.doc.querySelectorAll('.icon-active');
+        icons.forEach(icon => icon.classList.remove('icon-active'));
+        this.builder.editor.activeIcon = null;
+
+        if (e.target.closest('i') && e.target.innerHTML === '') {
+          e.target.classList.add('icon-active');
+          this.builder.editor.dom.selectElementContents(e.target);
+          this.builder.editor.activeIcon = e.target; // prevent text selection
+
+          if (document.selection) {
+            document.selection.empty();
+          } else {
+            window.getSelection().removeAllRanges();
+          }
+        } // Image (must be placed before //Link)
+
+
+        this.builder.editor.element.image.click(e); // Button
+
+        this.builder.editor.element.button.click(editArea, e); // Link
+
+        this.builder.editor.element.hyperlink.click(editArea, e); // Table
+
+        this.builder.editor.element.table.click(e); // Iframe
+
+        this.builder.editor.element.iframe.click(e); // Video
+
+        this.builder.editor.element.video.click(e); // Audio
+
+        this.builder.editor.element.audio.click(e); // Spacer
+
+        this.builder.editor.element.spacer.click(e); // Svg
+
+        this.builder.editor.element.svg.click(e);
+      }
+
       if (old) old.call(this);
 
       if (this.builder.controlPanel && !document.body.classList.contains('controlpanel')) {
@@ -26810,6 +27122,17 @@ class ControlPanel {
 
   getActive() {
     let activeElement = this.builder.editor.inspectedElement;
+
+    if (activeElement && activeElement.closest('[data-cb-type]') && activeElement.closest('.is-overlay-content')) {
+      this.activeElement = activeElement; // this.activeContainer = activeElement.closest('.is-container');
+      // this.activeColumn = this.activeContainer;
+      // this.activeRow = this.activeContainer;
+
+      this.activeBox = this.builder.activeBox;
+      this.activeSection = this.activeBox.closest('.is-section');
+      return;
+    }
+
     let col = this.builder.editor.activeCol;
     let row, container;
 
@@ -26906,6 +27229,10 @@ class ControlPanel {
       breadcrumbHtml = '';
     }
 
+    if (selection === 'element' && this.activeElement.closest('[data-cb-type]') && this.activeElement.closest('.is-overlay-content')) {
+      breadcrumbHtml = `<div>${section} ${sep} ${box} ${sep}</div>`;
+    }
+
     if (this.activeBlock) {
       // freeform
       if (selection === 'element') {
@@ -27024,10 +27351,10 @@ class ControlPanel {
 
     if (what === 'box') {
       let box = this.activeBox;
-      let section = this.activeSection;
-      this.builder.editor.util.clearActiveCell();
-      this.builder.editor.util.clearPops();
-      this.builder.editor.hideElementTools();
+      let section = this.activeSection; // this.builder.editor.util.clearActiveCell();
+      // this.builder.editor.util.clearPops();
+      // this.builder.editor.hideElementTools();
+
       this.closeContentDialogs();
       this.builder.wrapperEl.classList.add('hard-select');
       this.builder.wrapperEl.classList.remove('is-clean-edit'); // Select box
@@ -27117,6 +27444,9 @@ class ControlPanel {
       } else if (element.classList.contains('ovl')) {
         element = element.parentNode.querySelector('iframe');
         this.activeElement = element;
+      } else if (element.classList.contains('embed-responsive')) {
+        element = element.parentNode.querySelector('iframe');
+        this.activeElement = element;
       }
 
       if (element.closest('[data-html]') && !element.closest('[data-subblock]')) {
@@ -27147,7 +27477,7 @@ class ControlPanel {
       } else {
         if (element.querySelector('.icon') && element.childElementCount === 1) ;
 
-        if (element.closest('[data-cb-type]')) {
+        if (element.closest('[data-cb-type]') && !element.closest('.is-subblock')) {
           const runtime = this.builder.win.builderRuntime;
 
           if (runtime) {
@@ -32799,7 +33129,7 @@ class Util$1 {
       if (elm && elm.closest('.is-block')) ; else {
         // If no active cell, check if it is from .row-add-initial (empty info)
         row = this.builder.doc.querySelector('.row-active');
-        if (!row) return;else {
+        if (row) {
           // Empty content will always use 'row' mode to insert block.
           mode = 'row';
         }
@@ -32944,13 +33274,24 @@ class Util$1 {
         element.click();
       }
     }
+    let editingInsidePlugin = false;
+    let elm = this.builder.activeElement;
+    const plugin = elm.closest('[data-cb-type]');
+    const subblock = elm.closest('.is-subblock');
+    if (plugin && subblock) {
+      editingInsidePlugin = true;
+    }
     if (mode === 'elm') {
       let elm = this.builder.activeElement; // See elementtool.js line 195-196. // document.querySelector('.elm-active');
       if (!elm) return;
       this.builder.uo.saveForUndo();
       let element = elm;
       let newelement;
-      if (!element.nextElementSibling && !element.closest('[data-subblock]')) {
+      const plugin = element.closest('[data-cb-type]');
+      if (plugin) {
+        element.insertAdjacentHTML('afterend', html);
+        newelement = element.nextElementSibling;
+      } else if (!element.nextElementSibling && !element.closest('[data-subblock]')) {
         // active element is div.display > p.
         let activeCol = this.builder.activeCol;
         let current;
@@ -32968,7 +33309,7 @@ class Util$1 {
         element.insertAdjacentHTML('afterend', html);
         newelement = element.nextElementSibling;
       }
-      let builderActive = this.builder.doc.querySelector('.builder-active');
+      let builderActive = element.closest('.is-container'); // this.builder.doc.querySelector('.builder-active');
       if (builderActive) this.builder.applyBehaviorOn(builderActive);
       if (newelement.tagName.toLowerCase() === 'img') {
         let checkLoad = setInterval(() => {
@@ -33004,7 +33345,7 @@ class Util$1 {
     this.builder.opts.onRender();
 
     // Reinit after drag drop block
-    if (this.builder.win.builderRuntime) this.builder.win.builderRuntime.reinitialize();
+    if (this.builder.win.builderRuntime && !editingInsidePlugin) this.builder.win.builderRuntime.reinitialize();
     setTimeout(() => {
       this.builder.makeSortable(this.builder.doc);
     }, 400);
@@ -41066,145 +41407,113 @@ function get_beautify(js_beautify, css_beautify, html_beautify) {
 
 var JsBeautify$1 = js$1.exports;
 
-function _defineProperty$2(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
+function _arrayLikeToArray$1(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
 }
-
-function ownKeys$2(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
-  }
-
-  return keys;
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
 }
-
-function _objectSpread2$2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys$2(Object(source), true).forEach(function (key) {
-        _defineProperty$2(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys$2(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
+function _defineProperty$2(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
     }
+    return a;
   }
-
-  return target;
 }
-
-function _objectWithoutPropertiesLoose$2(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-
-function _objectWithoutProperties$2(source, excluded) {
-  if (source == null) return {};
-
-  var target = _objectWithoutPropertiesLoose$2(source, excluded);
-
-  var key, i;
-
+function ownKeys$2(e, r) {
+  var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
   }
-
-  return target;
+  return t;
 }
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
+function _objectSpread2$2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) {
+      _defineProperty$2(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
 }
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
+function _objectWithoutProperties$2(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose$2(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
 }
-
-function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
-
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
+function _objectWithoutPropertiesLoose$2(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
   }
-
-  return _arr;
+  return t;
 }
-
-function _unsupportedIterableToArray$1(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray$1(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen);
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray$1(r, e) || _nonIterableRest();
 }
-
-function _arrayLikeToArray$1(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
 }
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _unsupportedIterableToArray$1(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray$1(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$1(r, a) : void 0;
+  }
 }
 
 function _defineProperty$1(obj, key, value) {
@@ -41401,23 +41710,20 @@ var index$2 = {
 
 var config$1 = {
   paths: {
-    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.33.0/min/vs'
+    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.54.0/min/vs'
   }
 };
 
 function curry(fn) {
   return function curried() {
     var _this = this;
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     return args.length >= fn.length ? fn.apply(this, args) : function () {
       for (var _len2 = arguments.length, nextArgs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
         nextArgs[_key2] = arguments[_key2];
       }
-
       return curried.apply(_this, [].concat(args, nextArgs));
     };
   };
@@ -41432,11 +41738,9 @@ function isObject$3(value) {
  * @param {Object} config - the configuration object 
  * @return {Object} config - the validated configuration object
  */
-
 function validateConfig(config) {
   if (!config) errorHandler('configIsRequired');
   if (!isObject$3(config)) errorHandler('configType');
-
   if (config.urls) {
     informAboutDeprecation();
     return {
@@ -41445,22 +41749,18 @@ function validateConfig(config) {
       }
     };
   }
-
   return config;
 }
+
 /**
  * logs deprecation message
  */
-
-
 function informAboutDeprecation() {
   console.warn(errorMessages.deprecation);
 }
-
 function throwError(errorMessages, type) {
   throw new Error(errorMessages[type] || errorMessages["default"]);
 }
-
 var errorMessages = {
   configIsRequired: 'the configuration object is required',
   configType: 'the configuration object should be an object',
@@ -41476,7 +41776,6 @@ var compose = function compose() {
   for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
     fns[_key] = arguments[_key];
   }
-
   return function (x) {
     return fns.reduceRight(function (y, f) {
       return f(y);
@@ -41496,11 +41795,11 @@ function merge(target, source) {
 }
 
 // The source (has been changed) is https://github.com/facebook/react/issues/5465#issuecomment-157888325
+
 var CANCELATION_MESSAGE = {
   type: 'cancelation',
   msg: 'operation is manually canceled'
 };
-
 function makeCancelable(promise) {
   var hasCanceled_ = false;
   var wrappedPromise = new Promise(function (resolve, reject) {
@@ -41514,29 +41813,28 @@ function makeCancelable(promise) {
   }, wrappedPromise;
 }
 
-/** the local state of the module */
+var _excluded$2 = ["monaco"];
 
+/** the local state of the module */
 var _state$create = index$2.create({
-  config: config$1,
-  isInitialized: false,
-  resolve: null,
-  reject: null,
-  monaco: null
-}),
-    _state$create2 = _slicedToArray(_state$create, 2),
-    getState = _state$create2[0],
-    setState = _state$create2[1];
+    config: config$1,
+    isInitialized: false,
+    resolve: null,
+    reject: null,
+    monaco: null
+  }),
+  _state$create2 = _slicedToArray(_state$create, 2),
+  getState = _state$create2[0],
+  setState = _state$create2[1];
+
 /**
  * set the loader configuration
  * @param {Object} config - the configuration object
  */
-
-
 function config(globalConfig) {
   var _validators$config = validators.config(globalConfig),
-      monaco = _validators$config.monaco,
-      config = _objectWithoutProperties$2(_validators$config, ["monaco"]);
-
+    monaco = _validators$config.monaco,
+    config = _objectWithoutProperties$2(_validators$config, _excluded$2);
   setState(function (state) {
     return {
       config: merge(state.config, config),
@@ -41544,100 +41842,88 @@ function config(globalConfig) {
     };
   });
 }
+
 /**
  * handles the initialization of the monaco-editor
  * @return {Promise} - returns an instance of monaco (with a cancelable promise)
  */
-
-
 function init() {
   var state = getState(function (_ref) {
     var monaco = _ref.monaco,
-        isInitialized = _ref.isInitialized,
-        resolve = _ref.resolve;
+      isInitialized = _ref.isInitialized,
+      resolve = _ref.resolve;
     return {
       monaco: monaco,
       isInitialized: isInitialized,
       resolve: resolve
     };
   });
-
   if (!state.isInitialized) {
     setState({
       isInitialized: true
     });
-
     if (state.monaco) {
       state.resolve(state.monaco);
       return makeCancelable(wrapperPromise);
     }
-
     if (window.monaco && window.monaco.editor) {
       storeMonacoInstance(window.monaco);
       state.resolve(window.monaco);
       return makeCancelable(wrapperPromise);
     }
-
     compose(injectScripts, getMonacoLoaderScript)(configureLoader);
   }
-
   return makeCancelable(wrapperPromise);
 }
+
 /**
  * injects provided scripts into the document.body
  * @param {Object} script - an HTML script element
  * @return {Object} - the injected HTML script element
  */
-
-
 function injectScripts(script) {
   return document.body.appendChild(script);
 }
+
 /**
  * creates an HTML script element with/without provided src
  * @param {string} [src] - the source path of the script
  * @return {Object} - the created HTML script element
  */
-
-
 function createScript(src) {
   var script = document.createElement('script');
   return src && (script.src = src), script;
 }
+
 /**
  * creates an HTML script element with the monaco loader src
  * @return {Object} - the created HTML script element
  */
-
-
 function getMonacoLoaderScript(configureLoader) {
   var state = getState(function (_ref2) {
     var config = _ref2.config,
-        reject = _ref2.reject;
+      reject = _ref2.reject;
     return {
       config: config,
       reject: reject
     };
   });
   var loaderScript = createScript("".concat(state.config.paths.vs, "/loader.js"));
-
   loaderScript.onload = function () {
     return configureLoader();
   };
-
   loaderScript.onerror = state.reject;
   return loaderScript;
 }
+
 /**
  * configures the monaco loader
  */
-
-
 function configureLoader() {
   var state = getState(function (_ref3) {
     var config = _ref3.config,
-        resolve = _ref3.resolve,
-        reject = _ref3.reject;
+      resolve = _ref3.resolve,
+      reject = _ref3.reject;
     return {
       config: config,
       resolve: resolve,
@@ -41645,21 +41931,19 @@ function configureLoader() {
     };
   });
   var require = window.require;
-
   require.config(state.config);
-
-  require(['vs/editor/editor.main'], function (monaco) {
+  require(['vs/editor/editor.main'], function (_ref4) {
+    var monaco = _ref4.m;
     storeMonacoInstance(monaco);
     state.resolve(monaco);
   }, function (error) {
     state.reject(error);
   });
 }
+
 /**
  * store monaco instance in local state
  */
-
-
 function storeMonacoInstance(monaco) {
   if (!getState().monaco) {
     setState({
@@ -41667,20 +41951,18 @@ function storeMonacoInstance(monaco) {
     });
   }
 }
+
 /**
  * internal helper function
  * extracts stored monaco instance
  * @return {Object|null} - the monaco instance
  */
-
-
 function __getMonacoInstance() {
-  return getState(function (_ref4) {
-    var monaco = _ref4.monaco;
+  return getState(function (_ref5) {
+    var monaco = _ref5.monaco;
     return monaco;
   });
 }
-
 var wrapperPromise = new Promise(function (resolve, reject) {
   return setState({
     resolve: resolve,
@@ -41828,7 +42110,14 @@ class HtmlUtil {
       const cell = util.cellSelected();
       cell.innerHTML = html;
       let builderActive = this.builder.doc.querySelector('.builder-active');
-      if (builderActive) this.builder.applyBehaviorOn(builderActive);
+      if (builderActive) {
+        this.builder.applyBehaviorOn(builderActive);
+
+        // reinit after apply html
+        if (this.builder.win.builderRuntime && builderActive.querySelector('[data-cb-type]')) {
+          this.builder.win.builderRuntime.reinitialize(builderActive);
+        }
+      }
 
       //Trigger Change event
       this.builder.opts.onChange();
@@ -41847,7 +42136,14 @@ class HtmlUtil {
       if (!row) return;
       row.innerHTML = html;
       let builderActive = this.builder.doc.querySelector('.builder-active');
-      if (builderActive) this.builder.applyBehaviorOn(builderActive);
+      if (builderActive) {
+        this.builder.applyBehaviorOn(builderActive);
+
+        // reinit after apply html
+        if (this.builder.win.builderRuntime && builderActive.querySelector('[data-cb-type]')) {
+          this.builder.win.builderRuntime.reinitialize(builderActive);
+        }
+      }
 
       //Trigger Change event
       this.builder.opts.onChange();
@@ -41882,6 +42178,12 @@ class HtmlUtil {
       // let builderActive = this.builder.doc.querySelector('.builder-active');
       // if(builderActive) this.builder.applyBehaviorOn(builderActive);
       this.builder.applyBehaviorOn(area);
+
+      // reinit after apply html
+      if (this.builder.win.builderRuntime && area.querySelector('[data-cb-type]')) {
+        this.builder.win.builderRuntime.reinitialize(area);
+      }
+
       /*else {
            const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
           if(builders.length > 1) {
@@ -42479,6 +42781,11 @@ class HtmlUtil {
             element.removeAttribute(name);
           }
         });
+        const areas = element.querySelectorAll('.is-container');
+        Array.from(areas).forEach(area => {
+          area.removeAttribute('data-sort');
+          area.classList.remove('is-builder');
+        });
 
         // Remove runtime-added classes
         const type = element.getAttribute('data-cb-type');
@@ -42493,17 +42800,39 @@ class HtmlUtil {
         grid = element.querySelector('.grid-sortable');
       }
       element.removeAttribute('id');
+
+      // Clean index in sortable grid
       if (grid) {
         Array.from(grid.children).forEach(elm => {
           elm.removeAttribute('data-index');
           elm.removeAttribute('data-item-id');
         });
       }
-      const elms = element.querySelectorAll('[data-scroll], [data-scroll-once]');
+      // Cleanup data-item-id
+      let elms = element.querySelectorAll('[data-item-id],[data-slide-id],[contenteditable]');
+      elms.forEach(elm => {
+        elm.removeAttribute('data-item-id');
+        elm.removeAttribute('data-slide-id');
+        elm.removeAttribute('contenteditable');
+      });
+
+      // Clean data-edit-id in editable area 
+      let editables = element.querySelectorAll('.edit');
+      editables.forEach(area => {
+        area.removeAttribute('data-edit-id');
+      });
+      elms = element.querySelectorAll('[data-scroll], [data-scroll-once]');
       elms.forEach(elm => {
         elm.removeAttribute('data-scroll');
         elm.removeAttribute('data-scroll-once');
       });
+      elms = element.querySelectorAll('.elm-active, .icon-active');
+      elms.forEach(elm => {
+        elm.classList.remove('elm-active');
+        elm.classList.remove('icon-active');
+      });
+      const oldEditables = element.querySelectorAll('[contenteditable="true"]');
+      oldEditables.forEach(el => el.removeAttribute('contenteditable'));
     });
     html = '';
     if (multiple) {
@@ -74960,6 +75289,8 @@ class ButtonEditor {
                                     <span>${util.out('Padding Left/Right')}</span>:
                                 </div>
                                 <div class="flex flex-row" style="margin-top:5px">
+                                    <button title="2" data-command="0" class="paddingx-command" style="margin-right:4px">0</button>
+                                    <button title="2" data-command="1" class="paddingx-command" style="margin-right:4px">1</button>
                                     <button title="2" data-command="2" class="paddingx-command" style="margin-right:4px">2</button>
                                     <button title="3" data-command="3" class="paddingx-command" style="margin-right:4px">3</button>
                                     <button title="4" data-command="4" class="paddingx-command" style="margin-right:4px">4</button>
@@ -75465,6 +75796,12 @@ class ButtonEditor {
           const val = btn.getAttribute('data-command');
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton || this.builder.activeLink;
           dom.removeClassesByPrefix(activeButton, 'px-');
+          if (val === '0') {
+            dom.addClass(activeButton, 'px-0');
+          }
+          if (val === '1') {
+            dom.addClass(activeButton, 'px-1');
+          }
           if (val === '2') {
             dom.addClass(activeButton, 'px-2');
           }
@@ -76532,6 +76869,144 @@ class ButtonEditor {
       bg: 'rgba(191, 245, 110, 1)',
       hoverBg: 'rgba(183, 236, 103, 1)'
     },
+    // Square buttons
+    {
+      type: 'solid',
+      shape: 'square',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'transparent',
+      hoverBg: 'transparent',
+      customClasses: 'underline px-0'
+    }, {
+      type: 'outline',
+      shape: 'square',
+      text: 'Read More'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'rgb(240, 240, 241)',
+      hoverBg: 'rgb(236, 236, 238)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      text: 'Read More',
+      color: 'rgb(250, 250, 250)',
+      bg: 'rgb(24, 24, 27)',
+      hoverBg: 'rgb(63, 63, 70)'
+    }, {
+      type: 'outline',
+      shape: 'square',
+      text: 'Read More',
+      color: 'rgb(250, 250, 250)',
+      bg: 'transparent',
+      hoverBg: 'transparent'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(13, 151, 255, 1)',
+      hoverBg: 'rgba(7, 138, 237, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: '#3b82f6',
+      hoverBg: 'rgba(47, 116, 228, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: '#fff',
+      hoverBg: 'rgba(248, 248, 250, 1)'
+    },
+    // Colors
+    {
+      type: 'solid',
+      shape: 'square',
+      size: 'medium',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'rgba(111, 235, 255, 1)',
+      hoverBg: 'rgba(98, 230, 252, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'medium',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(19, 166, 27, 1)',
+      hoverBg: 'rgba(17, 155, 25, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'medium',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'rgba(254, 235, 101, 1)',
+      hoverBg: 'rgba(249, 229, 85, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'medium',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(251, 45, 45, 1)',
+      hoverBg: 'rgba(239, 38, 36, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'medium',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(255, 122, 0, 1)',
+      hoverBg: 'rgba(248, 109, 2, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'medium',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(255, 68, 179, 1)',
+      hoverBg: 'rgba(240, 46, 169, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'medium',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'rgba(148, 251, 208, 1)',
+      hoverBg: 'rgba(133, 244, 198, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'medium',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(91, 73, 228, 1)',
+      hoverBg: 'rgba(77, 59, 208, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'medium',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(142, 67, 237, 1)',
+      hoverBg: 'rgba(122, 52, 212, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'medium',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'rgba(191, 245, 110, 1)',
+      hoverBg: 'rgba(183, 236, 103, 1)'
+    },
     // Rounded buttons - Small
     {
       type: 'solid',
@@ -77115,6 +77590,152 @@ class ButtonEditor {
       color: 'rgb(24, 24, 27)',
       bg: 'rgba(191, 245, 110, 1)',
       hoverBg: 'rgba(183, 236, 103, 1)'
+    },
+    // Square buttons - Large
+    {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'transparent',
+      hoverBg: 'transparent',
+      customClasses: 'underline'
+    }, {
+      type: 'outline',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'rgb(240, 240, 241)',
+      hoverBg: 'rgb(236, 236, 238)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: 'rgb(250, 250, 250)',
+      bg: 'rgb(24, 24, 27)',
+      hoverBg: 'rgb(63, 63, 70)'
+    }, {
+      type: 'outline',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: 'rgb(250, 250, 250)',
+      bg: 'transparent',
+      hoverBg: 'transparent'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(13, 151, 255, 1)',
+      hoverBg: 'rgba(7, 138, 237, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: '#3b82f6',
+      hoverBg: 'rgba(47, 116, 228, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: '#fff',
+      hoverBg: 'rgba(248, 248, 250, 1)'
+    },
+    // Colors
+    {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'rgba(111, 235, 255, 1)',
+      hoverBg: 'rgba(98, 230, 252, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(19, 166, 27, 1)',
+      hoverBg: 'rgba(17, 155, 25, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'rgba(254, 235, 101, 1)',
+      hoverBg: 'rgba(249, 229, 85, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(251, 45, 45, 1)',
+      hoverBg: 'rgba(239, 38, 36, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(255, 122, 0, 1)',
+      hoverBg: 'rgba(248, 109, 2, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(255, 68, 179, 1)',
+      hoverBg: 'rgba(240, 46, 169, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'rgba(148, 251, 208, 1)',
+      hoverBg: 'rgba(133, 244, 198, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(91, 73, 228, 1)',
+      hoverBg: 'rgba(77, 59, 208, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(142, 67, 237, 1)',
+      hoverBg: 'rgba(122, 52, 212, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'rgba(191, 245, 110, 1)',
+      hoverBg: 'rgba(183, 236, 103, 1)'
     }];
     let templates = buttonConfigs.map(config => this.generateButton(config));
     const moreTemplates = [];
@@ -78229,9 +78850,10 @@ class SettingsUIGenerator {
   generateForm(pluginName, element, onChange) {
     const plugin = this.runtime.getPlugin(pluginName);
     if (!plugin || !plugin.settings) {
-      console.warn(`Plugin "${pluginName}" has no settings schema`);
-      return this.createEmptyForm();
+      // console.warn(`Plugin "${pluginName}" has no settings schema`);
+      if (!plugin.editor) return this.createEmptyForm();
     }
+    if (!plugin.settings) plugin.settings = {};
     const form = document.createElement('div');
     form.className = 'cb-settings-form';
 
@@ -78607,6 +79229,7 @@ class SettingsUIGenerator {
    */
   getCurrentValues(element, settings) {
     const values = {};
+    if (!settings) return values;
     Object.keys(settings).forEach(key => {
       if (key.startsWith('_')) return;
       const attrName = 'data-cb-' + key.replace(/([A-Z])/g, '-$1').toLowerCase();
@@ -80990,8 +81613,10 @@ class Element$1 {
         subblock = true;
       }
     }
-    if (elm.closest('[data-cb-type]')) {
+    const plugin = elm.closest('[data-cb-type]');
+    if (plugin) {
       customcode = true;
+      subblock = elm.closest('.is-subblock');
     }
     if (!customcode && !noedit && !_protected || subblock) {
       //previously this is commented: && !noedit && !_protected
@@ -85104,6 +85729,7 @@ class ColumnTool {
   }
   click(col) {
     this.columnTool = col.parentNode.querySelector('.is-col-tool');
+    if (!this.columnTool) return;
     this.columnTool.style.left = col.offsetLeft + 'px';
     this.columnTool.style.top = col.offsetTop + 'px';
     const btnAdd = this.columnTool.querySelector('.cell-add');
@@ -90099,6 +90725,40 @@ class ElementTool {
         dom.addClass(quickadd, 'center');
       }
       quickadd.setAttribute('data-mode', 'elm');
+      const plugin = builder.activeElement && builder.activeElement.closest('[data-cb-type]');
+      const btnAddHeadline = quickadd.querySelector('.add-headline');
+      const btnAddQuote = quickadd.querySelector('.add-quote');
+      const btnAddTable = quickadd.querySelector('.add-table');
+      const btnAddCode = quickadd.querySelector('.add-code');
+      const btnAddForm = quickadd.querySelector('.add-form');
+      const btnAddMap = quickadd.querySelector('.add-map');
+      const btnAddYoutube = quickadd.querySelector('.add-youtube');
+      const btnAddVideo = quickadd.querySelector('.add-video');
+      const btnAddMore = quickadd.querySelector('.add-more');
+      const separator = quickadd.querySelector('.pop-separator');
+      if (plugin) {
+        if (btnAddHeadline) btnAddHeadline.style.display = 'none';
+        if (btnAddQuote) btnAddQuote.style.display = 'none';
+        if (btnAddCode) btnAddCode.style.display = 'none';
+        if (btnAddTable) btnAddTable.style.display = 'none';
+        if (btnAddForm) btnAddForm.style.display = 'none';
+        if (btnAddMap) btnAddMap.style.display = 'none';
+        if (btnAddYoutube) btnAddYoutube.style.display = 'none';
+        if (btnAddVideo) btnAddVideo.style.display = 'none';
+        if (btnAddMore) btnAddMore.style.display = 'none';
+        if (separator) separator.style.display = 'none';
+      } else {
+        if (btnAddHeadline) btnAddHeadline.style.display = '';
+        if (btnAddQuote) btnAddQuote.style.display = '';
+        if (btnAddCode) btnAddCode.style.display = '';
+        if (btnAddTable) btnAddTable.style.display = '';
+        if (btnAddForm) btnAddForm.style.display = '';
+        if (btnAddMap) btnAddMap.style.display = '';
+        if (btnAddYoutube) btnAddYoutube.style.display = '';
+        if (btnAddVideo) btnAddVideo.style.display = '';
+        if (btnAddMore) btnAddMore.style.display = '';
+        if (separator) separator.style.display = '';
+      }
 
       //handleQuickAddClickOut
       const handleQuickAddClickOut = e => {
@@ -90139,7 +90799,15 @@ class ElementTool {
           if (elm.closest('.is-subblock')) {
             subblock = true;
           }
-
+          const plugin = elm.closest('[data-cb-type]');
+          if (plugin && subblock) {
+            elm.remove();
+            this.elementTool.style.display = 'none';
+            //Trigger Change event
+            this.builder.opts.onChange();
+            if (this.builder.onSelectChange) this.builder.onSelectChange();
+            return;
+          }
           /*
           if(dom.hasClass(elm.parentNode, 'cell-active') || elm.parentNode.hasAttribute('data-subblock')) {
               // Level 1
@@ -90494,11 +91162,11 @@ class ElementTool {
     }
     let subblock = false;
     //if(dom.parentsHasAttribute(elm, 'data-subblock')) {
-    if (dom.parentsHasClass(elm, 'is-subblock')) {
+    if (elm.closest('.is-subblock') && !elm.classList.contains('is-subblock')) {
       subblock = true;
     }
     const plugin = elm.closest('[data-cb-type]');
-    if ((customcode || noedit || _protected) && !subblock) ; else if (plugin) {
+    if ((customcode || noedit || _protected) && !subblock) ; else if (plugin && !subblock) {
       activeElement = plugin;
     } else {
       const tagName = elm.tagName.toLowerCase();
@@ -90651,6 +91319,14 @@ class ElementTool {
     let elementTool = this.elementTool;
     let elm = this.builder.activeElement;
     if (!elm) return;
+    const editableArea = elm.closest('[data-edit-actions]');
+    if (editableArea) {
+      const editActions = editableArea.dataset.editActions || '';
+      if (editActions.includes('no-add')) {
+        // Adding elements is disabled
+        return;
+      }
+    }
     if (elm.closest('.is-dock')) return;
     // if(elm.closest('[data-cb-type]')) return;
 
@@ -124841,6 +125517,25 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
   }
   applyBehaviorOn(builder) {
     const util = this.util;
+    if (builder.closest('[data-cb-type]')) {
+      // Fix buttons not wrapped in  <div style="white-space: nowrap;">
+      let linkButtons = builder.querySelectorAll('a[role="button"]');
+      Array.prototype.forEach.call(linkButtons, btn => {
+        if (btn.parentNode && btn.parentNode === builder) {
+          btn.outerHTML = `
+                    <div style="white-space: nowrap;">
+                        ${btn.outerHTML}
+                    </div>
+                    `;
+        }
+      });
+      linkButtons = builder.querySelectorAll('a[role="button"]');
+      Array.prototype.forEach.call(linkButtons, btn => {
+        btn.parentNode.setAttribute('contenteditable', 'false');
+        btn.setAttribute('contenteditable', 'true');
+      });
+      return;
+    }
 
     // upload
     if (this.opts.onImageUpload) {
@@ -125372,7 +126067,21 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
                       newCol.children[0].click();
                     }, 400);
                   } else {
-                    newCol.children[0].click(); // Focus on first element
+                    const spacer = newCol.querySelector('.spacer');
+                    setTimeout(() => {
+                      try {
+                        if (spacer) {
+                          if (newCol.parentNode.nextElementSibling) {
+                            const elm = newCol.parentNode.nextElementSibling.querySelector('h1,h2,h3,h4,h5,h6,p,img,[data-cb-type]');
+                            if (elm) elm.click();else newCol.click();
+                          }
+                        } else {
+                          newCol.children[0].click(); // Focus on first element
+                        }
+                      } catch (e) {
+                        // Do Nothing
+                      }
+                    }, 400);
                   }
                 }
               }
@@ -129865,7 +130574,7 @@ Please obtain a license at: https://innovastudio.com/contentbox`);
     if (lockIndicator) lockIndicator.style.display = '';
     let linkTool = this.doc.querySelector('#divLinkTool');
     if (linkTool) linkTool.style.display = '';
-    let spacerTool = this.builderStuff.querySelector('.is-spacer-tool');
+    let spacerTool = this.doc.querySelector('.is-spacer-tool');
     if (spacerTool) spacerTool.style.display = '';
     this.element.image.hideImageTool();
     this.doc.querySelectorAll('.icon-active').forEach(elm => elm.classList.remove('icon-active'));
@@ -130111,6 +130820,10 @@ class ContentStuff {
             overflow-y: unset !important;
           }
 
+            [data-cb-type] .elm-active:not(button) {
+                background: rgba(200, 200, 201, 0.11);
+            }
+
         `; // .is-wrapper.is-edit > div {
     //   overflow-x: unset;
     //   overflow-y: unset;
@@ -157031,7 +157744,7 @@ class IframePanel {
                     .is-content-view {
                         transition: all 300ms ease 0s;
                         /* overflow: hidden; */
-                        background: #f5f5f5;
+                        background: #fff;
                         position: relative;
                         ${this.builder.controlPanel ? 'margin-top: 6vh;' : 'margin-top:10vh;'} 
                         transform-origin: top;
@@ -160328,7 +161041,7 @@ class ContentBox {
           'title': 'Sections'
         }, {
           'name': 'snippet',
-          'title': 'Content Blocks'
+          'title': 'Blocks'
         }, {
           'name': 'typography',
           'title': 'Typography'
@@ -160451,7 +161164,7 @@ class ContentBox {
       {
         id: 1,
         designId: 2,
-        name: 'Header'
+        name: 'Hero'
       }, {
         id: 2,
         designId: 1,
@@ -160506,7 +161219,8 @@ class ContentBox {
           ['#282828','dark','contentbuilder/themes/dark.css'], 
       ],
       */
-      backgroundColor: '#f1f1f1',
+      backgroundColor: 'transparent',
+      //'#f1f1f1',
       imageselect: '',
       fileselect: '',
       imageSelect: '',
@@ -163854,27 +164568,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       }
 
       dom.addClass(this.wrapperEl, 'is-wrapper');
-      dom.addClass(this.wrapperEl, 'is-edit'); //Extend onRender with built-in plugins
-
-      let old = this.settings.onRender;
-
-      this.settings.onRender = () => {
-        old.call(this); // call user's defined onRender
-
-        try {
-          // Built-in onRender
-          //Run parts of box(-flex).js
-          this.boxRender(); // //Run built-in plugin inside the builder
-          // setTimeout(()=>{
-          //     if (this.win.skrollr) {
-          //         let obj = this.win.skrollr.get();
-          //         if(obj) obj.refresh();
-          //     }
-          // }, 100);
-        } catch (e) {// Do Nothing
-        }
-      }; //Extend onChange
-
+      dom.addClass(this.wrapperEl, 'is-edit'); //Extend onChange
 
       let old2 = this.settings.onChange;
 
@@ -164032,6 +164726,10 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
             this.controlpanel.objPanelText.getStateTargeted();
           }
 
+          if (this.controlpanel.panelSpacer.classList.contains('active')) {
+            this.controlpanel.objPanelSpacer.getStateTargeted();
+          }
+
           if (this.controlpanel.panelBox.classList.contains('active')) {
             this.controlpanel.objPanelBox.getStateTargeted();
           }
@@ -164100,6 +164798,13 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
 
 
       if (this.topSpace) document.body.classList.add('topspace');
+      window.addEventListener('error', e => {
+        if (e.message === 'Script error.' && e.filename === '') {
+          // Prevent global crash from cross-origin Monaco scripts
+          e.preventDefault();
+          e.stopImmediatePropagation(); // console.warn("Suppressed cross-origin Monaco focus error.");
+        }
+      }, true);
     };
 
     if (this.iframeSrc) {
@@ -164700,7 +165405,15 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
 
     if (this.UIColor) {
       this.editor.setUIColor(this.UIColor.mode, this.UIColor.css);
-    }
+    } // Prepare for tooltip
+
+
+    const sidebar = this.builderStuff.querySelector('.is-sidebar');
+    let elms = sidebar.querySelectorAll('[title]');
+    Array.prototype.forEach.call(elms, elm => {
+      elm.setAttribute('data-title', elm.getAttribute('title'));
+      this.editor.tooltip.set(elm, 5, 3);
+    });
   } // editorSetup
   // Live Preview
 
@@ -166263,99 +166976,6 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
   } // pageSetup
 
 
-  boxRender() {
-    if (!this.linksWithClickListeners) {
-      this.linksWithClickListeners = new Set();
-    }
-
-    const links = this.wrapperEl.querySelectorAll('.is-box .is-overlay a'); // eg. slider links
-
-    links.forEach(link => {
-      let url = link.getAttribute('href');
-
-      if (url.indexOf('#') === 0 || link.classList.contains('glightbox')) ; else {
-        if (!this.linksWithClickListeners.has(link)) {
-          link.addEventListener('click', e => {
-            // Will go to the link
-            const answer = window.confirm(out('Do you really want to leave?')); // Cancel the navigation and stay on the same page
-
-            if (!answer) {
-              e.preventDefault();
-            }
-
-            e.stopImmediatePropagation();
-          });
-          this.linksWithClickListeners.add(link); // Mark the listener as added
-        }
-      }
-    });
-    const navbar = this.doc.querySelector('.is-section-navbar');
-
-    if (navbar) {
-      const links = navbar.querySelectorAll('a');
-      links.forEach(link => {
-        if (!this.linksWithClickListeners.has(link)) {
-          link.addEventListener('click', e => {
-            let url = link.getAttribute('href');
-
-            if (url) {
-              if (url.indexOf('#') === 0) {
-                // Will go to bookmark
-                if (url.indexOf('#section') === 0) {
-                  let num = url.replace('#section', '');
-
-                  if (!isNaN(parseInt(num))) {
-                    let sections = this.doc.querySelectorAll('.is-section');
-                    let gotoSection;
-                    let x = 0;
-                    sections.forEach(function (section) {
-                      if (!dom.hasClass(section, 'is-section-navbar')) {
-                        if (x === num - 1) {
-                          gotoSection = section;
-                        }
-
-                        x++;
-                      }
-                    });
-
-                    if (gotoSection) {
-                      this.scrollTo(gotoSection);
-                    }
-
-                    e.preventDefault();
-                  }
-                } else {
-                  try {
-                    let bookmark = this.doc.querySelector(url);
-
-                    if (bookmark) {
-                      this.scrollTo(bookmark);
-                      e.preventDefault();
-                    }
-                  } catch (e) {// Do Nothing
-                  }
-                }
-              } else {
-                // Prevent to go to the link
-                if (e.target.closest('#is-menu-toggle')) return;
-                e.preventDefault();
-                e.stopImmediatePropagation();
-              }
-            } else {
-              if (link.closest('.is-menu-search')) ; else {
-                if (!e.target.getAttribute('href')) return;
-                e.preventDefault();
-                e.stopImmediatePropagation();
-              }
-            }
-          });
-          this.linksWithClickListeners.add(link); // Mark the listener as added
-        }
-      });
-    }
-  } // box
-
-
   addSpace() {// Do Nothing
     // Now is not needed.
     // (Replaced by // Zoom Adjustment)
@@ -166394,20 +167014,21 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       }, 1000);
     }, delay);
   }
-
+  /*
   defineLastBox(section) {
-    const boxes = section.querySelectorAll('.is-box');
-    boxes.forEach(box => {
-      box.classList.remove('last-box');
-    });
-
-    if (boxes.length === 0) {
-      section.classList.add('last-box');
-    } else {
-      const lastBox = boxes[boxes.length - 1];
-      if (lastBox) lastBox.classList.add('last-box');
-    }
+      const boxes = section.querySelectorAll('.is-box');
+      boxes.forEach(box=>{
+          box.classList.remove('last-box');
+      });
+      if(boxes.length===0) {
+          section.classList.add('last-box');
+      } else {
+          const lastBox = boxes[boxes.length-1];
+          if(lastBox) lastBox.classList.add('last-box');
+      }
   }
+  */
+
 
   sectionSetup(section) {
     let tool = section.querySelector('.is-section-tool');
@@ -166425,8 +167046,8 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
             <button type="button" class="btn-section-remove" tabindex="-1" data-title="${out('Remove')}" title="${out('Remove')}">
                 <svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-3px;"><use xlink:href="#icon-trash2"></use></svg>
             </button>
-        </div>`);
-    this.defineLastBox(section);
+        </div>`); // this.defineLastBox(section);
+
     let info = section.querySelector('.is-section-info');
     if (info) info.parentNode.removeChild(info);
     const sectionId = section.getAttribute('id');
@@ -166713,6 +167334,70 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       if (typePanel.classList.contains('active')) this.sidebar.selectType();
     });
     this.makeSortable(box, true);
+    box.addEventListener('click', e => {
+      const elm = e.target;
+      if (elm.closest('.is-container')) return;
+      let link = elm.closest('a');
+
+      if (link) {
+        let url = link.getAttribute('href');
+
+        if (url) {
+          if (url.indexOf('#') === 0 && url.trim() !== '#') {
+            if (url.indexOf('#section') === 0) {
+              let num = url.replace('#section', '');
+
+              if (!isNaN(parseInt(num))) {
+                let sections = this.doc.querySelectorAll('.is-section');
+                let gotoSection;
+                let x = 0;
+                sections.forEach(function (section) {
+                  if (!dom.hasClass(section, 'is-section-navbar')) {
+                    if (x === num - 1) {
+                      gotoSection = section;
+                    }
+
+                    x++;
+                  }
+                });
+
+                if (gotoSection) {
+                  this.scrollTo(gotoSection);
+                }
+
+                e.preventDefault();
+              }
+            } else {
+              let bookmark = this.doc.querySelector(url);
+
+              if (bookmark) {
+                this.scrollTo(bookmark);
+                e.preventDefault();
+              }
+            }
+          } else {
+            /*
+            // Will go to the link
+            const answer = window.confirm(
+                out('Do you really want to leave?')
+            );
+            // Cancel the navigation and stay on the same page
+            if (!answer) {
+                e.preventDefault();
+            }
+            e.stopImmediatePropagation();
+            */
+            const answer = window.confirm(out('Do you want to open the link?'));
+
+            if (answer) {
+              window.open(url, '_blank');
+            }
+
+            e.preventDefault();
+          }
+        }
+      }
+    });
   } // boxSetup
   // Make list inside plugin element sortable
 
@@ -166946,7 +167631,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     let newSection;
     let arrSections = [];
 
-    if (newArea.indexOf('is-section-navbar') !== -1) {
+    if (newArea.indexOf('is-section-navbar') !== -1 || newArea.indexOf('data-cb-type="nav-menu"') !== -1) {
       // Insert first
       const sectionNavbar = this.wrapperEl.querySelector('.is-section-navbar');
 
@@ -167488,6 +168173,21 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       sectionTool.style.display = 'block';
       sectionTool.style.transform = 'scale(' + 1 / zoom + ')';
       sectionTool.style.transformOrigin = 'top right';
+    }
+
+    const btnSectionUp = sectionTool.querySelector('.btn-move-section-up');
+    const btnSectionDown = sectionTool.querySelector('.btn-move-section-down');
+    const btnSectionRemove = sectionTool.querySelector('.btn-section-remove');
+
+    if (box.offsetHeight < 160) {
+      btnSectionUp.style.display = 'none';
+      btnSectionDown.style.display = 'none';
+      btnSectionRemove.style.display = 'none';
+      sectionTool.style.top = '17px'; //'calc(50% - 17px)';
+    } else {
+      btnSectionUp.style.display = '';
+      btnSectionDown.style.display = '';
+      btnSectionRemove.style.display = '';
     } //new box tool
 
 
@@ -167558,6 +168258,14 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
           }
         }
       }
+    }
+
+    const content = box.querySelector('.is-container');
+    const plugin = box.querySelector('[data-cb-type]');
+
+    if (!content && plugin) {
+      boxTool.style.zIndex = -10;
+      boxTool.style.visibility = 'hidden';
     } // tools scaling for iframe
 
 
@@ -168156,7 +168864,12 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     this.cleanupUnused(); // Clean pinned sections
 
     const wrapperEl = this.wrapperEl.cloneNode(true); // Clone the child element
+    // Pause all videos in the clone immediately
 
+    const videos = wrapperEl.querySelectorAll('video');
+    videos.forEach(video => {
+      video.pause(); // video.muted = true;
+    });
     let pinWraps = wrapperEl.querySelectorAll('.pin-wrap');
     pinWraps.forEach(pinWrap => {
       const sectionElm = pinWrap.firstElementChild;
@@ -168173,7 +168886,9 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       }
     });
     const html = this.editor.readHtml(wrapperEl, bForView, true); // const html = this.editor.readHtml(this.wrapperEl, bForView, true);
+    // Clean up clone immediately
 
+    wrapperEl.remove();
     return html;
   }
 
@@ -168376,6 +169091,11 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     elms.forEach(elm => {
       elm.parentNode.removeChild(elm);
     });
+    elms = this.doc.querySelectorAll('.scroll-target, .last-box');
+    elms.forEach(elm => {
+      elm.classList.remove('scroll-target');
+      elm.classList.remove('last-box');
+    });
   }
 
   calculateVisibleArea(rect) {