@innovastudio/contentbuilder 1.3.54 → 1.3.56

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.3.54",
+  "version": "1.3.56",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.esm.js

@@ -14965,17 +14965,19 @@ class HtmlUtil {
 
     if (this.builder.cleanHtmlFormatting) ;
 
-    const util = this.builder.util;
-    const builderStuff = this.builder.builderStuff; //Prepare temporary helpers: #tmp_content & #tmp_buildercontent
-
-    let elm = builderStuff.querySelector('#tmp_content');
-    if (elm) builderStuff.removeChild(elm);
-    elm = builderStuff.querySelector('#tmp_buildercontent');
-    if (elm) builderStuff.removeChild(elm);
-    let html = `<div id="tmp_content" style="position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;"></div>
-            <div id="tmp_buildercontent" style="position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;"></div>`;
-    dom$h.appendHtml(builderStuff, html);
-    let tmp = builderStuff.querySelector('#tmp_content');
+    const util = this.builder.util; // const builderStuff = this.builder.builderStuff;
+    // //Prepare temporary helpers: #tmp_content & #tmp_buildercontent
+    // let elm = builderStuff.querySelector('#tmp_content');
+    // if(elm) builderStuff.removeChild(elm);
+    // elm = builderStuff.querySelector('#tmp_buildercontent');
+    // if(elm) builderStuff.removeChild(elm);
+    // let html = `<div id="tmp_content" style="position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;"></div>
+    //     <div id="tmp_buildercontent" style="position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;"></div>`;
+    // dom.appendHtml(builderStuff, html);
+
+    let html; // let tmp = builderStuff.querySelector('#tmp_content');
+
+    let tmp = document.createElement('div');
     tmp.innerHTML = content.innerHTML; //Find subblocks (previously is-builder) in custom code blocks and save them to data-html-1, data-html-2, and so on.
 
     let blocks = tmp.querySelectorAll('[data-html]');
@@ -14988,76 +14990,6 @@ class HtmlUtil {
         block.setAttribute('data-html-' + index, encodeURIComponent(html));
         index++;
       });
-      /* OLD
-      let index = 1;
-      //let _builders = block.querySelectorAll('.is-builder');
-      Array.prototype.forEach.call(_builders, (_builder) => {
-          // let builderhtml = _builder.innerHTML;
-           //if(dom.parentsHasClass(_builder, 'slick-cloned')) return; // direct LATER
-           //Cleaning
-          _builder.style.transform = '';
-          _builder.style.WebkitTransform= '';
-          _builder.style.MozTransform= '';
-          _builder.removeAttribute('data-sort');
-          dom.removeClass(_builder, 'builder-active');
-           _builder.removeAttribute('hidesnippetaddtool');
-          _builder.removeAttribute('gray');
-          _builder.removeAttribute('rowoutline');
-          _builder.removeAttribute('grayoutline');
-          _builder.removeAttribute('hideoutline');
-          _builder.removeAttribute('leftrowtool');
-          _builder.removeAttribute('minimal');
-          _builder.removeAttribute('clean');
-          _builder.removeAttribute('grideditor');
-          _builder.removeAttribute('gridoutline');
-           _builder.removeAttribute('gridoutline'); // old
-          _builder.removeAttribute('draggridoutline'); // old
-          _builder.removeAttribute('between-blocks-left'); // old
-          _builder.removeAttribute('between-blocks-center'); // old  
-          _builder.removeAttribute('hideelementhighlight'); 
-           let builderhtml = _builder.innerHTML;
-          let tmpbuilder = builderStuff.querySelector('#tmp_buildercontent');
-          tmpbuilder.innerHTML = builderhtml;
-           let elms = tmp.querySelectorAll('.sortable-chosen');
-          dom.removeClasses(elms, 'sortable-chosen');
-          elms = tmp.querySelectorAll('.sortable-ghost');
-          dom.removeClasses(elms, 'sortable-ghost');
-          elms = tmpbuilder.querySelectorAll('.elm-active');
-          dom.removeClasses(elms, 'elm-active');
-          elms = tmpbuilder.querySelectorAll('.elm-inspected');
-          dom.removeClasses(elms, 'elm-inspected');
-          elms = tmpbuilder.querySelectorAll('.cell-active');
-          dom.removeClasses(elms, 'cell-active');
-          elms = tmpbuilder.querySelectorAll('.row-active');
-          dom.removeClasses(elms, 'row-active');
-          elms = tmpbuilder.querySelectorAll('.row-outline');
-          dom.removeClasses(elms, 'row-outline');
-          //elms = tmpbuilder.querySelectorAll('.is-builder');
-          //dom.removeClasses(elms, 'is-builder');
-          elms = tmpbuilder.querySelectorAll('.row-outline');
-          dom.removeClasses(elms, 'row-outline');
-          elms = tmpbuilder.querySelectorAll('[data-click]');
-          dom.removeAttributes(elms, 'data-click');
-          elms = tmpbuilder.querySelectorAll('[contenteditable]');
-          dom.removeAttributes(elms, 'contenteditable');
-          elms = tmpbuilder.querySelectorAll('[data-module-active]');
-          dom.removeAttributes(elms, 'data-module-active');
-           dom.removeElements( tmpbuilder.querySelectorAll('.is-row-tool') );
-          dom.removeElements( tmpbuilder.querySelectorAll('.is-rowadd-tool') );
-          dom.removeElements( tmpbuilder.querySelectorAll('.ovl') );
-          dom.removeElements( tmpbuilder.querySelectorAll('.irow-add-initial') );
-           // LATER: rewrite in javascript
-          //$builder.find('*[class=""]').removeAttr('class');
-          //$builder.find('*[style=""]').removeAttr('style'); 
-           elms = tmpbuilder.querySelectorAll('[data-keep]');
-          dom.removeAttributes(elms, 'data-keep');
-           builderhtml = tmpbuilder.innerHTML.trim();
-          builderhtml = builderhtml.replace(/<font/g, '<span').replace(/<\/font/g, '</span');
-      
-          block.setAttribute('data-html-' + index, encodeURIComponent(builderhtml));
-                   index++;
-      });
-      */
     }); //Render custom code blocks (including any editable areas within)
 
     blocks = tmp.querySelectorAll('[data-html]');
