@innovastudio/contentbuilder 1.3.81 → 1.3.82

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.3.81",
+  "version": "1.3.82",
   "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
 
 
@@ -15316,6 +15389,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 +15946,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 +22991,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 +23001,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 +53742,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');
       });
@@ -75241,6 +75331,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 +76875,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 +77206,46 @@ class ContentBuilder {
 
   saveForUndo(checkLater) {
     this.uo.saveForUndo(checkLater);
+  }
+
+  download(options = {}) {
+    let pageTemplate = this.pageTemplate;
+    let output = ''; // [%CONTENT%]
+
+    this.makeAbsolute = true; //To make absolute (for Export/Download)
+
+    let html = this.html();
+    this.makeAbsolute = 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