@innovastudio/contentbox 1.1.2 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -38,7 +38,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.0.82",
+    "@innovastudio/contentbuilder": "^1.0.83",
     "axios": "^0.21.4",
     "cors": "^2.8.5",
     "express": "^4.17.1",

package/public/contentbox/contentbox.esm.js

@@ -50298,7 +50298,7 @@ class Image {
         // if(initialWidth <200 && initialHeight<200) {
 
 
-        if (initialWidth <= 1600 && initialHeight <= 1600) {
+        if (initialWidth <= 1600 && initialHeight <= 1600 && this.builder.opts.maxEmbedImageWidth >= 1600) {
           let reader = new FileReader();
           reader.addEventListener('load', e => {
             if (!document.getElementById('__preview')) {
@@ -70669,12 +70669,6 @@ class ContentBuilder {
                 for (let n = 0; n < elm.attributes.length; n++) {
                   if (elm.attributes[n].name !== 'style') elm.removeAttribute(elm.attributes[n].name);
                 }
-              }); // Extra: 
-              // Remove li with white-space: pre;
-
-              elms = contentword.querySelectorAll('li');
-              Array.prototype.forEach.call(elms, elm => {
-                elm.style.whiteSpace = '';
               });
             } else {
               //html-without-styles (default)
@@ -70688,14 +70682,26 @@ class ContentBuilder {
               Array.prototype.forEach.call(elms, elm => {
                 removeAttributes(elm);
               });
-            } // NOTE: paste <h1><p> jadi nempel
-            // NOTE ($editor => contentword)
-            // if($editor.children('p,h1,h2,h3,h4,h5,h6,ul,li').length>1){
-            //     //Fix text that doesn't have paragraph
-            //     $editor.contents().filter(function() {
-            //         return (this.nodeType === 3 && jQuery.trim(this.nodeValue)!=='');
-            //     }).wrap( "<p></p>" ).end().filter("br").remove();
-            // }
+            }
+            /*
+            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');
@@ -70748,16 +70754,12 @@ class ContentBuilder {
             // //jQuery("[class^='Mso']", $editor).removeAttr('class'); //done (see cleanHTML)
             // jQuery('p:empty', $editor).remove();
 
-
             sPastedText = contentword.innerHTML;
           }
         }
 
         contentword = document.querySelector('#idContentWord');
-        if (contentword) contentword.parentNode.removeChild(contentword); // LATER
-        // jQuery('.cell-active').find('.elm-active').removeClass('elm-active');
-        // jQuery("#divElementTool").css("display", "none"); //force hide ellement tool 
-
+        if (contentword) contentword.parentNode.removeChild(contentword);
         util.restoreSelection();
         var oSel = window.getSelection();
         var range = oSel.getRangeAt(0);
@@ -70765,16 +70767,80 @@ class ContentBuilder {
         range.collapse(true);
         var docFrag = range.createContextualFragment(sPastedText);
         var lastNode = docFrag.lastChild;
-        range.insertNode(docFrag); // // Fix HTML structure (Sometimes h1 can be pasted inside p)
-        // let elms = col.querySelectorAll('p,h1,h2,h3,h4,h5,h6');
-        // Array.prototype.forEach.call(elms, (elm) => {
-        //     let elmswithin = elm.querySelectorAll('p,h1,h2,h3,h4,h5,h6');
-        //     Array.prototype.forEach.call(elmswithin, (elmwithin) => {
-        //         elmwithin.outerHTML = elmwithin.innerHTML;
-        //     });
-        // });
-        // LATER
-        // $block.find('h1:empty,h2:empty,h3:empty,h4:empty,h5:empty,h6:empty,p:empty').remove();
+        range.insertNode(docFrag);
+
+        if (this.activeCol) {
+          /*
+          Additional Cleanup:
+              - Remove empty elements (empty p, etc)
+          */
+          // $block.find('h1:empty,h2:empty,h3:empty,h4:empty,h5:empty,h6:empty,p:empty').remove();
+          this.activeCol.querySelectorAll('*: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>
+          */
+
+          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 
+                  elmActive.outerHTML = elmActive.firstElementChild.innerHTML; //fix
+                  // Re-clean empty elements
+
+                  this.activeCol.querySelectorAll('*:empty').forEach(x => {
+                    x.remove();
+                  }); //place cursor
+
+                  if (elmClosestElement) dom$F.moveCursorToElement(elmClosestElement.previousElementSibling);else dom$F.moveCursorToElement(this.activeCol);
+                  let builderActive = document.querySelector('.builder-active');
+                  if (builderActive) this.applyBehaviorOn(builderActive); //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();
+              }); //place cursor
+
+              if (elmClosestElement) dom$F.moveCursorToElement(elmClosestElement.previousElementSibling);else dom$F.moveCursorToElement(this.activeCol);
+              let builderActive = document.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);