@innovastudio/contentbox 1.6.169 → 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');
@@ -10322,7 +10342,7 @@ class Text {
     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) {
+    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
     }
     /*
@@ -11166,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;
@@ -11237,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');
@@ -12257,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>
         `;
@@ -12270,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();
       });
     });
   }
@@ -12291,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 = '';
+      }
+    }
   }
 
 }
@@ -12335,6 +12469,7 @@ class SettingsUIGenerator$1 {
       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
 
@@ -12788,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();
@@ -12914,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'));
 
@@ -13817,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>
@@ -13832,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>
@@ -15284,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;
@@ -15315,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.text) {
+      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 !== 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');
@@ -15354,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');
 
@@ -15369,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'));
 
@@ -16956,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>
@@ -17154,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', () => {
@@ -17579,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);
+          });
+        }
+      }
     }
   }
 
@@ -26439,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')) {
@@ -26821,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;
 
@@ -26917,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') {
@@ -27035,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
@@ -32813,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';
         }
@@ -32993,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(() => {
@@ -41091,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) {
@@ -41426,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));
     };
   };
@@ -41457,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 {
@@ -41470,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',
@@ -41501,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);
@@ -41521,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) {
@@ -41539,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),
@@ -41569,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,
@@ -41670,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({
@@ -41692,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,
@@ -41853,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();
@@ -41872,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();
@@ -41907,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) {
@@ -42504,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');
@@ -42526,13 +42808,20 @@ class HtmlUtil {
           elm.removeAttribute('data-item-id');
         });
       }
+      // 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');
       });
-      let elms = element.querySelectorAll('[data-scroll], [data-scroll-once]');
+      elms = element.querySelectorAll('[data-scroll], [data-scroll-once]');
       elms.forEach(elm => {
         elm.removeAttribute('data-scroll');
         elm.removeAttribute('data-scroll-once');
@@ -78561,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`);
+      // 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';
 
@@ -78939,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();
@@ -90434,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 => {
@@ -90837,7 +91162,7 @@ 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]');
@@ -90994,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;
 
@@ -125184,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) {
@@ -130222,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'));
@@ -130468,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;
@@ -157388,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;
@@ -160808,7 +161164,7 @@ class ContentBox {
       {
         id: 1,
         designId: 2,
-        name: 'Header'
+        name: 'Hero'
       }, {
         id: 2,
         designId: 1,
@@ -160863,7 +161219,8 @@ class ContentBox {
           ['#282828','dark','contentbuilder/themes/dark.css'], 
       ],
       */
-      backgroundColor: '#f1f1f1',
+      backgroundColor: 'transparent',
+      //'#f1f1f1',
       imageselect: '',
       fileselect: '',
       imageSelect: '',
@@ -164211,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;
 
@@ -164389,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();
           }
@@ -164457,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) {
@@ -166628,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)
@@ -166759,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');
@@ -166790,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');
@@ -167078,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
 
@@ -167311,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');
 
@@ -167853,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
 
 
@@ -167923,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
 
 
@@ -168521,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;
@@ -168538,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;
   }
 
@@ -168741,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) {