@innovastudio/contentbuilder 1.4.52 → 1.4.54

package/package.json

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

package/public/contentbuilder/contentbuilder.css

@@ -1332,7 +1332,7 @@ button:focus-visible {
   height: auto;
   width: 0;
   flex-direction: column;
-  box-shadow: rgba(0, 0, 0, 0.04) 5px 0px 9px 0px;
+  box-shadow: rgba(0, 0, 0, 0.05) 5px 0px 9px 0px;
 }
 #_cbhtml[toolbarleft] .is-rte-pop > div,
 .is-ui[toolbarleft] .is-rte-pop > div {
@@ -1587,7 +1587,7 @@ button:focus-visible {
   height: auto;
   width: 0;
   flex-direction: column;
-  box-shadow: rgba(0, 0, 0, 0.04) -6px 1px 9px 0px;
+  box-shadow: rgba(0, 0, 0, 0.05) -6px 1px 9px 0px;
 }
 #_cbhtml[toolbarright] .is-rte-pop > div,
 .is-ui[toolbarright] .is-rte-pop > div {
@@ -1846,7 +1846,7 @@ button:focus-visible {
   left: 0;
   display: none;
   z-index: 10004;
-  background: rgba(0, 0, 0, 0.07);
+  background: rgba(0, 0, 0, 0.04);
   justify-content: center;
   align-items: center;
   flex-direction: column;
@@ -1949,14 +1949,14 @@ button:focus-visible {
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.07);
+  background: rgba(0, 0, 0, 0.04);
   z-index: -1;
   max-width: none !important;
   margin: 0 !important;
 }
 #_cbhtml .is-modal .is-modal-overlay.overlay-stay,
 .is-ui .is-modal .is-modal-overlay.overlay-stay {
-  background: rgba(0, 0, 0, 0.07);
+  background: rgba(0, 0, 0, 0.04);
 }
 #_cbhtml .is-modal.is-modal-content,
 #_cbhtml .is-modal .is-modal-content,
@@ -2049,13 +2049,19 @@ button:focus-visible {
 .is-ui .is-modal div.is-modal-footer button {
   margin-left: 2px;
 }
-#_cbhtml .is-modal.fileselect, #_cbhtml .is-modal.mediaselect, #_cbhtml .is-modal.imageselect, #_cbhtml .is-modal.videoselect, #_cbhtml .is-modal.otherselect,
+#_cbhtml .is-modal.fileselect, #_cbhtml .is-modal.mediaselect, #_cbhtml .is-modal.imageselect, #_cbhtml .is-modal.videoselect, #_cbhtml .is-modal.otherselect, #_cbhtml .is-modal.pickcolorclass, #_cbhtml .is-modal.imagesource, #_cbhtml .is-modal.imageadjust, #_cbhtml .is-modal.imageadjust2, #_cbhtml .is-modal.audioselect, #_cbhtml .is-modal.mediasource,
 .is-ui .is-modal.fileselect,
 .is-ui .is-modal.mediaselect,
 .is-ui .is-modal.imageselect,
 .is-ui .is-modal.videoselect,
-.is-ui .is-modal.otherselect {
-  z-index: 10005;
+.is-ui .is-modal.otherselect,
+.is-ui .is-modal.pickcolorclass,
+.is-ui .is-modal.imagesource,
+.is-ui .is-modal.imageadjust,
+.is-ui .is-modal.imageadjust2,
+.is-ui .is-modal.audioselect,
+.is-ui .is-modal.mediasource {
+  z-index: 10005 !important;
 }
 #_cbhtml .is-modal.previewcontent,
 .is-ui .is-modal.previewcontent {
@@ -2341,6 +2347,14 @@ button:focus-visible {
   font-weight: 500;
   padding-top: 20px;
 }
+#_cbhtml .is-modal.pickcolor,
+.is-ui .is-modal.pickcolor {
+  background: rgba(255, 255, 255, 0);
+}
+#_cbhtml .is-modal.pickcolor .is-modal-overlay,
+.is-ui .is-modal.pickcolor .is-modal-overlay {
+  background: rgba(255, 255, 255, 0);
+}
 #_cbhtml .is-modal.buttoneditor,
 .is-ui .is-modal.buttoneditor {
   z-index: 10002;
@@ -3967,7 +3981,8 @@ button:focus-visible {
 .is-ui .elementstyles {
   width: 300px;
   font-size: 13px;
-  z-index: 10005;
+  z-index: 10004;
+  /*10005*/
 }
 #_cbhtml .elementstyles .elm-list,
 .is-ui .elementstyles .elm-list {

package/public/contentbuilder/contentbuilder.esm.js

@@ -68931,165 +68931,9 @@ class Rte {
         // old 8368
 
         this.builder.uo.saveForUndo();
-        let elm;
-        try {
-          let curr;
-          if (this.builder.win.getSelection) {
-            curr = this.builder.win.getSelection().getRangeAt(0).commonAncestorContainer;
-            if (curr.nodeType === 3) {
-              //text node
-              elm = curr.parentNode;
-            } else {
-              elm = curr;
-            }
-          } else if (this.builder.doc.selection) {
-            curr = this.builder.doc.selection.createRange();
-            elm = this.builder.doc.selection.createRange().parentElement();
-          }
-        } catch (e) {
-          return;
-        }
         const command = btn.getAttribute('data-command');
         var text = dom.getSelected();
-        if (command === 'bold') {
-          if (this.builder.useCssClasses) {
-            dom.execCommandToggle('fontWeight', '', this.builder.cssClasses);
-          } else {
-            if (text.trim() === '') {
-              var tagname = elm.tagName.toLowerCase();
-              if (tagname === 'b') {
-                dom.selectElementContents(elm);
-                this.builder.doc.execCommand('bold', false, null);
-              } else {
-                if (elm.style.fontWeight === 'bold' || elm.style.fontWeight > 400) {
-                  elm.style.fontWeight = '';
-                } else {
-                  elm.style.fontWeight = 'bold';
-                }
-              }
-            } else {
-              this.builder.doc.execCommand('bold', false, null);
-            }
-          }
-        }
-        if (command === 'italic') {
-          if (this.builder.useCssClasses) {
-            dom.execCommandToggle('fontStyle', '', this.builder.cssClasses);
-          } else {
-            if (text.trim() === '') {
-              tagname = elm.tagName.toLowerCase();
-              if (tagname === 'i') {
-                dom.selectElementContents(elm);
-                this.builder.doc.execCommand('italic', false, null);
-              } else {
-                let fontStyle = window.getComputedStyle(elm).getPropertyValue('font-style');
-                if (fontStyle === 'italic') {
-                  elm.style.fontStyle = 'normal';
-                } else {
-                  elm.style.fontStyle = 'italic';
-                }
-              }
-            } else {
-              this.builder.doc.execCommand('italic', false, null);
-            }
-          }
-        }
-        if (command === 'underline') {
-          if (this.builder.useCssClasses) {
-            dom.execCommandToggle('textUnderline', '', this.builder.cssClasses);
-          } else {
-            if (text.trim() === '') {
-              tagname = elm.tagName.toLowerCase();
-              if (tagname === 'u') {
-                dom.selectElementContents(elm);
-                this.builder.doc.execCommand('underline', false, null);
-              } else {
-                if (elm.style.textDecoration.indexOf('underline') !== -1) {
-                  elm.style.textDecoration = '';
-                } else {
-                  elm.style.textDecoration = 'underline';
-                }
-              }
-            } else {
-              this.builder.doc.execCommand('underline', false, null);
-            }
-          }
-        }
-        if (command === 'strikethrough') {
-          if (this.builder.useCssClasses) {
-            dom.execCommandToggle('textLinethrough', '', this.builder.cssClasses);
-          } else {
-            if (text.trim() === '') {
-              tagname = elm.tagName.toLowerCase();
-              if (tagname === 'strike') {
-                dom.selectElementContents(elm);
-                this.builder.doc.execCommand('strikethrough', false, null);
-              } else {
-                if (elm.style.textDecoration.indexOf('line-through') !== -1) {
-                  elm.style.textDecoration = '';
-                } else {
-                  elm.style.textDecoration = 'line-through';
-                }
-              }
-            } else {
-              this.builder.doc.execCommand('strikethrough', false, null);
-            }
-          }
-        }
-        if (command === 'superscript') {
-          if (this.builder.useCssClasses) {
-            dom.execCommandToggle('extend', 'superscript', this.builder.cssClasses);
-          } else {
-            this.builder.doc.execCommand('superscript', false, null);
-          }
-        }
-        if (command === 'subscript') {
-          if (this.builder.useCssClasses) {
-            dom.execCommandToggle('extend', 'subscript', this.builder.cssClasses);
-          } else {
-            this.builder.doc.execCommand('subscript', false, null);
-          }
-        }
-        if (command === 'uppercase') {
-          if (this.builder.useCssClasses) {
-            dom.execCommandToggle('textTransform', '', this.builder.cssClasses);
-          } else {
-            let textTransform = window.getComputedStyle(elm).getPropertyValue('text-transform');
-            if (textTransform === 'uppercase') {
-              elm.style.textTransform = 'lowercase';
-            } else if (textTransform === 'lowercase') {
-              elm.style.textTransform = 'capitalize';
-            } else if (textTransform === 'capitalize') {
-              elm.style.textTransform = 'none';
-            } else if (textTransform === 'none') {
-              elm.style.textTransform = 'uppercase';
-            } else {
-              elm.style.textTransform = 'none';
-            }
-          }
-        }
-        if (command === 'clean') {
-          if (this.builder.useCssClasses) {
-            this.builder.doc.execCommand('removeFormat', false, null); // optional: backward compatible (for cleaning old b, i tags)
-            dom.execCommandToggle('clean', '', this.builder.cssClasses);
-          } else {
-            if (text.trim() === '') {
-              elm.style.cssText = '';
-              elm.className = '';
-            } else {
-              if (elm.innerText.replace(/(\r\n|\n|\r)/gm, '') === text.trim().replace(/(\r\n|\n|\r)/gm, '')) {
-                elm.style.cssText = '';
-                elm.className = '';
-                this.builder.doc.execCommand('removeFormat', false, null);
-                this.builder.doc.execCommand('removeFormat', false, null);
-              } else {
-                this.builder.doc.execCommand('removeFormat', false, null);
-                this.builder.doc.execCommand('removeFormat', false, null);
-              }
-            }
-          }
-        }
-        this.getState();
+        this.formatText(command);
 
         //save selection (only for desktop)
         if (!this.builder.isTouchSupport) {
@@ -70166,6 +70010,346 @@ class Rte {
       }
     }, 300);
   }
+  formatText(command) {
+    const dom = this.builder.dom;
+    let elm;
+    try {
+      let curr;
+      if (this.builder.win.getSelection) {
+        curr = this.builder.win.getSelection().getRangeAt(0).commonAncestorContainer;
+        if (curr.nodeType === 3) {
+          //text node
+          elm = curr.parentNode;
+        } else {
+          elm = curr;
+        }
+      } else if (this.builder.doc.selection) {
+        curr = this.builder.doc.selection.createRange();
+        elm = this.builder.doc.selection.createRange().parentElement();
+      }
+    } catch (e) {
+      return;
+    }
+    var text = dom.getSelected();
+    if (command === 'bold') {
+      if (this.builder.useCssClasses) {
+        dom.execCommandToggle('fontWeight', '', this.builder.cssClasses);
+      } else {
+        if (text.trim() === '') {
+          var tagname = elm.tagName.toLowerCase();
+          if (tagname === 'b') {
+            dom.selectElementContents(elm);
+            this.builder.doc.execCommand('bold', false, null);
+          } else {
+            if (elm.style.fontWeight === 'bold' || elm.style.fontWeight > 400) {
+              elm.style.fontWeight = '';
+            } else {
+              elm.style.fontWeight = 'bold';
+            }
+          }
+        } else {
+          this.builder.doc.execCommand('bold', false, null);
+        }
+      }
+    }
+    if (command === 'italic') {
+      if (this.builder.useCssClasses) {
+        dom.execCommandToggle('fontStyle', '', this.builder.cssClasses);
+      } else {
+        if (text.trim() === '') {
+          tagname = elm.tagName.toLowerCase();
+          if (tagname === 'i') {
+            dom.selectElementContents(elm);
+            this.builder.doc.execCommand('italic', false, null);
+          } else {
+            let fontStyle = window.getComputedStyle(elm).getPropertyValue('font-style');
+            if (fontStyle === 'italic') {
+              elm.style.fontStyle = 'normal';
+            } else {
+              elm.style.fontStyle = 'italic';
+            }
+          }
+        } else {
+          this.builder.doc.execCommand('italic', false, null);
+        }
+      }
+    }
+    if (command === 'underline') {
+      if (this.builder.useCssClasses) {
+        dom.execCommandToggle('textUnderline', '', this.builder.cssClasses);
+      } else {
+        if (text.trim() === '') {
+          tagname = elm.tagName.toLowerCase();
+          if (tagname === 'u') {
+            dom.selectElementContents(elm);
+            this.builder.doc.execCommand('underline', false, null);
+          } else {
+            if (elm.style.textDecoration.indexOf('underline') !== -1) {
+              elm.style.textDecoration = '';
+            } else {
+              elm.style.textDecoration = 'underline';
+            }
+          }
+        } else {
+          this.builder.doc.execCommand('underline', false, null);
+        }
+      }
+    }
+    if (command === 'strikethrough') {
+      if (this.builder.useCssClasses) {
+        dom.execCommandToggle('textLinethrough', '', this.builder.cssClasses);
+      } else {
+        if (text.trim() === '') {
+          tagname = elm.tagName.toLowerCase();
+          if (tagname === 'strike') {
+            dom.selectElementContents(elm);
+            this.builder.doc.execCommand('strikethrough', false, null);
+          } else {
+            if (elm.style.textDecoration.indexOf('line-through') !== -1) {
+              elm.style.textDecoration = '';
+            } else {
+              elm.style.textDecoration = 'line-through';
+            }
+          }
+        } else {
+          this.builder.doc.execCommand('strikethrough', false, null);
+        }
+      }
+    }
+    if (command === 'superscript') {
+      if (this.builder.useCssClasses) {
+        dom.execCommandToggle('extend', 'superscript', this.builder.cssClasses);
+      } else {
+        this.builder.doc.execCommand('superscript', false, null);
+      }
+    }
+    if (command === 'subscript') {
+      if (this.builder.useCssClasses) {
+        dom.execCommandToggle('extend', 'subscript', this.builder.cssClasses);
+      } else {
+        this.builder.doc.execCommand('subscript', false, null);
+      }
+    }
+    if (command === 'uppercase') {
+      if (this.builder.useCssClasses) {
+        dom.execCommandToggle('textTransform', '', this.builder.cssClasses);
+      } else {
+        let textTransform = window.getComputedStyle(elm).getPropertyValue('text-transform');
+        if (textTransform === 'uppercase') {
+          elm.style.textTransform = 'lowercase';
+        } else if (textTransform === 'lowercase') {
+          elm.style.textTransform = 'capitalize';
+        } else if (textTransform === 'capitalize') {
+          elm.style.textTransform = 'none';
+        } else if (textTransform === 'none') {
+          elm.style.textTransform = 'uppercase';
+        } else {
+          elm.style.textTransform = 'none';
+        }
+      }
+    }
+    if (command === 'clean') {
+      if (this.builder.useCssClasses) {
+        this.builder.doc.execCommand('removeFormat', false, null); // optional: backward compatible (for cleaning old b, i tags)
+        dom.execCommandToggle('clean', '', this.builder.cssClasses);
+      } else {
+        if (text.trim() === '') {
+          elm.style.cssText = '';
+          elm.className = '';
+        } else {
+          if (elm.innerText.replace(/(\r\n|\n|\r)/gm, '') === text.trim().replace(/(\r\n|\n|\r)/gm, '')) {
+            elm.style.cssText = '';
+            elm.className = '';
+            this.builder.doc.execCommand('removeFormat', false, null);
+            this.builder.doc.execCommand('removeFormat', false, null);
+          } else {
+            this.builder.doc.execCommand('removeFormat', false, null);
+            this.builder.doc.execCommand('removeFormat', false, null);
+          }
+        }
+      }
+    }
+    this.getState();
+  }
+  formatTextNonToggle(command) {
+    const dom = this.builder.dom;
+    let elm;
+    try {
+      let curr;
+      if (this.builder.win.getSelection) {
+        curr = this.builder.win.getSelection().getRangeAt(0).commonAncestorContainer;
+        if (curr.nodeType === 3) {
+          //text node
+          elm = curr.parentNode;
+        } else {
+          elm = curr;
+        }
+      } else if (this.builder.doc.selection) {
+        curr = this.builder.doc.selection.createRange();
+        elm = this.builder.doc.selection.createRange().parentElement();
+      }
+    } catch (e) {
+      return;
+    }
+    var text = dom.getSelected();
+    if (command === 'bold') {
+      dom.execCommand('text-weight', 'bold', (ok, container) => {
+        if (this.builder.useCssClasses) {
+          if (container) {
+            const config = this.builder.cssClasses;
+            container.classList.remove(config.fontWeight.thin);
+            container.classList.remove(config.fontWeight.extralight);
+            container.classList.remove(config.fontWeight.light);
+            container.classList.remove(config.fontWeight.normal);
+            container.classList.remove(config.fontWeight.semibold);
+            container.classList.remove(config.fontWeight.bold);
+            container.classList.remove(config.fontWeight.extrabold);
+            container.classList.remove(config.fontWeight.black);
+            container.classList.remove(config.fontWeight.defaultBold);
+            container.classList.remove(config.fontWeight.defaultNormal);
+            container.classList.add(config.fontWeight.semibold);
+            dom.doFunction(container, function (theEl) {
+              theEl.style.fontWeight = '';
+            }, true);
+          }
+        }
+      });
+    }
+    if (command === 'italic') {
+      dom.execCommand('text-style', 'italic', (ok, container) => {
+        if (this.builder.useCssClasses) {
+          if (container) {
+            const config = this.builder.cssClasses;
+            container.classList.remove(config.fontStyle.italic);
+            container.classList.remove(config.fontStyle.normal);
+            container.classList.add(config.fontStyle.italic);
+            dom.doFunction(container, function (theEl) {
+              theEl.style.fontStyle = '';
+            }, true);
+          }
+        }
+      });
+    }
+    if (command === 'underline') {
+      dom.execCommand('text-decoration', 'underline', (ok, container) => {
+        if (this.builder.useCssClasses) {
+          if (container) {
+            const config = this.builder.cssClasses;
+            container.classList.remove(config.textDecoration.underline);
+            container.classList.remove(config.textDecoration.linethrough);
+            container.classList.remove(config.textDecoration.normal);
+            container.classList.add(config.textDecoration.underline);
+            dom.doFunction(container, function (theEl) {
+              theEl.style.textDecoration = '';
+            }, true);
+          }
+        }
+      });
+    }
+    if (command === 'strikethrough') {
+      dom.execCommand('text-decoration', 'line-through', (ok, container) => {
+        if (this.builder.useCssClasses) {
+          if (container) {
+            const config = this.builder.cssClasses;
+            container.classList.remove(config.textDecoration.underline);
+            container.classList.remove(config.textDecoration.linethrough);
+            container.classList.remove(config.textDecoration.normal);
+            container.classList.add(config.textDecoration.linethrough);
+            dom.doFunction(container, function (theEl) {
+              theEl.style.textDecoration = '';
+            }, true);
+          }
+        }
+      });
+    }
+    if (command === 'superscript') {
+      if (this.builder.useCssClasses) {
+        dom.execCommandToggle('extend', 'superscript', this.builder.cssClasses);
+      } else {
+        this.builder.doc.execCommand('superscript', false, null);
+      }
+    }
+    if (command === 'subscript') {
+      if (this.builder.useCssClasses) {
+        dom.execCommandToggle('extend', 'subscript', this.builder.cssClasses);
+      } else {
+        this.builder.doc.execCommand('subscript', false, null);
+      }
+    }
+    if (command === 'uppercase') {
+      dom.execCommand('text-transform', 'uppercase', (ok, container) => {
+        if (this.builder.useCssClasses) {
+          if (container) {
+            const config = this.builder.cssClasses;
+            container.classList.remove(config.textTransform.uppercase);
+            container.classList.remove(config.textTransform.lowercase);
+            container.classList.remove(config.textTransform.capitalize);
+            container.classList.remove(config.textTransform.normal);
+            container.classList.add(config.textTransform.uppercase);
+            dom.doFunction(container, function (theEl) {
+              theEl.style.textTransform = '';
+            }, true);
+          }
+        }
+      });
+    }
+    if (command === 'lowercase') {
+      dom.execCommand('text-transform', 'lowercase', (ok, container) => {
+        if (this.builder.useCssClasses) {
+          if (container) {
+            const config = this.builder.cssClasses;
+            container.classList.remove(config.textTransform.uppercase);
+            container.classList.remove(config.textTransform.lowercase);
+            container.classList.remove(config.textTransform.capitalize);
+            container.classList.remove(config.textTransform.normal);
+            container.classList.add(config.textTransform.lowercase);
+            dom.doFunction(container, function (theEl) {
+              theEl.style.textTransform = '';
+            }, true);
+          }
+        }
+      });
+    }
+    if (command === 'capitalize') {
+      dom.execCommand('text-transform', 'capitalize', (ok, container) => {
+        if (this.builder.useCssClasses) {
+          if (container) {
+            const config = this.builder.cssClasses;
+            container.classList.remove(config.textTransform.uppercase);
+            container.classList.remove(config.textTransform.lowercase);
+            container.classList.remove(config.textTransform.capitalize);
+            container.classList.remove(config.textTransform.normal);
+            container.classList.add(config.textTransform.capitalize);
+            dom.doFunction(container, function (theEl) {
+              theEl.style.textTransform = '';
+            }, true);
+          }
+        }
+      });
+    }
+    if (command === 'clean') {
+      if (this.builder.useCssClasses) {
+        this.builder.doc.execCommand('removeFormat', false, null); // optional: backward compatible (for cleaning old b, i tags)
+        dom.execCommandToggle('clean', '', this.builder.cssClasses);
+      } else {
+        if (text.trim() === '') {
+          elm.style.cssText = '';
+          elm.className = '';
+        } else {
+          if (elm.innerText.replace(/(\r\n|\n|\r)/gm, '') === text.trim().replace(/(\r\n|\n|\r)/gm, '')) {
+            elm.style.cssText = '';
+            elm.className = '';
+            this.builder.doc.execCommand('removeFormat', false, null);
+            this.builder.doc.execCommand('removeFormat', false, null);
+          } else {
+            this.builder.doc.execCommand('removeFormat', false, null);
+            this.builder.doc.execCommand('removeFormat', false, null);
+          }
+        }
+      }
+    }
+    this.getState();
+  }
   insertImage() {
     const dom = this.dom;
     const modalInsertImage = this.builderStuff.querySelector('.insertimage');
@@ -78183,6 +78367,12 @@ class ContentBuilder {
       this.targetAssetType = targetAssetType;
     }
   }
+  formatText(command) {
+    this.rte.formatText(command);
+  }
+  formatTextNonToggle(command) {
+    this.rte.formatTextNonToggle(command);
+  }
   LightenDarkenColor(col, amt) {
     // Backward compatibility (used by: Button Editor plugin)
     return this.util.LightenDarkenColor(col, amt);