@innovastudio/contentbuilder 1.4.118 → 1.4.120

package/public/contentbuilder/contentbuilder.esm.js

@@ -106,8 +106,8 @@ class Util {
       callback(true);
     });
   }
-  confirm(message, callback, yesno, yestext) {
-    if (!this.builder.deleteConfirm) {
+  confirm(message, callback, yesno, yestext, forceOpen) {
+    if (!this.builder.deleteConfirm && !forceOpen) {
       callback(true);
       return;
     }
@@ -468,6 +468,9 @@ class Util {
     modal.style.display = '';
   }
   refreshModuleLayout(col) {
+    let savedHeight;
+    if (col.style.height) savedHeight = col.style.height;else col.style.height = `${col.offsetHeight}px`;
+    col.style.opacity = 0;
     let html = decodeURIComponent(col.getAttribute('data-html'));
     html = html.replace(/{id}/g, this.builder.util.makeId());
     col.innerHTML = '';
@@ -483,6 +486,14 @@ class Util {
       }
       i++;
     });
+    setTimeout(() => {
+      if (savedHeight) {
+        col.style.height = savedHeight;
+      } else {
+        col.style.height = '';
+      }
+      col.style.opacity = '';
+    }, 100);
   }
   removeColClasses(cell) {
     cell.classList.remove('full');
@@ -1189,8 +1200,12 @@ class Util {
         pop.style.transition = '';
       }, 200);
     });
