@innovastudio/contentbox 1.1.0 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.1.0",
+  "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.81",
+    "@innovastudio/contentbuilder": "^1.0.83",
     "axios": "^0.21.4",
     "cors": "^2.8.5",
     "express": "^4.17.1",

package/public/contentbox/contentbox.esm.js

@@ -699,8 +699,8 @@ class SideBar {
   }
 
   viewHtml2() {
-    const builderStuff = this.builderStuff;
-    document.body.style.overflow = 'hidden';
+    const builderStuff = this.builderStuff; //document.body.style.overflow = 'hidden';
+
     let html = this.builder.html(true); //For View
 
     builderStuff.querySelector('#inpViewHtml').value = html;
@@ -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')) {
@@ -70660,14 +70660,48 @@ class ContentBuilder {
               sPastedText = util.cleanHTML(sPastedText, true);
             }
 
-            contentword.innerHTML = sPastedText; // 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();
-            // }
+            contentword.innerHTML = sPastedText;
+
+            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');
@@ -70725,10 +70759,7 @@ class ContentBuilder {
         }
 
         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);
@@ -70736,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);
@@ -72155,11 +72250,11 @@ class ContentBox {
       columnTool: true,
       elementTool: true,
       buttons: ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'zoom', 'more'],
-      buttonsMore: ['icon', 'image', '|', 'list', 'font', 'formatPara', '|', 'html', 'preferences'],
+      buttonsMore: ['icon', 'image', '|', 'list', 'font', 'formatPara', '|', 'preferences'],
       elementButtons: ['left', 'center', 'right', 'full', 'undo', 'redo', 'zoom', 'more'],
-      elementButtonsMore: ['|', 'html', 'preferences'],
+      elementButtonsMore: ['|', 'preferences'],
       iconButtons: ['icon', 'color', 'textsettings', 'createLink', '|', 'undo', 'redo', 'zoom', 'more'],
-      iconButtonsMore: ['|', 'html', 'preferences'],
+      iconButtonsMore: ['|', 'preferences'],
       customTags: [],
       animateModal: false,
       elementAnimate: true,
@@ -72196,6 +72291,7 @@ class ContentBox {
       undoRedoStyles: true,
       undoContainerOnly: false,
       absolutePath: false,
+      maxEmbedImageWidth: 1600,
       zoom: 0.6,
       contentStyleWithSample: false,
       contentStyles: {
@@ -74283,6 +74379,7 @@ class ContentBox {
       snippetJSON: window.data_basic,
       snippetPathReplace: this.settings.snippetPathReplace,
       maxColumns: 6,
+      maxEmbedImageWidth: this.settings.maxEmbedImageWidth,
       slider: this.settings.slider,
       onRender: this.settings.onRender,
       onChange: this.settings.onChange,
@@ -74743,6 +74840,7 @@ class ContentBox {
 
       dom.appendHtml(this.wrapperEl, newArea, 'afterbegin');
       newSection = this.wrapperEl.querySelector('.is-section');
+      arrSections.push(newSection);
     } else if (newArea.indexOf('is-static') !== -1) {
       // Insert last
       let lastSection = dom.getLastElement(this.wrapperEl, '.is-section');
@@ -74771,6 +74869,10 @@ class ContentBox {
             }
           }
         }
+      } else {
+        dom.appendHtml(this.wrapperEl, newArea, 'afterbegin');
+        newSection = this.wrapperEl.querySelector('.is-section');
+        arrSections.push(newSection);
       }
     } else {
       if (this.activeSection) {
@@ -74852,9 +74954,9 @@ class ContentBox {
           }
         }
       }
-    }
+    } // arrSections.push(newSection);
+    // Check up to 3 sections (in case a template has up to 3 sections)
 
-    arrSections.push(newSection); // Check up to 3 sections (in case a template has up to 3 sections)
 
     let prevSection = newSection.previousElementSibling;