@innovastudio/contentbox 1.4.70 → 1.4.72

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.4.70",
+  "version": "1.4.72",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -46,7 +46,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.3.81",
+    "@innovastudio/contentbuilder": "^1.3.85",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.esm.js

@@ -484,6 +484,7 @@ const prepareSvgIcons$1 = builder => {
                 <circle cx="12" cy="17" r="1"></circle>
             </symbol>
 
+
             </defs>
         </svg>`;
   const builderStuff = builder.builderStuff;
@@ -28910,6 +28911,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
 
 
@@ -29047,7 +29121,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],' +
@@ -29161,6 +29303,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');
@@ -29178,6 +29388,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 {
@@ -29728,6 +29945,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);
@@ -36765,7 +36990,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.
@@ -36775,7 +37000,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.
@@ -66196,7 +66421,7 @@ class Hyperlink {
                     <input id="inpCreateLinkText" class="input-text" type="text" style="width:100%;"/>
                     
                     <label for="inpCreateLinkTitle" style="margin-top:14px;display:block">${util.out('Title')}:</label>
-                    <input id="inpCreateLinkTitle" class="input-title" type="text" style="width:100%;border-top: none;"/>
+                    <input id="inpCreateLinkTitle" class="input-title" type="text" style="width:100%;"/>
                     
                     <div style="text-align:right;margin-top:14px;">
                         <button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
@@ -67516,10 +67741,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');
       });
@@ -69062,7 +69289,6 @@ class RowTool {
     const dom = this.builder.dom;
     this.dom = dom;
     this.grid = new Grid(builder);
-    const htmlutil = new HtmlUtil(builder);
     let rowMore = builderStuff.querySelector('.rowmore');
     let htmlbutton = '';
     if (builder.opts.rowHtmlEditor) htmlbutton = `<button type="button" title="${util.out('HTML')}" class="row-html">
@@ -69111,6 +69337,7 @@ class RowTool {
         }
 
         if (!row) return;
+        const htmlutil = new HtmlUtil(builder);
         htmlutil.view('row');
       });
     }