@@ -15354,12 +15286,12 @@ class HtmlUtil {
       });
       html = tmp.innerHTML.trim();
       html = html.replace(/<font/g, '<span').replace(/<\/font/g, '</span');
-    }
+    } // elm = builderStuff.querySelector('#tmp_content');
+    // if(elm) builderStuff.removeChild(elm);
+    // elm = builderStuff.querySelector('#tmp_buildercontent');
+    // if(elm) builderStuff.removeChild(elm);
+    // return html;
 
-    elm = builderStuff.querySelector('#tmp_content');
-    if (elm) builderStuff.removeChild(elm);
-    elm = builderStuff.querySelector('#tmp_buildercontent');
-    if (elm) builderStuff.removeChild(elm); // return html;
 
     let beautify = JsBeautify.html;
     html = beautify(html); // https://stackoverflow.com/questions/22962220/remove-multiple-line-breaks-n-in-javascript
@@ -53052,8 +52984,7 @@ class Spacer {
           this.showTool(spacer); //Trigger Change event
 
           this.builder.opts.onChange(); //Trigger Render event
-
-          this.builder.opts.onRender();
+          // this.builder.opts.onRender();
         });
       });
     }
@@ -77338,7 +77269,9 @@ class ContentBuilder {
   }
 
   handleCellKeydown(col, e) {
+    this.oriLen = col.textContent.length; // get character length
     // Cleanup unwanted span
+
     let spans = col.querySelectorAll('span');
     Array.prototype.forEach.call(spans, span => {
       span.setAttribute('data-keep', '');
@@ -77842,13 +77775,27 @@ class ContentBuilder {
     // jQuery('.cell-active').find('.elm-active').removeClass('elm-active');
     // jQuery("#divElementTool").css("display", "none"); //force hide ellement tool
     // Call onChange to indicate content change
+    // this.opts.onChange();
+    // console.log(this.oriLen,col.textContent.length);
+
 
+    if (this.oriLen !== col.textContent.length) {
+      // check if typing produce/reduce a character
+      this.typing();
+    } // Hide element highlight & tool during typing
 
-    this.opts.onChange(); // Hide element highlight & tool during typing
 
     this.elmTool.hide();
   }
 
+  typing() {
+    // console.log('typing');
+    if (this.timeoutId) clearTimeout(this.timeoutId);
+    this.timeoutId = setTimeout(() => {
+      this.opts.onChange();
+    }, 2000);
+  }
+
   handleCellPaste() {
     this.uo.saveForUndo();
     const util = this.util;