@innovastudio/contentbuilder 1.1.5 → 1.1.8

package/public/contentbuilder/contentbuilder.esm.js

@@ -4513,6 +4513,11 @@ class Util {
       } // LATER: auto scroll
       // LATER: If image, then it needs time to load (resulting incorrect position), so hide element tool. 
 
+    }
+
+    if (this.builder.useCssClasses) {
+      let builderActive = document.querySelector('.builder-active');
+      if (builderActive) dom.contentReformat(builderActive, this.builder.cssClasses);
     } // Call onChange
 
 
@@ -4741,6 +4746,11 @@ class Util {
 
       columnTool = document.querySelector('.is-column-tool');
       columnTool.className = columnTool.className.replace('active', '');
+    }
+
+    if (this.builder.useCssClasses) {
+      let builderActive = document.querySelector('.builder-active');
+      if (builderActive) dom.contentReformat(builderActive, this.builder.cssClasses);
     } // Call onChange
 
 
@@ -7734,39 +7744,6 @@ class Dom {
     if (!removeEmptyStyleChildren || removeEmptyStyleChildren.length <= 0) {
       return;
     }
-  }
-
-  cleanEmptySpans(area) {
-    let spans = area.querySelectorAll('span');
-    const filter = Array.prototype.filter;
-    let children = filter.call(spans, element => {
-      return element.attributes.length === 0;
-    }); // Remove empty spans
-
-    if (children && children.length > 0) {
-      children.forEach(element => {
-        element.outerHTML = element.innerHTML;
-      });
-    } // Remove spans which have empty content
-
-
-    spans = area.querySelectorAll('span');
-    filter.call(spans, element => {
-      if (element.innerHTML === '') {
-        element.parentNode.removeChild(element);
-      }
-    }); // Recheck
-
-    spans = area.querySelectorAll('span');
-    children = filter.call(spans, element => {
-      return element.attributes.length === 0;
-    });
-
-    if (children && children.length > 0) {
-      this.cleanEmptySpans(area);
-    } else {
-      return;
-    }
   } // Font Size stuff
 
 
@@ -7843,7 +7820,7 @@ class Dom {
         }
       });
     });
-    this.cleanUnusedSpan(elm); // causes lost selection
+    this.cleanUnusedSpan(elm); // REVIEW (causes lost selection)
   }
 
   cleanSelection(selection) {
@@ -7855,40 +7832,148 @@ class Dom {
     selection.selectAllChildren(span);
     this.cleanElement(span);
   }
-
+  /*
   cleanUnusedSpan(span) {
-    if (!span.hasChildNodes()) {
-      return;
-    } // Direct children with no style
-
-
-    const children = Array.from(span.children).filter(element => {
-      if (element.getAttribute('style') === '' || element.style === null) {
-        element.removeAttribute('style');
+       if (!span.hasChildNodes()) {
+          return;
+      }
+       // Direct children with no style
+      const children = Array.from(span.children).filter((element) => {
+          if (element.getAttribute('style') === '' || element.style === null) {
+              element.removeAttribute('style');
+          }
+          let unused = ( element.attributes.length === 0 || (element.attributes.length === 1 && element.hasAttribute('data-keep')));
+          return (element.nodeName.toLowerCase() === 'span' && unused);
+      });
+       if (children && children.length > 0) {
+          children.forEach((element) => { 
+              const text = document.createTextNode(element.textContent);
+              element.parentElement.replaceChild(text, element);
+          });
+          return;
+      }
+       // Deeper childrens
+      const cleanUnusedSpanChildren = Array.from(span.children).map((element) => {
+          return this.cleanUnusedSpan(element);
+      });
+       if (!cleanUnusedSpanChildren || cleanUnusedSpanChildren.length <= 0) {
+          return;
       }
+  }
+  */
 
-      let unused = element.attributes.length === 0 || element.attributes.length === 1 && element.hasAttribute('data-keep');
-      return element.nodeName.toLowerCase() === 'span' && unused;
-    });
+
+  cleanUnusedSpan(area) {
+    let spans = area.querySelectorAll('span');
+    const filter = Array.prototype.filter;
+    let children = filter.call(spans, element => {
+      return element.attributes.length === 0;
+    }); // Remove empty spans
 
     if (children && children.length > 0) {
       children.forEach(element => {
-        const text = document.createTextNode(element.textContent);
-        element.parentElement.replaceChild(text, element);
+        element.outerHTML = element.innerHTML;
       });
-      return;
-    } // Deeper childrens
+    } // Remove spans which have empty content
+
 
