@innovastudio/contentbox 1.1.5 → 1.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.1.5",
+  "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

@@ -829,7 +829,13 @@ class SideBar {
             if (src.indexOf(contentCss.toLowerCase()) != -1) exist = true;
           }
 
-          if (!exist) dom$J.appendHtml(document.head, '<link data-name="contentstyle" data-class="' + className + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
+          if (!exist) {
+            if (this.builder.settings.cssInBody) {
+              this.builder.wrapperEl.insertAdjacentHTML('beforebegin', '<link data-name="contentstyle" data-class="' + className + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
+            } else {
+              dom$J.appendHtml(document.head, '<link data-name="contentstyle" data-class="' + className + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
+            }
+          }
         } //Cleanup unused
 
 
@@ -888,7 +894,11 @@ class SideBar {
         }); //Add new page css
 
         if (pageCss != '') {
-          dom$J.appendHtml(document.head, '<link href="' + contentStylePath + pageCss + '" rel="stylesheet">');
+          if (this.builder.settings.cssInBody) {
+            this.builder.wrapperEl.insertAdjacentHTML('beforebegin', '<link href="' + contentStylePath + pageCss + '" rel="stylesheet">');
+          } else {
+            dom$J.appendHtml(document.head, '<link href="' + contentStylePath + pageCss + '" rel="stylesheet">');
+          }
         }
       } else if (mode === 'container') {
         let builderActive = document.querySelector('.builder-active');
@@ -913,7 +923,13 @@ class SideBar {
             if (src.indexOf(contentCss.toLowerCase()) != -1) exist = true;
           }
 
-          if (!exist) dom$J.appendHtml(document.head, '<link data-name="contentstyle" data-class="' + className + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
+          if (!exist) {
+            if (this.builder.settings.cssInBody) {
+              this.builder.wrapperEl.insertAdjacentHTML('beforebegin', '<link data-name="contentstyle" data-class="' + className + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
+            } else {
+              dom$J.appendHtml(document.head, '<link data-name="contentstyle" data-class="' + className + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
+            }
+          }
         } //Cleanup unused
 
 
@@ -959,7 +975,13 @@ class SideBar {
             if (src.indexOf(contentCss.toLowerCase()) != -1) exist = true;
           }
 
-          if (!exist) dom$J.appendHtml(document.head, '<link data-name="contentstyle" data-class="' + className + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
+          if (!exist) {
+            if (this.builder.settings.cssInBody) {
+              this.builder.wrapperEl.insertAdjacentHTML('beforebegin', '<link data-name="contentstyle" data-class="' + className + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
+            } else {
+              dom$J.appendHtml(document.head, '<link data-name="contentstyle" data-class="' + className + '" href="' + contentStylePath + contentCss + '" rel="stylesheet">');
+            }
+          }
         } //Cleanup unused
 
 
@@ -23620,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
 
@@ -68944,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();
@@ -68967,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();
@@ -68992,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();
@@ -69015,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();
@@ -69038,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');
 
@@ -69074,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 = '';
@@ -69182,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;
           }
@@ -69237,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;
         }
@@ -69271,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;
         }
@@ -72893,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',
@@ -72933,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);
@@ -76956,6 +76978,7 @@ class ContentBox {
       undoContainerOnly: false,
       absolutePath: false,
       maxEmbedImageWidth: 1600,
+      useCssClasses: false,
       zoom: 0.6,
       contentStyleWithSample: false,
       contentStyles: {
@@ -78904,6 +78927,7 @@ class ContentBox {
           }]
         }
       },
+      cssInBody: false,
 
       /* Old Version (backward compatible) */
       onAddSectionOpen: function () {},
@@ -79128,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';
@@ -79931,6 +79956,7 @@ class ContentBox {
 
   loadStyles(mainCss, sectionCss) {
     let links = document.getElementsByTagName('link');
+    let boxCssInBody;
 
     for (let i = 0; i < links.length; i++) {
       if (links[i].getAttribute('data-name') === 'contentstyle') {
@@ -79939,9 +79965,21 @@ class ContentBox {
 
       if (links[i].getAttribute('href').indexOf('basetype-') !== -1) {
         links[i].setAttribute('data-rel', '_del');
+      } // Check if main css (box.css in inside body)
+
+
+      if (links[i].getAttribute('href').indexOf('/box.css') !== -1 || links[i].getAttribute('href').indexOf('/box-flex.css') !== -1) {
+        if (links[i].closest('body')) {
+          boxCssInBody = true;
+          this.settings.cssInBody = true;
+        }
       }
     }
 
+    if (this.settings.cssInBody) {
+      boxCssInBody = true;
+    }
+
     let elms = document.querySelectorAll('[data-rel="_del"]');
     elms.forEach(elm => {
       elm.parentNode.removeChild(elm);
@@ -79949,10 +79987,18 @@ class ContentBox {
     let page = document.head;
     if (!page) page = document.body;
     if (mainCss) if (mainCss !== '') {
-      page.insertAdjacentHTML('beforeend', mainCss); // add the style on the head
+      if (boxCssInBody) {
+        this.wrapperEl.insertAdjacentHTML('beforebegin', mainCss);
+      } else {
+        page.insertAdjacentHTML('beforeend', mainCss); // add the style on the head
+      }
     }
     if (sectionCss) if (sectionCss !== '') {
-      page.insertAdjacentHTML('beforeend', sectionCss); // add the style on the head
+      if (boxCssInBody) {
+        this.wrapperEl.insertAdjacentHTML('beforebegin', sectionCss);
+      } else {
+        page.insertAdjacentHTML('beforeend', sectionCss); // add the style on the head
+      }
     }
   }