@innovastudio/contentbuilder 1.3.31 → 1.3.33

package/package.json

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

package/public/contentbuilder/contentbuilder.css

@@ -3091,6 +3091,20 @@ button:focus-visible {
   z-index: 10003;
   outline: none;
 }
+#_cbhtml .is-side button,
+.is-ui .is-side button {
+  color: #000;
+  background: #fff;
+  box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);
+}
+#_cbhtml .is-side button:hover,
+.is-ui .is-side button:hover {
+  background: #fff;
+}
+#_cbhtml .is-side button.on,
+.is-ui .is-side button.on {
+  background: #f2f2f2;
+}
 #_cbhtml .is-side.active,
 .is-ui .is-side.active {
   right: 0;
@@ -3250,6 +3264,13 @@ button:focus-visible {
   outline-offset: 0;
   box-shadow: none;
 }
+#_cbhtml .find-part .monaco-inputbox textarea,
+#_cbhtml .replace-part .monaco-inputbox textarea,
+.is-ui .find-part .monaco-inputbox textarea,
+.is-ui .replace-part .monaco-inputbox textarea {
+  padding: 0 !important;
+  line-height: 1.4 !important;
+}
 #_cbhtml select,
 .is-ui select {
   font-size: 13px;
@@ -4442,6 +4463,7 @@ button:focus-visible {
 
 .row-active .is-col-tool {
   display: flex;
+  width: auto;
 }
 
 .is-builder[rowoutline] .row-active .is-col-tool {
@@ -4610,11 +4632,10 @@ button:focus-visible {
   display: none;
   position: absolute;
   bottom: -1px;
-  left: -20px;
-  width: calc(100% + 40px);
+  left: 0px;
+  width: 100%;
   height: 1px;
   border: none;
-  border-bottom: 1px solid #ffb784;
   z-index: 1;
   background: transparent;
   transition: none;

package/public/contentbuilder/contentbuilder.esm.js

@@ -4543,7 +4543,7 @@ class Util {
 
     const cellCount = row.childElementCount - num;
     const rowClass = this.builder.opts.row;
-    const colClass = this.builder.opts.cols;
+    let colClass = this.builder.opts.cols;
     const colEqual = this.builder.opts.colequal;
 
     if (colEqual.length > 0) {
@@ -4584,7 +4584,21 @@ class Util {
       let n = 0;
       const cols = dom.elementChildren(row);
       cols.forEach(col => {
-        if (dom.hasClass(col, 'is-row-tool') || dom.hasClass(col, 'is-col-tool') || dom.hasClass(col, 'is-rowadd-tool') || dom.hasClass(col, 'is-row-overlay')) return;
+        if (dom.hasClass(col, 'is-row-tool') || dom.hasClass(col, 'is-col-tool') || dom.hasClass(col, 'is-rowadd-tool') || dom.hasClass(col, 'is-row-overlay')) return; // Bootstrap stuff
+
+        col.classList.forEach(item => {
+          if (item.indexOf('col-md-') !== -1) ; else if (item.indexOf('col-sm-') !== -1) {
+            colClass = ['col-sm-1', 'col-sm-2', 'col-sm-3', 'col-sm-4', 'col-sm-5', 'col-sm-6', 'col-sm-7', 'col-sm-8', 'col-sm-9', 'col-sm-10', 'col-sm-11', 'col-sm-12'];
+          } else if (item.indexOf('col-xs-') !== -1) {
+            colClass = ['col-xs-1', 'col-xs-2', 'col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7', 'col-xs-8', 'col-xs-9', 'col-xs-10', 'col-xs-11', 'col-xs-12'];
+          } else if (item.indexOf('col-lg-') !== -1) {
+            colClass = ['col-lg-1', 'col-lg-2', 'col-lg-3', 'col-lg-4', 'col-lg-5', 'col-lg-6', 'col-lg-7', 'col-lg-8', 'col-lg-9', 'col-lg-10', 'col-lg-11', 'col-lg-12'];
+          } else if (item.indexOf('col-xl-') !== -1) {
+            colClass = ['col-xl-1', 'col-xl-2', 'col-xl-3', 'col-xl-4', 'col-xl-5', 'col-xl-6', 'col-xl-7', 'col-xl-8', 'col-xl-9', 'col-xl-10', 'col-xl-11', 'col-xl-12'];
+          } else if (item.indexOf('col-xxl-') !== -1) {
+            colClass = ['col-xxl-1', 'col-xxl-2', 'col-xxl-3', 'col-xxl-4', 'col-xxl-5', 'col-xxl-6', 'col-xxl-7', 'col-xxl-8', 'col-xxl-9', 'col-xxl-10', 'col-xxl-11', 'col-xxl-12'];
+          }
+        });
         n++;
 
         for (var i = 0; i <= colClass.length - 1; i++) {
@@ -4594,7 +4608,10 @@ class Util {
         if (cellCount === 1) dom.addClass(col, colClass[11]);
         if (cellCount === 2) dom.addClass(col, colClass[5]);
         if (cellCount === 3) dom.addClass(col, colClass[3]);
-        if (cellCount === 4) dom.addClass(col, colClass[2]);
+
+        if (cellCount === 4) {
+          dom.addClass(col, colClass[2]);
+        }
 
         if (cellCount === 5) {
           // 2, 2, 2, 2, 4
@@ -14950,59 +14967,7 @@ class HtmlUtil {
       });
     }
 
-    if (this.builder.cleanHtmlFormatting) {
-      // this cleanHtmlFormatting flag only use for output, not during editing 
-      if (this.builder.useCssClasses) {
-        // Clean all uneeded normal classes
-        let elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.fontWeight.defaultNormal}`); // Array.prototype.forEach.call(elmNormals, (elm) => {
-        //     let decor = false;
-        //     if(elm.closest(`.${this.builder.cssClasses.fontWeight.defaultBold}`)) {
-        //         decor = true;
-        //     } 
-        //     if(!decor) {
-        //         dom.removeClass(elm, this.builder.cssClasses.fontWeight.defaultNormal);
-        //     }
-        // });
-        // elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.fontStyle.normal}`);
-        // Array.prototype.forEach.call(elmNormals, (elm) => {
-        //     let decor = false;
-        //     if(elm.closest(`.${this.builder.cssClasses.fontStyle.italic}`)) {
-        //         decor = true;
-        //     } 
-        //     if(!decor) {
-        //         dom.removeClass(elm, this.builder.cssClasses.fontStyle.normal);
-        //     }
-        // });
-        // elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.textDecoration.normal}`);
-        // Array.prototype.forEach.call(elmNormals, (elm) => {
-        //     let decor = false;
-        //     if(elm.closest('a')) return;
-        //     if(elm.closest(`.${this.builder.cssClasses.textDecoration.underline},.${this.builder.cssClasses.textDecoration.linethrough}`)) {
-        //         decor = true;
-        //     } 
-        //     if(!decor) {
-        //         dom.removeClass(elm, this.builder.cssClasses.textDecoration.normal);
-        //     }
-        // });
-        // elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.textTransform.normal}`);
-        // Array.prototype.forEach.call(elmNormals, (elm) => {
-        //     let decor = false;
-        //     if(elm.closest(`.${this.builder.cssClasses.textTransform.uppercase},.${this.builder.cssClasses.textTransform.lowercase},.${this.builder.cssClasses.textTransform.capitalize}`)) {
-        //         decor = true;
-        //     } 
-        //     if(!decor) {
-        //         dom.removeClass(elm, this.builder.cssClasses.textTransform.normal);
-        //     }
-        // });
-
-        elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.extend.unset}`);
-        Array.prototype.forEach.call(elmNormals, elm => {
-          dom$h.removeClass(elm, this.builder.cssClasses.extend.unset);
-        });
-      } // Clean unused spans
-      // dom.cleanUnusedSpan(content); // REVIEW 
-
-    }
+    if (this.builder.cleanHtmlFormatting) ;
 
     const util = this.builder.util;
     const builderStuff = this.builder.builderStuff; //Prepare temporary helpers: #tmp_content & #tmp_buildercontent
@@ -15258,10 +15223,6 @@ class HtmlUtil {
     Array.prototype.forEach.call(emptyclasses, emptyclass => {
       emptyclass.removeAttribute('class');
     });
-    let emptystyles = tmp.querySelectorAll('[style=""]');
-    Array.prototype.forEach.call(emptystyles, emptystyle => {
-      emptystyle.removeAttribute('style');
-    });
     dom$h.removeEmptyStyle(tmp);
     elms = tmp.querySelectorAll('[data-keep]');
     dom$h.removeAttributes(elms, 'data-keep'); //Backward compatible: cleanup button <span contenteditable="false"><a contenteditable="true">button</a></span>
@@ -15281,6 +15242,20 @@ class HtmlUtil {
       // Remove dummy DIV after last section
       let elms = tmp.querySelectorAll('.is-dummy');
       dom$h.removeElements(elms);
+      elms = tmp.querySelectorAll('[data-scroll]');
+      dom$h.removeAttributes(elms, 'data-scroll');
+      elms = tmp.querySelectorAll('[data-scroll-once]');
+      dom$h.removeAttributes(elms, 'data-scroll-once');
+      elms = tmp.querySelectorAll(`[data-top-bottom],[data-top],[data-50-top],[data-100-top],
+                [data-center-bottom],[data-center],[data-center-top],[data--400-bottom],[data--300-bottom],
+                [data--200-bottom],[data--150-bottom],[data--100-bottom],[data--50-bottom],
+                [data-bottom],[data-50-bottom],[data-100-bottom],[data-150-bottom],[data-200-bottom],
+                [data-300-bottom],[data-400-bottom],[data-bottom-top]`);
+      Array.prototype.forEach.call(elms, elm => {
+        elm.style.transition = '';
+        elm.style.transform = '';
+        elm.style.opacity = '';
+      });
       elms = tmp.querySelectorAll('.is-animated');
       Array.prototype.forEach.call(elms, elm => {
         dom$h.removeClass(elm, 'animated');
@@ -15301,6 +15276,11 @@ class HtmlUtil {
         dom$h.removeClass(elm, 'slideInRight');
         dom$h.removeClass(elm, 'zoomIn');
         elm.style.animationDelay = '';
+        elm.style.transitionDelay = '';
+      });
+      let emptystyles = tmp.querySelectorAll('[style=""]');
+      Array.prototype.forEach.call(emptystyles, emptystyle => {
+        emptystyle.removeAttribute('style');
       }); //Cleanup utils
 
       elms = tmp.querySelectorAll('.is-appeared');
@@ -15362,6 +15342,10 @@ class HtmlUtil {
         html = html_content + html_footer + html_others;
       }
     } else {
+      let emptystyles = tmp.querySelectorAll('[style=""]');
+      Array.prototype.forEach.call(emptystyles, emptystyle => {
+        emptystyle.removeAttribute('style');
+      });
       html = tmp.innerHTML.trim();
       html = html.replace(/<font/g, '<span').replace(/<\/font/g, '</span');
     }
@@ -15372,7 +15356,11 @@ class HtmlUtil {
     if (elm) builderStuff.removeChild(elm); // return html;
 
     let beautify = JsBeautify.html;
-    return beautify(html);
+    html = beautify(html); // https://stackoverflow.com/questions/22962220/remove-multiple-line-breaks-n-in-javascript
+    // html = html.replace(/(\r\n|\r|\n){2}/g, '$1').replace(/(\r\n|\r|\n){3,}/g, '$1\n')
+
+    html = html.replace(/(\r\n|\r|\n){3,}/g, '$1\n');
+    return html;
   }
 
 }
@@ -17720,7 +17708,7 @@ class Grid {
     }
 
     const rowClass = builder.opts.row;
-    const colClass = builder.opts.cols;
+    let colClass = builder.opts.cols;
     const colSizes = builder.opts.colsizes;
 
     if (rowClass !== '' && colClass.length > 0 && colSizes.length > 0) {
@@ -17773,6 +17761,21 @@ class Grid {
 
 
     if (rowClass !== '' && colClass.length > 0) {
+      // Bootstrap stuff
+      cell.classList.forEach(item => {
+        if (item.indexOf('col-md-') !== -1) ; else if (item.indexOf('col-sm-') !== -1) {
+          colClass = ['col-sm-1', 'col-sm-2', 'col-sm-3', 'col-sm-4', 'col-sm-5', 'col-sm-6', 'col-sm-7', 'col-sm-8', 'col-sm-9', 'col-sm-10', 'col-sm-11', 'col-sm-12'];
+        } else if (item.indexOf('col-xs-') !== -1) {
+          colClass = ['col-xs-1', 'col-xs-2', 'col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7', 'col-xs-8', 'col-xs-9', 'col-xs-10', 'col-xs-11', 'col-xs-12'];
+        } else if (item.indexOf('col-lg-') !== -1) {
+          colClass = ['col-lg-1', 'col-lg-2', 'col-lg-3', 'col-lg-4', 'col-lg-5', 'col-lg-6', 'col-lg-7', 'col-lg-8', 'col-lg-9', 'col-lg-10', 'col-lg-11', 'col-lg-12'];
+        } else if (item.indexOf('col-xl-') !== -1) {
+          colClass = ['col-xl-1', 'col-xl-2', 'col-xl-3', 'col-xl-4', 'col-xl-5', 'col-xl-6', 'col-xl-7', 'col-xl-8', 'col-xl-9', 'col-xl-10', 'col-xl-11', 'col-xl-12'];
+        } else if (item.indexOf('col-xxl-') !== -1) {
+          colClass = ['col-xxl-1', 'col-xxl-2', 'col-xxl-3', 'col-xxl-4', 'col-xxl-5', 'col-xxl-6', 'col-xxl-7', 'col-xxl-8', 'col-xxl-9', 'col-xxl-10', 'col-xxl-11', 'col-xxl-12'];
+        }
+      });
+
       if (!dom.hasClass(cell, colClass[11])) {
         //if not column full
         if (dom.hasClass(cell, colClass[11])) {
@@ -17879,7 +17882,7 @@ class Grid {
     }
 
     const rowClass = builder.opts.row;
-    const colClass = builder.opts.cols;
+    let colClass = builder.opts.cols;
     const colSizes = builder.opts.colsizes;
 
     if (rowClass !== '' && colClass.length > 0 && colSizes.length > 0) {
@@ -17934,6 +17937,21 @@ class Grid {
 
 
     if (rowClass !== '' && colClass.length > 0) {
+      // Bootstrap stuff
+      cell.classList.forEach(item => {
+        if (item.indexOf('col-md-') !== -1) ; else if (item.indexOf('col-sm-') !== -1) {
+          colClass = ['col-sm-1', 'col-sm-2', 'col-sm-3', 'col-sm-4', 'col-sm-5', 'col-sm-6', 'col-sm-7', 'col-sm-8', 'col-sm-9', 'col-sm-10', 'col-sm-11', 'col-sm-12'];
+        } else if (item.indexOf('col-xs-') !== -1) {
+          colClass = ['col-xs-1', 'col-xs-2', 'col-xs-3', 'col-xs-4', 'col-xs-5', 'col-xs-6', 'col-xs-7', 'col-xs-8', 'col-xs-9', 'col-xs-10', 'col-xs-11', 'col-xs-12'];
+        } else if (item.indexOf('col-lg-') !== -1) {
+          colClass = ['col-lg-1', 'col-lg-2', 'col-lg-3', 'col-lg-4', 'col-lg-5', 'col-lg-6', 'col-lg-7', 'col-lg-8', 'col-lg-9', 'col-lg-10', 'col-lg-11', 'col-lg-12'];
+        } else if (item.indexOf('col-xl-') !== -1) {
+          colClass = ['col-xl-1', 'col-xl-2', 'col-xl-3', 'col-xl-4', 'col-xl-5', 'col-xl-6', 'col-xl-7', 'col-xl-8', 'col-xl-9', 'col-xl-10', 'col-xl-11', 'col-xl-12'];
+        } else if (item.indexOf('col-xxl-') !== -1) {
+          colClass = ['col-xxl-1', 'col-xxl-2', 'col-xxl-3', 'col-xxl-4', 'col-xxl-5', 'col-xxl-6', 'col-xxl-7', 'col-xxl-8', 'col-xxl-9', 'col-xxl-10', 'col-xxl-11', 'col-xxl-12'];
+        }
+      });
+
       if (!dom.hasClass(cell, colClass[11])) {
         //if not column full
         if (dom.hasClass(cell, colClass[0])) {