@innovastudio/contentbuilder 1.3.11 → 1.3.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.3.11",
+  "version": "1.3.13",
   "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,
@@ -923,18 +923,19 @@ button:focus {
 }
 #_cbhtml .is-rte-pop.rte-textsetting-options > div,
 .is-ui .is-rte-pop.rte-textsetting-options > div {
-  width: 224px;
+  width: 233px;
   flex-direction: column;
-  padding: 1px 12px 12px 12px;
+  padding: 1px 10px 12px 13px;
   box-sizing: border-box;
 }
 #_cbhtml .is-rte-pop.rte-textsetting-options button,
 .is-ui .is-rte-pop.rte-textsetting-options button {
-  width: 38px;
+  width: 39px;
   height: 28.2px;
   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: 372px;
   }
 }
 #_cbhtml .is-rte-pop.rte-textsetting-options.deactive,
@@ -965,6 +966,53 @@ button:focus {
   animation-name: textsetting-slide-in;
 }
 @keyframes textsetting-slide-in {
+  from {
+    height: 372px;
+  }
+  to {
+    height: 0;
+  }
+}
+#_cbhtml .is-rte-pop.rte-textsetting-options.simple > div,
+.is-ui .is-rte-pop.rte-textsetting-options.simple > div {
+  width: 224px;
+  padding: 1px 12px 12px 12px;
+}
+#_cbhtml .is-rte-pop.rte-textsetting-options.simple button,
+.is-ui .is-rte-pop.rte-textsetting-options.simple button {
+  width: 38px;
+}
+#_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>
@@ -66930,8 +66945,12 @@ class Rte {
         let col = this.builder.activeCol;
         let tool = this.builder.doc.querySelector('.is-column-tool');
         tool.style.display = '';
-        tool.style.top = col.getBoundingClientRect().top - 29 + window.pageYOffset + 'px';
-        tool.style.left = col.getBoundingClientRect().left - 1 + 'px';
+
+        if (col) {
+          tool.style.top = col.getBoundingClientRect().top - 29 + window.pageYOffset + 'px';
+          tool.style.left = col.getBoundingClientRect().left - 1 + 'px';
+        }
+
         let tools = this.builder.doc.querySelectorAll('.is-row-tool');
         tools.forEach(tool => {
           tool.style.display = '';
@@ -67008,8 +67027,12 @@ class Rte {
         let col = this.builder.activeCol;
         let tool = this.builder.doc.querySelector('.is-column-tool');
         tool.style.display = '';
-        tool.style.top = col.getBoundingClientRect().top - 29 + window.pageYOffset + 'px';
-        tool.style.left = col.getBoundingClientRect().left - 1 + 'px';
+
+        if (col) {
+          tool.style.top = col.getBoundingClientRect().top - 29 + window.pageYOffset + 'px';
+          tool.style.left = col.getBoundingClientRect().left - 1 + 'px';
+        }
+
         let tools = this.builder.doc.querySelectorAll('.is-row-tool');
         tools.forEach(tool => {
           tool.style.display = '';
@@ -67048,82 +67071,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';
@@ -67922,15 +67870,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
 
@@ -68006,6 +67986,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;
@@ -68107,15 +68090,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
 
@@ -68184,6 +68167,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);
@@ -68243,15 +68228,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
@@ -68682,6 +68667,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;
@@ -68933,6 +68957,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%}
@@ -73815,7 +73971,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);