@innovastudio/contentbox 1.2.0 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.2.0",
+  "version": "1.2.3",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -39,7 +39,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.1.3",
+    "@innovastudio/contentbuilder": "^1.1.7",
     "axios": "^0.21.4",
     "cors": "^2.8.5",
     "express": "^4.17.1",

package/public/contentbox/contentbox.esm.js

@@ -14967,6 +14967,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
 
 
@@ -15195,6 +15200,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
 
 
@@ -18188,39 +18198,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
 
 
@@ -18297,7 +18274,7 @@ class Dom {
         }
       });
     });
-    this.cleanUnusedSpan(elm); // causes lost selection
+    this.cleanUnusedSpan(elm); // REVIEW (causes lost selection)
   }
 
   cleanSelection(selection) {
@@ -18309,40 +18286,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: {}};
@@ -23912,7 +23997,7 @@ class HtmlUtil {
       } // Clean unused spans
 
 
-      dom$I.cleanUnusedSpan(content);
+      dom$I.cleanUnusedSpan(content); // REVIEW 
     }
 
     const util = this.builder.util;
@@ -26096,18 +26181,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');
@@ -76554,12 +76652,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'
@@ -76765,6 +76857,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',
@@ -76798,7 +76896,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);
@@ -76861,16 +76960,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
 
 
-    const plugins = this.plugins;
-    this.useButtonPlugin = false;
+    if (this.opts.emailMode) {
+      this.useButtonPlugin = true;
+    }
 
-    for (let i = 0; i < plugins.length; i++) {
-      if (plugins[i].name === 'buttoneditor') {
-        this.useButtonPlugin = true;
-      }
+    if (!this.useButtonPlugin) {
+      let _arr = this.plugins.filter(item => {
+        return item.name !== 'buttoneditor';
+      });
+
+      this.plugins = [..._arr];
     } // Alternative settions to define css grid frameworks
 
 
@@ -77292,6 +77394,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();
@@ -77299,6 +77403,10 @@ class ContentBuilder {
   } // applyBehavior
 
 
+  contentReformatOn(builder) {
+    if (this.opts.useCssClasses) dom$J.contentReformat(builder, this.opts.cssClasses);
+  }
+
   applyBehaviorOn(builder) {
     const util = this.util; //Make absolute
 
@@ -80756,10 +80864,6 @@ class ContentBox {
         name: 'symbols',
         showInMainToolbar: true,
         showInElementToolbar: false
-      }, {
-        name: 'buttoneditor',
-        showInMainToolbar: false,
-        showInElementToolbar: false
       }],
       disableConfig: false,
       useLightbox: true,
@@ -80848,7 +80952,6 @@ class ContentBox {
       undoContainerOnly: false,
       absolutePath: false,
       maxEmbedImageWidth: 1600,
-      useCssClasses: false,
       zoom: 0.6,
       contentStyleWithSample: false,
       contentSizes: [300, 320, 340, 360, 380, 400, 420, 440, 460, 480, 500, 520, 540, 560, 580, 600, 620, 640, 660, 680, 700, 720, 740, 760, 780, 800, 820, 840, 860, 880, 900, 920, 940, 960, 970, 980, 1000, 1020, 1040, 1050, 1060, 1080, 1100, 1120, 1140, 1160, 1180, 1200, 1220, 1240, 1260, 1280, 1300, 1320, 1340, 1360, 1380, 1400, 1420, 1440, 1460, 1480, 1500, 1520, 1540, 1560, 1580, 1600, 1620, 1640, 1660, 1680, 1700, 1720, 1740, 1760, 1780, 1800, 1820, 1840, 1860, 1880, 1900, 1920, 1940, 1960, 1980, 2000, 2020, 2040, 2060, 2080, 2100, 2120, 2140, 2160, 2180, 2200, 2220, 2240, 2260, 2280, 2300, 2320, 2340, 2360, 2380, 2400, 2420, 2440, 2460, 2480, 2500, 2520, 2540, 2560, 2580, 2600, 2620, 2640, 2660, 2680, 2700],
@@ -82799,6 +82902,8 @@ class ContentBox {
         }
       },
       cssInBody: false,
+      useCssClasses: true,
+      useButtonPlugin: false,
 
       /* Old Version (backward compatible) */
       onAddSectionOpen: function () {},
@@ -83024,6 +83129,7 @@ class ContentBox {
       undoContainerOnly: this.settings.undoContainerOnly,
       absolutePath: this.settings.absolutePath,
       useCssClasses: this.settings.useCssClasses,
+      useButtonPlugin: this.settings.useButtonPlugin,
       zoom: this.settings.zoom,
       onZoomStart: () => {
         // const wrapper = this.wrapperEl;