@innovastudio/contentbox 1.0.24 → 1.0.28

package/public/contentbox/contentbox.esm.js

@@ -363,12 +363,23 @@ class SideBar {
         sideIndex++;
       });
       html += '</div>';
-      html += '' + '<div id="divSidebarSections" class="is-sidebar-content" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<iframe id="ifrIdeasPanel" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>' + '<div id="divSidebarSnippets" class="is-sidebar-content scroll-darker"" style="max-width:275px;border-left: transparent 50px solid;box-sizing: border-box;">' + '' + '</div>' + '<div id="divSidebarSource" class="is-sidebar-content" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<div style="position:absolute;width:240px;height:35px;right:10px;top:5px;z-index:1;display:flex;">' + '<button title="' + out('Cancel') + '" id="btnViewHtmlCancel" style="height:38px" class="classic-secondary"> ' + out('Cancel') + ' </button>' + '<button title="' + out('Ok') + '" id="btnViewHtmlOk" style="height:38px" class="classic-primary"> ' + out('Ok') + ' </button>' + '</div>' + '<div style="height:100%;box-sizing:border-box;border-top:#f3f3f3 50px solid;position:relative">' + '<textarea id="inpViewHtml" style="width:100%;height:100%;resize: none;"></textarea>' + '<button title="' + out('Enlarge') + '" class="edit-html-larger" style="width:40px;height:40px;position:absolute;right:20px;top:5px;background:#fff;padding: 0;"><svg class="is-icon-flex" style="width:22px;height:22px;fill:rgb(170, 170, 170);"><use xlink:href="#ion-arrow-expand"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divSidebarTypography" class="is-sidebar-content" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div class="scroll-darker">' + '<div id="divSelector" style="position:fixed;top:0;right:0;width:100%;z-index:2;padding: 0 0 0 50px;box-sizing: border-box;"></div>' + '<div id="divStyles"></div>' + '</div>' + '</div>' + '<div id="divCustomSidebarArea1" class="is-sidebar-content" style="max-width:500px;">' + '<div style="padding:0 0 0 50px;box-sizing:border-box;">' + '<iframe id="ifrCustomSidebarArea1" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>' + '<div id="divCustomSidebarArea2" class="is-sidebar-content" style="max-width:500px;">' + '<div style="padding:0 0 0 50px;box-sizing:border-box;">' + '<iframe id="ifrCustomSidebarArea2" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>';
+      html += '' + '<div id="divSidebarSections" class="is-sidebar-content" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<iframe id="ifrIdeasPanel" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>' + '<div id="divSidebarSnippets" class="is-sidebar-content scroll-darker"" style="max-width:275px;border-left: transparent 50px solid;box-sizing: border-box;">' + '' + '</div>' + '<div id="divSidebarSource" class="is-sidebar-content" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div>' + '<div style="position:absolute;width:240px;height:35px;right:10px;top:5px;z-index:1;display:flex;">' + '<button title="' + out('Cancel') + '" id="btnViewHtmlCancel" style="height:38px" class="classic-secondary"> ' + out('Cancel') + ' </button>' + '<button title="' + out('Ok') + '" id="btnViewHtmlOk" style="height:38px" class="classic-primary"> ' + out('Ok') + ' </button>' + '</div>' + '<div style="height:100%;box-sizing:border-box;border-top:#f3f3f3 50px solid;position:relative">' + '<textarea id="inpViewHtml" style="width:100%;height:100%;resize: none;"></textarea>' + '<button title="' + out('Enlarge') + '" class="edit-html-larger" style="width:40px;height:40px;position:absolute;right:20px;top:5px;background:#fff;padding: 0;"><svg class="is-icon-flex" style="width:22px;height:22px;fill:rgb(170, 170, 170);"><use xlink:href="#ion-arrow-expand"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divSidebarTypography" class="is-sidebar-content" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;">' + '<div class="scroll-darker">' + '<div style="padding: 15px 0 0 20px">' + '<div class="is-sidebar-title" style="margin-bottom:12px;">' + out('Typography Styles') + '</div>' + '<div>' + out('Apply to') + ':</div>' + '<div style="display:flex;justify-content:space-between;align-items: center;">' + '<div class="typo-target-default" style="display:flex">' + '<label><input type="radio" name="typoTarget" value="page"> <span>' + out('Page') + '</span></label>' + '<label><input type="radio" name="typoTarget" value="section" checked> <span>' + out('Section') + '</span></label>' + '</div>' + '<div class="typo-target-box" style="display: flex;">' + '<span>' + out('Active Box') + '</span>' + '</div>' + '<button title="' + out('Clear') + '" id="btnTypoClear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '<div id="divSelector"></div>' + '<div id="divStyles"></div>' + '</div>' + '</div>' + '<div id="divCustomSidebarArea1" class="is-sidebar-content" style="max-width:500px;">' + '<div style="padding:0 0 0 50px;box-sizing:border-box;">' + '<iframe id="ifrCustomSidebarArea1" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>' + '<div id="divCustomSidebarArea2" class="is-sidebar-content" style="max-width:500px;">' + '<div style="padding:0 0 0 50px;box-sizing:border-box;">' + '<iframe id="ifrCustomSidebarArea2" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">' + '</iframe>' + '</div>' + '</div>';
     } else {
       html = '<div id="divSections" style="display:none"></div>' + '<div class="is-modal addsection">' + '<div style="max-width: 900px;">' + '<div id="divSectionList" class="is-section-list"></div>' + '</div>' + '</div>';
     }
+    /*
+    html += '<div class="is-modal applytypography">' +
+        '<div style="max-width: 400px;text-align:center;">' +
+            '<p>' + out('This page has one or more sections that have their own typography style.') + '</p>' +
+            '<label><input name="rdoApplyTypoStyle" type="radio" value="1">' + out('Replace all sections\' typography style.') + '</label><br>' +
+            '<label><input name="rdoApplyTypoStyle" type="radio" value="0">' + out('Keep sections\' specific typography style.') + '</label>' +
+            '<p><i>' + out('To apply typography style on a specific section, goto \'Content Style\' tab in Box Settings') + '</i></p>' +
+            '<button class="input-ok classic">' + out('Ok') + '</button>' +
+        '</div>' +
+    '</div>';
+    */
+
 
-    html += '<div class="is-modal applytypography">' + '<div style="max-width: 400px;text-align:center;">' + '<p>' + out('This page has one or more sections that have their own typography style.') + '</p>' + '<label><input name="rdoApplyTypoStyle" type="radio" value="1">' + out('Replace all sections\' typography style.') + '</label><br>' + '<label><input name="rdoApplyTypoStyle" type="radio" value="0">' + out('Keep sections\' specific typography style.') + '</label>' + '<p><i>' + out('To apply typography style on a specific section, goto \'Content Style\' tab in Box Settings') + '</i></p>' + '<button class="input-ok classic">' + out('Ok') + '</button>' + '</div>' + '</div>';
     dom$I.appendHtml(builderStuff, html);
 
     if (this.builder.useSidebar) {
@@ -400,7 +411,8 @@ class SideBar {
           let panelId = btn.getAttribute('data-content');
 
           if (panelId) {
-            if (panelId === 'divSidebarSections' || panelId === 'divSidebarTypography') {
+            if (panelId === 'divSidebarSections') {
+              // || panelId==='divSidebarTypography'
               const overlayHtml = '<div class="is-sidebar-overlay" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.000001);z-index: 1000;"></div>';
               dom$I.appendHtml(builderStuff, overlayHtml);
             }
@@ -443,6 +455,8 @@ class SideBar {
 
             if (cmd == 'typography') {
               btn.setAttribute('data-applyto', 'page');
+              builderStuff.querySelector('.typo-target-default').style.display = 'flex';
+              builderStuff.querySelector('.typo-target-box').style.display = 'none';
               this.viewTypography();
             }
           }
@@ -537,63 +551,61 @@ class SideBar {
         textarea.setAttribute('data-source-ok', '#btnViewHtmlOk');
         textarea.setAttribute('data-source-cancel', '#btnViewHtmlCancel');
         this.builder.editor.viewHtmlLarger();
+      });
+      let btnTypoClear = document.querySelector('#btnTypoClear');
+      btnTypoClear.addEventListener('click', () => {
+        this.boxTypography('', '', '');
       }); // Apply Typography on Page
 
+      /*
       let modalTypography = builderStuff.querySelector('.is-modal.applytypography');
       const btnOk = modalTypography.querySelector('.input-ok');
-      btnOk.addEventListener('click', () => {
-        const contentStylePath = this.builder.settings.contentStylePath;
-        let val = modalTypography.querySelector('input[name="rdoApplyTypoStyle"]:checked').value;
-
-        if (val === '1') {
-          // Replace all sections' style
+      btnOk.addEventListener('click', ()=>{
+           const contentStylePath = this.builder.settings.contentStylePath;
+           let val = modalTypography.querySelector('input[name="rdoApplyTypoStyle"]:checked').value;
+           if (val === '1') {
+              // Replace all sections' style
+              let links = document.getElementsByTagName('link');
+              for (let i = 0; i < links.length; i++) {
+                   if (links[i].getAttribute('data-name') === 'contentstyle') {
+                       let classname = links[i].getAttribute('data-class');
+                       //check if classname used in content
+                      if (this.builder.wrapperEl.querySelector('.' + classname)) {
+                          let elms = this.builder.wrapperEl.querySelectorAll('.' + classname);
+                          elms.forEach((elm)=>{
+                              dom.removeClass(elm, classname);
+                          });
+                          links[i].setAttribute('data-rel', '_del');
+                      }
+                   }
+              }
+              let dels = document.querySelectorAll('[data-rel="_del"]');
+              dels.forEach((item)=>{
+                  item.parentNode.removeChild(item);
+              });
+          }
+           //Cleanup (remove previous css that has prefix 'basetype-')
           let links = document.getElementsByTagName('link');
-
           for (let i = 0; i < links.length; i++) {
-            if (links[i].getAttribute('data-name') === 'contentstyle') {
-              let classname = links[i].getAttribute('data-class'); //check if classname used in content
-
-              if (this.builder.wrapperEl.querySelector('.' + classname)) {
-                let elms = this.builder.wrapperEl.querySelectorAll('.' + classname);
-                elms.forEach(elm => {
-                  dom$I.removeClass(elm, classname);
-                });
-                links[i].setAttribute('data-rel', '_del');
+              let src = links[i].href.toLowerCase();
+              if (src.indexOf('basetype-') != -1) {
+                  links[i].setAttribute('data-rel', '_del');
               }
-            }
           }
-
           let dels = document.querySelectorAll('[data-rel="_del"]');
-          dels.forEach(item => {
-            item.parentNode.removeChild(item);
+          dels.forEach((item)=>{
+              item.parentNode.removeChild(item);
           });
-        } //Cleanup (remove previous css that has prefix 'basetype-')
-
-
-        let links = document.getElementsByTagName('link');
-
-        for (let i = 0; i < links.length; i++) {
-          let src = links[i].href.toLowerCase();
-
-          if (src.indexOf('basetype-') != -1) {
-            links[i].setAttribute('data-rel', '_del');
+           //Add new page css
+          if (this.pageCss != '') {
+              dom.appendHtml(document.head, '<link href="' + contentStylePath + this.pageCss + '" rel="stylesheet">');
           }
-        }
-
-        let dels = document.querySelectorAll('[data-rel="_del"]');
-        dels.forEach(item => {
-          item.parentNode.removeChild(item);
-        }); //Add new page css
-
-        if (this.pageCss != '') {
-          dom$I.appendHtml(document.head, '<link href="' + contentStylePath + this.pageCss + '" rel="stylesheet">');
-        } // this.builder.hideModal($modal);
-
-
-        this.builder.hideModal(modalTypography); //Trigger Change event
-
-        this.builder.settings.onChange();
+           // this.builder.hideModal($modal);
+          this.builder.hideModal(modalTypography);
+           //Trigger Change event
+          this.builder.settings.onChange();
       });
+      */
     }
   } //constructor
 
@@ -728,9 +740,9 @@ class SideBar {
               html += '<div data-css="' + styles[i].css + '" data-sectioncss="' + styles[i].sectioncss + '" data-classname="' + styles[i].classname + '">' + '<div>[' + (i + 1) + '] ' + styles[i].caption + '</div>' + '<img src="' + contentStylePath + styles[i].img + '" /><span class="is-overlay"></span></div></div>';
             }
           }
-        }
+        } // html += '<div data-css="" data-sectioncss="" data-classname=""><img src="' + contentStylePath + '_clear.jpg" /><span class="is-overlay"></span></div></div>';
+
 
-        html += '<div data-css="" data-sectioncss="" data-classname=""><img src="' + contentStylePath + '_clear.jpg" /><span class="is-overlay"></span></div></div>';
         let selection = document.querySelector('#divStyles');
         selection.innerHTML = html;
         let elms = elementChildren(selection);
@@ -746,9 +758,9 @@ class SideBar {
 
     for (var i = 0; i < styles.length; i++) {
       stylehtml += '<div data-css="' + styles[i].css + '" data-sectioncss="' + styles[i].sectioncss + '" data-classname="' + styles[i].classname + '"><div>[' + (i + 1) + '] ' + styles[i].caption + '</div><img src="' + contentStylePath + styles[i].img + '" /><span class="is-overlay"></span></div></div>';
-    }
+    } // stylehtml += '<div data-css="" data-sectioncss="" data-classname=""><img src="' + contentStylePath + '_clear.jpg" /><span class="is-overlay"></span></div></div>';
+
 
-    stylehtml += '<div data-css="" data-sectioncss="" data-classname=""><img src="' + contentStylePath + '_clear.jpg" /><span class="is-overlay"></span></div></div>';
     var selection = document.querySelector('#divStyles');
     selection.innerHTML = stylehtml;
     var elms = elementChildren(selection);
