@innovastudio/contentbox 1.0.21 → 1.0.25

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);
@@ -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,21 +864,103 @@ 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
 
-        if (pageCss != '') {
+        if (this.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: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>' + '';
     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', () => {
@@ -1928,11 +2055,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 +2076,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;
@@ -7318,8 +7479,11 @@ 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
+
         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 +7652,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 +7677,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 +7693,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 +7741,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 +7787,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 +7814,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 +8069,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 +8086,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 +8131,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
@@ -8306,12 +8456,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 +8501,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
 
@@ -8887,7 +9069,7 @@ class EditBox {
       // }
 
 
-      overlayBg.style.backgroundImage = 'url(' + url + ')';
+      overlayBg.style.backgroundImage = 'url(\'' + url + '\')';
       overlayBg.style.backgroundPosition = 50 + '%' + ' ' + 60 + '%'; //default
 
       preview.innerHTML = `<img src="${url}">`;
@@ -8897,10 +9079,22 @@ class EditBox {
       modalEditBox.querySelector('#tabBoxImage').style.display = 'inline-block';
     } else {
       let overlayBg = overlay.querySelector('.is-overlay-bg');
-      if (overlayBg) overlayBg.parentNode.removeChild(overlayBg); //TODO: Remove overlay color
+      if (overlayBg) overlayBg.parentNode.removeChild(overlayBg);
+      let overlayColor = overlay.querySelector('.is-overlay-color');
+
+      if (overlayColor) {
+        overlayColor.parentNode.removeChild(overlayColor);
+      }
+
+      let overlayContent = overlay.querySelector('.is-overlay-content');
+
+      if (overlayContent) {
+        if (overlayContent.innerHTML === '') overlayContent.parentNode.removeChild(overlayContent);
+      } // 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');
@@ -9482,7 +9676,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
     }
@@ -9531,7 +9726,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
     }
 
@@ -9545,7 +9741,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') {
@@ -9553,7 +9750,7 @@ class Util {
         clearTimeout(timeoutId);
         timeoutId = setTimeout(() => {
           if (newelement.complete) {
-            newelement.click(); //console.log(2);
+            newelement.click();
           }
         }, 200);
       } else {
@@ -9644,7 +9841,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
 
@@ -9722,10 +9920,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;
@@ -9769,10 +9973,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
@@ -10118,71 +10323,75 @@ 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();
+        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() {
@@ -10464,8 +10673,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;
@@ -11574,7 +11782,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;
   // }
@@ -11591,7 +11798,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);
 
   }
@@ -11623,7 +11829,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;
       // }
 
@@ -11673,7 +11878,6 @@ class Dom {
           return true;
         }
       } catch (e) {// Do Nothing
-        // console.log(element);
         // return false;
       }
 
@@ -11705,7 +11909,6 @@ class Dom {
           return element;
         }
       } catch (e) {// Do Nothing
-        // console.log(element);
         // return false;
       }
 
@@ -11832,7 +12035,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
@@ -17320,7 +17523,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
 
@@ -17331,7 +17535,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
 
@@ -17346,7 +17551,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
 
@@ -19812,9 +20018,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
 
@@ -19829,9 +20036,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
 
@@ -19887,9 +20095,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
 
@@ -19904,9 +20113,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
 
@@ -19950,8 +20160,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
 
@@ -20455,8 +20667,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
@@ -50433,7 +50647,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
 
@@ -50615,7 +50830,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
 
@@ -50780,7 +50996,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();
         }
@@ -60123,7 +60340,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
@@ -62059,7 +62277,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
 