+    spans = area.querySelectorAll('span');
+    filter.call(spans, element => {
+      if (element.innerHTML === '') {
+        element.parentNode.removeChild(element);
+      }
+    }); // Recheck
 
-    const cleanUnusedSpanChildren = Array.from(span.children).map(element => {
-      return this.cleanUnusedSpan(element);
+    spans = area.querySelectorAll('span');
+    children = filter.call(spans, element => {
+      return element.attributes.length === 0;
     });
 
-    if (!cleanUnusedSpanChildren || cleanUnusedSpanChildren.length <= 0) {
+    if (children && children.length > 0) {
+      this.cleanUnusedSpan(area);
+    } else {
       return;
     }
   }
 
+  contentReformat(area, cssClasses) {
+    this.replaceTag(area, 'b', cssClasses.fontWeight.defaultBold);
+    this.replaceTag(area, 'i', cssClasses.fontStyle.italic);
+    this.replaceTag(area, 'u', cssClasses.textDecoration.underline);
+    this.replaceTag(area, 'strike', cssClasses.textDecoration.linethrough);
+    this.replaceInline(area, 'font-weight', 'normal', cssClasses.fontWeight.defaultBold);
+    this.replaceInline(area, 'font-weight', 'bold', cssClasses.fontWeight.defaultBold);
+    this.replaceInline(area, 'font-weight', '600', cssClasses.fontWeight.semibold);
+    this.replaceInline(area, 'text-align', 'left', cssClasses.textAlign.left);
+    this.replaceInline(area, 'text-align', 'right', cssClasses.textAlign.right);
+    this.replaceInline(area, 'text-align', 'center', cssClasses.textAlign.center);
+    this.replaceInline(area, 'text-align', 'justify', cssClasses.textAlign.justify);
+    this.replaceInline(area, 'display', 'flex', cssClasses.display.flex);
+    this.replaceInline(area, 'justiify-content', 'flex-start', cssClasses.justifyContent.start);
+    this.replaceInline(area, 'justiify-content', 'flex-end', cssClasses.justifyContent.end);
+    this.replaceInline(area, 'justiify-content', 'center', cssClasses.justifyContent.center);
+    this.replaceInline(area, 'justiify-content', 'space-between', cssClasses.justifyContent.between);
+    this.replaceInline(area, 'flex-direction', 'column', cssClasses.flexDirection.column);
+    this.replaceInline(area, 'flex-direction', 'row', cssClasses.flexDirection.row);
+    this.replaceInline(area, 'align-items', 'flex-start', cssClasses.alignItems.start);
+    this.replaceInline(area, 'align-items', 'flex-end', cssClasses.alignItems.end);
+    this.replaceInline(area, 'align-items', 'center', cssClasses.alignItems.center);
+    this.replaceInline(area, 'text-transform', 'uppercase', cssClasses.textTransform.uppercase);
+    this.replaceInline(area, 'text-transform', 'lowercase', cssClasses.textTransform.lowercase);
+    this.replaceInline(area, 'text-transform', 'none', cssClasses.textTransform.normal);
+    this.replaceInline(area, 'line-height', '1', cssClasses.leading.leading_10);
+    this.replaceInline(area, 'line-height', '1.1', cssClasses.leading.leading_11);
+    this.replaceInline(area, 'line-height', '1.2', cssClasses.leading.leading_12);
+    this.replaceInline(area, 'line-height', '1.25', cssClasses.leading.leading_125);
+    this.replaceInline(area, 'line-height', '1.3', cssClasses.leading.leading_13);
+    this.replaceInline(area, 'line-height', '1.375', cssClasses.leading.leading_1375);
+    this.replaceInline(area, 'line-height', '1.4', cssClasses.leading.leading_14);
+    this.replaceInline(area, 'line-height', '1.5', cssClasses.leading.leading_15);
+    this.replaceInline(area, 'line-height', '1.6', cssClasses.leading.leading_16);
+    this.replaceInline(area, 'line-height', '1.625', cssClasses.leading.leading_1625);
+    this.replaceInline(area, 'line-height', '1.7', cssClasses.leading.leading_17);
+    this.replaceInline(area, 'line-height', '1.8', cssClasses.leading.leading_18);
+    this.replaceInline(area, 'line-height', '1.9', cssClasses.leading.leading_19);
+    this.replaceInline(area, 'line-height', '2', cssClasses.leading.leading_20);
+    this.replaceInline(area, 'line-height', '2.1', cssClasses.leading.leading_21);
+    this.replaceInline(area, 'line-height', '2.2', cssClasses.leading.leading_22);
+  }
+
+  replaceTag(area, tag, className) {
+    let elms = area.querySelectorAll(tag);
+    const filter = Array.prototype.filter;
+    let children = filter.call(elms, element => {
+      return element.attributes.length === 0;
+    });
+
+    if (children && children.length > 0) {
+      children.forEach(element => {
+        const span = document.createElement('span');
+        span.setAttribute('class', className);
+        span.innerHTML = element.innerHTML;
+        element.outerHTML = span.outerHTML;
+      });
+    }
+  }
+
+  replaceInline(builder, css, value, className) {
+    let elms = builder.querySelectorAll('*');
+    elms.forEach(elm => {
+      if (css === 'justiify-content') {
+        /*
+        For some reason, cannot use elm.style[css] for 'justify-content'
+        */
+        if (elm.style.justifyContent === `${value}`) {
+          this.addClass(elm, className);
+          elm.style.justifyContent = '';
+        }
+      } else if (elm.style[css] === `${value}`) {
+        this.addClass(elm, className);
+        elm.style[css] = '';
+      }
+    });
+  }
+
 }
 
 var js$1 = {exports: {}};
@@ -13458,7 +13543,7 @@ class HtmlUtil {
       } // Clean unused spans
 
 
-      dom$I.cleanUnusedSpan(content);
+      dom$I.cleanUnusedSpan(content); // REVIEW 
     }
 
     const util = this.builder.util;
