@innovastudio/contentbuilder 1.3.81 → 1.3.83

package/package.json

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

package/public/contentbuilder/contentbuilder.esm.js

@@ -15048,6 +15048,79 @@ class HtmlUtil {
           block.getAttribute('data-settings', uniqueID);
         }
       });
+    } //Make absolute (for Export/Download)
+
+
+    if (this.builder.makeAbsolute) {
+      const convertMediaUrl = imgUrl => {
+        // make absolute
+        let img = document.createElement('img');
+        img.src = imgUrl;
+        img.setAttribute('data-absoluteurl', img.src);
+        imgUrl = img.getAttribute('data-absoluteurl');
+        return imgUrl;
+      };
+
+      const convertBgUrl = imgUrl => {
+        // make absolute
+        let img = document.createElement('img');
+        img.src = imgUrl;
+        img.setAttribute('data-absoluteurl', img.src);
+        imgUrl = img.getAttribute('data-absoluteurl'); // Do not use imgUrl directly, change base to [%PATH%] instead 
+        // (to prevent auto converting back to relative path)
+
+        let urlBase = location.href.substring(0, location.href.lastIndexOf('/'));
+        return imgUrl.replace(urlBase, '[%PATH%]'); // Example:
+        // url = http://localhost:8080/uploads/image.jpg 
+        // urlBase = http://localhost:8080
+        // become: [%PATH%]/uploads/image.jpg 
+      };
+
+      const convertMedia = (elm, attrName) => {
+        if (elm.hasAttribute(attrName)) {
+          if (!(elm.parentNode.tagName.toLowerCase() === 'video' || elm.parentNode.tagName.toLowerCase() === 'audio')) return;
+          let imgUrl = elm.getAttribute(attrName);
+          imgUrl = convertMediaUrl(imgUrl);
+          elm.setAttribute(attrName, `${imgUrl}`);
+        }
+      };
+
+      let imgs = tmp.querySelectorAll('img');
+      Array.prototype.forEach.call(imgs, img => {
+        let src = img.src;
+        img.setAttribute('src', src);
+      });
+      let elms = tmp.querySelectorAll('*');
+      elms.forEach(elm => {
+        if (elm.style.backgroundImage) {
+          let s = elm.style.backgroundImage;
+
+          if (s.indexOf('url(') !== -1) {
+            let imgUrl = s.slice(4, -1).replace(/["']/g, '');
+            imgUrl = convertBgUrl(imgUrl);
+            elm.style.backgroundImage = `url(${imgUrl})`;
+          }
+        }
+
+        convertMedia(elm, 'src');
+        convertMedia(elm, 'data-default');
+        convertMedia(elm, 'data-240');
+        convertMedia(elm, 'data-360');
+        convertMedia(elm, 'data-480');
+        convertMedia(elm, 'data-540');
+        convertMedia(elm, 'data-720');
+        convertMedia(elm, 'data-1080');
+        convertMedia(elm, 'data-1440');
+        convertMedia(elm, 'data-2160');
+
+        if (elm.hasAttribute('href')) {
+          if (elm.tagName.toLowerCase() === 'link') {
+            let imgUrl = elm.getAttribute('href');
+            imgUrl = convertMediaUrl(imgUrl);
+            elm.setAttribute('href', `${imgUrl}`);
+          }
+        }
+      });
     } //Cleaning
 
 
@@ -15185,7 +15258,75 @@ class HtmlUtil {
       elms = tmp.querySelectorAll('[data-scroll]');
       dom$h.removeAttributes(elms, 'data-scroll');
       elms = tmp.querySelectorAll('[data-scroll-once]');
-      dom$h.removeAttributes(elms, 'data-scroll-once'); // cleaning
+      dom$h.removeAttributes(elms, 'data-scroll-once');
+
+      if (this.builder.shortenOutput) {
+        elms = tmp.querySelectorAll('[data-noedit]');
+        dom$h.removeAttributes(elms, 'data-noedit');
+        elms = tmp.querySelectorAll('[data-module]');
+        dom$h.removeAttributes(elms, 'data-module');
+        elms = tmp.querySelectorAll('[data-module-desc]');
+        dom$h.removeAttributes(elms, 'data-module-desc');
+        elms = tmp.querySelectorAll('[data-dialog-width]');
+        dom$h.removeAttributes(elms, 'data-dialog-width');
+        elms = tmp.querySelectorAll('[data-dialog-height]');
+        dom$h.removeAttributes(elms, 'data-dialog-height');
+        elms = tmp.querySelectorAll('[data-html]');
+        dom$h.removeAttributes(elms, 'data-html');
+        elms = tmp.querySelectorAll('[data-settings]');
+        dom$h.removeAttributes(elms, 'data-settings');
+        elms = tmp.querySelectorAll('[data-html-1]');
+        dom$h.removeAttributes(elms, 'data-html-1');
+        elms = tmp.querySelectorAll('[data-html-2]');
+        dom$h.removeAttributes(elms, 'data-html-2');
+        elms = tmp.querySelectorAll('[data-html-3]');
+        dom$h.removeAttributes(elms, 'data-html-3');
+        elms = tmp.querySelectorAll('[data-html-4]');
+        dom$h.removeAttributes(elms, 'data-html-4');
+        elms = tmp.querySelectorAll('[data-html-5]');
+        dom$h.removeAttributes(elms, 'data-html-5');
+        elms = tmp.querySelectorAll('[data-html-6]');
+        dom$h.removeAttributes(elms, 'data-html-6');
+        elms = tmp.querySelectorAll('[data-html-7]');
+        dom$h.removeAttributes(elms, 'data-html-7');
+        elms = tmp.querySelectorAll('[data-html-8]');
+        dom$h.removeAttributes(elms, 'data-html-8');
+        elms = tmp.querySelectorAll('[data-html-9]');
+        dom$h.removeAttributes(elms, 'data-html-9');
+        elms = tmp.querySelectorAll('[data-html-10]');
+        dom$h.removeAttributes(elms, 'data-html-10');
+        elms = tmp.querySelectorAll('[data-html-12]');
+        dom$h.removeAttributes(elms, 'data-html-12');
+        elms = tmp.querySelectorAll('[data-html-13]');
+        dom$h.removeAttributes(elms, 'data-html-13');
+        elms = tmp.querySelectorAll('[data-html-14]');
+        dom$h.removeAttributes(elms, 'data-html-14');
+        elms = tmp.querySelectorAll('[data-html-15]');
+        dom$h.removeAttributes(elms, 'data-html-15');
+        elms = tmp.querySelectorAll('[data-html-16]');
+        dom$h.removeAttributes(elms, 'data-html-16');
+        elms = tmp.querySelectorAll('[data-html-17]');
+        dom$h.removeAttributes(elms, 'data-html-17');
+        elms = tmp.querySelectorAll('[data-html-18]');
+        dom$h.removeAttributes(elms, 'data-html-18');
+        elms = tmp.querySelectorAll('[data-html-19]');
+        dom$h.removeAttributes(elms, 'data-html-19');
+        elms = tmp.querySelectorAll('[data-html-20]');
+        dom$h.removeAttributes(elms, 'data-html-20');
+        elms = tmp.querySelectorAll('[data-html-21]');
+        dom$h.removeAttributes(elms, 'data-html-21');
+        elms = tmp.querySelectorAll('[data-html-21]');
+        dom$h.removeAttributes(elms, 'data-html-21');
+        elms = tmp.querySelectorAll('[data-html-22]');
+        dom$h.removeAttributes(elms, 'data-html-22');
+        elms = tmp.querySelectorAll('[data-html-23]');
+        dom$h.removeAttributes(elms, 'data-html-23');
+        elms = tmp.querySelectorAll('[data-html-24]');
+        dom$h.removeAttributes(elms, 'data-html-24');
+        elms = tmp.querySelectorAll('[data-html-25]');
+        dom$h.removeAttributes(elms, 'data-html-25');
+      } // cleaning
+
 
       elms = tmp.querySelectorAll('[data-bottom-top],[data-center],[data-center-bottom],[data-100-top],[data-50-top],[data-top],[data-top-bottom],[data-center-top],[data--300-bottom],[data--150-bottom],[data--50-bottom],[data-bottom],[data-100-bottom],[data-150-bottom],[data-400-bottom],' + '[data--400-bottom],[data--200-bottom],[data--100-bottom],[data-50-bottom],[data-200-bottom],[data-300-bottom],' + '[data-in],[data-in-150],[data-in-300],' + '[data-cen--150],[data-cen],[data-cen-150],[data-out--300],[data-out--150],[data-out]' + '[data-t],[data-t-100],[data-t-200],[data-t-300],[data-t-400],' + '[data-t-500],[data-t-600],[data-t-700],[data-t-800],[data-t-900],[data-t-1000],' + '[data-t-1100],[data-t-1200],[data-t-1300],[data-t-1400],[data-t-1500],[data-t-1600],' + '[data-t-1700],[data-t-1800],[data-t-1900],[data-t-2000],[data-t-2100],[data-t-2200],' + '[data-t-2300],[data-t-2400],[data-t-2500],[data-t-2600],[data-t-2700],[data-t-2800]'); // elms = tmp.querySelectorAll('[data-bottom-top],[data-center],[data-center-bottom],[data-100-top],[data-50-top],[data-top],[data-top-bottom],[data-center-top],[data--300-bottom],[data--150-bottom],[data--50-bottom],[data-bottom],[data-100-bottom],[data-150-bottom],[data-400-bottom],' +
       //     '[data--400-bottom],[data--200-bottom],[data--100-bottom],[data-50-bottom],[data-200-bottom],[data-300-bottom],' +
@@ -15299,6 +15440,74 @@ class HtmlUtil {
       Array.prototype.forEach.call(emptystyles, emptystyle => {
         emptystyle.removeAttribute('style');
       });
+
+      if (this.builder.shortenOutput) {
+        elms = tmp.querySelectorAll('[data-noedit]');
+        dom$h.removeAttributes(elms, 'data-noedit');
+        elms = tmp.querySelectorAll('[data-module]');
+        dom$h.removeAttributes(elms, 'data-module');
+        elms = tmp.querySelectorAll('[data-module-desc]');
+        dom$h.removeAttributes(elms, 'data-module-desc');
+        elms = tmp.querySelectorAll('[data-dialog-width]');
+        dom$h.removeAttributes(elms, 'data-dialog-width');
+        elms = tmp.querySelectorAll('[data-dialog-height]');
+        dom$h.removeAttributes(elms, 'data-dialog-height');
+        elms = tmp.querySelectorAll('[data-html]');
+        dom$h.removeAttributes(elms, 'data-html');
+        elms = tmp.querySelectorAll('[data-settings]');
+        dom$h.removeAttributes(elms, 'data-settings');
+        elms = tmp.querySelectorAll('[data-html-1]');
+        dom$h.removeAttributes(elms, 'data-html-1');
+        elms = tmp.querySelectorAll('[data-html-2]');
+        dom$h.removeAttributes(elms, 'data-html-2');
+        elms = tmp.querySelectorAll('[data-html-3]');
+        dom$h.removeAttributes(elms, 'data-html-3');
+        elms = tmp.querySelectorAll('[data-html-4]');
+        dom$h.removeAttributes(elms, 'data-html-4');
+        elms = tmp.querySelectorAll('[data-html-5]');
+        dom$h.removeAttributes(elms, 'data-html-5');
+        elms = tmp.querySelectorAll('[data-html-6]');
+        dom$h.removeAttributes(elms, 'data-html-6');
+        elms = tmp.querySelectorAll('[data-html-7]');
+        dom$h.removeAttributes(elms, 'data-html-7');
+        elms = tmp.querySelectorAll('[data-html-8]');
+        dom$h.removeAttributes(elms, 'data-html-8');
+        elms = tmp.querySelectorAll('[data-html-9]');
+        dom$h.removeAttributes(elms, 'data-html-9');
+        elms = tmp.querySelectorAll('[data-html-10]');
+        dom$h.removeAttributes(elms, 'data-html-10');
+        elms = tmp.querySelectorAll('[data-html-12]');
+        dom$h.removeAttributes(elms, 'data-html-12');
+        elms = tmp.querySelectorAll('[data-html-13]');
+        dom$h.removeAttributes(elms, 'data-html-13');
+        elms = tmp.querySelectorAll('[data-html-14]');
+        dom$h.removeAttributes(elms, 'data-html-14');
+        elms = tmp.querySelectorAll('[data-html-15]');
+        dom$h.removeAttributes(elms, 'data-html-15');
+        elms = tmp.querySelectorAll('[data-html-16]');
+        dom$h.removeAttributes(elms, 'data-html-16');
+        elms = tmp.querySelectorAll('[data-html-17]');
+        dom$h.removeAttributes(elms, 'data-html-17');
+        elms = tmp.querySelectorAll('[data-html-18]');
+        dom$h.removeAttributes(elms, 'data-html-18');
+        elms = tmp.querySelectorAll('[data-html-19]');
+        dom$h.removeAttributes(elms, 'data-html-19');
+        elms = tmp.querySelectorAll('[data-html-20]');
+        dom$h.removeAttributes(elms, 'data-html-20');
+        elms = tmp.querySelectorAll('[data-html-21]');
+        dom$h.removeAttributes(elms, 'data-html-21');
+        elms = tmp.querySelectorAll('[data-html-21]');
+        dom$h.removeAttributes(elms, 'data-html-21');
+        elms = tmp.querySelectorAll('[data-html-22]');
+        dom$h.removeAttributes(elms, 'data-html-22');
+        elms = tmp.querySelectorAll('[data-html-23]');
+        dom$h.removeAttributes(elms, 'data-html-23');
+        elms = tmp.querySelectorAll('[data-html-24]');
+        dom$h.removeAttributes(elms, 'data-html-24');
+        elms = tmp.querySelectorAll('[data-html-25]');
+        dom$h.removeAttributes(elms, 'data-html-25');
+      }
+
       html = tmp.innerHTML.trim();
       html = html.replace(/<font/g, '<span').replace(/<\/font/g, '</span');
     } // elm = builderStuff.querySelector('#tmp_content');
@@ -15316,6 +15525,13 @@ class HtmlUtil {
     return html;
   }
 
+  beautify(html) {
+    let beautify = JsBeautify.html;
+    html = beautify(html);
+    html = html.replace(/(\r\n|\r|\n){3,}/g, '$1\n');
+    return html;
+  }
+
 }
 
 class UndoRedo {
@@ -15866,6 +16082,14 @@ const prepareSvgIcons = builder => {
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M9.88 9.878a3 3 0 1 0 4.243 4.242m.581 -3.42a3.012 3.012 0 0 0 -1.45 -1.426m-3.877 -3.913a9.469 9.469 0 0 1 2.623 -.361c4 0 7.333 2.333 10 7c-.778 1.362 -1.613 2.524 -2.504 3.489m-2.138 1.859c-1.629 1.101 -3.415 1.652 -5.358 1.652c-4 0 -7.333 -2.333 -10 -7c1.374 -2.404 2.924 -4.189 4.652 -5.354m-3.652 -3.646l18 18"></path>
             </symbol>
+
+            <symbol id="icon-download" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
+                <path d="M7 11l5 5l5 -5"></path>
+                <path d="M12 4l0 12"></path>
+            </symbol>
+
             </defs>
         </svg>`;
   builder.dom.appendHtml(builder.builderStuff, html);
@@ -22903,7 +23127,7 @@ function getOffset(element) {
     top: box.top + (window.pageYOffset - document.documentElement.clientTop)
   };
 }
-var location = WINDOW.location;
+var location$1 = WINDOW.location;
 var REGEXP_ORIGINS = /^(\w+:)\/\/([^:/?#]*):?(\d*)/i;
 /**
  * Check if the given URL is a cross origin URL.
@@ -22913,7 +23137,7 @@ var REGEXP_ORIGINS = /^(\w+:)\/\/([^:/?#]*):?(\d*)/i;
 
 function isCrossOriginURL(url) {
   var parts = url.match(REGEXP_ORIGINS);
-  return parts !== null && (parts[1] !== location.protocol || parts[2] !== location.hostname || parts[3] !== location.port);
+  return parts !== null && (parts[1] !== location$1.protocol || parts[2] !== location$1.hostname || parts[3] !== location$1.port);
 }
 /**
  * Add timestamp to the given URL.
@@ -53654,10 +53878,12 @@ class Code {
           viewhtml = this.builderStuff.querySelector('.viewhtml');
         }
 
-        let textarea = viewhtml.querySelector('textarea'); // Commented, to prevent {id} get formatted.
-        // let beautify = JsBeautify.html;
-        // html = beautify(html);
+        let textarea = viewhtml.querySelector('textarea'); // Prevent {id} get formatted.
 
+        html = html.replaceAll('{id}', '__id__');
+        let beautify = JsBeautify.html;
+        html = beautify(html);
+        html = html.replaceAll('__id__', '{id}');
         textarea.value = html;
         this.htmlUtil.view('code');
       });
@@ -62519,7 +62745,7 @@ class ElementTextStyles {
     var sTextAlign = elm.style.textAlign;
     this.panelStuff.querySelector('#inpElmTextAlign').value = sTextAlign;
     this.panelStuff.querySelector('#inpElmFontSize').value = '';
-    var nFontSize = parseInt(elm.style.fontSize);
+    var nFontSize = parseFloat(elm.style.fontSize);
 
     if (!isNaN(nFontSize)) {
       this.panelStuff.querySelector('#inpElmFontSize').value = nFontSize;
@@ -62579,7 +62805,7 @@ class ElementTextStyles {
     if (!isNaN(elm.style.lineHeight)) {
       this.panelStuff.querySelector('#inpElmLineHeight').value = elm.style.lineHeight;
     } else {
-      var nLineHeight = parseInt(elm.style.lineHeight);
+      var nLineHeight = parseFloat(elm.style.lineHeight);
 
       if (!isNaN(nLineHeight)) {
         this.panelStuff.querySelector('#inpElmLineHeight').value = nLineHeight;
@@ -62600,14 +62826,14 @@ class ElementTextStyles {
 
     this.panelStuff.querySelector('#inpElmLineHeightUnit').value = sLineHeightUnit;
     this.panelStuff.querySelector('#inpElmLetterSpacing').value = '';
-    var nLetterSpacing = parseInt(elm.style.letterSpacing);
+    var nLetterSpacing = parseFloat(elm.style.letterSpacing);
 
     if (!isNaN(nLetterSpacing)) {
       this.panelStuff.querySelector('#inpElmLetterSpacing').value = nLetterSpacing;
     }
 
     this.panelStuff.querySelector('#inpElmWordSpacing').value = '';
-    var nWordSpacing = parseInt(elm.style.wordSpacing);
+    var nWordSpacing = parseFloat(elm.style.wordSpacing);
 
     if (!isNaN(nWordSpacing)) {
       this.panelStuff.querySelector('#inpElmWordSpacing').value = nWordSpacing;
@@ -75241,6 +75467,39 @@ class ContentBuilder {
                 </div>
             </div>
             `,
+      pageTemplate: `<!DOCTYPE html>
+            <html lang="en">
+            <head>
+                <meta charset="utf-8">
+                <title>Page</title>
+                <meta name="viewport" content="width=device-width, initial-scale=1">
+                <meta name="description" content="">
+                <link rel="shortcut icon" href="#" />
+                
+                <link href="[%PATH%]/assets/minimalist-blocks/content.css" rel="stylesheet" type="text/css" />
+                
+                <link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet" type="text/css" />
+                <link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet" type="text/css" />
+                <script src="[%PATH%]/assets/scripts/glide/glide.js" type="text/javascript"></script>
+                
+                <style>
+                    .container {
+                        margin: 150px auto 0;
+                        max-width: 800px;
+                        width: 100%;
+                        padding: 0 20px;
+                        box-sizing: border-box;
+                    }
+                </style>
+            </head>
+            <body>
+            
+            <div class="container">
+            [%CONTENT%]
+            </div>
+            
+            </body>
+            </html>`,
 
       /*
       onZoomStart: () => {
@@ -76752,7 +77011,11 @@ class ContentBuilder {
 
     const builders = this.doc.querySelectorAll(this.opts.container);
     Array.prototype.forEach.call(builders, builder => {
-      builder.innerHTML = htmlutil.readHtml(builder, true);
+      // builder.innerHTML = htmlutil.readHtml(builder, true);
+      let html = htmlutil.readHtml(builder, false);
+      let range = this.doc.createRange();
+      builder.innerHTML = '';
+      builder.appendChild(range.createContextualFragment(html)); // Use createContextualFragment so that embedded javascript code (code block) will be executed
     });
     Array.prototype.forEach.call(builders, builder => {
       builder.removeAttribute('data-sort');
@@ -77079,6 +77342,52 @@ class ContentBuilder {
 
   saveForUndo(checkLater) {
     this.uo.saveForUndo(checkLater);
+  }
+
+  download(options = {}) {
+    this.export(options, true);
+  }
+
+  export(options = {}, shortenOutput = false) {
+    let pageTemplate = this.pageTemplate;
+    let output = ''; // [%CONTENT%]
+
+    this.makeAbsolute = true; //To make absolute (for Export/Download)
+
+    this.shortenOutput = shortenOutput;
+    let html = this.html();
+    this.makeAbsolute = false;
+    output = pageTemplate.replace('[%CONTENT%]', html);
+    this.shortenOutput = false; // Custom
+
+    if (options.replace) {
+      options.replace.forEach(rule => {
+        output = output.replaceAll(`${rule[0]}`, rule[1]);
+      });
+    } // [%PATH%]
+
+
+    if (options.path) {
+      output = output.replaceAll('[%PATH%]', options.path);
+    } else {
+      let urlBase;
+      urlBase = location.href.substring(0, location.href.lastIndexOf('/'));
+      output = output.replaceAll('[%PATH%]', urlBase);
+    } // Beautify
+
+
+    output = this.beautify(output);
+    const a = document.createElement('a');
+    a.href = window.URL.createObjectURL(new Blob([output], {
+      type: 'text/plain'
+    }));
+    a.download = 'page.html';
+    a.click();
+  }
+
+  beautify(html) {
+    const htmlutil = new HtmlUtil(this);
+    return htmlutil.beautify(html);
   } // Module related