@@ -62258,8 +62477,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 => {
@@ -62285,7 +62505,18 @@ class Rte {
 
     this.rteZoomSlider.onchange = () => {
       setTimeout(() => {
-        // show & reposition
+        // setZoomOnControl
+        if (this.builder.opts.page !== '') {
+          const wrapper = document.querySelector(this.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');
@@ -62436,8 +62667,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';
               }
@@ -62494,10 +62727,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';
           }
         }
 
@@ -66094,6 +66335,7 @@ class ContentBuilder {
       zoom: 1,
       useLightbox: false,
       imageRenameOnEdit: true,
+      disableAutoEmbedVideo: false,
 
       /*
       onZoomStart: () => {
@@ -66265,10 +66507,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();
 
@@ -66279,6 +66517,7 @@ class ContentBuilder {
     this.uoTm = null;
     this.uo = new UndoRedo(this);
     this.dom = dom$F;
+    this.cbDom = dom$F;
     this.autoclean = false;
     this.filesAdded = '';
 
@@ -66301,9 +66540,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
@@ -66334,26 +66583,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)
@@ -66525,9 +66776,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 => {
@@ -66546,18 +66799,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;
@@ -66572,296 +66817,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
+
+
+  applyBehaviorOn(builder) {
+    const util = this.util; //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)
 
 
-      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);
-      // } 
+    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
+    this.preferences.initBuilder(builder); // Apply behavior on each row
 
-      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 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 (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 (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
 
 
-        this.rowtool = new RowTool(this);
-        this.rowtool.render(row); // Render Row Add tool
+      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
+      const rowaddtool = new RowAddTool(this);
+      rowaddtool.render(row); // Apply behavior on each column
 
-        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
+      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.getAttribute('data-mode') === 'readonly') {
-            col.setAttribute('data-noedit', '');
-            col.removeAttribute('data-mode');
-          }
+        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
+        if (col.getAttribute('data-mode') === 'readonly-protected') {
+          col.setAttribute('data-protected', '');
+          col.removeAttribute('data-mode');
+        } // Set ContentEditable
 
 
-          let noedit = false;
+        let noedit = false;
 
-          if (col.hasAttribute('data-noedit')) {
-            // Column is not (text) editable.
-            noedit = true;
-          }
+        if (col.hasAttribute('data-noedit')) {
+          // Column is not (text) editable.
+          noedit = true;
+        }
 
-          let _protected = false;
+        let _protected = false;
 
-          if (col.hasAttribute('data-protected')) {
-            // Column is not (text) editable and also: cannot be deleted, moved or duplicated.
-            _protected = true;
-          }
+        if (col.hasAttribute('data-protected')) {
+          // Column is not (text) editable and also: cannot be deleted, moved or duplicated.
+          _protected = true;
+        }
 
-          let customcode = false;
+        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;
-          // }
+        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 (!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 (!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 (elms.length > 0) {
-              col.contentEditable = true; // Column is (text) editable
-            }
-          } // Apply behavior on several elements for editing purpose
+          if (elms.length > 0) {
+            col.contentEditable = true; // Column is (text) editable
+          }
+        } // Apply behavior on several elements for editing purpose
 
 
-          this.element.applyBehavior(col); // Add events on column
+        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 (!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
 
-            col.addEventListener('keydown', this.handleCellKeypress.bind(this)); // ON KEYDOWN
+          col.addEventListener('keydown', this.handleCellKeypress.bind(this)); // ON KEYDOWN
 
-            col.addEventListener('keydown', this.handleCellKeydown.bind(this, col)); // ON KEYUP
+          col.addEventListener('keydown', this.handleCellKeydown.bind(this, col)); // ON KEYUP
 
-            col.addEventListener('keyup', this.handleCellKeyup.bind(this, col)); // ON PASTE
+          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)
+          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.
+    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);
-              }
+      /*
+      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;
@@ -67663,6 +67954,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)
 
@@ -68372,26 +68664,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) {
@@ -68513,7 +68808,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
 
@@ -70952,6 +71248,12 @@ class ContentBox {
     }
 
     this.wrapperEl = document.querySelector(this.wrapper);
+
+    if (dom.hasClass(this.wrapperEl, 'preview')) {
+      this.preview = true;
+      return;
+    }
+
     dom.addClass(this.wrapperEl, 'is-wrapper');
     dom.addClass(this.wrapperEl, 'is-edit'); //Extend onRender with built-in plugins
 
@@ -71199,11 +71501,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();
@@ -71322,13 +71627,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');
 
@@ -71340,50 +71643,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'));
@@ -71413,6 +71738,7 @@ class ContentBox {
     });
     const typoPanel = document.querySelector('#divStyles');
     typoPanel.style.backgroundColor = this.editor.styleSnippetBackground;
+    typoPanel.style.color = this.editor.styleSnippetColor;
     const sidebar = document.querySelector('.is-sidebar');
     sidebar.style.backgroundColor = this.editor.styleModalBackground;
     sidebar.style.color = this.editor.styleModalColor;
@@ -71512,6 +71838,7 @@ class ContentBox {
   }
 
   addButton(btn) {
+    if (this.preview) return;
     const builderStuff = this.builderStuff;
     const btnId = dom.uniqueId();
     const panelId = dom.uniqueId();
@@ -71647,6 +71974,7 @@ class ContentBox {
     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) {