@innovastudio/contentbox 1.1.7 → 1.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "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.85",
     "axios": "^0.21.4",
     "cors": "^2.8.5",
     "express": "^4.17.1",

package/public/contentbox/contentbox.esm.js

@@ -23642,59 +23642,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 +68966,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 +68989,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 +69014,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 +69037,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 +69060,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 +69096,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 +69204,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 +69259,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 +69293,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 +72915,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 +72955,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);
@@ -76978,6 +76978,7 @@ class ContentBox {
       undoContainerOnly: false,
       absolutePath: false,
       maxEmbedImageWidth: 1600,
+      useCssClasses: false,
       zoom: 0.6,
       contentStyleWithSample: false,
       contentStyles: {
@@ -79151,7 +79152,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';