@innovastudio/contentbox 1.4.12 → 1.4.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.4.12",
+  "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.10",
+    "@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
 
 
@@ -12125,7 +12137,11 @@ class EditBox {
     dom$j.removeClass(elm, 'center');
     let elms = activeBox.querySelectorAll('.is-builder > div > div, .is-builder > div > div > *');
     elms.forEach(elm => {
+      if (elm.closest('.is-section-tool') || elm.closest('.is-box-tool') || elm.closest('.is-tool') || elm.closest('.is-rowadd-tool')) return;
       elm.style.textAlign = '';
+      dom$j.removeClass(elm, 'left');
+      dom$j.removeClass(elm, 'right');
+      dom$j.removeClass(elm, 'center');
       dom$j.removeClass(elm, this.builder.cssClasses.textAlign.left);
       dom$j.removeClass(elm, this.builder.cssClasses.textAlign.center);
       dom$j.removeClass(elm, this.builder.cssClasses.textAlign.right);
@@ -12133,6 +12149,9 @@ class EditBox {
       this.builder.editor.dom.doFunction(elm, theEl => {
         if (theEl.closest('.is-section-tool') || theEl.closest('.is-box-tool') || theEl.closest('.is-tool') || theEl.closest('.is-rowadd-tool')) return;
         theEl.style.textAlign = '';
+        dom$j.removeClass(theEl, 'left');
+        dom$j.removeClass(theEl, 'right');
+        dom$j.removeClass(theEl, 'center');
         dom$j.removeClass(theEl, this.builder.cssClasses.textAlign.left);
         dom$j.removeClass(theEl, this.builder.cssClasses.textAlign.center);
         dom$j.removeClass(theEl, this.builder.cssClasses.textAlign.right);
@@ -27228,6 +27247,7 @@ class HtmlUtil {
           automaticLayout: true,
           contextmenu: false,
           fontSize: 13,
+          wordWrap: true,
           scrollbar: {
             useShadows: false,
             vertical: 'visible',
@@ -27300,6 +27320,7 @@ class HtmlUtil {
             automaticLayout: true,
             contextmenu: false,
             fontSize: 13,
+            wordWrap: true,
             scrollbar: {
               useShadows: false,
               vertical: 'visible',
@@ -78529,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;">
@@ -78539,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>
@@ -78935,26 +78969,61 @@ class Rte {
 
       const command = item.getAttribute('data-block'); //h1, h2, h3, h4, p, pre  
 
+      /*
       let block = this.builder.doc.queryCommandValue('FormatBlock');
       block = block.toLowerCase();
-
       if (block === 'pre') {
-        let elm = dom.textSelection();
+          let elm = dom.textSelection();
+          if(elm) {
+              let pre = elm.closest('pre');
+              if(pre) {
+                  let newnode = pre.cloneNode(true);
+                  let s = newnode.outerHTML.replace('<pre', '<' + command);
+                  s = s.replace('</pre>', '</' + command + '>');
+                  pre.outerHTML = s;
+              }
+              pre.focus();
+          }
+      } else {
+          this.builder.doc.execCommand('formatBlock', false, '<' + command + '>'); //Needs contenteditable.         
+      }
+      */
 
-        if (elm) {
-          let pre = elm.closest('pre');
+      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;
+      }
+
+      if (!container) return;
+      let element = container.closest('h1') || container.closest('h2') || container.closest('h3') || container.closest('h4') || container.closest('h5') || container.closest('h6') || container.closest('pre') || container.closest('p');
+
+      if (element) {
+        // const tagName = element.tagName.toLowerCase();
+        element.setAttribute('data-replacetagname', '1');
+        const newElement = document.createElement(command); // Copy the attributes
+
+        for (var i = 0, l = element.attributes.length; i < l; ++i) {
+          var nodeName = element.attributes.item(i).nodeName;
+          var nodeValue = element.attributes.item(i).nodeValue;
+          newElement.setAttribute(nodeName, nodeValue);
+        } // move all elements in the other container.
 
-          if (pre) {
-            let newnode = pre.cloneNode(true);
-            let s = newnode.outerHTML.replace('<pre', '<' + command);
-            s = s.replace('</pre>', '</' + command + '>');
-            pre.outerHTML = s;
-          }
 
-          pre.focus();
+        while (element.firstChild) {
+          newElement.appendChild(element.firstChild);
+        }
+
+        element.parentNode.replaceChild(newElement, element);
+        const result = document.querySelector('[data-replacetagname="1"]');
+
+        if (result) {
+          result.removeAttribute('data-replacetagname');
+          dom.selectElementContents(result);
         }
-      } else {
-        this.builder.doc.execCommand('formatBlock', false, '<' + command + '>'); //Needs contenteditable.         
       } //save selection
 
 
@@ -79674,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';
@@ -80548,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
 
@@ -80594,7 +80620,7 @@ class Rte {
             for (let i = 0; i < Object.keys(classes).length; i++) {
               let className = Object.values(classes)[i];
 
-              if (dom.hasClass(container, className)) {
+              if (container.closest(`.${className}`)) {
                 if (num === '+') {
                   if (i + 1 === Object.keys(classes).length) return;
                   newClassName = Object.values(classes)[i + 1];
@@ -80632,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;
@@ -80733,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
 
@@ -80810,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);
@@ -80869,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
@@ -81308,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;
@@ -81559,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%}
@@ -86441,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);