@innovastudio/contentbuilder 1.1.5 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbuilder",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.css

@@ -2097,7 +2097,7 @@ button:focus {
   top: 50%;
   left: auto;
   right: 30%;
-  margin-top: -205px;
+  margin-top: -383px;
   box-sizing: content-box;
   flex-direction: row;
   align-items: flex-start;

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,135 @@ 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
 
 
-    const cleanUnusedSpanChildren = Array.from(span.children).map(element => {
-      return this.cleanUnusedSpan(element);
+    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 (!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', 'bold', cssClasses.fontWeight.defaultBold);
+    this.replaceInline(area, 'text-align', 'left', 'text-left');
+    this.replaceInline(area, 'text-align', 'right', 'text-right');
+    this.replaceInline(area, 'text-align', 'center', 'text-center');
+    this.replaceInline(area, 'text-align', 'justify', 'text-justify');
+    this.replaceInline(area, 'display', 'flex', 'flex');
+    this.replaceInline(area, 'justiify-content', 'flex-start', 'justify-start');
+    this.replaceInline(area, 'justiify-content', 'flex-end', 'justify-end');
+    this.replaceInline(area, 'justiify-content', 'center', 'justify-center');
+    this.replaceInline(area, 'justiify-content', 'space-between', 'justify-between');
+    this.replaceInline(area, 'align-items', 'flex-start', 'items-start');
+    this.replaceInline(area, 'align-items', 'flex-end', 'items-end');
+    this.replaceInline(area, 'align-items', 'center', 'items-center');
+    this.replaceInline(area, 'text-transform', 'uppercase', 'uppercase');
+    this.replaceInline(area, 'text-transform', 'lowercase', 'lowercase');
+    this.replaceInline(area, 'line-height', '1', 'leading-none');
+    this.replaceInline(area, 'line-height', '1.1', 'leading-11');
+    this.replaceInline(area, 'line-height', '1.2', 'leading-12');
+    this.replaceInline(area, 'line-height', '1.25', 'leading-tight');
+    this.replaceInline(area, 'line-height', '1.3', 'leading-13');
+    this.replaceInline(area, 'line-height', '1.375', 'leading-snug');
+    this.replaceInline(area, 'line-height', '1.4', 'leading-14');
+    this.replaceInline(area, 'line-height', '1.5', 'leading-15');
+    this.replaceInline(area, 'line-height', '1.6', 'leading-16');
+    this.replaceInline(area, 'line-height', '1.625', 'leading-relaxed');
+    this.replaceInline(area, 'line-height', '1.7', 'leading-17');
+    this.replaceInline(area, 'line-height', '1.8', 'leading-18');
+    this.replaceInline(area, 'line-height', '1.9', 'leading-19');
+    this.replaceInline(area, 'line-height', '2', 'leading-loose');
+    this.replaceInline(area, 'line-height', '2.1', 'leading-21');
+    this.replaceInline(area, 'line-height', '2.2', '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 (elm.style[css] === `${value}`) {
+        this.addClass(elm, className);
+        elm.style[css] = '';
+      }
+    });
+  }
+
 }
 
 var js$1 = {exports: {}};
@@ -13458,7 +13530,7 @@ class HtmlUtil {
       } // Clean unused spans
 
 
-      dom$I.cleanUnusedSpan(content);
+      dom$I.cleanUnusedSpan(content); // REVIEW 
     }
 
     const util = this.builder.util;
@@ -66113,12 +66185,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'
@@ -66324,6 +66390,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 +66429,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 +66927,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 +66936,10 @@ class ContentBuilder {
   } // applyBehavior
 
 
+  contentReformatOn(builder) {
+    if (this.opts.useCssClasses) dom.contentReformat(builder, this.opts.cssClasses);
+  }
+
   applyBehaviorOn(builder) {
     const util = this.util; //Make absolute