@innovastudio/contentbox 1.1.6 → 1.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.1.6",
+  "version": "1.1.9",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -38,7 +38,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.0.84",
+    "@innovastudio/contentbuilder": "^1.0.86",
     "axios": "^0.21.4",
     "cors": "^2.8.5",
     "express": "^4.17.1",

package/public/contentbox/contentbox.esm.js

@@ -1667,6 +1667,21 @@ class SideBar {
                     var googleFonts = result[0].googleFonts;
                     var contentCss = result[0].contentCss;
                     var contentClass = result[0].contentClass;
+
+                    //To Tailwind
+                    if (framework == 'tailwind') {
+                        html = html.replace(new RegExp(' container', 'g'), ' container');
+                        html = html.replace(new RegExp('row clearfix', 'g'), 'flex flex-col md:flex-row');
+                        html = html.replace(new RegExp('column full', 'g'), 'w-full px-4');
+                        html = html.replace(new RegExp('column half', 'g'), 'w-full md:w-6/12 px-4');
+                        html = html.replace(new RegExp('column third', 'g'), 'w-full md:w-4/12 px-4');
+                        html = html.replace(new RegExp('column fourth', 'g'), 'w-full md:w-3/12 px-4');
+                        html = html.replace(new RegExp('column fifth', 'g'), 'w-full md:w-2/12 px-4'); //not needed
+                        html = html.replace(new RegExp('column sixth', 'g'), 'w-full md:w-2/12 px-4');
+                        html = html.replace(new RegExp('column two-third', 'g'), 'w-full md:w-8/12 px-4');
+                        html = html.replace(new RegExp('column two-fourth', 'g'), 'w-full md:w-9/12 px-4');
+                        html = html.replace(new RegExp('column two-sixth', 'g'), 'w-full md:w-10/12 px-4');
+                    }
                                 
                     //To Bootstrap
                     if (framework == 'bootstrap') {
@@ -23642,59 +23657,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
 
@@ -68966,8 +68981,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();
@@ -68989,8 +69004,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();
@@ -69014,8 +69029,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();
@@ -69037,8 +69052,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();
@@ -69060,24 +69075,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');
 
@@ -69096,10 +69111,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 = '';
@@ -69204,16 +69219,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;
           }
@@ -69259,16 +69274,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;
         }
@@ -69293,16 +69308,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;
         }
@@ -72915,7 +72930,7 @@ class ContentBuilder {
       */
       colHeight: [300, 350, 400, 450, 500, 550, 600, 650, 700],
       // maxColumns: 6,
-      config: {
+      cssClasses: {
         fontWeight: {
           thin: 'font-thin',
           extralight: 'font-extralight',
@@ -72955,7 +72970,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);
@@ -73026,6 +73041,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'];
@@ -73746,10 +73766,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
 
@@ -76978,6 +76998,7 @@ class ContentBox {
       undoContainerOnly: false,
       absolutePath: false,
       maxEmbedImageWidth: 1600,
+      useCssClasses: false,
       zoom: 0.6,
       contentStyleWithSample: false,
       contentStyles: {
@@ -79151,7 +79172,8 @@ class ContentBox {
       },
       undoContainerOnly: this.settings.undoContainerOnly,
       absolutePath: this.settings.absolutePath,
-      zoom: this.zoom,
+      useCssClasses: this.settings.useCssClasses,
+      zoom: this.settings.zoom,
       onZoomStart: () => {
         // const wrapper = this.wrapperEl;
         // wrapper.style.transition = 'all ease 0.1s';
@@ -79967,7 +79989,7 @@ class ContentBox {
 
 
       if (links[i].getAttribute('href').indexOf('/box.css') !== -1 || links[i].getAttribute('href').indexOf('/box-flex.css') !== -1) {
-        if (links[i].parentNode === document.body) {
+        if (links[i].closest('body')) {
           boxCssInBody = true;
           this.settings.cssInBody = true;
         }