@innovastudio/contentbuilder 1.5.7 → 1.5.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.7",
+  "version": "1.5.9",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.css

@@ -2075,20 +2075,6 @@ button:focus-visible {
   font-weight: 300;
   outline: none;
 }
-#_cbhtml .is-modal .pickcolor, #_cbhtml .is-modal .pickcolorclass, #_cbhtml .is-modal .imagesource, #_cbhtml .is-modal .imageadjust, #_cbhtml .is-modal .imageadjust2,
-#_cbhtml .is-modal .audioselect, #_cbhtml .is-modal .imageselect, #_cbhtml .is-modal .mediaselect, #_cbhtml .is-modal .videoselect, #_cbhtml .is-modal .mediasource,
-.is-ui .is-modal .pickcolor,
-.is-ui .is-modal .pickcolorclass,
-.is-ui .is-modal .imagesource,
-.is-ui .is-modal .imageadjust,
-.is-ui .is-modal .imageadjust2,
-.is-ui .is-modal .audioselect,
-.is-ui .is-modal .imageselect,
-.is-ui .is-modal .mediaselect,
-.is-ui .is-modal .videoselect,
-.is-ui .is-modal .mediasource {
-  z-index: 10005 !important;
-}
 #_cbhtml .is-modal a:focus,
 .is-ui .is-modal a:focus {
   outline: #3e93f7 2px solid;
@@ -2274,13 +2260,14 @@ button:focus-visible {
 .is-ui .is-modal div.is-modal-footer button {
   margin-left: 2px;
 }
-#_cbhtml .is-modal.fileselect, #_cbhtml .is-modal.mediaselect, #_cbhtml .is-modal.imageselect, #_cbhtml .is-modal.videoselect, #_cbhtml .is-modal.otherselect, #_cbhtml .is-modal.pickcolor, #_cbhtml .is-modal.pickcolorclass, #_cbhtml .is-modal.imagesource, #_cbhtml .is-modal.imageadjust, #_cbhtml .is-modal.imageadjust2, #_cbhtml .is-modal.audioselect, #_cbhtml .is-modal.mediasource,
+#_cbhtml .is-modal.fileselect, #_cbhtml .is-modal.mediaselect, #_cbhtml .is-modal.imageselect, #_cbhtml .is-modal.videoselect, #_cbhtml .is-modal.otherselect, #_cbhtml .is-modal.pickcolor, #_cbhtml .is-modal.pickcolormore, #_cbhtml .is-modal.pickcolorclass, #_cbhtml .is-modal.imagesource, #_cbhtml .is-modal.imageadjust, #_cbhtml .is-modal.imageadjust2, #_cbhtml .is-modal.audioselect, #_cbhtml .is-modal.mediasource,
 .is-ui .is-modal.fileselect,
 .is-ui .is-modal.mediaselect,
 .is-ui .is-modal.imageselect,
 .is-ui .is-modal.videoselect,
 .is-ui .is-modal.otherselect,
 .is-ui .is-modal.pickcolor,
+.is-ui .is-modal.pickcolormore,
 .is-ui .is-modal.pickcolorclass,
 .is-ui .is-modal.imagesource,
 .is-ui .is-modal.imageadjust,
@@ -6220,3 +6207,7 @@ div[data-html] {
   mix-blend-mode: screen;
   filter: invert(1);
 }
+
+i.bi, i.icon {
+  display: inline-flex;
+}

package/public/contentbuilder/contentbuilder.esm.js

@@ -1313,7 +1313,7 @@ const renderQuickAdd = builder => {
     elm = quickadd.querySelector('.add-list');
     dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      const html = `<ul style="list-style: initial;padding-left: 20px;">
+      const html = `<ul>
                 <li>Lorem Ipsum is simply dummy text</li>
                 <li>Lorem Ipsum is simply dummy text</li>
             </ul>`;
@@ -2365,13 +2365,27 @@ class Util {
       if (!elm) return;
       this.builder.uo.saveForUndo();
       let element = elm;
-      // while(!dom.hasClass(element.parentNode, 'cell-active')) {
-      //     element = element.parentNode;
-      // }
-      element.insertAdjacentHTML('afterend', html);
+      let newelement;
+      if (!element.nextElementSibling) {
+        // active element is div.display > p.
+        let activeCol = this.builder.activeCol;
+        let current;
+        const elms = dom.elementChildren(activeCol);
+        elms.forEach(child => {
+          if (child.contains(element)) {
+            current = child;
+          }
+        });
+        if (current) {
+          current.insertAdjacentHTML('afterend', html); // add new element after div.display
+          newelement = current.nextElementSibling;
+        }
+      } else {
+        element.insertAdjacentHTML('afterend', html);
+        newelement = element.nextElementSibling;
+      }
       let builderActive = this.builder.doc.querySelector('.builder-active');
       if (builderActive) this.builder.applyBehaviorOn(builderActive);
-      let newelement = element.nextElementSibling;
       if (newelement.tagName.toLowerCase() === 'img') {
         let checkLoad = setInterval(() => {
           if (newelement.complete) {
@@ -11460,97 +11474,86 @@ class HtmlUtil {
         col.style.cursor = '';
       });
     });
-    let elms = tmp.querySelectorAll('.sortable-chosen');
-    dom.removeClasses(elms, 'sortable-chosen');
-    elms = tmp.querySelectorAll('.sortable-ghost');
-    dom.removeClasses(elms, 'sortable-ghost');
-    elms = tmp.querySelectorAll('.elm-active');
-    dom.removeClasses(elms, 'elm-active');
-    elms = tmp.querySelectorAll('.icon-active');
-    dom.removeClasses(elms, 'icon-active');
-    elms = tmp.querySelectorAll('.elm-inspected');
-    dom.removeClasses(elms, 'elm-inspected');
-    elms = tmp.querySelectorAll('.cell-active');
-    dom.removeClasses(elms, 'cell-active');
-    elms = tmp.querySelectorAll('.row-active');
-    dom.removeClasses(elms, 'row-active');
-    elms = tmp.querySelectorAll('.row-outline');
-    dom.removeClasses(elms, 'row-outline');
-    elms = tmp.querySelectorAll('.is-builder');
-    dom.removeClasses(elms, 'is-builder');
-    elms = tmp.querySelectorAll('.row-outline');
-    dom.removeClasses(elms, 'row-outline');
-    elms = tmp.querySelectorAll('[data-click]');
-    dom.removeAttributes(elms, 'data-click');
-    elms = tmp.querySelectorAll('[contenteditable]');
-    dom.removeAttributes(elms, 'contenteditable');
-    elms = tmp.querySelectorAll('[draggridoutline]');
-    dom.removeAttributes(elms, 'draggridoutline');
-    elms = tmp.querySelectorAll('[between-blocks-left]');
-    dom.removeAttributes(elms, 'between-blocks-left');
-    elms = tmp.querySelectorAll('[between-blocks-center]');
-    dom.removeAttributes(elms, 'between-blocks-center');
-    elms = tmp.querySelectorAll('[hideelementhighlight]');
-    dom.removeAttributes(elms, 'hideelementhighlight');
-    elms = tmp.querySelectorAll('[data-module-active]');
-    dom.removeAttributes(elms, 'data-module-active');
-    elms = tmp.querySelectorAll('[draggable]');
-    dom.removeAttributes(elms, 'draggable');
-    elms = tmp.querySelectorAll('[data-animated]');
-    dom.removeAttributes(elms, 'data-animated');
-    elms = tmp.querySelectorAll('[data-saveforundo]');
-    dom.removeAttributes(elms, 'data-saveforundo');
-    elms = tmp.querySelectorAll('[hidesnippetaddtool]');
-    dom.removeAttributes(elms, 'hidesnippetaddtool');
-    elms = tmp.querySelectorAll('[gray]');
-    dom.removeAttributes(elms, 'gray');
-    elms = tmp.querySelectorAll('[rowoutline]');
-    dom.removeAttributes(elms, 'rowoutline');
-    elms = tmp.querySelectorAll('[hidecolumntool]');
-    dom.removeAttributes(elms, 'hidecolumntool');
-    elms = tmp.querySelectorAll('[grayoutline]');
-    dom.removeAttributes(elms, 'grayoutline');
-    elms = tmp.querySelectorAll('[hideoutline]');
-    dom.removeAttributes(elms, 'hideoutline');
-    elms = tmp.querySelectorAll('[leftrowtool]');
-    dom.removeAttributes(elms, 'leftrowtool');
-    elms = tmp.querySelectorAll('[minimal]');
-    dom.removeAttributes(elms, 'minimal');
-    elms = tmp.querySelectorAll('[clean]');
-    dom.removeAttributes(elms, 'clean');
-    elms = tmp.querySelectorAll('[grideditor]');
-    dom.removeAttributes(elms, 'grideditor');
-    elms = tmp.querySelectorAll('[gridoutline]');
-    dom.removeAttributes(elms, 'gridoutline');
-    dom.removeElements(tmp.querySelectorAll('.is-row-tool'));
-    dom.removeElements(tmp.querySelectorAll('.is-col-tool'));
-    dom.removeElements(tmp.querySelectorAll('.is-rowadd-tool'));
-    dom.removeElements(tmp.querySelectorAll('.ovl'));
-    dom.removeElements(tmp.querySelectorAll('.row-add-initial'));
+    let elms;
+    elms = tmp.querySelectorAll('.sortable-chosen, .sortable-ghost, .elm-active, .icon-active, .elm-inspected, .cell-active, .row-active, .row-outline, .is-builder');
+    elms.forEach(elm => {
+      elm.classList.remove('sortable-chosen');
+      elm.classList.remove('sortable-ghost');
+      elm.classList.remove('elm-active');
+      elm.classList.remove('icon-active');
+      elm.classList.remove('elm-inspected');
+      elm.classList.remove('cell-active');
+      elm.classList.remove('row-active');
+      elm.classList.remove('row-outline');
+      elm.classList.remove('is-builder');
+    });
+    elms = tmp.querySelectorAll('[data-click], [contenteditable], [draggridoutline], [between-blocks-left], [between-blocks-center], [hideelementhighlight], [data-module-active], [draggable]');
+    elms.forEach(elm => {
+      elm.removeAttribute('data-click');
+      elm.removeAttribute('contenteditable');
+      elm.removeAttribute('draggridoutline');
+      elm.removeAttribute('between-blocks-left');
+      elm.removeAttribute('between-blocks-center');
+      elm.removeAttribute('hideelementhighlight');
+      elm.removeAttribute('data-module-active');
+      elm.removeAttribute('draggable');
+    });
+    elms = tmp.querySelectorAll('[data-animated], [data-saveforundo], [hidesnippetaddtool], [gray], [rowoutline], [hidecolumntool], [grayoutline], [hideoutline]');
+    elms.forEach(elm => {
+      elm.removeAttribute('data-animated');
+      elm.removeAttribute('data-saveforundo');
+      elm.removeAttribute('hidesnippetaddtool');
+      elm.removeAttribute('gray');
+      elm.removeAttribute('rowoutline');
+      elm.removeAttribute('hidecolumntool');
+      elm.removeAttribute('grayoutline');
+      elm.removeAttribute('hideoutline');
+    });
+    elms = tmp.querySelectorAll('[leftrowtool], [minimal], [clean], [grideditor], [gridoutline]');
+    elms.forEach(elm => {
+      elm.removeAttribute('leftrowtool');
+      elm.removeAttribute('minimal');
+      elm.removeAttribute('clean');
+      elm.removeAttribute('grideditor');
+      elm.removeAttribute('gridoutline');
+    });
+    elms = tmp.querySelectorAll('.is-row-tool,.is-col-tool,.is-rowadd-tool');
+    elms.forEach(elm => {
+      if (elm.previousSibling && elm.previousSibling.nodeType === Node.TEXT_NODE) {
+        elm.previousSibling.remove();
+      }
+      if (elm.nextSibling && elm.nextSibling.nodeType === Node.TEXT_NODE) {
+        elm.nextSibling.remove();
+      }
+      elm.remove();
+    });
+    elms = tmp.querySelectorAll('.ovl,.row-add-initial');
+    elms.forEach(elm => {
+      elm.remove();
+    });
 
     //Extra cleaning
     if (this.builder.cleanAOS) {
-      elms = tmp.querySelectorAll('.aos-init');
-      dom.removeClasses(elms, 'aos-init');
-      elms = tmp.querySelectorAll('.aos-animate');
-      dom.removeClasses(elms, 'aos-animate');
-    }
-    elms = tmp.querySelectorAll('.skrollable');
-    dom.removeClasses(elms, 'skrollable');
-    elms = tmp.querySelectorAll('.skrollable-after');
-    dom.removeClasses(elms, 'skrollable-after');
-    elms = tmp.querySelectorAll('.skrollable-before');
-    dom.removeClasses(elms, 'skrollable-before');
-    elms = tmp.querySelectorAll('.skrollable-between');
-    dom.removeClasses(elms, 'skrollable-between');
-    elms = tmp.querySelectorAll('.is-inview');
-    dom.removeClasses(elms, 'is-inview');
+      elms = tmp.querySelectorAll('.aos-init, .aos-animate');
+      elms.forEach(elm => {
+        elm.classList.remove('aos-init');
+        elm.classList.remove('aos-animate');
+      });
+    }
+    elms = tmp.querySelectorAll('.skrollable, .skrollable-after, .skrollable-before, .skrollable-between, .is-inview');
+    elms.forEach(elm => {
+      elm.classList.remove('skrollable');
+      elm.classList.remove('skrollable-after');
+      elm.classList.remove('skrollable-before');
+      elm.classList.remove('skrollable-between');
+      elm.classList.remove('is-inview');
+    });
     let emptyclasses = tmp.querySelectorAll('[class=""]');
-    Array.prototype.forEach.call(emptyclasses, emptyclass => {
+    emptyclasses.forEach(emptyclass => {
       emptyclass.removeAttribute('class');
     });
     let unusedOverlays = tmp.querySelectorAll('.is-row-overlay');
-    Array.prototype.forEach.call(unusedOverlays, unusedOverlay => {
+    unusedOverlays.forEach(unusedOverlay => {
       if (!unusedOverlay.hasAttribute('style')) unusedOverlay.parentNode.removeChild(unusedOverlay);
     });
     dom.removeEmptyStyle(tmp);
@@ -11559,7 +11562,7 @@ class HtmlUtil {
 
     //Backward compatible: cleanup button <span contenteditable="false"><a contenteditable="true">button</a></span>
     let links = tmp.querySelectorAll('a');
-    Array.prototype.forEach.call(links, link => {
+    links.forEach(link => {
       if (link.style.display === 'inline-block') {
         if (link.parentNode.childElementCount === 1 && link.parentNode.tagName.toLowerCase() === 'span') {
           link.parentNode.outerHTML = link.parentNode.innerHTML;
@@ -11577,85 +11580,44 @@ class HtmlUtil {
       //ContentBox
 
       // Remove dummy DIV after last section
-      let elms = tmp.querySelectorAll('.is-dummy');
-      dom.removeElements(elms);
-      elms = tmp.querySelectorAll('[data-scroll]');
-      dom.removeAttributes(elms, 'data-scroll');
-      elms = tmp.querySelectorAll('[data-scroll-once]');
-      dom.removeAttributes(elms, 'data-scroll-once');
+      elms = tmp.querySelectorAll('.is-dummy');
+      elms.forEach(elm => {
+        elm.remove();
+      });
+      elms = tmp.querySelectorAll('[data-scroll], [data-scroll-once]');
+      elms.forEach(elm => {
+        elm.removeAttribute('data-scroll');
+        elm.removeAttribute('data-scroll-once');
+      });
       if (this.builder.shortenOutput) {
-        elms = tmp.querySelectorAll('[data-noedit]');
-        dom.removeAttributes(elms, 'data-noedit');
-        elms = tmp.querySelectorAll('[data-module]');
-        dom.removeAttributes(elms, 'data-module');
-        elms = tmp.querySelectorAll('[data-module-desc]');
-        dom.removeAttributes(elms, 'data-module-desc');
-        elms = tmp.querySelectorAll('[data-dialog-width]');
-        dom.removeAttributes(elms, 'data-dialog-width');
-        elms = tmp.querySelectorAll('[data-dialog-height]');
-        dom.removeAttributes(elms, 'data-dialog-height');
-        elms = tmp.querySelectorAll('[data-html]');
-        dom.removeAttributes(elms, 'data-html');
-        elms = tmp.querySelectorAll('[data-settings]');
-        dom.removeAttributes(elms, 'data-settings');
-        elms = tmp.querySelectorAll('[data-html-1]');
-        dom.removeAttributes(elms, 'data-html-1');
-        elms = tmp.querySelectorAll('[data-html-2]');
-        dom.removeAttributes(elms, 'data-html-2');
-        elms = tmp.querySelectorAll('[data-html-3]');
-        dom.removeAttributes(elms, 'data-html-3');
-        elms = tmp.querySelectorAll('[data-html-4]');
-        dom.removeAttributes(elms, 'data-html-4');
-        elms = tmp.querySelectorAll('[data-html-5]');
-        dom.removeAttributes(elms, 'data-html-5');
-        elms = tmp.querySelectorAll('[data-html-6]');
-        dom.removeAttributes(elms, 'data-html-6');
-        elms = tmp.querySelectorAll('[data-html-7]');
-        dom.removeAttributes(elms, 'data-html-7');
-        elms = tmp.querySelectorAll('[data-html-8]');
-        dom.removeAttributes(elms, 'data-html-8');
-        elms = tmp.querySelectorAll('[data-html-9]');
-        dom.removeAttributes(elms, 'data-html-9');
-        elms = tmp.querySelectorAll('[data-html-10]');
-        dom.removeAttributes(elms, 'data-html-10');
-        elms = tmp.querySelectorAll('[data-html-12]');
-        dom.removeAttributes(elms, 'data-html-12');
-        elms = tmp.querySelectorAll('[data-html-13]');
-        dom.removeAttributes(elms, 'data-html-13');
-        elms = tmp.querySelectorAll('[data-html-14]');
-        dom.removeAttributes(elms, 'data-html-14');
-        elms = tmp.querySelectorAll('[data-html-15]');
-        dom.removeAttributes(elms, 'data-html-15');
-        elms = tmp.querySelectorAll('[data-html-16]');
-        dom.removeAttributes(elms, 'data-html-16');
-        elms = tmp.querySelectorAll('[data-html-17]');
-        dom.removeAttributes(elms, 'data-html-17');
-        elms = tmp.querySelectorAll('[data-html-18]');
-        dom.removeAttributes(elms, 'data-html-18');
-        elms = tmp.querySelectorAll('[data-html-19]');
-        dom.removeAttributes(elms, 'data-html-19');
-        elms = tmp.querySelectorAll('[data-html-20]');
-        dom.removeAttributes(elms, 'data-html-20');
-        elms = tmp.querySelectorAll('[data-html-21]');
-        dom.removeAttributes(elms, 'data-html-21');
-        elms = tmp.querySelectorAll('[data-html-21]');
-        dom.removeAttributes(elms, 'data-html-21');
-        elms = tmp.querySelectorAll('[data-html-22]');
-        dom.removeAttributes(elms, 'data-html-22');
-        elms = tmp.querySelectorAll('[data-html-23]');
-        dom.removeAttributes(elms, 'data-html-23');
-        elms = tmp.querySelectorAll('[data-html-24]');
-        dom.removeAttributes(elms, 'data-html-24');
-        elms = tmp.querySelectorAll('[data-html-25]');
-        dom.removeAttributes(elms, 'data-html-25');
+        elms = tmp.querySelectorAll('[data-noedit], [data-module], [data-module-desc], [data-dialog-width], [data-dialog-height], [data-html], [data-settings]');
+        elms.forEach(elm => {
+          elm.removeAttribute('data-noedit');
+          elm.removeAttribute('data-module');
+          elm.removeAttribute('data-module-desc');
+          elm.removeAttribute('data-dialog-width');
+          elm.removeAttribute('data-dialog-height');
+          elm.removeAttribute('data-html');
+          elm.removeAttribute('data-settings');
+        });
+        elms = tmp.querySelectorAll('[data-html-1], [data-html-2], [data-html-3], [data-html-4], [data-html-5], [data-html-6], [data-html-7], [data-html-8], [data-html-9], [data-html-10]');
+        elms.forEach(elm => {
+          elm.removeAttribute('data-html-1');
+          elm.removeAttribute('data-html-2');
+          elm.removeAttribute('data-html-3');
+          elm.removeAttribute('data-html-4');
+          elm.removeAttribute('data-html-5');
+          elm.removeAttribute('data-html-6');
+          elm.removeAttribute('data-html-7');
+          elm.removeAttribute('data-html-8');
+          elm.removeAttribute('data-html-9');
+          elm.removeAttribute('data-html-10');
+        });
       }
 
       // cleaning
 
       elms = tmp.querySelectorAll('[data-bottom-top],[data-center],[data-center-bottom],[data-100-top],[data-50-top],[data-top],[data-top-bottom],[data-center-top],[data--300-bottom],[data--150-bottom],[data--50-bottom],[data-bottom],[data-100-bottom],[data-150-bottom],[data-400-bottom],' + '[data--400-bottom],[data--200-bottom],[data--100-bottom],[data-50-bottom],[data-200-bottom],[data-300-bottom],' + '[data-in],[data-in-150],[data-in-300],' + '[data-cen--150],[data-cen],[data-cen-150],[data-out--300],[data-out--150],[data-out]' + '[data-t],[data-t-100],[data-t-200],[data-t-300],[data-t-400],' + '[data-t-500],[data-t-600],[data-t-700],[data-t-800],[data-t-900],[data-t-1000],' + '[data-t-1100],[data-t-1200],[data-t-1300],[data-t-1400],[data-t-1500],[data-t-1600],' + '[data-t-1700],[data-t-1800],[data-t-1900],[data-t-2000],[data-t-2100],[data-t-2200],' + '[data-t-2300],[data-t-2400],[data-t-2500],[data-t-2600],[data-t-2700],[data-t-2800]');
-      // elms = tmp.querySelectorAll('[data-bottom-top],[data-center],[data-center-bottom],[data-100-top],[data-50-top],[data-top],[data-top-bottom],[data-center-top],[data--300-bottom],[data--150-bottom],[data--50-bottom],[data-bottom],[data-100-bottom],[data-150-bottom],[data-400-bottom],' +
-      //     '[data--400-bottom],[data--200-bottom],[data--100-bottom],[data-50-bottom],[data-200-bottom],[data-300-bottom],' +
-      //     '[data-in],[data-in-150],[data-in-300],[data-cen--150],[data-cen],[data-cen-150],[data-out--300],[data-out--150],[data-out]');
       Array.prototype.forEach.call(elms, elm => {
         elm.style.transition = '';
         elm.style.transform = '';
@@ -11691,34 +11653,24 @@ class HtmlUtil {
       });
 
       //Cleanup utils
-      elms = tmp.querySelectorAll('.is-appeared');
-      Array.prototype.forEach.call(elms, elm => {
-        dom.removeClass(elm, 'is-appeared');
-      });
-      elms = tmp.querySelectorAll('.box-active');
-      Array.prototype.forEach.call(elms, elm => {
-        dom.removeClass(elm, 'box-active');
-      });
-      elms = tmp.querySelectorAll('.section-active');
-      Array.prototype.forEach.call(elms, elm => {
-        dom.removeClass(elm, 'section-active');
-      });
-      elms = tmp.querySelectorAll('.section-select');
-      Array.prototype.forEach.call(elms, elm => {
-        dom.removeClass(elm, 'section-select');
+      elms = tmp.querySelectorAll('.is-appeared, .box-active, .section-active, .section-select, .box-select');
+      elms.forEach(elm => {
+        elm.classList.remove('is-appeared');
+        elm.classList.remove('box-active');
+        elm.classList.remove('section-active');
+        elm.classList.remove('section-select');
+        elm.classList.remove('box-select');
       });
-      elms = tmp.querySelectorAll('.box-select');
-      Array.prototype.forEach.call(elms, elm => {
-        dom.removeClass(elm, 'box-select');
+      elms = tmp.querySelectorAll('.is-section-tool, .is-box-tool, .is-box-info, .is-section-info');
+      elms.forEach(elm => {
+        if (elm.previousSibling && elm.previousSibling.nodeType === Node.TEXT_NODE) {
+          elm.previousSibling.remove();
+        }
+        if (elm.nextSibling && elm.nextSibling.nodeType === Node.TEXT_NODE) {
+          elm.nextSibling.remove();
+        }
+        elm.remove();
       });
-      elms = tmp.querySelectorAll('.is-section-tool');
-      dom.removeElements(elms);
-      elms = tmp.querySelectorAll('.is-box-tool');
-      dom.removeElements(elms);
-      elms = tmp.querySelectorAll('.is-box-info');
-      dom.removeElements(elms);
-      elms = tmp.querySelectorAll('.is-section-info');
-      dom.removeElements(elms);
 
       // freeform
       elms = tmp.querySelectorAll('.is-block .handle, .is-block .rotate-handle');
@@ -11735,8 +11687,6 @@ class HtmlUtil {
         elm.removeAttribute('data-prev');
       });
       tmp.querySelectorAll('.is-block.clone').forEach(elm => elm.parentNode.removeChild(elm));
-      // tmp.querySelectorAll('.is-block.cloned').forEach(elm=>elm.classList.remove('cloned'));
-
       var html_content = '';
       var html_footer = '';
       var html_others = '';
@@ -11790,70 +11740,29 @@ class HtmlUtil {
         emptystyle.removeAttribute('style');
       });
       if (this.builder.shortenOutput) {
-        elms = tmp.querySelectorAll('[data-noedit]');
-        dom.removeAttributes(elms, 'data-noedit');
-        elms = tmp.querySelectorAll('[data-module]');
-        dom.removeAttributes(elms, 'data-module');
-        elms = tmp.querySelectorAll('[data-module-desc]');
-        dom.removeAttributes(elms, 'data-module-desc');
-        elms = tmp.querySelectorAll('[data-dialog-width]');
-        dom.removeAttributes(elms, 'data-dialog-width');
-        elms = tmp.querySelectorAll('[data-dialog-height]');
-        dom.removeAttributes(elms, 'data-dialog-height');
-        elms = tmp.querySelectorAll('[data-html]');
-        dom.removeAttributes(elms, 'data-html');
-        elms = tmp.querySelectorAll('[data-settings]');
-        dom.removeAttributes(elms, 'data-settings');
-        elms = tmp.querySelectorAll('[data-html-1]');
-        dom.removeAttributes(elms, 'data-html-1');
-        elms = tmp.querySelectorAll('[data-html-2]');
-        dom.removeAttributes(elms, 'data-html-2');
-        elms = tmp.querySelectorAll('[data-html-3]');
-        dom.removeAttributes(elms, 'data-html-3');
-        elms = tmp.querySelectorAll('[data-html-4]');
-        dom.removeAttributes(elms, 'data-html-4');
-        elms = tmp.querySelectorAll('[data-html-5]');
-        dom.removeAttributes(elms, 'data-html-5');
-        elms = tmp.querySelectorAll('[data-html-6]');
-        dom.removeAttributes(elms, 'data-html-6');
-        elms = tmp.querySelectorAll('[data-html-7]');
-        dom.removeAttributes(elms, 'data-html-7');
-        elms = tmp.querySelectorAll('[data-html-8]');
-        dom.removeAttributes(elms, 'data-html-8');
-        elms = tmp.querySelectorAll('[data-html-9]');
-        dom.removeAttributes(elms, 'data-html-9');
-        elms = tmp.querySelectorAll('[data-html-10]');
-        dom.removeAttributes(elms, 'data-html-10');
-        elms = tmp.querySelectorAll('[data-html-12]');
-        dom.removeAttributes(elms, 'data-html-12');
-        elms = tmp.querySelectorAll('[data-html-13]');
-        dom.removeAttributes(elms, 'data-html-13');
-        elms = tmp.querySelectorAll('[data-html-14]');
-        dom.removeAttributes(elms, 'data-html-14');
-        elms = tmp.querySelectorAll('[data-html-15]');
-        dom.removeAttributes(elms, 'data-html-15');
-        elms = tmp.querySelectorAll('[data-html-16]');
-        dom.removeAttributes(elms, 'data-html-16');
-        elms = tmp.querySelectorAll('[data-html-17]');
-        dom.removeAttributes(elms, 'data-html-17');
-        elms = tmp.querySelectorAll('[data-html-18]');
-        dom.removeAttributes(elms, 'data-html-18');
-        elms = tmp.querySelectorAll('[data-html-19]');
-        dom.removeAttributes(elms, 'data-html-19');
-        elms = tmp.querySelectorAll('[data-html-20]');
-        dom.removeAttributes(elms, 'data-html-20');
-        elms = tmp.querySelectorAll('[data-html-21]');
-        dom.removeAttributes(elms, 'data-html-21');
-        elms = tmp.querySelectorAll('[data-html-21]');
-        dom.removeAttributes(elms, 'data-html-21');
-        elms = tmp.querySelectorAll('[data-html-22]');
-        dom.removeAttributes(elms, 'data-html-22');
-        elms = tmp.querySelectorAll('[data-html-23]');
-        dom.removeAttributes(elms, 'data-html-23');
-        elms = tmp.querySelectorAll('[data-html-24]');
-        dom.removeAttributes(elms, 'data-html-24');
-        elms = tmp.querySelectorAll('[data-html-25]');
-        dom.removeAttributes(elms, 'data-html-25');
+        elms = tmp.querySelectorAll('[data-noedit], [data-module], [data-module-desc], [data-dialog-width], [data-dialog-height], [data-html], [data-settings]');
+        elms.forEach(elm => {
+          elm.removeAttribute('data-noedit');
+          elm.removeAttribute('data-module');
+          elm.removeAttribute('data-module-desc');
+          elm.removeAttribute('data-dialog-width');
+          elm.removeAttribute('data-dialog-height');
+          elm.removeAttribute('data-html');
+          elm.removeAttribute('data-settings');
+        });
+        elms = tmp.querySelectorAll('[data-html-1], [data-html-2], [data-html-3], [data-html-4], [data-html-5], [data-html-6], [data-html-7], [data-html-8], [data-html-9], [data-html-10]');
+        elms.forEach(elm => {
+          elm.removeAttribute('data-html-1');
+          elm.removeAttribute('data-html-2');
+          elm.removeAttribute('data-html-3');
+          elm.removeAttribute('data-html-4');
+          elm.removeAttribute('data-html-5');
+          elm.removeAttribute('data-html-6');
+          elm.removeAttribute('data-html-7');
+          elm.removeAttribute('data-html-8');
+          elm.removeAttribute('data-html-9');
+          elm.removeAttribute('data-html-10');
+        });
       }
 
       // freeform
@@ -45220,6 +45129,8 @@ class Image$1 {
         try {
           img.setAttribute('data-filename', input.files[0].name); //needed for saveimage.js | 
 
+          // img.crossOrigin = 'anonymous';
+
           this.processImage(input.files[0], img, () => {
             imageProgress.style.display = 'none';
             elm = imageTool.querySelector('#fileEmbedImage');
@@ -61672,7 +61583,15 @@ class ElementTool {
               }
           }
           */
-          elm.parentNode.removeChild(elm);
+
+          // elm.parentNode.removeChild(elm);
+          let elmParent = elm.parentNode;
+          elm.remove();
+          let childs = dom.elementChildren(elmParent);
+          if (!elmParent.classList.contains('cell-active') && childs.length === 0) {
+            elmParent.remove(); // remove empty div.display
+          }
+
           this.elementTool.style.display = 'none';
           let cell = this.builder.activeCol;
           if (cell) {
@@ -61991,7 +61910,7 @@ class ElementTool {
     if ((customcode || noedit || _protected) && !subblock) ; else {
       const tagName = elm.tagName.toLowerCase();
       // LATER: label, code, figcaption ?
-      if (tagName === 'h1' || tagName === 'h2' || tagName === 'h3' || tagName === 'h4' || tagName === 'h5' || tagName === 'h6' || tagName === 'p' || tagName === 'pre' || tagName === 'blockquote' || tagName === 'li' || tagName === 'img' || tagName === 'iframe') {
+      if (!elm.classList.contains('cell-active') && (tagName === 'h1' || tagName === 'h2' || tagName === 'h3' || tagName === 'h4' || tagName === 'h5' || tagName === 'h6' || tagName === 'p' || tagName === 'div' || tagName === 'pre' || tagName === 'blockquote' || tagName === 'li' || tagName === 'img' || tagName === 'iframe')) {
         activeElement = elm; //set active element
 
         if (tagName === 'img') {
@@ -71224,7 +71143,7 @@ class Rte {
   addIcon(classname) {
     const dom = this.dom;
     this.util.restoreSelection();
-    if (this.builder.activeIcon) {
+    if (this.builder.activeIcon && this.builder.doc.contains(this.builder.activeIcon)) {
       this.builder.uo.saveForUndo();
 
       /*
@@ -71256,6 +71175,12 @@ class Rte {
       this.builder.uo.saveForUndo();
       this.util.pasteHtmlAtCaret('<i class="' + classname + ' icon-active"></i>', true);
       this.builder.activeIcon = this.builder.doc.querySelector('.icon-active');
+
+      // this.util.pasteHtmlAtCaret('<i class="icon-active"></i>', true); 
+      // const newIcon = this.builder.doc.querySelector('.icon-active');
+      // newIcon.className = classname + ' icon-active';
+      // this.builder.activeIcon = newIcon;
+
       dom.selectElementContents(this.builder.activeIcon);
       this.util.saveSelection();
     }
@@ -89389,6 +89314,10 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       if (this.activeImage) {
         this.util.hideControls(); //deleting an image should also clear the visible image tool (and resizer).
       }
+
+      col.querySelectorAll('.is-social').forEach(elm => {
+        elm.removeAttribute('contentEditable'); // Return back the div.is-social (See: Prevent div.is-social gets deleted)
+      });
     }
 
     this.oriLen = col.textContent.length; // get character length
@@ -89712,6 +89641,12 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     }
   }
   handleCellKeyup(col, e) {
+    if (e.which === 46 || e.which === 8) {
+      col.querySelectorAll('.is-social').forEach(elm => {
+        elm.contentEditable = false; // Prevent div.is-social gets deleted while deleting its next element
+      });
+    }
+
     if (this.dom.textSelection()) {
       if (e.keyCode === '38') {
         // Up arrow