-    this.builder.moveable.updateRect();
-    document.querySelector('.moveable-control-box').style.display = 'none';
+    const movControlBox = document.querySelector('.moveable-control-box');
+    const imageResizer = document.querySelector('#divImageResizer');
+    if (movControlBox && !imageResizer.getAttribute('data-resizing')) {
+      // this.builder.moveable.updateRect();
+      movControlBox.style.display = 'none';
+    }
   }
   hideControls() {
     const dom = this.dom;
@@ -1225,15 +1240,14 @@ class Util {
     Array.prototype.forEach.call(elms, elm => {
       dom.removeClass(elm, 'elm-active');
     });
-    let elmTool = builderStuff.querySelector('.is-element-tool');
+    let elmTool = this.builder.doc.querySelector('.is-element-tool');
     elmTool.style.display = '';
-    let linkTool = builderStuff.querySelector('#divLinkTool');
+    let linkTool = this.builder.doc.querySelector('#divLinkTool');
     linkTool.style.display = '';
+    this.builder.activeIcon = null;
+    this.builder.inspectedElement = null;
+    this.builder.activeElement = null;
     if (all) {
-      this.builder.activeIcon = null;
-      this.builder.inspectedElement = null;
-      this.builder.activeElement = null;
-
       // RTE
       let rtetool = builderStuff.querySelector('.is-rte-tool');
       if (rtetool) rtetool.style.display = 'none';
@@ -1554,6 +1568,7 @@ class Util {
     rows.forEach(row => {
       if (dom.hasClass(row, 'row-add-initial')) return;
       if (dom.hasClass(row, 'dummy-space')) return;
+      if (row.tagName.toLowerCase() === 'link') return;
       empty = false;
     });
     if (empty) {
@@ -10400,7 +10415,8 @@ class HtmlUtil {
           language: 'html',
           theme: this.builder.styleDark || this.builder.styleColoredDark ? 'vs-dark' : ''
         });
-        this.builder.codeEditorExternal.onKeyUp(() => {
+        this.builder.codeEditorExternal.onDidChangeModelContent(() => {
+          // this.builder.codeEditorExternal.onKeyUp(()=>{
           const source = document.querySelector('textarea[data-source-active]');
           source.value = this.builder.codeEditorExternal.getModel().getValue();
         });
@@ -10425,6 +10441,18 @@ class HtmlUtil {
     } else {
       viewhtml = builderStuff.querySelector('.viewhtml');
     }
+    let modelContent = viewhtml.querySelector('.is-modal-content');
+    let codeEditor = viewhtml.querySelector('.input-code-editor');
+    codeEditor.style.opacity = 0.01;
+    if (mode === 'full') {
+      modelContent.style.width = this.builder.codeEditorWidth;
+      modelContent.style.maxWidth = this.builder.codeEditorMaxWidth;
+      codeEditor.style.height = this.builder.codeEditorHeight;
+    } else {
+      modelContent.style.width = this.builder.blockCodeEditorWidth;
+      modelContent.style.maxWidth = this.builder.blockCodeEditorMaxWidth;
+      codeEditor.style.height = this.builder.blockCodeEditorHeight;
+    }
     util.showModal(viewhtml, true, () => {
       if (btn) {
         btn.removeAttribute('data-focus');
@@ -10432,8 +10460,6 @@ class HtmlUtil {
       }
     });
     if (btn) btn.setAttribute('data-focus', true);
-    let codeEditor = viewhtml.querySelector('.input-code-editor');
-    codeEditor.style.opacity = 0.01;
     this._view(mode, area);
   }
   _view(mode, area) {
@@ -10468,7 +10494,8 @@ class HtmlUtil {
             theme: this.builder.styleDark || this.builder.styleColoredDark ? 'vs-dark' : ''
           });
           let textarea = viewhtml.querySelector('textarea');
-          this.builder.codeEditor.onKeyUp(() => {
+          this.builder.codeEditor.onDidChangeModelContent(() => {
+            // this.builder.codeEditor.onKeyUp(()=>{
             textarea.value = this.builder.codeEditor.getModel().getValue();
           });
         });
@@ -10566,16 +10593,6 @@ class HtmlUtil {
     this.builder.codeEditorArea = area;
     let codeEditor = viewhtml.querySelector('.input-code-editor');
     codeEditor.style.opacity = '';
-    let modelContent = viewhtml.querySelector('.is-modal-content');
-    if (mode === 'full') {
-      modelContent.style.width = this.builder.codeEditorWidth;
-      modelContent.style.maxWidth = this.builder.codeEditorMaxWidth;
-      codeEditor.style.height = this.builder.codeEditorHeight;
-    } else {
-      modelContent.style.width = this.builder.blockCodeEditorWidth;
-      modelContent.style.maxWidth = this.builder.blockCodeEditorMaxWidth;
-      codeEditor.style.height = this.builder.blockCodeEditorHeight;
-    }
   }
   fromViewToActual(html) {
     for (var key in hash$1) {
@@ -11074,6 +11091,8 @@ class HtmlUtil {
       if (!disableStaticSection) {
         html = html_content + html_footer + html_others;
       }
+      html = tmp.innerHTML.trim();
+      html = html.replace(/<font/g, '<span').replace(/<\/font/g, '</span');
     } else {
       let emptystyles = tmp.querySelectorAll('[style=""]');
       Array.prototype.forEach.call(emptystyles, emptystyle => {
@@ -11771,6 +11790,29 @@ const prepareSvgIcons = builder => {
                 <path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12z"></path>
             </symbol>
             
+            <symbol id="icon-undo" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M9 14l-4 -4l4 -4"></path>
+                <path d="M5 10h11a4 4 0 1 1 0 8h-1"></path>
+            </symbol>
+            <symbol id="icon-redo" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M15 14l4 -4l-4 -4"></path>
+                <path d="M19 10h-11a4 4 0 1 0 0 8h1"></path>
+            </symbol>
+            <symbol id="icon-save" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2"></path>
+                <path d="M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
+                <path d="M14 4l0 4l-6 0l0 -4"></path>
+            </symbol>
+            <symbol id="icon-back" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M9 14l-4 -4l4 -4"></path>
+                <path d="M5 10h11a4 4 0 1 1 0 8h-1"></path>
+            </symbol>
+
+            
             </defs>
         </svg>`;
   builder.dom.appendHtml(builder.builderStuff, html);
@@ -12243,6 +12285,21 @@ class Snippets {
                         width: 100% !important;
                     }
                 }
+
+
+                * {
+                    scrollbar-width: thin;
+                    scrollbar-color: rgba(0, 0, 0, 0.2) auto;
+                }
+                *::-webkit-scrollbar {
+                    width: 12px;
+                }
+                *::-webkit-scrollbar-track {
+                    background: rgba(200, 200, 200, 0.2);
+                }
+                *::-webkit-scrollbar-thumb {
+                    background-color:rgba(0, 0, 0, 0.2); 
+                }
             </style>
         </head>
         
@@ -12997,31 +13054,13 @@ const renderQuickAdd = builder => {
         </div>
         
         <div class="is-modal snippets" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-            <div class="is-modal-content" style="max-width:1250px;height:90%;padding:0;">
+            <div class="is-modal-content" style="max-width:1500px;width:80vw;height:80vh;padding:0;">
                 <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>
             </div>
         </div>
         `;
     dom.appendHtml(builderStuff, html);
     quickadd = builderStuff.querySelector('.quickadd');
-    document.addEventListener('click', e => {
-      e = e || window.event;
-      var target = e.target || e.srcElement;
-      if (quickadd.style.display === 'flex') {
-        let a = dom.parentsHasClass(target, 'quickadd');
-        let b = dom.parentsHasClass(target, 'row-add');
-        let c = dom.parentsHasClass(target, 'is-rowadd-tool');
-        let d = dom.parentsHasClass(target, 'cell-add');
-        let f = dom.parentsHasClass(target, 'elm-add');
-        let g = dom.parentsHasClass(target, 'row-add-initial');
-        if (a || b || c || d || f || g) {
-          return;
-        } else {
-          // quickadd.style.display = '';
-          util.hidePop(quickadd);
-        }
-      }
-    });
     let tabs = quickadd.querySelectorAll('.is-pop-tab-item');
     Array.prototype.forEach.call(tabs, tab => {
       dom.addEventListener(tab, 'click', e => {
@@ -14520,30 +14559,9 @@ const renderGridEditor = builder => {
     selector: '.is-draggable'
   });
   const grideditor = document.querySelector('.grideditor');
-  document.addEventListener('click', e => {
-    e = e || window.event;
-    var target = e.target || e.srcElement;
-    if (dom.hasClass(grideditor, 'active')) {
-      let a = dom.parentsHasClass(target, 'is-builder');
-      let b = dom.parentsHasClass(target, 'grideditor');
-      let c = dom.parentsHasClass(target, 'is-modal');
-      let d = dom.parentsHasClass(target, 'is-pop');
-      let f = dom.parentsHasClass(target, 'rte-grideditor') || dom.hasClass(target, 'rte-grideditor');
-      if (a || b || c || d || f) {
-        grideditor.style.display = '';
-        return;
-      } else {
-        grideditor.style.display = 'none';
-      }
-    }
-  }, false);
   let elm = grideditor.querySelector('.is-modal-close');
   dom.addEventListener(elm, 'click', () => {
-    dom.removeClass(grideditor, 'active');
-    const builders = builder.doc.querySelectorAll(builder.opts.container);
-    Array.prototype.forEach.call(builders, builder => {
-      builder.removeAttribute('grideditor');
-    });
+    builder._rowTool.hideGridEditor();
   });
   const btnGridOutline = grideditor.querySelector('.grid-outline');
   dom.addEventListener(btnGridOutline, 'click', () => {
@@ -14586,6 +14604,35 @@ const renderGridEditor = builder => {
     } else {
       quickadd.setAttribute('data-mode', 'cell-right');
     }
+
+    //handleQuickAddClickOut
+    const handleQuickAddClickOut = e => {
+      // console.log('handleQuickAddClickOut');
+      let elm = e.target;
+      if (!elm) return;
+      if (!elm.closest('.quickadd') && !elm.closest('.row-add') && !elm.closest('.is-rowadd-tool') && !elm.closest('.cell-add') && !elm.closest('.elm-add') && !elm.closest('.row-add-initial')) {
+        // click outside
+
+        // hide
+        const quickadd = builderStuff.querySelector('.quickadd');
+        util.hidePop(quickadd);
+        // console.log('HIDE');
+
+        // clear events
+        document.removeEventListener('click', handleQuickAddClickOut);
+        if (builder.iframeDocument) {
+          builder.doc.removeEventListener('click', handleQuickAddClickOut);
+        }
+        builder.handleQuickAddClickOut_ = false;
+      }
+    };
+    if (!builder.handleQuickAddClickOut_) {
+      document.addEventListener('click', handleQuickAddClickOut);
+      if (builder.iframeDocument) {
+        builder.doc.addEventListener('click', handleQuickAddClickOut);
+      }
+      builder.handleQuickAddClickOut_ = true;
+    }
   });
   elm = grideditor.querySelector('.cell-prev');
   dom.addEventListener(elm, 'click', () => {
@@ -14649,9 +14696,9 @@ const renderGridEditor = builder => {
 
         util.restoreSelection();
 
-        // if(this.builder.activeElement) {
-        //     dom.addClass(this.builder.activeElement, 'elm-active');
-        //     this.builder.elmTool.repositionElementTool();
+        // if(builder.activeElement) {
+        //     dom.addClass(builder.activeElement, 'elm-active');
+        //     builder.elmTool.repositionElementTool();
         // }
 
         btnCellSettings.removeAttribute('data-focus');
@@ -17835,7 +17882,7 @@ class Select {
   }
 }
 
-const renderSnippetPanel = builder => {
+const renderSnippetPanel = (builder, snippetOpen) => {
   const util = builder.util;
   const builderStuff = builder.builderStuff;
   const dom = builder.dom;
@@ -18099,7 +18146,7 @@ const renderSnippetPanel = builder => {
       util.clearControls();
     });
     const viewportWidth = window.innerWidth;
-    if (builder.opts.snippetOpen && viewportWidth >= 960) {
+    if ((builder.opts.snippetOpen || snippetOpen) && viewportWidth >= 960) {
       snippetPanel.style.cssText = 'transition: all ease 0.8s;';
       setTimeout(function () {
         toggleSnippets(builder);
@@ -45411,7 +45458,7 @@ class Image$1 {
                                 ${this.builder.opts.selectIcon}
                             </button>
                 
-                            <div class="image-larger1" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
+                            <div class="image-larger1 is-btn classic" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
                                 <form class="form-upload-larger" target="frameTargetImageUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="border-radius:1px;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;">
 				                    <input id="hidRefId1" name="hidRefId" type="hidden" value="" />
                                     <svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
@@ -45434,7 +45481,7 @@ class Image$1 {
                             
                             <button title="${util.out(this.builder.opts.otherSelectCaption)}" class="input-select-other" style="display:none;width:50px">${this.builder.opts.otherSelectIcon}</button>
    
-                            <div class="image-larger2" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
+                            <div class="image-larger2 is-btn classic" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
                                 <form class="form-upload-larger" target="frameTargetImageUpload" method="post" action="${this.builder.opts.fileHandler ? this.builder.opts.fileHandler : this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="border-radius:1px;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;">
 				                    <input id="hidRefId2" name="hidRefId" type="hidden" value="" />
                                     <svg class="is-icon-flex"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
@@ -45471,7 +45518,7 @@ class Image$1 {
 
                 <div id="divImageResizerOverlay" class="is-tool">
                 </div>
-                <div id="divImageResizer" data-x=0 data-y=0 class="is-tool moveable resizable">
+                <div id="divImageResizer" class="keep-selection" style="position:absolute;">
                 </div>
                 `;
       dom.appendHtml(builderStuff, html);
@@ -45529,24 +45576,26 @@ class Image$1 {
           activeImage = activeImage.parentNode;
           bCircular = true;
         }
+        let zoom = this.builder.opts.zoom;
+        let win = this.builder.win;
         if (!bCircular) {
-          activeImage.style.width = `${width / this.builder.opts.zoom}px`;
+          activeImage.style.width = `${width / zoom}px`;
           activeImage.style.height = 'auto';
         } else {
-          let pl = parseFloat(window.getComputedStyle(activeImage.parentNode).getPropertyValue('padding-left'));
-          let pr = parseFloat(window.getComputedStyle(activeImage.parentNode).getPropertyValue('padding-right'));
-          let maxWidth = activeImage.parentNode.offsetWidth * this.builder.opts.zoom - pl - pr;
+          let pl = parseFloat(win.getComputedStyle(activeImage.parentNode).getPropertyValue('padding-left'));
+          let pr = parseFloat(win.getComputedStyle(activeImage.parentNode).getPropertyValue('padding-right'));
+          let maxWidth = activeImage.parentNode.offsetWidth * zoom - pl - pr;
           if (width >= maxWidth) width = maxWidth;
           if (height >= width) {
-            activeImage.style.width = `${width / this.builder.opts.zoom}px`;
-            activeImage.style.height = `${width / this.builder.opts.zoom}px`;
-            activeImage.querySelector('img').style.width = `${width / this.builder.opts.zoom}px`;
-            activeImage.querySelector('img').style.height = `${width / this.builder.opts.zoom}px`;
+            activeImage.style.width = `${width / zoom}px`;
+            activeImage.style.height = `${width / zoom}px`;
+            activeImage.querySelector('img').style.width = `${width / zoom}px`;
+            activeImage.querySelector('img').style.height = `${width / zoom}px`;
           } else {
-            activeImage.style.width = `${width / this.builder.opts.zoom}px`;
-            activeImage.style.height = `${height / this.builder.opts.zoom}px`;
-            activeImage.querySelector('img').style.width = `${width / this.builder.opts.zoom}px`;
-            activeImage.querySelector('img').style.height = `${height / this.builder.opts.zoom}px`;
+            activeImage.style.width = `${width / zoom}px`;
+            activeImage.style.height = `${height / zoom}px`;
+            activeImage.querySelector('img').style.width = `${width / zoom}px`;
+            activeImage.querySelector('img').style.height = `${height / zoom}px`;
           }
         }
 
@@ -45564,8 +45613,8 @@ class Image$1 {
         }
         */
         newPos = this.builder.util.getElementPosition(activeImage);
-        let top = newPos.top;
-        let left = newPos.left;
+        let top = newPos.top + window.pageYOffset;
+        let left = newPos.left + window.pageXOffset;
         target.style.top = top + 'px';
         target.style.left = left + 'px';
         target.style.width = activeImage.offsetWidth + 'px';
@@ -45579,9 +45628,11 @@ class Image$1 {
         } else {
           window.getSelection().removeAllRanges();
         }
+        imageResizer.setAttribute('data-resizing', '1'); // important: see util.hidePops()
       }).on('resizeEnd', ({
         target
       }) => {
+        imageResizer.removeAttribute('data-resizing');
         imageResizerOverlay.style.display = '';
         let activeImage = this.builder.activeImage;
         let bCircular = false;
@@ -45608,6 +45659,7 @@ class Image$1 {
         var elementWidth = activeImage.parentNode.offsetWidth - paddingX - borderX;
         //var elementHeight = activeImage.parentNode.offsetHeight - paddingY - borderY;
 
+        let win = this.builder.win;
         let currentWidth;
         if (!bCircular) {
           const parentWidth = elementWidth; //activeImage.parentNode.offsetWidth;
@@ -45615,7 +45667,7 @@ class Image$1 {
           const percentage = currentWidth / parentWidth * 100;
           activeImage.style.width = percentage + '%';
         } else {
-          const _screenwidth = window.innerWidth;
+          const _screenwidth = win.innerWidth;
           currentWidth = activeImage.offsetWidth;
           const percentage = currentWidth / _screenwidth * 100;
           activeImage.style.width = percentage + 'vw';
@@ -45931,22 +45983,32 @@ class Image$1 {
           this.builder.openImageSelect(src => {
             this.builder.uo.saveForUndo();
             let img = this.builder.activeImage;
+            // img.setAttribute('src', src);
+            img.addEventListener('load', () => {
+              // this.builder.editor.element.image.repositionImageTool();
+              if (this.builder.activeModule) {
+                this.refreshIfIsModule(this.builder.activeModule);
+                this.builder.activeModule.click();
+              } else {
+                this.repositionImageTool();
+                this.builder.elmTool.repositionElementTool();
+              }
+            });
             img.setAttribute('src', src);
-            setTimeout(() => {
-              img.click();
-              let divImageResizer = document.querySelector('#divImageResizer');
-              if (divImageResizer) divImageResizer.click();
-              setTimeout(() => {
-                img.click();
-                let divImageResizer = document.querySelector('#divImageResizer');
-                if (divImageResizer) divImageResizer.click();
-              }, 600);
-            }, 10);
 
-            //Trigger Change event
-            this.builder.opts.onChange();
+            // setTimeout(()=>{
+            //     img.click();
+            //     let divImageResizer = document.querySelector('#divImageResizer');
+            //     if(divImageResizer) divImageResizer.click();
 
-            //Trigger Render event
+            //     setTimeout(()=>{
+            //         img.click();
+            //         let divImageResizer = document.querySelector('#divImageResizer');
+            //         if(divImageResizer) divImageResizer.click();
+            //     },600);
+            // },10);
+
+            this.builder.opts.onChange();
             this.builder.opts.onRender();
           }, currentSrc);
         });
@@ -46534,18 +46596,36 @@ class Image$1 {
       }
       imageTool.style.top = top + 'px';
       imageTool.style.left = toolLeft + 'px';
-      let imageResizer = this.imageResizer;
-      imageResizer.style.top = top + 'px';
-      imageResizer.style.left = left + 'px';
-      imageResizer.style.width = elm.offsetWidth * this.builder.opts.zoom + 'px';
-      imageResizer.style.height = elm.offsetHeight * this.builder.opts.zoom + 'px';
-      if (!this.builder.hideImageResizer) imageResizer.style.display = 'block';
-      this.repositionHandler(elm.offsetWidth, elm.offsetHeight);
+      if (!this.builder.activeImage.hasAttribute('data-noresize')) {
+        let imageResizer = this.imageResizer;
+        imageResizer.style.top = top + 'px';
+        imageResizer.style.left = left + 'px';
+        imageResizer.style.width = elm.offsetWidth * this.builder.opts.zoom + 'px';
+        imageResizer.style.height = elm.offsetHeight * this.builder.opts.zoom + 'px';
+        if (!this.builder.hideImageResizer) imageResizer.style.display = 'block';
+        this.repositionHandler(elm.offsetWidth, elm.offsetHeight);
 
-      // moveable
-      if (this.builder.moveable) this.builder.moveable.updateRect();
-      const movControlBox = document.querySelector('.moveable-control-box');
-      if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block';
+        // moveable
+        if (this.builder.moveable) this.builder.moveable.updateRect();
+        const movControlBox = document.querySelector('.moveable-control-box');
+        if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block';
+      }
+    }
+  }
+  hideImageTool() {
+    let imageTool = this.imageTool;
+    imageTool.style.display = '';
+    let imageResizer = this.imageResizer;
+    imageResizer.style.display = 'none';
+
+    // moveable
+    imageResizer.style.top = '-10px';
+    imageResizer.style.left = '-10px';
+    imageResizer.style.width = '1px';
+    imageResizer.style.height = '1px';
+    if (this.builder.moveable) {
+      this.builder.moveable.updateRect();
+      document.querySelector('.moveable-control-box').style.display = 'none';
     }
   }
   click(e) {
@@ -46642,108 +46722,31 @@ class Image$1 {
           if (this.builder.moveable) this.builder.moveable.updateRect();
           const movControlBox = document.querySelector('.moveable-control-box');
           if (movControlBox && !this.builder.hideImageResizer) movControlBox.style.display = 'block';
-
-          /*
-          if(elm.getAttribute('data-mov')!=='1'){
-              let obj = new Moveable(document.body, {
-                  target: elm,
-                  resizable: true,
-                  throttleResize: 0,
-                  keepRatio: true,
-              }).on('resizeStart', () => {
-                   const builderStuff = this.builder.builderStuff;
-                   // hide image tool
-                  this.imageTool.style.display = '';
-                   // hide element tool
-                  let elementTool = builderStuff.querySelector('.is-element-tool');
-                  elementTool.style.display = '';
-                   // Hide column tool
-                  let columnTool = builderStuff.querySelector('.is-column-tool');
-                  dom.removeClass(columnTool, 'active');
-               }).on('resize', ({ target, width, height }) => {
-                   // target.style.width = `${width}px`;
-                  // target.style.height = `${height}px`;
-                   // get active image
-                  let activeImage = target;
-                  let bCircular = false;
-                  if(dom.hasClass(activeImage, 'img-circular')) {
-                      bCircular = true;
-                  }
-                   let pl = parseFloat(window.getComputedStyle(activeImage.parentNode).getPropertyValue('padding-left'));
-                  let pr = parseFloat(window.getComputedStyle(activeImage.parentNode).getPropertyValue('padding-right'));
-                  let maxWidth = activeImage.parentNode.offsetWidth - pl - pr;
-                  if(width>maxWidth) return;
-                   if(!bCircular) {
-                      // activeImage.style.width = `${width/this.builder.opts.zoom}px`;
-                      // activeImage.style.height = 'auto';
-                      activeImage.style.width = `${width}px`;
-                      activeImage.style.height = `${height}px`;
-                  } else {
-                      if(height>=width) {
-                          activeImage.style.width = `${width}px`;
-                          activeImage.style.height =`${width}px`;
-                          activeImage.querySelector('img').style.width = `${width}px`; 
-                          activeImage.querySelector('img').style.height = `${width}px`; 
-                      } else {
-                          activeImage.style.width = `${width}px`;
-                          activeImage.style.height =`${height}px`;
-                          activeImage.querySelector('img').style.width = `${width}px`; 
-                          activeImage.querySelector('img').style.height = `${height}px`; 
-                      }
-                  }
-                  
-                  // https://stackoverflow.com/questions/29908261/prevent-text-selection-on-mouse-drag
-                  // prevent text selection
-                  if (document.selection) {
-                      document.selection.empty();
-                  } else {
-                      window.getSelection().removeAllRanges();
-                  }
-                  
-              }).on('resizeEnd', ({ target }) => {
-                   const builderStuff = this.builder.builderStuff;
-                   let activeImage = target;
-                  let bCircular = false;
-                  if(dom.hasClass(activeImage, 'img-circular')) {
-                      bCircular = true;
-                  }
-                               // https://stackoverflow.com/questions/25197184/get-the-height-of-an-element-minus-padding-margin-border-widths
-                  var cs = getComputedStyle(activeImage.parentNode);
-                               var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
-                  //var paddingY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
-                               var borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);
-                  //var borderY = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);
-                               // Element width and height minus padding and border
-                  var elementWidth = activeImage.parentNode.offsetWidth - paddingX - borderX;
-                  //var elementHeight = activeImage.parentNode.offsetHeight - paddingY - borderY;
-                               if(!bCircular) {
-                      var parentWidth = elementWidth; //activeImage.parentNode.offsetWidth;
-                      var currentWidth = activeImage.offsetWidth;
-                      // var currentHeight = activeImage.offsetHeight;
-                      var percentage = (currentWidth / parentWidth) * 100;
-                      activeImage.style.width = percentage + '%';
-                      activeImage.style.height = 'auto';
-                      // activeImage.style.height = ((percentage*currentHeight)/currentWidth) + '%';//new
-                  }
-                               if(this.builder.opts.emailMode) {
-                      //activeImage.setAttribute('width', percentage + '%');
-                      activeImage.setAttribute('width', currentWidth);
-                  }
-                               target.setAttribute('data-resized', 1);
-                  setTimeout(()=>{
-                      target.setAttribute('data-resized', 0);
-                  },300);
-                               //Trigger Change event
-                  this.builder.opts.onChange();
-                               // Show column tool
-                  let columnTool = builderStuff.querySelector('.is-column-tool');
-                  dom.addClass(columnTool, 'active');
-                  
-              });
-               elm.setAttribute('data-mov','1');
-              this.builder.imgs.push(obj);
-          } 
-          */
+          const handleImageToolClickOut = e => {
+            // console.log('handleImageToolClickOut');
+            let elm = e.target;
+            if (!elm) return;
+            if (!elm.closest('#divImageResizer') && !elm.closest('#divImageTool') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('.sl-wrapper') && !elm.closest('.sl-overlay') && !elm.closest('.sl-close') && !elm.closest('img')) {
+              // click outside
+
+              // hide
+              this.hideImageTool();
+              // console.log('HIDE');
+
+              document.removeEventListener('click', handleImageToolClickOut);
+              if (this.builder.iframeDocument) {
+                this.builder.doc.removeEventListener('click', handleImageToolClickOut);
+              }
+              this.builder.handleImageToolClickOut_ = false;
+            }
+          };
+          if (!this.builder.handleImageToolClickOut_) {
+            document.addEventListener('click', handleImageToolClickOut);
+            if (this.builder.iframeDocument) {
+              this.builder.doc.addEventListener('click', handleImageToolClickOut);
+            }
+            this.builder.handleImageToolClickOut_ = true;
+          }
         } else {
           let imageResizer = this.imageResizer;
           imageResizer.style.display = 'none';
@@ -46763,18 +46766,7 @@ class Image$1 {
           prog = true;
         }
         if (prog) {
-          imageTool.style.display = '';
-          let imageResizer = this.imageResizer;
-          imageResizer.style.display = 'none';
-
-          // moveable
-          imageResizer.style.top = '-10px';
-          imageResizer.style.left = '-10px';
-          imageResizer.style.width = '1px';
-          imageResizer.style.height = '1px';
-          if (this.builder.moveable) this.builder.moveable.updateRect();
-          const movControlBox = document.querySelector('.moveable-control-box');
-          if (movControlBox) movControlBox.style.display = 'none';
+          this.hideImageTool();
         }
 
         // NOTE:
@@ -46788,36 +46780,11 @@ class Image$1 {
         //     },100);
         // }
       } else {
-        let imageTool = this.imageTool;
-        imageTool.style.display = '';
         this.builder.activeImage = null;
-        let imageResizer = this.imageResizer;
-        imageResizer.style.display = 'none';
-
-        // moveable
-        imageResizer.style.top = '-10px';
-        imageResizer.style.left = '-10px';
-        imageResizer.style.width = '1px';
-        imageResizer.style.height = '1px';
-        if (this.builder.moveable) this.builder.moveable.updateRect();
-        const movControlBox = document.querySelector('.moveable-control-box');
-        if (movControlBox) movControlBox.style.display = 'none';
+        this.hideImageTool();
       }
     } else {
-      let imageTool = this.imageTool;
-      imageTool.style.display = '';
       this.builder.activeImage = null;
-      let imageResizer = this.imageResizer;
-      imageResizer.style.display = 'none';
-
-      // moveable
-      imageResizer.style.top = '-10px';
-      imageResizer.style.left = '-10px';
-      imageResizer.style.width = '1px';
-      imageResizer.style.height = '1px';
-      if (this.builder.moveable) this.builder.moveable.updateRect();
-      const movControlBox = document.querySelector('.moveable-control-box');
-      if (movControlBox) movControlBox.style.display = 'none';
     }
   }
 
@@ -48725,7 +48692,7 @@ class Hyperlink {
                         <button title="${util.out(this.builder.opts.otherSelectCaption)}" class="input-select-other" style="display:none;width:50px">
                             ${this.builder.opts.otherSelectIcon}
                         </button>
-                        <div class="div-anyfile-upload" style="position: relative; flex: 0 0 auto; width: 43px; height: 43px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
+                        <div class="div-anyfile-upload is-btn classic" style="position: relative; flex: 0 0 auto; width: 50px; height: 43px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
                             <form class="form-upload-larger" target="frameTargetAnyfileUpload" method="post" action="${this.builder.opts.fileHandler}" enctype="multipart/form-data" style="overflow:hidden;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:1px;display:flex;align-items: center;justify-content: center;">
                                 <input class="input-anyfile-customval" name="hidRefId" type="hidden" value="${this.builder.customval}" />
                                 <svg class="is-icon-flex"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
@@ -48882,15 +48849,17 @@ class Hyperlink {
             }
             link.setAttribute('title', title);
           } else {
-            link.outerHTML = link.innerHTML;
+            // link.outerHTML = link.innerHTML;
             this.hideTool();
             if (this.builder.activeIcon) {
               this.builder.activeIcon.setAttribute('dummy-sel', '');
               link.outerHTML = this.builder.activeIcon.outerHTML;
-              let icon = document.querySelector('[dummy-sel]');
+              let icon = this.builder.doc.querySelector('[dummy-sel]');
               icon.removeAttribute('dummy-sel');
               this.builder.activeIcon = icon;
               this.builder.activeIcon.click();
+            } else {
+              link.outerHTML = link.innerHTML;
             }
           }
 
@@ -49127,8 +49096,6 @@ class Hyperlink {
 
       this.showTool(link);
       e.preventDefault();
-    } else {
-      this.hideTool();
     }
   }
   showTool(link) {
@@ -49170,6 +49137,33 @@ class Hyperlink {
     const h = linkTool.offsetHeight;
     linkTool.style.top = top - h - 3 + 'px';
     linkTool.style.left = left + link.offsetWidth * this.builder.opts.zoom - w + 'px';
+    const handleLinkButtonClick = e => {
+      // console.log('handleLinkButtonClick');
+      let elm = e.target;
+      if (!elm) return;
+      if (!elm.closest('#divLinkTool') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('a')) {
+        // click outside
+
+        // hide
+        this.hideTool();
+        // console.log('HIDE');
+
+        // Hide Button Editor Modal
+        this.builder.element.hyperlink.buttonEditor.hide();
+        document.removeEventListener('click', handleLinkButtonClick);
+        if (this.builder.iframeDocument) {
+          this.builder.doc.removeEventListener('click', handleLinkButtonClick);
+        }
+        this.builder.handleLinkButtonClick_ = false;
+      }
+    };
+    if (!this.builder.handleLinkButtonClick_) {
+      document.addEventListener('click', handleLinkButtonClick);
+      if (this.builder.iframeDocument) {
+        this.builder.doc.addEventListener('click', handleLinkButtonClick);
+      }
+      this.builder.handleLinkButtonClick_ = true;
+    }
   }
   hideTool() {
     this.linkTool.style.display = '';
@@ -49522,9 +49516,34 @@ class Button {
     if (btn && !customcode && !noedit && !_protected) {
       this.builder.activeButton = btn;
       this.showTool(btn);
+      const handleButtonClick = e => {
+        // console.log('handleButtonClick');
+        let elm = e.target;
+        if (!elm) return;
+        if (!elm.closest('#divButtonTool') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('button')) {
+          // click outside
+
+          // hide
+          this.hideTool();
+          // console.log('HIDE');
+
+          // Hide Button Editor Modal
+          this.builder.element.hyperlink.buttonEditor.hide();
+          document.removeEventListener('click', handleButtonClick);
+          if (this.builder.iframeDocument) {
+            this.builder.doc.removeEventListener('click', handleButtonClick);
+          }
+          this.builder.handleButtonClick_ = false;
+        }
+      };
+      if (!this.builder.handleButtonClick_) {
+        document.addEventListener('click', handleButtonClick);
+        if (this.builder.iframeDocument) {
+          this.builder.doc.addEventListener('click', handleButtonClick);
+        }
+        this.builder.handleButtonClick_ = true;
+      }
       e.preventDefault();
-    } else {
-      this.hideTool();
     }
   }
   editButton() {
@@ -49731,7 +49750,8 @@ class Module {
     if (!moduleTool) {
       let html = `
             <div class="is-tool is-module-tool">
-                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button class="btn-module-refresh" title="${util.out('Refresh')}" data-title="${util.out('Refresh')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#icon-reload"></use></svg></button>
+                <button class="btn-module-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
             </div>
 
             <input id="hidContentModuleCode" type="hidden" />
@@ -49759,11 +49779,15 @@ class Module {
       }
       moduleModal = builderStuff.querySelector('.is-modal.custommodule');
       this.moduleModal = moduleModal;
-      let btn = moduleTool.querySelector('button');
-      dom.addEventListener(btn, 'click', async () => {
-        // old: 10100
-
-        this.edit(btn);
+      const btnModuleSettings = moduleTool.querySelector('.btn-module-settings');
+      btnModuleSettings.addEventListener('click', async () => {
+        this.edit(btnModuleSettings);
+      });
+      const btnModuleRefresh = moduleTool.querySelector('.btn-module-refresh');
+      btnModuleRefresh.addEventListener('click', async () => {
+        let module = this.builder.activeModule;
+        module.click();
+        this.util.refreshModuleLayout(module);
       });
       let btnOk = moduleModal.querySelector('.input-ok');
       dom.addEventListener(btnOk, 'click', () => {
@@ -49811,16 +49835,16 @@ class Module {
         });
         let builderActive = this.builder.doc.querySelector('.builder-active');
         if (builderActive) this.builder.applyBehaviorOn(builderActive);
-
-        //Trigger Change event
         this.builder.opts.onChange();
-
-        //Trigger Render event
         this.builder.opts.onRender();
-        this.util.hideControls();
-        this.util.repositionColumnTool(true);
-        if (this.builder.onRefreshTool) this.builder.onRefreshTool();
-        module.click();
+
+        // this.util.hideControls();
+
+        // this.util.repositionColumnTool(true);
+        // if(this.builder.onRefreshTool) this.builder.onRefreshTool();
+
+        // module.click();
+
         this.builder.hideModal(moduleModal);
       });
       let btnCancel = moduleModal.querySelector('.input-cancel');
@@ -49837,7 +49861,10 @@ class Module {
     const dom = this.dom;
 
     //-------- Set a flag to indicate active module -----------
-    dom.removeAttributes(document.querySelectorAll('[data-module-active]'), 'data-module-active');
+    dom.removeAttributes(this.builder.doc.querySelectorAll('[data-module-active]'), 'data-module-active');
+    // this.builder.doc.querySelectorAll('[data-module-active]').forEach(element => {
+    //     element.removeAttribute('data-module-active');
+    // });
     module.setAttribute('data-module-active', '1');
     //-------- /Set a flag to indicate active module -----------
 
@@ -49953,26 +49980,27 @@ class Module {
         index++;
     });
     */
+    if (module.getAttribute('data-panel') === 'side' && this.builder.controlPanel) ; else {
+      this.util.showModal(moduleModal, true, () => {
+        if (btn) {
+          btn.removeAttribute('data-focus');
+          btn.focus();
+        }
+      });
+      if (btn) btn.setAttribute('data-focus', true);
 
-    this.util.showModal(moduleModal, true, () => {
-      if (btn) {
-        btn.removeAttribute('data-focus');
-        btn.focus();
-      }
-    });
-    if (btn) btn.setAttribute('data-focus', true);
-
-    // var d = new Date();
-    // moduleModal.querySelector('iframe').src = this.builder.opts.modulePath + modulename + '.html?' + d.getTime(); //always refreshed
+      // var d = new Date();
+      // moduleModal.querySelector('iframe').src = this.builder.opts.modulePath + modulename + '.html?' + d.getTime(); //always refreshed
 
-    const iframe = moduleModal.querySelector('iframe');
-    let result = await fetch(this.builder.opts.modulePath + modulename + '.html');
-    result = await result.text();
-    result = result.replace(/<script>/g, `${this.builder.nonce ? `<script nonce="${this.builder.nonce}">` : '<script>'}`);
-    let doc = iframe.contentWindow.document;
-    doc.open();
-    doc.write(result);
-    doc.close();
+      let iframe = moduleModal.querySelector('iframe');
+      let result = await fetch(this.builder.opts.modulePath + modulename + '.html');
+      result = await result.text();
+      result = result.replace(/<script>/g, `${this.builder.nonce ? `<script nonce="${this.builder.nonce}">` : '<script>'}`);
+      let doc = iframe.contentWindow.document;
+      doc.open();
+      doc.write(result);
+      doc.close();
+    }
   }
   click(col) {
     let custommodule = false;
@@ -49982,25 +50010,38 @@ class Module {
     }
     if (custommodule) {
       this.builder.activeModule = col;
-      let elm = col;
       this.moduleTool.style.display = 'flex';
-      let _toolwidth = this.moduleTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
-
-      let w = elm.offsetWidth * this.builder.opts.zoom;
-      let top = elm.getBoundingClientRect().top + this.builder.win.pageYOffset;
-      let left = elm.getBoundingClientRect().left - 2;
-      left = left + (w - _toolwidth);
-
-      //Adjust left in case an element is outside the screen
-      const _screenwidth = window.innerWidth;
-      if (_toolwidth + left > _screenwidth) left = elm.getBoundingClientRect().left;
-      this.moduleTool.style.top = top + 'px';
-      this.moduleTool.style.left = left + 'px';
+      const btn = this.moduleTool.querySelector('.btn-module-settings');
+      if (col.getAttribute('data-panel') === 'side' && this.builder.controlPanel) {
+        btn.style.display = 'none';
+      } else {
+        btn.style.display = '';
+      }
+      this.repositionModuleTool();
     } else {
       this.builder.activeModule = null;
       this.moduleTool.style.display = '';
     }
   }
+  repositionModuleTool() {
+    if (!this.builder.activeModule) return;
+    if (this.moduleTool.style.display !== 'flex') return;
+    let elm = this.builder.activeModule;
+
+    // this.moduleTool.style.display = 'flex';
+    let _toolwidth = this.moduleTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
+
+    let w = elm.offsetWidth * this.builder.opts.zoom;
+    let top = elm.getBoundingClientRect().top + this.builder.win.pageYOffset;
+    let left = elm.getBoundingClientRect().left - 2;
+    left = left + (w - _toolwidth);
+
+    //Adjust left in case an element is outside the screen
+    const _screenwidth = window.innerWidth;
+    if (_toolwidth + left > _screenwidth) left = elm.getBoundingClientRect().left;
+    this.moduleTool.style.top = top + 'px';
+    this.moduleTool.style.left = left + 'px';
+  }
 }
 
 class Code {
@@ -50433,21 +50474,6 @@ class Table {
         tableTool = contentStuff.querySelector('.is-table-tool');
       }
       tableModal = builderStuff.querySelector('.is-modal.edittable');
-      let btn = tableTool.querySelector('button');
-      dom.addEventListener(btn, 'click', () => {
-        // old 10317
-        if (dom.hasClass(tableModal, 'active')) {
-          // dom.removeClass(tableModal, 'active');
-          util.hideModal(tableModal);
-        } else {
-          dom.addClass(tableModal, 'active');
-          util.showModal(tableModal);
-        }
-      });
-      let btnClose = tableModal.querySelector('.is-modal-close');
-      dom.addEventListener(btnClose, 'click', () => {
-        dom.removeClass(tableModal, 'active');
-      });
       const btnBgColor = tableModal.querySelector('.input-table-bgcolor');
       btnBgColor.addEventListener('click', e => {
         this.builder.uo.saveForUndo();
@@ -50609,7 +50635,7 @@ class Table {
 
       //Table Layout
 
-      btn = tableModal.querySelector('[data-table-cmd="rowabove"]');
+      let btn = tableModal.querySelector('[data-table-cmd="rowabove"]');
       btn.addEventListener('click', () => {
         if (!this.builder.activeTd) return;
 
@@ -50746,47 +50772,99 @@ class Table {
         //Trigger Change event
         this.builder.opts.onChange();
       });
+      btn = tableTool.querySelector('button');
+      dom.addEventListener(btn, 'click', () => {
+        // old 10317
+
+        if (tableModal.classList.contains('active')) {
+          this.hideTableEditor();
+        } else {
+          this.showTableEditor();
+        }
+      });
+      let btnClose = tableModal.querySelector('.is-modal-close');
+      dom.addEventListener(btnClose, 'click', () => {
+        dom.removeClass(tableModal, 'active');
+      });
     }
     this.tableTool = tableTool;
     this.tableModal = tableModal;
   }
-  click(e) {
-    const dom = this.dom;
-    if (dom.parentsHasElement(e.target, 'table')) {
-      // only edit table.default
-
-      let element = e.target;
-      let td;
-      let table;
-      if (element.tagName.toLowerCase() === 'td') {
-        td = element;
-      } else {
-        while (element.tagName.toLowerCase() !== 'td') {
-          element = element.parentNode;
+  showTableEditor() {
+    const tableModal = this.tableModal;
+    this.util.showModal(tableModal);
+    this.realtime();
+    const handleTableClick = e => {
+      // console.log('handleTableClick');
+      let elm = e.target;
+      if (!elm) return;
+      if (!elm.closest('.is-table-tool') && !elm.closest('.is-sidebar') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('table')) {
+        // click outside
+
+        // hide
+        this.hideTableEditor();
+        // console.log('HIDE');
+
+        document.removeEventListener('click', handleTableClick);
+        if (this.builder.iframeDocument) {
+          this.builder.doc.removeEventListener('click', handleTableClick);
         }
-        td = element;
+        this.builder.handleTableClick_ = false;
       }
-      while (element.tagName.toLowerCase() !== 'table') {
-        element = element.parentNode;
+      if (elm.closest('table')) {
+        this.realtime();
+      }
+    };
+    if (!this.builder.handleTableClick_) {
+      document.addEventListener('click', handleTableClick);
+      if (this.builder.iframeDocument) {
+        this.builder.doc.addEventListener('click', handleTableClick);
       }
-      table = element;
+      this.builder.handleTableClick_ = true;
+    }
+  }
+  hideTableEditor() {
+    const tableModal = this.tableModal;
+    this.util.hideModal(tableModal);
+  }
+  realtime() {
+    const tableModal = this.tableModal;
+    if (tableModal.classList.contains('active') && this.builder.activeTable) {
+      let activeTd = this.builder.activeTd;
+      tableModal.querySelector('.input-table-bgcolor').style.backgroundColor = activeTd.style.backgroundColor;
+      tableModal.querySelector('.input-table-textcolor').style.backgroundColor = activeTd.style.color;
+      tableModal.querySelector('.input-table-bordercolor').style.backgroundColor = activeTd.style.borderColor;
+      tableModal.querySelector('#selCellBorderWidth').value = parseInt(activeTd.style.borderWidth);
+    } else {
+      tableModal.querySelector('.input-table-bgcolor').style.backgroundColor = '';
+      tableModal.querySelector('.input-table-textcolor').style.backgroundColor = '';
+      tableModal.querySelector('.input-table-bordercolor').style.backgroundColor = '';
+      tableModal.querySelector('#selCellBorderWidth').value = 0;
+    }
+  }
+  click(e) {
+    let elm = e.target;
+    if (!elm) return;
+    const dom = this.dom;
+    const table = elm.closest('table');
+    if (table) {
+      let td = elm.closest('td');
       if (dom.hasClass(table, 'default')) {
         // only edit table.default
 
         this.builder.activeTd = td;
         this.builder.activeTable = table;
-        let elm = table;
         this.tableTool.style.display = 'flex';
         let _toolwidth = this.tableTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
 
-        let w = elm.offsetWidth * this.builder.opts.zoom;
-        let top = elm.getBoundingClientRect().top + this.builder.win.pageYOffset;
-        let left = elm.getBoundingClientRect().left - 2;
+        let w = table.offsetWidth * this.builder.opts.zoom;
+        let top = table.getBoundingClientRect().top + this.builder.win.pageYOffset;
+        let left = table.getBoundingClientRect().left - 2;
         left = left + (w - _toolwidth);
 
         //Adjust left in case an element is outside the screen
         const _screenwidth = window.innerWidth;
-        if (_toolwidth + left > _screenwidth) left = elm.getBoundingClientRect().left;
+        if (_toolwidth + left > _screenwidth) left = table.getBoundingClientRect().left;
         this.tableTool.style.top = top + 'px';
         this.tableTool.style.left = left + 'px';
       } else {
@@ -50799,18 +50877,6 @@ class Table {
       this.builder.activeTable = null;
       this.tableTool.style.display = '';
     }
-    if (dom.hasClass(this.tableModal, 'active') && this.builder.activeTable) {
-      let activeTd = this.builder.activeTd;
-      this.tableModal.querySelector('.input-table-bgcolor').style.backgroundColor = activeTd.style.backgroundColor;
-      this.tableModal.querySelector('.input-table-textcolor').style.backgroundColor = activeTd.style.color;
-      this.tableModal.querySelector('.input-table-bordercolor').style.backgroundColor = activeTd.style.borderColor;
-      this.tableModal.querySelector('#selCellBorderWidth').value = parseInt(activeTd.style.borderWidth);
-    } else {
-      this.tableModal.querySelector('.input-table-bgcolor').style.backgroundColor = '';
-      this.tableModal.querySelector('.input-table-textcolor').style.backgroundColor = '';
-      this.tableModal.querySelector('.input-table-bordercolor').style.backgroundColor = '';
-      this.tableModal.querySelector('#selCellBorderWidth').value = 0;
-    }
   }
 }
 
@@ -50857,7 +50923,7 @@ class Video {
                         <button title="${util.out('Select')}" class="input-select" style="flex:none;">
                             ${this.builder.opts.selectIcon}
                         </button>
-                        <div class="video-larger1 input-upload" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
+                        <div class="video-larger1 input-upload is-btn classic" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
                             <form class="form-upload-larger" target="frameTargetVideoUpload" method="post" action="${this.builder.opts.videoHandler}" enctype="multipart/form-data" style="position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;">
                                 <input id="hidRefId5" name="hidRefId" type="hidden" value="" />
                                 <svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
@@ -51097,7 +51163,7 @@ class Audio {
                         <button title="${util.out('Select')}" class="input-select" style="flex:none;">
                             ${this.builder.opts.selectIcon}
                         </button>
-                        <div class="audio-file-upload input-upload" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
+                        <div class="audio-file-upload input-upload is-btn classic" style="position:relative;flex:none;box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);">
                             <form class="form-upload-larger" target="frameTargetAudioUpload" method="post" action="${this.builder.opts.audioHandler}" enctype="multipart/form-data" style="position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;">
                                 <input id="hidRefAudio" name="hidRefId" type="hidden" value="" />
                                 <svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
@@ -51248,66 +51314,7 @@ class Audio {
   }
 }
 
-// Currently not used
-
-class Svg {
-  constructor(builder) {
-    this.builder = builder;
-    const util = this.builder.util;
-    const builderStuff = this.builder.builderStuff;
-    this.util = util;
-    this.builderStuff = builderStuff;
-    const dom = this.builder.dom;
-    this.dom = dom;
-    let svgTool = builderStuff.querySelector('#divSvgTool');
-    if (!svgTool) {
-      let html = `
-            <div id="divSvgTool" class="is-tool">
-                
-            </div>
-            `;
-      dom.appendHtml(builderStuff, html);
-      svgTool = builderStuff.querySelector('#divSvgTool');
-    }
-    this.svgTool = svgTool;
-  }
-  click() {//e
-    // Do Nothing
-    /*
-    const elm = e.target;
-    if(elm.tagName.toLowerCase() === 'svg' || elm.tagName.toLowerCase() === 'path') {
-         this.builder.activeSvg = elm.closest('svg');
-          // prevent text selection
-        if (document.selection) {
-            document.selection.empty();
-        } else {
-            window.getSelection().removeAllRanges();
-        }
-        
-        this.showTool(this.builder.activeSvg);
-    } else {
-        this.hideTool();
-    }
-    */
-  }
-  /*
-  showTool(elm) {
-      const top = elm.getBoundingClientRect().top + window.pageYOffset;
-       const left = elm.getBoundingClientRect().left;
-      this.svgTool.style.display = 'flex';
-      
-      const w = this.svgTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
-      const h = this.svgTool.offsetHeight;
-      var bBox = elm.getBBox();
-       this.svgTool.style.top = (top - h + window.pageYOffset - 3)  + 'px';
-      this.svgTool.style.left = (left +  (bBox.width * this.builder.opts.zoom) - bBox.width) + 'px';
-  }
-   hideTool() {
-       this.svgTool.style.display = '';
-   }
-  */
-}
-
+// import Svg from './elementsvg.js';
 // import Moveable from 'moveable';
 
 class Element$1 {
@@ -51329,8 +51336,9 @@ class Element$1 {
     this.table = new Table(builder);
     this.video = new Video(builder);
     this.audio = new Audio(builder);
-    this.svg = new Svg(builder);
+    // this.svg = new Svg(builder);
   }
+
   applyBehavior(col) {
     const dom = this.dom;
     let customcode = false;
@@ -51468,13 +51476,11 @@ class Element$1 {
       //previously this is commented: && !noedit && !_protected
 
       // Icon
-      const icons = document.querySelectorAll('.icon-active');
-      Array.prototype.forEach.call(icons, icon => {
-        dom.removeClass(icon, 'icon-active');
-      });
+      const icons = this.builder.doc.querySelectorAll('.icon-active');
+      icons.forEach(icon => icon.classList.remove('icon-active'));
       this.builder.activeIcon = null;
       if (elm.tagName.toLowerCase() === 'i' && elm.innerHTML === '') {
-        dom.addClass(elm, 'icon-active');
+        elm.classList.add('icon-active');
         dom.selectElementContents(elm);
         this.builder.activeIcon = elm;
 
@@ -51515,7 +51521,7 @@ class Element$1 {
       this.spacer.click(e);
 
       // svg
-      this.svg.click(e);
+      // this.svg.click(e);
     } else {
       this.util.hideControls();
 
@@ -51536,49 +51542,6 @@ class Element$1 {
 
     //Module
     this.module.click(col, e);
-
-    /*
-    // let elms = document.querySelectorAll('[data-resizable]');
-    // elms.forEach((elm)=>{
-    //     if(elm.getAttribute('data-resizable')==='1') {
-    //         elm.destroy();
-    //         elm.setAttribute('data-resizable', '');
-    //     }
-    // });
-     // let rotate = 0;
-    let elmResizable;
-    if(elm.hasAttribute('data-resizable')) {
-        elmResizable = elm;
-    } else {
-        elmResizable = dom.getParentByAttribute(elm,'data-resizable');
-    }
-    if(elmResizable) {
-        if(elmResizable.getAttribute('data-resizable')!=='1') {
-            new Moveable(document.body, {
-                target: elmResizable, //document.querySelector('.resizable'),
-                resizable: true,
-                // draggable: true,
-                // warpable: true,
-                // rotatable: true,
-                throttleResize: 0,
-                keepRatio: true,
-            }).on('resize', ({ target, width, height }) => {
-                target.style.width = `${width}px`;
-                target.style.height = `${height}px`;
-            });
-            
-         
-            // .on('rotate', ({ target, delta }) => {
-            //     rotate += delta;
-            //     target.style.transform = 'rotate(' + rotate +  'deg)';
-            // }).on('drag', ({ target, left, top }) => {
-            //     target.style.left = left + 'px';
-            //     target.style.top = top + 'px'; 
-            // });
-             elmResizable.setAttribute('data-resizable', '1');
-        }
-    }
-    */
   }
 }
 
@@ -53270,6 +53233,7 @@ class RowTool {
     const util = this.builder.util;
     this.util = util;
     const builderStuff = this.builder.builderStuff;
+    this.builderStuff = builderStuff;
     const dom = this.builder.dom;
     this.dom = dom;
     this.grid = new Grid(builder);
@@ -53451,6 +53415,11 @@ class RowTool {
       // Open Row Settings
       let elm = rowMore.querySelector('.row-settings');
       if (elm) dom.addEventListener(elm, 'click', () => {
+        if (this.builder.controlPanel) {
+          this.builder.controlpanel.select('row', true);
+          util.hidePop(this.rowMore);
+          return;
+        }
         const row = this.rowOverlay();
         if (!row) return;
         this.readRowStyles(row);
@@ -54126,6 +54095,35 @@ class RowTool {
         } else {
           quickadd.setAttribute('data-mode', 'cell-right');
         }
+
+        //handleQuickAddClickOut
+        const handleQuickAddClickOut = e => {
+          // console.log('handleQuickAddClickOut');
+          let elm = e.target;
+          if (!elm) return;
+          if (!elm.closest('.quickadd') && !elm.closest('.row-add') && !elm.closest('.is-rowadd-tool') && !elm.closest('.cell-add') && !elm.closest('.elm-add') && !elm.closest('.row-add-initial')) {
+            // click outside
+
+            // hide
+            const quickadd = builderStuff.querySelector('.quickadd');
+            util.hidePop(quickadd);
+            // console.log('HIDE');
+
+            // clear events
+            document.removeEventListener('click', handleQuickAddClickOut);
+            if (this.builder.iframeDocument) {
+              this.builder.doc.removeEventListener('click', handleQuickAddClickOut);
+            }
+            this.builder.handleQuickAddClickOut_ = false;
+          }
+        };
+        if (!this.builder.handleQuickAddClickOut_) {
+          document.addEventListener('click', handleQuickAddClickOut);
+          if (this.builder.iframeDocument) {
+            this.builder.doc.addEventListener('click', handleQuickAddClickOut);
+          }
+          this.builder.handleQuickAddClickOut_ = true;
+        }
       });
       const btnCellMore = coltool.querySelector('.cell-more');
       if (btnCellMore) dom.addEventListener(btnCellMore, 'click', () => {
@@ -54170,8 +54168,126 @@ class RowTool {
           dom.removeClass(btnCellLocking, 'on');
           // btnCellLocking.innerHTML = '<svg class="is-icon-flex"><use xlink:href="#icon-lock-off"></use></svg>';
         }
-      });
 
+        // columnMore 
+
+        const btnIncrease = columnMore.querySelector('.cell-increase');
+        const btnDecrease = columnMore.querySelector('.cell-decrease');
+        const btnPrev = columnMore.querySelector('.cell-prev');
+        const btnNext = columnMore.querySelector('.cell-next');
+        const btnUp = columnMore.querySelector('.cell-up');
+        const btnDown = columnMore.querySelector('.cell-down');
+        const btnDuplicate = columnMore.querySelector('.cell-duplicate');
+        const btnLock = columnMore.querySelector('.cell-locking');
+        const separator = columnMore.querySelector('.is-separator');
+        let nogrid = cell.closest('[nogrid]'); //dom.parentsHasAttribute(col, 'nogrid');
+        if (nogrid) {
+          btnPrev.style.display = 'none';
+          btnNext.style.display = 'none';
+          btnUp.style.display = 'none';
+          btnDown.style.display = 'none';
+          if (btnIncrease) btnIncrease.style.display = 'none';
+          if (btnDecrease) btnDecrease.style.display = 'none';
+          btnDuplicate.style.display = 'none';
+          btnPrev.setAttribute('disabled', 'disabled');
+          btnNext.setAttribute('disabled', 'disabled');
+          btnUp.setAttribute('disabled', 'disabled');
+          btnDown.setAttribute('disabled', 'disabled');
+          btnIncrease.setAttribute('disabled', 'disabled');
+          btnDecrease.setAttribute('disabled', 'disabled');
+          btnDuplicate.setAttribute('disabled', 'disabled');
+          let btnColHtml = columnMore.querySelector('.cell-html');
+          if (btnColHtml) btnColHtml.style.display = '';
+          if (cell.getAttribute('data-html')) {
+            columnMore.querySelector('.cell-html').style.display = 'none';
+            this.columnTool.querySelector('.cell-more').style.display = 'none';
+            columnMore.querySelector('.cell-html').setAttribute('disabled', 'disabled');
+            this.columnTool.querySelector('.cell-more').setAttribute('disabled', 'disabled');
+          }
+        } else {
+          btnPrev.style.display = '';
+          btnNext.style.display = '';
+          btnUp.style.display = '';
+          btnDown.style.display = '';
+          if (btnIncrease) btnIncrease.style.display = '';
+          if (btnDecrease) btnDecrease.style.display = '';
+          btnDuplicate.style.display = '';
+          btnPrev.removeAttribute('disabled');
+          btnNext.removeAttribute('disabled');
+          btnUp.removeAttribute('disabled');
+          btnDown.removeAttribute('disabled');
+          if (btnIncrease) btnIncrease.removeAttribute('disabled');
+          if (btnDecrease) btnDecrease.removeAttribute('disabled');
+          btnDuplicate.removeAttribute('disabled');
+          let btnColHtml = columnMore.querySelector('.cell-html');
+          if (btnColHtml) {
+            btnColHtml.style.display = '';
+            btnColHtml.removeAttribute('disabled');
+          }
+          let row = cell.parentNode;
+          let num = 3; //is-row-tool, is-col-tool & is-rowadd-tool
+          if (row.querySelector('.is-row-overlay')) {
+            num = 4; //is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
+          }
+
+          if (row.childElementCount - num === 1) {
+            //-num => minus is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
+            btnPrev.style.display = 'none';
+            btnNext.style.display = 'none';
+            if (btnIncrease) btnIncrease.style.display = 'none';
+            if (btnDecrease) btnDecrease.style.display = 'none';
+            btnPrev.setAttribute('disabled', 'disabled');
+            btnNext.setAttribute('disabled', 'disabled');
+            if (btnIncrease) btnIncrease.setAttribute('disabled', 'disabled');
+            if (btnDecrease) btnDecrease.setAttribute('disabled', 'disabled');
+          } else {
+            btnPrev.style.display = '';
+            btnNext.style.display = '';
+            if (btnIncrease) btnIncrease.style.display = '';
+            if (btnDecrease) btnDecrease.style.display = '';
+            btnPrev.removeAttribute('disabled');
+            btnNext.removeAttribute('disabled');
+            if (btnIncrease) btnIncrease.removeAttribute('disabled');
+            if (btnDecrease) btnDecrease.removeAttribute('disabled');
+          }
+
+          // let btnColHtml = columnMore.querySelector('.cell-html');
+          let btnColDuplicate = btnDuplicate;
+          if (cell.getAttribute('data-html')) {
+            if (btnColHtml) {
+              btnColHtml.style.display = 'none';
+              btnColHtml.setAttribute('disabled', 'disabled');
+            }
+            if (btnColDuplicate) {
+              btnColDuplicate.style.display = 'none';
+              btnColDuplicate.setAttribute('disabled', 'disabled');
+            }
+          } else {
+            if (btnColHtml) {
+              btnColHtml.style.display = '';
+              btnColHtml.removeAttribute('disabled');
+            }
+            if (btnColDuplicate) {
+              btnColDuplicate.style.display = '';
+              btnColDuplicate.removeAttribute('disabled');
+            }
+          }
+        }
+        if (cell.classList.contains('column-lock')) {
+          btnPrev.style.display = 'none';
+          btnNext.style.display = 'none';
+          btnUp.style.display = 'none';
+          btnDown.style.display = 'none';
+          btnIncrease.style.display = 'none';
+          btnDecrease.style.display = 'none';
+          btnDuplicate.style.display = 'none';
+          separator.style.display = 'none';
+          btnLock.style.display = 'none';
+        } else {
+          separator.style.display = '';
+          btnLock.style.display = '';
+        }
+      });
       const btnCellRemove = coltool.querySelector('.cell-remove');
       if (btnCellRemove) dom.addEventListener(btnCellRemove, 'click', () => {
         const grid = new Grid(this.builder);
@@ -54181,47 +54297,7 @@ class RowTool {
       });
       let btnGridEditor = rowtool.querySelector('.row-grideditor');
       if (btnGridEditor) dom.addEventListener(btnGridEditor, 'click', () => {
-        const grideditor = builderStuff.querySelector('.grideditor');
-        if (dom.hasClass(grideditor, 'active')) {
-          dom.removeClass(grideditor, 'active');
-          const builders = document.querySelectorAll(this.builder.opts.container);
-          Array.prototype.forEach.call(builders, builder => {
-            builder.removeAttribute('grideditor');
-          });
-        } else {
-          // dom.addClass(grideditor, 'active');
-          this.util.showModal(grideditor, false, () => {
-            btnGridEditor.removeAttribute('data-focus');
-            btnGridEditor.focus();
-          });
-          btnGridEditor.setAttribute('data-focus', true);
-          const builders = document.querySelectorAll(this.builder.opts.container);
-          Array.prototype.forEach.call(builders, builder => {
-            builder.setAttribute('grideditor', '');
-          });
-
-          // Grid Editor Status
-          // On/off outline button
-          const btnGridOutline = grideditor.querySelector('.grid-outline');
-          const container = this.builder.doc.querySelector(this.builder.opts.container); // get one
-          if (container.hasAttribute('gridoutline')) {
-            dom.addClass(btnGridOutline, 'on');
-          } else {
-            dom.removeClass(btnGridOutline, 'on');
-          }
-          // On/off lock button
-          const btnCellLocking = grideditor.querySelector('.cell-locking');
-          let cell = util.cellSelected();
-          if (cell) {
-            if (cell.hasAttribute('data-noedit')) {
-              dom.addClass(btnCellLocking, 'on');
-            } else {
-              dom.removeClass(btnCellLocking, 'on');
-            }
-          } else {
-            dom.removeClass(btnCellLocking, 'on');
-          }
-        }
+        this.showGridEditor();
       });
       const btnMore = rowtool.querySelector('.row-more');
       if (btnMore) dom.addEventListener(btnMore, 'click', () => {
@@ -54310,6 +54386,92 @@ class RowTool {
       });
     }
   }
+  hideGridEditor() {
+    const grideditor = this.builderStuff.querySelector('.grideditor');
+    grideditor.classList.remove('active');
+    const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
+    builders.forEach(builder => {
+      builder.removeAttribute('grideditor');
+    });
+  }
+  showGridEditor() {
+    const grideditor = this.builderStuff.querySelector('.grideditor');
+    const handleGridToolClickOut = e => {
+      // console.log('handleGridToolClickOut');
+      let elm = e.target;
+      if (!elm) return;
+      if (!elm.closest('.rte-grideditor') && !elm.closest('.grideditor') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('.is-sidebar') && !elm.closest('.is-rte-tool') && !elm.closest('.is-rte-pop') && !elm.closest('.is-elementrte-tool') && !elm.closest('.is-builder') && !elm.closest('.is-pop')) {
+        // click outside
+
+        // hide
+        this.hideGridEditor();
+        // console.log('HIDE');
+
+        // clear events
+        document.removeEventListener('click', handleGridToolClickOut);
+        if (this.builder.iframeDocument) {
+          this.builder.doc.removeEventListener('click', handleGridToolClickOut);
+        }
+        this.builder.handleGridToolClickOut_ = false;
+      }
+    };
+    if (grideditor.classList.contains('active')) {
+      // hide
+      this.hideGridEditor();
+
+      // clear events
+      document.removeEventListener('click', handleGridToolClickOut);
+      if (this.builder.iframeDocument) {
+        this.builder.doc.removeEventListener('click', handleGridToolClickOut);
+      }
+      this.builder.handleGridToolClickOut_ = false;
+      return;
+    }
+
+    // this.util.showModal(grideditor, false, ()=>{
+    //     btnGridEditor.removeAttribute('data-focus');
+    //     btnGridEditor.focus();
+    // });
+    // btnGridEditor.setAttribute('data-focus', true);
+
+    this.util.showModal(grideditor);
+    const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
+    builders.forEach(builder => {
+      builder.setAttribute('grideditor', '');
+    });
+
+    /*
+    // Grid Editor Status
+    // On/off outline button
+    const btnGridOutline = grideditor.querySelector('.grid-outline');
+    const container = this.builder.doc.querySelector(this.builder.opts.container); // get one
+    if(container.hasAttribute('gridoutline')) {
+        dom.addClass(btnGridOutline, 'on');
+    } else {
+        dom.removeClass(btnGridOutline, 'on');
+    }
+     // On/off lock button
+    const btnCellLocking = grideditor.querySelector('.cell-locking');
+    let cell = util.cellSelected();
+    if(cell) {
+        if(cell.hasAttribute('data-noedit')) {
+            dom.addClass(btnCellLocking, 'on');
+        } else {
+            dom.removeClass(btnCellLocking, 'on');
+        }
+    } else {
+        dom.removeClass(btnCellLocking, 'on');
+    }
+    */
+
+    if (!this.builder.handleGridToolClickOut_) {
+      document.addEventListener('click', handleGridToolClickOut);
+      if (this.builder.iframeDocument) {
+        this.builder.doc.addEventListener('click', handleGridToolClickOut);
+      }
+      this.builder.handleGridToolClickOut_ = true;
+    }
+  }
   readRowStyles(row) {
     this.util.clearActiveElement();
 
@@ -54410,6 +54572,7 @@ class RowAddTool {
   render(row) {
     const dom = this.dom;
     const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     const quickadd = renderQuickAdd(this.builder);
     let rowaddtool = row.querySelector('.is-rowadd-tool');
     if (!rowaddtool) {
@@ -54476,7 +54639,35 @@ class RowAddTool {
         dom.addClass(quickadd, 'center');
       }
       quickadd.setAttribute('data-mode', 'row');
-      return false;
+
+      //handleQuickAddClickOut
+      const handleQuickAddClickOut = e => {
+        // console.log('handleQuickAddClickOut');
+        let elm = e.target;
+        if (!elm) return;
+        if (!elm.closest('.quickadd') && !elm.closest('.row-add') && !elm.closest('.is-rowadd-tool') && !elm.closest('.cell-add') && !elm.closest('.elm-add') && !elm.closest('.row-add-initial')) {
+          // click outside
+
+          // hide
+          const quickadd = builderStuff.querySelector('.quickadd');
+          util.hidePop(quickadd);
+          // console.log('HIDE');
+
+          // clear events
+          document.removeEventListener('click', handleQuickAddClickOut);
+          if (this.builder.iframeDocument) {
+            this.builder.doc.removeEventListener('click', handleQuickAddClickOut);
+          }
+          this.builder.handleQuickAddClickOut_ = false;
+        }
+      };
+      if (!this.builder.handleQuickAddClickOut_) {
+        document.addEventListener('click', handleQuickAddClickOut);
+        if (this.builder.iframeDocument) {
+          this.builder.doc.addEventListener('click', handleQuickAddClickOut);
+        }
+        this.builder.handleQuickAddClickOut_ = true;
+      }
     });
   }
 }
@@ -54739,7 +54930,7 @@ class ColumnTool {
                                     ${this.builder.opts.otherSelectIcon}
                                 </button>
                                 
-                                <div class="image-larger4" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
+                                <div class="image-larger4 is-btn classic" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;">
                                     <form class="form-upload-larger" target="frameTargetLinkUpload" method="post" action="${this.builder.opts.largerImageHandler}" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;border-radius:1px;display:flex;align-items: center;justify-content: center;">
                                         <input id="hidRefId4" name="hidRefId" type="hidden" value="">
                                         <svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg>
@@ -55115,6 +55306,11 @@ class ColumnTool {
       // Open Column Settings
       elm = columnMore.querySelector('.cell-settings');
       if (elm) dom.addEventListener(elm, 'click', () => {
+        if (this.builder.controlPanel) {
+          this.builder.controlpanel.select('column', true);
+          util.hidePop(this.columnMore);
+          return;
+        }
         let cell = util.cellSelected();
         if (!cell) return;
         this.readCellStyles(cell);
@@ -55514,6 +55710,8 @@ class ColumnTool {
         cell.removeAttribute('data-scale');
       };
       inpImageHorSlider.onchange = () => {
+        if (this.builder.win.adjustBgPos) this.builder.win.adjustBgPos(); // adjustBgPos() from box/flex.js
+
         //Trigger Change event
         this.builder.opts.onChange();
       };
@@ -55593,6 +55791,8 @@ class ColumnTool {
         cell.removeAttribute('data-scale');
       };
       inpImageVertSlider.onchange = () => {
+        if (this.builder.win.adjustBgPos) this.builder.win.adjustBgPos(); // adjustBgPos() from box/flex.js
+
         //Trigger Change event
         this.builder.opts.onChange();
       };
@@ -57135,144 +57335,28 @@ class ColumnTool {
     }
   }
   click(col) {
-    const dom = this.dom;
-
-    //---- New Col Tool ----
     this.columnTool = col.parentNode.querySelector('.is-col-tool');
     this.columnTool.style.left = col.offsetLeft + 'px';
     this.columnTool.style.top = col.offsetTop + 'px';
-    //---- /New Col Tool ----
-
-    const btnIncrease = this.columnMore.querySelector('.cell-increase');
-    const btnDecrease = this.columnMore.querySelector('.cell-decrease');
-    let nogrid = dom.parentsHasAttribute(col, 'nogrid');
+    const btnAdd = this.columnTool.querySelector('.cell-add');
+    const btnRemove = this.columnTool.querySelector('.cell-remove');
+    const btnMore = this.columnTool.querySelector('.cell-more');
+    let nogrid = col.closest('[nogrid]');
     if (nogrid) {
-      this.columnMore.querySelector('.cell-prev').style.display = 'none';
-      this.columnMore.querySelector('.cell-next').style.display = 'none';
-      this.columnMore.querySelector('.cell-up').style.display = 'none';
-      this.columnMore.querySelector('.cell-down').style.display = 'none';
-      if (btnIncrease) btnIncrease.style.display = 'none';
-      if (btnDecrease) btnDecrease.style.display = 'none';
-      this.columnMore.querySelector('.cell-duplicate').style.display = 'none';
-      this.columnMore.querySelector('.cell-prev').setAttribute('disabled', 'disabled');
-      this.columnMore.querySelector('.cell-next').setAttribute('disabled', 'disabled');
-      this.columnMore.querySelector('.cell-up').setAttribute('disabled', 'disabled');
-      this.columnMore.querySelector('.cell-down').setAttribute('disabled', 'disabled');
-      btnIncrease.setAttribute('disabled', 'disabled');
-      btnDecrease.setAttribute('disabled', 'disabled');
-      this.columnMore.querySelector('.cell-duplicate').setAttribute('disabled', 'disabled');
-      let btnColHtml = this.columnMore.querySelector('.cell-html');
-      if (btnColHtml) btnColHtml.style.display = '';
-      this.columnTool.querySelector('.cell-add').style.display = 'none';
-      this.columnTool.querySelector('.cell-remove').style.display = 'none';
-      this.columnTool.querySelector('.cell-add').setAttribute('disabled', 'disabled');
-      this.columnTool.querySelector('.cell-remove').setAttribute('disabled', 'disabled');
+      btnAdd.style.display = 'none';
+      btnRemove.style.display = 'none';
+      btnAdd.setAttribute('disabled', 'disabled');
+      btnRemove.setAttribute('disabled', 'disabled');
       if (col.getAttribute('data-html')) {
-        this.columnMore.querySelector('.cell-html').style.display = 'none';
-        this.columnTool.querySelector('.cell-more').style.display = 'none';
-        this.columnMore.querySelector('.cell-html').setAttribute('disabled', 'disabled');
-        this.columnTool.querySelector('.cell-more').setAttribute('disabled', 'disabled');
+        btnMore.style.display = 'none';
+        btnMore.setAttribute('disabled', 'disabled');
       }
     } else {
-      this.columnMore.querySelector('.cell-prev').style.display = '';
-      this.columnMore.querySelector('.cell-next').style.display = '';
-      this.columnMore.querySelector('.cell-up').style.display = '';
-      this.columnMore.querySelector('.cell-down').style.display = '';
-      if (btnIncrease) btnIncrease.style.display = '';
-      if (btnDecrease) btnDecrease.style.display = '';
-      this.columnMore.querySelector('.cell-duplicate').style.display = '';
-      this.columnMore.querySelector('.cell-prev').removeAttribute('disabled');
-      this.columnMore.querySelector('.cell-next').removeAttribute('disabled');
-      this.columnMore.querySelector('.cell-up').removeAttribute('disabled');
-      this.columnMore.querySelector('.cell-down').removeAttribute('disabled');
-      if (btnIncrease) btnIncrease.removeAttribute('disabled');
-      if (btnDecrease) btnDecrease.removeAttribute('disabled');
-      this.columnMore.querySelector('.cell-duplicate').removeAttribute('disabled');
-      let btnColHtml = this.columnMore.querySelector('.cell-html');
-      if (btnColHtml) {
-        btnColHtml.style.display = '';
-        btnColHtml.removeAttribute('disabled');
-      }
-      this.columnTool.querySelector('.cell-add').style.display = '';
-      this.columnTool.querySelector('.cell-remove').style.display = '';
-      this.columnTool.querySelector('.cell-add').removeAttribute('disabled');
-      this.columnTool.querySelector('.cell-remove').removeAttribute('disabled');
-      let row = col.parentNode;
-      let num = 3; //is-row-tool, is-col-tool & is-rowadd-tool
-      if (row.querySelector('.is-row-overlay')) {
-        num = 4; //is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
-      }
-
-      if (row.childElementCount - num === 1) {
-        //-num => minus is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
-        this.columnMore.querySelector('.cell-prev').style.display = 'none';
-        this.columnMore.querySelector('.cell-next').style.display = 'none';
-        if (btnIncrease) btnIncrease.style.display = 'none';
-        if (btnDecrease) btnDecrease.style.display = 'none';
-        this.columnMore.querySelector('.cell-prev').setAttribute('disabled', 'disabled');
-        this.columnMore.querySelector('.cell-next').setAttribute('disabled', 'disabled');
-        if (btnIncrease) btnIncrease.setAttribute('disabled', 'disabled');
-        if (btnDecrease) btnDecrease.setAttribute('disabled', 'disabled');
-      } else {
-        this.columnMore.querySelector('.cell-prev').style.display = '';
-        this.columnMore.querySelector('.cell-next').style.display = '';
-        if (btnIncrease) btnIncrease.style.display = '';
-        if (btnDecrease) btnDecrease.style.display = '';
-        this.columnMore.querySelector('.cell-prev').removeAttribute('disabled');
-        this.columnMore.querySelector('.cell-next').removeAttribute('disabled');
-        if (btnIncrease) btnIncrease.removeAttribute('disabled');
-        if (btnDecrease) btnDecrease.removeAttribute('disabled');
-      }
-
-      // let btnColHtml = this.columnMore.querySelector('.cell-html');
-      let btnColDuplicate = this.columnMore.querySelector('.cell-duplicate');
-      if (col.getAttribute('data-html')) {
-        if (btnColHtml) {
-          btnColHtml.style.display = 'none';
-          btnColHtml.setAttribute('disabled', 'disabled');
-        }
-        if (btnColDuplicate) {
-          btnColDuplicate.style.display = 'none';
-          btnColDuplicate.setAttribute('disabled', 'disabled');
-        }
-      } else {
-        if (btnColHtml) {
-          btnColHtml.style.display = '';
-          btnColHtml.removeAttribute('disabled');
-        }
-        if (btnColDuplicate) {
-          btnColDuplicate.style.display = '';
-          btnColDuplicate.removeAttribute('disabled');
-        }
-      }
-
-      //data-protected
-      /*
-      if(row.hasAttribute('data-protected')){
-          row.querySelector('.is-row-tool').style.display = 'none';
-           this.columnTool.style.display = 'none'; // if row protected, then all column protected
-      } else {
-          if(row.querySelectorAll('[data-protected]').length>0){
-              row.querySelector('.is-row-tool').style.display = 'none';
-          } else {
-              row.querySelector('.is-row-tool').style.display = '';
-          }
-           this.columnTool.style.display = '';
-          //check columnTool buttons if need to show or hide
-          let _protected = dom.parentsHasAttribute(col, 'data-protected');
-          if(_protected){
-              this.columnTool.querySelector('.cell-add').style.display = 'none';
-              this.columnTool.querySelector('.cell-remove').style.display = 'none';
-              this.columnTool.querySelector('.cell-more').style.display = 'none';
-          } else {
-              this.columnTool.querySelector('.cell-add').style.display = '';
-              this.columnTool.querySelector('.cell-remove').style.display = '';
-              this.columnTool.querySelector('.cell-more').style.display = '';
-          }
-      }
-      */
+      btnAdd.style.display = '';
+      btnRemove.style.display = '';
+      btnAdd.removeAttribute('disabled');
+      btnRemove.removeAttribute('disabled');
     }
-
     let row = col.parentNode;
 
     //data-protected
@@ -57285,42 +57369,22 @@ class ColumnTool {
         rowaddtool.style.display = 'none';
       }
     } else {
-      // if(row.querySelectorAll('[data-protected]').length>0){
-      //     row.querySelector('.is-row-tool').style.display = 'none';
-      // } else {
-      //     row.querySelector('.is-row-tool').style.display = '';
-      // }
-
       this.columnTool.style.display = '';
       //check columnTool buttons if need to show or hide
-      let _protected = dom.parentsHasAttribute(col, 'data-protected');
+      let _protected = col.closest('[data-protected]');
       if (_protected) {
-        this.columnTool.querySelector('.cell-add').style.display = 'none';
-        this.columnTool.querySelector('.cell-remove').style.display = 'none';
-        this.columnTool.querySelector('.cell-more').style.display = 'none';
+        btnAdd.style.display = 'none';
+        btnRemove.style.display = 'none';
+        btnMore.style.display = 'none';
       } else {
-        this.columnTool.querySelector('.cell-add').style.display = '';
-        this.columnTool.querySelector('.cell-remove').style.display = '';
-        this.columnTool.querySelector('.cell-more').style.display = '';
+        btnAdd.style.display = '';
+        btnRemove.style.display = '';
+        btnMore.style.display = '';
       }
     }
-
-    // Column Lock will hide Add & Remove column
     if (col.classList.contains('column-lock')) {
-      this.columnTool.querySelector('.cell-add').style.display = 'none';
-      this.columnTool.querySelector('.cell-remove').style.display = 'none';
-      this.columnMore.querySelector('.cell-prev').style.display = 'none';
-      this.columnMore.querySelector('.cell-next').style.display = 'none';
-      this.columnMore.querySelector('.cell-up').style.display = 'none';
-      this.columnMore.querySelector('.cell-down').style.display = 'none';
-      this.columnMore.querySelector('.cell-increase').style.display = 'none';
-      this.columnMore.querySelector('.cell-decrease').style.display = 'none';
-      this.columnMore.querySelector('.cell-duplicate').style.display = 'none';
-      this.columnMore.querySelector('.is-separator').style.display = 'none';
-      this.columnMore.querySelector('.cell-locking').style.display = 'none';
-    } else {
-      this.columnMore.querySelector('.is-separator').style.display = '';
-      this.columnMore.querySelector('.cell-locking').style.display = '';
+      btnAdd.style.display = 'none';
+      btnRemove.style.display = 'none';
     }
   }
 }
@@ -62246,8 +62310,10 @@ class ElementTool {
     this.builderStuff = builderStuff;
     const dom = this.builder.dom;
     this.dom = dom;
-    const elementPanel = new ElementPanel(builder);
-    this.elementPanel = elementPanel;
+    if (!this.builder.controlPanel) {
+      const elementPanel = new ElementPanel(builder);
+      this.elementPanel = elementPanel;
+    }
     let elementTool = builderStuff.querySelector('.is-element-tool');
     let elementMore = builderStuff.querySelector('.elmmore');
     if (!elementTool) {
@@ -62333,7 +62399,35 @@ class ElementTool {
         dom.addClass(quickadd, 'center');
       }
       quickadd.setAttribute('data-mode', 'elm');
-      return false;
+
+      //handleQuickAddClickOut
+      const handleQuickAddClickOut = e => {
+        // console.log('handleQuickAddClickOut');
+        let elm = e.target;
+        if (!elm) return;
+        if (!elm.closest('.quickadd') && !elm.closest('.row-add') && !elm.closest('.is-rowadd-tool') && !elm.closest('.cell-add') && !elm.closest('.elm-add') && !elm.closest('.row-add-initial')) {
+          // click outside
+
+          // hide
+          const quickadd = builderStuff.querySelector('.quickadd');
+          util.hidePop(quickadd);
+          // console.log('HIDE');
+
+          // clear events
+          document.removeEventListener('click', handleQuickAddClickOut);
+          if (this.builder.iframeDocument) {
+            this.builder.doc.removeEventListener('click', handleQuickAddClickOut);
+          }
+          this.builder.handleQuickAddClickOut_ = false;
+        }
+      };
+      if (!this.builder.handleQuickAddClickOut_) {
+        document.addEventListener('click', handleQuickAddClickOut);
+        if (this.builder.iframeDocument) {
+          this.builder.doc.addEventListener('click', handleQuickAddClickOut);
+        }
+        this.builder.handleQuickAddClickOut_ = true;
+      }
     });
     const elmRemove = elementTool.querySelector('.elm-remove');
     dom.addEventListener(elmRemove, 'click', () => {
@@ -62558,15 +62652,21 @@ class ElementTool {
 
     const elmSettings = elementTool.querySelector('.elm-settings');
     if (elmSettings) dom.addEventListener(elmSettings, 'click', () => {
-      // elementMore.style.display = '';
       util.hidePop(elementMore);
-      this.elementPanel.showPanel();
+      if (this.builder.controlPanel) {
+        this.builder.controlpanel.objDialogElement.open();
+      } else {
+        this.elementPanel.showPanel();
+      }
     });
     const elmSettings2 = elementMore.querySelector('.elm-settings');
     if (elmSettings2) dom.addEventListener(elmSettings2, 'click', () => {
-      // elementMore.style.display = '';
       util.hidePop(elementMore);
-      this.elementPanel.showPanel();
+      if (this.builder.controlPanel) {
+        this.builder.controlpanel.objDialogElement.open();
+      } else {
+        this.elementPanel.showPanel();
+      }
     });
 
     // document.addEventListener('mousedown', (e) => {
@@ -62757,7 +62857,9 @@ class ElementTool {
     // console.log(this.builder.inspectedElement);
     // console.log(this.builder.activeElement);
 
-    this.elementPanel.click(e);
+    if (!this.builder.controlPanel) {
+      this.elementPanel.click(e);
+    }
   }
   refresh() {
     if (this.builder.activeElement) {
@@ -62821,6 +62923,7 @@ class ElementTool {
   pos() {
     let elementTool = this.elementTool;
     let elm = this.builder.activeElement;
+    if (!elm) return;
     if (elm.closest('.is-dock')) return;
     let top, left;
     if (!this.builder.iframe) {
@@ -65147,7 +65250,7 @@ class Rte {
           let scale = val / 100;
           this.builder.onZoomEnd(scale);
         }
-      }, 300);
+      }, 350);
     };
 
     // Zoom Modal
@@ -66264,7 +66367,7 @@ class Rte {
     // -----------------------------
 
     // Click anywhere will hide Column tool
-    this.builder.doc.addEventListener('click', this.builder.doRteClick = e => {
+    if (!this.builder.controlPanel) this.builder.doc.addEventListener('click', this.builder.doRteClick = e => {
       e = e || window.event;
       var target = e.target || e.srcElement;
       if (!this.builderStuff) return; // in case the builder is destroyed
@@ -66344,7 +66447,7 @@ class Rte {
     if (this.builder.toolbarDisplay !== 'auto') {
       this.showDefaultToolbar(); // first time
     }
-  }
+  } //contructor
 
   zoomStart() {
     if (this.builder.onZoomStart) {
@@ -67208,6 +67311,7 @@ class Rte {
     });
   }
   showDefaultToolbar() {
+    if (this.builder.controlPanel) return;
     this.elementRteTool.style.display = 'flex';
     this.rteTool.style.display = 'none';
     this.hideAlignButtons();
@@ -70295,7 +70399,8 @@ class Tabs {
       const content = document.querySelector('#' + id);
       content.style.display = 'flex';
       dom$1.addClass(content, 'active');
-      document.querySelector('.is-tabs-more').style.display = 'none';
+      const tabMore = document.querySelector('.is-tabs-more');
+      if (tabMore) tabMore.style.display = 'none';
 
       // Close all dropdown
       closeAllDropdowns();
@@ -70929,7 +71034,7 @@ class Resize {
               let moduleWidth = item.offsetWidth / row.offsetWidth * 100;
               item.style.width = moduleWidth + '%';
               item.style.flex = 'none';
-              this.builder.util.refreshModuleLayout(item);
+              if (!item.hasAttribute('data-norefresh')) this.builder.util.refreshModuleLayout(item);
             }
           });
         }
@@ -70997,7 +71102,8 @@ class ContentStuff {
             <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
         </div>
         <div class="is-tool is-module-tool">
-            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+            <button class="btn-module-refresh" title="${util.out('Refresh')}" data-title="${util.out('Refresh')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#icon-reload"></use></svg></button>
+            <button class="btn-module-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
         </div>
         <div id="divSpacerTool" class="is-tool is-spacer-tool">
             <button title="${util.out('Decrease')}" data-value="-"><svg class="is-icon-flex"><use xlink:href="#ion-ios-minus-empty"></use></svg></button>
@@ -71137,6 +71243,11 @@ class ContentStuff {
                 <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
                 <path d="M20.2 20.2l1.8 1.8"></path>
             </symbol>
+            <symbol id="icon-reload" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1.002 7.935 1.007 9.425 4.747"></path>
+                <path d="M20 4v5h-5"></path>
+            </symbol>
             </defs>
         </svg>
 
@@ -71870,14 +71981,6 @@ class ContentStuff {
             right: auto;
             left: -40px;
         }
-        .is-builder.builder-active > div:not(.row-active) {
-            border-right: 120px rgba(0, 0, 0, 0) solid;
-            margin-right: -120px;
-        }
-        .is-builder[leftrowtool].builder-active > div:not(.row-active) {
-            border-left: 120px rgba(0, 0, 0, 0) solid;
-            margin-left: -120px;
-        }
         .is-builder[rowoutline] .row-outline {
             outline: none;
         }
@@ -71950,21 +72053,6 @@ class ContentStuff {
         }
 
 
-
-
-
-        .is-builder.builder-active > div:not(.row-active) { 
-            border-right: 120px rgba(0,0,0,0) solid;
-            margin-right: -120px;
-        }
-        .is-builder[leftrowtool].builder-active > div:not(.row-active) { 
-            border-left: 120px rgba(0,0,0,0) solid;
-            margin-left: -120px;
-        }
-
-
-
-
         /* Prevent css framework overide (Materialize) */
         .is-ui [type="checkbox"]:not(:checked), .is-ui [type="checkbox"]:checked {
             position: unset !important;
@@ -72014,6 +72102,20 @@ class ContentStuff {
         }
 
 
+        * {
+            scrollbar-width: thin;
+            scrollbar-color: rgba(0, 0, 0, 0.2) auto;
+        }
+        *::-webkit-scrollbar {
+            width: 12px;
+        }
+        *::-webkit-scrollbar-track {
+            background: rgba(200, 200, 200, 0.2);
+        }
+        *::-webkit-scrollbar-thumb {
+            background-color:rgba(0, 0, 0, 0.2); 
+        }
+        
         ${this.builder.simpleEditingBreakpoint ? `
           
             @media all and (max-width: ${this.builder.simpleEditingBreakpoint}) {
@@ -74004,7 +74106,7 @@ class Dictation {
                     </div>
                 </div>
                 <textarea class="inp-command"></textarea>
-                <div style="display:flex;padding-left:3px;">
+                <div style="display:flex;">
                     <button title="${util.out('Settings')}" class="cmd-command-config classic-secondary" style="width:40px;height:43px;flex:none;padding:0;outline-offset:-2px;">
                         <svg class="is-icon-flex" style="width:15px;height:15px;flex:none;"><use xlink:href="#icon-settings"></use></svg>
                     </button>
@@ -74014,7 +74116,7 @@ class Dictation {
                     <button title="${util.out('Command Examples')}" class="cmd-command-list classic-secondary" style="width:40px;height:43px;flex:none;padding:0;outline-offset:-2px;">
                         <svg class="is-icon-flex" style="width: 18px; height: 18px;"><use xlink:href="#icon-message-search"></use></svg> 
                     </button>
-                    <button title="${util.out('Clear')}" class="cmd-clear-command classic-secondary" style="margin-right:6px;width:40px;height:43px;flex:none;padding:0;outline-offset:-2px;">
+                    <button title="${util.out('Clear')}" class="cmd-clear-command classic-secondary" style="width:40px;height:43px;flex:none;padding:0;outline-offset:-2px;">
                         <svg class="is-icon-flex" style="width: 18px; height: 18px;"><use xlink:href="#icon-eraser"></use></svg> 
                     </button>
 
@@ -75008,34 +75110,7 @@ class Similarity {
   }
 }
 
-// Experimental
-// import {out} from './out.js';
-class ControlPanel {
-  constructor(builder) {
-    this.builder = builder;
-    this.builderStuff = this.builder.builderStuff;
-    /*
-    let controlPanel = builderStuff.querySelector('.is-controlpanel');
-    if(!controlPanel) {
-        let html = `
-        <style>
-     
-        </style>
-        <div class="is-controlpanel">
-             </div>
-        `;
-             // const doc = this.builder.doc;
-        // document.body.classList.add('controlpanel');
-             builderStuff.insertAdjacentHTML('beforeend', html);
-        controlPanel = builderStuff.querySelector('.is-controlpanel');
-    } else {
-        // Means ContentBox
-    }
-    this.controlPanel = controlPanel;
-     // Add ContentBuilder controls
-    */
-  }
-}
+// import ControlPanel from './controlpanel.js';
 
 class ContentBuilder {
   constructor(opts = {}) {
@@ -76096,11 +76171,31 @@ class ContentBuilder {
       this.dom.appendChild(document.body, builderStuff);
     }
     this.builderStuff = builderStuff;
-    this.controlpanel = new ControlPanel(this);
     prepareSvgIcons(this); // Prepare icons (embed svg definitions for icons) 
 
-    this.preferences = new Preferences(this); // this will also call setUIColor() and getUIStyles() for theme
-
+    if (!this.controlPanel) this.preferences = new Preferences(this); // this will also call setUIColor() and getUIStyles() for theme
+    else {
+      if (localStorage.getItem('_theme') != null) {
+        const n = localStorage.getItem('_theme');
+        this.themeIndex = n;
+        if (this.themes) {
+          if (this.themes.length > 0) {
+            const item = this.themes[n];
+            if (item) {
+              this.setUIColor(item[1], item[2]);
+              this.renderIframeLater = true;
+            }
+          }
+        }
+      } else {
+        this.setUIColor('', '');
+        this.renderIframeLater = true;
+      }
+      if (!this.renderIframeLater) {
+        // means setUIColor() not called, so we need to call getUIStyles() manually
+        util.getUIStyles();
+      }
+    }
     renderGridEditor(this); // Render Grid Editor
 
     // Check if preview
@@ -76221,55 +76316,36 @@ class ContentBuilder {
       });
     }
 
+    // if(!this.isContentBox && this.controlPanel) {
+    //     this.controlpanel = new ControlPanel(this);
+    // }
+
     // Add document Click event
     document.addEventListener('click', this.doDocumentClick = e => {
-      e = e || window.event;
-      let target = e.target || e.srcElement;
+      let target = e.target;
       if (!target) return;
       let rowClicked;
-      if (target.parentNode) rowClicked = this.dom.hasClass(target.parentNode, 'is-builder');
-      let containerClicked = this.dom.hasClass(target, 'is-builder');
-      let a = false,
-        b = false,
-        c = false,
-        d = false,
-        f = false,
-        g = false,
-        h = false,
-        i = false,
-        j = false,
-        k = false;
-      let m = false,
-        n = false,
-        o = false,
-        p = false;
+      if (target.parentNode && target.parentNode.classList) rowClicked = target.parentNode.classList.contains('is-builder');
+      let containerClicked = target.classList.contains('is-builder');
+      let a = target.closest('.is-builder');
+      let p = target.closest('.is-subblock');
+      let b = target.closest('.is-modal') || target.closest('.keep-selection');
+      let c = target.closest('.is-side') || target.closest('.is-sidebar');
+      let d = target.closest('.is-pop');
+      let f = target.closest('.is-tool');
+      let g = target.closest('.is-rte-tool') || target.closest('.is-elementrte-tool');
+      let h = target.closest('.is-rte-pop');
+      let i = target.closest('.row-add-initial');
+      let j = target.closest('.sl-wrapper') || target.closest('.sl-overlay') || target.closest('.sl-close');
+      let k = target.closest('.is-selectbox') || target.closest('.is-selectbox-options');
       let isSpecialElement = false;
-      let element = target;
-      while (element) {
-        if (!element.tagName) break;
-        if (element.tagName === 'BODY' || element.tagName === 'HTML') break;
-        if (this.dom.hasClass(element, 'is-builder')) a = true;
-        if (this.dom.hasClass(element, 'is-subblock')) p = true;
-        if (this.dom.hasClass(element, 'is-modal') || this.dom.hasClass(element, 'keep-selection')) b = true;
-        if (this.dom.hasClass(element, 'is-side') || this.dom.hasClass(element, 'is-sidebar')) c = true;
-        if (this.dom.hasClass(element, 'is-pop')) d = true;
-        if (this.dom.hasClass(element, 'is-tool')) f = true;
-        if (this.dom.hasClass(element, 'is-rte-tool') || this.dom.hasClass(element, 'is-elementrte-tool')) g = true;
-        if (this.dom.hasClass(element, 'is-rte-pop')) h = true;
-        if (this.dom.hasClass(element, 'row-add-initial')) i = true;
-        if (this.dom.hasClass(element, 'sl-wrapper') || this.dom.hasClass(element, 'sl-overlay') || this.dom.hasClass(element, 'sl-close')) j = true;
-        if (this.dom.hasClass(element, 'is-selectbox') || this.dom.hasClass(element, 'is-selectbox-options')) k = true; // dropdown
-
-        if (this.opts.specialElementClasses) {
-          for (let i = 0; i < this.opts.specialElementClasses.length; i++) {
-            if (this.dom.hasClass(element, this.opts.specialElementClasses[i])) isSpecialElement = true;
-          }
+      if (this.opts.specialElementClasses) {
+        for (let i = 0; i < this.opts.specialElementClasses.length; i++) {
+          isSpecialElement = target.closest('.' + this.opts.specialElementClasses[i]);
         }
-        if (element.id === 'divImageTool') m = true;
-        if (element.id === 'divImageResizer') n = true;
-        if (this.preserveSelection) o = true;
-        element = element.parentNode;
       }
+      let o;
+      if (this.preserveSelection) o = true;
 
       // dropdown
       if (!k) {
@@ -76278,45 +76354,40 @@ class ContentBuilder {
           dropdown.style.display = 'none';
         });
       }
-
-      // let a = this.dom.parentsHasClass(target, 'is-builder'); // builder area
-      // let b = this.dom.parentsHasClass(target, 'is-modal'); // modal
-      // let c = this.dom.parentsHasClass(target, 'is-side'); // side panel
-      // let d = this.dom.parentsHasClass(target, 'is-pop'); // pop
-      // let f = this.dom.parentsHasClass(target, 'is-tool'); // tool
-      // let g = this.dom.parentsHasClass(target, 'is-rte-tool'); 
-      // let h = this.dom.parentsHasClass(target, 'is-rte-pop'); 
-      // let i = this.dom.parentsHasClass(target, 'row-add-initial'); 
-      // let j = this.dom.hasClass(target, 'sl-overlay') || 
-      //     this.dom.parentsHasClass(target, 'sl-overlay') || 
-      //     this.dom.hasClass(target, 'sl-close') || 
-      //     this.dom.parentsHasClass(target, 'sl-close'); 
+      const clrPicker = document.querySelector('.clr-picker.clr-open');
+      // if(clrPicker) return;
 
       // Image Resizer
+      let n = target.closest('#divImageResizer');
+      if (n) return;
+
+      /*
+      let m = target.closest('#divImageTool');
+      
       let resizeProcess = false;
       let imageResizer = document.querySelector('#divImageResizer');
-      if (imageResizer) if (imageResizer.getAttribute('data-resized') === '1') resizeProcess = true;
-      if (resizeProcess) return; // to prevent unwanted click/clearActiveCell during image resize end.
-
-      if (!(b || j || m || n || target.tagName.toLowerCase() === 'img')) {
-        let imageTool = document.querySelector('#divImageTool');
-        imageTool.style.display = '';
-        // this.activeImage =  null; // Commented => Additional (to prevent lost focus)
-
-        let imageResizer = document.querySelector('#divImageResizer');
-        imageResizer.style.display = 'none';
-
-        // moveable
-        imageResizer.style.top = '-10px';
-        imageResizer.style.left = '-10px';
-        imageResizer.style.width = '1px';
-        imageResizer.style.height = '1px';
-        if (this.moveable) {
-          this.moveable.updateRect();
-          document.querySelector('.moveable-control-box').style.display = 'none';
-        }
+      if(imageResizer) if(imageResizer.getAttribute('data-resized')==='1') resizeProcess = true;
+      if(resizeProcess) return; // to prevent unwanted click/clearActiveCell during image resize end.
+       if(!(b||j||m||n||target.tagName.toLowerCase() === 'img')) {
+                  let imageTool = document.querySelector('#divImageTool');
+          imageTool.style.display = '';
+          // this.activeImage =  null; // Commented => Additional (to prevent lost focus)
+               let imageResizer = document.querySelector('#divImageResizer');
+          imageResizer.style.display = 'none';
+          
+          // moveable
+          imageResizer.style.top = '-10px';
+          imageResizer.style.left = '-10px';
+          imageResizer.style.width = '1px';
+          imageResizer.style.height = '1px';
+          if(this.moveable) {
+              this.moveable.updateRect();
+              document.querySelector('.moveable-control-box').style.display = 'none'; 
+          }
       }
-      if (!(a || p || b || c || d || f || g || h || i || j || o || isSpecialElement) || rowClicked && !i || containerClicked) {
+      */
+
+      if (!(a || p || b || c || d || f || g || h || i || j || o || isSpecialElement || clrPicker) || rowClicked && !i || containerClicked) {
         // Click anywhere but is not inside builder area, modal, popup, tool or rte, then clear row/column (cell) selection
 
         if (!this.dom.getSelected()) {
@@ -76327,28 +76398,40 @@ class ContentBuilder {
 
             util.clearActiveCell();
             util.clearControls();
-            if (this.toolbarDisplay !== 'auto') {
+            if (!this.controlPanel) if (this.toolbarDisplay !== 'auto') {
               this.rte.showDefaultToolbar();
             }
             if (this.settings.onSelectionChange) this.settings.onSelectionChange(e);
+
+            // if(this.settings.onPageContentClick) this.settings.onPageContentClick(e);
           }
         }
+
+        /*
         this.element.hyperlink.buttonEditor.hide();
+        */
       }
 
+      /*
       // Button Modal
-      if (!this.activeLinkButton && !this.activeButton && !target.closest('.buttoneditor') && !target.closest('.link-button-edit') && !target.closest('.is-modal')) {
-        this.element.hyperlink.buttonEditor.hide();
+      if(!this.activeLinkButton && !this.activeButton && 
+          !target.closest('.buttoneditor') && !target.closest('.link-button-edit') && 
+          !target.closest('.is-modal')) {
+           this.element.hyperlink.buttonEditor.hide();
       }
+      */
 
+      /*
       // Backward compatibility (for examples)
-      if (!d && !this.dom.parentsHasId(target, '_cbhtml')) {
-        const pops = document.querySelectorAll('.is-pop');
-        Array.prototype.forEach.call(pops, pop => {
-          if (!this.dom.parentsHasId(pop, '_cbhtml')) pop.style.display = '';
-        });
+      if(!d && !this.dom.parentsHasId(target, '_cbhtml')) {
+          const pops = document.querySelectorAll('.is-pop');
+          Array.prototype.forEach.call(pops, (pop) => {
+              if(!this.dom.parentsHasId(pop, '_cbhtml')) pop.style.display = '';
+          });
       }
+      */
     });
+
     if (this.iframe) {
       this.doc.addEventListener('click', this.doDocumentClick);
     }
@@ -76651,11 +76734,14 @@ class ContentBuilder {
     //     let outlineStyle = localStorage.getItem('_outlinestyle');
     //     this.preferences.setOutlineStyle(outlineStyle);
     // } 
-    this.preferences.initBuilder(builder);
+    if (this.preferences) this.preferences.initBuilder(builder);
 
     // Apply behavior on each row
     const rows = this.dom.elementChildren(builder);
     rows.forEach(row => {
+      // The saveForUndo also saves sortable class when start dragging. If Undo is performed, the classes are returned. Cleanup the classes here.
+      row.classList.remove('sortable-ghost');
+      row.classList.remove('sortable-chosen');
       if (this.dom.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)
@@ -76743,7 +76829,11 @@ class ContentBuilder {
           // col.addEventListener('focus', this.handleCellFocus.bind(this, col));
 
           // ON PASTE
-          col.addEventListener('paste', this.handleCellPaste.bind(this));
+          // col.addEventListener('paste', this.handleCellPaste.bind(this));
+          col.addEventListener('paste', e => {
+            const clipboardData = (e.clipboardData || window.clipboardData).getData('text');
+            this.handleCellPaste(clipboardData);
+          });
           col.setAttribute('data-click', true);
         }
       });
@@ -76816,8 +76906,23 @@ class ContentBuilder {
           this.util.checkEmpty(); // for multiple instances check
 
           if (this.sortableOnPage) this.sortableOnPage.destroy(); // enable drop as section (ContentBox)
-        },
 
+          if (this.controlPanel) {
+            // && document.body.classList.contains('controlpanel') (already opens)
+            this.controlpanel.getActive();
+            this.controlpanel.select('column');
+            setTimeout(() => {
+              // Hide element tool
+              this.elmTool.hide();
+            }, 600);
+          }
+
+          //Trigger Change event
+          this.opts.onChange();
+
+          //Trigger Render event
+          this.opts.onRender();
+        },
         onAdd: evt => {
           var itemEl = evt.item;
           if (itemEl.getAttribute('data-id')) {
@@ -77291,6 +77396,8 @@ class ContentBuilder {
           ok = true;
         } else if (targetAssetType === 'media' && (ext === 'mp4' || ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif' || ext === 'webm' || ext === 'webp')) {
           ok = true;
+        } else if (targetAssetType === 'all') {
+          ok = true;
         } else {
           if (targetAssetType === 'image') alert(out('Please select an image file.'));
           if (targetAssetType === 'video') alert(out('Please select an mp4 file.'));
@@ -77771,6 +77878,18 @@ class ContentBuilder {
   }
   addButton(pluginName, html, selector, exec) {
     if (!this.builderStuff) return;
+    if (this.controlPanel && this.controlpanel.controlPanel) {
+      const popMore = this.controlpanel.controlPanel.querySelector('.panel-pop.more');
+      const pluginArea = popMore.querySelector('div.plugins');
+      pluginArea.insertAdjacentHTML('beforeend', html);
+      const btn = popMore.querySelector(selector);
+      btn.addEventListener('click', e => {
+        exec(e);
+      });
+      const label = popMore.querySelector('.label-plugins');
+      label.style.display = ''; //show label
+    }
+
     const rteTool = this.builderStuff.querySelector('.is-rte-tool');
     const rteMoreOptions = this.builderStuff.querySelector('.rte-more-options');
     var bUseMore = false;
@@ -77998,16 +78117,16 @@ class ContentBuilder {
     htmlutil.view('full', area);
   }
   viewPreferences() {
-    this.preferences.view();
+    if (this.preferences) this.preferences.view();
   }
   viewConfig() {
     //backward
-    this.preferences.view();
+    if (this.preferences) this.preferences.view();
   }
   viewZoom() {
     this.rte.viewZoom();
   }
-  loadSnippets(snippetFile) {
+  loadSnippets(snippetFile, snippetOpen) {
     if (this.preview) return;
     if (this.opts.snippetList === '#divSnippetList') {
       let snippetPanel = document.querySelector(this.opts.snippetList);
@@ -78025,7 +78144,7 @@ class ContentBuilder {
         this.opts.snippetPath = window._snippets_path;
       }
       if (this.opts.snippetJSON.snippets.length > 0) {
-        renderSnippetPanel(this); // Render Snippet Panel
+        renderSnippetPanel(this, snippetOpen); // Render Snippet Panel
       }
     };
 
@@ -78203,9 +78322,6 @@ class ContentBuilder {
     // Font Family
     let iframeRte = this.rte.rteFontFamilyOptions.querySelector('iframe');
     let doc1 = iframeRte.contentWindow.document;
-    const fontModal = this.builderStuff.querySelector('.is-modal.pickfontfamily');
-    let iframePanel = fontModal.querySelector('iframe');
-    let doc2 = iframePanel.contentWindow.document;
 
     // Icons
     let iframeIcons = this.rte.rteIconOptions.querySelector('iframe');
@@ -78221,16 +78337,21 @@ class ContentBuilder {
     } else {
       this.util.refreshFontFamilyStyle1();
     }
-    if (doc2.body.innerHTML === '') {
-      doc2.open();
-      if (!this.opts.emailMode) {
-        doc2.write(util.getFontFamilyHTML(true));
+    const fontModal = this.builderStuff.querySelector('.is-modal.pickfontfamily');
+    if (fontModal) {
+      let iframePanel = fontModal.querySelector('iframe');
+      let doc2 = iframePanel.contentWindow.document;
+      if (doc2.body.innerHTML === '') {
+        doc2.open();
+        if (!this.opts.emailMode) {
+          doc2.write(util.getFontFamilyHTML(true));
+        } else {
+          doc2.write(util.getFontFamilyEmail(true));
+        }
+        doc2.close();
       } else {
-        doc2.write(util.getFontFamilyEmail(true));
+        this.util.refreshFontFamilyStyle2();
       }
-      doc2.close();
-    } else {
-      this.util.refreshFontFamilyStyle2();
     }
     if (doc3.body.innerHTML === '') {
       doc3.open();
@@ -78502,43 +78623,76 @@ class ContentBuilder {
     util.clearActiveCell();
     this.activeCol = col;
     let elm = e.target;
-    this.dom.addClass(col, 'cell-active');
-    let row = col.parentNode; //Since a col can be moved to another row, then re-get the active row
-    this.dom.addClass(row, 'row-active');
+    col.classList.add('cell-active');
+    let row = col.parentNode;
+    row.classList.add('row-active');
     const builders = this.doc.querySelectorAll(this.opts.container);
-    Array.prototype.forEach.call(builders, builder => {
-      this.dom.removeClass(builder, 'builder-active');
+    builders.forEach(builder => {
+      builder.classList.remove('builder-active');
     });
-    this.dom.addClass(row.parentNode, 'builder-active');
-    this.dom.addClass(this.doc.body, 'content-edit');
+    row.parentNode.classList.add('builder-active');
+    this.doc.body.classList.add('content-edit');
     if (row.childElementCount - 2 === 1) ; else {
-      this.dom.addClass(row, 'row-outline');
+      row.classList.add('row-outline');
     }
 
-    //this.getState();
-
     // Call onContentClick to indicate click on editable content (eg. for plugin usage)
-    // if (!col.hasAttribute('data-html')) {
     if (this.opts.onContentClick) this.opts.onContentClick(e);
-    // }
-
     this.element.click(col, e);
     this.colTool.click(col);
     this.elmTool.click(col, e);
-    this.rte.click(col, e);
+    if (!this.controlPanel) this.rte.click(col, e);else this.util.saveSelection(); // important (eg. for create/edit link)
+
+    /*
+    // TODO: move to grideditor.js
     // Grid Editor Status
     // On/off lock button
     const grideditor = document.querySelector('.grideditor.active');
-    if (grideditor) {
-      const btnCellLocking = grideditor.querySelector('.cell-locking');
-      if (col.hasAttribute('data-noedit')) {
-        this.dom.addClass(btnCellLocking, 'on');
-      } else {
-        this.dom.removeClass(btnCellLocking, 'on');
+    if(grideditor) {
+        const btnCellLocking = grideditor.querySelector('.cell-locking');
+        if(col.hasAttribute('data-noedit')) {
+            btnCellLocking.classList.add('on');
+        } else {
+            btnCellLocking.classList.remove('on');
+        }
+    }
+    */
+
+    // If column only has spacer, locked or unlocked, 
+    // the text should not be able to edit (cursor should not be able to be placed)
+    // So, make the column uneditable (text) if only has a spacer.
+    if (col.childElementCount === 1) {
+      let elm = col.children[0];
+      if (elm) if (this.dom.hasClass(elm, 'spacer')) {
+        col.contentEditable = false;
       }
     }
-    let link = this.dom.getParentElement(elm, 'a');
-    if (elm.tagName.toLowerCase() === 'a' || link) {
+
+    // Show Lock Indicator
+    this.colTool.showHideLockIndicator(col);
+    if (this.opts.enableDragResize) {
+      if (this.resize) {
+        // console.log(this.resize);
+        this.resize.destroy(); // destroy previous instance
+      }
+
+      // Enable resizable on click
+      if (!col.classList.contains('noresize')) {
+        // Disable on mobile
+        const viewportWidth = this.doc.body.clientWidth;
+        if (viewportWidth > 768) {
+          this.resize = new Resize(col, this);
+          this.resize.enable();
+        }
+      }
+    }
+    if (this.settings.onSelectionChange) this.settings.onSelectionChange(e);
+
+    // if(this.settings.onPageContentClick) this.settings.onPageContentClick(e);
+
+    // Lightbox
+    let link = elm.closest('a');
+    if (link) {
       if (col.hasAttribute('data-noedit') || col.hasAttribute('data-protected')) {
         // Link & Lightbox click allowed only on locked column
 
@@ -78606,25 +78760,6 @@ class ContentBuilder {
       // return false;
     }
 
-    // LATER: (builder inside builder)
-    // if (jQuery(e.target).parents('.is-builder').length>1) {
-    //     e.preventDefault();
-    //     e.stopImmediatePropagation();
-    // }
-
-    // If column only has spacer, locked or unlocked, 
-    // the text should not be able to edit (cursor should not be able to be placed)
-    // So, make the column uneditable (text) if only has a spacer.
-    if (col.childElementCount === 1) {
-      let elm = col.children[0];
-      if (elm) if (this.dom.hasClass(elm, 'spacer')) {
-        col.contentEditable = false;
-      }
-    }
-
-    // Show Lock Indicator
-    this.colTool.showHideLockIndicator(col);
-
     // Extra: Check if last row, make sure the Row Add Tool visible
     const tool = row.querySelector('.is-rowadd-tool');
     const tollAddButton = tool.querySelector('button');
@@ -78647,23 +78782,6 @@ class ContentBuilder {
         }
       }
     }
-    if (this.opts.enableDragResize) {
-      if (this.resize) {
-        // console.log(this.resize);
-        this.resize.destroy(); // destroy previous instance
-      }
-
-      // Enable resizable on click
-      if (!col.classList.contains('noresize')) {
-        // Disable on mobile
-        const viewportWidth = this.doc.body.clientWidth;
-        if (viewportWidth > 768) {
-          this.resize = new Resize(col, this);
-          this.resize.enable();
-        }
-      }
-    }
-    if (this.settings.onSelectionChange) this.settings.onSelectionChange(e);
   }
   handleCellKeypress(e) {
     if (e.ctrlKey || e.metaKey) {
@@ -78712,10 +78830,7 @@ class ContentBuilder {
     // });
     // this.autoclean=true;
 
-    if ((e.ctrlKey || e.metaKey) && e.which === 86) {
-      //CTRL-V
-      this.handleCellPaste();
-    }
+    if ((e.ctrlKey || e.metaKey) && e.which === 86) ;
     if (this.opts.elementSelection && !this.emailMode) {
       if ((e.ctrlKey || e.metaKey) && e.which === 65) {
         //CTRL-A
@@ -79171,7 +79286,7 @@ class ContentBuilder {
       this.opts.onChange();
     }, 2000);
   }
-  handleCellPaste() {
+  handleCellPaste(clipboardData) {
     this.uo.saveForUndo();
     const util = this.util;
     util.saveSelection(); //required. Without this, CTRL-A (select element) & CTRL-V won't replace the element, but will paste at the end of the element.
@@ -79230,22 +79345,26 @@ class ContentBuilder {
         }
         if (!bPasteObject) {
           if (this.opts.paste === 'text') {
+            /*
             let elms = contentword.querySelectorAll('p,h1,h2,h3,h4,h5,h6');
-            Array.prototype.forEach.call(elms, elm => {
-              elm.innerHTML = elm.innerHTML + ' '; //add space (&nbsp;)
+            Array.prototype.forEach.call(elms, (elm) => {
+                elm.innerHTML = elm.innerHTML + ' '; //add space (&nbsp;)
             });
-
-            // sPastedText = contentword.innerText;
+             // sPastedText = contentword.innerText;
             sPastedText = contentword.innerHTML;
-            sPastedText = sPastedText.replace(/(<([^>]+)>)/ig, '<br>');
+            sPastedText = sPastedText.replace(/(<([^>]+)>)/ig,'<br>');
             sPastedText = sPastedText.replace(/(<br\s*\/?>){3,}/gi, '<br>');
-            if (sPastedText.indexOf('<br>') === 0) {
-              sPastedText = sPastedText.substring(4);
+            if(sPastedText.indexOf('<br>')===0) {
+                sPastedText = sPastedText.substring(4);
             }
-            if (sPastedText.substring(sPastedText.length - 4) === '<br>') {
-              sPastedText = sPastedText.substring(0, sPastedText.length - 4);
+            if(sPastedText.substring(sPastedText.length-4)==='<br>'){
+                sPastedText = sPastedText.substring(0, sPastedText.length-4);
             }
             sPastedText = sPastedText.trim();
+            */
+
+            sPastedText = clipboardData;
+            // sPastedText = sPastedText.replace(/(?:\r\n|\r|\n)/g, '<br>');
           } else {
             sPastedText = contentword.innerHTML;
             if (this.opts.paste === 'html') {
@@ -79574,7 +79693,8 @@ class ContentBuilder {
             // </div>
             // `;
             itemEl.outerHTML = this.settings.sectionTemplate.replace('[%CONTENT%]', itemEl.outerHTML);
-            if (this.opts.onSectionAdd) this.opts.onSectionAdd();
+            this.activeCol = null;
+            if (this.opts.onBlockSectionAdd) this.opts.onBlockSectionAdd();
 
             // //Trigger Change event
             // this.opts.onChange();
@@ -79708,7 +79828,9 @@ class ContentBuilder {
             }
             // // After snippet has been added, re-apply behavior on builder areas
             // this.applyBehaviorOn(builder);
-            if (this.opts.onSectionAdd) this.opts.onSectionAdd();
+
+            this.activeCol = null;
+            if (this.opts.onBlockSectionAdd) this.opts.onBlockSectionAdd();
 
             //Trigger Change event
             this.opts.onChange();
@@ -79727,17 +79849,18 @@ class ContentBuilder {
     }
   }
   hideElementTools() {
-    let elmTool = document.querySelector('.is-element-tool');
-    let divImageTool = document.querySelector('#divImageTool');
-    let divImageResizer = document.querySelector('#divImageResizer');
-    if (divImageTool) if (divImageTool.style.display === 'flex') {
-      if (this.editor.moveable) this.editor.moveable.updateRect();
-      let controlBox = this.doc.querySelector('.moveable-control-box');
-      if (controlBox) controlBox.style.display = 'none';
-    }
+    let elmTool = this.doc.querySelector('.is-element-tool');
     if (elmTool) elmTool.style.display = '';
-    if (divImageTool) divImageTool.style.display = '';
-    if (divImageResizer) divImageResizer.style.display = '';
+    let linkTool = this.doc.querySelector('#divLinkTool');
+    if (linkTool) linkTool.style.display = '';
+    this.element.image.hideImageTool();
+    this.doc.querySelectorAll('.icon-active').forEach(elm => elm.classList.remove('icon-active'));
+    this.doc.querySelectorAll('.elm-inspected').forEach(elm => elm.classList.remove('elm-inspected'));
+    this.doc.querySelectorAll('.elm-active').forEach(elm => elm.classList.remove('elm-active'));
+    this.activeImage = null;
+    this.activeIcon = null;
+    this.inspectedElement = null;
+    this.activeElement = null;
   }
 }