@innovastudio/contentbuilder 1.3.10 → 1.3.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.3.10",
+  "version": "1.3.12",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.css

@@ -813,7 +813,7 @@ button:focus {
   font-weight: bold;
   text-transform: uppercase;
   line-height: 2;
-  padding: 8px 0 2px;
+  padding: 6px 0 1px;
   text-align: center;
 }
 #_cbhtml .is-rte-pop .is-label.separator,
@@ -935,6 +935,7 @@ button:focus {
   margin: 1px;
   box-shadow: none;
   background: transparent;
+  font-size: 12px;
 }
 #_cbhtml .is-rte-pop.rte-textsetting-options button.on,
 .is-ui .is-rte-pop.rte-textsetting-options button.on {
@@ -957,7 +958,7 @@ button:focus {
     height: 0;
   }
   to {
-    height: 288px;
+    height: 370px;
   }
 }
 #_cbhtml .is-rte-pop.rte-textsetting-options.deactive,
@@ -965,6 +966,44 @@ button:focus {
   animation-name: textsetting-slide-in;
 }
 @keyframes textsetting-slide-in {
+  from {
+    height: 370px;
+  }
+  to {
+    height: 0;
+  }
+}
+#_cbhtml .is-rte-pop.rte-textsetting-options.simple .label-fontweight,
+#_cbhtml .is-rte-pop.rte-textsetting-options.simple .rte-fontweight-options,
+.is-ui .is-rte-pop.rte-textsetting-options.simple .label-fontweight,
+.is-ui .is-rte-pop.rte-textsetting-options.simple .rte-fontweight-options {
+  display: none !important;
+}
+#_cbhtml .is-rte-pop.rte-textsetting-options.simple .is-label,
+.is-ui .is-rte-pop.rte-textsetting-options.simple .is-label {
+  padding: 8px 0 2px;
+}
+#_cbhtml .is-rte-pop.rte-textsetting-options.simple .is-label.separator,
+.is-ui .is-rte-pop.rte-textsetting-options.simple .is-label.separator {
+  margin-top: 5px;
+}
+#_cbhtml .is-rte-pop.rte-textsetting-options.simple.active,
+.is-ui .is-rte-pop.rte-textsetting-options.simple.active {
+  animation-name: textsetting2-slide-out;
+}
+#_cbhtml .is-rte-pop.rte-textsetting-options.simple.deactive,
+.is-ui .is-rte-pop.rte-textsetting-options.simple.deactive {
+  animation-name: textsetting2-slide-in;
+}
+@keyframes textsetting2-slide-out {
+  from {
+    height: 0;
+  }
+  to {
+    height: 288px;
+  }
+}
+@keyframes textsetting2-slide-in {
   from {
     height: 288px;
   }

package/public/contentbuilder/contentbuilder.esm.js

@@ -14567,6 +14567,7 @@ class HtmlUtil {
           automaticLayout: true,
           contextmenu: false,
           fontSize: 13,
+          wordWrap: true,
           scrollbar: {
             useShadows: false,
             vertical: 'visible',
@@ -14639,6 +14640,7 @@ class HtmlUtil {
             automaticLayout: true,
             contextmenu: false,
             fontSize: 13,
+            wordWrap: true,
             scrollbar: {
               useShadows: false,
               vertical: 'visible',
@@ -65868,7 +65870,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;">
@@ -65878,6 +65880,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>
@@ -66274,26 +66289,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 (pre) {
-            let newnode = pre.cloneNode(true);
-            let s = newnode.outerHTML.replace('<pre', '<' + command);
-            s = s.replace('</pre>', '</' + command + '>');
-            pre.outerHTML = s;
-          }
+      if (anchorNode) {
+        container = anchorNode.nodeType !== Node.TEXT_NODE && anchorNode.nodeType !== Node.COMMENT_NODE ? anchorNode : anchorNode.parentElement;
+      }
 
-          pre.focus();
+      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.
+
+
+        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
 
 
@@ -67013,82 +67063,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';
@@ -67887,15 +67862,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
 
@@ -67933,7 +67940,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];
@@ -67971,6 +67978,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;
@@ -68072,15 +68082,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
 
@@ -68149,6 +68159,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);
@@ -68208,15 +68220,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
@@ -68647,6 +68659,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;
@@ -68898,6 +68949,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%}
@@ -73780,7 +73963,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);