@@ -76381,7 +76608,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;
@@ -76441,7 +76668,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;
@@ -76462,14 +76689,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;
@@ -89103,6 +89330,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: () => {
@@ -89685,6 +89945,7 @@ class ContentBuilder {
 
     this.colTool = new ColumnTool(this); // Render Column Tool
 
+    this._rowTool = new RowTool(this);
     this.mediaPicker = new MediaPicker(this); // Extend the onChange function
 
     var oldget = this.opts.onChange;
@@ -90207,8 +90468,8 @@ class ContentBuilder {
       // Render Row tool
 
 
-      this.rowtool = new RowTool(this);
-      this.rowtool.render(row); // Render Row Add tool
+      this._rowTool.render(row); // Render Row Add tool
+
 
       const rowaddtool = new RowAddTool(this);
       rowaddtool.render(row); // Apply behavior on each column
@@ -90614,7 +90875,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');
@@ -90941,6 +91206,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;
+    this.shortenOutput = false;
+    output = pageTemplate.replace('[%CONTENT%]', html); // 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
 
 
@@ -91772,8 +92083,7 @@ class ContentBuilder {
 
     this.element.click(col, e);
     this.colTool.click(col);
-    this.elmTool.click(col, e); //this.rowtool.click(col);
-
+    this.elmTool.click(col, e);
     this.rte.click(col, e); // Grid Editor Status
     // On/off lock button
 
@@ -101477,6 +101787,59 @@ class ContentBox {
                 </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%]/box/box-flex.css" rel="stylesheet" type="text/css" />
+
+                [%MAINCSS%]
+                [%SECTIONCSS%]
+            </head>
+            <body style="touch-action: pan-y">
+                
+            <main id="main">
+                <div class="is-wrapper">
+                    [%CONTENT%]
+                </div>
+            </main>
+            
+            <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>
+
+            <link href="[%PATH%]/assets/scripts/navbar/navbar.css" rel="stylesheet" type="text/css" />
+            <script src="[%PATH%]/assets/scripts/navbar/navbar.min.js" type="text/javascript"></script>
+
+            <script src="[%PATH%]/box/box-flex.js" type="text/javascript"></script>
+
+            <!-- Optional: if you want to add smooth scrolling -->
+            <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js" type="text/javascript"></script>
+            <script>
+            SmoothScroll({
+                frameRate: 150,
+                animationTime: 800,
+                stepSize: 120,
+                pulseAlgorithm: 1,
+                pulseScale: 4,
+                pulseNormalize: 1,
+                accelerationDelta: 300,
+                accelerationMax: 2,
+                keyboardSupport: 1,
+                arrowScroll: 50,
+                fixedBackground: 0
+            });
+            </script>
+            </body>
+            </html>
+            `,
       contentStyleWithSample: false,
       contentSizes: [300, 320, 340, 360, 380, 400, 420, 440, 460, 480, 500, 520, 540, 560, 580, 600, 620, 640, 660, 680, 700, 720, 740, 760, 780, 800, 820, 840, 860, 880, 900, 920, 940, 960, 970, 980, 1000, 1020, 1040, 1050, 1060, 1080, 1100, 1120, 1140, 1160, 1180, 1200, 1220, 1240, 1260, 1280, 1300, 1320, 1340, 1360, 1380, 1400, 1420, 1440, 1460, 1480, 1500, 1520, 1540, 1560, 1580, 1600, 1620, 1640, 1660, 1680, 1700, 1720, 1740, 1760, 1780, 1800, 1820, 1840, 1860, 1880, 1900, 1920, 1940, 1960, 1980, 2000, 2020, 2040, 2060, 2080, 2100, 2120, 2140, 2160, 2180, 2200, 2220, 2240, 2260, 2280, 2300, 2320, 2340, 2360, 2380, 2400, 2420, 2440, 2460, 2480, 2500, 2520, 2540, 2560, 2580, 2600, 2620, 2640, 2660, 2680, 2700],
       contentStyles: {
@@ -106032,7 +106395,7 @@ class ContentBox {
     this.editbox.boxImage(url, err);
   }
 
-  mainCss() {
+  mainCss(absolute) {
     let links = this.doc.getElementsByTagName('link');
     let arrLinks = [];
 
@@ -106040,7 +106403,17 @@ class ContentBox {
       let src = links[i].href.toLowerCase();
 
       if (src.indexOf('basetype-') != -1) {
-        arrLinks.push(links[i].outerHTML);
+        if (absolute) {
+          // make absolute
+          const link = links[i].cloneNode();
+          let imgUrl = link.href;
+          let urlBase = location.href.substring(0, location.href.lastIndexOf('/'));
+          imgUrl = imgUrl.replace(urlBase, '[%PATH%]');
+          link.href = imgUrl;
+          arrLinks.push(link.outerHTML);
+        } else {
+          arrLinks.push(links[i].outerHTML);
+        }
       }
     } // arrLinks = [...new Set(arrLinks)]; // remove duplicates not needed, always single css
 
@@ -106064,7 +106437,7 @@ class ContentBox {
     return arrLinks;
   }
 
-  sectionCss() {
+  sectionCss(absolute) {
     let links = this.doc.getElementsByTagName('link');
     let arrLinks = [];
 
@@ -106072,7 +106445,17 @@ class ContentBox {
       let src = links[i].href.toLowerCase();
 
       if (src.indexOf('basetype-') != -1) ; else if (src.indexOf('type-') != -1) {
-        arrLinks.push(links[i].outerHTML);
+        if (absolute) {
+          // make absolute
+          const link = links[i].cloneNode();
+          let imgUrl = link.href;
+          let urlBase = location.href.substring(0, location.href.lastIndexOf('/'));
+          imgUrl = imgUrl.replace(urlBase, '[%PATH%]');
+          link.href = imgUrl;
+          arrLinks.push(link.outerHTML);
+        } else {
+          arrLinks.push(links[i].outerHTML);
+        }
       }
     }
 
@@ -106100,10 +106483,56 @@ class ContentBox {
 
   html(bForView) {
     this.cleanupUnused();
-    var html = this.editor.readHtml(this.wrapperEl, bForView, true);
+    const html = this.editor.readHtml(this.wrapperEl, bForView, true);
     return html;
   }
 
+  download(options = {}) {
+    this.export(options, true);
+  }
+
+  export(options = {}, shortenOutput = false) {
+    let pageTemplate = this.pageTemplate;
+    let output = ''; // [%CONTENT%]
+
+    this.cleanupUnused();
+    this.editor.makeAbsolute = true;
+    this.editor.shortenOutput = shortenOutput;
+    let html = this.editor.readHtml(this.wrapperEl, false, true);
+    this.editor.makeAbsolute = false;
+    this.editor.shortenOutput = false;
+    output = pageTemplate.replace('[%CONTENT%]', html); // [%MAINCSS%] & [%SECTIONCSS%]
+
+    let mainCss = this.mainCss(true);
+    let sectionCss = this.sectionCss(true);
+    output = output.replaceAll('[%MAINCSS%]', mainCss);
+    output = output.replaceAll('[%SECTIONCSS%]', sectionCss); // 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.editor.beautify(output);
+    const a = document.createElement('a');
+    a.href = window.URL.createObjectURL(new Blob([output], {
+      type: 'text/plain'
+    }));
+    a.download = 'page.html';
+    a.click();
+  }
+
   viewZoom() {
     this.editor.viewZoom();
   }