@innovastudio/contentbuilder 1.4.131 → 1.4.133

package/package.json

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

package/public/contentbuilder/contentbuilder.esm.js

@@ -3598,7 +3598,7 @@ class Dom {
       }
     }
     let blocks = [];
-    const blockElms = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'pre', 'td', 'th'];
+    const blockElms = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'pre', 'td', 'th', 'li'];
     elements.forEach(item => {
       const tagName = item.tagName.toLowerCase();
       if (blockElms.includes(tagName)) {
@@ -14477,7 +14477,11 @@ class Draggable$1 {
     const elms = document.querySelectorAll(this.opts.selector);
     Array.prototype.forEach.call(elms, elm => {
       elm.setAttribute('draggable', '');
-      elm.addEventListener('touchstart', this.dragStart, false);
+
+      // elm.addEventListener('touchstart', this.dragStart, false);
+      elm.addEventListener('touchstart', this.dragStart, {
+        passive: true
+      });
       elm.addEventListener('touchend', this.dragEnd, false);
       elm.addEventListener('mousedown', this.dragStart, false);
       elm.addEventListener('mouseup', this.dragEnd, false);
@@ -46984,7 +46988,7 @@ class ButtonEditor {
                         <div class="flex flex-row">
                             <div class="flex flex-col" style="margin-right: 40px;">
                                 <div>
-                                    <label>${util.out('Background Color')}</label>:
+                                    <span>${util.out('Background Color')}</span>:
                                 </div>
                                 <div class="flex flex-row flex-wrap" style="margin-top:5px">
                                     <button title="${util.out('Background Color')}" class="bg-color-command" style="width:45px;height:40px;border:rgb(0 0 0 / 6%) 1px solid;margin-right:4px"></button>
@@ -46993,7 +46997,7 @@ class ButtonEditor {
                             
                             <div class="flex flex-col">
                                 <div>
-                                    <label>${util.out('Text Color')}</label>:
+                                    <span>${util.out('Text Color')}</span>:
                                 </div>
                                 <div class="flex flex-row flex-wrap" style="margin-top:5px">
                                     <button title="${util.out('Text Color')}" class="text-color-command" style="width:45px;height:40px;border:rgb(0 0 0 / 6%) 1px solid;margin-right:4px"></button>
@@ -47001,7 +47005,7 @@ class ButtonEditor {
                             </div>
                             <div class="flex flex-col" style="margin-left: 60px;">
                                 <div>
-                                    <label>${util.out('Width')}</label>:
+                                    <span>${util.out('Width')}</span>:
                                 </div>
                                 <div class="flex flex-row flex-wrap" style="margin-top:5px">
                                     <button title="${util.out('Auto')}" data-command="auto" class="width-command" style="margin-right:4px">${util.out('Auto')}</button>
@@ -47013,7 +47017,7 @@ class ButtonEditor {
                         <div class="flex flex-row" style="margin:15px 0 0">
                             <div class="flex flex-col" style="margin-right: 40px;">
                                 <div>
-                                    <label>${util.out('Border Color')}</label>:
+                                    <span>${util.out('Border Color')}</span>:
                                 </div>
                                 <div class="flex flex-row flex-wrap" style="margin-top:5px">
                                     <button title="${util.out('Transparent')}" data-command="transparent" class="border-color-command" style="margin-right:4px">${util.out('Transparent')}</button>
@@ -47023,7 +47027,7 @@ class ButtonEditor {
 
                             <div class="flex flex-col">
                                 <div>
-                                    <label>${util.out('Border Thickness')}</label>:
+                                    <span>${util.out('Border Thickness')}</span>:
                                 </div>
                                 <div class="flex flex-row flex-wrap" style="margin-top:5px">
                                     <button title="${util.out('No Border')}" data-command="0" class="border-width-command" style="margin-right:4px">${util.out('No Border')}</button>
@@ -47036,7 +47040,7 @@ class ButtonEditor {
                         <div class="flex flex-row" style="margin:15px 0 0">
                             <div class="flex flex-col" style="margin-right: 20px;">
                                 <div>
-                                    <label>${util.out('Padding Left/Right')}</label>:
+                                    <span>${util.out('Padding Left/Right')}</span>:
                                 </div>
                                 <div class="flex flex-row" style="margin-top:5px">
                                     <button title="2" data-command="2" class="paddingx-command" style="margin-right:4px">2</button>
@@ -47055,7 +47059,7 @@ class ButtonEditor {
 
                             <div class="flex flex-col" style="display:none">
                                 <div>
-                                    <label>${util.out('Padding Y')}</label>:
+                                    <span>${util.out('Padding Y')}</span>:
                                 </div>
                                 <div class="flex flex-row" style="margin-top:5px">
                                     <button title="0" data-command="0" class="paddingy-command" style="margin-right:4px">0</button>
@@ -47071,7 +47075,7 @@ class ButtonEditor {
                         <div class="flex flex-row" style="margin:15px 0 0">
                             <div class="flex flex-col" style="margin-right: 20px;">
                                 <div>
-                                    <label>${util.out('Padding Top')}</label>:
+                                    <span>${util.out('Padding Top')}</span>:
                                 </div>
                                 <div class="flex flex-row" style="margin-top:5px">
                                     <button title="0" data-command="0" class="paddingtop-command" style="margin-right:4px">0</button>
@@ -47085,7 +47089,7 @@ class ButtonEditor {
 
                             <div class="flex flex-col">
                                 <div>
-                                    <label>${util.out('Padding Bottom')}</label>:
+                                    <span>${util.out('Padding Bottom')}</span>:
                                 </div>
                                 <div class="flex flex-row" style="margin-top:5px">
                                     <button title="0" data-command="0" class="paddingbottom-command" style="margin-right:4px">0</button>
@@ -47100,7 +47104,7 @@ class ButtonEditor {
 
                         <div class="flex flex-col" style="margin:15px 0 0">
                             <div>
-                                <label>${util.out('Border Radius')}</label>:
+                                <span>${util.out('Border Radius')}</span>:
                             </div>
                             <div class="flex flex-row flex-wrap" style="margin-top:5px">
                                 <button title="${util.out('None')}" data-command="none" class="border-radius-command" style="margin-right:4px">${util.out('None')}</button>
@@ -47118,7 +47122,7 @@ class ButtonEditor {
                         <div class="flex flex-row" style="margin:15px 0 0">
                             <div class="flex flex-col" style="margin-right: 20px;">
                                 <div>
-                                    <label>${util.out('Margin Left')}</label>:
+                                    <span>${util.out('Margin Left')}</span>:
                                 </div>
                                 <div class="flex flex-row flex-wrap" style="margin-top:5px">
                                     <button title="0" data-command="0" class="ml-command" style="margin-right:4px">0</button>
@@ -47132,7 +47136,7 @@ class ButtonEditor {
 
                             <div class="flex flex-col">
                                 <div>
-                                    <label>${util.out('Margin Right')}</label>:
+                                    <span>${util.out('Margin Right')}</span>:
                                 </div>
                                 <div class="flex flex-row flex-wrap" style="margin-top:5px">
                                     <button title="0" data-command="0" class="mr-command" style="margin-right:4px">0</button>
@@ -47148,7 +47152,7 @@ class ButtonEditor {
                         <div class="flex flex-row" style="margin:15px 0 0">
                             <div class="flex flex-col" style="margin-right: 20px;">
                                 <div>
-                                    <label>${util.out('Margin Top')}</label>:
+                                    <span>${util.out('Margin Top')}</span>:
                                 </div>
                                 <div class="flex flex-row flex-wrap" style="margin-top:5px">
                                     <button title="0" data-command="0" class="mt-command" style="margin-right:4px">0</button>
@@ -47162,7 +47166,7 @@ class ButtonEditor {
 
                             <div class="flex flex-col">
                                 <div>
-                                    <label>${util.out('Margin Bottom')}</label>:
+                                    <span>${util.out('Margin Bottom')}</span>:
                                 </div>
                                 <div class="flex flex-row flex-wrap" style="margin-top:5px">
                                     <button title="0" data-command="0" class="mb-command" style="margin-right:4px">0</button>
@@ -47182,7 +47186,7 @@ class ButtonEditor {
                         <div class="flex flex-row">
                             <div class="flex-col" style="margin-right: 40px;">
                                 <div>
-                                    <label>${util.out('Background Color')}</label>:
+                                    <span>${util.out('Background Color')}</span>:
                                 </div>
                                 <div class="flex flex-row flex-wrap" style="margin-top:5px">
                                     <button title="${util.out('Background Color')}" class="bg-color-hover-command" style="width:45px;height:40px;border:rgb(0 0 0 / 6%) 1px solid;margin-right:4px"></button>
@@ -47191,7 +47195,7 @@ class ButtonEditor {
                     
                             <div class="flex-col">
                                 <div>
-                                    <label>${util.out('Text Color')}</label>:
+                                    <span>${util.out('Text Color')}</span>:
                                 </div>
                                 <div class="flex flex-row flex-wrap" style="margin-top:5px">
                                     <button title="${util.out('Dark')}" data-command="dark" class="text-color-hover-command" style="margin-right:4px">${util.out('Dark')}</button>
@@ -47203,7 +47207,7 @@ class ButtonEditor {
 
                         <div class="flex flex-col" style="margin:15px 0 0">
                             <div>
-                                <label>${util.out('Border Color')}</label>:
+                                <span>${util.out('Border Color')}</span>:
                             </div>
                             <div class="flex flex-row flex-wrap" style="margin-top:5px">
                                 <button title="${util.out('Transparent')}" data-command="transparent" class="border-color-hover-command" style="margin-right:4px">${util.out('Transparent')}</button>
@@ -47217,7 +47221,7 @@ class ButtonEditor {
                         <div class="flex flex-row">
                             <div class="flex flex-col" style="width:250px;margin-right:40px;">
                                 <div>
-                                    <label>${util.out('Font Size')}</label>:
+                                    <span>${util.out('Font Size')}</span>:
                                 </div>
                                 <div class="flex flex-row flex-wrap" style="margin-top:5px">
                                     <button title="12" data-command="12" class="font-size-command" style="margin-right:4px">12</button>
@@ -47237,7 +47241,7 @@ class ButtonEditor {
 
                             <div class="flex flex-col">
                                 <div>
-                                    <label>${util.out('Upper/Lower')}</label>:
+                                    <span>${util.out('Upper/Lower')}</span>:
                                 </div>
                                 <div class="flex flex-row flex-wrap" style="margin-top:5px">
                                     <button title="${util.out('Bold')}" class="textbold-command" style="width:38px;font-family:serif;font-size:14px;text-transform:initial;margin-right:4px">B</button>
@@ -47250,7 +47254,7 @@ class ButtonEditor {
                         <div class="flex flex-row" style="margin:15px 0 0">
                             <div class="flex flex-col">
                                 <div>
-                                    <label>${util.out('Letter Spacing')}</label>:
+                                    <span>${util.out('Letter Spacing')}</span>:
                                 </div>
                                 <div class="flex flex-row flex-wrap" style="margin-top:5px">
                                     <button title="0" data-command="normal" class="letter-spacing-command" style="margin-right:4px">0</button>
@@ -50916,10 +50920,12 @@ class Table {
     const tableModal = this.tableModal;
     if (tableModal.classList.contains('active') && this.builder.activeTable) {
       let activeTd = this.builder.activeTd;
-      tableModal.querySelector('.input-table-bgcolor').style.backgroundColor = activeTd.style.backgroundColor;
-      tableModal.querySelector('.input-table-textcolor').style.backgroundColor = activeTd.style.color;
-      tableModal.querySelector('.input-table-bordercolor').style.backgroundColor = activeTd.style.borderColor;
-      tableModal.querySelector('#selCellBorderWidth').value = parseInt(activeTd.style.borderWidth);
+      if (activeTd) {
+        tableModal.querySelector('.input-table-bgcolor').style.backgroundColor = activeTd.style.backgroundColor;
+        tableModal.querySelector('.input-table-textcolor').style.backgroundColor = activeTd.style.color;
+        tableModal.querySelector('.input-table-bordercolor').style.backgroundColor = activeTd.style.borderColor;
+        tableModal.querySelector('#selCellBorderWidth').value = parseInt(activeTd.style.borderWidth);
+      }
     } else {
       tableModal.querySelector('.input-table-bgcolor').style.backgroundColor = '';
       tableModal.querySelector('.input-table-textcolor').style.backgroundColor = '';
@@ -70832,7 +70838,11 @@ class Resizeable {
     pane.addEventListener('mousedown', onMouseDown);
     pane.ownerDocument.addEventListener('mousemove', onMove);
     pane.ownerDocument.addEventListener('mouseup', onUp);
-    pane.addEventListener('touchstart', onTouchDown);
+
+    // pane.addEventListener('touchstart', onTouchDown);
+    pane.addEventListener('touchstart', onTouchDown, {
+      passive: true
+    });
     pane.ownerDocument.addEventListener('touchmove', onTouchMove);
     pane.ownerDocument.addEventListener('touchend', onTouchEnd);
     const resizing = () => {
@@ -76938,7 +76948,15 @@ class ContentBuilder {
               let selectedText = selection.toString().trim();
               if (selectedText.length > 0) {
                 let elm = this.dom.getElm();
-                if (!this.dom.hasClass(elm.parentNode.parentNode, 'is-builder')) {
+                if (this.dom.getStyle(elm, 'display') === 'inline') {
+                  elm = elm.closest('li,p,h1,h2,h3,h4,h5,h6,div,pre,td,th,li');
+                  if (elm) {
+                    if (!this.dom.hasClass(elm.parentNode.parentNode, 'is-builder')) {
+                      this.dom.selectElementContents(elm);
+                    }
+                  }
+                } else {
+                  // block
                   this.dom.selectElementContents(elm);
                 }
               }
@@ -78442,48 +78460,49 @@ class ContentBuilder {
       }, 600);
       return;
     }
+    if (!this.controlPanel) {
+      // Font Family
+      let iframeRte = this.rte.rteFontFamilyOptions.querySelector('iframe');
+      let doc1 = iframeRte.contentWindow.document;
 
-    // Font Family
-    let iframeRte = this.rte.rteFontFamilyOptions.querySelector('iframe');
-    let doc1 = iframeRte.contentWindow.document;
-
-    // Icons
-    let iframeIcons = this.rte.rteIconOptions.querySelector('iframe');
-    let doc3 = iframeIcons.contentWindow.document;
-    if (doc1.body.innerHTML === '') {
-      doc1.open();
-      if (!this.opts.emailMode) {
-        doc1.write(util.getFontFamilyHTML());
-      } else {
-        doc1.write(util.getFontFamilyEmail());
-      }
-      doc1.close();
-    } else {
-      this.util.refreshFontFamilyStyle1();
-    }
-    const fontModal = this.builderStuff.querySelector('.is-modal.pickfontfamily');
-    if (fontModal) {
-      let iframePanel = fontModal.querySelector('iframe');
-      let doc2 = iframePanel.contentWindow.document;
-      if (doc2.body.innerHTML === '') {
-        doc2.open();
+      // Icons
+      let iframeIcons = this.rte.rteIconOptions.querySelector('iframe');
+      let doc3 = iframeIcons.contentWindow.document;
+      if (doc1.body.innerHTML === '') {
+        doc1.open();
         if (!this.opts.emailMode) {
-          doc2.write(util.getFontFamilyHTML(true));
+          doc1.write(util.getFontFamilyHTML());
+        } else {
+          doc1.write(util.getFontFamilyEmail());
+        }
+        doc1.close();
+      } else {
+        this.util.refreshFontFamilyStyle1();
+      }
+      const fontModal = this.builderStuff.querySelector('.is-modal.pickfontfamily');
+      if (fontModal) {
+        let iframePanel = fontModal.querySelector('iframe');
+        let doc2 = iframePanel.contentWindow.document;
+        if (doc2.body.innerHTML === '') {
+          doc2.open();
+          if (!this.opts.emailMode) {
+            doc2.write(util.getFontFamilyHTML(true));
+          } else {
+            doc2.write(util.getFontFamilyEmail(true));
+          }
+          doc2.close();
         } else {
-          doc2.write(util.getFontFamilyEmail(true));
+          this.util.refreshFontFamilyStyle2();
         }
-        doc2.close();
+      }
+      if (doc3.body.innerHTML === '') {
+        doc3.open();
+        doc3.write(this.rte.getIconsHTML());
+        doc3.close();
       } else {
-        this.util.refreshFontFamilyStyle2();
+        this.rte.refreshIconsStyle();
       }
     }
-    if (doc3.body.innerHTML === '') {
-      doc3.open();
-      doc3.write(this.rte.getIconsHTML());
-      doc3.close();
-    } else {
-      this.rte.refreshIconsStyle();
-    }
 
     // Snippets (Modal)
     let modalSnippets = this.builderStuff.querySelector('.snippets');
@@ -78933,27 +78952,24 @@ class ContentBuilder {
       span.setAttribute('data-keep', '');
     });
 
-    // // Cleanup all elements with unwanted style
-    // let elms = col.querySelectorAll('*');
-    // Array.prototype.forEach.call(elms, (elm) => {
-    //     let attr = elm.getAttribute('style');
-    //     if(attr) {
-    //         if(attr.indexOf('font-size')!==-1){
-    //             elm.setAttribute('data-keep-font-size','');
-    //         }
-    //         if(attr.indexOf('background-color')!==-1){
-    //             elm.setAttribute('data-keep-background-color','');
-    //         }
-    //         if(attr.indexOf('background')!==-1){
-    //             elm.setAttribute('data-keep-background','');
-    //         }
-    //         if(attr.indexOf('line-height')!==-1){
-    //             elm.setAttribute('data-keep-line-height','');
-    //         }
-    //     }
-    // });
-    // this.autoclean=true;
-
+    // Cleanup all elements with unwanted style
+    let elms = col.querySelectorAll('[style]');
+    elms.forEach(elm => {
+      let attr = elm.getAttribute('style');
+      if (attr.includes('font-size')) {
+        elm.setAttribute('data-keep-font-size', '');
+      }
+      if (attr.includes('background-color')) {
+        elm.setAttribute('data-keep-background-color', '');
+      }
+      if (attr.includes('background')) {
+        elm.setAttribute('data-keep-background', '');
+      }
+      if (attr.includes('line-height')) {
+        elm.setAttribute('data-keep-line-height', '');
+      }
+    });
+    this.autoclean = true;
     if ((e.ctrlKey || e.metaKey) && e.which === 86) ;
     if (this.opts.elementSelection && !this.emailMode) {
       if ((e.ctrlKey || e.metaKey) && e.which === 65) {
@@ -79298,61 +79314,42 @@ class ContentBuilder {
       }
     });
 
-    // // Cleanup all elements with unwanted style
-    // if(this.autoclean){
-    //     let elms = col.querySelectorAll('*');
-    //     Array.prototype.forEach.call(elms, (elm) => {
-    //         let attr = elm.getAttribute('style');
-    //         if(attr) {
-    //             if(attr.indexOf('font-size')!==-1){
-    //                 let attrkeep = elm.getAttribute('data-keep-font-size');
-    //                 if (!attrkeep) {
-    //                     // Remove unwanted font size
-    //                     elm.style.fontSize = '';
-    //                 }
-    //             }
-    //             if(attr.indexOf('background-color')!==-1){
-    //                 let attrkeep = elm.getAttribute('data-keep-background-color');
-    //                 if (!attrkeep) {
-    //                     // Remove unwanted background color
-    //                     elm.style.backgroundColor = '';
-    //                 }
-    //             }
-    //             if(attr.indexOf('background')!==-1){
-    //                 let attrkeep = elm.getAttribute('data-keep-background');
-    //                 if (!attrkeep) {
-    //                     // Remove unwanted background
-    //                     elm.style.background = '';
-    //                 }
-    //             }
-    //             if(attr.indexOf('line-height')!==-1){
-    //                 let attrkeep = elm.getAttribute('data-keep-line-height');
-    //                 if (!attrkeep) {
-    //                     // Remove unwanted line height
-    //                     elm.style.lineHeight = '';
-    //                 }
-    //             }
-    //         }
-    //     });
-    //     elms = col.querySelectorAll('[data-keep-font-size]');
-    //     Array.prototype.forEach.call(elms, (elm) => {
-    //         elm.removeAttribute('data-keep-font-size');
-    //     });
-    //     elms = col.querySelectorAll('[data-keep-background-color]');
-    //     Array.prototype.forEach.call(elms, (elm) => {
-    //         elm.removeAttribute('data-keep-background-color');
-    //     });
-    //     elms = col.querySelectorAll('[data-keep-background]');
-    //     Array.prototype.forEach.call(elms, (elm) => {
-    //         elm.removeAttribute('data-keep-background');
-    //     });
-    //     elms = col.querySelectorAll('[data-keep-line-height]');
-    //     Array.prototype.forEach.call(elms, (elm) => {
-    //         elm.removeAttribute('data-keep-line-height');
-    //     });                       
-    // }
-    // this.autoclean =false;
-
+    // Cleanup all elements with unwanted style
+    if (this.autoclean) {
+      let elms = col.querySelectorAll('[style]');
+      elms.forEach(elm => {
+        let attr = elm.getAttribute('style');
+        if (attr.includes('font-size')) {
+          let attrkeep = elm.hasAttribute('data-keep-font-size');
+          if (!attrkeep) {
+            elm.style.fontSize = '';
+          }
+        }
+        if (attr.includes('background-color')) {
+          let attrkeep = elm.hasAttribute('data-keep-background-color');
+          if (!attrkeep) {
+            elm.style.backgroundColor = '';
+          }
+        }
+        if (attr.includes('background')) {
+          let attrkeep = elm.hasAttribute('data-keep-background');
+          if (!attrkeep) {
+            elm.style.background = '';
+          }
+        }
+        if (attr.includes('line-height')) {
+          let attrkeep = elm.hasAttribute('data-keep-line-height');
+          if (!attrkeep) {
+            elm.style.lineHeight = '';
+          }
+        }
+      });
+      col.querySelectorAll('[data-keep-font-size]').forEach(elm => elm.removeAttribute('data-keep-font-size'));
+      col.querySelectorAll('[data-keep-background-color]').forEach(elm => elm.removeAttribute('data-keep-background-color'));
+      col.querySelectorAll('[data-keep-background]').forEach(elm => elm.removeAttribute('data-keep-background'));
+      col.querySelectorAll('[data-keep-line-height]').forEach(elm => elm.removeAttribute('data-keep-line-height'));
+    }
+    this.autoclean = false;
     var el;
     // var curr;
     try {
@@ -79616,25 +79613,31 @@ class ContentBuilder {
            <span class="size-24">Heading</span>
        So, blocks checking below is made to fix it.
       */
-      let blockSelection = false;
-      if (blocks.length === 1) {
-        if (blocks[0].innerText.trim() === selection.toString().trim()) {
-          let range = document.createRange();
-          range.selectNodeContents(blocks[0]);
-          selection.removeAllRanges();
-          selection.addRange(range);
-          blockSelection = true;
-        }
-      }
-      if (!blockSelection) {
-        const container = this.dom.getElm();
-        const sameSelection = container && container.innerText === selection.toString().trim();
-        if (sameSelection || selection.toString().trim() === '') {
-          let range = document.createRange();
-          range.selectNodeContents(container);
-          selection.removeAllRanges();
-          selection.addRange(range);
+      try {
+        let blockSelection = false;
+        if (selection.toString().trim() !== '') {
+          if (blocks.length === 1) {
+            if (blocks[0].innerText.trim() === selection.toString().trim()) {
+              let range = document.createRange();
+              range.selectNodeContents(blocks[0]);
+              selection.removeAllRanges();
+              selection.addRange(range);
+              blockSelection = true;
+            }
+          }
+          if (!blockSelection) {
+            const container = this.dom.getElm();
+            const sameSelection = container && container.innerText === selection.toString().trim();
+            if (sameSelection || selection.toString().trim() === '') {
+              let range = document.createRange();
+              range.selectNodeContents(container);
+              selection.removeAllRanges();
+              selection.addRange(range);
+            }
+          }
         }
+      } catch (e) {
+        // Do Nothing
       }
       this.doc.execCommand('insertHTML', false, sPastedText);
       if (this.activeCol) {