@@ -66113,12 +66198,6 @@ class ContentBuilder {
           defaultBold: 'font-semibold',
           defaultNormal: 'font-light'
         },
-        textAlign: {
-          left: 'text-left',
-          center: 'text-center',
-          right: 'text-right',
-          justify: 'text-justify'
-        },
         fontStyle: {
           italic: 'italic',
           normal: 'not-italic'
@@ -66192,6 +66271,34 @@ class ContentBuilder {
           leading_29: 'leading-29',
           leading_30: 'leading-30'
         },
+        opacity: {
+          opacity_0: 'opacity-0',
+          opacity_2: 'opacity-2',
+          opacity_4: 'opacity-4',
+          opacity_5: 'opacity-5',
+          opacity_6: 'opacity-6',
+          opacity_8: 'opacity-8',
+          opacity_10: 'opacity-10',
+          opacity_12: 'opacity-12',
+          opacity_15: 'opacity-15',
+          opacity_20: 'opacity-20',
+          opacity_25: 'opacity-25',
+          opacity_30: 'opacity-30',
+          opacity_35: 'opacity-35',
+          opacity_40: 'opacity-40',
+          opacity_45: 'opacity-45',
+          opacity_50: 'opacity-50',
+          opacity_55: 'opacity-55',
+          opacity_60: 'opacity-60',
+          opacity_65: 'opacity-65',
+          opacity_70: 'opacity-70',
+          opacity_75: 'opacity-75',
+          opacity_80: 'opacity-80',
+          opacity_85: 'opacity-85',
+          opacity_90: 'opacity-90',
+          opacity_95: 'opacity-95',
+          opacity_100: 'opacity-100'
+        },
         padding: {
           all: {
             p_0: 'p-0',
@@ -66324,6 +66431,12 @@ class ContentBuilder {
           superscript: 'sup',
           subscript: 'sub'
         },
+        textAlign: {
+          left: 'text-left',
+          center: 'text-center',
+          right: 'text-right',
+          justify: 'text-justify'
+        },
         display: {
           flex: 'flex',
           block: 'block',
@@ -66357,7 +66470,7 @@ class ContentBuilder {
           stretch: 'items-stretch'
         }
       },
-      useCssClasses: false,
+      useCssClasses: true,
       useButtonPlugin: false
     }; // obj.preserveSelection = true; (can be set programmatically) to prevent click that clears selection on external custom modal.
 
@@ -66855,6 +66968,8 @@ class ContentBuilder {
     const builders = document.querySelectorAll(this.opts.container);
     Array.prototype.forEach.call(builders, builder => {
       this.applyBehaviorOn(builder); // includes setZoomOnControl
+
+      this.contentReformatOn(builder);
     }); // Call onRender to indicate content is ready for editing (applyBehavior has been applied)
 
     this.opts.onRender();
@@ -66862,6 +66977,10 @@ class ContentBuilder {
   } // applyBehavior
 
 
+  contentReformatOn(builder) {
+    if (this.opts.useCssClasses) dom.contentReformat(builder, this.opts.cssClasses);
+  }
+
   applyBehaviorOn(builder) {
     const util = this.util; //Make absolute