@innovastudio/contentbuilder 1.3.80 → 1.3.82

package/package.json

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

package/public/contentbuilder/contentbuilder.css

@@ -107,7 +107,7 @@ button:focus-visible {
   }
 }
 
-@media (min-width: 970px) {
+@media (min-width: 971px) {
   .is-builder > div {
     display: flex;
   }
@@ -1884,6 +1884,13 @@ button:focus-visible {
   background: rgba(255, 255, 255, 0.2);
   border: rgba(0, 0, 0, 0.09) 1px solid !important;
 }
+#_cbhtml .is-modal .is-separator,
+.is-ui .is-modal .is-separator {
+  width: 100%;
+  border-top: #f0f0f0 1px solid;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
 #_cbhtml .is-modal .form-upload-larger.please-wait svg,
 .is-ui .is-modal .form-upload-larger.please-wait svg {
   transform: scale(1, 1);
@@ -1979,6 +1986,11 @@ button:focus-visible {
   padding: 0;
   border: none;
 }
+#_cbhtml .is-modal div.is-draggable > span,
+.is-ui .is-modal div.is-draggable > span {
+  pointer-events: none;
+  user-select: none;
+}
 #_cbhtml .is-modal div.is-modal-bar,
 .is-ui .is-modal div.is-modal-bar {
   position: absolute;

package/public/contentbuilder/contentbuilder.esm.js

@@ -4508,6 +4508,7 @@ class Util {
     Array.prototype.forEach.call(subblocks, subblock => {
       if (col.getAttribute('data-html-' + i)) {
         subblock.innerHTML = decodeURIComponent(col.getAttribute('data-html-' + i));
+        subblock.contentEditable = true;
       }
 
       i++;
@@ -14996,6 +14997,7 @@ class HtmlUtil {
       let index = 1;
       let subblocks = block.querySelectorAll('[data-subblock]');
       Array.prototype.forEach.call(subblocks, subblock => {
+        if (subblock.closest('.glide__slide--clone')) return;
         let html = subblock.innerHTML;
         block.setAttribute('data-html-' + index, encodeURIComponent(html));
         index++;
@@ -15046,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
 
 
@@ -15314,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 {
@@ -15823,6 +15905,55 @@ const prepareSvgIcons = builder => {
             <symbol viewBox="0 0 512 512" id="ion-volume-medium">
                 <path d="M270 407.7V104.4L175.3 192H71v128h104.3zm56.3-52.1c20.5-27.8 32.8-62.3 32.8-99.6 0-37.4-12.3-71.8-32.8-99.6l-20.4 15.3c17.4 23.6 27.8 52.7 27.8 84.3 0 31.6-10.4 60.7-27.8 84.3l20.4 15.3zm66.5 46c30-40.7 48-91 48-145.6s-18-104.9-48-145.6l-20.4 15.3c26.9 36.4 43 81.4 43 130.3 0 48.9-16.1 93.8-43 130.3l20.4 15.3z"/>
             </symbol>
+
+
+
+            <symbol id="icon-devices" 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>
+                <rect x="13" y="8" width="8" height="12" rx="1"></rect>
+                <path d="M18 8v-3a1 1 0 0 0 -1 -1h-13a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h9"></path>
+                <line x1="16" y1="9" x2="18" y2="9"></line>
+            </symbol>  
+            <symbol id="icon-device-desktop" 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>
+                <rect x="3" y="4" width="18" height="12" rx="1"></rect>
+                <line x1="7" y1="20" x2="17" y2="20"></line>
+                <line x1="9" y1="16" x2="9" y2="20"></line>
+                <line x1="15" y1="16" x2="15" y2="20"></line>
+            </symbol>
+            <symbol id="icon-device-mobile" 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>
+                <rect x="6" y="3" width="12" height="18" rx="2"></rect>
+                <line x1="11" y1="4" x2="13" y2="4"></line>
+                <line x1="12" y1="17" x2="12" y2="17.01"></line>
+            </symbol>
+            <symbol id="icon-device-laptop" 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>
+                <line x1="3" y1="19" x2="21" y2="19"></line>
+                <rect x="5" y="6" width="14" height="10" rx="1"></rect>
+            </symbol>
+            <symbol id="icon-device-tablet" 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>
+                <rect x="5" y="3" width="14" height="18" rx="1"></rect>
+                <circle cx="12" cy="17" r="1"></circle>
+            </symbol>
+
+            <symbol id="icon-eye" 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="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0m13 0c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"></path>
+            </symbol>
+            <symbol id="icon-eye-off" 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="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);
@@ -22860,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.
@@ -22870,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.
@@ -53282,7 +53413,7 @@ class Module {
         var moduleDesc = module.getAttribute('data-module-desc');
 
         if (moduleDesc) {
-          moduleModal.querySelector('.is-modal-bar').innerHTML = moduleDesc + `<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">
+          moduleModal.querySelector('.is-modal-bar').innerHTML = this.util.out(moduleDesc) + `<button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">
                     <svg class="is-icon-flex" style="width:30px;height:30px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
                     </button>`;
         } else {
@@ -53611,9 +53742,12 @@ class Code {
           viewhtml = this.builderStuff.querySelector('.viewhtml');
         }
 
-        let textarea = viewhtml.querySelector('textarea');
+        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');
       });
@@ -57450,13 +57584,39 @@ class ColumnTool {
                                 <button title="${util.out('Clear')}" class="input-cell-textcolor" data-command=""><svg class="is-icon-flex" style="flex:none;width:18px;height:18px;margin-top: 2px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
                             </div>
 
-                            <div style="padding-top:30px;">
+                            <div style="padding:30px 0 10px;">
                                 <label class="label-cell-grayscale label-checkbox" for="chkCellGrayscale"><input id="chkCellGrayscale" class="chk-cell-grayscale" type="checkbox" /> ${util.out('Grayscale')}</label>
                             </div>
 
-                            <div style="padding:20px 0 10px;">
+                            <div style="display:none;padding:20px 0 10px;">
                                 <label class="label-cell-hideonmobile label-checkbox" for="chkHideColumnOnMobile"><input id="chkHideColumnOnMobile" class="chk-cell-hideonmobile" type="checkbox" /> ${util.out('Hide Column on Mobile')}</label>
                             </div>
+
+                            <div class="is-separator"></div>
+                         
+                            <div class="div-target" style="display: flex;justify-content: flex-end;padding: 5px 0 0;">
+                                <button title="${util.out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:25px;">
+                                    <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>
+                                </button>
+                                <button title="${util.out('Tablet')}" class="input-device" data-value="sm" style="width:40px;height:25px;">
+                                    <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>
+                                </button>
+                                <button title="${util.out('Mobile')}" class="input-device" data-value="xs" style="width:40px;height:25px;">
+                                    <svg class="is-icon-flex" style="width:13px;height:13px"><use xlink:href="#icon-device-mobile"></use></svg>
+                                </button>
+                            </div>
+
+                            <div style="padding-top:0;padding-bottom:3px;">${util.out('Visibility')}:</div>
+                            <div class="div-visibility" style="display:flex;">
+                                <button title="${util.out('Visible')}" class="input-visible on" data-value="sm" style="width:100px;height:34px;">
+                                    <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye"></use></svg>
+                                    <span>${util.out('Visible')}</span>
+                                </button>
+                                <button title="${util.out('Hidden')}" class="input-hidden" data-value="xs" style="width:100px;height:34px;">
+                                    <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye-off"></use></svg>
+                                    <span>${util.out('Hidden')}</span>
+                                </button>
+                            </div>
                             
                             <!--
                             <div style="display:none;padding-top:20px;padding-bottom:3px;">${util.out('Enlarge Row')}:</div>
@@ -59066,6 +59226,58 @@ class ColumnTool {
         if (!cell) return;
         if (inpClickSrc.value === '') return;
         this.builder.openMedia(cell);
+      }); // Responsive Visibility
+
+      let btns = this.cellSettings.querySelectorAll('.input-device');
+      btns.forEach(btn => {
+        btn.addEventListener('click', () => {
+          let cell = this.util.cellSelected();
+          if (!cell) return;
+          let elms = this.cellSettings.querySelectorAll('.input-device');
+          elms.forEach(elm => {
+            elm.classList.remove('on');
+          });
+          btn.classList.add('on');
+          this.realtimeVisibility(cell);
+        });
+      });
+      let btnVisible = this.cellSettings.querySelector('.input-visible');
+      let btnHidden = this.cellSettings.querySelector('.input-hidden');
+      btnVisible.addEventListener('click', () => {
+        let cell = this.util.cellSelected();
+        if (!cell) return;
+        cell.classList.remove('hideonmobile');
+        let divTarget = this.cellSettings.querySelector('.div-target');
+        let target = this.builder.responsive.readTarget(divTarget);
+
+        if (target === 'xs') {
+          cell.classList.remove('xs-hidden');
+        } else if (target === 'sm') {
+          cell.classList.remove('sm-hidden');
+        } else if (target === '') {
+          cell.classList.remove('desktop-hidden');
+        }
+
+        btnVisible.classList.add('on');
+        btnHidden.classList.remove('on');
+      });
+      btnHidden.addEventListener('click', () => {
+        let cell = this.util.cellSelected();
+        if (!cell) return;
+        cell.classList.remove('hideonmobile');
+        let divTarget = this.cellSettings.querySelector('.div-target');
+        let target = this.builder.responsive.readTarget(divTarget);
+
+        if (target === 'xs') {
+          cell.classList.add('xs-hidden');
+        } else if (target === 'sm') {
+          cell.classList.add('sm-hidden');
+        } else if (target === '') {
+          cell.classList.add('desktop-hidden');
+        }
+
+        btnVisible.classList.remove('on');
+        btnHidden.classList.add('on');
       });
     }
 
@@ -59256,6 +59468,16 @@ class ColumnTool {
       let btn = this.cellSettings.querySelector('.cmd-content-pos[data-pos="bottomright"');
       dom.addClass(btn, 'on');
     }
+
+    this.realtimeVisibility(cell);
+  }
+
+  realtimeVisibility(cell) {
+    let divTarget = this.cellSettings.querySelector('.div-target');
+    let divVisibility = this.cellSettings.querySelector('.div-visibility');
+    let target = this.builder.responsive.readTarget(divTarget);
+    let valVisibility = this.builder.responsive.getVisibility(cell, target);
+    this.builder.responsive.showVisibility(divVisibility, valVisibility);
   }
 
   openImagePicker(currentUrl, callback, btn) {
@@ -60671,17 +60893,19 @@ class ElementSpacingStyles {
                     </select>
                 </div>
             </div>
-            
-            <div style="margin-top: 25px;font-weight: bold;width:100%">${util.out('Responsive Positioning')}:</div>
-            
-            <div class="is-settings" style="width:100%;">
-                <div>
-                    <label for="chkResetMarginLeft" style="letter-spacing: 0.5px;"><input type="checkbox" id="chkResetMarginLeft" value="" /> ${util.out('Reset margin left on small screen')} </label>
+
+            <div style="display:none">
+                <div style="margin-top: 25px;font-weight: bold;width:100%">${util.out('Responsive Positioning')}:</div>
+                
+                <div class="is-settings" style="width:100%;">
+                    <div>
+                        <label for="chkResetMarginLeft" style="letter-spacing: 0.5px;"><input type="checkbox" id="chkResetMarginLeft" value="" /> ${util.out('Reset margin left on small screen')} </label>
+                    </div>
                 </div>
-            </div>
-            <div class="is-settings" style="margin-top:0;width:100%;">
-                <div>
-                    <label for="chkResetMarginRight" style="letter-spacing: 0.5px;"><input type="checkbox" id="chkResetMarginRight" value="" /> ${util.out('Reset margin right on small screen')} </label>
+                <div class="is-settings" style="margin-top:0;width:100%;">
+                    <div>
+                        <label for="chkResetMarginRight" style="letter-spacing: 0.5px;"><input type="checkbox" id="chkResetMarginRight" value="" /> ${util.out('Reset margin right on small screen')} </label>
+                    </div>
                 </div>
             </div>
         `;
@@ -64781,6 +65005,11 @@ class ElementTool {
         if (ok) {
           this.builder.uo.saveForUndo();
           let elm = this.builder.activeElement;
+          let subblock = false;
+
+          if (elm.closest('.is-subblock')) {
+            subblock = true;
+          }
           /*
           if(dom.hasClass(elm.parentNode, 'cell-active') || elm.parentNode.hasAttribute('data-subblock')) {
               // Level 1
@@ -64806,6 +65035,7 @@ class ElementTool {
           }
           */
 
+
           elm.parentNode.removeChild(elm);
           this.elementTool.style.display = 'none';
           let cell = this.builder.activeCol;
@@ -64836,7 +65066,21 @@ class ElementTool {
               subblock.innerHTML = '<div class="spacer height-40" contentEditable="false"></div>';
             }
           });
-          util.clearControls(); //Trigger Change event
+          util.clearControls();
+
+          if (subblock) {
+            let block = this.builder.activeCol;
+            let subblocks = block.querySelectorAll('[data-subblock]');
+            var index = 1;
+            Array.prototype.forEach.call(subblocks, subblock => {
+              if (subblock.closest('.glide__slide--clone')) return;
+              let html = subblock.innerHTML;
+              block.setAttribute('data-html-' + index, encodeURIComponent(html));
+              index++;
+            });
+            util.refreshModuleLayout(block);
+          } //Trigger Change event
+
 
           this.builder.opts.onChange();
         }
@@ -69676,7 +69920,8 @@ class Rte {
       // Column contains custom code.
       customcode = true;
 
-      if (dom.parentsHasAttribute(elm, 'data-subblock')) {
+      if (elm.closest('.is-subblock')) {
+        // dom.parentsHasAttribute(elm, 'data-subblock')
         subblock = true;
       }
     }
@@ -69702,7 +69947,7 @@ class Rte {
           this.showAlignButtons();
           this.positionToolbar();
         }
-      } else if (dom.hasClass(elm, 'spacer') || elm.tagName.toLowerCase() === 'video' || dom.hasClass(elm, 'ovl') || col.getAttribute('data-html')) {
+      } else if (dom.hasClass(elm, 'spacer') || elm.tagName.toLowerCase() === 'video' || dom.hasClass(elm, 'ovl') || col.getAttribute('data-html') && !subblock) {
         //|| col===elm
         if (this.elementRteTool.style.display === 'none' || this.elementRteTool.style.display === '') {
           this.elementRteTool.style.display = 'flex';
@@ -73139,6 +73384,7 @@ class Resizeable {
 
     const onDown = e => {
       calc(e);
+      if (e.target.closest('.glide__arrows')) return false;
       const isResizing = onRightEdge || onBottomEdge || onTopEdge || onLeftEdge;
       clicked = {
         x: x,
@@ -74828,6 +75074,54 @@ class MediaPicker {
 
 }
 
+class Responsive {
+  constructor(builder) {
+    this.builder = builder;
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
+    this.util = util;
+    this.builderStuff = builderStuff;
+    const dom = this.builder.dom;
+    this.dom = dom;
+  }
+
+  getVisibility(elm, target) {
+    if (target === 'xs') return !elm.classList.contains('xs-hidden');
+    if (target === 'sm') return !elm.classList.contains('sm-hidden');
+    if (target === '') return !elm.classList.contains('desktop-hidden');
+  }
+
+  setVisibility(visibility, elm, target) {
+    if (target === 'xs') {
+      if (visibility) elm.classList.remove('xs-hidden');else elm.classList.add('xs-hidden');
+    }
+
+    if (target === 'sm') {
+      if (visibility) elm.classList.remove('sm-hidden');else elm.classList.add('sm-hidden');
+    }
+
+    if (target === '') {
+      if (visibility) elm.classList.remove('desktop-hidden');else elm.classList.add('desktop-hidden');
+    }
+  }
+
+  readTarget(area) {
+    const inp = area.querySelector('.input-device.on');
+    return inp.getAttribute('data-value');
+  }
+
+  showVisibility(area, visibility) {
+    if (visibility) {
+      area.querySelector('.input-visible').classList.add('on');
+      area.querySelector('.input-hidden').classList.remove('on');
+    } else {
+      area.querySelector('.input-visible').classList.remove('on');
+      area.querySelector('.input-hidden').classList.add('on');
+    }
+  }
+
+}
+
 class ContentBuilder {
   constructor(opts = {}) {
     let defaults = {
@@ -75037,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: () => {
@@ -75546,11 +75873,15 @@ class ContentBuilder {
 
     this.win = win;
     this.doc = doc;
+    this.doc.body.classList.add('data-editor');
     const dom = new Dom(this);
     this.dom = dom;
     const util = new Util(this); // General utilities
 
-    this.util = util; // Content stuff
+    this.util = util;
+    const responsive = new Responsive(this); // General utilities
+
+    this.responsive = responsive; // Content stuff
 
     if (this.iframe) {
       let contentStuff = doc.querySelector('.content-stuff');
@@ -75712,7 +76043,8 @@ class ContentBuilder {
           k = false;
       let m = false,
           n = false,
-          o = false;
+          o = false,
+          p = false;
       let isSpecialElement = false;
       let element = target;
 
@@ -75720,6 +76052,7 @@ class ContentBuilder {
         if (!element.tagName) break;
         if (element.tagName === 'BODY' || element.tagName === 'HTML') break;
         if (this.dom.hasClass(element, 'is-builder')) a = true;
+        if (this.dom.hasClass(element, 'is-subblock')) p = true;
         if (this.dom.hasClass(element, 'is-modal')) b = true;
         if (this.dom.hasClass(element, 'is-side') || this.dom.hasClass(element, 'is-sidebar')) c = true;
         if (this.dom.hasClass(element, 'is-pop')) d = true;
@@ -75786,7 +76119,7 @@ class ContentBuilder {
         }
       }
 
-      if (!(a || b || c || d || f || g || h || i || j || o || isSpecialElement) || rowClicked && !i || containerClicked) {
+      if (!(a || p || b || c || d || f || g || h || i || j || o || isSpecialElement) || rowClicked && !i || containerClicked) {
         // Click anywhere but is not inside builder area, modal, popup, tool or rte, then clear row/column (cell) selection
         if (!this.dom.getSelected()) {
           // if(!document.querySelector('.is-modal.active')) { // Additional (to prevent lost focus)
@@ -76508,6 +76841,7 @@ class ContentBuilder {
   }
 
   destroy() {
+    this.doc.body.classList.remove('data-editor');
     document.removeEventListener('click', this.doDocumentClick, false);
     document.removeEventListener('keydown', this.doDocumentKeydown, false);
     document.removeEventListener('mousedown', this.doDocumentMousedown, false);
@@ -76541,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');
@@ -76868,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