@innovastudio/contentbox 1.6.10 → 1.6.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.10",
+  "version": "1.6.12",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -52,7 +52,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.4.131",
+    "@innovastudio/contentbuilder": "^1.4.135",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.esm.js

@@ -22799,7 +22799,6 @@ class Util$1 {
     const dom = this.dom;
     const html = `
         <input type="text" class="style-helper-input" style="display:none;">
-        <label class="style-helper-label" style="display:none;"></label>
         <button class="style-helper-button-classic classic" style="display:none;"><svg><use xlink:href="#ion-code-working"></use></svg></button>
         <select class="style-helper-select" style="display:none;"><option value=""></option></select>
 
@@ -22847,7 +22846,6 @@ class Util$1 {
       return window.getComputedStyle(btn.querySelector('svg'), null).getPropertyValue('fill');
     };
     const inp = this.builder.builderStuff.querySelector('.style-helper-input');
-    const lbl = this.builder.builderStuff.querySelector('.style-helper-label');
     const sel = this.builder.builderStuff.querySelector('.style-helper-select');
     const btnClassic = this.builder.builderStuff.querySelector('.style-helper-button-classic');
     this.builder.styleModalColor = getVal('.modal-color', 'background-color');
@@ -22892,9 +22890,6 @@ class Util$1 {
     this.builder.styleInputBorderBottom = window.getComputedStyle(inp, null).getPropertyValue('border-bottom');
     this.builder.styleInputColor = window.getComputedStyle(inp, null).getPropertyValue('color');
 
-    // Label (ex. used in 'Search & Replace' plugin)
-    this.builder.styleLabelColor = window.getComputedStyle(lbl, null).getPropertyValue('color');
-
     // Button Classic (ex. used in 'Search & Replace' plugin)
     this.builder.styleButtonClassicBackground = window.getComputedStyle(btnClassic, null).getPropertyValue('background-color');
     this.builder.styleButtonClassicColor = window.getComputedStyle(btnClassic, null).getPropertyValue('color');
@@ -24544,7 +24539,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)) {
@@ -35423,7 +35418,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);
@@ -67930,7 +67929,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>
@@ -67939,7 +67938,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>
@@ -67947,7 +67946,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>
@@ -67959,7 +67958,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>
@@ -67969,7 +67968,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>
@@ -67982,7 +67981,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>
@@ -68001,7 +68000,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>
@@ -68017,7 +68016,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>
@@ -68031,7 +68030,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>
@@ -68046,7 +68045,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>
@@ -68064,7 +68063,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>
@@ -68078,7 +68077,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>
@@ -68094,7 +68093,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>
@@ -68108,7 +68107,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>
@@ -68128,7 +68127,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>
@@ -68137,7 +68136,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>
@@ -68149,7 +68148,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>
@@ -68163,7 +68162,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>
@@ -68183,7 +68182,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>
@@ -68196,7 +68195,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>
@@ -71862,10 +71861,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 = '';
@@ -91778,7 +91779,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 = () => {
@@ -97884,7 +97889,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);
                 }
               }
@@ -99388,48 +99401,49 @@ class ContentBuilder {
       }, 600);
       return;
     }
-
-    // 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();
+    if (!this.controlPanel) {
+      // 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) {
-          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');
@@ -99879,27 +99893,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) {
@@ -100244,61 +100255,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 {
@@ -100562,25 +100554,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) {
@@ -125298,7 +125296,12 @@ class IframePanel {
     }
 
     document.body.style.overflowY = 'hidden';
-    let checkLoad = setInterval(() => {
+
+    const sleep = s => new Promise(p => setTimeout(p, s * 1000 | 0));
+
+    const timeoutHandler = async () => {
+      await sleep(0.2);
+
       if (iframe.contentDocument.readyState === 'complete') {
         iframe.contentDocument.body.classList.add('iframe-body'); // add .iframe-body class that is required by box/flex.css
         // Check if editable container is ready
@@ -125306,13 +125309,18 @@ class IframePanel {
         let wrapper = iframe.contentDocument.querySelector(this.opts.page);
 
         if (wrapper) {
-          clearInterval(checkLoad);
           this.onReady(iframe);
+        } else {
+          timeoutHandler();
         }
 
         iframe.contentDocument.body.style.display = 'flex'; // this removes empty space at the bottom of the page
+      } else {
+        timeoutHandler();
       }
-    }, 200);
+    };
+
+    timeoutHandler();
   }
 
   showTooltip() {