@@ -765,21 +777,31 @@ class SideBar {
     const contentStylePath = this.builder.settings.contentStylePath; //Check apply to what
 
     let applyto = builderStuff.querySelector('.is-sidebar > button[data-command="typography"]').getAttribute('data-applyto');
+    let mode = document.querySelector('input[name="typoTarget"]:checked').value;
 
-    if (applyto === 'box') {
-      let activeBox = this.builder.activeBox;
-
-      if (activeBox) {
-        let classList = activeBox.getAttribute('class').split(/\s+/);
+    if (applyto !== 'box') {
+      if (mode === 'section') {
+        let activeSection = this.builder.activeSection;
+        let classList = activeSection.getAttribute('class').split(/\s+/);
         classList.forEach(item => {
           if (item.indexOf('type-') != -1) {
             //Remove previous class that has prefix 'type-'
-            dom$I.removeClass(activeBox, item);
+            dom$I.removeClass(activeSection, item);
           }
+        });
+        let boxes = activeSection.querySelectorAll('.is-box, .is-box-centered');
+        boxes.forEach(box => {
+          let classList = box.getAttribute('class').split(/\s+/);
+          classList.forEach(item => {
+            if (item.indexOf('type-') != -1) {
+              //Remove previous class that has prefix 'type-'
+              dom$I.removeClass(box, item);
+            }
+          });
         }); //Add new class
 
         if (className !== '') {
-          dom$I.addClass(activeBox, className); //Add css
+          dom$I.addClass(activeSection, className); //Add css
 
           let exist = false;
           let links = document.getElementsByTagName('link');
@@ -809,20 +831,30 @@ class SideBar {
         dels.forEach(item => {
           item.parentNode.removeChild(item);
         });
-      }
-    } else {
-      let bSectionStyleExists = false;
-      let links = document.getElementsByTagName('link');
+      } else if (mode === 'page') {
+        // Replace all sections' style
+        let links = document.getElementsByTagName('link');
 
-      for (let i = 0; i < links.length; i++) {
-        if (links[i].getAttribute('data-name') === 'contentstyle') {
-          bSectionStyleExists = true;
+        for (let i = 0; i < links.length; i++) {
+          if (links[i].getAttribute('data-name') === 'contentstyle') {
+            let classname = links[i].getAttribute('data-class'); //check if classname used in content
+
+            if (this.builder.wrapperEl.querySelector('.' + classname)) {
+              let elms = this.builder.wrapperEl.querySelectorAll('.' + classname);
+              elms.forEach(elm => {
+                dom$I.removeClass(elm, classname);
+              });
+              links[i].setAttribute('data-rel', '_del');
+            }
+          }
         }
-      }
 
-      if (!bSectionStyleExists) {
-        //Cleanup (remove previous css that has prefix 'basetype-')
-        let links = document.getElementsByTagName('link');
+        let dels = document.querySelectorAll('[data-rel="_del"]');
+        dels.forEach(item => {
+          item.parentNode.removeChild(item);
+        }); //Cleanup (remove previous css that has prefix 'basetype-')
+
+        links = document.getElementsByTagName('link');
 
         for (let i = 0; i < links.length; i++) {
           let src = links[i].href.toLowerCase();
@@ -832,7 +864,7 @@ class SideBar {
           }
         }
 
-        let dels = document.querySelectorAll('[data-rel="_del"]');
+        dels = document.querySelectorAll('[data-rel="_del"]');
         dels.forEach(item => {
           item.parentNode.removeChild(item);
         }); //Add new page css
@@ -840,13 +872,95 @@ class SideBar {
         if (pageCss != '') {
           dom$I.appendHtml(document.head, '<link href="' + contentStylePath + pageCss + '" rel="stylesheet">');
         }
-      } else {
-        // this.className = className;
-        // this.contentCss = contentCss;
-        this.pageCss = pageCss;
-        let modal = builderStuff.querySelector('.is-modal.applytypography');
-        this.builder.showModal(modal);
-        builderStuff.querySelectorAll('input[name="rdoApplyTypoStyle"]')[1].checked = true;
+      } else if (mode === 'container') {
+        let builderActive = document.querySelector('.builder-active');
+        if (!builderActive) return;
+        let box = dom$I.parentsHasClass(builderActive, 'is-box');
+        let classList = box.getAttribute('class').split(/\s+/);
+        classList.forEach(item => {
+          if (item.indexOf('type-') != -1) {
+            //Remove previous class that has prefix 'type-'
+            dom$I.removeClass(box, item);
+          }
+        }); //Add new class
+
+        if (className !== '') {
+          dom$I.addClass(box, className); //Add css
+
+          let exist = false;
+          let links = document.getElementsByTagName('link');
+
+          for (let i = 0; i < links.length; i++) {
+            let src = links[i].href.toLowerCase();
+            if (src.indexOf(contentCss.toLowerCase()) != -1) exist = true;
+          }
+
+          if (!exist) dom$I.appendHtml(document.head, '<link data-name="contentstyle" data-class="' + className + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
+        } //Cleanup unused
+
+
+        let links = document.getElementsByTagName('link');
+
+        for (let i = 0; i < links.length; i++) {
+          if (links[i].getAttribute('data-name') === 'contentstyle') {
+            let classname = links[i].getAttribute('data-class'); //check if classname used in content
+
+            if (!this.builder.wrapperEl.querySelector('.' + classname)) {
+              links[i].setAttribute('data-rel', '_del');
+            }
+          }
+        }
+
+        let dels = document.querySelectorAll('[data-rel="_del"]');
+        dels.forEach(item => {
+          item.parentNode.removeChild(item);
+        });
+      }
+    }
+
+    if (applyto === 'box') {
+      let activeBox = this.builder.activeBox;
+
+      if (activeBox) {
+        let classList = activeBox.getAttribute('class').split(/\s+/);
+        classList.forEach(item => {
+          if (item.indexOf('type-') != -1) {
+            //Remove previous class that has prefix 'type-'
+            dom$I.removeClass(activeBox, item);
+          }
+        }); //Add new class
+
+        if (className !== '') {
+          dom$I.addClass(activeBox, className); //Add css
+
+          let exist = false;
+          let links = document.getElementsByTagName('link');
+
+          for (let i = 0; i < links.length; i++) {
+            let src = links[i].href.toLowerCase();
+            if (src.indexOf(contentCss.toLowerCase()) != -1) exist = true;
+          }
+
+          if (!exist) dom$I.appendHtml(document.head, '<link data-name="contentstyle" data-class="' + className + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
+        } //Cleanup unused
+
+
+        let links = document.getElementsByTagName('link');
+
+        for (let i = 0; i < links.length; i++) {
+          if (links[i].getAttribute('data-name') === 'contentstyle') {
+            let classname = links[i].getAttribute('data-class'); //check if classname used in content
+
+            if (!this.builder.wrapperEl.querySelector('.' + classname)) {
+              links[i].setAttribute('data-rel', '_del');
+            }
+          }
+        }
+
+        let dels = document.querySelectorAll('[data-rel="_del"]');
+        dels.forEach(item => {
+          item.parentNode.removeChild(item);
+        });
       }
     } //Trigger Change event
 
@@ -1771,7 +1885,10 @@ class EditSection {
     this.builder = builder;
     const builderStuff = this.builder.builderStuff;
     this.builderStuff = builderStuff;
-    let html = '<div class="is-modal delsectionconfirm">' + '<div style="max-width: 400px;">' + '<p style="margin-bottom: 25px;text-align:center;">' + out('Are you sure you want to delete this section?') + '</p>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editsection">' + '<div class="is-modal-content" style="max-width: 270px;padding:0;">' + '<div class="is-modal-bar is-draggable">' + out('Section Settings') + '</div>' + '<div style="padding:30px 20px 20px;">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move Section') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Move Up') + '" class="cmd-section-up" style="">&#8593;</button>' + '<button title="' + out('Move Down') + '" class="cmd-section-down" style="border-left:none;">&#8595;</button>' + '<button title="' + out('Move to Top') + '" class="cmd-section-top" style="border-left:none;"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8676;</span></button>' + '<button title="' + out('Move to Bottom') + '" class="cmd-section-bottom" style="border-left:none;"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8677;</span></button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Height') + ':</div>' + '<div style="display:flex">' + '<button class="cmd-section-height" data-value="0">Auto</button>' + '<button class="cmd-section-height" data-value="20" style="border-left:none;">20%</button>' + '<button class="cmd-section-height" data-value="30" style="border-left:none;">30%</button>' + '<button class="cmd-section-height" data-value="40" style="border-left:none;">40%</button>' + '</div>' + '<div style="display:flex">' + '<button class="cmd-section-height" data-value="50" style="border-top:none;">50%</button>' + '<button class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button>' + '<button class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button>' + '<button class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + '<label for="chkScrollIcon" style="margin:0;"><input id="chkScrollIcon" type="checkbox" /> ' + out('Scroll Icon') + '</label>' + '</div>' + '<div style="display:flex;padding-top:10px;">' + '<button title="' + out('Light') + '" class="cmd-section-scroll" data-value="light" style="min-width:80px;">' + out('Light') + '</button>' + '<button title="' + out('Dark') + '" class="cmd-section-scroll" data-value="dark" style="border-left:none;min-width:80px;">' + out('Dark') + '</button>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>' + '' + '<div class="is-modal editmodule">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Module Settings') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '<input id="hidModuleCode" type="hidden" />' + '<input id="hidModuleSettings" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editcustomcode">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Custom Code (Javascript Allowed)') + '</div>' + '<textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea>' + '<input id="hidBoxCustomCode" type="hidden" />' + '<button class="cell-html-larger" style="width:35px;height:35px;position:absolute;right:0;top:0;background:transparent;z-index:2;"><svg class="is-icon-flex" style="width:19px;height:19px;fill:rgb(170, 170, 170);"><use xlink:href="#ion-arrow-expand"></use></svg></button>' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '';
+    let html = '<div class="is-modal delsectionconfirm">' + '<div style="max-width: 400px;">' + '<p style="margin-bottom: 25px;text-align:center;">' + out('Are you sure you want to delete this section?') + '</p>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editsection">' + '<div class="is-modal-content" style="max-width:292px;padding:0;">' + '<div class="is-modal-bar is-draggable">' + out('Section Settings') + '</div>' + '<div style="padding:30px 20px 20px;">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move Section') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Move Up') + '" class="cmd-section-up" style="">&#8593;</button>' + '<button title="' + out('Move Down') + '" class="cmd-section-down" style="border-left:none;">&#8595;</button>' + '<button title="' + out('Move to Top') + '" class="cmd-section-top" style="border-left:none;"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8676;</span></button>' + '<button title="' + out('Move to Bottom') + '" class="cmd-section-bottom" style="border-left:none;"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8677;</span></button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Height') + ':</div>' + '<div style="display:flex">' +
+    /*
+    '<button title="Auto" class="cmd-section-height" data-value="0">Auto</button>' + */
+    '<button title="20%" class="cmd-section-height" data-value="20" style="border-left:none;">20%</button>' + '<button title="25%" class="cmd-section-height" data-value="25" style="border-left:none;">25%</button>' + '<button title="30%" class="cmd-section-height" data-value="30" style="border-left:none;">30%</button>' + '<button title="40%" class="cmd-section-height" data-value="40" style="border-left:none;">40%</button>' + '<button title="50%" class="cmd-section-height" data-value="50" style="border-left:none;">50%</button>' + '</div>' + '<div style="display:flex">' + '<button title="60%" class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button>' + '<button title="70%" class="cmd-section-height" data-value="70" style="border-left:none;border-top:none;">70%</button>' + '<button title="75%" class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button>' + '<button title="80%" class="cmd-section-height" data-value="80" style="border-left:none;border-top:none;">80%</button>' + '<button title="100%" class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('xs') + '" class="cmd-box-spacing" data-value="default" style="border-left:none;">' + out('xs') + '</button>' + '<button title="' + out('sm') + '" class="cmd-box-spacing" data-value="sm" style="border-left:none;">' + out('sm') + '</button>' + '<button title="' + out('m') + '" class="cmd-box-spacing" data-value="m" style="border-left:none;">' + out('m') + '</button>' + '<button title="' + out('lg') + '" class="cmd-box-spacing" data-value="lg" style="border-left:none;">' + out('lg') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-box-spacing" data-value="none" style="border-left:none;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '<div style="display:none;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + '<label for="chkScrollIcon" style="margin:0;"><input id="chkScrollIcon" type="checkbox" /> ' + out('Scroll Icon') + '</label>' + '</div>' + '<div style="display:flex;padding-top:10px;">' + '<button title="' + out('Light') + '" class="cmd-section-scroll" data-value="light" style="min-width:80px;">' + out('Light') + '</button>' + '<button title="' + out('Dark') + '" class="cmd-section-scroll" data-value="dark" style="border-left:none;min-width:80px;">' + out('Dark') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;padding-bottom:3px;">' + '<div style="padding-top:20px;padding-bottom:3px;">' + out('Scroll Button') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button class="cmd-scroll-preset" data-command="1" title="' + out('Apply') + '" type="button">1</button>' + '<button class="cmd-scroll-preset" data-command="2" title="' + out('Apply') + '" type="button">2</button>' + '<button class="cmd-scroll-preset" data-command="3" title="' + out('Apply') + '" type="button">3</button>' + '<button class="cmd-scroll-preset" data-command="4" title="' + out('Apply') + '" type="button">4</button>' + '<button class="cmd-scroll-preset" data-command="5" title="' + out('Apply') + '" type="button">5</button>' + '<button class="cmd-scroll-preset" data-command="6" title="' + out('Apply') + '" type="button">6</button>' + '<button class="cmd-scroll-preset" data-command="7" title="' + out('Apply') + '" type="button">7</button>' + '<button class="cmd-scroll-preset" data-command="8" title="' + out('Apply') + '" type="button">8</button>' + '<button class="cmd-scroll-preset" data-command="9" title="' + out('Apply') + '" type="button">9</button>' + '<button class="cmd-scroll-preset" data-command="10" title="' + out('Apply') + '" type="button">10</button>' + '<button class="cmd-scroll-preset" data-command="11" title="' + out('Apply') + '" type="button">11</button>' + '<button class="cmd-scroll-preset" data-command="12" title="' + out('Apply') + '" type="button">12</button>' + '<button class="cmd-scroll-preset" data-command="13" title="' + out('Apply') + '" type="button">13</button>' + '<button class="cmd-scroll-preset" data-command="14" title="' + out('Apply') + '" type="button">14</button>' + '<button class="cmd-scroll-preset" data-command="" title="' + out('Remove') + '" type="button"><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>' + '' + '<div class="is-modal editmodule">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Module Settings') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '<input id="hidModuleCode" type="hidden" />' + '<input id="hidModuleSettings" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editcustomcode">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Custom Code (Javascript Allowed)') + '</div>' + '<textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea>' + '<input id="hidBoxCustomCode" type="hidden" />' + '<button class="cell-html-larger" style="width:35px;height:35px;position:absolute;right:0;top:0;background:transparent;z-index:2;"><svg class="is-icon-flex" style="width:19px;height:19px;fill:rgb(170, 170, 170);"><use xlink:href="#ion-arrow-expand"></use></svg></button>' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '';
     dom$H.appendHtml(builderStuff, html);
     let modalEditSection = builderStuff.querySelector('.is-modal.editsection');
     this.modalEditSection = modalEditSection;
@@ -1827,6 +1944,16 @@ class EditSection {
         this.builder.settings.onChange();
       });
     });
+    const btnBoxSpacing = modalEditSection.querySelectorAll('.cmd-box-spacing');
+    btnBoxSpacing.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.builder.editor.saveForUndo();
+        let val = btn.getAttribute('data-value');
+        this.boxSpacing(val); //Trigger Change event
+
+        this.builder.settings.onChange();
+      });
+    });
     const btnScrollIconStyle = modalEditSection.querySelectorAll('.cmd-section-scroll');
     btnScrollIconStyle.forEach(btn => {
       btn.addEventListener('click', () => {
@@ -1838,6 +1965,16 @@ class EditSection {
         this.builder.settings.onChange();
       });
     });
+    const btnScrollPreset = modalEditSection.querySelectorAll('.cmd-scroll-preset');
+    btnScrollPreset.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.builder.editor.saveForUndo();
+        let s = btn.getAttribute('data-command');
+        this.sectionScrollPreset(s); //Trigger Change event
+
+        this.builder.settings.onChange();
+      });
+    });
     const chkScrollIcon = modalEditSection.querySelector('#chkScrollIcon');
     chkScrollIcon.addEventListener('click', () => {
       this.builder.editor.saveForUndo();
@@ -1928,11 +2065,14 @@ class EditSection {
     activeSection.style.height = '';
     dom$H.removeClass(activeSection, 'is-section-auto');
     dom$H.removeClass(activeSection, 'is-section-20');
+    dom$H.removeClass(activeSection, 'is-section-25');
     dom$H.removeClass(activeSection, 'is-section-30');
     dom$H.removeClass(activeSection, 'is-section-40');
     dom$H.removeClass(activeSection, 'is-section-50');
     dom$H.removeClass(activeSection, 'is-section-60');
+    dom$H.removeClass(activeSection, 'is-section-70');
     dom$H.removeClass(activeSection, 'is-section-75');
+    dom$H.removeClass(activeSection, 'is-section-80');
     dom$H.removeClass(activeSection, 'is-section-100');
 
     if (n === '0') {
@@ -1946,6 +2086,37 @@ class EditSection {
     this.builder.scrollTo(activeSection);
   }
 
+  boxSpacing(s) {
+    const activeSection = this.builder.activeSection;
+
+    if (s == 'none') {
+      dom$H.removeClass(activeSection, 'box-space');
+      dom$H.removeClass(activeSection, 'box-space-sm');
+      dom$H.removeClass(activeSection, 'box-space-m');
+      dom$H.removeClass(activeSection, 'box-space-lg');
+    } else {
+      dom$H.addClass(activeSection, 'box-space');
+    }
+
+    if (s === 'sm') {
+      dom$H.removeClass(activeSection, 'box-space-m');
+      dom$H.removeClass(activeSection, 'box-space-lg');
+      dom$H.addClass(activeSection, 'box-space-sm');
+    } else if (s == 'm') {
+      dom$H.removeClass(activeSection, 'box-space-sm');
+      dom$H.removeClass(activeSection, 'box-space-lg');
+      dom$H.addClass(activeSection, 'box-space-m');
+    } else if (s == 'lg') {
+      dom$H.removeClass(activeSection, 'box-space-sm');
+      dom$H.removeClass(activeSection, 'box-space-m');
+      dom$H.addClass(activeSection, 'box-space-lg');
+    } else if (s == 'default') {
+      dom$H.removeClass(activeSection, 'box-space-sm');
+      dom$H.removeClass(activeSection, 'box-space-m');
+      dom$H.removeClass(activeSection, 'box-space-lg');
+    }
+  }
+
   sectionUseScroll() {
     const activeSection = this.builder.activeSection;
     const modalEditSection = this.modalEditSection;
@@ -1979,6 +2150,313 @@ class EditSection {
     }
   }
 
+  sectionScrollPreset(s) {
+    const section = this.builder.activeSection;
+    const scroll = section.querySelector('.is-arrow-down');
+    if (scroll) scroll.parentNode.removeChild(scroll);
+
+    if (s === '1') {
+      //light
+      let color = '#fff';
+      let bgcolor = 'rgb(173 173 173 / 26%)';
+      let svgfill = '';
+
+      {
+        svgfill = `fill:${color};`;
+      }
+
+      let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="10" style="width: 30px;margin-left: -15px;height: 40px;">
+                <a href="#" style="border-radius: 5px;background:${bgcolor};box-shadow:0px 5px 5px 0px rgba(0, 0, 0, 0.03);">
+                <svg style="width:17px;height:17px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                <g>
+                <path d="M277.375 85v259.704l119.702-119.702L427 256 256 427 85 256l29.924-29.922 119.701 118.626V85h42.75z"></path>
+                </g>
+                </svg>
+                </a>
+                </div>`;
+      section.insertAdjacentHTML('beforeend', html);
+    }
+
+    if (s === '2') {
+      //dark
+      let color = '#000';
+      let bgcolor = 'rgb(221 221 221 / 30%)';
+      let svgfill = '';
+
+      {
+        svgfill = `fill:${color};`;
+      }
+
+      let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="10" style="width: 30px;margin-left: -15px;height: 40px;">
+                <a href="#" style="border-radius: 5px;background:${bgcolor};box-shadow:0px 5px 5px 0px rgba(0, 0, 0, 0.03);">
+                <svg style="width:17px;height:17px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                <g>
+                <path d="M277.375 85v259.704l119.702-119.702L427 256 256 427 85 256l29.924-29.922 119.701 118.626V85h42.75z"></path>
+                </g>
+                </svg>
+                </a>
+                </div>`;
+      section.insertAdjacentHTML('beforeend', html);
+    }
+
+    if (s === '3') {
+      //light
+      let color = '#fff';
+      let bgcolor = 'rgba(193, 193, 193, 0.18)';
+      let svgfill = '';
+
+      {
+        svgfill = `fill:${color};`;
+      }
+
+      let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="5">
+                <a href="#" style="background:${bgcolor};border-radius:500px">
+                <svg style="width:22px;height:22px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                <g>
+                <path d="M396.6 160l19.4 20.7L256 352 96 180.7l19.3-20.7L256 310.5z"></path>
+                </g>
+                </svg>
+                </a>
+                </div>`;
+      section.insertAdjacentHTML('beforeend', html);
+    }
+
+    if (s === '4') {
+      //dark
+      let color = '#000';
+      let bgcolor = 'rgba(193, 193, 193, 0.18)';
+      let svgfill = '';
+
+      {
+        svgfill = `fill:${color};`;
+      }
+
+      let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="5">
+                <a href="#" style="background:${bgcolor};border-radius:500px">
+                <svg style="width:22px;height:22px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                <g>
+                <path d="M396.6 160l19.4 20.7L256 352 96 180.7l19.3-20.7L256 310.5z"></path>
+                </g>
+                </svg>
+                </a>
+                </div>`;
+      section.insertAdjacentHTML('beforeend', html);
+    }
+
+    if (s === '5') {
+      let color = '#fff';
+      let svgfill = '';
+      svgfill = `fill:${color};`;
+      let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="1">
+                <a href="#" style="background:none;border-radius:unset;">
+                <svg style="width:30px;height:30px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                    <g>
+                        <path d="M349.7 322.2c-3.1-3.1-8-3-11.3 0L264 388.6V104c0-4.4-3.6-8-8-8s-8 3.6-8 8v284.6l-74.4-66.3c-3.4-2.9-8.1-3.2-11.2-.1-3.1 3.1-3.3 8.5-.1 11.4 0 0 87 79.2 88 80s2.8 2.4 5.7 2.4 4.9-1.6 5.7-2.4 88-80 88-80c1.5-1.5 2.3-3.6 2.3-5.7s-.8-4.1-2.3-5.7z"></path>
+                    </g>
+                </svg>
+                </a>
+                </div>`;
+      section.insertAdjacentHTML('beforeend', html);
+    }
+
+    if (s === '6') {
+      let color = '#000';
+      let svgfill = '';
+      svgfill = `fill:${color};`;
+      let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="1">
+                <a href="#" style="background:none;border-radius:unset;">
+                <svg style="width:30px;height:30px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                    <g>
+                        <path d="M349.7 322.2c-3.1-3.1-8-3-11.3 0L264 388.6V104c0-4.4-3.6-8-8-8s-8 3.6-8 8v284.6l-74.4-66.3c-3.4-2.9-8.1-3.2-11.2-.1-3.1 3.1-3.3 8.5-.1 11.4 0 0 87 79.2 88 80s2.8 2.4 5.7 2.4 4.9-1.6 5.7-2.4 88-80 88-80c1.5-1.5 2.3-3.6 2.3-5.7s-.8-4.1-2.3-5.7z"></path>
+                    </g>
+                </svg>
+                </a>
+                </div>`;
+      section.insertAdjacentHTML('beforeend', html);
+    }
+
+    if (s === '7') {
+      let color = '#fff';
+      let border = 'border:#333 2px solid;';
+      let svgfill = '';
+
+      {
+        border = `border:${color} 2px solid;`;
+        svgfill = `fill:${color};`;
+      }
+
+      let html = `<div data-target="border,svgfill" class="is-arrow-down bounce" data-scroll-preset="2" style="width: 30px;margin-left: -15px;height: 40px;">
+                <a href="#" style="${border}border-radius: 5px;background:none;">
+                <svg style="width:17px;height:17px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                <g>
+                <path d="M277.375 85v259.704l119.702-119.702L427 256 256 427 85 256l29.924-29.922 119.701 118.626V85h42.75z"></path>
+                </g>
+                </svg>
+                </a>
+                </div>`;
+      section.insertAdjacentHTML('beforeend', html);
+    }
+
+    if (s === '8') {
+      let color = '#000';
+      let border = 'border:#333 2px solid;';
+      let svgfill = '';
+
+      {
+        border = `border:${color} 2px solid;`;
+        svgfill = `fill:${color};`;
+      }
+
+      let html = `<div data-target="border,svgfill" class="is-arrow-down bounce" data-scroll-preset="2" style="width: 30px;margin-left: -15px;height: 40px;">
+                <a href="#" style="${border}border-radius: 5px;background:none;">
+                <svg style="width:17px;height:17px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                <g>
+                <path d="M277.375 85v259.704l119.702-119.702L427 256 256 427 85 256l29.924-29.922 119.701 118.626V85h42.75z"></path>
+                </g>
+                </svg>
+                </a>
+                </div>`;
+      section.insertAdjacentHTML('beforeend', html);
+    }
+
+    if (s === '9') {
+      let color = '#fff';
+      let svgfill = '';
+
+      {
+        svgfill = `fill:${color};`;
+      }
+
+      let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="3">
+                <a href="#" style="background:none;border-radius:unset;">
+                <svg style="width:30px;height:30px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                <g>
+                <path d="M396.6 160l19.4 20.7L256 352 96 180.7l19.3-20.7L256 310.5z"></path>
+                </g>
+                </svg>
+                </a>
+                </div>`;
+      section.insertAdjacentHTML('beforeend', html);
+    }
+
+    if (s === '10') {
+      let color = '#000';
+      let svgfill = '';
+
+      {
+        svgfill = `fill:${color};`;
+      }
+
+      let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="3">
+                <a href="#" style="background:none;border-radius:unset;">
+                <svg style="width:30px;height:30px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                <g>
+                <path d="M396.6 160l19.4 20.7L256 352 96 180.7l19.3-20.7L256 310.5z"></path>
+                </g>
+                </svg>
+                </a>
+                </div>`;
+      section.insertAdjacentHTML('beforeend', html);
+    }
+
+    if (s === '11') {
+      let color = '#fff';
+      let svgfill = '';
+
+      {
+        svgfill = `fill:${color};`;
+      }
+
+      let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="4">
+                <a href="#" style="background:none;border-radius:unset;">
+                <svg style="width:60px;height:60px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                <g>
+                <path d="M396.6 160l19.4 20.7L256 352 96 180.7l19.3-20.7L256 310.5z"></path>
+                </g>
+                </svg>
+                </a>
+                </div>`;
+      section.insertAdjacentHTML('beforeend', html);
+    }
+
+    if (s === '12') {
+      let color = '#000';
+      let svgfill = '';
+
+      {
+        svgfill = `fill:${color};`;
+      }
+
+      let html = `<div data-target="svgfill" class="is-arrow-down bounce" data-scroll-preset="4">
+                <a href="#" style="background:none;border-radius:unset;">
+                <svg style="width:60px;height:60px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                <g>
+                <path d="M396.6 160l19.4 20.7L256 352 96 180.7l19.3-20.7L256 310.5z"></path>
+                </g>
+                </svg>
+                </a>
+                </div>`;
+      section.insertAdjacentHTML('beforeend', html);
+    }
+
+    if (s === '13') {
+      //light
+      let color = '#fff';
+      let border = 'border:#111 2px solid;';
+      let svgfill = '';
+
+      {
+        border = `border:${color} 2px solid;`;
+        svgfill = `fill:${color};`;
+      }
+
+      let html = `<div data-target="border,svgfill" class="is-arrow-down bounce" data-scroll-preset="7" style="width: 40px;margin-left: -20px;height: 35px;">
+                <a href="#" style="background:none;border-radius:unset;${border};">
+                <svg style="width:25px;height:25px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                <g>
+                <path d="M396.6 160l19.4 20.7L256 352 96 180.7l19.3-20.7L256 310.5z"></path>
+                </g>
+                </svg>
+                </a>
+                </div>`;
+      section.insertAdjacentHTML('beforeend', html);
+    }
+
+    if (s === '14') {
+      //dark
+      let color = '#000';
+      let border = 'border:#111 2px solid;';
+      let svgfill = '';
+
+      {
+        border = `border:${color} 2px solid;`;
+        svgfill = `fill:${color};`;
+      }
+
+      let html = `<div data-target="border,svgfill" class="is-arrow-down bounce" data-scroll-preset="7" style="width: 40px;margin-left: -20px;height: 35px;">
+                <a href="#" style="background:none;border-radius:unset;${border}">
+                <svg style="width:25px;height:25px;${svgfill}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                <g>
+                <path d="M396.6 160l19.4 20.7L256 352 96 180.7l19.3-20.7L256 310.5z"></path>
+                </g>
+                </svg>
+                </a>
+                </div>`;
+      section.insertAdjacentHTML('beforeend', html);
+    } // let refSection = section.querySelector('.is-section-tool');
+    // refSection.insertAdjacentHTML('beforebegin', html);
+
+
+    const scrollButton = section.querySelector('.is-arrow-down a');
+    if (scrollButton) scrollButton.addEventListener('click', e => {
+      // section.nextElementSibling.scrollIntoView({ behavior: 'smooth' });
+      this.builder.scrollTo(section.nextElementSibling);
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      return false;
+    });
+  }
+
 }
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -7189,7 +7667,7 @@ class EditBox {
     this.builder = builder;
     this.builderStuff = this.builder.builderStuff;
     const builderStuff = this.builderStuff;
-    let html = '' + '<div id="divBoxTool">' + '<form id="form-upload-cover" data-tooltip-top data-title="' + out('Cover') + '" target="frame-upload-cover" method="post" action="' + this.builder.coverImageHandler + '" enctype="multipart/form-data" style="position:relative;width:40px;height:40px;display:inline-block;float:left;background: rgb(90, 156, 38);">' + '<div style="width:40px;height:40px;overflow:hidden;">' + '<div style="position:absolute;width:100%;height:100%;"><svg class="is-icon-flex" style="position: absolute;top: 12px;left: 12px;fill:rgb(255,255,255);"><use xlink:href="#ion-image"></use></svg></div>' + '<input type="file" title="' + out('Cover') + '" id="fileCover" name="fileCover" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>' + '</div>' + '<input id="hidcustomval" name="hidcustomval" type="hidden" value="" />' + '<iframe id="frame-upload-cover" name="frame-upload-cover" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' + '</form>' + '<button id="btnEditBox" data-tooltip-top data-title="' + out('Box Settings') + '" title="' + out('Box Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button id="btnEditModule" data-tooltip-top data-title="' + out('Module Settings') + '" title="' + out('Module Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>' + '</div>' + '' + '<div class="is-modal editmodule">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Module Settings') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '<input id="hidModuleCode" type="hidden" />' + '<input id="hidModuleSettings" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editcustomcode">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Custom Code (Javascript Allowed)') + '</div>' + '<textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea>' + '<input id="hidBoxCustomCode" type="hidden" />' + '<button class="cell-html-larger" style="width:35px;height:35px;position:absolute;right:0;top:0;background:transparent;z-index:2;"><svg class="is-icon-flex" style="width:19px;height:19px;fill:rgb(170, 170, 170);"><use xlink:href="#ion-arrow-expand"></use></svg></button>' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '<div class="is-modal editbox">' + '<div class="is-modal-content" style="max-width:380px;min-height:300px;padding:0">' + '<div class="is-modal-bar is-draggable">' + out('Box Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;">' + '<a id="tabBoxGeneral" href="" data-content="divBoxGeneral" class="active">' + out('General') + '</a>' + '<a id="tabBoxContentContainer" href="" data-content="divBoxContentContainer">' + out('Content') + '</a>' + '<a id="tabBoxContentText" href="" data-content="divBoxContentText">' + out('Text') + '</a>' + '<a id="tabBoxImage" href="" data-content="divBoxImage">' + out('Image') + '</a>' + '<a id="tabBoxAnimate" href="" data-content="divBoxAnimate">' + out('Animate') + '</a>' + '<a id="tabBoxClick" href="" data-content="divBoxClick">' + out('On Click') + '</a>' + '</div>' + '<div id="divBoxGeneral" class="is-tab-content" data-group="boxsettings" style="display:flex;padding-top:0">' + '<div id="divBoxSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Box Size') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-smaller" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-larger" style="width:40px;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divContentSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Content Size') + ':</div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<input class="inp-box-size" type="text" style="width:80px;height:35px;text-align:center;font-size:12px;" />' + '<button class="cmd-box-size" data-value="380" style="width:40px;border-left:none">380</button>' + '<button class="cmd-box-size" data-value="440" style="width:40px;border-left:none">440</button>' + '<button class="cmd-box-size" data-value="500" style="width:40px;border-left:none">500</button>' + '<button class="cmd-box-size" data-value="640" style="width:40px;border-left:none">640</button>' + '<button class="cmd-box-size" data-value="760" style="width:40px;border-left:none">760</button>' + '<button class="cmd-box-size" data-value="800" style="width:40px;border-top:none">800</button>' + '<button class="cmd-box-size" data-value="860" style="width:40px;border-top:none">860</button>' + '<button class="cmd-box-size" data-value="940" style="width:40px;border-top:none">940</button>' + '<button class="cmd-box-size" data-value="1020" style="width:40px;border-top:none;border-left:none">1020</button>' + '<button class="cmd-box-size" data-value="1100" style="width:40px;border-top:none;border-left:none">1100</button>' + '<button class="cmd-box-size" data-value="1200" style="width:40px;border-top:none;border-left:none">1200</button>' + '<button class="cmd-box-size" data-value="1400" style="width:40px;border-top:none;border-left:none">1400</button>' + '<button title="' + out('Decrease') + '" class="cmd-box-size" data-value="-" style="width:40px;border-top:none;border-left:none">-</button>' + '<button title="' + out('Increase') + '"class="cmd-box-size" data-value="+" style="width:40px;border-top:none;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divBoxBackgroundColor">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-box-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-box-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Image') + ':</div>' + '<div style="height:auto">' + '<div class="box-bgimage-preview"></div>' + '<div style="display: flex">' + '<button title="' + out('Image') + '" class="input-box-bgimage">' + '<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>' + '<span>' + out('Image') + '</span>' + '</button>' + '<button title="' + out('Remove') + '" class="input-box-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Adjust') + '" class="input-box-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxPickPhoto" class="is-settings" style="padding-top:20px">' + '<button class="cmd-box-pickphoto" data-value="" style="width:100%"><svg class="is-icon-flex" style=""><use xlink:href="#ion-image"></use></svg></button>' + '</div>' + '<p id="divNoBoxSettings" style="text-align: center;display:none;">' + out('This box has no available settings.') + '</p>' + '</div>' + '<div id="divBoxClick" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<label for="inpBoxLinkSource" style="display:block;padding-top:20px;">' + out('Open') + ':</label>' + '<div class="image-src" style="display:flex">' + '<input id="inpBoxLinkSource" class="input-src" type="text" style="height:38px">' + '<button title="' + out('Select') + '" class="input-select" style="flex:none;width:40px;height:38px;background:transparent;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>' + '<div class="image-larger5" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">' + '<form class="form-upload-larger" target="frameTargetBoxLinkUpload" method="post" action="' + this.builder.largerImageHandler + '" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;">' + '<input id="hidRefId5" name="hidRefId" type="hidden" value="">' + '<svg class="is-icon-flex" style="position: absolute;top: 10px;left: 15px;"><use xlink:href="#ion-image"></use></svg>' + '<input title="' + out('Select') + '" id="fileImage5" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">' + '</form>' + '<iframe id="frameTargetBoxLinkUpload" name="frameTargetBoxLinkUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' + '</div>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-testclick">' + out('Test') + '</button>' + '</div>' + '</div>';
+    let html = '' + '<div id="divBoxTool">' + '<form id="form-upload-cover" data-tooltip-top data-title="' + out('Background Image') + '" target="frame-upload-cover" method="post" action="' + this.builder.coverImageHandler + '" enctype="multipart/form-data" style="position:relative;width:40px;height:40px;display:inline-block;float:left;background: rgb(90, 156, 38);">' + '<div style="width:40px;height:40px;overflow:hidden;">' + '<div style="position:absolute;width:100%;height:100%;"><svg class="is-icon-flex" style="position: absolute;top: 12px;left: 12px;fill:rgb(255,255,255);"><use xlink:href="#ion-image"></use></svg></div>' + '<input type="file" title="' + out('Background Image') + '" id="fileCover" name="fileCover" accept="image/*" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"/>' + '</div>' + '<input id="hidcustomval" name="hidcustomval" type="hidden" value="" />' + '<iframe id="frame-upload-cover" name="frame-upload-cover" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' + '</form>' + '<button id="btnEditBox" data-tooltip-top data-title="' + out('Box Settings') + '" title="' + out('Box Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '<button id="btnEditModule" data-tooltip-top data-title="' + out('Module Settings') + '" title="' + out('Module Settings') + '"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>' + '</div>' + '' + '<div class="is-modal editmodule">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Module Settings') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '<input id="hidModuleCode" type="hidden" />' + '<input id="hidModuleSettings" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editcustomcode">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Custom Code (Javascript Allowed)') + '</div>' + '<textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea>' + '<input id="hidBoxCustomCode" type="hidden" />' + '<button class="cell-html-larger" style="width:35px;height:35px;position:absolute;right:0;top:0;background:transparent;z-index:2;"><svg class="is-icon-flex" style="width:19px;height:19px;fill:rgb(170, 170, 170);"><use xlink:href="#ion-arrow-expand"></use></svg></button>' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '<div class="is-modal editbox">' + '<div class="is-modal-content" style="max-width:380px;min-height:300px;padding:0">' + '<div class="is-modal-bar is-draggable">' + out('Box Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;">' + '<a id="tabBoxGeneral" href="" data-content="divBoxGeneral" class="active">' + out('General') + '</a>' + '<a id="tabBoxContentContainer" href="" data-content="divBoxContentContainer">' + out('Content') + '</a>' + '<a id="tabBoxContentText" href="" data-content="divBoxContentText">' + out('Text') + '</a>' + '<a id="tabBoxImage" href="" data-content="divBoxImage">' + out('Image') + '</a>' + '<a id="tabBoxAnimate" href="" data-content="divBoxAnimate">' + out('Animate') + '</a>' + '<a id="tabBoxClick" href="" data-content="divBoxClick">' + out('On Click') + '</a>' + '</div>' + '<div id="divBoxGeneral" class="is-tab-content" data-group="boxsettings" style="display:flex;padding-top:0">' + '<div id="divBoxSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Box Size') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-smaller" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-larger" style="width:40px;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divContentSize">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Content Size') + ':</div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<input class="inp-box-size" type="text" style="width:80px;height:35px;text-align:center;font-size:12px;" />' + '<button class="cmd-box-size" data-value="380" style="width:40px;border-left:none">380</button>' + '<button class="cmd-box-size" data-value="440" style="width:40px;border-left:none">440</button>' + '<button class="cmd-box-size" data-value="500" style="width:40px;border-left:none">500</button>' + '<button class="cmd-box-size" data-value="640" style="width:40px;border-left:none">640</button>' + '<button class="cmd-box-size" data-value="760" style="width:40px;border-left:none">760</button>' + '<button class="cmd-box-size" data-value="800" style="width:40px;border-top:none">800</button>' + '<button class="cmd-box-size" data-value="860" style="width:40px;border-top:none">860</button>' + '<button class="cmd-box-size" data-value="940" style="width:40px;border-top:none">940</button>' + '<button class="cmd-box-size" data-value="1020" style="width:40px;border-top:none;border-left:none">1020</button>' + '<button class="cmd-box-size" data-value="1100" style="width:40px;border-top:none;border-left:none">1100</button>' + '<button class="cmd-box-size" data-value="1200" style="width:40px;border-top:none;border-left:none">1200</button>' + '<button class="cmd-box-size" data-value="1400" style="width:40px;border-top:none;border-left:none">1400</button>' + '<button title="' + out('Decrease') + '" class="cmd-box-size" data-value="-" style="width:40px;border-top:none;border-left:none">-</button>' + '<button title="' + out('Increase') + '"class="cmd-box-size" data-value="+" style="width:40px;border-top:none;border-left:none">+</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div id="divBoxBackgroundColor">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-box-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-box-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Image') + ':</div>' + '<div style="height:auto">' + '<div class="box-bgimage-preview"></div>' + '<div style="display: flex">' + '<button title="' + out('Image') + '" class="input-box-bgimage">' + '<svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>' + '<span>' + out('Image') + '</span>' + '</button>' + '<button title="' + out('Remove') + '" class="input-box-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>' + '<button title="' + out('Adjust') + '" class="input-box-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxPickPhoto" class="is-settings" style="padding-top:20px">' + '<button class="cmd-box-pickphoto" data-value="" style="width:100%"><svg class="is-icon-flex" style=""><use xlink:href="#ion-image"></use></svg></button>' + '</div>' + '<p id="divNoBoxSettings" style="text-align: center;display:none;">' + out('This box has no available settings.') + '</p>' + '</div>' + '<div id="divBoxClick" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<label for="inpBoxLinkSource" style="display:block;padding-top:20px;">' + out('Open') + ':</label>' + '<div class="image-src" style="display:flex">' + '<input id="inpBoxLinkSource" class="input-src" type="text" style="height:38px">' + '<button title="' + out('Select') + '" class="input-select" style="flex:none;width:40px;height:38px;background:transparent;"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>' + '<div class="image-larger5" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">' + '<form class="form-upload-larger" target="frameTargetBoxLinkUpload" method="post" action="' + this.builder.largerImageHandler + '" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;">' + '<input id="hidRefId5" name="hidRefId" type="hidden" value="">' + '<svg class="is-icon-flex" style="position: absolute;top: 10px;left: 15px;"><use xlink:href="#ion-image"></use></svg>' + '<input title="' + out('Select') + '" id="fileImage5" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;">' + '</form>' + '<iframe id="frameTargetBoxLinkUpload" name="frameTargetBoxLinkUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe>' + '</div>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-testclick">' + out('Test') + '</button>' + '</div>' + '</div>';
     html += '<div id="divBoxContentText" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Text Style') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Light') + '" class="cmd-box-textcolor" data-value="light">' + out('Light') + '</button>' + '<button title="' + out('Dark') + '" class="cmd-box-textcolor" data-value="dark" style="border-left:none;">' + out('Dark') + '</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Transparency') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Increase') + '" class="cmd-box-textopacity" data-value="+" style="width:40px"> + </button>' + '<button title="' + out('Decrease') + '" class="cmd-box-textopacity" data-value="-" style="width:40px;border-left:none;"> - </button>' + '<button title="' + out('Not Set') + '" class="cmd-box-textopacity" data-value="" style="border-left:none;">' + out('Not Set') + '</button>' + '<br style="clear:both">' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">Align:</div>' + '<div style="display:flex">' + '<button title="' + out('Align Left') + '" class="cmd-box-textalign" data-value="left" style="width:40px"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-left"></use></svg></button>' + '<button title="' + out('Align Center') + '" class="cmd-box-textalign" data-value="center" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-center"></use></svg></button>' + '<button title="' + out('Align Right') + '" class="cmd-box-textalign" data-value="right" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-right"></use></svg></button>' + '<button title="' + out('Align Full') + '" class="cmd-box-textalign" data-value="justify" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-full"></use></svg></button>' + '<br style="clear:both">' + '</div>' + '</div>' + (this.builder.settings.enableContentStyle ? '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Typography') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Change Style') + '" class="cmd-box-typography" data-value="+"> ' + out('Change Style') + ' </button>' + '<br style="clear:both">' + '</div>' + '</div>' : '') + '</div>' + '<div id="divBoxContentContainer" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Position') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Top Left') + '" class="cmd-box-content-pos" data-value="topleft" style="width:40px;">&#8598;</button>' + '<button title="' + out('Top Center') + '" class="cmd-box-content-pos" data-value="topcenter" style="width:40px;border-left:none;">&#8593;</button>' + '<button title="' + out('Top Right') + '" class="cmd-box-content-pos" data-value="topright" style="width:40px;border-left:none;">&#8599;</button>' + '</div>' + '<div style="display:flex">' + '<button title="' + out('Middle Left') + '" class="cmd-box-content-pos" data-value="middleleft" style="width:40px;border-top:none;">&#8592;</button>' + '<button title="' + out('Middle Center') + '" class="cmd-box-content-pos" data-value="middlecenter" style="width:40px;border-left:none;border-top:none;">&#9737;</button>' + '<button title="' + out('Middle Right') + '" class="cmd-box-content-pos" data-value="middleright" style="width:40px;border-left:none;border-top:none;">&#8594;</button>' + '</div>' + '<div style="display:flex">' + '<button title="' + out('Bottom Left') + '" class="cmd-box-content-pos" data-value="bottomleft" style="width:40px;border-top:none;">&#8601;</button>' + '<button title="' + out('Bottom Center') + '" class="cmd-box-content-pos" data-value="bottomcenter" style="width:40px;border-left:none;border-top:none;">&#8595;</button>' + '<button title="' + out('Bottom Right') + '" class="cmd-box-content-pos" data-value="bottomright" style="width:40px;border-left:none;border-top:none;">&#8600;</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Top/Bottom Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-y" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-y" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-y" data-value="" style="width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Left/Right Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-x" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-x" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-x" data-value="" style="width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxImage" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + (this.builder.settings.onCoverImageSelectClick != null ? '<div style="padding-top:20px;">' + '<button class="cmd-box-selectasset" style="width:120px;">' + out('Select Image') + '</button>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>' : '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>') + '<div style="padding-top:10px;">' + '<label for="chkParallaxBg" style="margin:0;"><input id="chkParallaxBg" type="checkbox" /> ' + out('Parallax') + '</label>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Overlay Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Overlay Color') + '" class="input-box-overlaycolor is-btn-color" style="margin-right:15px"></button>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Overlay Transparency') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Increase') + '" class="cmd-box-overlayopacity" data-value="+" style="width:40px;">+</button>' + '<button title="' + out('Decrease') + '" class="cmd-box-overlayopacity" data-value="-" style="width:40px;border-left:none;">-</button>' + '<button title="' + out('None') + '" class="cmd-box-overlayopacity" data-value="0" style="border-left:none;min-width:100px;">' + out('None') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxAnimate" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="display:flex;flex-direction: column;">' + '<select class="cmd-box-animate">' + '<option value="">' + out('None') + '</option>' + '<option value="is-pulse">pulse</option>' + '<option value="is-bounceIn">bounceIn</option>' + '<option value="is-fadeIn">fadeIn</option>' + '<option value="is-fadeInDown">fadeInDown</option>' + '<option value="is-fadeInLeft">fadeInLeft</option>' + '<option value="is-fadeInRight">fadeInRight</option>' + '<option value="is-fadeInUp">fadeInUp</option>' + '<option value="is-flipInX">flipInX</option>' + '<option value="is-flipInY">flipInY</option>' + '<option value="is-slideInUp">slideInUp</option>' + '<option value="is-slideInDown">slideInDown</option>' + '<option value="is-slideInLeft">slideInLeft</option>' + '<option value="is-slideInRight">slideInRight</option>' + '<option value="is-zoomIn">zoomIn</option>' + '</select>' + '<label for="chkAnimOnce" style="margin:10px 0 0;"><input id="chkAnimOnce" type="checkbox" /> ' + out('Once') + '</label>' + '</div>' + '<div>' + '<label style="padding-top:20px;">' + out('Delay') + ': ' + '<select class="cmd-box-animatedelay" style="margin-top:3px;">' + '<option value="">' + out('None') + '</option>' + '<option value="delay-0ms">0s</option>' + '<option value="delay-100ms">100ms</option>' + '<option value="delay-200ms">200ms</option>' + '<option value="delay-300ms">300ms</option>' + '<option value="delay-400ms">400ms</option>' + '<option value="delay-500ms">500ms</option>' + '<option value="delay-600ms">600ms</option>' + '<option value="delay-700ms">700ms</option>' + '<option value="delay-800ms">800ms</option>' + '<option value="delay-900ms">900ms</option>' + '<option value="delay-1000ms">1000ms</option>' + '<option value="delay-1100ms">1100ms</option>' + '<option value="delay-1200ms">1200ms</option>' + '<option value="delay-1300ms">1300ms</option>' + '<option value="delay-1400ms">1400ms</option>' + '<option value="delay-1500ms">1500ms</option>' + '<option value="delay-1600ms">1600ms</option>' + '<option value="delay-1700ms">1700ms</option>' + '<option value="delay-1800ms">1800ms</option>' + '<option value="delay-1900ms">1900ms</option>' + '<option value="delay-2000ms">2000ms</option>' + '<option value="delay-2100ms">2100ms</option>' + '<option value="delay-2200ms">2200ms</option>' + '<option value="delay-2300ms">2300ms</option>' + '<option value="delay-2400ms">2400ms</option>' + '<option value="delay-2500ms">2500ms</option>' + '<option value="delay-2600ms">2600ms</option>' + '<option value="delay-2700ms">2700ms</option>' + '<option value="delay-2800ms">2800ms</option>' + '<option value="delay-2900ms">2900ms</option>' + '<option value="delay-3000ms">3000ms</option>' + '</select></label>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-animate-test" style="width:100%">' + out('Test') + '</button>' + '</div>' + '</div>' + '</div>' + '</div>' + '' + '<div class="is-modal pickphoto">' + '<div style="max-width:1000px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Photos') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '</div>' + '</div>' + '';
     dom$G.appendHtml(builderStuff, html); // Box Tool
 
@@ -7318,8 +7796,32 @@ class EditBox {
       btnBoxTypo.addEventListener('click', () => {
         this.builder.hideModal(modalEditBox); //Open divSidebarTypography
 
-        builderStuff.querySelector('.is-sidebar > button[data-command="typography"]').click();
+        builderStuff.querySelector('.is-sidebar > button[data-command="typography"]').click(); //Overide
+        //--- overlay (this needs overlay to prevent activeBox change) ---
+
+        const overlayHtml = '<div class="is-sidebar-overlay" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.000001);z-index: 1000;"></div>';
+        dom$G.appendHtml(builderStuff, overlayHtml);
+        const modalOverlay = builderStuff.querySelector('.is-sidebar-overlay');
+        if (modalOverlay) modalOverlay.addEventListener('click', () => {
+          // Close all opened sidebar
+          const overlay = document.querySelector('.is-sidebar-overlay');
+
+          if (overlay) {
+            overlay.remove();
+            document.body.style.overflowY = '';
+          }
+
+          document.querySelectorAll('.is-sidebar-button.active').forEach(elm => {
+            dom$G.removeClass(elm, 'active');
+          });
+          document.querySelectorAll('.is-sidebar-content.active').forEach(elm => {
+            dom$G.removeClass(elm, 'active');
+          });
+        }); //--- /overlay ---
+
         builderStuff.querySelector('.is-sidebar > button[data-command="typography"]').setAttribute('data-applyto', 'box');
+        builderStuff.querySelector('.typo-target-default').style.display = 'none';
+        builderStuff.querySelector('.typo-target-box').style.display = 'flex';
       });
     });
     const btnBoxSizes = modalEditBox.querySelectorAll('.cmd-box-size');
@@ -7488,6 +7990,9 @@ class EditBox {
           } else if (dom$G.hasClass(container, 'edge-x-5')) {
             dom$G.removeClass(container, 'edge-x-5');
             dom$G.addClass(container, 'edge-x-4');
+          } else if (dom$G.hasClass(container, 'edge-x-6')) {
+            dom$G.removeClass(container, 'edge-x-6');
+            dom$G.addClass(container, 'edge-x-5');
           } else {
             dom$G.addClass(container, 'edge-x-0');
           }
@@ -7510,6 +8015,9 @@ class EditBox {
             dom$G.removeClass(container, 'edge-x-4');
             dom$G.addClass(container, 'edge-x-5');
           } else if (dom$G.hasClass(container, 'edge-x-5')) {
+            dom$G.removeClass(container, 'edge-x-5');
+            dom$G.addClass(container, 'edge-x-6');
+          } else if (dom$G.hasClass(container, 'edge-x-6')) {
             return false;
           } else {
             dom$G.addClass(container, 'edge-x-0');
@@ -7523,6 +8031,7 @@ class EditBox {
           dom$G.removeClass(container, 'edge-x-3');
           dom$G.removeClass(container, 'edge-x-4');
           dom$G.removeClass(container, 'edge-x-5');
+          dom$G.removeClass(container, 'edge-x-6');
         } //Trigger Change event
 
 
@@ -7570,6 +8079,15 @@ class EditBox {
           } else if (dom$G.hasClass(boxCentered, 'edge-y-5')) {
             dom$G.removeClass(boxCentered, 'edge-y-5');
             dom$G.addClass(boxCentered, 'edge-y-4');
+          } else if (dom$G.hasClass(boxCentered, 'edge-y-6')) {
+            dom$G.removeClass(boxCentered, 'edge-y-6');
+            dom$G.addClass(boxCentered, 'edge-y-5');
+          } else if (dom$G.hasClass(boxCentered, 'edge-y-7')) {
+            dom$G.removeClass(boxCentered, 'edge-y-7');
+            dom$G.addClass(boxCentered, 'edge-y-6');
+          } else if (dom$G.hasClass(boxCentered, 'edge-y-8')) {
+            dom$G.removeClass(boxCentered, 'edge-y-8');
+            dom$G.addClass(boxCentered, 'edge-y-7');
           } else {
             dom$G.addClass(boxCentered, 'edge-y-0');
           }
@@ -7607,6 +8125,15 @@ class EditBox {
             dom$G.removeClass(boxCentered, 'edge-y-4');
             dom$G.addClass(boxCentered, 'edge-y-5');
           } else if (dom$G.hasClass(boxCentered, 'edge-y-5')) {
+            dom$G.removeClass(boxCentered, 'edge-y-5');
+            dom$G.addClass(boxCentered, 'edge-y-6');
+          } else if (dom$G.hasClass(boxCentered, 'edge-y-6')) {
+            dom$G.removeClass(boxCentered, 'edge-y-6');
+            dom$G.addClass(boxCentered, 'edge-y-7');
+          } else if (dom$G.hasClass(boxCentered, 'edge-y-7')) {
+            dom$G.removeClass(boxCentered, 'edge-y-7');
+            dom$G.addClass(boxCentered, 'edge-y-8');
+          } else if (dom$G.hasClass(boxCentered, 'edge-y-8')) {
             return false;
           } else {
             dom$G.addClass(boxCentered, 'edge-y-0');
@@ -7625,98 +8152,55 @@ class EditBox {
           dom$G.removeClass(boxCentered, 'edge-y-3');
           dom$G.removeClass(boxCentered, 'edge-y-4');
           dom$G.removeClass(boxCentered, 'edge-y-5');
-        } //simplified
-
-
-        if (s === '-') {
-          if (dom$G.hasClass(activeBox, 'edge-y--5')) {
-            return false;
-          } else if (dom$G.hasClass(activeBox, 'edge-y--4')) {
-            dom$G.removeClass(activeBox, 'edge-y--4');
-            dom$G.addClass(activeBox, 'edge-y--5');
-          } else if (dom$G.hasClass(activeBox, 'edge-y--3')) {
-            dom$G.removeClass(activeBox, 'edge-y--3');
-            dom$G.addClass(activeBox, 'edge-y--4');
-          } else if (dom$G.hasClass(activeBox, 'edge-y--2')) {
-            dom$G.removeClass(activeBox, 'edge-y--2');
-            dom$G.addClass(activeBox, 'edge-y--3');
-          } else if (dom$G.hasClass(activeBox, 'edge-y--1')) {
-            dom$G.removeClass(activeBox, 'edge-y--1');
-            dom$G.addClass(activeBox, 'edge-y--2');
-          } else if (dom$G.hasClass(activeBox, 'edge-y-0')) {
-            dom$G.removeClass(activeBox, 'edge-y-0');
-            dom$G.addClass(activeBox, 'edge-y--1');
-          } else if (dom$G.hasClass(activeBox, 'edge-y-1')) {
-            dom$G.removeClass(activeBox, 'edge-y-1');
-            dom$G.addClass(activeBox, 'edge-y-0');
-          } else if (dom$G.hasClass(activeBox, 'edge-y-2')) {
-            dom$G.removeClass(activeBox, 'edge-y-2');
-            dom$G.addClass(activeBox, 'edge-y-1');
-          } else if (dom$G.hasClass(activeBox, 'edge-y-3')) {
-            dom$G.removeClass(activeBox, 'edge-y-3');
-            dom$G.addClass(activeBox, 'edge-y-2');
-          } else if (dom$G.hasClass(activeBox, 'edge-y-4')) {
-            dom$G.removeClass(activeBox, 'edge-y-4');
-            dom$G.addClass(activeBox, 'edge-y-3');
-          } else if (dom$G.hasClass(activeBox, 'edge-y-5')) {
-            dom$G.removeClass(activeBox, 'edge-y-5');
-            dom$G.addClass(activeBox, 'edge-y-4');
-          } else {
-            dom$G.addClass(activeBox, 'edge-y-0');
-          }
-        }
-
-        if (s == '+') {
-          if (dom$G.hasClass(activeBox, 'edge-y--5')) {
-            dom$G.removeClass(activeBox, 'edge-y--5');
-            dom$G.addClass(activeBox, 'edge-y--4');
-          } else if (dom$G.hasClass(activeBox, 'edge-y--4')) {
-            dom$G.removeClass(activeBox, 'edge-y--4');
-            dom$G.addClass(activeBox, 'edge-y--3');
-          } else if (dom$G.hasClass(activeBox, 'edge-y--3')) {
-            dom$G.removeClass(activeBox, 'edge-y--3');
-            dom$G.addClass(activeBox, 'edge-y--2');
-          } else if (dom$G.hasClass(activeBox, 'edge-y--2')) {
-            dom$G.removeClass(activeBox, 'edge-y--2');
-            dom$G.addClass(activeBox, 'edge-y--1');
-          } else if (dom$G.hasClass(activeBox, 'edge-y--1')) {
-            dom$G.removeClass(activeBox, 'edge-y--1');
-            dom$G.addClass(activeBox, 'edge-y-0');
-          } else if (dom$G.hasClass(activeBox, 'edge-y-0')) {
-            dom$G.removeClass(activeBox, 'edge-y-0');
-            dom$G.addClass(activeBox, 'edge-y-1');
-          } else if (dom$G.hasClass(activeBox, 'edge-y-1')) {
-            dom$G.removeClass(activeBox, 'edge-y-1');
-            dom$G.addClass(activeBox, 'edge-y-2');
-          } else if (dom$G.hasClass(activeBox, 'edge-y-2')) {
-            dom$G.removeClass(activeBox, 'edge-y-2');
-            dom$G.addClass(activeBox, 'edge-y-3');
-          } else if (dom$G.hasClass(activeBox, 'edge-y-3')) {
-            dom$G.removeClass(activeBox, 'edge-y-3');
-            dom$G.addClass(activeBox, 'edge-y-4');
-          } else if (dom$G.hasClass(activeBox, 'edge-y-4')) {
-            dom$G.removeClass(activeBox, 'edge-y-4');
-            dom$G.addClass(activeBox, 'edge-y-5');
-          } else if (dom$G.hasClass(activeBox, 'edge-y-5')) {
-            return false;
-          } else {
-            dom$G.addClass(activeBox, 'edge-y-0');
-          }
-        }
-
-        if (s == '') {
-          dom$G.removeClass(activeBox, 'edge-y--5');
-          dom$G.removeClass(activeBox, 'edge-y--4');
-          dom$G.removeClass(activeBox, 'edge-y--3');
-          dom$G.removeClass(activeBox, 'edge-y--2');
-          dom$G.removeClass(activeBox, 'edge-y--1');
-          dom$G.removeClass(activeBox, 'edge-y-0');
-          dom$G.removeClass(activeBox, 'edge-y-1');
-          dom$G.removeClass(activeBox, 'edge-y-2');
-          dom$G.removeClass(activeBox, 'edge-y-3');
-          dom$G.removeClass(activeBox, 'edge-y-4');
-          dom$G.removeClass(activeBox, 'edge-y-5');
-        } //Trigger Change event
+          dom$G.removeClass(boxCentered, 'edge-y-6');
+          dom$G.removeClass(boxCentered, 'edge-y-7');
+          dom$G.removeClass(boxCentered, 'edge-y-8');
+        } // //simplified
+        // if (s === '-') {
+        //     if (dom.hasClass(activeBox, 'edge-y--5')) { return false; }
+        //     else if (dom.hasClass(activeBox, 'edge-y--4')) { dom.removeClass(activeBox, 'edge-y--4'); dom.addClass(activeBox, 'edge-y--5'); }
+        //     else if (dom.hasClass(activeBox, 'edge-y--3')) { dom.removeClass(activeBox, 'edge-y--3'); dom.addClass(activeBox, 'edge-y--4'); }
+        //     else if (dom.hasClass(activeBox, 'edge-y--2')) { dom.removeClass(activeBox, 'edge-y--2'); dom.addClass(activeBox, 'edge-y--3'); }
+        //     else if (dom.hasClass(activeBox, 'edge-y--1')) { dom.removeClass(activeBox, 'edge-y--1'); dom.addClass(activeBox, 'edge-y--2'); }
+        //     else if (dom.hasClass(activeBox, 'edge-y-0')) { dom.removeClass(activeBox, 'edge-y-0'); dom.addClass(activeBox, 'edge-y--1'); }
+        //     else if (dom.hasClass(activeBox, 'edge-y-1')) { dom.removeClass(activeBox, 'edge-y-1'); dom.addClass(activeBox, 'edge-y-0'); }
+        //     else if (dom.hasClass(activeBox, 'edge-y-2')) { dom.removeClass(activeBox, 'edge-y-2'); dom.addClass(activeBox, 'edge-y-1'); }
+        //     else if (dom.hasClass(activeBox, 'edge-y-3')) { dom.removeClass(activeBox, 'edge-y-3'); dom.addClass(activeBox, 'edge-y-2'); }
+        //     else if (dom.hasClass(activeBox, 'edge-y-4')) { dom.removeClass(activeBox, 'edge-y-4'); dom.addClass(activeBox, 'edge-y-3'); }
+        //     else if (dom.hasClass(activeBox, 'edge-y-5')) { dom.removeClass(activeBox, 'edge-y-5'); dom.addClass(activeBox, 'edge-y-4'); }
+        //     else if (dom.hasClass(activeBox, 'edge-y-6')) { dom.removeClass(activeBox, 'edge-y-6'); dom.addClass(activeBox, 'edge-y-5'); }
+        //     else { dom.addClass(activeBox, 'edge-y-0'); }
+        // }
+        // if (s == '+') {
+        //     if (dom.hasClass(activeBox, 'edge-y--5')) { dom.removeClass(activeBox, 'edge-y--5'); dom.addClass(activeBox, 'edge-y--4'); }
+        //     else if (dom.hasClass(activeBox, 'edge-y--4')) { dom.removeClass(activeBox, 'edge-y--4'); dom.addClass(activeBox, 'edge-y--3'); }
+        //     else if (dom.hasClass(activeBox, 'edge-y--3')) { dom.removeClass(activeBox, 'edge-y--3'); dom.addClass(activeBox, 'edge-y--2'); }
+        //     else if (dom.hasClass(activeBox, 'edge-y--2')) { dom.removeClass(activeBox, 'edge-y--2'); dom.addClass(activeBox, 'edge-y--1'); }
+        //     else if (dom.hasClass(activeBox, 'edge-y--1')) { dom.removeClass(activeBox, 'edge-y--1'); dom.addClass(activeBox, 'edge-y-0'); }
+        //     else if (dom.hasClass(activeBox, 'edge-y-0')) { dom.removeClass(activeBox, 'edge-y-0'); dom.addClass(activeBox, 'edge-y-1'); }
+        //     else if (dom.hasClass(activeBox, 'edge-y-1')) { dom.removeClass(activeBox, 'edge-y-1'); dom.addClass(activeBox, 'edge-y-2'); }
+        //     else if (dom.hasClass(activeBox, 'edge-y-2')) { dom.removeClass(activeBox, 'edge-y-2'); dom.addClass(activeBox, 'edge-y-3'); }
+        //     else if (dom.hasClass(activeBox, 'edge-y-3')) { dom.removeClass(activeBox, 'edge-y-3'); dom.addClass(activeBox, 'edge-y-4'); }
+        //     else if (dom.hasClass(activeBox, 'edge-y-4')) { dom.removeClass(activeBox, 'edge-y-4'); dom.addClass(activeBox, 'edge-y-5'); }
+        //     else if (dom.hasClass(activeBox, 'edge-y-5')) { dom.removeClass(activeBox, 'edge-y-5'); dom.addClass(activeBox, 'edge-y-6'); }
+        //     else if (dom.hasClass(activeBox, 'edge-y-6')) { return false; }
+        //     else { dom.addClass(activeBox, 'edge-y-0'); }
+        // }
+        // if (s == '') {
+        //     dom.removeClass(activeBox, 'edge-y--5');
+        //     dom.removeClass(activeBox, 'edge-y--4');
+        //     dom.removeClass(activeBox, 'edge-y--3');
+        //     dom.removeClass(activeBox, 'edge-y--2');
+        //     dom.removeClass(activeBox, 'edge-y--1');
+        //     dom.removeClass(activeBox, 'edge-y-0');
+        //     dom.removeClass(activeBox, 'edge-y-1');
+        //     dom.removeClass(activeBox, 'edge-y-2');
+        //     dom.removeClass(activeBox, 'edge-y-3');
+        //     dom.removeClass(activeBox, 'edge-y-4');
+        //     dom.removeClass(activeBox, 'edge-y-5');
+        //     dom.removeClass(boxCentered, 'edge-y-6');
+        // }
+        //Trigger Change event
 
 
         this.builder.settings.onChange();
@@ -7923,12 +8407,13 @@ class EditBox {
       this.builder.editor.saveForUndo(true); // checkLater = true
 
       const activeBox = this.builder.activeBox;
-      let bgcolor = window.getComputedStyle(activeBox, null).getPropertyValue('background-color');
-      if (bgcolor === 'rgba(0, 0, 0, 0)') bgcolor = ''; // let bgcolor = activeBox.style.backgroundColor;
-
+      let bgcolor = btnBoxBgColor.style.backgroundColor;
+      let overlay = activeBox.querySelector('.is-overlay');
       colorpicker.open(s => {
-        activeBox.style.backgroundColor = s;
-        activeBox.style.backgroundImage = ''; //remove gradient
+        // activeBox.style.backgroundColor = s;
+        // activeBox.style.backgroundImage = '';//remove gradient
+        overlay.style.backgroundColor = s;
+        overlay.style.backgroundImage = ''; //remove gradient
 
         btnBoxBgColor.style.backgroundColor = s; // preview
       }, bgcolor);
@@ -7939,8 +8424,9 @@ class EditBox {
       const activeBox = this.builder.activeBox;
       this.builder.editor.saveForUndo(true); // checkLater = true
 
+      let overlay = activeBox.querySelector('.is-overlay');
       let gradientPicker = this.builder.editor.gradientpicker();
-      gradientPicker.open(activeBox);
+      gradientPicker.open(overlay);
     }); // Box Overlay Color
 
     const btnBoxOverlayColor = modalEditBox.querySelector('.input-box-overlaycolor');
@@ -7983,6 +8469,8 @@ class EditBox {
           overlayColor.style.backgroundColor = s;
         }
 
+        btnBoxOverlayColor.style.backgroundColor = s; // preview
+
         return false;
       }, color); //Note: if color empty, colorpicker will stay with its previous color
     }); // Click to Open Media Select Dialog
@@ -8223,12 +8711,8 @@ class EditBox {
         modalEditBox.querySelector('#chkAnimateBg').checked = false;
       }
 
-      if (overlayBg.getAttribute('style')) {
-        if (overlayBg.getAttribute('style').indexOf('scale(1.05)') !== -1) {
-          modalEditBox.querySelector('#chkParallaxBg').checked = true;
-        } else {
-          modalEditBox.querySelector('#chkParallaxBg').checked = false;
-        }
+      if (overlayBg.getAttribute('data-top-bottom') || overlayBg.getAttribute('data-bottom-top')) {
+        modalEditBox.querySelector('#chkParallaxBg').checked = true;
       } else {
         modalEditBox.querySelector('#chkParallaxBg').checked = false;
       }
@@ -8306,12 +8790,7 @@ class EditBox {
     if (dom$G.hasClass(activeBox, 'delay-2700ms')) selAnimateDelay.value = 'delay-2700ms';
     if (dom$G.hasClass(activeBox, 'delay-2800ms')) selAnimateDelay.value = 'delay-2800ms';
     if (dom$G.hasClass(activeBox, 'delay-2900ms')) selAnimateDelay.value = 'delay-2900ms';
-    if (dom$G.hasClass(activeBox, 'delay-3000ms')) selAnimateDelay.value = 'delay-3000ms'; //Background color
-
-    let bgcolor = window.getComputedStyle(activeBox, null).getPropertyValue('background-color');
-    if (bgcolor === 'rgba(0, 0, 0, 0)') bgcolor = '';
-    let btnBoxBgColor = modalEditBox.querySelector('.input-box-bgcolor');
-    if (bgcolor) btnBoxBgColor.style.backgroundColor = bgcolor;else btnBoxBgColor.style.backgroundColor = 'transparent'; //Background image
+    if (dom$G.hasClass(activeBox, 'delay-3000ms')) selAnimateDelay.value = 'delay-3000ms'; //Background image
     //Hide image tab
 
     modalEditBox.querySelector('#tabBoxImage').style.display = 'none';
@@ -8356,6 +8835,43 @@ class EditBox {
       modalEditBox.querySelector('#divNoBoxSettings').style.display = 'block'; //Show info: This box has no available settings
     } else {
       modalEditBox.querySelector('#divNoBoxSettings').style.display = 'none';
+    } // FIX OLD VERSION
+
+
+    let overlay = activeBox.querySelector('.is-overlay');
+
+    if (overlay) ; else {
+      activeBox.insertAdjacentHTML('afterbegin', '<div class="is-overlay"></div>');
+      overlay = activeBox.querySelector('.is-overlay');
+    } // Gradient Color
+
+
+    const s = activeBox.style.backgroundImage;
+    if (s) if (s.indexOf('linear-gradient') !== -1) {
+      // Fix
+      overlay.style.backgroundImage = s;
+      activeBox.style.backgroundImage = '';
+    } // Background color
+
+    let btnBoxBgColor = modalEditBox.querySelector('.input-box-bgcolor');
+    let bgcolor = activeBox.style.backgroundColor;
+
+    if (bgcolor) {
+      // Fix
+      overlay.style.backgroundColor = bgcolor;
+      activeBox.style.backgroundColor = '';
+      btnBoxBgColor.style.backgroundColor = bgcolor; //preview
+    } else {
+      bgcolor = overlay.style.backgroundColor;
+
+      if (bgcolor) {
+        btnBoxBgColor.style.backgroundColor = bgcolor; //preview
+      } else {
+        //backward
+        bgcolor = window.getComputedStyle(activeBox, null).getPropertyValue('background-color');
+        if (bgcolor === 'rgba(0, 0, 0, 0)') bgcolor = '';
+        btnBoxBgColor.style.backgroundColor = bgcolor; //preview
+      }
     }
   } //edit
 
@@ -8775,8 +9291,8 @@ class EditBox {
     if (!overlayBg) return;
 
     if (this.modalEditBox.querySelector('#chkParallaxBg').checked) {
-      overlayBg.setAttribute('data-bottom-top', 'transform:translateY(-120px) scale(1.05)');
-      overlayBg.setAttribute('data-top-bottom', 'transform:translateY(120px) scale(1.05)');
+      overlayBg.setAttribute('data-bottom-top', 'transform:translateY(-120px) scale(1);');
+      overlayBg.setAttribute('data-top-bottom', 'transform:translateY(50px) scale(1.4)');
       this.builder.settings.onRender();
     } else {
       dom$G.removeClass(overlayBg, 'skrollable');
@@ -8887,7 +9403,7 @@ class EditBox {
       // }
 
 
-      overlayBg.style.backgroundImage = 'url(' + url + ')';
+      overlayBg.style.backgroundImage = 'url(\'' + url + '\')';
       overlayBg.style.backgroundPosition = 50 + '%' + ' ' + 60 + '%'; //default
 
       preview.innerHTML = `<img src="${url}">`;
@@ -8908,11 +9424,11 @@ class EditBox {
 
       if (overlayContent) {
         if (overlayContent.innerHTML === '') overlayContent.parentNode.removeChild(overlayContent);
-      }
-
-      if (overlay.childElementCount === 0) overlay.parentNode.removeChild(overlay); // overlayBg.style.backgroundImage =  '';
+      } // if(overlay.childElementCount===0) overlay.parentNode.removeChild(overlay); // new version always need overlay
+      // overlayBg.style.backgroundImage =  '';
       // overlayBg.style.backgroundPosition = '';
 
+
       preview.innerHTML = ''; //clear overlay color
 
       const btnBoxOverlayColor = modalEditBox.querySelector('.input-box-overlaycolor');
@@ -9494,7 +10010,8 @@ class Util {
         dom.moveAfter(cellElement, cell);
       }
 
-      this.builder.applyBehavior();
+      let builderActive = document.querySelector('.builder-active');
+      if (builderActive) this.builder.applyBehaviorOn(builderActive);
       this.fixLayout(row);
       cellElement.click(); //change active block to the newly created
     }
@@ -9543,7 +10060,8 @@ class Util {
 
       row.parentNode.insertBefore(rowElement, row);
       dom.moveAfter(rowElement, row);
-      this.builder.applyBehavior();
+      let builderActive = document.querySelector('.builder-active');
+      if (builderActive) this.builder.applyBehaviorOn(builderActive);
       cellElement.click(); //change active block to the newly created
     }
 
@@ -9557,7 +10075,8 @@ class Util {
       // }
 
       element.insertAdjacentHTML('afterend', html);
-      this.builder.applyBehavior();
+      let builderActive = document.querySelector('.builder-active');
+      if (builderActive) this.builder.applyBehaviorOn(builderActive);
       let newelement = element.nextElementSibling;
 
       if (newelement.tagName.toLowerCase() === 'img') {
@@ -9565,7 +10084,7 @@ class Util {
         clearTimeout(timeoutId);
         timeoutId = setTimeout(() => {
           if (newelement.complete) {
-            newelement.click(); //console.log(2);
+            newelement.click();
           }
         }, 200);
       } else {
@@ -9656,7 +10175,8 @@ class Util {
 
       row.parentNode.insertBefore(rowElement, row);
       dom.moveAfter(rowElement, row);
-      this.builder.applyBehavior();
+      let builderActive = document.querySelector('.builder-active');
+      if (builderActive) this.builder.applyBehaviorOn(builderActive);
       cellElement.click(); //change active block to the newly created
       // Change to row selection
 
@@ -9734,10 +10254,16 @@ class Util {
           cell.parentNode.insertBefore(cell, cell.previousElementSibling);
         }
 
-        this.builder.applyBehavior();
-        this.fixLayout(row);
-        cellElement.click(); //change active block to the newly created
-        // Call onChange
+        let builderActive = document.querySelector('.builder-active');
+        if (builderActive) this.builder.applyBehaviorOn(builderActive);
+        this.fixLayout(row); // cellElement.click(); //change active block to the newly created
+
+        if (mode === 'cell' || mode === 'cell-right') {
+          cell.nextElementSibling.click();
+        } else {
+          cell.previousElementSibling.click();
+        } // Call onChange
+
 
         this.builder.opts.onChange();
         return;
@@ -9781,10 +10307,11 @@ class Util {
       //     row.scrollIntoView({ behavior: 'smooth', block: 'center' });
       // }, 600);
 
-      rowElement = row.nextElementSibling; // a must. Must be before applyBehavior() to prevent element delete during fixLayout
-
-      this.builder.applyBehavior(); // checkEmpty & onRender called here
+      rowElement = row.nextElementSibling; // a must. Must be before applyBehavior to prevent element delete during fixLayout
+      // checkEmpty & onRender called here
 
+      let builderActive = document.querySelector('.builder-active');
+      if (builderActive) this.builder.applyBehaviorOn(builderActive);
       cellElement = rowElement.childNodes[0];
       cellElement.click(); //change active block to the newly created
       // Change to row selection
@@ -10130,71 +10657,80 @@ class Util {
   }
 
   checkEmpty() {
-    const dom = this.dom; // Get all builder areas
-
+    // Get all builder areas
     const builders = document.querySelectorAll(this.builder.opts.container);
     Array.prototype.forEach.call(builders, builder => {
-      const rows = dom.elementChildren(builder);
-      let empty = true;
-      rows.forEach(row => {
-        if (dom.hasClass(row, 'row-add-initial')) return;
-        if (dom.hasClass(row, 'dummy-space')) return;
-        empty = false;
-      });
+      this.checkEmptyOn(builder);
+    });
+  }
 
-      if (empty) {
-        let emptyinfo = builder.querySelector('.row-add-initial');
+  checkEmptyOn(builder) {
+    const dom = this.dom;
+    const rows = dom.elementChildren(builder);
+    let empty = true;
+    rows.forEach(row => {
+      if (dom.hasClass(row, 'row-add-initial')) return;
+      if (dom.hasClass(row, 'dummy-space')) return;
+      empty = false;
+    });
 
-        if (!emptyinfo) {
-          builder.innerHTML = `<button type="button" class="row-add-initial">${this.out('Empty')}<br><span>${this.out('+ Click to add content')}</span></div>`;
-          emptyinfo = builder.querySelector('.row-add-initial');
-        }
+    if (empty) {
+      let emptyinfo = builder.querySelector('.row-add-initial');
 
-        emptyinfo.addEventListener('click', () => {
-          this.clearActiveCell();
-          dom.addClass(emptyinfo, 'row-active'); // Needed for addContent(). Directly apply class in Util is fine.
+      if (!emptyinfo) {
+        builder.innerHTML = `<button type="button" class="row-add-initial">${this.out('Empty')}<br><span>${this.out('+ Click to add content')}</span></div>`;
+        emptyinfo = builder.querySelector('.row-add-initial');
+      }
 
-          const builderStuff = this.builder.builderStuff;
-          let quickadd = builderStuff.querySelector('.quickadd'); // see quickadd.js. Directly select by class in Util is fine.
+      emptyinfo.addEventListener('click', () => {
+        this.clearActiveCell();
+        const builders = document.querySelectorAll(this.builder.opts.container);
+        Array.prototype.forEach.call(builders, item => {
+          dom.removeClass(item, 'builder-active');
+        });
+        dom.addClass(builder, 'builder-active');
+        dom.addClass(emptyinfo, 'row-active'); // Needed for addContent(). Directly apply class in Util is fine.
 
-          let tabs = quickadd.querySelector('.is-pop-tabs');
-          tabs.style.display = 'none';
-          const viewportHeight = window.innerHeight;
-          let top = emptyinfo.getBoundingClientRect().top;
-          const left = emptyinfo.getBoundingClientRect().left + emptyinfo.offsetWidth * this.builder.opts.zoom / 2 - 11;
-          quickadd.style.display = 'flex';
-          const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
-
-          const h = quickadd.offsetHeight;
-
-          if (viewportHeight - top > h) {
-            top = top + emptyinfo.offsetHeight * this.builder.opts.zoom - 19;
-            quickadd.style.top = top + window.pageYOffset + 27 + 'px';
-            quickadd.style.left = left - w / 2 + 7 + 'px';
-            dom.removeClass(quickadd, 'arrow-bottom');
-            dom.removeClass(quickadd, 'arrow-right');
-            dom.removeClass(quickadd, 'arrow-left');
-            dom.removeClass(quickadd, 'center');
-            dom.addClass(quickadd, 'arrow-top');
-            dom.addClass(quickadd, 'center');
-          } else {
-            quickadd.style.top = top + window.pageYOffset - h - 8 + 'px';
-            quickadd.style.left = left - w / 2 + 7 + 'px';
-            dom.removeClass(quickadd, 'arrow-top');
-            dom.removeClass(quickadd, 'arrow-right');
-            dom.removeClass(quickadd, 'arrow-left');
-            dom.removeClass(quickadd, 'center');
-            dom.addClass(quickadd, 'arrow-bottom');
-            dom.addClass(quickadd, 'center');
-          }
+        const builderStuff = this.builder.builderStuff;
+        let quickadd = builderStuff.querySelector('.quickadd'); // see quickadd.js. Directly select by class in Util is fine.
 
-          quickadd.setAttribute('data-mode', 'row');
-        });
-      } else {
-        let emptyinfo = builder.querySelector('.row-add-initial');
-        if (emptyinfo) emptyinfo.parentNode.removeChild(emptyinfo);
-      }
-    });
+        let tabs = quickadd.querySelector('.is-pop-tabs');
+        tabs.style.display = 'none';
+        const viewportHeight = window.innerHeight;
+        let top = emptyinfo.getBoundingClientRect().top;
+        const left = emptyinfo.getBoundingClientRect().left + emptyinfo.offsetWidth * this.builder.opts.zoom / 2 - 11;
+        quickadd.style.display = 'flex';
+        const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
+
+        const h = quickadd.offsetHeight;
+
+        if (viewportHeight - top > h) {
+          top = top + emptyinfo.offsetHeight * this.builder.opts.zoom - 19;
+          quickadd.style.top = top + window.pageYOffset + 27 + 'px';
+          quickadd.style.left = left - w / 2 + 7 + 'px';
+          dom.removeClass(quickadd, 'arrow-bottom');
+          dom.removeClass(quickadd, 'arrow-right');
+          dom.removeClass(quickadd, 'arrow-left');
+          dom.removeClass(quickadd, 'center');
+          dom.addClass(quickadd, 'arrow-top');
+          dom.addClass(quickadd, 'center');
+        } else {
+          quickadd.style.top = top + window.pageYOffset - h - 8 + 'px';
+          quickadd.style.left = left - w / 2 + 7 + 'px';
+          dom.removeClass(quickadd, 'arrow-top');
+          dom.removeClass(quickadd, 'arrow-right');
+          dom.removeClass(quickadd, 'arrow-left');
+          dom.removeClass(quickadd, 'center');
+          dom.addClass(quickadd, 'arrow-bottom');
+          dom.addClass(quickadd, 'center');
+        }
+
+        quickadd.setAttribute('data-mode', 'row');
+      });
+    } else {
+      let emptyinfo = builder.querySelector('.row-add-initial');
+      if (emptyinfo) emptyinfo.parentNode.removeChild(emptyinfo);
+    }
   }
 
   clearPreferences() {
@@ -10476,8 +11012,7 @@ class Util {
 
     this.builder.styleButtonClassicBackground = window.getComputedStyle(btnClassic, null).getPropertyValue('background-color');
     this.builder.styleButtonClassicColor = window.getComputedStyle(btnClassic, null).getPropertyValue('color');
-    this.builder.styleButtonClassicBackgroundHover = this.getUIStyleValue(btnClassic, 'hover', 'background-color'); // console.log(this.builder.styleButtonClassicBackgroundHover);
-
+    this.builder.styleButtonClassicBackgroundHover = this.getUIStyleValue(btnClassic, 'hover', 'background-color');
     this.builder.styleDark = false;
     this.builder.styleColored = false;
     this.builder.styleColoredDark = false;
@@ -11586,7 +12121,6 @@ class Dom {
     }
   } // https://plainjs.com/javascript/attributes/adding-removing-and-testing-for-classes-9/
   // addClass(element, classname) {
-  //     console.log(element.classList)
   //     if (element.classList) element.classList.add(classname);
   //     else if (!this.hasClass(element, classname)) element.className += ' ' + classname;
   // }
@@ -11603,7 +12137,6 @@ class Dom {
       let s = element.getAttribute('class');
       return new RegExp('\\b' + classname + '\\b').test(s);
     } catch (e) {// Do Nothing
-      // console.log(element);
     } //return element.classList ? element.classList.contains(classname) : new RegExp('\\b'+ classname+'\\b').test(element.className);
 
   }
@@ -11635,7 +12168,6 @@ class Dom {
       // if(classname==='is-side') console.log(element.nodeName); // NOTE: click on svg can still returns undefined in IE11
       if (!element.tagName) return false;
       if (element.tagName === 'BODY' || element.tagName === 'HTML') return false; // if(!element.classList) {
-      //     console.log('no classList');
       //     return false;
       // }
 
@@ -11685,7 +12217,6 @@ class Dom {
           return true;
         }
       } catch (e) {// Do Nothing
-        // console.log(element);
         // return false;
       }
 
@@ -11717,7 +12248,6 @@ class Dom {
           return element;
         }
       } catch (e) {// Do Nothing
-        // console.log(element);
         // return false;
       }
 
@@ -11844,7 +12374,7 @@ class Dom {
   textSelection() {
     try {
       var elm;
-      var curr = window.getSelection().getRangeAt(0).commonAncestorContainer; //console.log(curr.nodeType)
+      var curr = window.getSelection().getRangeAt(0).commonAncestorContainer;
 
       if (curr.nodeType === 3) {
         // text node
@@ -17135,9 +17665,9 @@ let hash$1 = {};
 class HtmlUtil {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
-    const builderstuff = util.builderStuff();
-    let viewhtml = builderstuff.querySelector('.viewhtml');
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
+    let viewhtml = builderStuff.querySelector('.viewhtml');
 
     if (!viewhtml) {
       /*
@@ -17183,10 +17713,10 @@ class HtmlUtil {
             </div>
             
             `;
-      dom$E.appendHtml(builderstuff, html);
-      viewhtml = builderstuff.querySelector('.viewhtml');
-      let viewhtmlformatted = builderstuff.querySelector('.viewhtmlformatted');
-      let viewhtmlnormal = builderstuff.querySelector('.viewhtmlnormal');
+      dom$E.appendHtml(builderStuff, html);
+      viewhtml = builderStuff.querySelector('.viewhtml');
+      let viewhtmlformatted = builderStuff.querySelector('.viewhtmlformatted');
+      let viewhtmlnormal = builderStuff.querySelector('.viewhtmlnormal');
       let elm = viewhtml.querySelector('.input-html-larger');
       dom$E.addEventListener(elm, 'click', () => {
         let textarea = viewhtml.querySelector('textarea'); // Used  by html dialog (syntaxhighlighting)
@@ -17222,9 +17752,9 @@ class HtmlUtil {
   }
 
   viewHtmlNormal() {
-    const util = new Util(this.builder);
-    const builderstuff = util.builderStuff();
-    const viewhtmlnormal = builderstuff.querySelector('.viewhtmlnormal');
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
+    const viewhtmlnormal = builderStuff.querySelector('.viewhtmlnormal');
     let iframe = viewhtmlnormal.querySelector('iframe');
     iframe.outerHTML = '<iframe id="ifrHtml" style="width:100%;height:100%;border: none;" src="about:blank"></iframe>'; //clear
 
@@ -17237,9 +17767,9 @@ class HtmlUtil {
   }
 
   viewHtmlLarger() {
-    const util = new Util(this.builder);
-    const builderstuff = util.builderStuff();
-    const viewhtmllarger = builderstuff.querySelector('.viewhtmllarger');
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
+    const viewhtmllarger = builderStuff.querySelector('.viewhtmllarger');
     let iframe = viewhtmllarger.querySelector('iframe');
     iframe.outerHTML = '<iframe id="ifrHtml" style="width:100%;height:100%;border: none;" src="about:blank"></iframe>'; //clear
 
@@ -17251,14 +17781,14 @@ class HtmlUtil {
   }
 
   view(mode, area) {
-    const util = new Util(this.builder);
-    const builderstuff = util.builderStuff();
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     let viewhtml;
 
     if (this.builder.opts.htmlSyntaxHighlighting) {
-      viewhtml = builderstuff.querySelector('.viewhtmlformatted');
+      viewhtml = builderStuff.querySelector('.viewhtmlformatted');
     } else {
-      viewhtml = builderstuff.querySelector('.viewhtml');
+      viewhtml = builderStuff.querySelector('.viewhtml');
     }
 
     viewhtml.querySelector('.is-modal-footer').innerHTML = `<button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
@@ -17284,7 +17814,7 @@ class HtmlUtil {
 
       dom$E.removeClass(row, 'row-outline'); //Hide Column tool
 
-      let columnTool = builderstuff.querySelector('.is-column-tool');
+      let columnTool = builderStuff.querySelector('.is-column-tool');
       dom$E.removeClass(columnTool, 'active');
     }
 
@@ -17332,7 +17862,8 @@ class HtmlUtil {
       if (mode === 'cell') {
         const cell = util.cellSelected();
         cell.innerHTML = html;
-        this.builder.applyBehavior(); //Trigger Change event
+        let builderActive = document.querySelector('.builder-active');
+        if (builderActive) this.builder.applyBehaviorOn(builderActive); //Trigger Change event
 
         this.builder.opts.onChange(); //Trigger Render event
 
@@ -17343,7 +17874,8 @@ class HtmlUtil {
         const cell = util.cellSelected();
         const row = cell.parentNode;
         row.innerHTML = html;
-        this.builder.applyBehavior(); //Trigger Change event
+        let builderActive = document.querySelector('.builder-active');
+        if (builderActive) this.builder.applyBehaviorOn(builderActive); //Trigger Change event
 
         this.builder.opts.onChange(); //Trigger Render event
 
@@ -17358,7 +17890,8 @@ class HtmlUtil {
         var range = document.createRange();
         range.setStart(area, 0);
         area.appendChild(range.createContextualFragment(html));
-        this.builder.applyBehavior(); //Trigger Change event
+        let builderActive = document.querySelector('.builder-active');
+        if (builderActive) this.builder.applyBehaviorOn(builderActive); //Trigger Change event
 
         this.builder.opts.onChange(); //Trigger Render event
 
@@ -17397,9 +17930,9 @@ class HtmlUtil {
     } //Hide popup
 
 
-    let columnMore = builderstuff.querySelector('.is-pop.columnmore');
+    let columnMore = builderStuff.querySelector('.is-pop.columnmore');
     columnMore.style.display = '';
-    let rowMore = builderstuff.querySelector('.is-pop.rowmore');
+    let rowMore = builderStuff.querySelector('.is-pop.rowmore');
     rowMore.style.display = '';
   }
 
@@ -17427,17 +17960,17 @@ class HtmlUtil {
       });
     }
 
-    const util = new Util(this.builder); //Prepare temporary helpers: #tmp_content & #tmp_buildercontent
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff; //Prepare temporary helpers: #tmp_content & #tmp_buildercontent
 
-    const builderstuff = util.builderStuff();
-    let elm = builderstuff.querySelector('#tmp_content');
-    if (elm) builderstuff.removeChild(elm);
-    elm = builderstuff.querySelector('#tmp_buildercontent');
-    if (elm) builderstuff.removeChild(elm);
+    let elm = builderStuff.querySelector('#tmp_content');
+    if (elm) builderStuff.removeChild(elm);
+    elm = builderStuff.querySelector('#tmp_buildercontent');
+    if (elm) builderStuff.removeChild(elm);
     let html = `<div id="tmp_content" style="position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;"></div>
             <div id="tmp_buildercontent" style="position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;"></div>`;
-    dom$E.appendHtml(builderstuff, html);
-    let tmp = builderstuff.querySelector('#tmp_content');
+    dom$E.appendHtml(builderStuff, html);
+    let tmp = builderStuff.querySelector('#tmp_content');
     tmp.innerHTML = content.innerHTML; //Find subblocks (previously is-builder) in custom code blocks and save them to data-html-1, data-html-2, and so on.
 
     let blocks = tmp.querySelectorAll('[data-html]');
@@ -17478,7 +18011,7 @@ class HtmlUtil {
           _builder.removeAttribute('between-blocks-center'); // old  
           _builder.removeAttribute('hideelementhighlight'); 
            let builderhtml = _builder.innerHTML;
-          let tmpbuilder = builderstuff.querySelector('#tmp_buildercontent');
+          let tmpbuilder = builderStuff.querySelector('#tmp_buildercontent');
           tmpbuilder.innerHTML = builderhtml;
            let elms = tmp.querySelectorAll('.sortable-chosen');
           dom.removeClasses(elms, 'sortable-chosen');
@@ -17762,10 +18295,10 @@ class HtmlUtil {
       html = html.replace(/<font/g, '<span').replace(/<\/font/g, '</span');
     }
 
-    elm = builderstuff.querySelector('#tmp_content');
-    if (elm) builderstuff.removeChild(elm);
-    elm = builderstuff.querySelector('#tmp_buildercontent');
-    if (elm) builderstuff.removeChild(elm); // return html;
+    elm = builderStuff.querySelector('#tmp_content');
+    if (elm) builderStuff.removeChild(elm);
+    elm = builderStuff.querySelector('#tmp_buildercontent');
+    if (elm) builderStuff.removeChild(elm); // return html;
 
     let beautify = JsBeautify.html;
     return beautify(html);
@@ -18541,7 +19074,8 @@ const prepareSvgIcons = () => {
 class Snippets {
   constructor(builder) {
     this.builder = builder;
-    this.util = new Util(this.builder);
+    const util = this.builder.util;
+    this.util = util;
   }
 
   getSnippetsHtml() {
@@ -19438,8 +19972,8 @@ class Snippets {
 const dom$B = new Dom();
 
 const renderQuickAdd = builder => {
-  const util = new Util(builder);
-  const builderStuff = util.builderStuff();
+  const util = builder.util;
+  const builderStuff = builder.builderStuff;
   let quickadd = builderStuff.querySelector('.quickadd');
 
   if (!quickadd) {
@@ -19824,9 +20358,10 @@ class Grid {
           row.previousElementSibling.appendChild(cell); //add
 
           row.parentNode.removeChild(row); //remove current (empty) row (including its overlay)
+          //re-add tool
 
-          builder.applyBehavior(); //re-add tool
-
+          let builderActive = document.querySelector('.builder-active');
+          builder.applyBehaviorOn(builderActive);
           columnTool.position(cell);
           cell.click(); //refresh active cell/row
 
@@ -19841,9 +20376,10 @@ class Grid {
       var rowElement = row.cloneNode(true);
       rowElement.innerHTML = '';
       rowElement.appendChild(cell);
-      row.parentNode.insertBefore(rowElement, row);
-      builder.applyBehavior(); //re-add tool
+      row.parentNode.insertBefore(rowElement, row); //re-add tool
 
+      let builderActive = document.querySelector('.builder-active');
+      builder.applyBehaviorOn(builderActive);
       columnTool.position(cell);
       cell.click(); //refresh active cell/row
 
@@ -19899,9 +20435,10 @@ class Grid {
           row.nextElementSibling.appendChild(cell); //add
 
           row.parentNode.removeChild(row); //remove current (empty) row (including its overlay)
+          //re-add tool
 
-          builder.applyBehavior(); //re-add tool
-
+          let builderActive = document.querySelector('.builder-active');
+          builder.applyBehaviorOn(builderActive);
           columnTool.position(cell);
           cell.click(); //refresh active cell/row
 
@@ -19916,9 +20453,10 @@ class Grid {
       var rowElement = row.cloneNode(true);
       rowElement.innerHTML = '';
       rowElement.appendChild(cell);
-      dom$A.moveAfter(rowElement, row);
-      builder.applyBehavior(); //re-add tool
+      dom$A.moveAfter(rowElement, row); //re-add tool
 
+      let builderActive = document.querySelector('.builder-active');
+      builder.applyBehaviorOn(builderActive);
       columnTool.position(cell);
       cell.click(); //refresh active cell/row
 
@@ -19962,8 +20500,10 @@ class Grid {
     }
 
     row.insertBefore(cellElement, cell);
-    util.fixLayout(row, builder);
-    builder.applyBehavior();
+    util.fixLayout(row, builder); //re-add tool
+
+    let builderActive = document.querySelector('.builder-active');
+    builder.applyBehaviorOn(builderActive);
     columnTool.position(cell);
     cell.click(); //refresh active cell/row
 
@@ -20467,8 +21007,10 @@ class Grid {
     cols = dom$A.elementChildren(row);
     cols.forEach(col => {
       dom$A.removeClass(col, 'cell-active');
-    });
-    builder.applyBehavior();
+    }); //re-add tool
+
+    let builderActive = document.querySelector('.builder-active');
+    builder.applyBehaviorOn(builderActive);
     this.rowTool.position(rowElement);
     this.builder.opts.onChange();
   } // Utilities
@@ -20497,10 +21039,9 @@ class RowTool$1 {
   }
 
   position(row) {
-    const util = new Util(this.builder);
-    const builderstuff = util.builderStuff();
+    const builderStuff = this.builder.builderStuff;
     let rowTool = row.querySelector('.is-row-tool');
-    let rowMore = builderstuff.querySelector('.rowmore');
+    let rowMore = builderStuff.querySelector('.rowmore');
     dom$A.addClass(rowMore, 'transition1');
     const elm = rowTool.querySelector('.row-more');
     const top = elm.getBoundingClientRect().top + window.pageYOffset;
@@ -20537,10 +21078,9 @@ class ColumnTool$1 {
   }
 
   position(col) {
-    const util = new Util(this.builder);
-    const builderstuff = util.builderStuff();
-    this.columnTool = builderstuff.querySelector('.is-column-tool');
-    this.columnMore = builderstuff.querySelector('.columnmore');
+    const builderStuff = this.builder.builderStuff;
+    this.columnTool = builderStuff.querySelector('.is-column-tool');
+    this.columnMore = builderStuff.querySelector('.columnmore');
     dom$A.addClass(this.columnMore, 'transition1');
     setTimeout(() => {
       this.columnTool.style.top = col.getBoundingClientRect().top - 29 + window.pageYOffset + 'px';
@@ -20556,17 +21096,15 @@ class ColumnTool$1 {
   }
 
   hide() {
-    const util = new Util(this.builder);
-    const builderstuff = util.builderStuff();
-    this.columnTool = builderstuff.querySelector('.is-column-tool'); // this.columnMore = builderstuff.querySelector('.columnmore');
+    const builderStuff = this.builder.builderStuff;
+    this.columnTool = builderStuff.querySelector('.is-column-tool'); // this.columnMore = builderStuff.querySelector('.columnmore');
 
     dom$A.removeClass(this.columnTool, 'active');
   }
 
   show() {
-    const util = new Util(this.builder);
-    const builderstuff = util.builderStuff();
-    this.columnTool = builderstuff.querySelector('.is-column-tool'); // this.columnMore = builderstuff.querySelector('.columnmore');
+    const builderStuff = this.builder.builderStuff;
+    this.columnTool = builderStuff.querySelector('.is-column-tool'); // this.columnMore = builderStuff.querySelector('.columnmore');
 
     dom$A.addClass(this.columnTool, 'active');
   }
@@ -20689,7 +21227,8 @@ class Draggable$1 {
 const dom$z = new Dom();
 
 const renderGridEditor = builder => {
-  const util = new Util(builder);
+  const util = builder.util;
+  const builderStuff = builder.builderStuff;
   const grid = new Grid(builder);
   const htmlutil = new HtmlUtil(builder);
   let rowhtmlbutton = '';
@@ -20736,8 +21275,7 @@ const renderGridEditor = builder => {
     </div>`; //LATER:
   //<button title="${util.out('Element Tool')}" class="cell-elmtool"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-gear"></use></svg></button>
 
-  const builderstuff = util.builderStuff();
-  dom$z.appendHtml(builderstuff, html);
+  dom$z.appendHtml(builderStuff, html);
   new Draggable$1({
     selector: '.is-draggable'
   });
@@ -24012,8 +24550,8 @@ Sortable.mount(Remove, Revert);
 const dom$x = new Dom();
 
 const renderSnippetPanel = builder => {
-  const util = new Util(builder);
-  const builderStuff = util.builderStuff();
+  const util = builder.util;
+  const builderStuff = builder.builderStuff;
   let hideHandle = '';
   let sidePanel = builder.opts.sidePanel;
 
@@ -47341,9 +47879,9 @@ const dom$w = new Dom();
 class Image {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     let imageTool = builderStuff.querySelector('#divImageTool');
     let imageResizer;
 
@@ -49536,8 +50074,8 @@ const dom$v = new Dom();
 class Hyperlink {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
-    const builderStuff = util.builderStuff();
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.builderStuff = builderStuff;
     let linkTool = builderStuff.querySelector('#divLinkTool');
 
@@ -50090,9 +50628,9 @@ const dom$u = new Dom();
 class Spacer {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     let spacerTool = builderStuff.querySelector('.is-spacer-tool');
 
@@ -50256,9 +50794,9 @@ const dom$t = new Dom();
 class Module {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     let moduleTool = builderStuff.querySelector('.is-module-tool');
     let moduleModal;
@@ -50445,7 +50983,8 @@ class Module {
 
           i++;
         });
-        this.builder.applyBehavior(); //Trigger Change event
+        let builderActive = document.querySelector('.builder-active');
+        if (builderActive) this.builder.applyBehaviorOn(builderActive); //Trigger Change event
 
         this.builder.opts.onChange(); //Trigger Render event
 
@@ -50501,12 +51040,12 @@ const dom$s = new Dom();
 class Code {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
+    this.builderStuff = builderStuff;
     const htmlUtil = new HtmlUtil(builder);
     this.htmlUtil = htmlUtil;
-    const builderStuff = util.builderStuff();
-    this.builderStuff = builderStuff;
     let codeTool = builderStuff.querySelector('.is-code-tool');
 
     if (!codeTool) {
@@ -50627,7 +51166,8 @@ class Code {
           var range = document.createRange();
           range.setStart(codeblock, 0);
           codeblock.appendChild(range.createContextualFragment(html));
-          this.builder.applyBehavior(); //Trigger Change event
+          let builderActive = document.querySelector('.builder-active');
+          if (builderActive) this.builder.applyBehaviorOn(builderActive); //Trigger Change event
 
           this.builder.opts.onChange(); //Trigger Render event
 
@@ -50702,9 +51242,9 @@ const dom$r = new Dom();
 class Iframe {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     let iframeTool = builderStuff.querySelector('.is-iframe-tool');
     let iframeModal;
@@ -50792,7 +51332,8 @@ class Iframe {
           }
 
           this.builder.activeIframe = iframeParent.querySelector('iframe');
-          this.builder.applyBehavior(); //Trigger Change event
+          let builderActive = document.querySelector('.builder-active');
+          if (builderActive) this.builder.applyBehaviorOn(builderActive); //Trigger Change event
 
           this.builder.opts.onChange();
         }
@@ -50844,9 +51385,9 @@ const dom$q = new Dom();
 class Table {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     let tableTool = builderStuff.querySelector('.is-table-tool');
     let tableModal;
@@ -51359,9 +51900,9 @@ const dom$p = new Dom();
 class Video {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
-    this.util = util;
+    const util = this.builder.util;
     const builderStuff = this.builder.builderStuff;
+    this.util = util;
     this.builderStuff = builderStuff;
     let videoTool = builderStuff.querySelector('.is-video-tool');
 
@@ -51578,8 +52119,10 @@ const dom$o = new Dom();
 class Element$1 {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
+    this.builderStuff = builderStuff;
     this.hyperlink = new Hyperlink(builder);
     this.image = new Image(builder);
     this.spacer = new Spacer(builder);
@@ -51588,8 +52131,6 @@ class Element$1 {
     this.iframe = new Iframe(builder);
     this.table = new Table(builder);
     this.video = new Video(builder);
-    const builderStuff = util.builderStuff();
-    this.builderStuff = builderStuff;
     window.addEventListener('keydown', e => {
       if (e.keyCode === 46) {
         //delete
@@ -51852,11 +52393,11 @@ const dom$n = new Dom();
 class RowTool {
   constructor(builder) {
     this.builder = builder;
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.grid = new Grid(builder);
-    const util = new Util(this.builder);
     const htmlutil = new HtmlUtil(builder);
-    const builderstuff = util.builderStuff();
-    let rowMore = builderstuff.querySelector('.rowmore');
+    let rowMore = builderStuff.querySelector('.rowmore');
     let htmlbutton = '';
     if (builder.opts.rowHtmlEditor) htmlbutton = `<button type="button" title="${util.out('HTML')}" class="row-html">
                 <span><svg class="is-icon-flex" style="margin-right:-3px;width:12px;height:12px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:12px;height:12px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></span>${util.out('HTML')}
@@ -51871,8 +52412,8 @@ class RowTool {
                     ${htmlbutton}
                 </div>
             </div>`;
-      dom$n.appendHtml(builderstuff, html);
-      rowMore = builderstuff.querySelector('.rowmore');
+      dom$n.appendHtml(builderStuff, html);
+      rowMore = builderStuff.querySelector('.rowmore');
       let elm = rowMore.querySelector('.row-up');
       if (elm) dom$n.addEventListener(elm, 'click', () => {
         this.grid.moveRowUp();
@@ -51917,8 +52458,8 @@ class RowTool {
   }
 
   render(row) {
-    const util = new Util(this.builder);
-    const builderstuff = util.builderStuff();
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     let rowMore = this.rowMore;
     let rowtool = row.querySelector('.is-row-tool');
 
@@ -51939,7 +52480,7 @@ class RowTool {
       });
       let elm = rowtool.querySelector('.row-grideditor');
       if (elm) dom$n.addEventListener(elm, 'click', () => {
-        const grideditor = builderstuff.querySelector('.grideditor');
+        const grideditor = builderStuff.querySelector('.grideditor');
 
         if (dom$n.hasClass(grideditor, 'active')) {
           dom$n.removeClass(grideditor, 'active');
@@ -51987,7 +52528,7 @@ class RowTool {
 
         dom$n.removeClass(row, 'row-outline'); //Hide Column tool
 
-        let columnTool = builderstuff.querySelector('.is-column-tool');
+        let columnTool = builderStuff.querySelector('.is-column-tool');
         dom$n.removeClass(columnTool, 'active');
         const elm = rowtool.querySelector('.row-more');
         const top = elm.getBoundingClientRect().top + window.pageYOffset;
@@ -52041,7 +52582,7 @@ class RowAddTool {
   }
 
   render(row) {
-    const util = new Util(this.builder);
+    const util = this.builder.util;
     const quickadd = renderQuickAdd(this.builder);
     let rowaddtool = row.querySelector('.is-rowadd-tool');
 
@@ -53756,9 +54297,9 @@ class ColumnTool {
   constructor(builder) {
     this.builder = builder;
     this.grid = new Grid(builder);
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     let columnTool = builderStuff.querySelector('.is-column-tool');
     let columnMore;
     let htmlbutton = '';
@@ -55187,9 +55728,9 @@ const dom$k = new Dom();
 class ELementStyleEditor {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     let modalStyles = builderStuff.querySelector('.editstyles');
 
@@ -55307,9 +55848,9 @@ const dom$j = new Dom();
 class ElementBoxStyles {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     const elementStyleEditor = new ELementStyleEditor(builder);
     let panelStuff = builderStuff.querySelector('#divElementBox');
@@ -55825,9 +56366,9 @@ const dom$i = new Dom();
 class ElementSpacingStyles {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     const elementStyleEditor = new ELementStyleEditor(builder);
     let panelStuff = builderStuff.querySelector('#divElementSpacing');
@@ -56478,9 +57019,9 @@ const dom$h = new Dom();
 class ElementBorderStyles {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     const elementStyleEditor = new ELementStyleEditor(builder);
     let panelStuff = builderStuff.querySelector('#divElementBorder');
@@ -57200,9 +57741,9 @@ const dom$g = new Dom();
 class ElementTextStyles {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     const elementStyleEditor = new ELementStyleEditor(builder);
     let panelStuff = builderStuff.querySelector('#divElementText');
@@ -57721,9 +58262,9 @@ const dom$f = new Dom();
 class ElementCornerStyles {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     const elementStyleEditor = new ELementStyleEditor(builder);
     let panelStuff = builderStuff.querySelector('#divElementCorner');
@@ -57916,9 +58457,9 @@ const dom$e = new Dom();
 class ElementShadowStyles {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     const elementStyleEditor = new ELementStyleEditor(builder);
     let panelStuff = builderStuff.querySelector('#divElementShadow');
@@ -58179,9 +58720,9 @@ const dom$d = new Dom();
 class ElementDisplayStyles {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     const elementStyleEditor = new ELementStyleEditor(builder);
     let panelStuff = builderStuff.querySelector('#divElementDisplay');
@@ -58370,9 +58911,9 @@ const dom$c = new Dom();
 class ElementPositionStyles {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     const elementStyleEditor = new ELementStyleEditor(builder);
     let panelStuff = builderStuff.querySelector('#divElementPosition');
@@ -58709,9 +59250,9 @@ const dom$b = new Dom();
 class ElementEffectStyles {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     const elementStyleEditor = new ELementStyleEditor(builder);
     let panelStuff = builderStuff.querySelector('#divElementEffect');
@@ -59264,9 +59805,9 @@ const dom$a = new Dom();
 class ElementAttributeStyles {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     let panelStuff = builderStuff.querySelector('#divElementAttribute');
     this.panelStuff = panelStuff;
@@ -59408,9 +59949,9 @@ const dom$9 = new Dom();
 class ElementAnimationStyles {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     let panelStuff = builderStuff.querySelector('#divElementAnimation');
     this.panelStuff = panelStuff;
@@ -59659,9 +60200,9 @@ let arrElms = [];
 class ElementPanel {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     let panel = builderStuff.querySelector('.elementstyles');
 
@@ -59888,13 +60429,14 @@ const dom$7 = new Dom();
 class ElementTool {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
+    this.builderStuff = builderStuff;
     const elementPanel = new ElementPanel(builder);
     this.elementPanel = elementPanel;
-    const builderstuff = util.builderStuff();
-    let elementTool = builderstuff.querySelector('.is-element-tool');
-    let elementMore = builderstuff.querySelector('.elmmore');
+    let elementTool = builderStuff.querySelector('.is-element-tool');
+    let elementMore = builderStuff.querySelector('.elmmore');
 
     if (!elementTool) {
       let html = `<div class="is-tool is-element-tool">
@@ -59914,9 +60456,9 @@ class ElementTool {
                 </div>
             </div>
             `;
-      dom$7.appendHtml(builderstuff, html);
-      elementTool = builderstuff.querySelector('.is-element-tool');
-      elementMore = builderstuff.querySelector('.elmmore'); // Prepare for tooltip
+      dom$7.appendHtml(builderStuff, html);
+      elementTool = builderStuff.querySelector('.is-element-tool');
+      elementMore = builderStuff.querySelector('.elmmore'); // Prepare for tooltip
 
       let elms = elementTool.querySelectorAll('[title]');
       Array.prototype.forEach.call(elms, elm => {
@@ -60002,14 +60544,14 @@ class ElementTool {
 
             if (cell.childElementCount === 0 && row.childElementCount === 3) {
               row.parentNode.removeChild(row);
-              let columnTool = builderstuff.querySelector('.is-column-tool'); // quick access
+              let columnTool = builderStuff.querySelector('.is-column-tool'); // quick access
 
               dom$7.removeClass(columnTool, 'active');
               util.checkEmpty();
             } else if (cell.childElementCount === 0) {
               row.removeChild(cell);
               util.fixLayout(row, builder);
-              let columnTool = builderstuff.querySelector('.is-column-tool'); // // quick access
+              let columnTool = builderStuff.querySelector('.is-column-tool'); // // quick access
 
               dom$7.removeClass(columnTool, 'active');
             }
@@ -60135,7 +60677,8 @@ class ElementTool {
       setTimeout(() => {
         newelm.click();
         this.position(newelm);
-        this.builder.applyBehavior(); //Trigger Change event
+        let builderActive = document.querySelector('.builder-active');
+        if (builderActive) this.builder.applyBehaviorOn(builderActive); //Trigger Change event
 
         this.builder.opts.onChange();
       }, 100); //Timeout needed by Safari
@@ -60414,8 +60957,8 @@ const dom$6 = new Dom();
 class Preferences {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
-    const builderstuff = util.builderStuff();
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     let htmlThemes = '';
 
     if (this.builder.themes) {
@@ -60435,7 +60978,7 @@ class Preferences {
       htmlThemes += '</div>';
     }
 
-    let config = builderstuff.querySelector('.viewconfig');
+    let config = builderStuff.querySelector('.viewconfig');
 
     if (!config) {
       let html = `<div class="is-modal viewconfig">
@@ -60561,8 +61104,8 @@ class Preferences {
                     </div>
                 </div>
             </div>`;
-      dom$6.appendHtml(builderstuff, html);
-      config = builderstuff.querySelector('.viewconfig');
+      dom$6.appendHtml(builderStuff, html);
+      config = builderStuff.querySelector('.viewconfig');
 
       if (!(builder.opts.snippetList === '#divSnippetList' && builder.opts.snippetJSON.snippets.length > 0)) {
         config.querySelector('.option-opensnippets').style.display = 'none';
@@ -60727,9 +61270,9 @@ class Preferences {
         this.setColumnTool(true);
         this.setBuilderMode('');
         this.setEmailMode();
-        builderstuff.querySelector('#divHideCellTool').style.display = 'none';
-        builderstuff.querySelector('#divOutlineMode').style.display = 'none';
-        builderstuff.querySelector('#divBuilderMode').style.display = 'none';
+        builderStuff.querySelector('#divHideCellTool').style.display = 'none';
+        builderStuff.querySelector('#divOutlineMode').style.display = 'none';
+        builderStuff.querySelector('#divBuilderMode').style.display = 'none';
       }
     }
 
@@ -60912,23 +61455,23 @@ class Preferences {
   }
 
   setToolbar(toolbar) {
-    let builderstuff = document.querySelector('#_cbhtml');
+    const builderStuff = this.builder.builderStuff;
 
     if (toolbar === 'top') {
-      builderstuff.removeAttribute('toolbarleft', '');
-      builderstuff.removeAttribute('toolbarright', '');
+      builderStuff.removeAttribute('toolbarleft', '');
+      builderStuff.removeAttribute('toolbarright', '');
     } else if (toolbar === 'left') {
-      builderstuff.setAttribute('toolbarleft', '');
-      builderstuff.removeAttribute('toolbarright', '');
+      builderStuff.setAttribute('toolbarleft', '');
+      builderStuff.removeAttribute('toolbarright', '');
     } else if (toolbar === 'right') {
-      builderstuff.setAttribute('toolbarright', '');
-      builderstuff.removeAttribute('toolbarleft', '');
+      builderStuff.setAttribute('toolbarright', '');
+      builderStuff.removeAttribute('toolbarleft', '');
     } // this.positionToolbar();
 
 
-    const rteTool = builderstuff.querySelector('.is-rte-tool');
-    const rteMoreOptions = builderstuff.querySelector('.rte-more-options');
-    const elementRteMoreOptions = builderstuff.querySelector('.elementrte-more-options');
+    const rteTool = builderStuff.querySelector('.is-rte-tool');
+    const rteMoreOptions = builderStuff.querySelector('.rte-more-options');
+    const elementRteMoreOptions = builderStuff.querySelector('.elementrte-more-options');
     if (rteTool) this.builder.rte.positionToolbar();
 
     if (rteMoreOptions) {
@@ -60940,14 +61483,14 @@ class Preferences {
   }
 
   setEmailMode() {
-    let builderstuff = document.querySelector('#_cbhtml');
-    builderstuff.setAttribute('emailmode', '');
+    const builderStuff = this.builder.builderStuff;
+    builderStuff.setAttribute('emailmode', '');
   }
   /*
   positionToolbar() { // direct
-      let builderstuff = document.querySelector('#_cbhtml');
-      const rteTool = builderstuff.querySelector('.is-rte-tool');
-      const rteMoreOptions = builderstuff.querySelector('.rte-more-options');
+      let builderStuff = document.querySelector('#_cbhtml');
+      const rteTool = builderStuff.querySelector('.is-rte-tool');
+      const rteMoreOptions = builderStuff.querySelector('.rte-more-options');
       if(rteTool){ // check in case rte stuff hasn't rendered yet
            const viewportWidth = window.innerWidth;
           const viewportHeight = window.innerHeight;
@@ -60978,19 +61521,19 @@ class Preferences {
       }
   }
    setToolbarDisplay(toolbardisplay) {
-      let builderstuff = document.querySelector('#_cbhtml');
+      let builderStuff = document.querySelector('#_cbhtml');
       if(toolbardisplay==='auto'){
-           builderstuff.removeAttribute('toolbarstay','');
+           builderStuff.removeAttribute('toolbarstay','');
            // direct
-          const rteTool = builderstuff.querySelector('.is-rte-tool');
+          const rteTool = builderStuff.querySelector('.is-rte-tool');
           if(rteTool) { // check in case rte stuff hasn't rendered yet
               rteTool.style.display = '';
           }
        } else {
-           builderstuff.setAttribute('toolbarstay','');
+           builderStuff.setAttribute('toolbarstay','');
            // direct
           const viewportWidth = window.innerWidth;
-          const rteTool = builderstuff.querySelector('.is-rte-tool');
+          const rteTool = builderStuff.querySelector('.is-rte-tool');
           if(rteTool) { // check in case rte stuff hasn't rendered yet
               let w = rteTool.offsetWidth;
               let left = (viewportWidth/2) - (w/2);
@@ -61002,12 +61545,12 @@ class Preferences {
 
 
   setElementTool(hideelementtool) {
-    let builderstuff = document.querySelector('#_cbhtml');
+    const builderStuff = this.builder.builderStuff;
 
     if (hideelementtool) {
-      builderstuff.setAttribute('hideelementtool', '');
+      builderStuff.setAttribute('hideelementtool', '');
     } else {
-      builderstuff.removeAttribute('hideelementtool', '');
+      builderStuff.removeAttribute('hideelementtool', '');
     }
   }
 
@@ -61034,12 +61577,12 @@ class Preferences {
   }
 
   setColumnTool(hidecolumntool) {
-    let builderstuff = document.querySelector('#_cbhtml');
+    const builderStuff = this.builder.builderStuff;
 
     if (hidecolumntool) {
-      builderstuff.setAttribute('hidecolumntool', '');
+      builderStuff.setAttribute('hidecolumntool', '');
     } else {
-      builderstuff.removeAttribute('hidecolumntool', '');
+      builderStuff.removeAttribute('hidecolumntool', '');
     }
   }
 
@@ -61055,15 +61598,15 @@ class Preferences {
   }
 
   setToolStyle(toolStyle) {
-    let builderstuff = document.querySelector('#_cbhtml');
+    const builderStuff = this.builder.builderStuff;
     const builders = document.querySelectorAll(this.builder.opts.container);
     Array.prototype.forEach.call(builders, builder => {
       if (toolStyle === 'gray') {
         builder.setAttribute('gray', '');
-        builderstuff.setAttribute('gray', '');
+        builderStuff.setAttribute('gray', '');
       } else {
         builder.removeAttribute('gray');
-        builderstuff.removeAttribute('gray', '');
+        builderStuff.removeAttribute('gray', '');
       }
     });
   }
@@ -61102,24 +61645,24 @@ class Preferences {
   }
 
   setBuilderMode(builderMode) {
-    let builderstuff = document.querySelector('#_cbhtml');
+    const builderStuff = this.builder.builderStuff;
     const builders = document.querySelectorAll(this.builder.opts.container);
     Array.prototype.forEach.call(builders, builder => {
       if (builderMode === '') {
         builder.removeAttribute('minimal');
         builder.removeAttribute('clean');
-        builderstuff.removeAttribute('minimal');
-        builderstuff.removeAttribute('clean');
+        builderStuff.removeAttribute('minimal');
+        builderStuff.removeAttribute('clean');
       } else if (builderMode === 'minimal') {
         builder.setAttribute('minimal', '');
         builder.removeAttribute('clean');
-        builderstuff.setAttribute('minimal', '');
-        builderstuff.removeAttribute('clean');
+        builderStuff.setAttribute('minimal', '');
+        builderStuff.removeAttribute('clean');
       } else if (builderMode === 'clean') {
         builder.setAttribute('clean', '');
         builder.removeAttribute('minimal');
-        builderstuff.setAttribute('clean', '');
-        builderstuff.removeAttribute('minimal');
+        builderStuff.setAttribute('clean', '');
+        builderStuff.removeAttribute('minimal');
       }
     });
   }
@@ -61197,20 +61740,14 @@ class Preferences {
 
 }
 
-/*
-LATER:
-- Get/show current font size, line height & letter spacing
-- Click toggle button shows gray highlight
-- Image di luar domain gak bisa di-edit (kasih warning)
-*/
 const dom$5 = new Dom();
 
 class Rte {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     this.elementStyleEditor = new ELementStyleEditor(builder);
     this.hyperlink = new Hyperlink(builder);
@@ -62071,7 +62608,8 @@ class Rte {
       let fileToInsert = modalInsertImage.querySelector('#imgInsertImagePreview').getAttribute('data-filename');
       util.pasteHtmlAtCaret('<img data-filename="' + fileToInsert + '" src="' + val + '" alt="" />', false);
       util.hideModal(modalInsertImage);
-      this.builder.applyBehavior(); //save selection
+      let builderActive = document.querySelector('.builder-active');
+      if (builderActive) this.builder.applyBehaviorOn(builderActive); //save selection
 
       util.saveSelection(); //Trigger Change event
 
@@ -62270,8 +62808,9 @@ class Rte {
       let scale = val / 100;
       this.builder.opts.zoom = scale;
       localStorage.setItem('_zoom', scale); // Save
+      // setZoomOnArea
 
-      this.builder.setZoom(); // hide tools
+      this.builder.setZoomOnArea(); // hide tools
 
       let tools = this.builderStuff.querySelectorAll('.is-tool');
       Array.prototype.forEach.call(tools, tool => {
@@ -62297,7 +62836,18 @@ class Rte {
 
     this.rteZoomSlider.onchange = () => {
       setTimeout(() => {
-        // show & reposition
+        // setZoomOnControl
+        if (this.builder.opts.page !== '') {
+          const wrapper = document.querySelector(this.builder.opts.page);
+          this.builder.setZoomOnControl(wrapper);
+        } else {
+          const builders = document.querySelectorAll(this.builder.opts.container);
+          builders.forEach(builder => {
+            this.builder.setZoomOnControl(builder);
+          });
+        } // show & reposition
+
+
         this.builder.elmTool.repositionElementTool();
         let col = this.builder.activeCol;
         let tool = this.builderStuff.querySelector('.is-column-tool');
@@ -62448,8 +62998,10 @@ class Rte {
               dom$5.selectElementContents(elm);
               document.execCommand('italic', false, null);
             } else {
-              if (elm.style.fontStyle === 'italic') {
-                elm.style.fontStyle = '';
+              let fontStyle = window.getComputedStyle(elm).getPropertyValue('font-style');
+
+              if (fontStyle === 'italic') {
+                elm.style.fontStyle = 'normal';
               } else {
                 elm.style.fontStyle = 'italic';
               }
@@ -62506,10 +63058,18 @@ class Rte {
         }
 
         if (command === 'uppercase') {
-          if (elm.style.textTransform === 'uppercase') {
-            elm.style.textTransform = '';
-          } else {
+          let textTransform = window.getComputedStyle(elm).getPropertyValue('text-transform');
+
+          if (textTransform === 'uppercase') {
+            elm.style.textTransform = 'lowercase';
+          } else if (textTransform === 'lowercase') {
+            elm.style.textTransform = 'capitalize';
+          } else if (textTransform === 'capitalize') {
+            elm.style.textTransform = 'none';
+          } else if (textTransform === 'none') {
             elm.style.textTransform = 'uppercase';
+          } else {
+            elm.style.textTransform = 'none';
           }
         }
 
@@ -63044,23 +63604,51 @@ class Rte {
         } // var text = dom.getSelected();
 
 
-        this.builder.uo.saveForUndo();
-        let currentLineHeight = Number(window.getComputedStyle(elm).getPropertyValue('line-height').match(/\d+/)[0]);
+        this.builder.uo.saveForUndo(); // let currentLineHeight = Number(window.getComputedStyle(elm).getPropertyValue('line-height').match(/\d+/)[0]);
+
+        let isInPx = false;
+        let currentLineHeight = elm.style.lineHeight;
+
+        if (currentLineHeight) {
+          if (currentLineHeight.indexOf('px') === -1) {
+            currentLineHeight = parseFloat(currentLineHeight);
+          } else {
+            isInPx = true;
+          }
+        } else {
+          isInPx = true;
+        }
+
+        if (isInPx) {
+          let fontSize = Number(window.getComputedStyle(elm).getPropertyValue('font-size').match(/\d+/)[0]);
+          currentLineHeight = Number(window.getComputedStyle(elm).getPropertyValue('line-height').match(/\d+/)[0]);
+
+          if (fontSize > currentLineHeight) {
+            currentLineHeight = fontSize / currentLineHeight;
+          } else if (fontSize < currentLineHeight) {
+            currentLineHeight = currentLineHeight / fontSize;
+          } else {
+            currentLineHeight = 1;
+          }
+        }
+
         let lineheight;
 
         if (num === '+') {
-          lineheight = currentLineHeight + 1 + 'px';
+          lineheight = currentLineHeight + 0.2;
         } else if (num === '-') {
-          lineheight = currentLineHeight - 1 + 'px';
+          lineheight = currentLineHeight - 0.2;
         } else if (num === '') {
           lineheight = '';
         } else {
           lineheight = num;
         }
+
+        if (lineheight < 0.2) lineheight = 0.2; // prevent very small number
+
         /** mod by Jack */
         //elm.style.lineHeight = lineheight;
 
-
         dom$5.doFunction(elm, function (theEl) {
           theEl.style.lineHeight = lineheight;
         }, true); //save selection
@@ -65450,8 +66038,10 @@ const dom$3 = new Dom();
 
 class Tooltip {
   constructor(builder) {
-    const util = new Util(builder);
-    const builderStuff = util.builderStuff();
+    this.builder = builder;
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
+    this.util = util;
     this.builderStuff = builderStuff;
     let tooltip = builderStuff.querySelector('.is-tooltip');
 
@@ -65576,17 +66166,18 @@ const dom$2 = new Dom();
 class Lightbox {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
-    let builderStuff = document.querySelector('#_cbhtml'); // All editing controls will be placed within <div id="_cbhtml">...</div>
-
-    if (!builderStuff) {
-      builderStuff = dom$2.createElement('div');
-      builderStuff.id = '_cbhtml';
-      builderStuff.className = 'is-ui';
-      dom$2.appendChild(document.body, builderStuff);
-    }
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
+    this.util = util;
+    this.builderStuff = builderStuff; // let builderStuff = document.querySelector('#_cbhtml'); // All editing controls will be placed within <div id="_cbhtml">...</div>
+    // if(!builderStuff) {
+    //     builderStuff = dom.createElement('div');
+    //     builderStuff.id = '_cbhtml';
+    //     builderStuff.className = 'is-ui';
+    //     dom.appendChild(document.body, builderStuff);
+    // } 
+    // this.builderStuff = builderStuff;
 
-    this.builderStuff = builderStuff;
     let html = `
             <div class="is-lightbox lightbox-externalvideo">
                 <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button" style="flex:none;position:absolute;top:0;right:0;background:none;z-index:1;">
@@ -66106,6 +66697,7 @@ class ContentBuilder {
       zoom: 1,
       useLightbox: false,
       imageRenameOnEdit: true,
+      disableAutoEmbedVideo: false,
 
       /*
       onZoomStart: () => {
@@ -66277,10 +66869,6 @@ class ContentBuilder {
     const util = new Util(this); // General utilities
 
     this.util = util;
-    /** added by Jack */
-
-    this.cbDom = new Dom(); // ---
-
     this.isTouchSupport = util.isTouchSupport();
     this.isIE = util.detectIE();
 
@@ -66291,6 +66879,7 @@ class ContentBuilder {
     this.uoTm = null;
     this.uo = new UndoRedo(this);
     this.dom = dom$F;
+    this.cbDom = dom$F;
     this.autoclean = false;
     this.filesAdded = '';
 
@@ -66313,9 +66902,19 @@ class ContentBuilder {
     this.preferences = new Preferences(this); // this will also call setUIColor() and getUIStyles() for theme
 
     renderGridEditor(this); // Render Grid Editor
+    // Check if preview
+    // Get all builder areas
 
-    if (this.opts.snippetJSON.snippets.length > 0) {
-      renderSnippetPanel(this); // Render Snippet Panel
+    this.preview = false;
+    const builders = document.querySelectorAll(this.opts.container);
+    Array.prototype.forEach.call(builders, builder => {
+      if (dom$F.hasClass(builder, 'preview')) this.preview = true;
+    });
+
+    if (!this.preview) {
+      if (this.opts.snippetJSON.snippets.length > 0) {
+        renderSnippetPanel(this); // Render Snippet Panel
+      }
     }
 
     this.colTool = new ColumnTool(this); // Render Column Tool
@@ -66346,26 +66945,28 @@ class ContentBuilder {
     this.rte = new Rte(this);
     this.tooltip = new Tooltip(this);
     this.lightbox = new Lightbox(this);
-    this.applyBehavior(); // Apply editing behavior on content (builder areas)
+    if (!this.preview) this.applyBehavior(); // Apply editing behavior on content (builder areas)
     // Load plugins
 
-    if (this.opts.plugins.length > 0) {
-      // Option to load plugins without config.js => just use plugins param (and specify the pluginPath).
-      this.loadPlugins();
-    } else {
-      if (typeof this.opts.scriptPath === 'undefined' && this.opts.pluginPath === '') ; else {
-        // Backward compatibility
-        if (!this.opts.disableConfig) {
-          let scriptUrl = this.opts.scriptPath + 'config.js';
-          if (this.opts.pluginPath !== '') scriptUrl = this.opts.pluginPath + 'config.js'; // overide plugin location if pluginPath is specified
-
-          this.loadScript(scriptUrl).then(() => {
-            if (this.opts.plugins.length > 0) {
-              this.loadPlugins();
-            }
-          }, () => {
-            console.log('Fail to load config');
-          });
+    if (!this.preview) {
+      if (this.opts.plugins.length > 0) {
+        // Option to load plugins without config.js => just use plugins param (and specify the pluginPath).
+        this.loadPlugins();
+      } else {
+        if (typeof this.opts.scriptPath === 'undefined' && this.opts.pluginPath === '') ; else {
+          // Backward compatibility
+          if (!this.opts.disableConfig) {
+            let scriptUrl = this.opts.scriptPath + 'config.js';
+            if (this.opts.pluginPath !== '') scriptUrl = this.opts.pluginPath + 'config.js'; // overide plugin location if pluginPath is specified
+
+            this.loadScript(scriptUrl).then(() => {
+              if (this.opts.plugins.length > 0) {
+                this.loadPlugins();
+              }
+            }, () => {
+              console.log('Fail to load config');
+            });
+          }
         }
       }
     } // Tooltip (move to after plugins loaded)
@@ -66537,9 +67138,11 @@ class ContentBuilder {
   }
 
   setZoom() {
+    // Complete (On Area + On Control)
     if (this.opts.page !== '') {
       const wrapper = document.querySelector(this.opts.page);
       wrapper.style.transform = `scale(${this.opts.zoom})`;
+      this.setZoomOnControl(wrapper);
     } else {
       const builders = document.querySelectorAll(this.opts.container);
       builders.forEach(builder => {
@@ -66558,18 +67161,10 @@ class ContentBuilder {
             builder.style.transition = '';
           }, 300);
         }
+
+        this.setZoomOnControl(builder);
       });
     }
-
-    const rowtools = document.querySelectorAll('.is-row-tool');
-    rowtools.forEach(rowtool => {
-      rowtool.style.transform = `scale(${1 / this.opts.zoom})`;
-      rowtool.style.transformOrigin = 'top';
-    });
-    const rowaddtools = document.querySelectorAll('.is-rowadd-tool button');
-    rowaddtools.forEach(rowaddtool => {
-      rowaddtool.style.transform = `scale(${1 / this.opts.zoom})`; // rowtool.style.transformOrigin = 'top';
-    });
     /*
     if(this.opts.zoom<1) {
         let ss = document.styleSheets;
@@ -66584,296 +67179,342 @@ class ContentBuilder {
         }
     }
     */
+
+  }
+
+  setZoomOnControl(area) {
+    const rowtools = area.querySelectorAll('.is-row-tool');
+    rowtools.forEach(rowtool => {
+      rowtool.style.transform = `scale(${1 / this.opts.zoom})`;
+      rowtool.style.transformOrigin = 'top';
+    });
+    const rowaddtools = area.querySelectorAll('.is-rowadd-tool button');
+    rowaddtools.forEach(rowaddtool => {
+      rowaddtool.style.transform = `scale(${1 / this.opts.zoom})`; // rowtool.style.transformOrigin = 'top';
+    });
+  }
+
+  setZoomOnArea() {
+    if (this.opts.page !== '') {
+      const wrapper = document.querySelector(this.opts.page);
+      wrapper.style.transform = `scale(${this.opts.zoom})`;
+    } else {
+      const builders = document.querySelectorAll(this.opts.container);
+      builders.forEach(builder => {
+        let fade = false; // to prevent initial load animation
+
+        if (!builder.style.transform) fade = true;
+
+        if (fade) {
+          builder.style.transition = 'none';
+        }
+
+        builder.style.transform = `scale(${this.opts.zoom})`;
+
+        if (fade) {
+          setTimeout(() => {
+            builder.style.transition = '';
+          }, 300);
+        }
+      });
+    }
   }
 
   applyBehavior() {
-    const util = this.util; // Get all builder areas
+    // Zoom (required by the next process, eg. setZoomOnControl)
+    if (localStorage.getItem('_zoom') !== null) {
+      this.opts.zoom = localStorage.getItem('_zoom'); // Get from saved localStorage
+    }
+
+    this.rte.rteZoomSlider.value = this.opts.zoom * 100; // Set slider value
+    // Get all builder areas
 
     const builders = document.querySelectorAll(this.opts.container);
     Array.prototype.forEach.call(builders, builder => {
-      //Make absolute
-      if (this.opts.absolutePath) {
-        let links = builder.querySelectorAll('a');
-        Array.prototype.forEach.call(links, link => {
-          let href = link.href;
-          link.setAttribute('href', href);
-        });
-        let imgs = builder.querySelectorAll('img');
-        Array.prototype.forEach.call(imgs, img => {
-          let src = img.src;
-          img.setAttribute('src', src);
-        });
-      } // Add .is-builder class on each builder area (container)
+      this.applyBehaviorOn(builder); // includes setZoomOnControl
+    }); // Call onRender to indicate content is ready for editing (applyBehavior has been applied)
 
+    this.opts.onRender();
+    this.setZoomOnArea(); // Set zoom
+  } // applyBehavior
 
-      dom$F.addClass(builder, 'is-builder'); // Additional setting needed for dynamically added .is-builder. Without this, current toolStyle won't be applied to newly created section (eg. in ContentBox))
-      // if (localStorage.getItem('_toolstyle') !== null) {
-      //     let toolStyle = localStorage.getItem('_toolstyle');
-      //     this.preferences.setToolStyle(toolStyle);
-      // } 
-      // if (localStorage.getItem('_outlinestyle') !== null) {
-      //     let outlineStyle = localStorage.getItem('_outlinestyle');
-      //     this.preferences.setOutlineStyle(outlineStyle);
-      // } 
 
-      this.preferences.initBuilder(builder); // Apply behavior on each row
+  applyBehaviorOn(builder) {
+    const util = this.util; //Make absolute
 
-      const rows = dom$F.elementChildren(builder);
-      rows.forEach(row => {
-        if (dom$F.hasClass(row, 'row-add-initial')) return; // Hack. If a row has margin left/right specified, don't need to set hidden border (that is used to make smooth sortable)
+    if (this.opts.absolutePath) {
+      let links = builder.querySelectorAll('a');
+      Array.prototype.forEach.call(links, link => {
+        let href = link.href;
+        link.setAttribute('href', href);
+      });
+      let imgs = builder.querySelectorAll('img');
+      Array.prototype.forEach.call(imgs, img => {
+        let src = img.src;
+        img.setAttribute('src', src);
+      });
+    } // Add .is-builder class on each builder area (container)
 
-        if (row.style.marginLeft || row.style.marginRight) {
-          row.style.border = 'none';
-        } // On each row, add 2 tools: Row tool (div.is-row-tool) & Row Add tool (div.is-rowadd-tool)
-        // Render Row tool
 
+    dom$F.addClass(builder, 'is-builder'); // Additional setting needed for dynamically added .is-builder. Without this, current toolStyle won't be applied to newly created section (eg. in ContentBox))
+    // if (localStorage.getItem('_toolstyle') !== null) {
+    //     let toolStyle = localStorage.getItem('_toolstyle');
+    //     this.preferences.setToolStyle(toolStyle);
+    // } 
+    // if (localStorage.getItem('_outlinestyle') !== null) {
+    //     let outlineStyle = localStorage.getItem('_outlinestyle');
+    //     this.preferences.setOutlineStyle(outlineStyle);
+    // } 
 
-        this.rowtool = new RowTool(this);
-        this.rowtool.render(row); // Render Row Add tool
+    this.preferences.initBuilder(builder); // Apply behavior on each row
 
-        const rowaddtool = new RowAddTool(this);
-        rowaddtool.render(row); // Apply behavior on each column
+    const rows = dom$F.elementChildren(builder);
+    rows.forEach(row => {
+      if (dom$F.hasClass(row, 'row-add-initial')) return; // Hack. If a row has margin left/right specified, don't need to set hidden border (that is used to make smooth sortable)
 
-        const cols = dom$F.elementChildren(row);
-        cols.forEach(col => {
-          if (dom$F.hasClass(col, 'is-row-tool') || dom$F.hasClass(col, 'is-rowadd-tool')) return; // Return if not a column
-          // For backward compatibility, replace:
-          // - data-mode="readonly" with data-noedit
-          // - data-mode="readonly-protected" with data-protected
+      if (row.style.marginLeft || row.style.marginRight) {
+        row.style.border = 'none';
+      } // On each row, add 2 tools: Row tool (div.is-row-tool) & Row Add tool (div.is-rowadd-tool)
+      // Render Row tool
 
-          if (col.getAttribute('data-mode') === 'readonly') {
-            col.setAttribute('data-noedit', '');
-            col.removeAttribute('data-mode');
-          }
 
-          if (col.getAttribute('data-mode') === 'readonly-protected') {
-            col.setAttribute('data-protected', '');
-            col.removeAttribute('data-mode');
-          } // Set ContentEditable
+      this.rowtool = new RowTool(this);
+      this.rowtool.render(row); // Render Row Add tool
 
+      const rowaddtool = new RowAddTool(this);
+      rowaddtool.render(row); // Apply behavior on each column
 
-          let noedit = false;
+      const cols = dom$F.elementChildren(row);
+      cols.forEach(col => {
+        if (dom$F.hasClass(col, 'is-row-tool') || dom$F.hasClass(col, 'is-rowadd-tool')) return; // Return if not a column
+        // For backward compatibility, replace:
+        // - data-mode="readonly" with data-noedit
+        // - data-mode="readonly-protected" with data-protected
 
-          if (col.hasAttribute('data-noedit')) {
-            // Column is not (text) editable.
-            noedit = true;
-          }
+        if (col.getAttribute('data-mode') === 'readonly') {
+          col.setAttribute('data-noedit', '');
+          col.removeAttribute('data-mode');
+        }
 
-          let _protected = false;
+        if (col.getAttribute('data-mode') === 'readonly-protected') {
+          col.setAttribute('data-protected', '');
+          col.removeAttribute('data-mode');
+        } // Set ContentEditable
 
-          if (col.hasAttribute('data-protected')) {
-            // Column is not (text) editable and also: cannot be deleted, moved or duplicated.
-            _protected = true;
-          }
 
-          let customcode = false;
+        let noedit = false;
 
-          if (col.hasAttribute('data-html')) {
-            // Column contains custom code.
-            customcode = true;
-          } // let custommodule = false;
-          // if (col.hasAttribute('data-module')) { // Column contains custom module.
-          //     custommodule = true;
-          // }
+        if (col.hasAttribute('data-noedit')) {
+          // Column is not (text) editable.
+          noedit = true;
+        }
 
+        let _protected = false;
 
-          if (!customcode && !noedit && !_protected) {
-            // Check if column contains editable text
-            let elms = col.querySelectorAll('p,h1,h2,h3,h4,h5,h6,table,ul,ol,pre,blockquote,code,figcaption,label,legend,button,a');
+        if (col.hasAttribute('data-protected')) {
+          // Column is not (text) editable and also: cannot be deleted, moved or duplicated.
+          _protected = true;
+        }
 
-            if (elms.length > 0) {
-              col.contentEditable = true; // Column is (text) editable
-            }
-          } // Apply behavior on several elements for editing purpose
+        let customcode = false;
 
+        if (col.hasAttribute('data-html')) {
+          // Column contains custom code.
+          customcode = true;
+        } // let custommodule = false;
+        // if (col.hasAttribute('data-module')) { // Column contains custom module.
+        //     custommodule = true;
+        // }
 
-          this.element.applyBehavior(col); // Add events on column
 
-          if (!col.getAttribute('data-click')) {
-            // ON CLICK
-            // Use bind() => https://www.w3schools.com/react/react_events.asp
-            col.addEventListener('click', this.handleCellClick.bind(this, col)); // ON KEYPRESS
+        if (!customcode && !noedit && !_protected) {
+          // Check if column contains editable text
+          let elms = col.querySelectorAll('p,h1,h2,h3,h4,h5,h6,table,ul,ol,pre,blockquote,code,figcaption,label,legend,button,a');
 
-            col.addEventListener('keydown', this.handleCellKeypress.bind(this)); // ON KEYDOWN
+          if (elms.length > 0) {
+            col.contentEditable = true; // Column is (text) editable
+          }
+        } // Apply behavior on several elements for editing purpose
 
-            col.addEventListener('keydown', this.handleCellKeydown.bind(this, col)); // ON KEYUP
 
-            col.addEventListener('keyup', this.handleCellKeyup.bind(this, col)); // ON PASTE
+        this.element.applyBehavior(col); // Add events on column
 
-            col.addEventListener('paste', this.handleCellPaste.bind(this));
-            col.setAttribute('data-click', true);
-          }
-        });
-      }); // Sortable on each builder (container)
+        if (!col.getAttribute('data-click')) {
+          // ON CLICK
+          // Use bind() => https://www.w3schools.com/react/react_events.asp
+          col.addEventListener('click', this.handleCellClick.bind(this, col)); // ON KEYPRESS
 
-      if (!builder.getAttribute('data-sort') && !builder.hasAttribute('nogrid')) {
-        // Check first if sortable has been added.
+          col.addEventListener('keydown', this.handleCellKeypress.bind(this)); // ON KEYDOWN
 
-        /*
-        let userAgentString = navigator.userAgent; 
-        let safariAgent = userAgentString.indexOf('Safari') > -1; 
-        let chromeAgent = userAgentString.indexOf('Chrome') > -1; 
-        if ((chromeAgent) && (safariAgent)) safariAgent = false;
-        */
-        // let safariAgent = false;
-        let sortableObject = new Sortable(builder, {
-          // forceFallback: safariAgent,
-          // forceFallback: true,
-          scroll: true,
-          // invertSwap: true, /* https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction#swap-threshold */
-          group: 'shared',
-          direction: 'dummy',
-          animation: 300,
-          handle: '.row-handle',
-          // swapThreshold: 0.1, // this cause drag drop snippet sometimes difficult
-          // invertedSwapThreshold: 0.1,
-          sort: true,
-          onStart: () => {
-            this.uo.saveForUndo(); // Even if cancelled, saveForUndo will make sure not to save if there is no change 
-
-            this.colTool.hideColumnTool();
-            this.elmTool.hide();
-          },
-          onEnd: () => {
-            if (!this.opts.emailMode) {
-              if (dom$F.hasClass(this.activeCol.parentNode, 'row-outline')) {
-                //if not row selection, but col selection
-                //if(this.activeCol.parentNode.classList.contains('row-outline')) { //if not row selection, but col selection
-                this.colTool.refreshColumnTool(this.activeCol);
-                this.colTool.showColumnTool(this.activeCol);
-              }
+          col.addEventListener('keydown', this.handleCellKeydown.bind(this, col)); // ON KEYUP
+
+          col.addEventListener('keyup', this.handleCellKeyup.bind(this, col)); // ON PASTE
+
+          col.addEventListener('paste', this.handleCellPaste.bind(this));
+          col.setAttribute('data-click', true);
+        }
+      });
+    }); // Sortable on each builder (container)
+
+    if (!builder.getAttribute('data-sort') && !builder.hasAttribute('nogrid')) {
+      // Check first if sortable has been added.
+
+      /*
+      let userAgentString = navigator.userAgent; 
+      let safariAgent = userAgentString.indexOf('Safari') > -1; 
+      let chromeAgent = userAgentString.indexOf('Chrome') > -1; 
+      if ((chromeAgent) && (safariAgent)) safariAgent = false;
+      */
+      // let safariAgent = false;
+      let sortableObject = new Sortable(builder, {
+        // forceFallback: safariAgent,
+        // forceFallback: true,
+        scroll: true,
+        // invertSwap: true, /* https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction#swap-threshold */
+        group: 'shared',
+        direction: 'dummy',
+        animation: 300,
+        handle: '.row-handle',
+        // swapThreshold: 0.1, // this cause drag drop snippet sometimes difficult
+        // invertedSwapThreshold: 0.1,
+        sort: true,
+        onStart: () => {
+          this.uo.saveForUndo(); // Even if cancelled, saveForUndo will make sure not to save if there is no change 
+
+          this.colTool.hideColumnTool();
+          this.elmTool.hide();
+        },
+        onEnd: () => {
+          if (!this.opts.emailMode) {
+            if (dom$F.hasClass(this.activeCol.parentNode, 'row-outline')) {
+              //if not row selection, but col selection
+              //if(this.activeCol.parentNode.classList.contains('row-outline')) { //if not row selection, but col selection
+              this.colTool.refreshColumnTool(this.activeCol);
+              this.colTool.showColumnTool(this.activeCol);
             }
-          },
-          onAdd: evt => {
-            var itemEl = evt.item;
+          }
+        },
+        onAdd: evt => {
+          var itemEl = evt.item;
 
-            if (itemEl.getAttribute('data-id')) {
-              // If has data-id attribute, the dropped item is from snippet panel (snippetpanel.js)
-              let snippetid = itemEl.getAttribute('data-id'); // snippetJSON is snippet's JSON (from assets/minimalist-blocks/content.js) that store all snippets' html
+          if (itemEl.getAttribute('data-id')) {
+            // If has data-id attribute, the dropped item is from snippet panel (snippetpanel.js)
+            let snippetid = itemEl.getAttribute('data-id'); // snippetJSON is snippet's JSON (from assets/minimalist-blocks/content.js) that store all snippets' html
 
-              const result = this.opts.snippetJSON.snippets.filter(item => {
-                if (item.id + '' === snippetid) return item;else return false;
-              });
-              var html = result[0].html;
-              var noedit = result[0].noedit;
-              var bSnippet;
+            const result = this.opts.snippetJSON.snippets.filter(item => {
+              if (item.id + '' === snippetid) return item;else return false;
+            });
+            var html = result[0].html;
+            var noedit = result[0].noedit;
+            var bSnippet;
 
-              if (html.indexOf('row clearfix') === -1) {
-                bSnippet = true; // Just snippet (without row/column grid)
-              } else {
-                bSnippet = false; // Snippet is wrapped in row/colum
-              }
+            if (html.indexOf('row clearfix') === -1) {
+              bSnippet = true; // Just snippet (without row/column grid)
+            } else {
+              bSnippet = false; // Snippet is wrapped in row/colum
+            }
 
-              if (this.opts.emailMode) bSnippet = false; // Convert snippet into your defined 12 columns grid   
+            if (this.opts.emailMode) bSnippet = false; // Convert snippet into your defined 12 columns grid   
 
-              var rowClass = this.opts.row; //row
+            var rowClass = this.opts.row; //row
 
-              var colClass = this.opts.cols; //['col s1', 'col s2', 'col s3', 'col s4', 'col s5', 'col s6', 'col s7', 'col s8', 'col s9', 'col s10', 'col s11', 'col s12']
+            var colClass = this.opts.cols; //['col s1', 'col s2', 'col s3', 'col s4', 'col s5', 'col s6', 'col s7', 'col s8', 'col s9', 'col s10', 'col s11', 'col s12']
 
-              if (rowClass !== '' && colClass.length === 12) {
-                html = html.replace(new RegExp('row clearfix', 'g'), rowClass);
-                html = html.replace(new RegExp('column full', 'g'), colClass[11]);
-                html = html.replace(new RegExp('column half', 'g'), colClass[5]);
-                html = html.replace(new RegExp('column third', 'g'), colClass[3]);
-                html = html.replace(new RegExp('column fourth', 'g'), colClass[2]);
-                html = html.replace(new RegExp('column fifth', 'g'), colClass[1]);
-                html = html.replace(new RegExp('column sixth', 'g'), colClass[1]);
-                html = html.replace(new RegExp('column two-third', 'g'), colClass[7]);
-                html = html.replace(new RegExp('column two-fourth', 'g'), colClass[8]);
-                html = html.replace(new RegExp('column two-fifth', 'g'), colClass[9]);
-                html = html.replace(new RegExp('column two-sixth', 'g'), colClass[9]);
-              }
+            if (rowClass !== '' && colClass.length === 12) {
+              html = html.replace(new RegExp('row clearfix', 'g'), rowClass);
+              html = html.replace(new RegExp('column full', 'g'), colClass[11]);
+              html = html.replace(new RegExp('column half', 'g'), colClass[5]);
+              html = html.replace(new RegExp('column third', 'g'), colClass[3]);
+              html = html.replace(new RegExp('column fourth', 'g'), colClass[2]);
+              html = html.replace(new RegExp('column fifth', 'g'), colClass[1]);
+              html = html.replace(new RegExp('column sixth', 'g'), colClass[1]);
+              html = html.replace(new RegExp('column two-third', 'g'), colClass[7]);
+              html = html.replace(new RegExp('column two-fourth', 'g'), colClass[8]);
+              html = html.replace(new RegExp('column two-fifth', 'g'), colClass[9]);
+              html = html.replace(new RegExp('column two-sixth', 'g'), colClass[9]);
+            }
 
-              html = html.replace(/{id}/g, util.makeId()); // Replace {id} with auto generated id (for custom code snippet)
+            html = html.replace(/{id}/g, util.makeId()); // Replace {id} with auto generated id (for custom code snippet)
 
-              if (this.opts.onAdd) {
-                html = this.opts.onAdd(html);
-              }
+            if (this.opts.onAdd) {
+              html = this.opts.onAdd(html);
+            }
 
-              if (this.opts.snippetPathReplace.length > 0) {
-                // try {
-                if (this.opts.snippetPathReplace[0] !== '') {
-                  var regex = new RegExp(this.opts.snippetPathReplace[0], 'g');
-                  html = html.replace(regex, this.opts.snippetPathReplace[1]);
-                  var string1 = this.opts.snippetPathReplace[0].replace(/\//g, '%2F');
-                  var string2 = this.opts.snippetPathReplace[1].replace(/\//g, '%2F');
-                  var regex2 = new RegExp(string1, 'g');
-                  html = html.replace(regex2, string2);
-                } // } catch (e) { 1; }
+            if (this.opts.snippetPathReplace.length > 0) {
+              // try {
+              if (this.opts.snippetPathReplace[0] !== '') {
+                var regex = new RegExp(this.opts.snippetPathReplace[0], 'g');
+                html = html.replace(regex, this.opts.snippetPathReplace[1]);
+                var string1 = this.opts.snippetPathReplace[0].replace(/\//g, '%2F');
+                var string2 = this.opts.snippetPathReplace[1].replace(/\//g, '%2F');
+                var regex2 = new RegExp(string1, 'g');
+                html = html.replace(regex2, string2);
+              } // } catch (e) { 1; }
 
-              }
+            }
 
-              if (bSnippet) {
-                // Just snippet (without row/column grid), ex. buttons, line, social, video, map.
-                // Can be inserted after current row, column (cell), element, or last row.
-                html = `<div class="${this.opts.row}"><div class="${this.opts.cols[this.opts.cols.length - 1]}"${noedit ? ' data-noedit' : ''}>${html}</div></div>`; // Clean snippet from sortable related code
+            if (bSnippet) {
+              // Just snippet (without row/column grid), ex. buttons, line, social, video, map.
+              // Can be inserted after current row, column (cell), element, or last row.
+              html = `<div class="${this.opts.row}"><div class="${this.opts.cols[this.opts.cols.length - 1]}"${noedit ? ' data-noedit' : ''}>${html}</div></div>`; // Clean snippet from sortable related code
 
-                itemEl.removeAttribute('draggable');
-                dom$F.removeClass(itemEl, 'snippet-item');
-                itemEl.outerHTML = html;
-              } else {
-                // Snippet is wrapped in row/colum (may contain custom code or has [data-html] attribute)
-                // Can only be inserted after current row or last row (not on column or element).
-                let snippet = dom$F.createElement('div');
-                snippet.innerHTML = html;
-                let blocks = snippet.querySelectorAll('[data-html]');
-                Array.prototype.forEach.call(blocks, block => {
-                  // Render custom code block
-                  html = decodeURIComponent(block.getAttribute('data-html'));
-                  html = html.replace(/{id}/g, util.makeId());
-
-                  for (var i = 1; i <= 20; i++) {
-                    html = html.replace('[%HTML' + i + '%]', block.getAttribute('data-html-' + i) === undefined ? '' : decodeURIComponent(block.getAttribute('data-html-' + i))); //render editable area
-                  }
+              itemEl.removeAttribute('draggable');
+              dom$F.removeClass(itemEl, 'snippet-item');
+              itemEl.outerHTML = html;
+            } else {
+              // Snippet is wrapped in row/colum (may contain custom code or has [data-html] attribute)
+              // Can only be inserted after current row or last row (not on column or element).
+              let snippet = dom$F.createElement('div');
+              snippet.innerHTML = html;
+              let blocks = snippet.querySelectorAll('[data-html]');
+              Array.prototype.forEach.call(blocks, block => {
+                // Render custom code block
+                html = decodeURIComponent(block.getAttribute('data-html'));
+                html = html.replace(/{id}/g, util.makeId());
+
+                for (var i = 1; i <= 20; i++) {
+                  html = html.replace('[%HTML' + i + '%]', block.getAttribute('data-html-' + i) === undefined ? '' : decodeURIComponent(block.getAttribute('data-html-' + i))); //render editable area
+                }
 
-                  block.innerHTML = html;
-                });
-                html = snippet.innerHTML; // Clean snippet from sortable related code
+                block.innerHTML = html;
+              });
+              html = snippet.innerHTML; // Clean snippet from sortable related code
 
-                itemEl.removeAttribute('draggable');
-                dom$F.removeClass(itemEl, 'snippet-item');
-                itemEl.innerHTML = ''; // Use createContextualFragment() to make embedded script executable
-                // https://ghinda.net/article/script-tags/
+              itemEl.removeAttribute('draggable');
+              dom$F.removeClass(itemEl, 'snippet-item');
+              itemEl.innerHTML = ''; // Use createContextualFragment() to make embedded script executable
+              // https://ghinda.net/article/script-tags/
 
-                var range = document.createRange();
-                range.setStart(itemEl, 0);
-                itemEl.appendChild(range.createContextualFragment(html));
-                itemEl.outerHTML = itemEl.innerHTML;
-              } // After snippet has been added, re-apply behavior on builder areas
+              var range = document.createRange();
+              range.setStart(itemEl, 0);
+              itemEl.appendChild(range.createContextualFragment(html));
+              itemEl.outerHTML = itemEl.innerHTML;
+            } // After snippet has been added, re-apply behavior on builder areas
 
 
-              this.applyBehavior(); // Call onChange
+            this.applyBehaviorOn(builder); // Call onChange
 
-              this.opts.onChange(); // Hide element tool
+            this.opts.onChange(); // Hide element tool
 
-              this.elmTool.hide();
-            }
+            this.elmTool.hide();
           }
-        });
-        this.sortableObjects.push(sortableObject);
-        builder.setAttribute('data-sort', true);
-      } // /Sortable
+        }
+      });
+      this.sortableObjects.push(sortableObject);
+      builder.setAttribute('data-sort', true);
+    } // /Sortable
+    // Additional contentEditable for subblock
 
-    }); // Additional contentEditable for subblock
 
-    const subblocks = document.querySelectorAll('.is-subblock');
+    const subblocks = builder.querySelectorAll('.is-subblock');
     Array.prototype.forEach.call(subblocks, subblock => {
       subblock.contentEditable = true;
     }); // Check if there is empty builder area (still has no content)
 
-    util.checkEmpty(); // Call onRender to indicate content is ready for editing (applyBehavior has been applied)
-
-    this.opts.onRender(); // Zoom
-
-    if (localStorage.getItem('_zoom') !== null) {
-      this.opts.zoom = localStorage.getItem('_zoom'); // Get from saved localStorage
-    }
-
-    this.rte.rteZoomSlider.value = this.opts.zoom * 100; // Set slider value
-
-    this.setZoom(); // Set zoom
-  } // applyBehavior
+    this.util.checkEmptyOn(builder); // Zoom
 
+    this.setZoomOnControl(builder);
+  }
 
   html(area) {
     const util = this.util;
@@ -67675,6 +68316,7 @@ class ContentBuilder {
   }
 
   loadSnippets(snippetFile) {
+    if (this.preview) return;
     let snippetPanel = document.querySelector(this.opts.snippetList);
     if (snippetPanel) return; // do not render if already rendered (just protection)
 
@@ -68384,26 +69026,29 @@ class ContentBuilder {
         let contentword = document.querySelector('#idContentWord'); //Check video embed
 
         var bPasteObject = false;
-        var src = contentword.innerText; //var youRegex = /^http[s]?:\/\/(((www.youtube.com\/watch\?(feature=player_detailpage&)?)v=)|(youtu.be\/))([^#\&\?]*)/;
+        var src = contentword.innerText;
 
-        var youRegex = /^http[s]?:\/\/(((www.youtube.com\/watch\?(feature=player_detailpage&)?)v=)|(youtu.be\/))([^#&?]*)/;
-        var vimeoRegex = /^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/)|(video\/))?([0-9]+)\/?/;
-        var youRegexMatches = youRegex.exec(src);
-        var vimeoRegexMatches = vimeoRegex.exec(src);
+        if (!this.opts.disableAutoEmbedVideo) {
+          //var youRegex = /^http[s]?:\/\/(((www.youtube.com\/watch\?(feature=player_detailpage&)?)v=)|(youtu.be\/))([^#\&\?]*)/;
+          var youRegex = /^http[s]?:\/\/(((www.youtube.com\/watch\?(feature=player_detailpage&)?)v=)|(youtu.be\/))([^#&?]*)/;
+          var vimeoRegex = /^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/)|(video\/))?([0-9]+)\/?/;
+          var youRegexMatches = youRegex.exec(src);
+          var vimeoRegexMatches = vimeoRegex.exec(src);
 
-        if (youRegexMatches !== null || vimeoRegexMatches !== null) {
-          if (youRegexMatches !== null && youRegexMatches.length >= 7) {
-            var youMatch = youRegexMatches[6];
-            src = 'https://www.youtube.com/embed/' + youMatch + '?rel=0';
-          }
+          if (youRegexMatches !== null || vimeoRegexMatches !== null) {
+            if (youRegexMatches !== null && youRegexMatches.length >= 7) {
+              var youMatch = youRegexMatches[6];
+              src = 'https://www.youtube.com/embed/' + youMatch + '?rel=0';
+            }
 
-          if (vimeoRegexMatches !== null && vimeoRegexMatches.length >= 7) {
-            var vimeoMatch = vimeoRegexMatches[6];
-            src = 'https://player.vimeo.com/video/' + vimeoMatch;
-          }
+            if (vimeoRegexMatches !== null && vimeoRegexMatches.length >= 7) {
+              var vimeoMatch = vimeoRegexMatches[6];
+              src = 'https://player.vimeo.com/video/' + vimeoMatch;
+            }
 
-          sPastedText = '<div class="embed-responsive embed-responsive-16by9"><iframe width="560" height="315" src="' + src + '" frameborder="0" allowfullscreen=""></iframe></div>';
-          bPasteObject = true;
+            sPastedText = '<div class="embed-responsive embed-responsive-16by9"><iframe width="560" height="315" src="' + src + '" frameborder="0" allowfullscreen=""></iframe></div>';
+            bPasteObject = true;
+          }
         }
 
         if (!bPasteObject) {
@@ -68525,7 +69170,8 @@ class ContentBuilder {
 
         oSel.removeAllRanges();
         oSel.addRange(range);
-        this.applyBehavior(); //Trigger Change event
+        let builderActive = document.querySelector('.builder-active');
+        if (builderActive) this.applyBehaviorOn(builderActive); //Trigger Change event
 
         this.opts.onChange(); //Trigger Render event
 
@@ -71217,11 +71863,14 @@ class ContentBox {
     this.editsection = new EditSection(this);
     this.editbox = new EditBox(this);
     setTimeout(() => {
-      this.pageSetup(); // this.wrapperEl.style.opacity = 1;
+      if (!this.pageSetupDone) {
+        this.pageSetup();
+      } // this.wrapperEl.style.opacity = 1;
       // Remove the page-overlay
       // setTimeout(()=>{
       //     pageOverlay.parentNode.removeChild(pageOverlay);
       // }, 10);
+
     }, 300); //give delay for the transition (0.3ms) to finish (see box.css on .is-wrapper)
 
     Pace.start();
@@ -71340,13 +71989,11 @@ class ContentBox {
     if (newArea.indexOf('is-static') == -1 && hasStatic) {
       // If page has a footer (a static section), then insert the new section before it.
       dom.appendHtml(lastSection, newArea, 'beforebegin');
-      newSection = lastSection.previousSibling;
-
-      if (newSection.previousSibling) {
-        if (!dom.hasClass(newSection.previousSibling, 'is-bg-grey')) {
-          dom.addClass(newSection, 'is-bg-grey');
-        }
-      }
+      newSection = lastSection.previousSibling; // if(newSection.previousSibling) {
+      //     if(!dom.hasClass(newSection.previousSibling, 'is-bg-grey')) {
+      //         dom.addClass(newSection, 'is-bg-grey');
+      //     }
+      // }
     } else {
       const sectionElms = this.wrapperEl.querySelectorAll('.is-section');
 
@@ -71358,50 +72005,72 @@ class ContentBox {
         dom.appendHtml(this.wrapperEl, newArea, 'afterbegin');
       }
 
-      newSection = dom.getLastElement(this.wrapperEl, '.is-section');
+      newSection = dom.getLastElement(this.wrapperEl, '.is-section'); // if(newSection.previousSibling) {
+      //     if(!dom.hasClass(newSection.previousSibling, 'is-bg-grey')) {
+      //         dom.addClass(newSection, 'is-bg-grey');
+      //     }
+      // }
+    }
 
-      if (newSection.previousSibling) {
-        if (!dom.hasClass(newSection.previousSibling, 'is-bg-grey')) {
-          dom.addClass(newSection, 'is-bg-grey');
-        }
-      }
-    } // Code Blocks Handling
+    let arrSections = [];
+    arrSections.push(newSection); // Check up to 3 sections (in case a template has up to 3 sections)
 
+    let prevSection = newSection.previousElementSibling;
 
-    let codeBlocks = newSection.querySelectorAll('.is-overlay-content[data-module]');
-    codeBlocks.forEach(element => {
-      let html = decodeURIComponent(element.getAttribute('data-html')); // Original code is stored in data-html attribute
+    if (prevSection) {
+      let ok = prevSection.querySelector('.is-section-tool');
 
-      html = html.replace(/{id}/g, dom.uniqueId()); //Fill the block with original code
+      if (!ok) {
+        arrSections.push(prevSection);
+      }
 
-      dom.html(element, html);
-    }); // Fix old structure (backward compatible)
+      prevSection = prevSection.previousElementSibling;
 
-    let overlays = newSection.querySelectorAll('.is-overlay');
-    overlays.forEach(overlay => {
-      let overlayContent = overlay.querySelector('.is-overlay-content');
+      if (prevSection) {
+        ok = prevSection.querySelector('.is-section-tool');
 
-      if (overlayContent) {
-        if (overlayContent.innerHTML === '') {
-          if (overlay.childElementCount === 1) {
-            overlay.parentNode.removeChild(overlay);
-          }
+        if (!ok) {
+          arrSections.push(prevSection);
         }
       }
-    });
-    this.editor.applyBehavior(); // Section Setup
+    }
 
-    this.sectionSetup(newSection); // Box Setup (previously: applyBoxBehavior)
+    arrSections.forEach(section => {
+      // Code Blocks Handling
+      let codeBlocks = section.querySelectorAll('.is-overlay-content[data-module]');
+      codeBlocks.forEach(element => {
+        let html = decodeURIComponent(element.getAttribute('data-html')); // Original code is stored in data-html attribute
 
-    if (dom.hasClass(newSection, 'is-box')) {
-      this.boxSetup(newSection);
-    } else {
-      const boxes = newSection.querySelectorAll('.is-box');
-      boxes.forEach(box => {
-        this.boxSetup(box);
-      });
-    } //Trigger Change event
+        html = html.replace(/{id}/g, dom.uniqueId()); //Fill the block with original code
+
+        dom.html(element, html);
+      }); // Fix old structure (backward compatible)
+
+      let overlays = section.querySelectorAll('.is-overlay');
+      overlays.forEach(overlay => {
+        let overlayContent = overlay.querySelector('.is-overlay-content');
+
+        if (overlayContent) {
+          if (overlayContent.innerHTML === '') {
+            if (overlay.childElementCount === 1) {
+              overlay.parentNode.removeChild(overlay);
+            }
+          }
+        }
+      }); // Section Setup
+
+      this.sectionSetup(section); // Box Setup (previously: applyBoxBehavior)
 
+      if (dom.hasClass(section, 'is-box')) {
+        this.boxSetup(section);
+      } else {
+        const boxes = section.querySelectorAll('.is-box');
+        boxes.forEach(box => {
+          this.boxSetup(box);
+        });
+      }
+    });
+    this.editor.applyBehavior(); //Trigger Change event
 
     this.onChange();
     dom.removeElement(document.querySelector('.is-sidebar-overlay'));
@@ -71443,9 +72112,7 @@ class ContentBox {
     btns.forEach(btn => {
       btn.style.color = this.editor.styleModalColor;
     });
-    const sectionIframe = document.querySelector('#ifrIdeasPanel'); // let doc = sectionIframe.contentWindow.document;
-    // console.log(doc);
-
+    const sectionIframe = document.querySelector('#ifrIdeasPanel');
     if (sectionIframe.contentWindow.applyParentStyles) sectionIframe.contentWindow.applyParentStyles();
   }
 
@@ -71550,12 +72217,12 @@ class ContentBox {
     const btnNew = builderStuff.querySelector('#' + btnId);
     btnNew.addEventListener('click', () => {
       if (btn.src) {
-        if (!dom.hasClass(btn, 'active')) {
+        if (!dom.hasClass(btnNew, 'active')) {
           dom.removeClass(builderStuff.querySelector('.is-sidebar > div'), 'active');
           dom.removeClass(builderStuff.querySelector('.is-sidebar-content'), 'active');
           document.body.style.overflowY = '';
-          dom.addClass(btn, 'active');
-          var id = btn.getAttribute('data-content');
+          dom.addClass(btnNew, 'active');
+          var id = btnNew.getAttribute('data-content');
           dom.addClass(builderStuff.querySelector('#' + id), 'active');
           var iframe = builderStuff.querySelector('#' + id + ' iframe');
 
@@ -71652,6 +72319,12 @@ class ContentBox {
   }
 
   loadHtml(html) {
+    const wrapper = this.wrapperEl;
+
+    if (!wrapper.style.opacity) {
+      wrapper.style.opacity = '0';
+    }
+
     if (!this.editor) {
       // Wait for the ContentBuilder init complete
       setTimeout(() => {
@@ -71662,11 +72335,11 @@ class ContentBox {
 
 
     let range = document.createRange();
-    const wrapper = this.wrapperEl;
     wrapper.innerHTML = '';
     wrapper.appendChild(range.createContextualFragment(html)); // We use createContextualFragment so that embedded javascript code (code block) will be executed
 
     this.pageSetup();
+    this.pageSetupDone = true; //prevent duplicate for traditional pageSetup on init
   }
 
   boxImage(url) {