@innovastudio/contentbuilder 1.0.80 → 1.0.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbuilder",
-  "version": "1.0.80",
+  "version": "1.0.83",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [
@@ -48,6 +48,7 @@
     "express-session": "^1.17.2",
     "js-beautify": "^1.14.0",
     "moveable": "^0.26.0",
+    "nodemailer": "^6.7.2",
     "serve-static": "^1.14.1",
     "sortablejs": "^1.14.0"
   }

package/public/contentbuilder/contentbuilder.css

@@ -195,6 +195,7 @@ button:focus {
   font-size: 13px;
   letter-spacing: 1px;
   font-weight: 300px;
+  /*  general use */
   /*
   .rte-align-options,
   .rte-formatting-options,
@@ -543,6 +544,40 @@ button:focus {
 .is-ui .is-elementrte-tool > div:not(.is-draggable) {
   padding: 8px 10px 8px 10px;
 }
+#_cbhtml .is-general-options,
+.is-ui .is-general-options {
+  color: #000;
+  background: #fff;
+}
+#_cbhtml .is-general-options button,
+#_cbhtml .is-general-options div[role=button],
+.is-ui .is-general-options button,
+.is-ui .is-general-options div[role=button] {
+  background-color: transparent;
+  color: #121212;
+  width: 45px;
+  height: 40px;
+  margin: 0;
+  box-shadow: none;
+}
+#_cbhtml .is-general-options button.on,
+#_cbhtml .is-general-options div[role=button].on,
+.is-ui .is-general-options button.on,
+.is-ui .is-general-options div[role=button].on {
+  background: whitesmoke;
+}
+#_cbhtml .is-general-options button:hover,
+#_cbhtml .is-general-options div[role=button]:hover,
+.is-ui .is-general-options button:hover,
+.is-ui .is-general-options div[role=button]:hover {
+  background: whitesmoke !important;
+}
+#_cbhtml .is-general-options button svg,
+#_cbhtml .is-general-options div[role=button] svg,
+.is-ui .is-general-options button svg,
+.is-ui .is-general-options div[role=button] svg {
+  fill: #000;
+}
 #_cbhtml .is-rte-tool,
 #_cbhtml .is-elementrte-tool,
 #_cbhtml .is-rte-pop.rte-more-options,
@@ -557,6 +592,51 @@ button:focus {
   background: #fff;
   box-shadow: rgba(0, 0, 0, 0.05) 0px 5px 9px 0px;
 }
+#_cbhtml .is-rte-tool div[role=button],
+#_cbhtml .is-elementrte-tool div[role=button],
+#_cbhtml .is-rte-pop.rte-more-options div[role=button],
+#_cbhtml .is-rte-pop.elementrte-more-options div[role=button],
+.is-ui .is-rte-tool div[role=button],
+.is-ui .is-elementrte-tool div[role=button],
+.is-ui .is-rte-pop.rte-more-options div[role=button],
+.is-ui .is-rte-pop.elementrte-more-options div[role=button] {
+  background-color: transparent;
+  color: #121212;
+  width: 45px;
+  height: 40px;
+  margin: 0;
+  box-shadow: none;
+}
+#_cbhtml .is-rte-tool div[role=button].on,
+#_cbhtml .is-elementrte-tool div[role=button].on,
+#_cbhtml .is-rte-pop.rte-more-options div[role=button].on,
+#_cbhtml .is-rte-pop.elementrte-more-options div[role=button].on,
+.is-ui .is-rte-tool div[role=button].on,
+.is-ui .is-elementrte-tool div[role=button].on,
+.is-ui .is-rte-pop.rte-more-options div[role=button].on,
+.is-ui .is-rte-pop.elementrte-more-options div[role=button].on {
+  background: whitesmoke;
+}
+#_cbhtml .is-rte-tool div[role=button]:hover,
+#_cbhtml .is-elementrte-tool div[role=button]:hover,
+#_cbhtml .is-rte-pop.rte-more-options div[role=button]:hover,
+#_cbhtml .is-rte-pop.elementrte-more-options div[role=button]:hover,
+.is-ui .is-rte-tool div[role=button]:hover,
+.is-ui .is-elementrte-tool div[role=button]:hover,
+.is-ui .is-rte-pop.rte-more-options div[role=button]:hover,
+.is-ui .is-rte-pop.elementrte-more-options div[role=button]:hover {
+  background: whitesmoke;
+}
+#_cbhtml .is-rte-tool div[role=button] svg,
+#_cbhtml .is-elementrte-tool div[role=button] svg,
+#_cbhtml .is-rte-pop.rte-more-options div[role=button] svg,
+#_cbhtml .is-rte-pop.elementrte-more-options div[role=button] svg,
+.is-ui .is-rte-tool div[role=button] svg,
+.is-ui .is-elementrte-tool div[role=button] svg,
+.is-ui .is-rte-pop.rte-more-options div[role=button] svg,
+.is-ui .is-rte-pop.elementrte-more-options div[role=button] svg {
+  fill: #000;
+}
 #_cbhtml .is-rte-tool button,
 #_cbhtml .is-elementrte-tool button,
 #_cbhtml .is-rte-pop.rte-more-options button,

package/public/contentbuilder/contentbuilder.esm.js

@@ -253,14 +253,26 @@ class Util {
     }
   }
 
-  confirm(message, callback) {
+  confirm(message, callback, yesno, yestext) {
     const dom = this.dom;
-    let html = `<div class="is-modal is-confirm">
+    let html = '';
+    html = `<div class="is-modal is-confirm">
             <div class="is-modal-content" style="padding-bottom:20px;">
                 <p>${message}</p>
                 <button title="${this.out('Delete')}" class="input-ok classic">${this.out('Delete')}</button>
             </div>
         </div>`;
+
+    if (yesno) {
+      html = `<div class="is-modal is-confirm">
+                <div class="is-modal-content" style="padding-bottom:20px;">
+                    <p>${message}</p>
+                    <button title="${this.out('Cancel')}" class="input-cancel classic-secondary">${this.out('Cancel')}</button>
+                    <button title="${yestext}" class="input-ok classic-primary">${yestext}</button>
+                </div>
+            </div>`;
+    }
+
     const builderStuff = this.builder.builderStuff;
     let confirmmodal = builderStuff.querySelector('.is-confirm');
 
@@ -283,6 +295,16 @@ class Util {
 
       callback(true);
     });
+    let buttoncancel = confirmmodal.querySelector('.is-confirm .input-cancel');
+    dom.addEventListener(buttoncancel, 'click', e => {
+      this.hideModal(confirmmodal);
+      confirmmodal.parentNode.removeChild(confirmmodal); //remove modal
+      //do task
+
+      callback(false);
+      e.preventDefault();
+      e.stopImmediatePropagation();
+    });
   }
   /*
   Note:
@@ -39927,7 +39949,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')) {
@@ -60289,14 +60311,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');
@@ -60354,10 +60410,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);
@@ -60365,16 +60418,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.moveCursorToElement(elmClosestElement.previousElementSibling);else dom.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.moveCursorToElement(elmClosestElement.previousElementSibling);else dom.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);