@innovastudio/contentbuilder 1.4.124 → 1.4.126

package/public/contentbuilder/contentbuilder.esm.js

@@ -1439,7 +1439,7 @@ class Util {
       const selection = this.builder.win.getSelection();
       const container = this.builder.dom.getElm();
       if (!container) return;
-      const sameSelection = container && container.innerText === selection.toString();
+      const sameSelection = container && container.innerText === selection.toString().trim();
       if (sameSelection || selection.toString().trim() === '') {
         this.builder.selectionElm = container;
 
@@ -3395,7 +3395,7 @@ class Dom {
         if (callback) callback(false);
         return;
       }
-      const sameSelection = container && container.innerText === selection.toString();
+      const sameSelection = container && container.innerText === selection.toString().trim();
       let newElement;
       if (sameSelection || selection.toString().trim() === '') {
         newElement = this.updateSelection(action, value, container);
@@ -3519,7 +3519,7 @@ class Dom {
       const selection = this.builder.win.getSelection();
       let container = this.getElm();
       if (!container) return;
-      const sameSelection = container && container.innerText === selection.toString();
+      const sameSelection = container && container.innerText === selection.toString().trim();
       if (currentElement) {
         if (mode === 'block') if (this.getStyle(container, 'display') === 'inline') {
           container = this.getParentBlock(container);
@@ -3592,7 +3592,7 @@ class Dom {
       }
     }
     let blocks = [];
-    const blockElms = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'pre'];
+    const blockElms = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'pre', 'td', 'th'];
     elements.forEach(item => {
       const tagName = item.tagName.toLowerCase();
       if (blockElms.includes(tagName)) {
@@ -3600,6 +3600,21 @@ class Dom {
         blocks.push(item);
       }
     });
+
+    /*
+    If a block is double clicked to select the block, the selection goes to the next block as well.
+    This seems a default behavior (tested with simple contentEditable div). So the blocks contains 2 blocks.
+    To fix this, perform an extra test here:
+    */
+    if (blocks.length === 2) {
+      // console.log(blocks[0].innerText.trim());
+      // console.log(selection.toString().trim());
+      if (blocks[0].innerText.trim() === selection.toString().trim()) {
+        blocks.pop();
+        // console.log('remove last')
+      }
+    }
+
     if (multiSelectBlocks) {
       return blocks;
     } else {
@@ -3733,7 +3748,7 @@ class Dom {
       const selection = this.builder.win.getSelection();
       const container = this.getElm();
       if (!container) return;
-      const sameSelection = container && container.innerText === selection.toString();
+      const sameSelection = container && container.innerText === selection.toString().trim();
       if (sameSelection || selection.toString().trim() === '') {
         this.updateSelectionToggle(action, value, config, container);
       } else {
@@ -4155,7 +4170,7 @@ class Dom {
     const anchorNode = selection.anchorNode;
     if (!anchorNode) return;
     const container = anchorNode.nodeType !== Node.TEXT_NODE && anchorNode.nodeType !== Node.COMMENT_NODE ? anchorNode : anchorNode.parentElement;
-    const sameSelection = container && container.innerText === selection.toString();
+    const sameSelection = container && container.innerText === selection.toString().trim();
     if (sameSelection || selection.toString().trim() === '') {
       this.cleanElement(container);
     } else {
@@ -66285,7 +66300,7 @@ class Rte {
           } else if (num === '+' || num === '-') {
             for (let i = 0; i < Object.keys(classes).length; i++) {
               let className = Object.values(classes)[i];
-              if (dom.hasClass(container, className)) {
+              if (container.closest('.' + className) && !container.classList.contains('is-builder')) {
                 if (num === '+') {
                   if (i + 1 === Object.keys(classes).length) return;
                   newClassName = Object.values(classes)[i + 1];
@@ -76867,8 +76882,10 @@ class ContentBuilder {
           // ON PASTE
           // col.addEventListener('paste', this.handleCellPaste.bind(this));
           col.addEventListener('paste', e => {
-            const clipboardData = (e.clipboardData || window.clipboardData).getData('text');
-            this.handleCellPaste(clipboardData);
+            e.preventDefault();
+            const clipboardDataText = (e.clipboardData || window.clipboardData).getData('text');
+            const clipboardDataHtml = (e.clipboardData || window.clipboardData).getData('text/html');
+            this.handleCellPaste(clipboardDataText, clipboardDataHtml);
           });
           col.setAttribute('data-click', true);
         }
@@ -79046,6 +79063,7 @@ class ContentBuilder {
       // CMD-B
 
       if (this.opts.useCssClasses) {
+        this.uo.saveForUndo();
         this.dom.execCommandToggle('fontWeight', '', this.opts.cssClasses);
         this.opts.onChange();
         e.preventDefault();
@@ -79056,6 +79074,7 @@ class ContentBuilder {
       // CMD-I
 
       if (this.opts.useCssClasses) {
+        this.uo.saveForUndo();
         this.dom.execCommandToggle('fontStyle', '', this.opts.cssClasses);
         this.opts.onChange();
         e.preventDefault();
@@ -79066,6 +79085,7 @@ class ContentBuilder {
       // CMD-U
 
       if (this.opts.useCssClasses) {
+        this.uo.saveForUndo();
         this.dom.execCommandToggle('textUnderline', '', this.opts.cssClasses);
         this.opts.onChange();
         e.preventDefault();
@@ -79076,6 +79096,7 @@ class ContentBuilder {
       // CMD-S
 
       if (this.opts.useCssClasses) {
+        this.uo.saveForUndo();
         this.dom.execCommandToggle('textLinethrough', '', this.opts.cssClasses);
         this.opts.onChange();
         e.preventDefault();
@@ -79083,6 +79104,8 @@ class ContentBuilder {
       }
     }
     if (isCmd && e.which === 221) {
+      this.uo.saveForUndo();
+
       // CMD-]
       e.preventDefault();
       document.execCommand('indent', false, null);
@@ -79091,6 +79114,8 @@ class ContentBuilder {
       markSpan();
     }
     if (isCmd && e.which === 219) {
+      this.uo.saveForUndo();
+
       // CMD-]
       e.preventDefault();
       document.execCommand('outdent', false, null);
@@ -79322,307 +79347,326 @@ class ContentBuilder {
       this.opts.onChange();
     }, 2000);
   }
-  handleCellPaste(clipboardData) {
+  handleCellPaste(clipboardData, clipboardDataHtml) {
     this.uo.saveForUndo();
     const util = this.util;
     util.saveSelection(); //required. Without this, CTRL-A (select element) & CTRL-V won't replace the element, but will paste at the end of the element.
 
-    let contentword = this.doc.querySelector('#idContentWord');
-    if (contentword) contentword.parentNode.removeChild(contentword);
-    var el;
-    var curr;
-    if (this.win.getSelection) {
-      curr = this.win.getSelection().getRangeAt(0).commonAncestorContainer;
-      if (curr.nodeType === 3) {
-        //ini text node
-        el = curr.parentNode;
-      } else {
-        el = curr;
-      }
-    } else if (this.doc.selection) {
-      curr = this.doc.selection.createRange();
-      el = this.doc.selection.createRange().parentElement();
-    }
-    var tmptop = el.getBoundingClientRect().top + this.win.pageYOffset;
-    const html = '<div style="position:absolute;z-index:-1000;top:' + tmptop + 'px;left:-1000px;width:100px;height:100px;overflow:auto;" name="idContentWord" id="idContentWord" contenteditable="true"></div>';
-    if (!this.iframe) {
-      this.dom.appendHtml(this.builderStuff, html);
-    } else {
-      this.dom.appendHtml(this.contentStuff, html);
-    }
-    contentword = this.doc.querySelector('#idContentWord');
-    contentword.focus();
-    setTimeout(() => {
-      try {
-        var sPastedText = '';
-        let contentword = this.doc.querySelector('#idContentWord');
-
-        //Check video embed
-        var bPasteObject = false;
-        var src = contentword.innerText;
-        if (!this.opts.disableAutoEmbedVideo) {
-          //var youRegex = /^http[s]?:\/\/(((www.youtube.com\/watch\?(feature=player_detailpage&)?)v=)|(youtu.be\/))([^#\&\?]*)/;
-          var youRegex = /^http[s]?:\/\/(((www.youtube.com\/watch\?(feature=player_detailpage&)?)v=)|(youtu.be\/))([^#&?]*)/;
-          var vimeoRegex = /^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/)|(video\/))?([0-9]+)\/?/;
-          var youRegexMatches = youRegex.exec(src);
-          var vimeoRegexMatches = vimeoRegex.exec(src);
-          if (youRegexMatches !== null || vimeoRegexMatches !== null) {
-            if (youRegexMatches !== null && youRegexMatches.length >= 7) {
-              var youMatch = youRegexMatches[6];
-              src = 'https://www.youtube.com/embed/' + youMatch + '?rel=0';
-            }
-            if (vimeoRegexMatches !== null && vimeoRegexMatches.length >= 7) {
-              var vimeoMatch = vimeoRegexMatches[6];
-              src = 'https://player.vimeo.com/video/' + vimeoMatch;
-            }
-            sPastedText = '<div class="embed-responsive embed-responsive-16by9"><iframe tabindex="0" width="560" height="315" src="' + src + '" frameborder="0" allowfullscreen=""></iframe></div>';
-            bPasteObject = true;
+    // Create a temporary div to hold the pasted HTML
+    let contentword = document.createElement('div');
+    contentword.innerHTML = clipboardDataHtml;
+    try {
+      var sPastedText = '';
+
+      //Check video embed
+      var bPasteObject = false;
+      var src = contentword.innerText;
+      if (!this.opts.disableAutoEmbedVideo) {
+        //var youRegex = /^http[s]?:\/\/(((www.youtube.com\/watch\?(feature=player_detailpage&)?)v=)|(youtu.be\/))([^#\&\?]*)/;
+        var youRegex = /^http[s]?:\/\/(((www.youtube.com\/watch\?(feature=player_detailpage&)?)v=)|(youtu.be\/))([^#&?]*)/;
+        var vimeoRegex = /^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/)|(video\/))?([0-9]+)\/?/;
+        var youRegexMatches = youRegex.exec(src);
+        var vimeoRegexMatches = vimeoRegex.exec(src);
+        if (youRegexMatches !== null || vimeoRegexMatches !== null) {
+          if (youRegexMatches !== null && youRegexMatches.length >= 7) {
+            var youMatch = youRegexMatches[6];
+            src = 'https://www.youtube.com/embed/' + youMatch + '?rel=0';
+          }
+          if (vimeoRegexMatches !== null && vimeoRegexMatches.length >= 7) {
+            var vimeoMatch = vimeoRegexMatches[6];
+            src = 'https://player.vimeo.com/video/' + vimeoMatch;
           }
+          sPastedText = '<div class="embed-responsive embed-responsive-16by9"><iframe tabindex="0" width="560" height="315" src="' + src + '" frameborder="0" allowfullscreen=""></iframe></div>';
+          bPasteObject = true;
         }
-        if (!bPasteObject) {
-          if (this.opts.paste === 'text') {
-            /*
-            let elms = contentword.querySelectorAll('p,h1,h2,h3,h4,h5,h6');
-            Array.prototype.forEach.call(elms, (elm) => {
-                elm.innerHTML = elm.innerHTML + ' '; //add space (&nbsp;)
-            });
-             // sPastedText = contentword.innerText;
-            sPastedText = contentword.innerHTML;
-            sPastedText = sPastedText.replace(/(<([^>]+)>)/ig,'<br>');
-            sPastedText = sPastedText.replace(/(<br\s*\/?>){3,}/gi, '<br>');
-            if(sPastedText.indexOf('<br>')===0) {
-                sPastedText = sPastedText.substring(4);
-            }
-            if(sPastedText.substring(sPastedText.length-4)==='<br>'){
-                sPastedText = sPastedText.substring(0, sPastedText.length-4);
-            }
-            sPastedText = sPastedText.trim();
-            */
+      }
+      if (!bPasteObject) {
+        if (this.opts.paste === 'text') {
+          /*
+          let elms = contentword.querySelectorAll('p,h1,h2,h3,h4,h5,h6');
+          Array.prototype.forEach.call(elms, (elm) => {
+              elm.innerHTML = elm.innerHTML + ' '; //add space (&nbsp;)
+          });
+           // sPastedText = contentword.innerText;
+          sPastedText = contentword.innerHTML;
+          sPastedText = sPastedText.replace(/(<([^>]+)>)/ig,'<br>');
+          sPastedText = sPastedText.replace(/(<br\s*\/?>){3,}/gi, '<br>');
+          if(sPastedText.indexOf('<br>')===0) {
+              sPastedText = sPastedText.substring(4);
+          }
+          if(sPastedText.substring(sPastedText.length-4)==='<br>'){
+              sPastedText = sPastedText.substring(0, sPastedText.length-4);
+          }
+          sPastedText = sPastedText.trim();
+          */
 
-            sPastedText = clipboardData;
-            // sPastedText = sPastedText.replace(/(?:\r\n|\r|\n)/g, '<br>');
+          sPastedText = clipboardData;
+          // sPastedText = sPastedText.replace(/(?:\r\n|\r|\n)/g, '<br>');
+        } else {
+          sPastedText = contentword.innerHTML;
+          if (this.opts.paste === 'html') {
+            //with styles
+            sPastedText = util.cleanHTML(sPastedText, false);
           } else {
-            sPastedText = contentword.innerHTML;
-            if (this.opts.paste === 'html') {
-              //with styles
-              sPastedText = util.cleanHTML(sPastedText, false);
-            } else {
-              //html-without-styles (default)
-              sPastedText = util.cleanHTML(sPastedText, true);
-            }
-            contentword.innerHTML = sPastedText;
-
-            /*
-            // remove attributes
-            if(this.opts.paste === 'html'){//with styles
-                 let elms = contentword.querySelectorAll('*');
-                Array.prototype.forEach.call(elms, (elm) => {
-                    for(let n = 0;n<elm.attributes.length;n++) {
-                        if(elm.attributes[n].name!=='style') elm.removeAttribute(elm.attributes[n].name);
-                    }
-                });
-             } else { //html-without-styles (default)
-                
-                const removeAttributes = (element) => {
-                    while (element.attributes.length > 0) {
-                        element.removeAttribute(element.attributes[0].name);
-                    }
-                };
-                let elms = contentword.querySelectorAll('*');
-                Array.prototype.forEach.call(elms, (elm) => {
-                    removeAttributes(elm);
-                });
-            }
-            */
-
-            /*
-            Additional Cleanup:
-                - Remove p inside li
-                - Remove li with white-space: pre
-            */
-            let elms = contentword.querySelectorAll('li');
-            Array.prototype.forEach.call(elms, elm => {
-              elm.style.whiteSpace = '';
-              const childNodes = elm.childNodes;
-              let i = childNodes.length;
-              while (i--) {
-                if (childNodes[i].tagName === 'P') {
-                  childNodes[i].outerHTML = childNodes[i].innerHTML;
-                }
-              }
-            });
-
-            // NOTE: paste <h1><p> jadi nempel
-
-            // // Source: https://gist.github.com/sbrin/6801034 
-            // jQuery('p', $editor).each(function(){
-            //     var str = jQuery(this).attr('style');
-            //     var matches = /mso-list:\w+ \w+([0-9]+)/.exec(str);
-            //     if (matches) {
-            //         jQuery(this).data('_listLevel',  parseInt(matches[1], 10));
-            //     }
-            // });
-            // var last_level=0;
-            // var pnt = null;
-            // jQuery('p', $editor).each(function(){
-            //     var cur_level = jQuery(this).data('_listLevel');
-            //     if(cur_level !== undefined){
-            //         var txt = jQuery(this).text();
-            //         var list_tag = '<ul></ul>';
-            //         if (/^\s*\w+\./.test(txt)) {
-            //             var matches = /([0-9])\./.exec(txt);
-            //             if (matches) {
-            //                 var start = parseInt(matches[1], 10);
-            //                 list_tag = start>1 ? '<ol start="' + start + '"></ol>' : '<ol></ol>';
-            //             }else{
-            //                 list_tag = '<ol></ol>';
-            //             }
-            //         }
-
-            //         if(cur_level>last_level){
-            //             if(last_level===0){
-            //                 jQuery(this).before(list_tag);
-            //                 pnt = jQuery(this).prev();
-            //             }else{
-            //                 pnt = jQuery(list_tag).appendTo(pnt);
-            //             }
-            //         }
-            //         if(cur_level<last_level){
-            //             for(var i=0; i<last_level-cur_level; i++){
-            //                 pnt = pnt.parent();
-            //             }
-            //         }
-            //         jQuery('span:first', this).remove();
-            //         pnt.append('<li>' + jQuery(this).html() + '</li>');
-            //         jQuery(this).remove();
-            //         last_level = cur_level;
-            //     }else{
-            //         last_level = 0;
-            //     }
-            // });
-            // //jQuery('[style]', $editor).removeAttr('style'); //done (see cleanHTML)
-            // jQuery('[align]', $editor).removeAttr('align');
-            // //jQuery('span', $editor).replaceWith(function() {return jQuery(this).contents();}); //done (see cleanHTML)
-            // jQuery('span:empty', $editor).remove();
-            // //jQuery("[class^='Mso']", $editor).removeAttr('class'); //done (see cleanHTML)
-            // jQuery('p:empty', $editor).remove();
-
-            sPastedText = contentword.innerHTML;
+            //html-without-styles (default)
+            sPastedText = util.cleanHTML(sPastedText, true);
           }
-        }
-        contentword = this.doc.querySelector('#idContentWord');
-        if (contentword) contentword.parentNode.removeChild(contentword);
-        util.restoreSelection();
-        var oSel = this.win.getSelection();
-        var range = oSel.getRangeAt(0);
-        range.extractContents();
-        range.collapse(true);
-        var docFrag = range.createContextualFragment(sPastedText);
-        var lastNode = docFrag.lastChild;
-        range.insertNode(docFrag);
-        if (this.activeCol) {
+          contentword.innerHTML = sPastedText;
+
           /*
-          Additional Cleanup:
-              - Remove empty elements (empty p, etc)
+          // remove attributes
+          if(this.opts.paste === 'html'){//with styles
+               let elms = contentword.querySelectorAll('*');
+              Array.prototype.forEach.call(elms, (elm) => {
+                  for(let n = 0;n<elm.attributes.length;n++) {
+                      if(elm.attributes[n].name!=='style') elm.removeAttribute(elm.attributes[n].name);
+                  }
+              });
+           } else { //html-without-styles (default)
+              
+              const removeAttributes = (element) => {
+                  while (element.attributes.length > 0) {
+                      element.removeAttribute(element.attributes[0].name);
+                  }
+              };
+              let elms = contentword.querySelectorAll('*');
+              Array.prototype.forEach.call(elms, (elm) => {
+                  removeAttributes(elm);
+              });
+          }
           */
-          // this.activeCol.find('h1:empty,h2:empty,h3:empty,h4:empty,h5:empty,h6:empty,p:empty').remove();
-          // this.activeCol.querySelectorAll('*:empty').forEach((x)=>{x.remove();}); // Makes <img> removed
-          this.activeCol.querySelectorAll('h1:empty,h2:empty,h3:empty,h4:empty,h5:empty,h6:empty,p:empty').forEach(x => {
-            x.remove();
-          });
 
           /*
           Additional Cleanup:
-              Fix HTML structure. The problem:
-              <p class="elm-active">
-                  ...Sometimes h1, h2, p can be pasted here..
-              </p>
+              - Remove p inside li
+              - Remove li with white-space: pre
           */
-          let elmActive = this.activeCol.querySelector('p.elm-active,h1.elm-active,h2.elm-active,h3.elm-active,h4.elm-active,h5.elm-active,h6.elm-active');
-          if (elmActive) {
-            let elms = elmActive.querySelectorAll('p,h1,h2,h3,h4,h5,h6');
-            if (elms.length > 0) {
-              let elmClosestElement = elmActive.nextElementSibling;
-
-              //Fix text that doesn't have paragraph
-              let textNodes = Array.from(elmActive.childNodes).filter(node => node.nodeType === 3 && node.textContent.trim().length > 1);
-              textNodes.forEach(node => {
-                const span = document.createElement('p');
-                node.after(span);
-                span.appendChild(node);
-              });
-              if (elmActive.firstElementChild && elmActive.childNodes.length === 1) {
-                if (elmActive.firstElementChild.tagName === 'SPAN') {
-                  // Paste HTML with styles 
+          let elms = contentword.querySelectorAll('li');
+          Array.prototype.forEach.call(elms, elm => {
+            elm.style.whiteSpace = '';
+            const childNodes = elm.childNodes;
+            let i = childNodes.length;
+            while (i--) {
+              if (childNodes[i].tagName === 'P') {
+                childNodes[i].outerHTML = childNodes[i].innerHTML;
+              }
+            }
+          });
 
-                  elmActive.outerHTML = elmActive.firstElementChild.innerHTML; //fix
+          // NOTE: paste <h1><p> jadi nempel
 
-                  // Re-clean empty elements
-                  this.activeCol.querySelectorAll('*:empty').forEach(x => {
-                    x.remove();
-                  });
+          // // Source: https://gist.github.com/sbrin/6801034 
+          // jQuery('p', $editor).each(function(){
+          //     var str = jQuery(this).attr('style');
+          //     var matches = /mso-list:\w+ \w+([0-9]+)/.exec(str);
+          //     if (matches) {
+          //         jQuery(this).data('_listLevel',  parseInt(matches[1], 10));
+          //     }
+          // });
+          // var last_level=0;
+          // var pnt = null;
+          // jQuery('p', $editor).each(function(){
+          //     var cur_level = jQuery(this).data('_listLevel');
+          //     if(cur_level !== undefined){
+          //         var txt = jQuery(this).text();
+          //         var list_tag = '<ul></ul>';
+          //         if (/^\s*\w+\./.test(txt)) {
+          //             var matches = /([0-9])\./.exec(txt);
+          //             if (matches) {
+          //                 var start = parseInt(matches[1], 10);
+          //                 list_tag = start>1 ? '<ol start="' + start + '"></ol>' : '<ol></ol>';
+          //             }else{
+          //                 list_tag = '<ol></ol>';
+          //             }
+          //         }
+
+          //         if(cur_level>last_level){
+          //             if(last_level===0){
+          //                 jQuery(this).before(list_tag);
+          //                 pnt = jQuery(this).prev();
+          //             }else{
+          //                 pnt = jQuery(list_tag).appendTo(pnt);
+          //             }
+          //         }
+          //         if(cur_level<last_level){
+          //             for(var i=0; i<last_level-cur_level; i++){
+          //                 pnt = pnt.parent();
+          //             }
+          //         }
+          //         jQuery('span:first', this).remove();
+          //         pnt.append('<li>' + jQuery(this).html() + '</li>');
+          //         jQuery(this).remove();
+          //         last_level = cur_level;
+          //     }else{
+          //         last_level = 0;
+          //     }
+          // });
+          // //jQuery('[style]', $editor).removeAttr('style'); //done (see cleanHTML)
+          // jQuery('[align]', $editor).removeAttr('align');
+          // //jQuery('span', $editor).replaceWith(function() {return jQuery(this).contents();}); //done (see cleanHTML)
+          // jQuery('span:empty', $editor).remove();
+          // //jQuery("[class^='Mso']", $editor).removeAttr('class'); //done (see cleanHTML)
+          // jQuery('p:empty', $editor).remove();
 
-                  //place cursor
-                  if (elmClosestElement) this.dom.moveCursorToElement(elmClosestElement.previousElementSibling);else this.dom.moveCursorToElement(this.activeCol);
-                  let builderActive = this.doc.querySelector('.builder-active');
-                  if (builderActive) this.applyBehaviorOn(builderActive);
+          sPastedText = contentword.innerHTML;
+        }
+      }
+      contentword = this.doc.querySelector('#idContentWord');
+      if (contentword) contentword.parentNode.removeChild(contentword);
+      util.restoreSelection();
 
-                  //Trigger Change event
-                  this.opts.onChange();
+      /*
+      var oSel = this.win.getSelection();
+      var range = oSel.getRangeAt(0);
+      range.extractContents();
+      range.collapse(true);
+      var docFrag = range.createContextualFragment(sPastedText);
+      var lastNode = docFrag.lastChild;
+       range.insertNode(docFrag);
+      */
 
-                  //Trigger Render event
-                  this.opts.onRender();
-                  return;
-                }
-              }
+      /*
+      When selection is made by double clicking text (to select the entire block),
+      the actual selection goes to the next block as well (default behavior, tested using a simple contentEditable div).
+      To fix this, re-select the contents inside.
+      */
+
+      const blocks = this.dom.getSelectedBlocks();
+      const selection = this.win.getSelection();
+
+      /* 
+      Check same selection for the block first (this is more accurate than the sameSelection checking below).
+      In case of double click (to select the entire block), for example, on this element:
+           <h2 class="font-light size-54"><span class="size-24">Heading</span> 2 here</h2>
+       The sameSelection checking below is failed, since the container = this.getElm() will return not the entire h2, but only
+           <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);
+        }
+      }
+      document.execCommand('insertHTML', false, sPastedText);
+      if (this.activeCol) {
+        /*
+        Additional Cleanup:
+            - Remove empty elements (empty p, etc)
+        */
+        // this.activeCol.find('h1:empty,h2:empty,h3:empty,h4:empty,h5:empty,h6:empty,p:empty').remove();
+        // this.activeCol.querySelectorAll('*:empty').forEach((x)=>{x.remove();}); // Makes <img> removed
+        this.activeCol.querySelectorAll('h1:empty,h2:empty,h3:empty,h4:empty,h5:empty,h6:empty,p:empty').forEach(x => {
+          x.remove();
+        });
 
-              // Paste HTML without styles 
-              elmActive.outerHTML = elmActive.innerHTML; //fix
+        /*
+        Additional Cleanup:
+            Fix HTML structure. The problem:
+            <p class="elm-active">
+                ...Sometimes h1, h2, p can be pasted here..
+            </p>
+        */
+        let elmActive = this.activeCol.querySelector('p.elm-active,h1.elm-active,h2.elm-active,h3.elm-active,h4.elm-active,h5.elm-active,h6.elm-active');
+        if (elmActive) {
+          let elms = elmActive.querySelectorAll('p,h1,h2,h3,h4,h5,h6');
+          if (elms.length > 0) {
+            let elmClosestElement = elmActive.nextElementSibling;
+
+            //Fix text that doesn't have paragraph
+            let textNodes = Array.from(elmActive.childNodes).filter(node => node.nodeType === 3 && node.textContent.trim().length > 1);
+            textNodes.forEach(node => {
+              const span = document.createElement('p');
+              node.after(span);
+              span.appendChild(node);
+            });
+            if (elmActive.firstElementChild && elmActive.childNodes.length === 1) {
+              if (elmActive.firstElementChild.tagName === 'SPAN') {
+                // Paste HTML with styles 
 
-              // Re-clean empty elements
-              // this.activeCol.querySelectorAll('*:empty').forEach((x)=>{x.remove();}); // Makes <img> removed
-              this.activeCol.find('h1:empty,h2:empty,h3:empty,h4:empty,h5:empty,h6:empty,p:empty').remove();
+                elmActive.outerHTML = elmActive.firstElementChild.innerHTML; //fix
 
-              //place cursor
-              if (elmClosestElement) this.dom.moveCursorToElement(elmClosestElement.previousElementSibling);else this.dom.moveCursorToElement(this.activeCol);
-              let builderActive = this.doc.querySelector('.builder-active');
-              if (builderActive) this.applyBehaviorOn(builderActive);
+                // Re-clean empty elements
+                this.activeCol.querySelectorAll('*:empty').forEach(x => {
+                  x.remove();
+                });
 
-              //Trigger Change event
-              this.opts.onChange();
+                //place cursor
+                if (elmClosestElement) this.dom.moveCursorToElement(elmClosestElement.previousElementSibling);else this.dom.moveCursorToElement(this.activeCol);
+                let builderActive = this.doc.querySelector('.builder-active');
+                if (builderActive) this.applyBehaviorOn(builderActive);
 
-              //Trigger Render event
-              this.opts.onRender();
-              return;
+                //Trigger Change event
+                this.opts.onChange();
+
+                //Trigger Render event
+                this.opts.onRender();
+                return;
+              }
             }
+
+            // Paste HTML without styles 
+            elmActive.outerHTML = elmActive.innerHTML; //fix
+
+            // Re-clean empty elements
+            // this.activeCol.querySelectorAll('*:empty').forEach((x)=>{x.remove();}); // Makes <img> removed
+            this.activeCol.find('h1:empty,h2:empty,h3:empty,h4:empty,h5:empty,h6:empty,p:empty').remove();
+
+            //place cursor
+            if (elmClosestElement) this.dom.moveCursorToElement(elmClosestElement.previousElementSibling);else this.dom.moveCursorToElement(this.activeCol);
+            let builderActive = this.doc.querySelector('.builder-active');
+            if (builderActive) this.applyBehaviorOn(builderActive);
+
+            //Trigger Change event
+            this.opts.onChange();
+
+            //Trigger Render event
+            this.opts.onRender();
+            return;
           }
         }
-        range.setStartAfter(lastNode);
-        range.setEndAfter(lastNode);
-        range.collapse(false);
-        var comCon = range.commonAncestorContainer;
-        if (comCon && comCon.parentNode) {
-          try {
-            comCon.parentNode.normalize();
-          } catch (e) {
-            // Do Nothing
+      }
+
+      /*
+      range.setStartAfter(lastNode);
+      range.setEndAfter(lastNode);
+      range.collapse(false);
+      var comCon = range.commonAncestorContainer;
+      if (comCon && comCon.parentNode) {
+          try { comCon.parentNode.normalize(); } catch (e) {
+              // Do Nothing
           }
-        }
-        oSel.removeAllRanges();
-        oSel.addRange(range);
-        let builderActive = this.doc.querySelector('.builder-active');
-        if (builderActive) this.applyBehaviorOn(builderActive);
+      }
+      oSel.removeAllRanges();
+      oSel.addRange(range);
+      */
 
-        //Trigger Change event
-        this.opts.onChange();
+      let builderActive = this.doc.querySelector('.builder-active');
+      if (builderActive) this.applyBehaviorOn(builderActive);
 
-        //Trigger Render event
-        this.opts.onRender();
-      } catch (e) {
-        let contentword = this.doc.querySelector('#idContentWord');
-        if (contentword) contentword.parentNode.removeChild(contentword);
-      }
-    }, 800);
+      //Trigger Change event
+      this.opts.onChange();
+
+      //Trigger Render event
+      this.opts.onRender();
+    } catch (e) {
+
+      // Do Nothing
+    }
   }
   cellSelected() {
     const util = this.util;