@innovastudio/contentbuilder 1.1.3 → 1.1.6

package/package.json

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

package/public/contentbuilder/config.js

@@ -1,8 +1,7 @@
 //PLUGINS
-// _cb.settings.plugins = ['preview','wordcount','buttoneditor', 'symbols']; // old way
+// _cb.settings.plugins = ['preview','wordcount', 'symbols']; // old way
 _cb.settings.plugins = [
     { name: 'preview', showInMainToolbar: true, showInElementToolbar: true },
     { name: 'wordcount', showInMainToolbar: true, showInElementToolbar: true },
     { name: 'symbols', showInMainToolbar: true, showInElementToolbar: false },
-    { name: 'buttoneditor', showInMainToolbar: false, showInElementToolbar: false },
 ];

package/public/contentbuilder/contentbuilder.css

@@ -2093,11 +2093,11 @@ button:focus {
   position: fixed;
   overflow: hidden;
   width: 520px;
-  height: 720px;
+  height: 686px;
   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;
@@ -15642,18 +15714,31 @@ const renderQuickAdd = builder => {
     elm = quickadd.querySelector('.add-button');
     if (elm) dom$F.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      const html = `<div>
+      let html = `<div>
                 <a href="#" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent rounded bg-gray-200 hover:bg-gray-300 tracking-75 uppercase py-2 size-14 px-8 font-semibold text-gray-600">Read More</a>
             </div>`;
+
+      if (builder.opts.emailMode) {
+        html = '<div><a href="#" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a></div>';
+      }
+
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-twobutton');
     if (elm) dom$F.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      const html = `<div>
+      let html = `<div>
                 <a href="#" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent rounded bg-gray-200 hover:bg-gray-300 tracking-75 uppercase py-2 size-14 px-8 font-semibold text-gray-600">Read More</a>
                 <a href="#" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded tracking-75 uppercase py-2 size-14 px-8 border-current hover:border-transparent hover:text-white font-semibold text-indigo-500 hover:bg-indigo-500">Get Started</a>
             </div>`;
+
+      if (builder.opts.emailMode) {
+        html = `<div>
+                    <a href="#" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a> &nbsp;
+                    <a href="#" style="display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgba(0, 0, 0, 0); border-color: rgb(53, 53, 53); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px; color: rgb(53, 53, 53);">Get Started</a>
+                </div>`;
+      }
+
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-spacer');
@@ -66100,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'
@@ -66311,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',
@@ -66344,7 +66429,8 @@ 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.
 
     this.opts = Object.assign(this, defaults, opts);
@@ -66407,16 +66493,19 @@ class ContentBuilder {
       this.opts.onMediaUpload = this.opts.onLargerImageUpload;
     } else if (this.opts.onMediaUpload) {
       this.opts.onLargerImageUpload = this.opts.onMediaUpload;
-    } // Check if button editor plugin is used
+    } // useButtonPlugin
+
 
+    if (this.opts.emailMode) {
+      this.useButtonPlugin = true;
+    }
 
-    const plugins = this.plugins;
-    this.useButtonPlugin = false;
+    if (!this.useButtonPlugin) {
+      let _arr = this.plugins.filter(item => {
+        return item.name !== 'buttoneditor';
+      });
 
-    for (let i = 0; i < plugins.length; i++) {
-      if (plugins[i].name === 'buttoneditor') {
-        this.useButtonPlugin = true;
-      }
+      this.plugins = [..._arr];
     } // Alternative settions to define css grid frameworks
 
 
@@ -66838,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();
@@ -66845,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