@innovastudio/contentbox 1.6.30 → 1.6.32

package/public/contentbox/contentbox.esm.js

@@ -1241,7 +1241,9 @@ class SideBar {
         this.builder.editor.saveForUndo();
         var html = builderStuff.querySelector('#inpViewHtml').value;
         html = this.builder.editor.fromViewToActual(html);
-        this.builder.loadHtml(html); //Trigger Change event
+        this.builder.loadHtml(html);
+        this.builder.editor.hideElementTools();
+        if (this.builder.onSelectChange) this.builder.onSelectChange(); //Trigger Change event
 
         this.builder.settings.onChange(); //Close sidebar
 
@@ -8953,19 +8955,56 @@ class Text {
           span.removeAttribute('data-keep');
         }
       }); // clean
+      // let elms = activeColumn.querySelectorAll('ul,p'); 
+      // Array.prototype.forEach.call(elms, (elm) => {
+      //     let text = elm.innerHTML.trim();
+      //     if(text==='') {
+      //         elm.parentNode.removeChild(elm);
+      //     }
+      // });
 
-      let elms = activeColumn.querySelectorAll('ul,p');
-      Array.prototype.forEach.call(elms, elm => {
-        let text = elm.innerHTML.trim();
+      let elm = this.getElm();
+      const ul = elm.closest('ul,ol');
+      const p = elm.closest('p,h1,h2,h3,h4,h5,h6');
+
+      if (ul && p) {
+        /*
+        Case:
+        After applying list, the structure will be:
+        <p style="...">
+            <ul>
+                <li>Lorem ipsum</li>
+            </ul>
+        </p>
+         DOM will reformat this into:
+        <p style="..."></p>
+        <ul>
+            <li>Lorem ipsum</li>
+        </ul>
+        <p></p>
+         The list will lost its style
+        */
+        const list = ul.querySelectorAll('li');
+        list.forEach(li => {
+          this.appendAttributes(p, li);
+        });
+      }
 
-        if (text === '') {
-          elm.parentNode.removeChild(elm);
-        }
-      });
       onFinish();
     }, 10);
   }
 
