@innovastudio/contentbox 1.4.13 → 1.4.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.4.13",
+  "version": "1.4.14",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -46,7 +46,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.3.11",
+    "@innovastudio/contentbuilder": "^1.3.12",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.css

@@ -634,11 +634,6 @@
   right: 1px;
 }
 
-.content-edit .is-section-tool,
-.content-edit .is-box-tool {
-  display: none !important;
-}
-
 .content-edit .box-hover {
   outline: none !important;
 }

package/public/contentbox/contentbox.esm.js

@@ -10024,7 +10024,7 @@ class EditBox {
         if (val === '20') dom$j.addClass(container, 'size-20');
         if (val === '21') dom$j.addClass(container, 'size-21'); // cleanup
 
-        const paragraphs = container.querySelectorAll('p');
+        const paragraphs = container.querySelectorAll('p,li,td,label');
         paragraphs.forEach(p => {
           if (val === '16') if (dom$j.hasClass(p, 'size-16')) dom$j.removeClass(p, 'size-16');
           if (val === '17') if (dom$j.hasClass(p, 'size-17')) dom$j.removeClass(p, 'size-17');
@@ -10073,7 +10073,7 @@ class EditBox {
         if (val === '1.9') dom$j.addClass(container, 'leading-19');
         if (val === '2') dom$j.addClass(container, 'leading-20'); // cleanup
 
-        const paragraphs = container.querySelectorAll('p');
+        const paragraphs = container.querySelectorAll('p,li,td,label');
         paragraphs.forEach(p => {
           if (val === '1') if (dom$j.hasClass(p, 'leading-none')) dom$j.removeClass(p, 'leading-none');
           if (val === '1.1') if (dom$j.hasClass(p, 'leading-11')) dom$j.removeClass(p, 'leading-11');
@@ -11340,6 +11340,7 @@ class EditBox {
     const overlayBg = activeBox.querySelector('.is-overlay-bg');
     const overlayVideo = activeBox.querySelector('.is-video-bg');
     const overlayContent = activeBox.querySelector('.is-overlay-content');
+    const container = activeBox.querySelector('.is-builder');
     let overlayBgHasContent = false;
 
     if (overlayBg) {
@@ -11410,7 +11411,6 @@ class EditBox {
       vPos = 'bottom';
     }
 
-    const container = activeBox.querySelector('.is-builder');
     let hPos = 'center';
 
     if (container) {
@@ -11882,6 +11882,18 @@ class EditBox {
         divContentJustify.style.display = 'none';
       }
     }
+
+    if (modalEditBox.querySelector('#divBoxImage').style.display === 'flex' && modalEditBox.querySelector('#tabBoxImage').style.display === 'none') {
+      modalEditBox.querySelector('#tabBoxGeneral').click();
+    }
+
+    if (modalEditBox.querySelector('#divBoxContentText').style.display === 'flex' && modalEditBox.querySelector('#tabBoxContentText').style.display === 'none') {
+      modalEditBox.querySelector('#tabBoxGeneral').click();
+    }
+
+    if (modalEditBox.querySelector('#divBoxContentContainer').style.display === 'flex' && modalEditBox.querySelector('#tabBoxContentContainer').style.display === 'none') {
+      modalEditBox.querySelector('#tabBoxGeneral').click();
+    }
   } //edit
 
 
@@ -27235,6 +27247,7 @@ class HtmlUtil {
           automaticLayout: true,
           contextmenu: false,
           fontSize: 13,
+          wordWrap: true,
           scrollbar: {
             useShadows: false,
             vertical: 'visible',
@@ -27307,6 +27320,7 @@ class HtmlUtil {
             automaticLayout: true,
             contextmenu: false,
             fontSize: 13,
+            wordWrap: true,
             scrollbar: {
               useShadows: false,
               vertical: 'visible',
@@ -78536,7 +78550,7 @@ class Rte {
                 <div class="rte-color-picker-area"></div>
             </div>
             
-            <div class="rte-textsetting-options is-rte-pop" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+            <div class="rte-textsetting-options ${this.builder.simpleTextSettings ? 'simple' : ''} is-rte-pop" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
                 <div>
                     <div class="is-label">${util.out('Font Size')}</div>
                     <div class="rte-fontsize-options" style="display: flex;flex-flow: wrap;">
@@ -78546,6 +78560,19 @@ class Rte {
                         <button title="${util.out('Increase')}" data-value="+" style="font-size:13px">+</button>
                         <button title="${util.out('Clear')}" data-value=""><svg class="is-icon-flex" style="width:18px;height:18px;margin-top: 2px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
                     </div>
+                    <div class="is-label separator label-fontweight">${util.out('Font Weight')}</div>
+                    <div class="rte-fontweight-options" style="display: flex;flex-flow: wrap;">
+                        <button title="100" data-value="100">100</button>
+                        <button title="200" data-value="200">200</button>
+                        <button title="300" data-value="300">300</button>
+                        <button title="400" data-value="400">400</button>
+                        <button title="500" data-value="500">500</button>
+                        <button title="600" data-value="600">600</button>
+                        <button title="700" data-value="700">700</button>
+                        <button title="800" data-value="800">800</button>
+                        <button title="900" data-value="900">900</button>
+                        <button title="${util.out('Clear')}" data-value=""><svg class="is-icon-flex" style="width:18px;height:18px;margin-top: 2px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+                    </div>
                     <div class="is-label separator">${util.out('Line Spacing')}</div>
                     <div class="rte-lineheight-options" style="display: flex;flex-flow: wrap;">
                         <button title="1" data-value="1">1</button>
@@ -79716,82 +79743,7 @@ class Rte {
         const h = pop.offsetHeight;
 
         if (!dom.hasClass(pop, 'active')) {
-          // Get realtime status
-          const elm = this.builder.activeElement;
-          let btns = pop.querySelectorAll('.rte-fontsize-options button');
-          Array.prototype.forEach.call(btns, btn => {
-            btn.classList.remove('on'); // clear selection
-          });
-          const arrSizes = this.builder.opts.fontSizeClassValues;
-
-          for (var i = 0; i <= arrSizes.length - 1; i++) {
-            if (dom.hasClass(elm, 'size-' + arrSizes[i])) {
-              // Get current class
-              const btns = pop.querySelectorAll('.rte-fontsize-options button');
-              Array.prototype.forEach.call(btns, btn => {
-                let num = btn.getAttribute('data-value');
-
-                if (parseInt(num) === arrSizes[i]) {
-                  btn.classList.add('on');
-                }
-              });
-            }
-          }
-
-          btns = pop.querySelectorAll('.rte-lineheight-options button');
-          Array.prototype.forEach.call(btns, btn => {
-            btn.classList.remove('on'); // clear selection
-          });
-          let classes = this.builder.cssClasses.leading;
-
-          for (let i = 0; i < Object.keys(classes).length; i++) {
-            let className = Object.values(classes)[i];
-
-            if (dom.hasClass(elm, className)) {
-              const btns = pop.querySelectorAll('.rte-lineheight-options button');
-              Array.prototype.forEach.call(btns, btn => {
-                let num = btn.getAttribute('data-value');
-                let val;
-                if (className === classes.leading_10) val = '1';
-                if (className === classes.leading_12) val = '1.2';
-                if (className === classes.leading_14) val = '1.4';
-                if (className === classes.leading_16) val = '1.6';
-                if (className === classes.leading_18) val = '1.8';
-                if (className === classes.leading_20) val = '2';
-                if (className === classes.leading_22) val = '2.2';
-
-                if (num === val) {
-                  btn.classList.add('on');
-                }
-              });
-            }
-          }
-
-          btns = pop.querySelectorAll('.rte-letterspacing-options button');
-          Array.prototype.forEach.call(btns, btn => {
-            btn.classList.remove('on'); // clear selection
-          });
-          classes = this.builder.cssClasses.tracking;
-
-          for (let i = 0; i < Object.keys(classes).length; i++) {
-            let className = Object.values(classes)[i];
-
-            if (dom.hasClass(elm, className)) {
-              const btns = pop.querySelectorAll('.rte-letterspacing-options button');
-              Array.prototype.forEach.call(btns, btn => {
-                let num = btn.getAttribute('data-value');
-                let val;
-                if (className === classes.tracking_025) val = '1';
-                if (className === classes.tracking_050) val = '2';
-
-                if (num === val) {
-                  btn.classList.add('on');
-                }
-              });
-            }
-          } // /Get realtime status
-
-
+          this.getTextSettingsState();
           this.util.showRtePop(pop, () => {
             if (this.builder.opts.toolbar === 'left') {
               pop.style.top = top - h / 2 + 20 + 'px';
@@ -80590,15 +80542,47 @@ class Rte {
           }
         }); //save selection
 
-        util.saveSelection();
-        this.getState(); //Trigger Change event
+        util.saveSelection(); // this.getState();
+
+        this.getTextSettingsState(); //Trigger Change event
 
         this.builder.opts.onChange(); // if(this.builder.isTouchSupport) { //prevent keyboard open
         //     const btnFocus = this.rteTool.querySelector('button'); 
         //     btnFocus.focus();
         // }
+        // btn.focus();
+      });
+    }); // Font Weight (new execCommand)
 
-        btn.focus();
+    btns = rteTextSettingOptions.querySelectorAll('.rte-fontweight-options button');
+    Array.prototype.forEach.call(btns, btn => {
+      dom.addEventListener(btn, 'click', () => {
+        // old 9135
+        let num = btn.getAttribute('data-value');
+        util.restoreSelection(); //a must
+
+        this.builder.uo.saveForUndo();
+        const btns = rteTextSettingOptions.querySelectorAll('.rte-fontweight-options button');
+        Array.prototype.forEach.call(btns, btn => {
+          btn.classList.remove('on'); // clear selection
+        });
+        dom.execCommand('font-weight', num, (ok, container) => {
+          if (this.builder.useCssClasses) {
+            if (container) {
+              this.applyClassFontWeight(container, num);
+            }
+          }
+        }); //save selection
+
+        util.saveSelection();
+        this.getState();
+        this.getTextSettingsState(); //Trigger Change event
+
+        this.builder.opts.onChange(); // if(this.builder.isTouchSupport) { //prevent keyboard open
+        //     const btnFocus = this.rteTool.querySelector('button'); 
+        //     btnFocus.focus();
+        // }
+        // btn.focus();
       });
     }); // Line Height
 
@@ -80674,6 +80658,9 @@ class Rte {
             }
           }
 
+          const elm = dom.getParentBlock(container);
+          if (elm) elm.style.lineHeight = ''; // Clean inline style
+
           dom.execCommandClass(newClassName, classes, true, 'block');
         } else {
           let elm;
@@ -80775,15 +80762,15 @@ class Rte {
         } //save selection
 
 
-        util.saveSelection();
-        this.getState(); //Trigger Change event
+        util.saveSelection(); // this.getState();
+
+        this.getTextSettingsState(); //Trigger Change event
 
         this.builder.opts.onChange(); // if(this.builder.isTouchSupport) { //prevent keyboard open
         //     const btnFocus = this.rteTool.querySelector('button'); 
         //     btnFocus.focus();
         // }
-
-        btn.focus();
+        // btn.focus();
       });
     }); // Letter Spacing
 
@@ -80852,6 +80839,8 @@ class Rte {
           }
 
           if (this.builder.activeElement) this.builder.activeElement.style.letterSpacing = '';
+          container.style.letterSpacing = ''; // Clean inline style
+
           if (newClassName === classes.tracking_000) newClassName = ''; // clear for normal tracking
 
           dom.execCommandClass(newClassName, classes);
@@ -80911,15 +80900,15 @@ class Rte {
         } //save selection
 
 
-        util.saveSelection();
-        this.getState(); //Trigger Change event
+        util.saveSelection(); // this.getState();
+
+        this.getTextSettingsState(); //Trigger Change event
 
         this.builder.opts.onChange(); // if(this.builder.isTouchSupport) { //prevent keyboard open
         //     const btnFocus = this.rteTool.querySelector('button'); 
         //     btnFocus.focus();
         // }
-
-        btn.focus();
+        // btn.focus();
       });
     }); // -----------------------------
     // Click anywhere will hide Column tool
@@ -81350,6 +81339,45 @@ class Rte {
     dom.cleanClassSize(elm, classname); // dom.cleanUnusedSpan(elm); // will remove empty spans that makes selection changes
   }
 
+  applyClassFontWeight(elm, num) {
+    const dom = this.dom;
+    let classes = this.builder.cssClasses.fontWeight;
+
+    for (let i = 0; i < Object.keys(classes).length; i++) {
+      let className = Object.values(classes)[i];
+
+      if (dom.hasClass(elm, className)) {
+        dom.removeClass(elm, className);
+      }
+
+      dom.doFunction(elm, theEl => {
+        if (dom.hasClass(theEl, className)) {
+          dom.removeClass(theEl, className);
+        }
+      }, true);
+    }
+
+    let classname = '';
+    if (num === '100') classname = this.builder.cssClasses.fontWeight.thin;
+    if (num === '200') classname = this.builder.cssClasses.fontWeight.extralight;
+    if (num === '300') classname = this.builder.cssClasses.fontWeight.light;
+    if (num === '400') classname = this.builder.cssClasses.fontWeight.normal;
+    if (num === '500') classname = this.builder.cssClasses.fontWeight.medium;
+    if (num === '600') classname = this.builder.cssClasses.fontWeight.semibold;
+    if (num === '700') classname = this.builder.cssClasses.fontWeight.bold;
+    if (num === '800') classname = this.builder.cssClasses.fontWeight.extrabold;
+    if (num === '900') classname = this.builder.cssClasses.fontWeight.black;
+
+    if (classname === '') ; else {
+      dom.addClass(elm, classname);
+    }
+
+    dom.doFunction(elm, function (theEl) {
+      theEl.style.fontWeight = '';
+    }, true);
+    dom.cleanClassSize(elm, classname); // dom.cleanUnusedSpan(elm); // will remove empty spans that makes selection changes
+  }
+
   click(col) {
     const dom = this.dom;
     let elm = this.builder.inspectedElement;
@@ -81601,6 +81629,138 @@ class Rte {
     }
   }
 
+  getTextSettingsState() {
+    const dom = this.dom;
+    const pop = this.rteTextSettingOptions; // Get realtime status
+
+    const selection = dom.getSelection();
+    if (!selection) return;
+    const anchorNode = selection.anchorNode;
+    let container;
+
+    if (anchorNode) {
+      container = anchorNode.nodeType !== Node.TEXT_NODE && anchorNode.nodeType !== Node.COMMENT_NODE ? anchorNode : anchorNode.parentElement;
+    }
+
+    let btns = pop.querySelectorAll('.rte-fontsize-options button');
+    Array.prototype.forEach.call(btns, btn => {
+      btn.classList.remove('on'); // clear selection
+    });
+
+    if (container) {
+      const arrSizes = this.builder.opts.fontSizeClassValues;
+
+      for (let i = 0; i <= arrSizes.length - 1; i++) {
+        if (dom.hasClass(container, 'size-' + arrSizes[i])) {
+          // Get current class
+          const btns = pop.querySelectorAll('.rte-fontsize-options button');
+          Array.prototype.forEach.call(btns, btn => {
+            let num = btn.getAttribute('data-value');
+
+            if (parseInt(num) === arrSizes[i]) {
+              btn.classList.add('on');
+            }
+          });
+        }
+      }
+    }
+
+    btns = pop.querySelectorAll('.rte-fontweight-options button');
+    Array.prototype.forEach.call(btns, btn => {
+      btn.classList.remove('on'); // clear selection
+    });
+
+    if (container) {
+      let classes = this.builder.cssClasses.fontWeight;
+
+      for (let i = 0; i < Object.keys(classes).length; i++) {
+        let className = Object.values(classes)[i];
+
+        if (dom.hasClass(container, className)) {
+          const btns = pop.querySelectorAll('.rte-fontweight-options button');
+          Array.prototype.forEach.call(btns, btn => {
+            let num = btn.getAttribute('data-value');
+            let val;
+            if (className === classes.thin) val = '100';
+            if (className === classes.extralight) val = '200';
+            if (className === classes.light) val = '300';
+            if (className === classes.normal) val = '400';
+            if (className === classes.medium) val = '500';
+            if (className === classes.semibold) val = '600';
+            if (className === classes.bold) val = '700';
+            if (className === classes.extrabold) val = '800';
+            if (className === classes.black) val = '900';
+
+            if (num === val) {
+              btn.classList.add('on');
+            }
+          });
+        }
+      }
+    }
+
+    btns = pop.querySelectorAll('.rte-lineheight-options button');
+    Array.prototype.forEach.call(btns, btn => {
+      btn.classList.remove('on'); // clear selection
+    });
+    const block = dom.getParentBlock(container);
+
+    if (block) {
+      let classes = this.builder.cssClasses.leading;
+
+      for (let i = 0; i < Object.keys(classes).length; i++) {
+        let className = Object.values(classes)[i];
+
+        if (dom.hasClass(block, className)) {
+          const btns = pop.querySelectorAll('.rte-lineheight-options button');
+          Array.prototype.forEach.call(btns, btn => {
+            let num = btn.getAttribute('data-value');
+            let val;
+            if (className === classes.leading_10) val = '1';
+            if (className === classes.leading_12) val = '1.2';
+            if (className === classes.leading_14) val = '1.4';
+            if (className === classes.leading_16) val = '1.6';
+            if (className === classes.leading_18) val = '1.8';
+            if (className === classes.leading_20) val = '2';
+            if (className === classes.leading_22) val = '2.2';
+
+            if (num === val) {
+              btn.classList.add('on');
+            }
+          });
+        }
+      }
+    }
+
+    btns = pop.querySelectorAll('.rte-letterspacing-options button');
+    Array.prototype.forEach.call(btns, btn => {
+      btn.classList.remove('on'); // clear selection
+    });
+
+    if (container) {
+      let classes = this.builder.cssClasses.tracking;
+
+      for (let i = 0; i < Object.keys(classes).length; i++) {
+        let className = Object.values(classes)[i];
+
+        if (dom.hasClass(container, className)) {
+          const btns = pop.querySelectorAll('.rte-letterspacing-options button');
+          Array.prototype.forEach.call(btns, btn => {
+            let num = btn.getAttribute('data-value');
+            let val;
+            if (className === classes.tracking_025) val = '1';
+            if (className === classes.tracking_050) val = '2';
+
+            if (num === val) {
+              btn.classList.add('on');
+            }
+          });
+        }
+      }
+    } // /Get realtime status
+
+  }
+
   getIconsStyle() {
     let css = `
             html, body {height:100%}
@@ -86483,7 +86643,8 @@ class ContentBuilder {
       },
       useCssClasses: true,
       useButtonPlugin: false,
-      enableDragResize: true
+      enableDragResize: true,
+      simpleTextSettings: true
     }; // obj.preserveSelection = true; (can be set programmatically) to prevent click that clears selection on external custom modal.
 
     this.opts = Object.assign(this, defaults, opts);