@innovastudio/contentbuilder 1.0.84 → 1.0.87

package/package.json

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

package/public/contentbuilder/contentbuilder.esm.js

@@ -13271,59 +13271,59 @@ class HtmlUtil {
 
     if (this.builder.cleanHtmlFormatting) {
       // this cleanHtmlFormatting flag only use for output, not during editing 
-      if (this.builder.useConfig) {
+      if (this.builder.useCssClasses) {
         // Clean all uneeded normal classes
-        let elmNormals = content.querySelectorAll(`.${this.builder.config.fontWeight.defaultNormal}`);
+        let elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.fontWeight.defaultNormal}`);
         Array.prototype.forEach.call(elmNormals, elm => {
           let decor = false;
 
-          if (elm.closest(`.${this.builder.config.fontWeight.defaultBold}`)) {
+          if (elm.closest(`.${this.builder.cssClasses.fontWeight.defaultBold}`)) {
             decor = true;
           }
 
           if (!decor) {
-            dom$F.removeClass(elm, this.builder.config.fontWeight.defaultNormal);
+            dom$F.removeClass(elm, this.builder.cssClasses.fontWeight.defaultNormal);
           }
         });
-        elmNormals = content.querySelectorAll(`.${this.builder.config.fontStyle.normal}`);
+        elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.fontStyle.normal}`);
         Array.prototype.forEach.call(elmNormals, elm => {
           let decor = false;
 
-          if (elm.closest(`.${this.builder.config.fontStyle.italic}`)) {
+          if (elm.closest(`.${this.builder.cssClasses.fontStyle.italic}`)) {
             decor = true;
           }
 
           if (!decor) {
-            dom$F.removeClass(elm, this.builder.config.fontStyle.normal);
+            dom$F.removeClass(elm, this.builder.cssClasses.fontStyle.normal);
           }
         });
-        elmNormals = content.querySelectorAll(`.${this.builder.config.textDecoration.normal}`);
+        elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.textDecoration.normal}`);
         Array.prototype.forEach.call(elmNormals, elm => {
           let decor = false;
 
-          if (elm.closest(`.${this.builder.config.textDecoration.underline},.${this.builder.config.textDecoration.linethrough}`)) {
+          if (elm.closest(`.${this.builder.cssClasses.textDecoration.underline},.${this.builder.cssClasses.textDecoration.linethrough}`)) {
             decor = true;
           }
 
           if (!decor) {
-            dom$F.removeClass(elm, this.builder.config.textDecoration.normal);
+            dom$F.removeClass(elm, this.builder.cssClasses.textDecoration.normal);
           }
         });
-        elmNormals = content.querySelectorAll(`.${this.builder.config.textTransform.normal}`);
+        elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.textTransform.normal}`);
         Array.prototype.forEach.call(elmNormals, elm => {
           let decor = false;
 
-          if (elm.closest(`.${this.builder.config.textTransform.uppercase},.${this.builder.config.textTransform.lowercase},.${this.builder.config.textTransform.capitalize}`)) {
+          if (elm.closest(`.${this.builder.cssClasses.textTransform.uppercase},.${this.builder.cssClasses.textTransform.lowercase},.${this.builder.cssClasses.textTransform.capitalize}`)) {
             decor = true;
           }
 
           if (!decor) {
-            dom$F.removeClass(elm, this.builder.config.textTransform.normal);
+            dom$F.removeClass(elm, this.builder.cssClasses.textTransform.normal);
           }
         });
-        elmNormals = content.querySelectorAll(`.${this.builder.config.extend.unset}`);
+        elmNormals = content.querySelectorAll(`.${this.builder.cssClasses.extend.unset}`);
         Array.prototype.forEach.call(elmNormals, elm => {
-          dom$F.removeClass(elm, this.builder.config.extend.unset);
+          dom$F.removeClass(elm, this.builder.cssClasses.extend.unset);
         });
       } // Clean unused spans
 
@@ -58595,8 +58595,8 @@ class Rte {
         var text = dom$5.getSelected();
 
         if (command === 'bold') {
-          if (this.builder.useConfig) {
-            dom$5.execCommandToggle('fontWeight', '', this.builder.config);
+          if (this.builder.useCssClasses) {
+            dom$5.execCommandToggle('fontWeight', '', this.builder.cssClasses);
           } else {
             if (text.trim() === '') {
               var tagname = elm.tagName.toLowerCase();
@@ -58618,8 +58618,8 @@ class Rte {
         }
 
         if (command === 'italic') {
-          if (this.builder.useConfig) {
-            dom$5.execCommandToggle('fontStyle', '', this.builder.config);
+          if (this.builder.useCssClasses) {
+            dom$5.execCommandToggle('fontStyle', '', this.builder.cssClasses);
           } else {
             if (text.trim() === '') {
               tagname = elm.tagName.toLowerCase();
@@ -58643,8 +58643,8 @@ class Rte {
         }
 
         if (command === 'underline') {
-          if (this.builder.useConfig) {
-            dom$5.execCommandToggle('textUnderline', '', this.builder.config);
+          if (this.builder.useCssClasses) {
+            dom$5.execCommandToggle('textUnderline', '', this.builder.cssClasses);
           } else {
             if (text.trim() === '') {
               tagname = elm.tagName.toLowerCase();
@@ -58666,8 +58666,8 @@ class Rte {
         }
 
         if (command === 'strikethrough') {
-          if (this.builder.useConfig) {
-            dom$5.execCommandToggle('textLinethrough', '', this.builder.config);
+          if (this.builder.useCssClasses) {
+            dom$5.execCommandToggle('textLinethrough', '', this.builder.cssClasses);
           } else {
             if (text.trim() === '') {
               tagname = elm.tagName.toLowerCase();
@@ -58689,24 +58689,24 @@ class Rte {
         }
 
         if (command === 'superscript') {
-          if (this.builder.useConfig) {
-            dom$5.execCommandToggle('extend', 'superscript', this.builder.config);
+          if (this.builder.useCssClasses) {
+            dom$5.execCommandToggle('extend', 'superscript', this.builder.cssClasses);
           } else {
             document.execCommand('superscript', false, null);
           }
         }
 
         if (command === 'subscript') {
-          if (this.builder.useConfig) {
-            dom$5.execCommandToggle('extend', 'subscript', this.builder.config);
+          if (this.builder.useCssClasses) {
+            dom$5.execCommandToggle('extend', 'subscript', this.builder.cssClasses);
           } else {
             document.execCommand('subscript', false, null);
           }
         }
 
         if (command === 'uppercase') {
-          if (this.builder.useConfig) {
-            dom$5.execCommandToggle('textTransform', '', this.builder.config);
+          if (this.builder.useCssClasses) {
+            dom$5.execCommandToggle('textTransform', '', this.builder.cssClasses);
           } else {
             let textTransform = window.getComputedStyle(elm).getPropertyValue('text-transform');
 
@@ -58725,10 +58725,10 @@ class Rte {
         }
 
         if (command === 'clean') {
-          if (this.builder.useConfig) {
+          if (this.builder.useCssClasses) {
             document.execCommand('removeFormat', false, null); // optional: backward compatible (for cleaning old b, i tags)
 
-            dom$5.execCommandToggle('clean', '', this.builder.config);
+            dom$5.execCommandToggle('clean', '', this.builder.cssClasses);
           } else {
             if (text.trim() === '') {
               elm.style.cssText = '';
@@ -58833,16 +58833,16 @@ class Rte {
             element = element.parentNode;
           }
 
-          if (this.builder.useConfig) {
+          if (this.builder.useCssClasses) {
             element.style.textAlign = '';
-            dom$5.removeClass(element, this.builder.config.textAlign.left);
-            dom$5.removeClass(element, this.builder.config.textAlign.center);
-            dom$5.removeClass(element, this.builder.config.textAlign.right);
-            dom$5.removeClass(element, this.builder.config.textAlign.justify);
-            if (command === 'left') dom$5.addClass(element, this.builder.config.textAlign.left);
-            if (command === 'center') dom$5.addClass(element, this.builder.config.textAlign.center);
-            if (command === 'right') dom$5.addClass(element, this.builder.config.textAlign.right);
-            if (command === 'justify') dom$5.addClass(element, this.builder.config.textAlign.justify);
+            dom$5.removeClass(element, this.builder.cssClasses.textAlign.left);
+            dom$5.removeClass(element, this.builder.cssClasses.textAlign.center);
+            dom$5.removeClass(element, this.builder.cssClasses.textAlign.right);
+            dom$5.removeClass(element, this.builder.cssClasses.textAlign.justify);
+            if (command === 'left') dom$5.addClass(element, this.builder.cssClasses.textAlign.left);
+            if (command === 'center') dom$5.addClass(element, this.builder.cssClasses.textAlign.center);
+            if (command === 'right') dom$5.addClass(element, this.builder.cssClasses.textAlign.right);
+            if (command === 'justify') dom$5.addClass(element, this.builder.cssClasses.textAlign.justify);
           } else {
             element.style.textAlign = command;
           }
@@ -58888,16 +58888,16 @@ class Rte {
           element = element.parentNode;
         }
 
-        if (this.builder.useConfig) {
+        if (this.builder.useCssClasses) {
           element.style.textAlign = '';
-          dom$5.removeClass(element, this.builder.config.textAlign.left);
-          dom$5.removeClass(element, this.builder.config.textAlign.center);
-          dom$5.removeClass(element, this.builder.config.textAlign.right);
-          dom$5.removeClass(element, this.builder.config.textAlign.justify);
-          if (command === 'left') dom$5.addClass(element, this.builder.config.textAlign.left);
-          if (command === 'center') dom$5.addClass(element, this.builder.config.textAlign.center);
-          if (command === 'right') dom$5.addClass(element, this.builder.config.textAlign.right);
-          if (command === 'justify') dom$5.addClass(element, this.builder.config.textAlign.justify);
+          dom$5.removeClass(element, this.builder.cssClasses.textAlign.left);
+          dom$5.removeClass(element, this.builder.cssClasses.textAlign.center);
+          dom$5.removeClass(element, this.builder.cssClasses.textAlign.right);
+          dom$5.removeClass(element, this.builder.cssClasses.textAlign.justify);
+          if (command === 'left') dom$5.addClass(element, this.builder.cssClasses.textAlign.left);
+          if (command === 'center') dom$5.addClass(element, this.builder.cssClasses.textAlign.center);
+          if (command === 'right') dom$5.addClass(element, this.builder.cssClasses.textAlign.right);
+          if (command === 'justify') dom$5.addClass(element, this.builder.cssClasses.textAlign.justify);
         } else {
           element.style.textAlign = command;
         }
@@ -58922,16 +58922,16 @@ class Rte {
           element = element.parentNode;
         }
 
-        if (this.builder.useConfig) {
+        if (this.builder.useCssClasses) {
           element.style.textAlign = '';
-          dom$5.removeClass(element, this.builder.config.textAlign.left);
-          dom$5.removeClass(element, this.builder.config.textAlign.center);
-          dom$5.removeClass(element, this.builder.config.textAlign.right);
-          dom$5.removeClass(element, this.builder.config.textAlign.justify);
-          if (command === 'left') dom$5.addClass(element, this.builder.config.textAlign.left);
-          if (command === 'center') dom$5.addClass(element, this.builder.config.textAlign.center);
-          if (command === 'right') dom$5.addClass(element, this.builder.config.textAlign.right);
-          if (command === 'justify') dom$5.addClass(element, this.builder.config.textAlign.justify);
+          dom$5.removeClass(element, this.builder.cssClasses.textAlign.left);
+          dom$5.removeClass(element, this.builder.cssClasses.textAlign.center);
+          dom$5.removeClass(element, this.builder.cssClasses.textAlign.right);
+          dom$5.removeClass(element, this.builder.cssClasses.textAlign.justify);
+          if (command === 'left') dom$5.addClass(element, this.builder.cssClasses.textAlign.left);
+          if (command === 'center') dom$5.addClass(element, this.builder.cssClasses.textAlign.center);
+          if (command === 'right') dom$5.addClass(element, this.builder.cssClasses.textAlign.right);
+          if (command === 'justify') dom$5.addClass(element, this.builder.cssClasses.textAlign.justify);
         } else {
           element.style.textAlign = command;
         }
@@ -62544,7 +62544,7 @@ class ContentBuilder {
       */
       colHeight: [300, 350, 400, 450, 500, 550, 600, 650, 700],
       // maxColumns: 6,
-      config: {
+      cssClasses: {
         fontWeight: {
           thin: 'font-thin',
           extralight: 'font-extralight',
@@ -62584,7 +62584,7 @@ class ContentBuilder {
           subscript: 'sub'
         }
       },
-      useConfig: false
+      useCssClasses: 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);
@@ -62655,6 +62655,11 @@ class ContentBuilder {
       this.opts.cols = ['col-md-1', 'col-md-2', 'col-md-3', 'col-md-4', 'col-md-5', 'col-md-6', 'col-md-7', 'col-md-8', 'col-md-9', 'col-md-10', 'col-md-11', 'col-md-12'];
       this.opts.colequal = [];
       this.opts.colsizes = [];
+    } else if (this.opts.framework === 'tailwind') {
+      this.opts.row = 'flex flex-col md:flex-row';
+      this.opts.cols = ['w-full md:w-1/12 px-4', 'w-full md:w-2/12 px-4', 'w-full md:w-3/12 px-4', 'w-full md:w-4/12 px-4', 'w-full md:w-5/12 px-4', 'w-full md:w-6/12 px-4', 'w-full md:w-7/12 px-4', 'w-full md:w-8/12 px-4', 'w-full md:w-9/12 px-4', 'w-full md:w-10/12 px-4', 'w-full md:w-11/12 px-4', 'w-full px-4'];
+      this.opts.colequal = [];
+      this.opts.colsizes = [];
     } else if (this.opts.framework === 'foundation') {
       this.opts.row = 'row';
       this.opts.cols = ['large-1 columns', 'large-2 columns', 'large-3 columns', 'large-4 columns', 'large-5 columns', 'large-6 columns', 'large-7 columns', 'large-8 columns', 'large-9 columns', 'large-10 columns', 'large-11 columns', 'large-12 columns'];
@@ -63375,10 +63380,10 @@ class ContentBuilder {
       }
     }
 
-    this.builder.cleanHtmlFormatting = true;
+    this.cleanHtmlFormatting = true;
     let outputHtml = htmlutil.readHtml(area); //for view=false
 
-    this.builder.cleanHtmlFormatting = false;
+    this.cleanHtmlFormatting = false;
     return outputHtml;
   } // ContentBox