+  appendAttributes(sourceElement, destinationElement) {
+    // Append classes
+    destinationElement.classList.add(...sourceElement.classList); // Append styles
+
+    for (let i = 0; i < sourceElement.style.length; i++) {
+      let property = sourceElement.style[i];
+      let value = sourceElement.style.getPropertyValue(property);
+      destinationElement.style.setProperty(property, value);
+    }
+  }
+
   formatText(command) {
     if (command === 'bold') this.execCommandToggle('fontWeight');
     if (command === 'italic') this.execCommandToggle('fontStyle');
@@ -11183,6 +11222,15 @@ class PanelText {
 
     if (elm && elm.closest('.' + config.textTransform.uppercase)) {
       this.panel.querySelector('button[data-format=uppercase]').classList.add('on');
+    }
+
+    this.panel.querySelector('button[data-action=insertUnorderedList]').classList.remove('on');
+    this.panel.querySelector('button[data-action=insertOrderedList]').classList.remove('on');
+
+    if (elm && elm.closest('ul')) {
+      this.panel.querySelector('button[data-action=insertUnorderedList]').classList.add('on');
+    } else if (elm && elm.closest('ol')) {
+      this.panel.querySelector('button[data-action=insertOrderedList]').classList.add('on');
     } // Alignment
 
 
@@ -12476,7 +12524,12 @@ class PanelSvg {
       let currentColor = this.builder.editor.dom.getStyle(svg, 'color');
       const colorpicker = this.builder.editor.colorpicker();
       colorpicker.open(color => {
-        svg.style.color = color;
+        if (svg.style.fill) {
+          svg.style.fill = color;
+        } else {
+          svg.style.color = color;
+        }
+
         btnColorPick.style.backgroundColor = color; // preview
 
         this.builder.editor.onChange();
@@ -12556,8 +12609,16 @@ class PanelSvg {
     if (div.classList.contains('text-right')) panel.querySelector('[data-align="right"]').classList.add('on');
     if (div.classList.contains('text-center')) panel.querySelector('[data-align="center"]').classList.add('on');
     if (div.classList.contains('text-justify')) panel.querySelector('[data-align="justify"]').classList.add('on');
-    const btnColorPick = panel.querySelector('.btn-color');
-    let currentColor = this.builder.editor.dom.getStyle(svg, 'color');
+    const btnColorPick = panel.querySelector('.btn-color'); // let currentColor = this.builder.editor.dom.getStyle(svg, 'color');
+
+    let currentColor;
+
+    if (svg.style.fill) {
+      currentColor = svg.style.fill;
+    } else {
+      currentColor = svg.style.color;
+    }
+
     btnColorPick.style.backgroundColor = currentColor; // panel.querySelectorAll('.fontsizes button').forEach(btn=>btn.classList.remove('on'));
     // let currentSize = svg.getAttribute('width');
     // panel.querySelectorAll('.fontsizes button').forEach(btn=>{
@@ -25193,7 +25254,7 @@ class ControlPanel {
           this.title.innerHTML = titleHtml;
           this.panelIframe.classList.add('active');
           this.objPanelIframe.getState();
-        } else if (element.tagName.toLowerCase() === 'i' && element.classList.contains('icon')) {
+        } else if (element.tagName.toLowerCase() === 'i' && (element.classList.contains('icon') || element.classList.contains('bi'))) {
           let titleHtml = out('Icon');
           this.title.innerHTML = titleHtml;
           this.panelIcon.classList.add('active');
@@ -26689,7 +26750,7 @@ const renderQuickAdd = builder => {
     elm = quickadd.querySelector('.add-list');
     dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      const html = `<ul style="list-style: initial;padding-left: 20px;">
+      const html = `<ul>
                 <li>Lorem Ipsum is simply dummy text</li>
                 <li>Lorem Ipsum is simply dummy text</li>
             </ul>`;
@@ -27385,7 +27446,10 @@ class Util$1 {
     const dom = this.dom;
     dom.removeClass(modal, 'active');
     modal.style.display = '';
+
+    // document.body.style.overflow = '';
   }
+
   refreshModuleLayout(col) {
     let savedHeight;
     if (col.style.height) savedHeight = col.style.height;else col.style.height = `${col.offsetHeight}px`;
@@ -27741,13 +27805,27 @@ class Util$1 {
       if (!elm) return;
       this.builder.uo.saveForUndo();
       let element = elm;
-      // while(!dom.hasClass(element.parentNode, 'cell-active')) {
-      //     element = element.parentNode;
-      // }
-      element.insertAdjacentHTML('afterend', html);
+      let newelement;
+      if (!element.nextElementSibling) {
+        // active element is div.display > p.
+        let activeCol = this.builder.activeCol;
+        let current;
+        const elms = dom.elementChildren(activeCol);
+        elms.forEach(child => {
+          if (child.contains(element)) {
+            current = child;
+          }
+        });
+        if (current) {
+          current.insertAdjacentHTML('afterend', html); // add new element after div.display
+          newelement = current.nextElementSibling;
+        }
+      } else {
+        element.insertAdjacentHTML('afterend', html);
+        newelement = element.nextElementSibling;
+      }
       let builderActive = this.builder.doc.querySelector('.builder-active');
       if (builderActive) this.builder.applyBehaviorOn(builderActive);
-      let newelement = element.nextElementSibling;
       if (newelement.tagName.toLowerCase() === 'img') {
         let checkLoad = setInterval(() => {
           if (newelement.complete) {
@@ -30376,6 +30454,12 @@ class Dom {
       }
     });
   }
+  countOccurrences(text, word) {
+    // match the word globally and case insensitively
+    const regex = new RegExp(word, 'gi');
+    const matches = text.match(regex);
+    return matches ? matches.length : 0;
+  }
 }
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -36836,97 +36920,86 @@ class HtmlUtil {
         col.style.cursor = '';
       });
     });
-    let elms = tmp.querySelectorAll('.sortable-chosen');
-    dom.removeClasses(elms, 'sortable-chosen');
-    elms = tmp.querySelectorAll('.sortable-ghost');
-    dom.removeClasses(elms, 'sortable-ghost');
-    elms = tmp.querySelectorAll('.elm-active');
-    dom.removeClasses(elms, 'elm-active');
-    elms = tmp.querySelectorAll('.icon-active');
-    dom.removeClasses(elms, 'icon-active');
-    elms = tmp.querySelectorAll('.elm-inspected');
-    dom.removeClasses(elms, 'elm-inspected');
-    elms = tmp.querySelectorAll('.cell-active');
-    dom.removeClasses(elms, 'cell-active');
-    elms = tmp.querySelectorAll('.row-active');
-    dom.removeClasses(elms, 'row-active');
-    elms = tmp.querySelectorAll('.row-outline');
-    dom.removeClasses(elms, 'row-outline');
-    elms = tmp.querySelectorAll('.is-builder');
-    dom.removeClasses(elms, 'is-builder');
-    elms = tmp.querySelectorAll('.row-outline');
-    dom.removeClasses(elms, 'row-outline');
-    elms = tmp.querySelectorAll('[data-click]');
-    dom.removeAttributes(elms, 'data-click');
-    elms = tmp.querySelectorAll('[contenteditable]');
-    dom.removeAttributes(elms, 'contenteditable');
-    elms = tmp.querySelectorAll('[draggridoutline]');
-    dom.removeAttributes(elms, 'draggridoutline');
-    elms = tmp.querySelectorAll('[between-blocks-left]');
-    dom.removeAttributes(elms, 'between-blocks-left');
-    elms = tmp.querySelectorAll('[between-blocks-center]');
-    dom.removeAttributes(elms, 'between-blocks-center');
-    elms = tmp.querySelectorAll('[hideelementhighlight]');
-    dom.removeAttributes(elms, 'hideelementhighlight');
-    elms = tmp.querySelectorAll('[data-module-active]');
-    dom.removeAttributes(elms, 'data-module-active');
-    elms = tmp.querySelectorAll('[draggable]');
-    dom.removeAttributes(elms, 'draggable');
-    elms = tmp.querySelectorAll('[data-animated]');
-    dom.removeAttributes(elms, 'data-animated');
-    elms = tmp.querySelectorAll('[data-saveforundo]');
-    dom.removeAttributes(elms, 'data-saveforundo');
-    elms = tmp.querySelectorAll('[hidesnippetaddtool]');
-    dom.removeAttributes(elms, 'hidesnippetaddtool');
-    elms = tmp.querySelectorAll('[gray]');
-    dom.removeAttributes(elms, 'gray');
-    elms = tmp.querySelectorAll('[rowoutline]');
-    dom.removeAttributes(elms, 'rowoutline');
-    elms = tmp.querySelectorAll('[hidecolumntool]');
-    dom.removeAttributes(elms, 'hidecolumntool');
-    elms = tmp.querySelectorAll('[grayoutline]');
-    dom.removeAttributes(elms, 'grayoutline');
-    elms = tmp.querySelectorAll('[hideoutline]');
-    dom.removeAttributes(elms, 'hideoutline');
-    elms = tmp.querySelectorAll('[leftrowtool]');
-    dom.removeAttributes(elms, 'leftrowtool');
-    elms = tmp.querySelectorAll('[minimal]');
-    dom.removeAttributes(elms, 'minimal');
-    elms = tmp.querySelectorAll('[clean]');
-    dom.removeAttributes(elms, 'clean');
-    elms = tmp.querySelectorAll('[grideditor]');
-    dom.removeAttributes(elms, 'grideditor');
-    elms = tmp.querySelectorAll('[gridoutline]');
-    dom.removeAttributes(elms, 'gridoutline');
-    dom.removeElements(tmp.querySelectorAll('.is-row-tool'));
-    dom.removeElements(tmp.querySelectorAll('.is-col-tool'));
-    dom.removeElements(tmp.querySelectorAll('.is-rowadd-tool'));
-    dom.removeElements(tmp.querySelectorAll('.ovl'));
-    dom.removeElements(tmp.querySelectorAll('.row-add-initial'));
+    let elms;
+    elms = tmp.querySelectorAll('.sortable-chosen, .sortable-ghost, .elm-active, .icon-active, .elm-inspected, .cell-active, .row-active, .row-outline, .is-builder');
+    elms.forEach(elm => {
+      elm.classList.remove('sortable-chosen');
+      elm.classList.remove('sortable-ghost');
+      elm.classList.remove('elm-active');
+      elm.classList.remove('icon-active');
+      elm.classList.remove('elm-inspected');
+      elm.classList.remove('cell-active');
+      elm.classList.remove('row-active');
+      elm.classList.remove('row-outline');
+      elm.classList.remove('is-builder');
+    });
+    elms = tmp.querySelectorAll('[data-click], [contenteditable], [draggridoutline], [between-blocks-left], [between-blocks-center], [hideelementhighlight], [data-module-active], [draggable]');
+    elms.forEach(elm => {
+      elm.removeAttribute('data-click');
+      elm.removeAttribute('contenteditable');
+      elm.removeAttribute('draggridoutline');
+      elm.removeAttribute('between-blocks-left');
+      elm.removeAttribute('between-blocks-center');
+      elm.removeAttribute('hideelementhighlight');
+      elm.removeAttribute('data-module-active');
+      elm.removeAttribute('draggable');
+    });
+    elms = tmp.querySelectorAll('[data-animated], [data-saveforundo], [hidesnippetaddtool], [gray], [rowoutline], [hidecolumntool], [grayoutline], [hideoutline]');
+    elms.forEach(elm => {
+      elm.removeAttribute('data-animated');
+      elm.removeAttribute('data-saveforundo');
+      elm.removeAttribute('hidesnippetaddtool');
+      elm.removeAttribute('gray');
+      elm.removeAttribute('rowoutline');
+      elm.removeAttribute('hidecolumntool');
+      elm.removeAttribute('grayoutline');
+      elm.removeAttribute('hideoutline');
+    });
+    elms = tmp.querySelectorAll('[leftrowtool], [minimal], [clean], [grideditor], [gridoutline]');
+    elms.forEach(elm => {
+      elm.removeAttribute('leftrowtool');
+      elm.removeAttribute('minimal');
+      elm.removeAttribute('clean');
+      elm.removeAttribute('grideditor');
+      elm.removeAttribute('gridoutline');
+    });
+    elms = tmp.querySelectorAll('.is-row-tool,.is-col-tool,.is-rowadd-tool,.is-canvas-tool,.is-canvasadd-tool');
+    elms.forEach(elm => {
+      if (elm.previousSibling && elm.previousSibling.nodeType === Node.TEXT_NODE) {
+        elm.previousSibling.remove();
+      }
+      if (elm.nextSibling && elm.nextSibling.nodeType === Node.TEXT_NODE) {
+        elm.nextSibling.remove();
+      }
+      elm.remove();
+    });
+    elms = tmp.querySelectorAll('.ovl,.row-add-initial');
+    elms.forEach(elm => {
+      elm.remove();
+    });
 
     //Extra cleaning
     if (this.builder.cleanAOS) {
-      elms = tmp.querySelectorAll('.aos-init');
-      dom.removeClasses(elms, 'aos-init');
-      elms = tmp.querySelectorAll('.aos-animate');
-      dom.removeClasses(elms, 'aos-animate');
-    }
-    elms = tmp.querySelectorAll('.skrollable');
-    dom.removeClasses(elms, 'skrollable');
-    elms = tmp.querySelectorAll('.skrollable-after');
-    dom.removeClasses(elms, 'skrollable-after');
-    elms = tmp.querySelectorAll('.skrollable-before');
-    dom.removeClasses(elms, 'skrollable-before');
-    elms = tmp.querySelectorAll('.skrollable-between');
-    dom.removeClasses(elms, 'skrollable-between');
-    elms = tmp.querySelectorAll('.is-inview');
-    dom.removeClasses(elms, 'is-inview');
+      elms = tmp.querySelectorAll('.aos-init, .aos-animate');
+      elms.forEach(elm => {
+        elm.classList.remove('aos-init');
+        elm.classList.remove('aos-animate');
+      });
+    }
+    elms = tmp.querySelectorAll('.skrollable, .skrollable-after, .skrollable-before, .skrollable-between, .is-inview');
+    elms.forEach(elm => {
+      elm.classList.remove('skrollable');
+      elm.classList.remove('skrollable-after');
+      elm.classList.remove('skrollable-before');
+      elm.classList.remove('skrollable-between');
+      elm.classList.remove('is-inview');
+    });
     let emptyclasses = tmp.querySelectorAll('[class=""]');
-    Array.prototype.forEach.call(emptyclasses, emptyclass => {
+    emptyclasses.forEach(emptyclass => {
       emptyclass.removeAttribute('class');
     });
     let unusedOverlays = tmp.querySelectorAll('.is-row-overlay');
-    Array.prototype.forEach.call(unusedOverlays, unusedOverlay => {
+    unusedOverlays.forEach(unusedOverlay => {
       if (!unusedOverlay.hasAttribute('style')) unusedOverlay.parentNode.removeChild(unusedOverlay);
     });
     dom.removeEmptyStyle(tmp);
@@ -36935,7 +37008,7 @@ class HtmlUtil {
 
     //Backward compatible: cleanup button <span contenteditable="false"><a contenteditable="true">button</a></span>
     let links = tmp.querySelectorAll('a');
-    Array.prototype.forEach.call(links, link => {
+    links.forEach(link => {
       if (link.style.display === 'inline-block') {
         if (link.parentNode.childElementCount === 1 && link.parentNode.tagName.toLowerCase() === 'span') {
           link.parentNode.outerHTML = link.parentNode.innerHTML;
@@ -36953,85 +37026,44 @@ class HtmlUtil {
       //ContentBox
 
       // Remove dummy DIV after last section
-      let elms = tmp.querySelectorAll('.is-dummy');
-      dom.removeElements(elms);
-      elms = tmp.querySelectorAll('[data-scroll]');
-      dom.removeAttributes(elms, 'data-scroll');
-      elms = tmp.querySelectorAll('[data-scroll-once]');
-      dom.removeAttributes(elms, 'data-scroll-once');
+      elms = tmp.querySelectorAll('.is-dummy');
+      elms.forEach(elm => {
+        elm.remove();
+      });
+      elms = tmp.querySelectorAll('[data-scroll], [data-scroll-once]');
+      elms.forEach(elm => {
+        elm.removeAttribute('data-scroll');
+        elm.removeAttribute('data-scroll-once');
+      });
       if (this.builder.shortenOutput) {
-        elms = tmp.querySelectorAll('[data-noedit]');
-        dom.removeAttributes(elms, 'data-noedit');
-        elms = tmp.querySelectorAll('[data-module]');
-        dom.removeAttributes(elms, 'data-module');
-        elms = tmp.querySelectorAll('[data-module-desc]');
-        dom.removeAttributes(elms, 'data-module-desc');
-        elms = tmp.querySelectorAll('[data-dialog-width]');
-        dom.removeAttributes(elms, 'data-dialog-width');
-        elms = tmp.querySelectorAll('[data-dialog-height]');
-        dom.removeAttributes(elms, 'data-dialog-height');
-        elms = tmp.querySelectorAll('[data-html]');
-        dom.removeAttributes(elms, 'data-html');
-        elms = tmp.querySelectorAll('[data-settings]');
-        dom.removeAttributes(elms, 'data-settings');
-        elms = tmp.querySelectorAll('[data-html-1]');
-        dom.removeAttributes(elms, 'data-html-1');
-        elms = tmp.querySelectorAll('[data-html-2]');
-        dom.removeAttributes(elms, 'data-html-2');
-        elms = tmp.querySelectorAll('[data-html-3]');
-        dom.removeAttributes(elms, 'data-html-3');
-        elms = tmp.querySelectorAll('[data-html-4]');
-        dom.removeAttributes(elms, 'data-html-4');
-        elms = tmp.querySelectorAll('[data-html-5]');
-        dom.removeAttributes(elms, 'data-html-5');
-        elms = tmp.querySelectorAll('[data-html-6]');
-        dom.removeAttributes(elms, 'data-html-6');
-        elms = tmp.querySelectorAll('[data-html-7]');
-        dom.removeAttributes(elms, 'data-html-7');
-        elms = tmp.querySelectorAll('[data-html-8]');
-        dom.removeAttributes(elms, 'data-html-8');
-        elms = tmp.querySelectorAll('[data-html-9]');
-        dom.removeAttributes(elms, 'data-html-9');
-        elms = tmp.querySelectorAll('[data-html-10]');
-        dom.removeAttributes(elms, 'data-html-10');
-        elms = tmp.querySelectorAll('[data-html-12]');
-        dom.removeAttributes(elms, 'data-html-12');
-        elms = tmp.querySelectorAll('[data-html-13]');
-        dom.removeAttributes(elms, 'data-html-13');
-        elms = tmp.querySelectorAll('[data-html-14]');
-        dom.removeAttributes(elms, 'data-html-14');
-        elms = tmp.querySelectorAll('[data-html-15]');
-        dom.removeAttributes(elms, 'data-html-15');
-        elms = tmp.querySelectorAll('[data-html-16]');
-        dom.removeAttributes(elms, 'data-html-16');
-        elms = tmp.querySelectorAll('[data-html-17]');
-        dom.removeAttributes(elms, 'data-html-17');
-        elms = tmp.querySelectorAll('[data-html-18]');
-        dom.removeAttributes(elms, 'data-html-18');
-        elms = tmp.querySelectorAll('[data-html-19]');
-        dom.removeAttributes(elms, 'data-html-19');
-        elms = tmp.querySelectorAll('[data-html-20]');
-        dom.removeAttributes(elms, 'data-html-20');
-        elms = tmp.querySelectorAll('[data-html-21]');
-        dom.removeAttributes(elms, 'data-html-21');
-        elms = tmp.querySelectorAll('[data-html-21]');
-        dom.removeAttributes(elms, 'data-html-21');
-        elms = tmp.querySelectorAll('[data-html-22]');
-        dom.removeAttributes(elms, 'data-html-22');
-        elms = tmp.querySelectorAll('[data-html-23]');
-        dom.removeAttributes(elms, 'data-html-23');
-        elms = tmp.querySelectorAll('[data-html-24]');
-        dom.removeAttributes(elms, 'data-html-24');
-        elms = tmp.querySelectorAll('[data-html-25]');
-        dom.removeAttributes(elms, 'data-html-25');
+        elms = tmp.querySelectorAll('[data-noedit], [data-module], [data-module-desc], [data-dialog-width], [data-dialog-height], [data-html], [data-settings]');
+        elms.forEach(elm => {
+          elm.removeAttribute('data-noedit');
+          elm.removeAttribute('data-module');
+          elm.removeAttribute('data-module-desc');
+          elm.removeAttribute('data-dialog-width');
+          elm.removeAttribute('data-dialog-height');
+          elm.removeAttribute('data-html');
+          elm.removeAttribute('data-settings');
+        });
+        elms = tmp.querySelectorAll('[data-html-1], [data-html-2], [data-html-3], [data-html-4], [data-html-5], [data-html-6], [data-html-7], [data-html-8], [data-html-9], [data-html-10]');
+        elms.forEach(elm => {
+          elm.removeAttribute('data-html-1');
+          elm.removeAttribute('data-html-2');
+          elm.removeAttribute('data-html-3');
+          elm.removeAttribute('data-html-4');
+          elm.removeAttribute('data-html-5');
+          elm.removeAttribute('data-html-6');
+          elm.removeAttribute('data-html-7');
+          elm.removeAttribute('data-html-8');
+          elm.removeAttribute('data-html-9');
+          elm.removeAttribute('data-html-10');
+        });
       }
 
       // 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],' +
-      //     '[data-in],[data-in-150],[data-in-300],[data-cen--150],[data-cen],[data-cen-150],[data-out--300],[data-out--150],[data-out]');
       Array.prototype.forEach.call(elms, elm => {
         elm.style.transition = '';
         elm.style.transform = '';
@@ -37067,34 +37099,24 @@ class HtmlUtil {
       });
 
       //Cleanup utils
-      elms = tmp.querySelectorAll('.is-appeared');
-      Array.prototype.forEach.call(elms, elm => {
-        dom.removeClass(elm, 'is-appeared');
-      });
-      elms = tmp.querySelectorAll('.box-active');
-      Array.prototype.forEach.call(elms, elm => {
-        dom.removeClass(elm, 'box-active');
-      });
-      elms = tmp.querySelectorAll('.section-active');
-      Array.prototype.forEach.call(elms, elm => {
-        dom.removeClass(elm, 'section-active');
-      });
-      elms = tmp.querySelectorAll('.section-select');
-      Array.prototype.forEach.call(elms, elm => {
-        dom.removeClass(elm, 'section-select');
+      elms = tmp.querySelectorAll('.is-appeared, .box-active, .section-active, .section-select, .box-select');
+      elms.forEach(elm => {
+        elm.classList.remove('is-appeared');
+        elm.classList.remove('box-active');
+        elm.classList.remove('section-active');
+        elm.classList.remove('section-select');
+        elm.classList.remove('box-select');
       });
-      elms = tmp.querySelectorAll('.box-select');
-      Array.prototype.forEach.call(elms, elm => {
-        dom.removeClass(elm, 'box-select');
+      elms = tmp.querySelectorAll('.is-section-tool, .is-box-tool, .is-box-info, .is-section-info');
+      elms.forEach(elm => {
+        if (elm.previousSibling && elm.previousSibling.nodeType === Node.TEXT_NODE) {
+          elm.previousSibling.remove();
+        }
+        if (elm.nextSibling && elm.nextSibling.nodeType === Node.TEXT_NODE) {
+          elm.nextSibling.remove();
+        }
+        elm.remove();
       });
-      elms = tmp.querySelectorAll('.is-section-tool');
-      dom.removeElements(elms);
-      elms = tmp.querySelectorAll('.is-box-tool');
-      dom.removeElements(elms);
-      elms = tmp.querySelectorAll('.is-box-info');
-      dom.removeElements(elms);
-      elms = tmp.querySelectorAll('.is-section-info');
-      dom.removeElements(elms);
 
       // freeform
       elms = tmp.querySelectorAll('.is-block .handle, .is-block .rotate-handle');
@@ -37111,8 +37133,6 @@ class HtmlUtil {
         elm.removeAttribute('data-prev');
       });
       tmp.querySelectorAll('.is-block.clone').forEach(elm => elm.parentNode.removeChild(elm));
-      // tmp.querySelectorAll('.is-block.cloned').forEach(elm=>elm.classList.remove('cloned'));
-
       var html_content = '';
       var html_footer = '';
       var html_others = '';
@@ -37166,70 +37186,29 @@ class HtmlUtil {
         emptystyle.removeAttribute('style');
       });
       if (this.builder.shortenOutput) {
-        elms = tmp.querySelectorAll('[data-noedit]');
-        dom.removeAttributes(elms, 'data-noedit');
-        elms = tmp.querySelectorAll('[data-module]');
-        dom.removeAttributes(elms, 'data-module');
-        elms = tmp.querySelectorAll('[data-module-desc]');
-        dom.removeAttributes(elms, 'data-module-desc');
-        elms = tmp.querySelectorAll('[data-dialog-width]');
-        dom.removeAttributes(elms, 'data-dialog-width');
-        elms = tmp.querySelectorAll('[data-dialog-height]');
-        dom.removeAttributes(elms, 'data-dialog-height');
-        elms = tmp.querySelectorAll('[data-html]');
-        dom.removeAttributes(elms, 'data-html');
-        elms = tmp.querySelectorAll('[data-settings]');
-        dom.removeAttributes(elms, 'data-settings');
-        elms = tmp.querySelectorAll('[data-html-1]');
-        dom.removeAttributes(elms, 'data-html-1');
-        elms = tmp.querySelectorAll('[data-html-2]');
-        dom.removeAttributes(elms, 'data-html-2');
-        elms = tmp.querySelectorAll('[data-html-3]');
-        dom.removeAttributes(elms, 'data-html-3');
-        elms = tmp.querySelectorAll('[data-html-4]');
-        dom.removeAttributes(elms, 'data-html-4');
-        elms = tmp.querySelectorAll('[data-html-5]');
-        dom.removeAttributes(elms, 'data-html-5');
-        elms = tmp.querySelectorAll('[data-html-6]');
-        dom.removeAttributes(elms, 'data-html-6');
-        elms = tmp.querySelectorAll('[data-html-7]');
-        dom.removeAttributes(elms, 'data-html-7');
-        elms = tmp.querySelectorAll('[data-html-8]');
-        dom.removeAttributes(elms, 'data-html-8');
-        elms = tmp.querySelectorAll('[data-html-9]');
-        dom.removeAttributes(elms, 'data-html-9');
-        elms = tmp.querySelectorAll('[data-html-10]');
-        dom.removeAttributes(elms, 'data-html-10');
-        elms = tmp.querySelectorAll('[data-html-12]');
-        dom.removeAttributes(elms, 'data-html-12');
-        elms = tmp.querySelectorAll('[data-html-13]');
-        dom.removeAttributes(elms, 'data-html-13');
-        elms = tmp.querySelectorAll('[data-html-14]');
-        dom.removeAttributes(elms, 'data-html-14');
-        elms = tmp.querySelectorAll('[data-html-15]');
-        dom.removeAttributes(elms, 'data-html-15');
-        elms = tmp.querySelectorAll('[data-html-16]');
-        dom.removeAttributes(elms, 'data-html-16');
-        elms = tmp.querySelectorAll('[data-html-17]');
-        dom.removeAttributes(elms, 'data-html-17');
-        elms = tmp.querySelectorAll('[data-html-18]');
-        dom.removeAttributes(elms, 'data-html-18');
-        elms = tmp.querySelectorAll('[data-html-19]');
-        dom.removeAttributes(elms, 'data-html-19');
-        elms = tmp.querySelectorAll('[data-html-20]');
-        dom.removeAttributes(elms, 'data-html-20');
-        elms = tmp.querySelectorAll('[data-html-21]');
-        dom.removeAttributes(elms, 'data-html-21');
-        elms = tmp.querySelectorAll('[data-html-21]');
-        dom.removeAttributes(elms, 'data-html-21');
-        elms = tmp.querySelectorAll('[data-html-22]');
-        dom.removeAttributes(elms, 'data-html-22');
-        elms = tmp.querySelectorAll('[data-html-23]');
-        dom.removeAttributes(elms, 'data-html-23');
-        elms = tmp.querySelectorAll('[data-html-24]');
-        dom.removeAttributes(elms, 'data-html-24');
-        elms = tmp.querySelectorAll('[data-html-25]');
-        dom.removeAttributes(elms, 'data-html-25');
+        elms = tmp.querySelectorAll('[data-noedit], [data-module], [data-module-desc], [data-dialog-width], [data-dialog-height], [data-html], [data-settings]');
+        elms.forEach(elm => {
+          elm.removeAttribute('data-noedit');
+          elm.removeAttribute('data-module');
+          elm.removeAttribute('data-module-desc');
+          elm.removeAttribute('data-dialog-width');
+          elm.removeAttribute('data-dialog-height');
+          elm.removeAttribute('data-html');
+          elm.removeAttribute('data-settings');
+        });
+        elms = tmp.querySelectorAll('[data-html-1], [data-html-2], [data-html-3], [data-html-4], [data-html-5], [data-html-6], [data-html-7], [data-html-8], [data-html-9], [data-html-10]');
+        elms.forEach(elm => {
+          elm.removeAttribute('data-html-1');
+          elm.removeAttribute('data-html-2');
+          elm.removeAttribute('data-html-3');
+          elm.removeAttribute('data-html-4');
+          elm.removeAttribute('data-html-5');
+          elm.removeAttribute('data-html-6');
+          elm.removeAttribute('data-html-7');
+          elm.removeAttribute('data-html-8');
+          elm.removeAttribute('data-html-9');
+          elm.removeAttribute('data-html-10');
+        });
       }
 
       // freeform
@@ -37357,6 +37336,8 @@ class UndoRedo {
     dom.removeElements(tmp.querySelectorAll('.is-row-tool'));
     dom.removeElements(tmp.querySelectorAll('.is-rowadd-tool'));
     dom.removeElements(tmp.querySelectorAll('.is-col-tool'));
+    dom.removeElements(tmp.querySelectorAll('.is-canvas-tool'));
+    dom.removeElements(tmp.querySelectorAll('.is-canvasadd-tool'));
     dom.removeElements(tmp.querySelectorAll('.ovl'));
     dom.removeElements(tmp.querySelectorAll('.row-add-initial'));
 
@@ -37536,6 +37517,7 @@ class UndoRedo {
       this.writeHtml(html);
     }
     this.builder.applyBehavior();
+    this.builder.applyBehaviorCanvas();
     this.builder.opts.onChange();
     this.undoList[120] = this.undoList[121];
     this.undoList[121] = this.undoList[122];
@@ -37625,6 +37607,7 @@ class UndoRedo {
       this.writeHtml(html);
     }
     this.builder.applyBehavior();
+    this.builder.applyBehaviorCanvas();
     this.builder.opts.onChange();
     this.undoList[119] = this.undoList[118];
     this.undoList[118] = this.undoList[117];
@@ -38068,6 +38051,24 @@ const prepareSvgIcons = builder => {
             <symbol id="icon-svg" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M21 8h-2a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2v-4h-1" /><path d="M7 8h-3a1 1 0 0 0 -1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-3" /><path d="M10 8l1.5 8h1l1.5 -8" />
             </symbol>
+
+            <symbol id="icon-pagesize" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 5m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /><path d="M7 12v-3h3" /><path d="M17 12v3h-3" />
+            </symbol>
+            <symbol id="icon-print" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M17 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2" /><path d="M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4" /><path d="M7 13m0 2a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2z" />
+            </symbol>
+
+            <symbol id="icon-plus" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <line x1="12" y1="5" x2="12" y2="19"></line>
+                <line x1="5" y1="12" x2="19" y2="12"></line>
+            </symbol>
+            <symbol id="icon-plus2" 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 5l0 14"></path>
+                <path d="M5 12l14 0"></path>
+            </symbol>
         </svg>`;
   builder.dom.appendHtml(builder.builderStuff, html);
 };
@@ -70596,6 +70597,8 @@ class Image$1 {
         try {
           img.setAttribute('data-filename', input.files[0].name); //needed for saveimage.js | 
 
+          // img.crossOrigin = 'anonymous';
+
           this.processImage(input.files[0], img, () => {
             imageProgress.style.display = 'none';
             elm = imageTool.querySelector('#fileEmbedImage');
@@ -87048,7 +87051,15 @@ class ElementTool {
               }
           }
           */
-          elm.parentNode.removeChild(elm);
+
+          // elm.parentNode.removeChild(elm);
+          let elmParent = elm.parentNode;
+          elm.remove();
+          let childs = dom.elementChildren(elmParent);
+          if (!elmParent.classList.contains('cell-active') && childs.length === 0) {
+            elmParent.remove(); // remove empty div.display
+          }
+
           this.elementTool.style.display = 'none';
           let cell = this.builder.activeCol;
           if (cell) {
@@ -87367,7 +87378,7 @@ class ElementTool {
     if ((customcode || noedit || _protected) && !subblock) ; else {
       const tagName = elm.tagName.toLowerCase();
       // LATER: label, code, figcaption ?
-      if (tagName === 'h1' || tagName === 'h2' || tagName === 'h3' || tagName === 'h4' || tagName === 'h5' || tagName === 'h6' || tagName === 'p' || tagName === 'pre' || tagName === 'blockquote' || tagName === 'li' || tagName === 'img' || tagName === 'iframe') {
+      if (!elm.classList.contains('cell-active') && (tagName === 'h1' || tagName === 'h2' || tagName === 'h3' || tagName === 'h4' || tagName === 'h5' || tagName === 'h6' || tagName === 'p' || tagName === 'div' || tagName === 'pre' || tagName === 'blockquote' || tagName === 'li' || tagName === 'img' || tagName === 'iframe')) {
         activeElement = elm; //set active element
 
         if (tagName === 'img') {
@@ -89845,8 +89856,14 @@ class Rte {
     let rteZoomSlider;
     let inpZoomSlider;
     if (!rteTool) {
+      let zoomMax = 100;
+      if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer && !this.builder.iframe) {
+        // freeform
+        zoomMax = 200;
+      }
+
       // if(builder.plugins.length>0) {
-      let allButtons = ['|', 'addsnippet', 'bold', 'italic', 'underline', 'formatting', 'color', 'removeformat', 'align', 'textsettings', 'createlink', 'tags', 'undo', 'redo', 'zoom', 'livepreview', 'icon', 'image', 'list', 'font', 'formatpara', 'gridtool', 'html', 'preferences', 'more', 'left', 'center', 'right', 'full', 'group', 'ungroup', 'duplicate', 'addblock', 'front', 'backward', 'moveup', 'movedown', 'delete', 'blocksettings', 'aiassistant', 'snippets', 'svg'];
+      let allButtons = ['|', 'addsnippet', 'bold', 'italic', 'underline', 'formatting', 'color', 'removeformat', 'align', 'textsettings', 'createlink', 'tags', 'undo', 'redo', 'zoom', 'livepreview', 'icon', 'image', 'list', 'font', 'formatpara', 'gridtool', 'html', 'preferences', 'more', 'left', 'center', 'right', 'full', 'group', 'ungroup', 'duplicate', 'addblock', 'front', 'backward', 'moveup', 'movedown', 'delete', 'blocksettings', 'aiassistant', 'snippets', 'svg', 'pageoptions', 'print'];
       const filterButtons = myArray => {
         let newArray = myArray;
         myArray.forEach(item => {
@@ -89906,7 +89923,7 @@ class Rte {
         var btn = builder.opts.buttonsMore[j].toLowerCase();
         if (btn === 'createlink') html_rtemore += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_rtemore += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_rtemore += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px;"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'removeformat') html_rtemore += `<button tabindex="-1" title="${util.out('Clean')}" class="rte-clean"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>`;else if (btn === 'bold') html_rtemore += `<button tabindex="-1" title="${util.out('Bold')}" class="rte-format" data-command="bold"><span style="font-family:serif;font-size:14px;">B</span></button>`;else if (btn === 'italic') html_rtemore += `<button tabindex="-1" title="${util.out('Italic')}" class="rte-format" data-command="italic"><span style="font-family:serif;font-size:16px;font-style:italic;">i</span></button>`;else if (btn === 'underline') html_rtemore += `<button tabindex="-1" title="${util.out('Underline')}" class="rte-format" data-command="underline"><span style="font-family:serif;font-size:14px;text-decoration:underline;">U</span></button>`;
         // else if(btn==='createlink') html_rtemore += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`; 
-        else if (btn === 'align') html_rtemore += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'list') html_rtemore += `<button tabindex="-1" title="${util.out('List')}" class="rte-list"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-list-bullet"></use></svg></button>`;else if (btn === 'color') html_rtemore += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'formatting') html_rtemore += `<button tabindex="-1" title="${util.out('Formatting')}" class="rte-formatting"><span style="font-family:serif;font-size:15px;display:inline-block;">A</span></button>`;else if (btn === 'tags') html_rtemore += customtag_button;else if (btn === 'image') html_rtemore += `<button tabindex="-1" title="${util.out('Image')}" class="rte-image"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-image"></use></svg></button>`;else if (btn === 'gridtool') html_rtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_rtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_rtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_rtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'formatpara') html_rtemore += `<button tabindex="-1" title="${util.out('Paragraph')}" class="rte-paragraph"><span style="font-family:serif;font-size:14px;display:inline-block;margin-top:2px;">H</span></button>`;else if (btn === 'font') html_rtemore += `<button tabindex="-1" title="${util.out('Font')}" class="rte-fontfamily"><span style="font-family:serif;font-size:18px;text-transform:none;display:inline-block;margin-top: -3px;">a</span></button>`;else if (btn === 'textsettings') html_rtemore += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_rtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_rtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_rtemore += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_rtemore += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="margin-top:2px;width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'zoom') html_rtemore += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_rtemore += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
+        else if (btn === 'align') html_rtemore += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'list') html_rtemore += `<button tabindex="-1" title="${util.out('List')}" class="rte-list"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-list-bullet"></use></svg></button>`;else if (btn === 'color') html_rtemore += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'formatting') html_rtemore += `<button tabindex="-1" title="${util.out('Formatting')}" class="rte-formatting"><span style="font-family:serif;font-size:15px;display:inline-block;">A</span></button>`;else if (btn === 'tags') html_rtemore += customtag_button;else if (btn === 'image') html_rtemore += `<button tabindex="-1" title="${util.out('Image')}" class="rte-image"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-image"></use></svg></button>`;else if (btn === 'gridtool') html_rtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_rtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_rtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_rtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'formatpara') html_rtemore += `<button tabindex="-1" title="${util.out('Paragraph')}" class="rte-paragraph"><span style="font-family:serif;font-size:14px;display:inline-block;margin-top:2px;">H</span></button>`;else if (btn === 'font') html_rtemore += `<button tabindex="-1" title="${util.out('Font')}" class="rte-fontfamily"><span style="font-family:serif;font-size:18px;text-transform:none;display:inline-block;margin-top: -3px;">a</span></button>`;else if (btn === 'textsettings') html_rtemore += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_rtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_rtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_rtemore += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_rtemore += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'pageoptions') html_rtemore += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;transform:rotate(90deg)"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_rtemore += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_rtemore += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_rtemore += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
           html_rtemore += '<div class="rte-separator"></div>';
         } else {
           html_rtemore += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
@@ -89916,7 +89933,7 @@ class Rte {
       let html_rte = '';
       for (j = 0; j < builder.opts.buttons.length; j++) {
         btn = builder.opts.buttons[j].toLowerCase();
-        if (btn === 'bold') html_rte += `<button tabindex="-1" title="${util.out('Bold')}" class="rte-format" data-command="bold"><span style="font-family:serif;font-size:14px;">B</span></button>`;else if (btn === 'italic') html_rte += `<button tabindex="-1" title="${util.out('Italic')}" class="rte-format" data-command="italic"><span style="font-family:serif;font-size:16px;font-style:italic;">i</span></button>`;else if (btn === 'underline') html_rte += `<button tabindex="-1" title="${util.out('Underline')}" class="rte-format" data-command="underline"><span style="font-family:serif;font-size:14px;text-decoration:underline;">U</span></button>`;else if (btn === 'createlink') html_rte += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'align') html_rte += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'formatpara') html_rte += `<button tabindex="-1" title="${util.out('Paragraph')}" class="rte-paragraph"><span style="font-family:serif;font-size:14px;display:inline-block;margin-top:2px;">H</span></button>`;else if (btn === 'color') html_rte += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'formatting') html_rte += `<button tabindex="-1" title="${util.out('Formatting')}" class="rte-formatting"><span style="font-family:serif;font-size:15px;display:inline-block;">A</span></button>`;else if (btn === 'list') html_rte += `<button tabindex="-1" title="${util.out('List')}" class="rte-list"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-list-bullet"></use></svg></button>`;else if (btn === 'textsettings') html_rte += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_rte += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_rte += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'tags') html_rte += customtag_button;else if (btn === 'removeformat') html_rte += `<button tabindex="-1" title="${util.out('Clean')}" class="rte-format" data-command="clean"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>`;else if (btn === 'font') html_rte += `<button tabindex="-1" title="${util.out('Font')}" class="rte-fontfamily"><span style="font-family:serif;font-size:18px;text-transform:none;display:inline-block;margin-top: -3px;">a</span></button>`;else if (btn === 'image') html_rte += `<button tabindex="-1" title="${util.out('Image')}" class="rte-image"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-image"></use></svg></button>`;else if (btn === 'gridtool') html_rte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_rte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_rte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_rte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'undo') html_rte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_rte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_rte += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_rte += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="margin-top:2px;width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'more' && html_rtemore !== '') html_rte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === 'zoom') html_rte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_rte += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
+        if (btn === 'bold') html_rte += `<button tabindex="-1" title="${util.out('Bold')}" class="rte-format" data-command="bold"><span style="font-family:serif;font-size:14px;">B</span></button>`;else if (btn === 'italic') html_rte += `<button tabindex="-1" title="${util.out('Italic')}" class="rte-format" data-command="italic"><span style="font-family:serif;font-size:16px;font-style:italic;">i</span></button>`;else if (btn === 'underline') html_rte += `<button tabindex="-1" title="${util.out('Underline')}" class="rte-format" data-command="underline"><span style="font-family:serif;font-size:14px;text-decoration:underline;">U</span></button>`;else if (btn === 'createlink') html_rte += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'align') html_rte += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'formatpara') html_rte += `<button tabindex="-1" title="${util.out('Paragraph')}" class="rte-paragraph"><span style="font-family:serif;font-size:14px;display:inline-block;margin-top:2px;">H</span></button>`;else if (btn === 'color') html_rte += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'formatting') html_rte += `<button tabindex="-1" title="${util.out('Formatting')}" class="rte-formatting"><span style="font-family:serif;font-size:15px;display:inline-block;">A</span></button>`;else if (btn === 'list') html_rte += `<button tabindex="-1" title="${util.out('List')}" class="rte-list"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-list-bullet"></use></svg></button>`;else if (btn === 'textsettings') html_rte += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_rte += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_rte += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'tags') html_rte += customtag_button;else if (btn === 'removeformat') html_rte += `<button tabindex="-1" title="${util.out('Clean')}" class="rte-format" data-command="clean"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>`;else if (btn === 'font') html_rte += `<button tabindex="-1" title="${util.out('Font')}" class="rte-fontfamily"><span style="font-family:serif;font-size:18px;text-transform:none;display:inline-block;margin-top: -3px;">a</span></button>`;else if (btn === 'image') html_rte += `<button tabindex="-1" title="${util.out('Image')}" class="rte-image"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-image"></use></svg></button>`;else if (btn === 'gridtool') html_rte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_rte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_rte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_rte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'undo') html_rte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_rte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_rte += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_rte += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'more' && html_rtemore !== '') html_rte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === 'pageoptions') html_rte += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;transform:rotate(90deg)"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_rte += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_rte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_rte += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
           html_rte += '<div class="rte-separator"></div>';
         } else {
           html_rte += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
@@ -89934,7 +89951,7 @@ class Rte {
       let html_elementrtemore = '';
       for (j = 0; j < builder.opts.elementButtonsMore.length; j++) {
         btn = builder.opts.elementButtonsMore[j].toLowerCase();
-        if (btn === 'left') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'undo') html_elementrtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_elementrtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_elementrtemore += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_elementrtemore += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="margin-top:2px;width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'zoom') html_elementrtemore += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_elementrtemore += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
+        if (btn === 'left') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrtemore += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'undo') html_elementrtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_elementrtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_elementrtemore += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_elementrtemore += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'pageoptions') html_elementrtemore += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;transform:rotate(90deg)"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_elementrtemore += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_elementrtemore += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_elementrtemore += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
           html_elementrtemore += '<div class="rte-separator"></div>';
         } else {
           html_elementrtemore += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
@@ -89944,7 +89961,7 @@ class Rte {
       let html_elementrte = '';
       for (j = 0; j < builder.opts.elementButtons.length; j++) {
         btn = builder.opts.elementButtons[j].toLowerCase();
-        if (btn === 'left') html_elementrte += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrte += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrte += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrte += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'group') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Group')}" class="rte-group"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-group"></use></svg></button>`;else if (btn === 'ungroup') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Ungroup')}" class="rte-ungroup"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-ungroup"></use></svg></button>`;else if (btn === 'duplicate') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Duplicate')}" class="rte-duplicate"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-duplicate"></use></svg></button>`;else if (btn === 'front') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Bring to Front')}" class="rte-front"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-stack-forward"></use></svg></button>`;else if (btn === 'backward') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Send to Back')}" class="rte-backward"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-stack-backward"></use></svg></button>`;else if (btn === 'moveup') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Move Up')}" class="rte-moveup"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-arrow-up"></use></svg></button>`;else if (btn === 'movedown') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Move Down')}" class="rte-movedown"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-arrow-down"></use></svg></button>`;else if (btn === 'delete') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Delete')}" class="rte-delete"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-trash"></use></svg></button>`;else if (btn === 'blocksettings') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Block Settings')}" class="rte-blocksettings"><svg class="is-icon-flex"><use xlink:href="#icon-settings"></use></svg></button>`;else if (btn === 'undo') html_elementrte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_elementrte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_elementrte += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_elementrte += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="margin-top:2px;width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'more' && html_elementrtemore !== '') html_elementrte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === 'zoom') html_elementrte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_elementrte += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
+        if (btn === 'left') html_elementrte += `<button tabindex="-1" title="${util.out('Align Left')}" data-align="left"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-left"></use></svg></button>`;else if (btn === 'center') html_elementrte += `<button tabindex="-1" title="${util.out('Align Center')}" data-align="center"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-center"></use></svg></button>`;else if (btn === 'right') html_elementrte += `<button tabindex="-1" title="${util.out('Align Right')}" data-align="right"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-right"></use></svg></button>`;else if (btn === 'full') html_elementrte += `<button tabindex="-1" title="${util.out('Align Full')}" data-align="justify"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'gridtool') html_elementrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;width:17px;height:17px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_elementrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_elementrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_elementrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'group') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Group')}" class="rte-group"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-group"></use></svg></button>`;else if (btn === 'ungroup') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Ungroup')}" class="rte-ungroup"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-ungroup"></use></svg></button>`;else if (btn === 'duplicate') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Duplicate')}" class="rte-duplicate"><svg class="is-icon-flex" style="width:20px;height:20px;margin-top:-1px;"><use xlink:href="#icon-duplicate"></use></svg></button>`;else if (btn === 'front') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Bring to Front')}" class="rte-front"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-stack-forward"></use></svg></button>`;else if (btn === 'backward') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Send to Back')}" class="rte-backward"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-stack-backward"></use></svg></button>`;else if (btn === 'moveup') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Move Up')}" class="rte-moveup"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-arrow-up"></use></svg></button>`;else if (btn === 'movedown') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Move Down')}" class="rte-movedown"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-arrow-down"></use></svg></button>`;else if (btn === 'delete') html_elementrte += `<button style="display:none" tabindex="-1" title="${util.out('Delete')}" class="rte-delete"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#icon-trash"></use></svg></button>`;else if (btn === 'blocksettings' && this.builder.canvas) html_elementrte += `<button tabindex="-1" title="${util.out('Block Settings')}" class="rte-blocksettings"><svg class="is-icon-flex"><use xlink:href="#icon-settings"></use></svg></button>`;else if (btn === 'undo') html_elementrte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_elementrte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_elementrte += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_elementrte += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'more' && html_elementrtemore !== '') html_elementrte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === 'pageoptions') html_elementrte += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;transform:rotate(90deg)"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_elementrte += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_elementrte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_elementrte += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
           html_elementrte += '<div class="rte-separator"></div>';
         } else {
           html_elementrte += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
@@ -89964,7 +89981,7 @@ class Rte {
       let html_iconrte = '';
       for (j = 0; j < builder.opts.iconButtonsMore.length; j++) {
         btn = builder.opts.iconButtonsMore[j].toLowerCase();
-        if (btn === 'createlink') html_iconrtemore += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_iconrtemore += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_iconrtemore += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px;"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'align') html_iconrtemore += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'color') html_iconrtemore += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'gridtool') html_iconrtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_iconrtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_iconrtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_iconrtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'textsettings') html_iconrtemore += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_iconrtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_iconrtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_iconrtemore += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_iconrtemore += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="margin-top:2px;width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'zoom') html_iconrtemore += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_iconrtemore += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
+        if (btn === 'createlink') html_iconrtemore += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_iconrtemore += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_iconrtemore += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px;"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'align') html_iconrtemore += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'color') html_iconrtemore += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'gridtool') html_iconrtemore += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_iconrtemore += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_iconrtemore += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_iconrtemore += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'textsettings') html_iconrtemore += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_iconrtemore += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_iconrtemore += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_iconrtemore += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_iconrtemore += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'pageoptions') html_iconrtemore += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;transform:rotate(90deg)"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_iconrtemore += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_iconrtemore += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_iconrtemore += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === '|') {
           html_iconrtemore += '<div class="rte-separator"></div>';
         } else {
           html_iconrtemore += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
@@ -89973,7 +89990,7 @@ class Rte {
 
       for (j = 0; j < builder.opts.iconButtons.length; j++) {
         btn = builder.opts.iconButtons[j].toLowerCase();
-        if (btn === 'createlink') html_iconrte += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_iconrte += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_iconrte += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px;"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'align') html_iconrte += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'color') html_iconrte += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'gridtool') html_iconrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_iconrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_iconrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_iconrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'textsettings') html_iconrte += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_iconrte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_iconrte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_iconrte += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_iconrte += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="margin-top:2px;width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'zoom') html_iconrte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_iconrte += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === 'more' && html_rtemore !== '') html_iconrte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === '|') {
+        if (btn === 'createlink') html_iconrte += `<button tabindex="-1" title="${util.out('Hyperlink')}" class="rte-link"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-link"></use></svg></button>`;else if (btn === 'icon' && !this.builder.opts.emailMode) html_iconrte += `<button tabindex="-1" title="${util.out('Icon')}" class="rte-icon"><svg class="is-icon-flex" style="width:14px;height:14px;margin-top:2px;"><use xlink:href="#ion-android-happy"></use></svg></button>`;else if (btn === 'svg' && !this.builder.opts.emailMode) html_iconrte += `<button tabindex="-1" title="${util.out('SVG')}" class="rte-svg"><svg class="is-icon-flex" style="width:19px;height:19px;margin-top:2px;"><use xlink:href="#icon-svg"></use></svg></button>`;else if (btn === 'align') html_iconrte += `<button tabindex="-1" title="${util.out('Align')}" class="rte-align"><svg class="is-icon-flex" style="width:12px;height:12px;margin-top:-2px;"><use xlink:href="#icon-align-full"></use></svg></button>`;else if (btn === 'color') html_iconrte += `<button tabindex="-1" title="${util.out('Color')}" class="rte-color"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-contrast"></use></svg></button>`;else if (btn === 'gridtool') html_iconrte += `<button tabindex="-1" title="${util.out('Grid Tool')}" class="rte-grideditor"><svg class="is-icon-flex" style="margin-right:-3px;"><use xlink:href="#ion-grid"></use></svg></button>`;else if (btn === 'html') html_iconrte += `<button tabindex="-1" title="${util.out('HTML')}" class="rte-html"><svg class="is-icon-flex" style="margin-right:-3px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:14px;height:14px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></button>`;else if (btn === 'preferences') html_iconrte += `<button tabindex="-1" title="${util.out('Preferences')}" class="rte-preferences"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-wrench"></use></svg></button>`;else if (btn === 'addsnippet') html_iconrte += `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>`;else if (btn === 'textsettings') html_iconrte += `<button tabindex="-1" title="${util.out('Text Settings')}" class="rte-textsettings"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-settings"></use></svg></button>`;else if (btn === 'undo') html_iconrte += `<button tabindex="-1" title="${util.out('Undo')}" class="rte-undo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-undo"></use></svg></button>`;else if (btn === 'redo') html_iconrte += `<button tabindex="-1" title="${util.out('Redo')}" class="rte-redo"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#ion-ios-redo"></use></svg></button>`;else if (btn === 'aiassistant') html_iconrte += `<button tabindex="-1" title="${util.out('AI Assistant')}" class="rte-ai"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-message"></use></svg></button>`;else if (btn === 'snippets') html_iconrte += `<button tabindex="-1" title="${util.out('Snippets')}" class="rte-snippets"><svg class="is-icon-flex" style="width:19px;height:19px;"><use xlink:href="#icon-snippets"></use></svg></button>`;else if (btn === 'pageoptions') html_iconrte += `<button tabindex="-1" title="${util.out('Page Options')}" class="rte-pageoptions"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;transform:rotate(90deg)"><use xlink:href="#icon-pagesize"></use></svg></button>`;else if (btn === 'print') html_iconrte += `<button tabindex="-1" title="${util.out('Print')}" class="rte-print"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-print"></use></svg></button>`;else if (btn === 'zoom') html_iconrte += `<button tabindex="-1" title="${util.out('Zoom')}" class="rte-zoom"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-zoom-in"></use></svg></button>`;else if (btn === 'livepreview') html_iconrte += `<button tabindex="-1" title="${util.out('Live Preview')}" class="rte-livepreview"><svg class="is-icon-flex" style="margin-top:2px;width:15px;height:15px;"><use xlink:href="#icon-device-desktop"></use></svg></button>`;else if (btn === 'more' && html_rtemore !== '') html_iconrte += `<button tabindex="-1" title="${util.out('More')}" class="rte-more"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-more"></use></svg></button>`;else if (btn === '|') {
           html_iconrte += '<div class="rte-separator"></div>';
         } else {
           html_iconrte += `<button tabindex="-1" title="button not found" data-plugin="${btn}"></button>`; //temporary (later will be replaced with plugin button)
@@ -90118,7 +90135,7 @@ class Rte {
                 <div>
                     <div class="is-label">${util.out('Zoom')}</div>
                     <div style="padding-top:4px">
-                        <input type="range" min="50" max="100" value="1" class="rte-zoom-slider is-rangeslider">
+                        <input type="range" min="50" max="${zoomMax}" value="1" class="rte-zoom-slider is-rangeslider">
                     </div>
                 </div>
             </div>
@@ -91067,6 +91084,22 @@ class Rte {
       });
     });
 
+    // Page Options
+    let btnPageOptions = builderStuff.querySelectorAll('button.rte-pageoptions');
+    btnPageOptions.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.builder.openPageOptions();
+      });
+    });
+
+    // Print
+    let btnPrint = builderStuff.querySelectorAll('button.rte-print');
+    btnPrint.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.builder.print();
+      });
+    });
+
     // Zoom Settings
     let zoomButton = builderStuff.querySelectorAll('button.rte-zoom');
     zoomButton.forEach(btn => {
@@ -91183,6 +91216,14 @@ class Rte {
       tools.forEach(tool => {
         tool.style.display = 'none';
       });
+      tools = this.builder.doc.querySelectorAll('.is-canvas-tool');
+      tools.forEach(tool => {
+        tool.style.display = 'none';
+      });
+      tools = this.builder.doc.querySelectorAll('.is-canvasadd-tool');
+      tools.forEach(tool => {
+        tool.style.display = 'none';
+      });
       tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
       tools.forEach(tool => {
         tool.style.opacity = 0;
@@ -91204,6 +91245,14 @@ class Rte {
         tools.forEach(tool => {
           tool.style.display = '';
         });
+        tools = this.builder.doc.querySelectorAll('.is-canvas-tool');
+        tools.forEach(tool => {
+          tool.style.display = '';
+        });
+        tools = this.builder.doc.querySelectorAll('.is-canvasadd-tool');
+        tools.forEach(tool => {
+          tool.style.display = '';
+        });
       }, 350);
     };
     this.rteZoomSlider.value = this.builder.opts.zoom * 100;
@@ -91239,9 +91288,13 @@ class Rte {
     this.rteZoomSlider.onchange = () => {
       setTimeout(() => {
         // setZoomOnControl
-        if (this.builder.opts.page !== '') {
+        if (this.builder.isContentBox) {
           const wrapper = this.builder.doc.querySelector(this.builder.opts.page);
           this.builder.setZoomOnControl(wrapper);
+        } else if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
+          // freeform
+          const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
+          this.builder.setZoomOnControl(docContainer);
         } else {
           const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
           builders.forEach(builder => {
@@ -91292,9 +91345,13 @@ class Rte {
     this.inpZoomSlider.onchange = () => {
       setTimeout(() => {
         // setZoomOnControl
-        if (this.builder.opts.page !== '') {
+        if (this.builder.isContentBox) {
           const wrapper = this.builder.doc.querySelector(this.builder.opts.page);
           this.builder.setZoomOnControl(wrapper);
+        } else if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
+          // freeform
+          const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
+          this.builder.setZoomOnControl(docContainer);
         } else {
           const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
           builders.forEach(builder => {
@@ -91316,6 +91373,14 @@ class Rte {
         tools.forEach(tool => {
           tool.style.display = '';
         });
+        tools = this.builder.doc.querySelectorAll('.is-canvas-tool');
+        tools.forEach(tool => {
+          tool.style.display = '';
+        });
+        tools = this.builder.doc.querySelectorAll('.is-canvasadd-tool');
+        tools.forEach(tool => {
+          tool.style.display = '';
+        });
         if (this.builder.onZoomEnd) {
           let val = this.rteZoomSlider.value;
           let scale = val / 100;
@@ -92376,6 +92441,14 @@ class Rte {
     tools.forEach(tool => {
       tool.style.display = 'none';
     });
+    tools = this.builder.doc.querySelectorAll('.is-canvas-tool');
+    tools.forEach(tool => {
+      tool.style.display = 'none';
+    });
+    tools = this.builder.doc.querySelectorAll('.is-canvasadd-tool');
+    tools.forEach(tool => {
+      tool.style.display = 'none';
+    });
     tools = this.builder.doc.querySelectorAll('.is-rowadd-tool');
     tools.forEach(tool => {
       tool.style.opacity = 0;
@@ -92389,9 +92462,13 @@ class Rte {
   zoomEnd(inp) {
     setTimeout(() => {
       // setZoomOnControl
-      if (this.builder.opts.page !== '') {
+      if (this.builder.isContentBox) {
         const wrapper = this.builder.doc.querySelector(this.builder.opts.page);
         this.builder.setZoomOnControl(wrapper);
+      } else if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
+        // freeform
+        const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
+        this.builder.setZoomOnControl(docContainer);
       } else {
         const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
         builders.forEach(builder => {
@@ -92413,6 +92490,14 @@ class Rte {
       tools.forEach(tool => {
         tool.style.display = '';
       });
+      tools = this.builder.doc.querySelectorAll('.is-canvas-tool');
+      tools.forEach(tool => {
+        tool.style.display = '';
+      });
+      tools = this.builder.doc.querySelectorAll('.is-canvasadd-tool');
+      tools.forEach(tool => {
+        tool.style.display = '';
+      });
       if (this.builder.onZoomEnd) {
         let val = inp.value;
         let scale = val / 100;
@@ -93201,11 +93286,12 @@ class Rte {
     Array.prototype.forEach.call(elms, elm => {
       elm.style.display = 'none';
     });
-    elms = this.elementRteTool.querySelectorAll('.rte-blocksettings');
-    Array.prototype.forEach.call(elms, elm => {
-      elm.style.display = 'none';
-    });
+    // elms = this.elementRteTool.querySelectorAll('.rte-blocksettings'); 
+    // Array.prototype.forEach.call(elms, (elm) => {
+    //     elm.style.display = 'none';
+    // });
   }
+
   showAlignButtons() {
     let separators = this.elementRteTool.querySelectorAll('.rte-separator');
     Array.prototype.forEach.call(separators, separator => {
@@ -96600,7 +96686,7 @@ class Rte {
   addIcon(classname) {
     const dom = this.dom;
     this.util.restoreSelection();
-    if (this.builder.activeIcon) {
+    if (this.builder.activeIcon && this.builder.doc.contains(this.builder.activeIcon)) {
       this.builder.uo.saveForUndo();
 
       /*
@@ -96632,6 +96718,12 @@ class Rte {
       this.builder.uo.saveForUndo();
       this.util.pasteHtmlAtCaret('<i class="' + classname + ' icon-active"></i>', true);
       this.builder.activeIcon = this.builder.doc.querySelector('.icon-active');
+
+      // this.util.pasteHtmlAtCaret('<i class="icon-active"></i>', true); 
+      // const newIcon = this.builder.doc.querySelector('.icon-active');
+      // newIcon.className = classname + ' icon-active';
+      // this.builder.activeIcon = newIcon;
+
       dom.selectElementContents(this.builder.activeIcon);
       this.util.saveSelection();
     }
@@ -97184,7 +97276,39 @@ class SaveImages {
   }
   uploadImages(area) {
     if (!area) return;
+
     //Check all images
+
+    const divs = area.querySelectorAll('.is-overlay-bg,.is-container > div > div,.is-lightbox,.block-click');
+    divs.forEach(div => {
+      let src = '';
+      if (div.style.backgroundImage) {
+        if (div.style.backgroundImage.indexOf('url(') !== -1) {
+          src = div.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
+        }
+      } else if (div.classList.contains('is-lightbox')) {
+        src = div.getAttribute('href');
+      } else if (div.classList.contains('block-click')) {
+        src = div.getAttribute('data-modal-url');
+      }
+      if (src.includes('base64')) {
+        if (this.opts.onBase64Upload) {
+          let ext = 'jpg';
+          if (src.includes('image/png')) {
+            ext = 'png';
+          }
+
+          //Read image (base64 string)
+          let image = src;
+          image = image.replace(/^data:image\/(png|svg\+xml|jpeg);base64,/, '');
+          let filename = this.builder.util.makeId() + '.' + ext; //img.getAttribute('data-filename');
+
+          // console.log(div)
+          this.opts.onBase64Upload(div, image, filename); // target image, base64 string, filename
+        }
+      }
+    });
+
     const images = area.querySelectorAll('img');
     Array.prototype.forEach.call(images, img => {
       let src = img.getAttribute('src');
@@ -105934,16 +106058,30 @@ ${answer}
   }
 
   getContainer() {
-    let container, builderActive, docContainer;
+    let container, builderActive;
     builderActive = this.builder.doc.querySelector('.builder-active');
     if (builderActive) container = builderActive;else {
-      docContainer = this.builder.doc.querySelector(this.builder.docContainer);
-      if (docContainer) {
+      if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
+        // canvas mode
         let activeBlock = this.builder.doc.querySelector('.is-block.cloned');
         if (!activeBlock) activeBlock = this.builder.doc.querySelector('.is-block.active');
-        if (activeBlock) container = activeBlock.querySelector(this.builder.container);
-        if (!container) container = this.builder.doc.querySelector(this.builder.container);
+        if (activeBlock) {
+          container = activeBlock.querySelector(this.builder.container);
+          if (!container) container = this.builder.doc.querySelector(this.builder.container);
+        } else {
+          const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
+          let blockContainer = docContainer.querySelector('.box-select');
+          if (!blockContainer) {
+            blockContainer = docContainer.querySelector(this.builder.blockContainer);
+          }
+          if (blockContainer) {
+            container = blockContainer.querySelector(this.builder.container);
+          } else {
+            container = this.builder.doc.querySelector(this.builder.container);
+          }
+        }
       } else {
+        // standard mode
         container = this.builder.doc.querySelector(this.builder.container);
       }
     }
@@ -105951,56 +106089,92 @@ ${answer}
   }
   renderImage(src) {
     this.builder.saveForUndo();
+    if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
+      const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
+      let blockContainer = docContainer.querySelector('.box-select');
+      if (!blockContainer) {
+        blockContainer = docContainer.querySelector(this.builder.blockContainer);
+      }
+      if (!blockContainer) {
+        this.builder.addPage();
+        blockContainer = docContainer.querySelector(this.builder.blockContainer);
+      }
+      let html = `
+            <div class="is-block" style="top:15%;left:30%;width:760px;height:760px;">
+                <div class="is-block-overlay" style="background-image: url(&quot;${src}&quot;);"></div>
+            </div>
+            `;
+      this.builder.addBlock(html, blockContainer);
+      this.builder.settings.onChange();
+      this.builder.settings.onRender();
+      return;
+    }
     let container = this.getContainer();
     if (!container) {
-      if (this.builder.canvas) {
-        // Canvas Mode
-        const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
-        if (docContainer) {
-          /*
-          <div class="is-block block-steady height-auto" style="top: calc(24.4455% - 37.646px);left: calc(50% - 332px);width: 664px;">
-              <div class="is-container leading-12 size-17">
-                  <div class="row"><div class="column"><img src="${src}"></div></div>
+      /*
+      if(this.builder.canvas) {
+           // Canvas Mode
+          const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
+          if(docContainer) {
+              
+              // <div class="is-block block-steady height-auto" style="top: calc(24.4455% - 37.646px);left: calc(50% - 332px);width: 664px;">
+              //     <div class="is-container leading-12 size-17">
+              //         <div class="row"><div class="column"><img src="${src}"></div></div>
+              //     </div>
+              // </div>
+              let html = `
+              <div class="is-block" style="top:15%;left:30%;width:760px;height:760px;">
+                  <div class="is-block-overlay" style="background-image: url(&quot;${src}&quot;);"></div>
               </div>
-          </div>
-          */
-          let html = `
-                    <div class="is-block" style="top:15%;left:30%;width:760px;height:760px;">
-                        <div class="is-block-overlay" style="background-image: url(&quot;${src}&quot;);"></div>
-                    </div>
-                    `;
-          const blockContainer = docContainer.querySelector(this.builder.blockContainer);
-          this.builder.addBlock(html, blockContainer);
-        }
-      } else {
-        this.util.showMessage(this.util.out('No text container found.'));
-        this.dictation.finish(); // Must be called after finished
-        return;
+              `;
+               const blockContainer = docContainer.querySelector(this.builder.blockContainer);
+              this.builder.addBlock(html, blockContainer);
+          }
+       } else {
+          this.util.showMessage(this.util.out('No text container found.'));
+          this.dictation.finish(); // Must be called after finished
+          return;
       }
+      */
+      this.util.showMessage(this.util.out('No text container found.'));
+      this.dictation.finish(); // Must be called after finished
+      return;
     } else {
-      if (this.builder.canvas) {
-        // Canvas Mode
-        const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
-        if (docContainer) {
+      /*
+      if(this.builder.canvas) {
+           // Canvas Mode
+          const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
+          if(docContainer) {
+              
+              let html = `
+              <div class="is-block" style="top:15%;left:30%;width:760px;height:760px;">
+                  <div class="is-block-overlay" style="background-image: url(&quot;${src}&quot;);"></div>
+              </div>
+              `;
+               const blockContainer = docContainer.querySelector(this.builder.blockContainer);
+              this.builder.addBlock(html, blockContainer);
+          }
+        } else {
+          // Normal
           let html = `
-                    <div class="is-block" style="top:15%;left:30%;width:760px;height:760px;">
-                        <div class="is-block-overlay" style="background-image: url(&quot;${src}&quot;);"></div>
-                    </div>
-                    `;
-          const blockContainer = docContainer.querySelector(this.builder.blockContainer);
-          this.builder.addBlock(html, blockContainer);
-        }
-      } else {
-        // Normal
-        let html = `
-                        <div class="row"><div class="column"><img src="${src}"></div></div>
-                `;
-        container.insertAdjacentHTML('afterBegin', html);
-        setTimeout(() => {
-          container.firstElementChild.click();
-        }, 300);
-        this.builder.applyBehaviorOn(container);
+                  <div class="row"><div class="column"><img src="${src}"></div></div>
+          `;
+          container.insertAdjacentHTML('afterBegin', html);
+          setTimeout(()=>{
+              container.firstElementChild.click();
+          }, 300);
+          this.builder.applyBehaviorOn(container);
       }
+      */
+      // Normal
+      let html = `
+                    <div class="row"><div class="column"><img src="${src}"></div></div>
+            `;
+      container.insertAdjacentHTML('afterBegin', html);
+      setTimeout(() => {
+        container.firstElementChild.click();
+      }, 300);
+      this.builder.applyBehaviorOn(container);
     }
     this.builder.settings.onChange();
     this.builder.settings.onRender();
@@ -106013,50 +106187,87 @@ ${answer}
     if (elm) {
       html = elm.innerHTML;
     }
+    if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer) {
+      const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
+      let blockContainer = docContainer.querySelector('.box-select');
+      if (!blockContainer) {
+        blockContainer = docContainer.querySelector(this.builder.blockContainer);
+      }
+      if (!blockContainer) {
+        this.builder.addPage();
+        blockContainer = docContainer.querySelector(this.builder.blockContainer);
+      }
+      html = `
+            <div class="is-block block-steady height-auto" style="top: calc(24.4455% - 37.646px);left: calc(50% - 332px);width: 664px;">
+                <div class="is-container leading-12 size-17">
+                    ${html}
+                </div>
+            </div>
+            `;
+      this.builder.addBlock(html, blockContainer);
+      this.builder.settings.onChange();
+      this.builder.settings.onRender();
+      return;
+    }
     let container = this.getContainer();
     if (!container) {
-      if (this.builder.canvas) {
-        // Canvas Mode
-        const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
-        if (docContainer) {
-          html = `
-                    <div class="is-block block-steady height-auto" style="top: calc(24.4455% - 37.646px);left: calc(50% - 332px);width: 664px;">
-                        <div class="is-container leading-12 size-17">
-                            ${html}
-                        </div>
-                    </div>
-                    `;
-          const blockContainer = docContainer.querySelector(this.builder.blockContainer);
-          this.builder.addBlock(html, blockContainer);
-        }
-      } else {
-        this.util.showMessage(this.util.out('No text container found.'));
-        this.dictation.finish(); // Must be called after finished
-        return;
+      /*
+      if(this.builder.canvas) {
+           // Canvas Mode
+          const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
+          if(docContainer) {
+              
+              html = `
+              <div class="is-block block-steady height-auto" style="top: calc(24.4455% - 37.646px);left: calc(50% - 332px);width: 664px;">
+                  <div class="is-container leading-12 size-17">
+                      ${html}
+                  </div>
+              </div>
+              `;
+               const blockContainer = docContainer.querySelector(this.builder.blockContainer);
+              this.builder.addBlock(html, blockContainer);
+          }
+       } else {
+          this.util.showMessage(this.util.out('No text container found.'));
+          this.dictation.finish(); // Must be called after finished
+          return;
       }
+      */
+      this.util.showMessage(this.util.out('No text container found.'));
+      this.dictation.finish(); // Must be called after finished
+      return;
     } else {
-      if (this.builder.canvas) {
-        // Canvas Mode
-        const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
-        if (docContainer) {
-          html = `
-                    <div class="is-block block-steady height-auto" style="top: calc(24.4455% - 37.646px);left: calc(50% - 332px);width: 664px;">
-                        <div class="is-container leading-12 size-17">
-                            ${html}
-                        </div>
-                    </div>
-                    `;
-          const blockContainer = docContainer.querySelector(this.builder.blockContainer);
-          this.builder.addBlock(html, blockContainer);
-        }
-      } else {
-        // Normal
-        container.insertAdjacentHTML('afterBegin', html);
-        setTimeout(() => {
-          container.firstElementChild.click();
-        }, 300);
-        this.builder.applyBehaviorOn(container);
+      /*
+      if(this.builder.canvas) {
+           // Canvas Mode
+          const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
+          if(docContainer) {
+              
+              html = `
+              <div class="is-block block-steady height-auto" style="top: calc(24.4455% - 37.646px);left: calc(50% - 332px);width: 664px;">
+                  <div class="is-container leading-12 size-17">
+                      ${html}
+                  </div>
+              </div>
+              `;
+               const blockContainer = docContainer.querySelector(this.builder.blockContainer);
+              this.builder.addBlock(html, blockContainer);
+          }
+        } else {
+          // Normal
+          container.insertAdjacentHTML('afterBegin', html);
+          setTimeout(()=>{
+              container.firstElementChild.click();
+          }, 300);
+          this.builder.applyBehaviorOn(container);
       }
+      */
+      // Normal
+      container.insertAdjacentHTML('afterBegin', html);
+      setTimeout(() => {
+        container.firstElementChild.click();
+      }, 300);
+      this.builder.applyBehaviorOn(container);
     }
     this.builder.settings.onChange();
     this.builder.settings.onRender();
@@ -106973,7 +107184,11 @@ class Common {
     this.matrix3d = new Matrix3D();
     return this.matrix3d.transform2d(block, x1, y1, x2, y2, x3, y3, x4, y4);
   }
+  setZoom(scale) {
+    this.zoom = scale;
+  }
   applyPercentage(block) {
+    const zoom = this.zoom;
     const rect = this.getRect(block);
     const container = block.parentNode;
     let isChildBlock = false;
@@ -106984,11 +107199,11 @@ class Common {
 
     // const containerRect = container.getBoundingClientRect(); // if container has top/left
     const containerRect = this.getRect(container); // if container has top/left
-    const left = (rect.left - containerRect.left) / container.offsetWidth * 100;
-    const top = (rect.top - containerRect.top) / container.offsetHeight * 100;
+    let left = (rect.left - containerRect.left) / container.offsetWidth * 100;
+    let top = (rect.top - containerRect.top) / container.offsetHeight * 100;
     let isBlockFixed = block.classList.contains('block-steady');
     if (isBlockFixed) {
-      let dividerTop = (container.offsetHeight - block.offsetHeight) / (rect.top - containerRect.top);
+      let dividerTop = (container.offsetHeight - block.offsetHeight) / (rect.top - containerRect.top) * zoom;
       if (isNaN(dividerTop)) {
         // there is possibility of 0/0
         dividerTop = 1;
@@ -106997,7 +107212,7 @@ class Common {
       if (isChildBlock) {
         block.style.top = top + '%';
       }
-      let dividerLeft = (container.offsetWidth - block.offsetWidth) / (rect.left - containerRect.left);
+      let dividerLeft = (container.offsetWidth - block.offsetWidth) / (rect.left - containerRect.left) * zoom;
       if (isNaN(dividerLeft)) {
         // there is possibility of 0/0
         dividerLeft = 1;
@@ -107018,16 +107233,17 @@ class Common {
       const height = block.offsetHeight / container.offsetHeight * 100;
       block.style.width = width + '%';
       block.style.height = height + '%';
-      block.style.top = top + '%';
-      block.style.left = left + '%';
+      block.style.top = top / zoom + '%';
+      block.style.left = left / zoom + '%';
       if (block.classList.contains('height-auto')) block.style.height = '';
     }
   }
   applyPixels(block) {
+    const zoom = this.zoom;
     const rect = this.getRect(block);
     const containerRect = this.getRect(block.parentNode); // if container has top/left
-    block.style.left = rect.left - containerRect.left + 'px';
-    block.style.top = rect.top - containerRect.top + 'px';
+    block.style.left = (rect.left - containerRect.left) / zoom + 'px';
+    block.style.top = (rect.top - containerRect.top) / zoom + 'px';
     block.style.width = block.offsetWidth + 'px';
   }
   updateHeight(block) {
@@ -107463,6 +107679,9 @@ class Ruler {
     this.verticalRulerCenter = this.doc.getElementById('vertical-ruler-center');
     this.setup();
   }
+  setZoom(scale) {
+    this.zoom = scale;
+  }
   setup() {
     this.elements = this.doc.querySelectorAll(this.selector);
   }
@@ -107492,6 +107711,8 @@ class Ruler {
     if (transform.includes('rotate') || transform.includes('matrix3d')) return;
     let parentTransform = block.parentNode.style.transform;
     if (parentTransform.includes('rotate')) return;
+    if (this.zoom * 1 !== 1) return; // disable rulers on zoomed page
+
     this.hideRulers();
     const rect = block.getBoundingClientRect();
     const top = rect.top;
@@ -107853,6 +108074,11 @@ class Resizable {
       win: this.win
     });
   }
+  setZoom(scale) {
+    this.zoom = scale;
+    this.common.setZoom(scale);
+    this.ruler.setZoom(scale);
+  }
   setup() {
     this.elements.forEach(element => {
       element.querySelectorAll('.handle').forEach(elm => elm.parentNode.removeChild(elm));
@@ -108022,35 +108248,38 @@ class Resizable {
     this.ruler.hideRulers();
   }
   resizeTopLeft(deltaX, deltaY) {
-    this.target.style.left = this.initialLeft + deltaX + 'px';
-    this.target.style.top = this.initialTop + deltaY + 'px';
+    const zoom = this.zoom;
+    this.target.style.left = this.initialLeft / zoom + deltaX + 'px';
+    this.target.style.top = this.initialTop / zoom + deltaY + 'px';
     this.target.style.width = this.initialWidth - deltaX + 'px';
     this.target.style.height = this.initialHeight - deltaY + 'px';
     if (this.clonedTarget) {
-      this.clonedTarget.style.left = this.initialLeft + deltaX + 'px';
-      this.clonedTarget.style.top = this.initialTop + deltaY + 'px';
+      this.clonedTarget.style.left = this.initialLeft / zoom + deltaX + 'px';
+      this.clonedTarget.style.top = this.initialTop / zoom + deltaY + 'px';
       this.clonedTarget.style.width = this.initialWidth - deltaX + 'px';
       this.clonedTarget.style.height = this.initialHeight - deltaY + 'px';
     }
   }
   resizeTopRight(deltaX, deltaY) {
+    const zoom = this.zoom;
     this.target.style.width = this.initialWidth + deltaX + 'px';
-    this.target.style.top = this.initialTop + deltaY + 'px';
+    this.target.style.top = this.initialTop / zoom + deltaY + 'px';
     this.target.style.height = this.initialHeight - deltaY + 'px';
     if (this.clonedTarget) {
       this.clonedTarget.style.width = this.initialWidth + deltaX + 'px';
-      this.clonedTarget.style.top = this.initialTop + deltaY + 'px';
+      this.clonedTarget.style.top = this.initialTop / zoom + deltaY + 'px';
       this.clonedTarget.style.height = this.initialHeight - deltaY + 'px';
     }
   }
   resizeBottomLeft(deltaX, deltaY) {
+    const zoom = this.zoom;
     this.target.style.width = this.initialWidth - deltaX + 'px';
     this.target.style.height = this.initialHeight + deltaY + 'px';
-    this.target.style.left = this.initialLeft + deltaX + 'px';
+    this.target.style.left = this.initialLeft / zoom + deltaX + 'px';
     if (this.clonedTarget) {
       this.clonedTarget.style.width = this.initialWidth - deltaX + 'px';
       this.clonedTarget.style.height = this.initialHeight + deltaY + 'px';
-      this.clonedTarget.style.left = this.initialLeft + deltaX + 'px';
+      this.clonedTarget.style.left = this.initialLeft / zoom + deltaX + 'px';
     }
   }
   resizeBottomRight(deltaX, deltaY) {
@@ -108062,10 +108291,11 @@ class Resizable {
     }
   }
   resizeTop(deltaY) {
-    this.target.style.top = this.initialTop + deltaY + 'px';
+    const zoom = this.zoom;
+    this.target.style.top = this.initialTop / zoom + deltaY + 'px';
     this.target.style.height = this.initialHeight - deltaY + 'px';
     if (this.clonedTarget) {
-      this.clonedTarget.style.top = this.initialTop + deltaY + 'px';
+      this.clonedTarget.style.top = this.initialTop / zoom + deltaY + 'px';
       this.clonedTarget.style.height = this.initialHeight - deltaY + 'px';
     }
   }
@@ -108076,11 +108306,12 @@ class Resizable {
     }
   }
   resizeLeft(deltaX) {
+    const zoom = this.zoom;
     this.target.style.width = this.initialWidth - deltaX + 'px';
-    this.target.style.left = this.initialLeft + deltaX + 'px';
+    this.target.style.left = this.initialLeft / zoom + deltaX + 'px';
     if (this.clonedTarget) {
       this.clonedTarget.style.width = this.initialWidth - deltaX + 'px';
-      this.clonedTarget.style.left = this.initialLeft + deltaX + 'px';
+      this.clonedTarget.style.left = this.initialLeft / zoom + deltaX + 'px';
     }
   }
   resizeRight(deltaX) {
@@ -108155,20 +108386,36 @@ class Resizable {
 
       const largeScreenBreakpoint = 1920; //1920
 
-      if (breakpoint && breakpoint < largeScreenBreakpoint) {
-        target.setAttribute('data--t-' + breakpoint, target.style.top);
-        target.setAttribute('data--l-' + breakpoint, target.style.left);
-        target.setAttribute('data--b-' + breakpoint, target.style.bottom);
-        target.setAttribute('data--r-' + breakpoint, target.style.right);
-        if (!target.classList.contains('fluid')) target.setAttribute('data--w-' + breakpoint, target.style.width);
-        target.setAttribute('data--h-' + breakpoint, target.style.height);
-      } else {
+      let isPrint = false;
+      let elmBox = target.closest('[data-pagesize]');
+      if (elmBox) {
+        if (elmBox.getAttribute('data-pagesize').includes('web')) ; else {
+          isPrint = true;
+        }
+      }
+      if (isPrint) {
         target.setAttribute('data--t', target.style.top);
         target.setAttribute('data--l', target.style.left);
         target.setAttribute('data--b', target.style.bottom);
         target.setAttribute('data--r', target.style.right);
         target.setAttribute('data--w', target.style.width);
         target.setAttribute('data--h', target.style.height);
+      } else {
+        if (breakpoint && breakpoint < largeScreenBreakpoint) {
+          target.setAttribute('data--t-' + breakpoint, target.style.top);
+          target.setAttribute('data--l-' + breakpoint, target.style.left);
+          target.setAttribute('data--b-' + breakpoint, target.style.bottom);
+          target.setAttribute('data--r-' + breakpoint, target.style.right);
+          if (!target.classList.contains('fluid')) target.setAttribute('data--w-' + breakpoint, target.style.width);
+          target.setAttribute('data--h-' + breakpoint, target.style.height);
+        } else {
+          target.setAttribute('data--t', target.style.top);
+          target.setAttribute('data--l', target.style.left);
+          target.setAttribute('data--b', target.style.bottom);
+          target.setAttribute('data--r', target.style.right);
+          target.setAttribute('data--w', target.style.width);
+          target.setAttribute('data--h', target.style.height);
+        }
       }
       target.removeAttribute('data-prev'); // reset
       target.removeAttribute('data-fluid');
@@ -108211,6 +108458,11 @@ class Draggable {
       win: this.win
     });
   }
+  setZoom(scale) {
+    this.zoom = scale;
+    this.common.setZoom(scale);
+    this.ruler.setZoom(scale);
+  }
   setup() {
     this.elements = this.doc.querySelectorAll(this.selector);
     this.elements.forEach(element => {
@@ -108351,8 +108603,9 @@ class Draggable {
       const startY = target.getAttribute('data-starty');
       const newX = x - startX;
       const newY = y - startY;
-      target.style.left = newX + 'px';
-      target.style.top = newY + 'px';
+      const zoom = this.zoom;
+      target.style.left = newX / zoom + 'px';
+      target.style.top = newY / zoom + 'px';
     }
   }
   handleDragEnd() {
@@ -108402,20 +108655,36 @@ class Draggable {
 
     const largeScreenBreakpoint = 1920; //1920
 
-    if (breakpoint && breakpoint < largeScreenBreakpoint) {
-      target.setAttribute('data--t-' + breakpoint, target.style.top);
-      target.setAttribute('data--l-' + breakpoint, target.style.left);
-      target.setAttribute('data--b-' + breakpoint, target.style.bottom);
-      target.setAttribute('data--r-' + breakpoint, target.style.right);
-      if (!target.classList.contains('fluid')) target.setAttribute('data--w-' + breakpoint, target.style.width);
-      target.setAttribute('data--h-' + breakpoint, target.style.height);
-    } else {
+    let isPrint = false;
+    let elmBox = target.closest('[data-pagesize]');
+    if (elmBox) {
+      if (elmBox.getAttribute('data-pagesize').includes('web')) ; else {
+        isPrint = true;
+      }
+    }
+    if (isPrint) {
       target.setAttribute('data--t', target.style.top);
       target.setAttribute('data--l', target.style.left);
       target.setAttribute('data--b', target.style.bottom);
       target.setAttribute('data--r', target.style.right);
       target.setAttribute('data--w', target.style.width);
       target.setAttribute('data--h', target.style.height);
+    } else {
+      if (breakpoint && breakpoint < largeScreenBreakpoint) {
+        target.setAttribute('data--t-' + breakpoint, target.style.top);
+        target.setAttribute('data--l-' + breakpoint, target.style.left);
+        target.setAttribute('data--b-' + breakpoint, target.style.bottom);
+        target.setAttribute('data--r-' + breakpoint, target.style.right);
+        if (!target.classList.contains('fluid')) target.setAttribute('data--w-' + breakpoint, target.style.width);
+        target.setAttribute('data--h-' + breakpoint, target.style.height);
+      } else {
+        target.setAttribute('data--t', target.style.top);
+        target.setAttribute('data--l', target.style.left);
+        target.setAttribute('data--b', target.style.bottom);
+        target.setAttribute('data--r', target.style.right);
+        target.setAttribute('data--w', target.style.width);
+        target.setAttribute('data--h', target.style.height);
+      }
     }
     target.removeAttribute('data-prev'); // reset
     target.removeAttribute('data-fluid');
@@ -108832,7 +109101,8 @@ class EditableBlocks {
       // onMultipleSelect: () => {},
       disableOnMobile: 0,
       rotate: true,
-      clone: true
+      clone: true,
+      zoom: 1
       // onDelete: () = {}
     };
 
@@ -109097,6 +109367,12 @@ class EditableBlocks {
       win: this.win,
       onDuplicate: this.onDuplicate
     });
+    this.setZoom(this.zoom);
+  }
+  setZoom(scale) {
+    this.common.setZoom(scale);
+    this.draggable.setZoom(scale);
+    this.resizable.setZoom(scale);
   }
   duplicate() {
     this.common.duplicate();
@@ -109192,32 +109468,58 @@ class BlockModal {
       let html = `
             <div class="is-modal is-modal-content editblock" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
                 <div class="is-modal-bar is-draggable">
-                    ${util.out('Block')}
+                    <span class="modal-title"></span>
                     <button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">&#10005;</button>
                 </div>
-                <div class="modal-none" style="dsiplay:none">
-                    <div>${util.out('Please select a block.')}</div>
+                <div class="modal-none" style="display:none;padding-bottom:28px;">
+                
+                    <div>${util.out('Please select a block or page.')}</div>
+
                 </div>
+
+                <div class="modal-page-content" style="display:none;padding-bottom:28px;">
+
+                    <div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
+                    <div style="display:flex;">
+                        <button title="${util.out('Background Color')}" class="input-page-bgcolor is-btn-color" style="margin-right:15px"></button>
+                        <button title="${util.out('Gradient')}" class="btn-page-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
+                    </div>
+
+                    <div style="padding-top:20px;padding-bottom: 3px;">${util.out('Background Image')}:</div>
+                    <div>
+                        <div class="asset-page-preview" style="display:none"></div>
+                        <div style="display: flex">
+                            <button title="${util.out('Image')}" class="btn-page-bgimage">
+                                <svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
+                                <span>${util.out('Image')}</span>
+                            </button>
+                            <button title="${util.out('Select')}" class="btn-page-asset">${this.builder.opts.selectIcon}</button>
+                            <button title="${util.out('Remove')}" class="btn-page-clear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
+                            <button title="${util.out('Adjust')}" class="btn-page-adjust" style="width:40px"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>
+                        </div>
+                    </div>
+
+                </div>
+
                 <div class="modal-content">
 
                     <div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
                     <div style="display:flex;">
                         <button title="${util.out('Background Color')}" class="input-block-bgcolor is-btn-color" style="margin-right:15px"></button>
-                        <button title="${util.out('Gradient')}" class="btn-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
+                        <button title="${util.out('Gradient')}" class="btn-block-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
                     </div>
 
                     <div style="padding-top:20px;padding-bottom: 3px;">${util.out('Background Image')}:</div>
                     <div>
-                        <div class="asset-preview" style="display:none"></div>
+                        <div class="asset-block-preview" style="display:none"></div>
                         <div style="display: flex">
-                            <input class="inp-file" type="file" accept="image/*" style="display:none"/>
-                            <button title="${util.out('Image')}" class="btn-bgimage">
+                            <button title="${util.out('Image')}" class="btn-block-bgimage">
                                 <svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg>
                                 <span>${util.out('Image')}</span>
                             </button>
-                            <button title="${util.out('Select')}" class="btn-asset">${this.builder.opts.selectIcon}</button>
-                            <button title="${util.out('Remove')}" class="btn-clear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
-                            <button title="${util.out('Adjust')}" class="btn-adjust" style="width:40px"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>
+                            <button title="${util.out('Select')}" class="btn-block-asset">${this.builder.opts.selectIcon}</button>
+                            <button title="${util.out('Remove')}" class="btn-block-clear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button>
+                            <button title="${util.out('Adjust')}" class="btn-block-adjust" style="width:40px"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button>
                         </div>
                     </div>
 
@@ -109339,9 +109641,49 @@ class BlockModal {
       this.hide();
     });
 
-    // Background color
+    // Page Background color
+
+    const btnPageGradient = modal.querySelector('.btn-page-gradient');
+    const btnPageColorPick = modal.querySelector('.input-page-bgcolor');
+    btnPageColorPick.addEventListener('click', () => {
+      this.builder.uo.saveForUndo(true); // checkLater = true
+
+      let page = this.getPage();
+      let bgcolor = btnPageColorPick.style.backgroundColor;
+      this.builder.colorPicker.open(s => {
+        page.style.backgroundColor = s;
+        if (page.style.backgroundImage && page.style.backgroundImage.includes('gradient')) {
+          page.style.backgroundImage = ''; // remove gradient
+          btnPageGradient.style.backgroundImage = ''; // preview
+        }
 
-    const btnGradient = modal.querySelector('.btn-gradient');
+        btnPageColorPick.style.backgroundColor = s; // preview
+
+        this.builder.onChange();
+      }, bgcolor, () => {
+        btnPageColorPick.removeAttribute('data-focus');
+        btnPageColorPick.focus();
+      });
+      btnPageColorPick.setAttribute('data-focus', true);
+    });
+    btnPageGradient.addEventListener('click', () => {
+      this.builder.uo.saveForUndo(true); // checkLater = true
+
+      let page = this.getPage();
+      let gradientPicker = this.builder.gradientpicker();
+      gradientPicker.open(page, () => {
+        page.style.backgroundColor = '';
+        btnPageColorPick.style.backgroundColor = ''; // preview
+
+        this.updatePanelImage('');
+        this.builder.onChange();
+        btnPageGradient.style.backgroundImage = page.style.backgroundImage; // preview
+      });
+    });
+
+    // Block Background color
+
+    const btnGradient = modal.querySelector('.btn-block-gradient');
     const btnColorPick = modal.querySelector('.input-block-bgcolor');
     btnColorPick.addEventListener('click', () => {
       this.builder.uo.saveForUndo(true); // checkLater = true
@@ -109379,10 +109721,63 @@ class BlockModal {
       });
     });
 
-    // Background Image
+    // Page Background Image
+
+    this.pageImagePreview = modal.querySelector('.asset-page-preview');
+    const btnPageBgImage = modal.querySelector('.btn-page-bgimage');
+    if (btnPageBgImage) dom.addEventListener(btnPageBgImage, 'click', () => {
+      // Background image
+      const page = this.getPage();
+      let src = '';
+      if (page) if (page.style.backgroundImage) {
+        if (page.style.backgroundImage.indexOf('url(') !== -1) {
+          src = page.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
+        }
+      }
+      this.openImagePicker(src, url => {
+        const page = this.getPage();
+        this.builder.uo.saveForUndo();
+        page.style.backgroundImage = `url("${url}")`;
+        page.style.backgroundSize = 'cover';
+        page.style.backgroundRepeat = 'no-repeat';
+        const div = this.pageImagePreview;
+        const btnPageAdjust = modal.querySelector('.btn-page-adjust');
+        const btnPageClear = modal.querySelector('.btn-page-clear');
+        btnPageAdjust.style.display = 'none';
+        btnPageClear.style.display = 'none';
+        if (url !== '') {
+          div.innerHTML = `<img src="${url}">`;
+          btnPageAdjust.style.display = 'flex';
+          btnPageClear.style.display = 'flex';
+        } else {
+          div.innerHTML = '';
+        }
+        this.builder.onChange();
+      }, btnPageBgImage);
+    });
+    const btnPageOpenAsset = modal.querySelector('.btn-page-asset');
+    btnPageOpenAsset.addEventListener('click', () => {
+      this.builder.openAssetSelect('image', src => {
+        this.updatePageImage(src);
+      }, btnPageOpenAsset);
+    });
 
-    this.imagePreview = modal.querySelector('.asset-preview');
-    const btnBgImage = modal.querySelector('.btn-bgimage');
+    // Show/hide button
+    if (!(this.builder.onImageSelectClick || this.builder.imageSelect)) btnPageOpenAsset.style.display = 'none';
+    const btnPageClear = modal.querySelector('.btn-page-clear');
+    btnPageClear.addEventListener('click', () => {
+      this.updatePageImage('');
+    });
+    const btnPageAdjust = modal.querySelector('.btn-page-adjust');
+    btnPageAdjust.addEventListener('click', () => {
+      let page = this.getPage();
+      this.builder.colTool.openImageAdjust(page, btnPageAdjust);
+    });
+
+    // Block Background Image
+
+    this.imagePreview = modal.querySelector('.asset-block-preview');
+    const btnBgImage = modal.querySelector('.btn-block-bgimage');
     if (btnBgImage) dom.addEventListener(btnBgImage, 'click', () => {
       // Background image
       const blockOverlay = this.blockOverlay();
@@ -109399,8 +109794,8 @@ class BlockModal {
         blockOverlay.style.backgroundSize = 'cover';
         blockOverlay.style.backgroundRepeat = 'no-repeat';
         const div = this.imagePreview;
-        const btnAdjust = modal.querySelector('.btn-adjust');
-        const btnClear = modal.querySelector('.btn-clear');
+        const btnAdjust = modal.querySelector('.btn-block-adjust');
+        const btnClear = modal.querySelector('.btn-block-clear');
         btnAdjust.style.display = 'none';
         btnClear.style.display = 'none';
         if (url !== '') {
@@ -109413,7 +109808,7 @@ class BlockModal {
         this.builder.onChange();
       }, btnBgImage);
     });
-    const btnOpenAsset = modal.querySelector('.btn-asset');
+    const btnOpenAsset = modal.querySelector('.btn-block-asset');
     btnOpenAsset.addEventListener('click', () => {
       this.builder.openAssetSelect('image', src => {
         this.updateImage(src);
@@ -109422,11 +109817,11 @@ class BlockModal {
 
     // Show/hide button
     if (!(this.builder.onImageSelectClick || this.builder.imageSelect)) btnOpenAsset.style.display = 'none';
-    const btnClear = modal.querySelector('.btn-clear');
+    const btnClear = modal.querySelector('.btn-block-clear');
     btnClear.addEventListener('click', () => {
       this.updateImage('');
     });
-    const btnAdjust = modal.querySelector('.btn-adjust');
+    const btnAdjust = modal.querySelector('.btn-block-adjust');
     btnAdjust.addEventListener('click', () => {
       let blockOverlay = this.blockOverlay();
       this.builder.colTool.openImageAdjust(blockOverlay, btnAdjust);
@@ -109629,6 +110024,7 @@ class BlockModal {
           target.classList.add('locked');
           this.builder.eb.draggable.disableDrag(target);
           this.lock(target);
+          this.realtime();
         });
       } else {
         elms.forEach(target => {
@@ -109657,6 +110053,12 @@ class BlockModal {
         }
       });
     }
+  } // constructor
+
+  getPage() {
+    const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
+    const page = docContainer.querySelector('.box-select');
+    return page;
   }
   lock() {
     // target
@@ -109698,66 +110100,82 @@ class BlockModal {
   }
   realtime() {
     const modal = this.modal;
+    const page = this.getPage();
+    const block = this.blockSelected();
+    if (block) {
+      const btnClearBreakpoints = modal.querySelector('.btn-clear-breakpoint');
+      let hasBreakpoints = false;
+      var attributes = block.attributes;
+      for (var i = 0; i < attributes.length; i++) {
+        let item = attributes[i].name;
+        if (item.includes('data--t-') || item.includes('data--b-'   )) {
+          // has breakpoints
+          hasBreakpoints = true;
+        }
+      }
+      if (hasBreakpoints) {
+        btnClearBreakpoints.style.display = '';
+      } else {
+        btnClearBreakpoints.style.display = 'none';
+      }
 
-    // Background image
-    const blockOverlay = this.blockOverlay();
-    let src = '';
-    if (blockOverlay) if (blockOverlay.style.backgroundImage) {
-      if (blockOverlay.style.backgroundImage.indexOf('url(') !== -1) {
-        src = blockOverlay.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
+      // Background image
+      const blockOverlay = this.blockOverlay();
+      let src = '';
+      if (blockOverlay) if (blockOverlay.style.backgroundImage) {
+        if (blockOverlay.style.backgroundImage.indexOf('url(') !== -1) {
+          src = blockOverlay.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
+        }
       }
-    }
 
-    // Update preview
-    this.updatePanelImage(src);
+      // Update preview
+      this.updatePanelImage(src);
 
-    // Show/hide grayscale
-    const divGrayscale = modal.querySelector('.label.grayscale');
-    if (src === '') {
-      this.imagePreview.style.display = 'none';
-      divGrayscale.style.display = 'none';
-    } else {
-      this.imagePreview.style.display = '';
-      divGrayscale.style.display = '';
-    }
+      // Show/hide grayscale
+      const divGrayscale = modal.querySelector('.label.grayscale');
+      if (src === '') {
+        this.imagePreview.style.display = 'none';
+        divGrayscale.style.display = 'none';
+      } else {
+        this.imagePreview.style.display = '';
+        divGrayscale.style.display = '';
+      }
 
-    // Grayscale
-    const chkGrayscale = modal.querySelector('.chk-grayscale');
-    chkGrayscale.checked = false;
-    if (blockOverlay) {
-      if (blockOverlay.style.filter) {
-        if (blockOverlay.style.filter.indexOf('grayscale') !== -1) {
-          chkGrayscale.checked = true;
+      // Grayscale
+      const chkGrayscale = modal.querySelector('.chk-grayscale');
+      chkGrayscale.checked = false;
+      if (blockOverlay) {
+        if (blockOverlay.style.filter) {
+          if (blockOverlay.style.filter.indexOf('grayscale') !== -1) {
+            chkGrayscale.checked = true;
+          }
         }
       }
-    }
 
-    // Background color
-    const btnColorPick = modal.querySelector('.input-block-bgcolor');
-    if (blockOverlay) {
-      let bgcolor = blockOverlay.style.backgroundColor;
-      btnColorPick.style.backgroundColor = bgcolor; //preview
-    } else {
-      btnColorPick.style.backgroundColor = ''; //preview
-    }
+      // Background color
+      const btnColorPick = modal.querySelector('.input-block-bgcolor');
+      if (blockOverlay) {
+        let bgcolor = blockOverlay.style.backgroundColor;
+        btnColorPick.style.backgroundColor = bgcolor; //preview
+      } else {
+        btnColorPick.style.backgroundColor = ''; //preview
+      }
 
-    // Gradient
-    const btnGradient = modal.querySelector('.btn-gradient');
-    if (blockOverlay) {
-      if (blockOverlay.style.backgroundImage && blockOverlay.style.backgroundImage.includes('gradient')) {
-        btnGradient.style.backgroundImage = blockOverlay.style.backgroundImage;
+      // Gradient
+      const btnGradient = modal.querySelector('.btn-block-gradient');
+      if (blockOverlay) {
+        if (blockOverlay.style.backgroundImage && blockOverlay.style.backgroundImage.includes('gradient')) {
+          btnGradient.style.backgroundImage = blockOverlay.style.backgroundImage;
+        } else {
+          btnGradient.style.backgroundImage = '';
+        }
       } else {
         btnGradient.style.backgroundImage = '';
       }
-    } else {
-      btnGradient.style.backgroundImage = '';
-    }
-    const btnClearText = modal.querySelector('.btn-clear-text');
-    btnClearText.style.display = 'none';
-    const divContentColor = modal.querySelector('.div-content-textcolor');
-    divContentColor.style.display = 'none';
-    const block = this.blockSelected();
-    if (block) {
+      const btnClearText = modal.querySelector('.btn-clear-text');
+      btnClearText.style.display = 'none';
+      const divContentColor = modal.querySelector('.div-content-textcolor');
+      divContentColor.style.display = 'none';
       if (block.querySelector('.is-container')) {
         btnClearText.style.display = '';
         divContentColor.style.display = '';
@@ -109875,6 +110293,45 @@ class BlockModal {
         inpHeight.value = '';
         inpHeightUnit.value = '%';
       }
+    } else if (page) {
+      // Background image
+      let src = '';
+      if (page) if (page.style.backgroundImage) {
+        if (page.style.backgroundImage.indexOf('url(') !== -1) {
+          src = page.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
+        }
+      }
+
+      // Update preview
+      this.updatePanelPageImage(src);
+
+      // Show/hide 
+      if (src === '') {
+        this.pageImagePreview.style.display = 'none';
+      } else {
+        this.pageImagePreview.style.display = '';
+      }
+
+      // Background color
+      const btnPageColorPick = modal.querySelector('.input-page-bgcolor');
+      if (page) {
+        let bgcolor = page.style.backgroundColor;
+        btnPageColorPick.style.backgroundColor = bgcolor; //preview
+      } else {
+        btnPageColorPick.style.backgroundColor = ''; //preview
+      }
+
+      // Gradient
+      const btnPageGradient = modal.querySelector('.btn-page-gradient');
+      if (page) {
+        if (page.style.backgroundImage && page.style.backgroundImage.includes('gradient')) {
+          btnPageGradient.style.backgroundImage = page.style.backgroundImage;
+        } else {
+          btnPageGradient.style.backgroundImage = '';
+        }
+      } else {
+        btnPageGradient.style.backgroundImage = '';
+      }
     }
   }
   openImagePicker(currentUrl, callback, btn) {
@@ -109896,6 +110353,43 @@ class BlockModal {
     }, false, this.builder.assetPanelFullScreen);
     if (btn) btn.setAttribute('data-focus', true);
   }
+  updatePageImage(src) {
+    this.builder.uo.saveForUndo();
+    let page = this.getPage();
+    page.style.backgroundImage = 'url(\'' + src + '\')';
+
+    // Reset position & filter (grayscale)
+    page.style.filter = '';
+    page.style.backgroundSize = '';
+    page.style.backgroundPosition = '50% 60%';
+    page.removeAttribute('data-bg-xs');
+    page.removeAttribute('data-bg-sm');
+    page.removeAttribute('data-bg-md');
+    page.removeAttribute('data-bg-lg');
+    this.updatePanelPageImage(src);
+    this.builder.onChange();
+  }
+  updatePanelPageImage(src) {
+    const modal = this.modal;
+    let previewHtml;
+    if (!src) previewHtml = '';else previewHtml = `
+        <img src="${src}">
+        `;
+    this.pageImagePreview.innerHTML = previewHtml;
+
+    // Show/hide image-related controls
+    const btnPageClear = modal.querySelector('.btn-page-clear');
+    const btnPageAdjust = modal.querySelector('.btn-page-adjust');
+    if (src === '') {
+      btnPageClear.style.display = 'none';
+      btnPageAdjust.style.display = 'none';
+    } else {
+      btnPageClear.style.display = '';
+      btnPageAdjust.style.display = '';
+    }
+    const btnPageGradient = modal.querySelector('.btn-page-gradient');
+    btnPageGradient.style.backgroundImage = '';
+  }
   updateImage(src) {
     this.builder.uo.saveForUndo();
     let blockOverlay = this.blockOverlay();
@@ -109921,8 +110415,8 @@ class BlockModal {
     this.imagePreview.innerHTML = previewHtml;
 
     // Show/hide image-related controls
-    const btnClear = modal.querySelector('.btn-clear');
-    const btnAdjust = modal.querySelector('.btn-adjust');
+    const btnClear = modal.querySelector('.btn-block-clear');
+    const btnAdjust = modal.querySelector('.btn-block-adjust');
     if (src === '') {
       btnClear.style.display = 'none';
       btnAdjust.style.display = 'none';
@@ -109930,7 +110424,7 @@ class BlockModal {
       btnClear.style.display = '';
       btnAdjust.style.display = '';
     }
-    const btnGradient = modal.querySelector('.btn-gradient');
+    const btnGradient = modal.querySelector('.btn-block-gradient');
     btnGradient.style.backgroundImage = '';
   }
   show() {
@@ -109950,22 +110444,48 @@ class BlockModal {
     }
     this.util.showModal(modal);
     this.realtime();
-    this.handleBlockClick = e => {
-      const content1 = modal.querySelector('.modal-none');
-      const content2 = modal.querySelector('.modal-content');
-      const activeBlock = this.builder.doc.querySelector('.is-block.active:not(.multi)');
-      if (activeBlock) {
+    this.handleBlockClick = () => {
+      this.showHideControls();
+    };
+    const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
+    docContainer.addEventListener('click', this.handleBlockClick);
+    if (this.builder.iframe) {
+      docContainer.addEventListener('click', this.handleBlockClick);
+    }
+    this.showHideControls();
+  }
+  showHideControls() {
+    const modal = this.modal;
+    const content1 = modal.querySelector('.modal-none');
+    const content2 = modal.querySelector('.modal-content');
+    const content3 = modal.querySelector('.modal-page-content');
+    const activeBlock = this.builder.doc.querySelector('.is-block.active');
+    const page = this.getPage();
+    const modalTitle = modal.querySelector('.modal-title');
+    if (activeBlock) {
+      if (!activeBlock.closest('.multi')) {
         content1.style.display = 'none';
         content2.style.display = '';
-        if (!e.target.classList.contains('.is-block')) this.realtime();
+        content3.style.display = 'none';
+        modalTitle.innerHTML = this.util.out('Block');
+        this.realtime();
       } else {
-        content1.style.display = '';
+        content1.style.display = 'none';
         content2.style.display = 'none';
+        content3.style.display = '';
+        modalTitle.innerHTML = this.util.out('Page');
+        this.realtime();
       }
-    };
-    document.addEventListener('click', this.handleBlockClick);
-    if (this.builder.iframe) {
-      this.builder.doc.addEventListener('click', this.handleBlockClick);
+    } else if (page) {
+      content1.style.display = 'none';
+      content2.style.display = 'none';
+      content3.style.display = '';
+      modalTitle.innerHTML = this.util.out('Page');
+      this.realtime();
+    } else {
+      content1.style.display = '';
+      content2.style.display = 'none';
+      content3.style.display = 'none';
     }
   }
   hide() {
@@ -109978,11 +110498,380 @@ class BlockModal {
   }
 }
 
+class PageSize {
+  constructor(builder) {
+    this.builder = builder;
+    const util = this.builder.util;
+    this.util = util;
+    const builderStuff = this.builder.builderStuff;
+    this.builderStuff = builderStuff;
+    const dom = this.builder.dom;
+    this.dom = dom;
+  }
+  open() {
+    const builderStuff = this.builderStuff;
+    const util = this.util;
+    const dom = this.dom;
+    let modal = builderStuff.querySelector('.is-modal.pagesize');
+    if (!modal) {
+      const html = `
+            <div class="is-modal pagesize" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+                <div class="is-modal-content">
+    
+                    <div class="div-page-sizes">
+                        <button title="Web" data-pagesize="100%,100vh,web" data-width="" data-height="" style="flex:none;width:180px;height:112.5px" class="paper-item">Web (full)</button>
+                        <button title="Web" data-pagesize="800px,1000px,web" data-width="" data-height="" style="flex:none;width:180px;height:112.5px" class="paper-item">Web (container)</button>
+                        <button title="8.27x5.52" data-pagesize="8.27in,5.52in" data-width="8.27in" data-height="5.52in" style="flex:none;width:124.05px;height:82.8px" class="paper-item">8.27x5.52</button>
+                        <button title="8.3x5.8" data-pagesize="8.3in,5.8in" data-width="8.3in" data-height="5.8in" style="flex:none;width:124.50000000000001px;height:87px" class="paper-item">A5</button>
+                        <button title="9x7" data-pagesize="9in,7in" data-width="9in" data-height="7in" style="flex:none;width:135px;height:105px" class="paper-item">9x7</button>
+                        <button title="11.7x8.3" data-pagesize="11.7in,8.3in" data-width="11.7in" data-height="8.3in" style="flex:none;width:175.5px;height:124.50000000000001px" class="paper-item">A4</button>
+                        <button title="11x8.5" data-pagesize="11in,8.5in" data-width="11in" data-height="8.5in" style="flex:none;width:165px;height:127.5px" class="paper-item">Letter</button>
+                        <button title="12.5x10" data-pagesize="12.5in,10in" data-width="12.5in" data-height="10in" style="flex:none;width:187.5px;height:150px" class="paper-item">12.5x10</button>
+                        <button title="14x11" data-pagesize="14in,11in" data-width="14in" data-height="11in" style="flex:none;width:210px;height:165px" class="paper-item">14x11</button>
+                        <button title="8.5x8.5" data-pagesize="8.5in,8.5in" data-width="8.5in" data-height="8.5in" style="flex:none;width:127.5px;height:127.5px" class="paper-item">8.5x8.5</button>
+                        <button title="10x10" data-pagesize="10in,10in" data-width="10in" data-height="10in" style="flex:none;width:150px;height:150px" class="paper-item on">10x10</button>
+                        <button title="12x12" data-pagesize="12in,12in" data-width="12in" data-height="12in" style="flex:none;width:180px;height:180px" class="paper-item">12x12</button>
+                        <button title="5.27x8.27" data-pagesize="5.27in,8.27in" data-width="5.27in" data-height="8.27in" style="flex:none;width:79.05px;height:124.05px" class="paper-item">5.27x8.27</button>
+                        <button title="5.8x8.3" data-pagesize="5.8in,8.3in" data-width="5.8in" data-height="8.3in" style="flex:none;width:87px;height:124.50000000000001px" class="paper-item">A5</button>
+                        <button title="6x9" data-pagesize="6in,9in" data-width="6in" data-height="9in" style="flex:none;width:90px;height:135px" class="paper-item">6x9</button>
+                        <button title="6.6x10.25" data-pagesize="6.6in,10.25in" data-width="6.6in" data-height="10.25in" style="flex:none;width:99px;height:153.75px" class="paper-item">6.6x10.25</button>
+                        <button title="8.5x11" data-pagesize="8.5in,11in" data-width="8.5in" data-height="11in" style="flex:none;width:127.5px;height:165px" class="paper-item">Letter</button>
+                        <button title="8.3x11.7" data-pagesize="8.3in,11.7in" data-width="8.3in" data-height="11.7in" style="flex:none;width:124.50000000000001px;height:175.5px" class="paper-item">A4</button>
+                    </div>
+    
+                    <div class="flex" style="gap:10px;justify-content:center;margin-top:15px;">
+                        <div>
+                            <label for="inpPageWidth" style="display:block">${util.out('Width')}:</label>
+                            <input id="inpPageWidth" class="input-width" type="text">
+                        </div>
+                        <div>
+                            <label for="inpPageWidth" style="display:block">${util.out('Height')}:</label>
+                            <input id="inpPageHeight" class="input-height" type="text">
+                        </div>
+                    </div>
+    
+                    <div style="text-align:right;margin-top:20px;display:none">
+                        <button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
+                        <button title="${util.out('Ok')}" class="input-ok classic-primary">${util.out('Ok')}</button>
+                    </div>
+    
+                </div>
+            </div>
+            <div class="is-modal viewprint" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+                <div class="is-modal-content" style="width:100%;height:100vh;padding:0;">
+                    <iframe tabindex="0" style="width:100vw;height:100vh;border: none;display: block;" src="about:blank"></iframe>
+                </div>
+            </div>
+            `;
+      dom.appendHtml(builderStuff, html);
+      modal = builderStuff.querySelector('.pagesize');
+      this.modal = modal;
+      const inpWidth = modal.querySelector('.input-width');
+      const inpHeight = modal.querySelector('.input-height');
+      const current = localStorage.getItem('_pagesize');
+      if (current) {
+        const arrCurrent = current.split(',');
+        inpWidth.value = arrCurrent[0].trim();
+        inpHeight.value = arrCurrent[1].trim();
+      }
+      const btnPageSize = modal.querySelectorAll('[data-pagesize]');
+      btnPageSize.forEach(btn => {
+        btn.addEventListener('click', () => {
+          const elmCss = document.querySelector('#__css_pagesize');
+          if (elmCss) elmCss.remove();
+          const s = btn.getAttribute('data-pagesize');
+          this.setPageSize(s);
+          inpWidth.value = '';
+          inpHeight.value = '';
+          const arr = s.split(',');
+          inpWidth.value = arr[0].trim();
+          inpHeight.value = arr[1].trim();
+        });
+      });
+      let timer;
+      inpWidth.addEventListener('input', () => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+          const current = localStorage.getItem('_pagesize');
+          let isWeb = false;
+          const arrCurrent = current.split(',');
+          if (arrCurrent.length === 3) isWeb = true;
+          let s = inpWidth.value + ',' + inpHeight.value + (isWeb ? ',web' : '');
+          this.setPageSize(s);
+        }, 600);
+      });
+      inpHeight.addEventListener('input', () => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+          const current = localStorage.getItem('_pagesize');
+          let isWeb = false;
+          const arrCurrent = current.split(',');
+          if (arrCurrent.length === 3) isWeb = true;
+          let s = inpWidth.value + ',' + inpHeight.value + (isWeb ? ',web' : '');
+          this.setPageSize(s);
+        }, 600);
+      });
+      const btnImageOk = modal.querySelector('.input-ok');
+      dom.addEventListener(btnImageOk, 'click', () => {
+        // const inpSrc = modal.querySelector('.input-src');
+        // const url = inpSrc.value;
+
+        this.builder.hideModal(modal);
+      });
+      const btnImageCancel = modal.querySelector('.input-cancel');
+      dom.addEventListener(btnImageCancel, 'click', () => {
+        this.builder.hideModal(modal);
+      });
+    }
+    this.util.showModal(modal, false);
+  }
+  setPageSize(s) {
+    if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer && !this.builder.iframe) {
+      localStorage.setItem('_pagesize', s);
+      const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
+      const elms = docContainer.querySelectorAll('.is-box');
+      elms.forEach(elm => {
+        elm.setAttribute('data-pagesize', s);
+      });
+      const elmCss = document.querySelector('#__css_pagesize');
+      if (elmCss) elmCss.remove();
+      let css = this.getPageCss();
+      document.head.insertAdjacentHTML('beforeend', css);
+
+      // for the tools position
+      const arr = s.split(',');
+      // let w = arr[0].trim();
+      // let h = arr[1].trim();
+      if (arr.length === 3) {
+        // web
+        const docWidth = docContainer.offsetWidth;
+        const viewportWidth = this.builder.win.innerWidth;
+        if (docWidth < viewportWidth - 50) {
+          // web (container)
+          docContainer.classList.remove('page-web');
+          docContainer.classList.add('page-web-container');
+        } else {
+          // web (full)
+          docContainer.classList.remove('page-web-container');
+          docContainer.classList.add('page-web');
+        }
+      } else {
+        // print
+        docContainer.classList.remove('page-web');
+        docContainer.classList.remove('page-web-container');
+      }
+    } else {
+      alert('This function works in Canvas mode only.');
+    }
+  }
+  print() {
+    const builderStuff = this.builderStuff;
+    const dom = this.dom;
+    let modalIframe = builderStuff.querySelector('.viewprint');
+    if (!modalIframe) {
+      let html = `
+            <div class="viewprint" style="display:none">
+                <iframe tabindex="0" style="width:2000px;height:2000px;border: none;display: block;" src="about:blank"></iframe>
+            </div>`;
+      dom.appendHtml(builderStuff, html);
+      modalIframe = builderStuff.querySelector('.viewprint');
+    }
+    if (this.builder.canvas && !this.builder.isContentBox && this.builder.docContainer && !this.builder.iframe) {
+      const ifr = modalIframe.querySelector('iframe');
+      ifr.srcdoc = this.getPrintHtml();
+    } else {
+      alert('This function works in Canvas mode only.');
+    }
+  }
+  getPrintHtml() {
+    let css = this.getPrintCss();
+    let html = this.builder.html();
+    return `
+        <!DOCTYPE HTML>
+        <html>
+        <head>
+            <meta charset="utf-8">
+            <title></title>
+            <meta name="viewport" content="width=device-width, initial-scale=1">
+            <meta name="description" content="">
+
+            <link href="${this.builder.snippetPath}print.css" rel="stylesheet">
+            
+            <style>
+
+            /* block.css */
+            /* box-canvas */
+            .is-box {
+                position: relative;
+                flex:none;
+            }
+            .is-block {
+                position: absolute;
+                box-sizing: border-box;
+                padding: 0;
+            }
+            .is-block .is-container {
+                max-width: unset !important;
+                width: 100%;
+                padding: 0;
+                box-sizing: border-box;
+                position: relative;
+                z-index: 1;
+            }
+            .is-box.autolayout .is-block.block-steady.fluid {
+                padding: 0;
+                width: 100% !important;
+                min-width: unset !important;
+                left: auto !important
+            }
+            .is-block-overlay { background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; user-select: none; }
+            
+            
+            body {
+                background: #eee;
+            }
+            .is-page {
+                position: relative;
+                transform-origin: top;
+            }
+            .is-box {
+                position: relative;
+                flex:none;
+                background: #fff;
+                overflow: hidden;
+                box-shadow: none;
+            }
+            ${css}
+            </style>
+        </head>
+        <body class="print">
+
+            <div class="is-page">${html}</div>
+
+            <script>
+                window.print();
+            </script>
+        </body>
+        </html>
+        `;
+  }
+  getPageCss() {
+    let s;
+    if (localStorage.getItem('_pagesize') === '' || localStorage.getItem('_pagesize')) {
+      s = localStorage.getItem('_pagesize');
+    } else {
+      s = this.pageSize || '';
+    }
+    let w, h;
+    let css;
+    if (s) {
+      const arr = s.split(',');
+      w = arr[0].trim();
+      h = arr[1].trim();
+      if (arr.length === 3) {
+        // web
+        css = `
+                <style id="__css_pagesize">
+                .is-page {
+                    ${(w === '100%' || w === '100vw') && (h === '100%' || h === '100vh') ? '' : 'margin-top: 150px;'}
+                }
+                .is-box {
+                    width: 100%;
+                    max-width: ${w};
+                    height: ${h};
+                    margin: 0 auto;
+                }
+                </style>
+                `;
+      } else {
+        // print
+        css = `
+                <style id="__css_pagesize">
+                .is-page {
+                    margin-top:150px;
+                    gap: 45px;
+                }
+                .is-box {
+                    width: ${w};
+                    height: ${h};
+                }
+                </style>
+                `;
+      }
+    }
+    return css;
+  }
+  getPrintCss() {
+    let s;
+    if (localStorage.getItem('_pagesize') === '' || localStorage.getItem('_pagesize')) {
+      s = localStorage.getItem('_pagesize');
+    } else {
+      s = this.pageSize || '';
+    }
+    let w, h;
+    let css;
+    if (s) {
+      const arr = s.split(',');
+      w = arr[0].trim();
+      h = arr[1].trim();
+      if (arr.length === 3) {
+        // web
+        const docContainer = this.builder.doc.querySelector(this.builder.docContainer);
+        const box = docContainer.querySelector('.is-box');
+        if (!box) return '';
+        const docWidth = box.offsetWidth + 'px';
+        const docHeight = box.offsetHeight + 'px';
+        css = `
+                <style id="__css_pagesize">
+                .is-box {
+                    width: 100%;
+                    max-width: ${docWidth};
+                    height: ${docHeight};
+                    margin: 0 auto;
+                }
+                @media print { 
+                    .is-box {
+                        width: ${docWidth};
+                        height: ${docHeight};
+                    } 
+                }
+                @page {
+                    size:${docWidth} ${docHeight};; 
+                    margin: 0; 
+                }
+                </style>
+                `;
+      } else {
+        // print
+        css = `
+                <style id="__css_pagesize">
+                .is-box {
+                    width: ${w};
+                    height: ${h};
+                }
+                @media print { 
+                    .is-box {
+                        width: ${w}; 
+                        height: ${h};
+                    } 
+                }
+                @page {
+                    size:${w} ${h};
+                    margin: 0; 
+                }
+                </style>
+                `;
+      }
+    }
+    return css;
+  }
+}
+
 class ContentBuilder {
   constructor(opts = {}) {
     let defaults = {
       page: '',
-      container: '.container',
+      container: '.is-container',
       row: '',
       cols: [],
       colequal: [],
@@ -110224,6 +111113,8 @@ class ContentBuilder {
       onUndo: function () {},
       onRedo: function () {},
       onBlockCanvasAdd: function () {},
+      // docContainer: '.is-page',
+      blockContainer: '.is-box',
       /*
       Deprecated:
       snippetSampleImage: '',
@@ -111022,6 +111913,34 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     }
     this.settings = this.opts; // Backward compatible
 
+    // freeform
+    if (this.canvas && !this.isContentBox) {
+      /*
+      blockContainer: '.is-box',
+      imageResizeOnBlock: false,
+      toolbarDisplay: 'always',
+      buttons: ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'aiassistant', 'snippets', 'zoom', 'pageoptions', 'print', 'html', 'more'],  
+      buttonsMore: ['icon', 'image', '|', 'list', 'font', 'formatPara'], 
+      elementButtons: ['front', 'backward', 'moveup', 'movedown',  'group', 'ungroup', 'duplicate', 'delete','left', 'center', 'right', 'full' , 'undo', 'redo', 'aiassistant', 'snippets', 'blocksettings', 'zoom', 'pageoptions', 'print', 'html'],  
+      elementButtonsMore: [], 
+      iconButtons: ['icon', 'color','textsettings', 'createLink','|', 'undo', 'redo', 'aiassistant', 'snippets', 'zoom', 'pageoptions', 'print', 'html'],  
+      iconButtonsMore: [], 
+      */
+      this.blockContainer = '.is-box';
+      this.imageResizeOnBlock = false;
+      this.toolbarDisplay = 'always';
+      this.buttons = ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'aiassistant', 'snippets', 'zoom', 'pageoptions', 'print', 'html', 'more'];
+      this.buttonsMore = ['icon', 'image', '|', 'list', 'font', 'formatPara'];
+      this.elementButtons = ['front', 'backward', 'moveup', 'movedown', 'group', 'ungroup', 'duplicate', 'delete', 'left', 'center', 'right', 'full', 'undo', 'redo', 'aiassistant', 'snippets', 'blocksettings', 'zoom', 'pageoptions', 'print', 'html'];
+      this.elementButtonsMore = [];
+      this.iconButtons = ['icon', 'color', 'textsettings', 'createLink', '|', 'undo', 'redo', 'aiassistant', 'snippets', 'zoom', 'pageoptions', 'print', 'html'];
+      this.iconButtonsMore = [];
+      if (!this.docContainer && this.container !== '.is-container') {
+        this.docContainer = this.container;
+        this.container = '.is-container';
+        this.opts.container = '.is-container';
+      }
+    }
     if (this.opts.imageSelect !== '') {
       this.opts.imageselect = this.opts.imageSelect;
     } else if (this.opts.imageselect !== '') {
@@ -111160,6 +112079,10 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     this.win = win;
     this.doc = doc;
     this.doc.body.classList.add('data-editor');
+    if (this.canvas && !this.isContentBox && this.docContainer && !this.iframe) {
+      const docContainer = document.querySelector(this.docContainer);
+      docContainer.classList.add('is-page');
+    }
 
     // Disable on mobile
     const viewportWidth = this.doc.body.clientWidth;
@@ -111407,6 +112330,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
 
     // freeform
     if (this.canvas && !this.isContentBox) this.blockmodal = new BlockModal(this);
+    if (this.canvas) this.pageoption = new PageSize(this);
 
     // freeform
     if (this.canvas) this.eb = new EditableBlocks({
@@ -111417,6 +112341,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       parentSelector: '.box-canvas',
       rotate: true,
       // disableOnMobile: 760,
+      zoom: this.opts.zoom,
       onBeforeChange: () => {
         this.uo.saveForUndo();
       },
@@ -111424,15 +112349,15 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
         this.opts.onChange();
       },
       onEditStart: (event, block) => {
+        let activeBlock = this.doc.querySelector('.is-block.cloned');
+        if (!activeBlock) return;
+        const container = activeBlock.querySelector('.is-container');
+        if (!container) return;
         block.classList.add('editable');
 
         // get element to activate
         let x = event.clientX;
         let y = event.clientY;
-        let activeBlock = this.doc.querySelector('.is-block.cloned');
-        if (!activeBlock) return;
-        const container = activeBlock.querySelector('.is-container');
-        if (!container) return;
         const cols = this.getAllColumns(container);
         let clickedElm;
         let clickedCol;
@@ -111545,10 +112470,11 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
         Array.prototype.forEach.call(elms, elm => {
           elm.style.display = '';
         });
-        elms = this.rte.elementRteTool.querySelectorAll('.rte-blocksettings');
-        Array.prototype.forEach.call(elms, elm => {
-          elm.style.display = '';
-        });
+        // elms = this.rte.elementRteTool.querySelectorAll('.rte-blocksettings'); 
+        // Array.prototype.forEach.call(elms, (elm) => {
+        //     elm.style.display = '';
+        // });
+
         const viewportWidth = this.doc.body.clientWidth;
         if (viewportWidth <= 768) {
           elms = this.rte.elementRteTool.querySelectorAll('.rte-moveup');
@@ -111608,6 +112534,74 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
         if (this.onUnselectBlock) this.onUnselectBlock();
       }
     });
+
+    // SHIFT + Right Clidk to Zoom In
+    if (this.canvas && !this.isContentBox && this.docContainer && !this.iframe) {
+      //--- see loadHtml ---
+      const docContainer = document.querySelector(this.docContainer);
+
+      // set page size 
+      let s;
+      const elm = docContainer.querySelector('[data-pagesize]');
+      if (elm) {
+        s = elm.getAttribute('data-pagesize');
+      } else {
+        if (localStorage.getItem('_pagesize') === '' || localStorage.getItem('_pagesize')) {
+          s = localStorage.getItem('_pagesize');
+        } else {
+          s = this.pageSize || '';
+        }
+      }
+      this.setPageSize(s);
+      this.applyBehaviorCanvas();
+      const builders = docContainer.querySelectorAll(this.container);
+      builders.forEach(builder => {
+        this.applyBehaviorOn(builder);
+      });
+      this.refresh();
+      if (this.win.Block) {
+        this.win.Block.render();
+      }
+      docContainer.style.opacity = '';
+      //--- /see loadHtml ---
+
+      // docContainer.style.transform = '';
+      // this.opts.zoom = 1;
+      // this.eb.setZoom(1);
+
+      document.addEventListener('contextmenu', this.toggleEnlargePage = e => {
+        if (e.shiftKey && e.button === 2) {
+          e.preventDefault();
+          if (docContainer.style.transform.includes('scale(1)')) {
+            docContainer.style.transform = '';
+          }
+          if (docContainer.classList.contains('expand')) {
+            // back (zoom-out)
+            docContainer.classList.remove('expand');
+            docContainer.style.transform = '';
+            this.opts.zoom = 1;
+            localStorage.setItem('_zoom', 1);
+            this.eb.setZoom(1);
+            this.setZoomOnControl(docContainer);
+          } else {
+            // expand (zoom-in)
+            docContainer.classList.add('expand');
+            const viewportWidth = document.body.clientWidth;
+            const targetWidth = viewportWidth * 0.8;
+            const box = docContainer.querySelector(this.blockContainer);
+            if (box) {
+              let scale = targetWidth / box.offsetWidth;
+              if (scale > 1.4) scale = 1.4;
+              docContainer.style.transform = `scale(${scale})`;
+              this.opts.zoom = scale;
+              localStorage.setItem('_zoom', scale);
+              this.eb.setZoom(scale);
+              this.setZoomOnControl(docContainer);
+            }
+          }
+        }
+      });
+    }
     let previousWidth = this.win.innerWidth;
     let timer;
     const debounce = (func, delay) => {
@@ -111674,7 +112668,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
 
           // console.log('resize');
           setTimeout(() => {
-            if (this.blockmodal) this.blockmodal.realtime(); // freeform
+            // if(this.blockmodal) this.blockmodal.realtime(); // freeform
             if (this.onPageResizeDebounce) this.onPageResizeDebounce();
           }, 300); // give time for block transition
         }, 200);
@@ -111691,7 +112685,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
         const debouncedResizeHandler = debounce(() => {
           // console.log('resize');
           setTimeout(() => {
-            if (this.blockmodal) this.blockmodal.realtime();
+            // if(this.blockmodal) this.blockmodal.realtime();
             if (this.onPageResizeDebounce) this.onPageResizeDebounce();
           }, 300); // give time for block transition
         }, 200);
@@ -111988,6 +112982,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
         .is-block.active.editable {
             outline: none;
             cursor: auto;
+            z-index: 10;
         }
         .is-block.active.multi {
             outline: var(--is-outline);
@@ -112397,9 +113392,27 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       rowaddtool.style.transform = `scale(${1 / this.opts.zoom})`;
       // rowtool.style.transformOrigin = 'top';
     });
-  }
 
+    // freeform
+    let tools = area.querySelectorAll('.is-canvas-tool');
+    tools.forEach(tool => {
+      tool.style.transform = `scale(${1 / this.opts.zoom})`;
+      tool.style.transformOrigin = 'top';
+    });
+    tools = area.querySelectorAll('.is-canvasadd-tool');
+    tools.forEach(tool => {
+      tool.style.transform = `scale(${1 / this.opts.zoom})`;
+      tool.style.transformOrigin = 'top';
+    });
+  }
   setZoomOnArea() {
+    if (this.canvas && !this.isContentBox && this.docContainer) {
+      // freeform
+      const docContainer = this.doc.querySelector(this.docContainer);
+      docContainer.style.transform = `scale(${this.opts.zoom})`;
+      if (this.eb) this.eb.setZoom(this.opts.zoom);
+      return;
+    }
     if (this.opts.page !== '') {
       const wrapper = this.doc.querySelector(this.opts.page);
       wrapper.style.transform = `scale(${this.opts.zoom})`;
@@ -112924,9 +113937,11 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       lang: this.opts.lang
     });
   }
-  simpleColorPicker(onPick, mode) {
-    return this.colorClassPicker.open(onPick, mode);
-  }
+
+  // simpleColorPicker(onPick,mode) {
+  //     return this.colorClassPicker.open(onPick,mode);
+  // }
+
   openAIAssistant() {
     this.dictation.openDictation();
   }
@@ -113081,6 +114096,124 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     if (!this.eb) return;
     this.eb.quitEditable(target);
   }
+  addPage(box) {
+    this.uo.saveForUndo();
+    let s;
+    if (localStorage.getItem('_pagesize') === '' || localStorage.getItem('_pagesize')) {
+      s = localStorage.getItem('_pagesize');
+    } else {
+      s = this.pageSize || '';
+    }
+    const html = `
+        <div class="is-box box-canvas autolayout new-canvas" data-pagesize="${s}">
+        `;
+    const docContainer = this.doc.querySelector(this.docContainer);
+    if (box) {
+      box.insertAdjacentHTML('afterend', html);
+    } else {
+      docContainer.insertAdjacentHTML('beforeend', html);
+    }
+    const newBox = docContainer.querySelector('.new-canvas');
+    newBox.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center'
+    });
+    newBox.classList.remove('new-canvas');
+    this.applyBehaviorCanvas();
+    this.opts.onChange();
+  }
+  setPageSize(s) {
+    this.pageoption.setPageSize(s);
+  }
+  applyBehaviorCanvas() {
+    if (this.canvas && !this.isContentBox && this.docContainer && !this.iframe) {
+      let htmlTool = `
+            <div class="is-tool is-canvas-tool" style="transform: scale(1); transform-origin: center top;">
+                <button type="button" tabindex="-1" class="box-up" title="${this.util.out('Move Up')}"><svg class="is-icon-flex"><use xlink:href="#icon-arrow-up"></use></svg></button>
+                <button type="button" tabindex="-1" class="box-down" title="${this.util.out('Move Down')}"><svg class="is-icon-flex"><use xlink:href="#icon-arrow-down"></use></svg></button>
+                <!--
+                <button type="button" tabindex="-1" class="box-settings" title="${this.util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
+                -->
+                <button type="button" tabindex="-1" class="box-remove" title="${this.util.out('Remove')}"><svg class="is-icon-flex"><use xlink:href="#icon-trash"></use></svg></button>
+            </div>
+            <div class="is-tool is-canvasadd-tool" style="transform: scale(1); transform-origin: center top;">
+                <button type="button" tabindex="-1" class="box-add" title="${this.util.out('Add')}"><svg class="is-icon-flex"><use xlink:href="#icon-plus2"></use></svg></button>
+            </div>
+            `;
+      const docContainer = this.doc.querySelector(this.docContainer);
+      const boxes = this.dom.elementChildren(docContainer);
+      boxes.forEach(box => {
+        let tool1 = box.querySelector('.is-canvas-tool');
+        let tool2 = box.querySelector('.is-canvasadd-tool');
+        if (tool1) tool1.remove();
+        if (tool2) tool2.remove();
+        if (!box.querySelector('.is-canvas-tool')) {
+          box.addEventListener('click', () => {
+            boxes.forEach(elm => elm.classList.remove('box-select'));
+            box.classList.add('box-select');
+
+            // onSelectPage (see onSelectBlock)
+
+            let elms = this.rte.elementRteTool.querySelectorAll('.rte-blocksettings');
+            Array.prototype.forEach.call(elms, elm => {
+              elm.style.display = '';
+            });
+          });
+          box.insertAdjacentHTML('afterbegin', htmlTool);
+          const btnUp = box.querySelector('.is-canvas-tool .box-up');
+          btnUp.addEventListener('click', e => {
+            const box = e.target.closest('.is-box');
+            this.uo.saveForUndo();
+            let boxPrev = box.previousElementSibling;
+            if (boxPrev) box.parentNode.insertBefore(box, boxPrev);
+            box.scrollIntoView({
+              behavior: 'smooth',
+              block: 'center'
+            });
+            this.opts.onChange();
+          });
+          const btnDown = box.querySelector('.is-canvas-tool .box-down');
+          btnDown.addEventListener('click', e => {
+            const box = e.target.closest('.is-box');
+            this.uo.saveForUndo();
+            let boxNext = box.nextElementSibling;
+            if (boxNext) box.parentNode.insertBefore(boxNext, box);
+            box.scrollIntoView({
+              behavior: 'smooth',
+              block: 'center'
+            });
+            this.opts.onChange();
+          });
+          const btnRemove = box.querySelector('.is-canvas-tool .box-remove');
+          btnRemove.addEventListener('click', e => {
+            const box = e.target.closest('.is-box');
+            this.uo.saveForUndo();
+            box.remove();
+            this.blockmodal.showHideControls();
+            if (!docContainer.querySelector('.is-box')) this.addPage();
+            this.opts.onChange();
+          });
+          const btnAdd = box.querySelector('.is-canvasadd-tool .box-add');
+          btnAdd.addEventListener('click', e => {
+            const box = e.target.closest('.is-box');
+            this.addPage(box);
+          });
+        }
+      });
+      if (localStorage.getItem('_zoom') !== null) {
+        this.opts.zoom = localStorage.getItem('_zoom'); // Get from saved localStorage
+      }
+
+      this.eb.setZoom(this.opts.zoom);
+      this.setZoomOnControl(docContainer);
+    }
+  }
+  openPageOptions() {
+    this.pageoption.open();
+  }
+  print() {
+    this.pageoption.print();
+  }
   destroy() {
     if (this.eb) this.eb.destroy();
     this.doc.body.classList.remove('data-editor');
@@ -113121,6 +114254,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       builder.appendChild(range.createContextualFragment(html)); // Use createContextualFragment so that embedded javascript code (code block) will be executed
     });
 
+    if (this.canvas && !this.isContentBox) {
+      let html = this.html();
+      let range = this.doc.createRange();
+      const docContainer = this.doc.querySelector(this.docContainer);
+      docContainer.innerHTML = '';
+      docContainer.appendChild(range.createContextualFragment(html));
+    }
     Array.prototype.forEach.call(builders, builder => {
       builder.removeAttribute('data-sort');
       this.dom.removeClass(builder, 'is-builder');
@@ -113238,13 +114378,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     if (this.targetAssetType === 'all') {
       ok = true;
     } else if (this.targetAssetType === 'media') {
-      if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp' || extension === 'mp4') {
+      if (s.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp' || extension === 'mp4') {
         ok = true;
       } else {
         alert(this.util.out('Please select an image or video file.'));
       }
     } else if (this.targetAssetType === 'image') {
-      if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
+      if (s.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
         ok = true;
       } else {
         alert(this.util.out('Please select an image file.'));
@@ -113306,7 +114446,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
         let extension = filename.split('.').pop();
         extension = extension.toLowerCase();
         let ok = false;
-        if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
+        if (s.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
           ok = true;
         } else {
           alert(out('Please select an image file.'));
@@ -113335,13 +114475,13 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
         let ext = filename.split('.').pop();
         ext = ext.toLowerCase();
         let ok = false;
-        if (targetAssetType === 'image' && (ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif' || ext === 'webm' || ext === 'webp')) {
+        if (targetAssetType === 'image' && (s.includes('base64') || ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif' || ext === 'webm' || ext === 'webp')) {
           ok = true;
         } else if (targetAssetType === 'video' && ext === 'mp4') {
           ok = true;
         } else if (targetAssetType === 'audio' && ext === 'mp3') {
           ok = true;
-        } else if (targetAssetType === 'media' && (ext === 'mp4' || ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif' || ext === 'webm' || ext === 'webp')) {
+        } else if (targetAssetType === 'media' && (s.includes('base64') || ext === 'mp4' || ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif' || ext === 'webm' || ext === 'webp')) {
           ok = true;
         } else if (targetAssetType === 'all') {
           ok = true;
@@ -113379,7 +114519,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
         if (targetAssetType === 'all') {
           ok = true;
         } else if (targetAssetType === 'media') {
-          if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp' || extension === 'mp4') {
+          if (s.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp' || extension === 'mp4') {
             ok = true;
           } else {
             alert(out('Please select an image or video file.'));
@@ -113391,7 +114531,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
             alert(out('Please select an mp4 file.'));
           }
         } else if (targetAssetType === 'image') {
-          if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
+          if (s.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
             ok = true;
           } else {
             alert(out('Please select an image file.'));
@@ -114115,6 +115255,20 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       docContainer.innerHTML = '';
       docContainer.appendChild(range.createContextualFragment(html)); // We use createContextualFragment so that embedded javascript code (code block) will be executed
 
+      // set page size 
+      let s;
+      const elm = docContainer.querySelector('[data-pagesize]');
+      if (elm) {
+        s = elm.getAttribute('data-pagesize');
+      } else {
+        if (localStorage.getItem('_pagesize') === '' || localStorage.getItem('_pagesize')) {
+          s = localStorage.getItem('_pagesize');
+        } else {
+          s = this.pageSize || '';
+        }
+      }
+      this.setPageSize(s);
+      this.applyBehaviorCanvas();
       const builders = docContainer.querySelectorAll(this.container);
       builders.forEach(builder => {
         this.applyBehaviorOn(builder);
@@ -114324,7 +115478,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       url = elm.getAttribute('data-modal-url');
       let extension = url.split('.').pop().split('?')[0].split('#')[0]; //
 
-      if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
+      if (url.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
         this.lightbox.openImage(url, theme, color);
       } else if (extension === 'mp4') {
         this.lightbox.openVideo(url, 'dark', color);
@@ -114654,7 +115808,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
             let theme = link.getAttribute('data-modal-theme');
             if (!theme) theme = 'light';
             const color = elm.getAttribute('data-modal-color');
-            if (extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
+            if (url.includes('base64') || extension === 'jpg' || extension === 'jpeg' || extension === 'png' || extension === 'gif' || extension === 'webm' || extension === 'webp') {
               this.lightbox.openImage(url, theme, color);
               e.preventDefault();
               return false;
@@ -114765,6 +115919,10 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       if (this.activeImage) {
         this.util.hideControls(); //deleting an image should also clear the visible image tool (and resizer).
       }
+
+      col.querySelectorAll('.is-social').forEach(elm => {
+        elm.removeAttribute('contentEditable'); // Return back the div.is-social (See: Prevent div.is-social gets deleted)
+      });
     }
 
     this.oriLen = col.textContent.length; // get character length
@@ -115088,6 +116246,12 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     }
   }
   handleCellKeyup(col, e) {
+    if (e.which === 46 || e.which === 8) {
+      col.querySelectorAll('.is-social').forEach(elm => {
+        elm.contentEditable = false; // Prevent div.is-social gets deleted while deleting its next element
+      });
+    }
+
     if (this.dom.textSelection()) {
       if (e.keyCode === '38') {
         // Up arrow
@@ -115643,6 +116807,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
               });
               var html = result[0].html;
               var noedit = result[0].noedit;
+              const occurrences = this.dom.countOccurrences(html, 'column');
               var bSnippet;
               if (html.indexOf('"row') === -1) {
                 bSnippet = true; // Just snippet (without row/column grid)
@@ -115696,8 +116861,20 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
                 // Clean snippet from sortable related code
                 itemEl.removeAttribute('draggable');
                 this.dom.removeClass(itemEl, 'snippet-item');
+                let bw = '';
+                if (this.page && this.page === '.is-wrapper') {
+                  bw = '800px';
+                } else {
+                  if (occurrences === 2) {
+                    bw = '800px';
+                  } else if (occurrences >= 3) {
+                    bw = '800px';
+                  } else {
+                    bw = '540px';
+                  }
+                }
                 const blockTemplate = `
-                                <div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: 800px;">
+                                <div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: ${bw};">
                                     <div class="is-container container-new leading-12 size-17">
                                     [%CONTENT%]
                                     </div>
@@ -115734,8 +116911,20 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
                 var range = document.createRange();
                 range.setStart(itemEl, 0);
                 itemEl.appendChild(range.createContextualFragment(html));
+                let bw = '';
+                if (this.page && this.page === '.is-wrapper') {
+                  bw = '800px';
+                } else {
+                  if (occurrences === 2) {
+                    bw = '800px';
+                  } else if (occurrences >= 3) {
+                    bw = '800px';
+                  } else {
+                    bw = '540px';
+                  }
+                }
                 const blockTemplate = `
-                                <div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: 800px;">
+                                <div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: ${bw};">
                                     <div class="is-container container-new leading-12 size-17">
                                     [%CONTENT%]
                                     </div>
@@ -147276,7 +148465,8 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
         }
         .is-block.active.editable {
           outline: none;
-          cursor: auto;
+          cursor: auto;    
+          z-index: 10;
         }
         .is-block.active.multi {
           outline: var(--is-outline);
@@ -147516,7 +148706,12 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
             transition: none !important;
             z-index:1;
         }
-        </style>`);
+
+
+        i.bi, i.icon { display: inline-flex; }
+
+        </style>`); // i.bi, i.icon { display: inline-flex; } => this makes icons more cursor friendly
+
     dom.appendHtml(document.head, `<style id="_contentboxstuff_css">
 
             #_cbhtml .is-modal.editbox.is-modal-content {