@innovastudio/contentbuilder 1.4.2 → 1.4.4

package/public/contentbuilder/contentbuilder.esm.js

@@ -16232,6 +16232,11 @@ const prepareSvgIcons = builder => {
 
 
 
+            <symbol id="icon-reload" 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="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1.002 7.935 1.007 9.425 4.747"></path>
+                <path d="M20 4v5h-5"></path>
+            </symbol>
             <symbol id="icon-devices" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <rect x="13" y="8" width="8" height="12" rx="1"></rect>
@@ -18714,6 +18719,7 @@ class Draggable$1 {
   dragStart(e) {
     if (!e.target.hasAttribute('draggable')) return; //any child element (ex. close button) should not be draggable. LATER: revew.
 
+    e.target.parentNode.style.transition = 'none';
     dragActive = true;
     activeDraggableBox = e.target.parentElement;
     var xOffset;
@@ -18747,7 +18753,8 @@ class Draggable$1 {
 
   dragEnd(e) {
     if (!e.target.hasAttribute('draggable')) return; //any child element (ex. close button) should not be draggable. LATER: revew.
-    //Update
+
+    e.target.parentNode.style.transition = ''; //Update
 
     currentX = activeDraggableBox.getAttribute('data-currentX');
     currentY = activeDraggableBox.getAttribute('data-currentY');
@@ -57721,6 +57728,7 @@ class RowTool {
       btnVisible.addEventListener('click', () => {
         let row = util.rowSelected();
         if (!row) return;
+        this.builder.uo.saveForUndo();
         row.classList.remove('hideonmobile');
         let divTarget = this.rowSettings.querySelector('.div-target');
         let target = this.builder.responsive.readTarget(divTarget);
@@ -57736,11 +57744,14 @@ class RowTool {
         }
 
         btnVisible.classList.add('on');
-        btnHidden.classList.remove('on');
+        btnHidden.classList.remove('on'); //Trigger Change event
+
+        this.builder.opts.onChange();
       });
       btnHidden.addEventListener('click', () => {
         let row = util.rowSelected();
         if (!row) return;
+        this.builder.uo.saveForUndo();
         row.classList.remove('hideonmobile');
         let divTarget = this.rowSettings.querySelector('.div-target');
         let target = this.builder.responsive.readTarget(divTarget);
@@ -57756,7 +57767,9 @@ class RowTool {
         }
 
         btnVisible.classList.remove('on');
-        btnHidden.classList.add('on');
+        btnHidden.classList.add('on'); //Trigger Change event
+
+        this.builder.opts.onChange();
       }); //More
 
       let inpRowId = rowSettings.querySelector('.input-row-id');
@@ -60160,6 +60173,7 @@ class ColumnTool {
       btnVisible.addEventListener('click', () => {
         let cell = this.util.cellSelected();
         if (!cell) return;
+        this.builder.uo.saveForUndo();
         cell.classList.remove('hideonmobile');
         let divTarget = this.cellSettings.querySelector('.div-target');
         let target = this.builder.responsive.readTarget(divTarget);
@@ -60177,11 +60191,14 @@ class ColumnTool {
         }
 
         btnVisible.classList.add('on');
-        btnHidden.classList.remove('on');
+        btnHidden.classList.remove('on'); //Trigger Change event
+
+        this.builder.opts.onChange();
       });
       btnHidden.addEventListener('click', () => {
         let cell = this.util.cellSelected();
         if (!cell) return;
+        this.builder.uo.saveForUndo();
         cell.classList.remove('hideonmobile');
         let divTarget = this.cellSettings.querySelector('.div-target');
         let target = this.builder.responsive.readTarget(divTarget);
@@ -60199,7 +60216,9 @@ class ColumnTool {
         }
 
         btnVisible.classList.remove('on');
-        btnHidden.classList.add('on');
+        btnHidden.classList.add('on'); //Trigger Change event
+
+        this.builder.opts.onChange();
       });
     }
 
@@ -61428,6 +61447,7 @@ class ElementGeneralStyles {
     let btnHidden = panelStuff.querySelector('.input-hidden');
     btnVisible.addEventListener('click', () => {
       const elm = this.builder.inspectedElement;
+      this.builder.uo.saveForUndo();
       elm.classList.remove('hideonmobile');
       let divTarget = panelStuff.querySelector('.div-target');
       let target = this.builder.responsive.readTarget(divTarget);
@@ -61443,10 +61463,13 @@ class ElementGeneralStyles {
       }
 
       btnVisible.classList.add('on');
-      btnHidden.classList.remove('on');
+      btnHidden.classList.remove('on'); //Trigger Change event
+
+      this.builder.opts.onChange();
     });
     btnHidden.addEventListener('click', () => {
       const elm = this.builder.inspectedElement;
+      this.builder.uo.saveForUndo();
       elm.classList.remove('hideonmobile');
       let divTarget = panelStuff.querySelector('.div-target');
       let target = this.builder.responsive.readTarget(divTarget);
@@ -61462,7 +61485,9 @@ class ElementGeneralStyles {
       }
 
       btnVisible.classList.remove('on');
-      btnHidden.classList.add('on');
+      btnHidden.classList.add('on'); //Trigger Change event
+
+      this.builder.opts.onChange();
     });
   }
 
@@ -67982,7 +68007,7 @@ class Rte {
 
     if (!rteTool) {
       if (builder.plugins.length > 0) {
-        let allButtons = ['|', 'addsnippet', 'bold', 'italic', 'underline', 'formatting', 'color', 'removeformat', 'align', 'textsettings', 'createlink', 'tags', 'undo', 'redo', 'zoom', 'icon', 'image', 'list', 'font', 'formatpara', 'gridtool', 'html', 'preferences', 'more', 'left', 'center', 'right', 'full'];
+        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'];
 
         const filterButtons = myArray => {
           let newArray = myArray;
@@ -68004,7 +68029,12 @@ class Rte {
                 newArray = newArray.filter(e => e !== item);
               }
             }
-          });
+          }); // if(!this.builder.previewURL && newArray.indexOf('livepreview')!==-1) {
+          //     newArray = newArray.filter((item)=>{
+          //         return item !== 'livepreview';
+          //     });
+          // }
+
           return newArray;
         };
 
@@ -68032,7 +68062,7 @@ class Rte {
       for (var j = 0; j < builder.opts.buttonsMore.length; j++) {
         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 === '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 === '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 === '|') {
+        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 === '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;"><use xlink:href="#icon-devices"></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)
@@ -68043,7 +68073,7 @@ class 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 === '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 === '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 === '|') {
+        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 === '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 === '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;"><use xlink:href="#icon-devices"></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)
@@ -68063,7 +68093,7 @@ class Rte {
 
       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 === '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 === '|') {
+        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 === '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;"><use xlink:href="#icon-devices"></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)
@@ -68074,7 +68104,7 @@ class Rte {
 
       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 === '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 === '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 === '|') {
+        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 === '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 === '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;"><use xlink:href="#icon-devices"></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)
@@ -68096,7 +68126,7 @@ class Rte {
 
       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 === '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 === '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 === '|') {
+        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 === '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 === '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;"><use xlink:href="#icon-devices"></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)
@@ -68105,7 +68135,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 === '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 === '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 === '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 === '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 === '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;"><use xlink:href="#icon-devices"></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)
@@ -69095,9 +69125,22 @@ class Rte {
       });
     } else {
       dom.removeClass(inputImageInsertSrc, 'image-select');
-    } // Zoom Settings
+    } // Live Preview
 
 
+    let livePreviewButton = builderStuff.querySelectorAll('button.rte-livepreview');
+    livePreviewButton.forEach(btn => {
+      dom.addEventListener(btn, 'click', () => {
+        const modal = builderStuff.querySelector('.is-modal.content-preview');
+
+        if (modal.classList.contains('active')) {
+          this.builder.closePreview();
+        } else {
+          this.builder.openPreview();
+        }
+      });
+    }); // Zoom Settings
+
     let zoomButton = builderStuff.querySelectorAll('button.rte-zoom');
     zoomButton.forEach(btn => {
       dom.addEventListener(btn, 'click', () => {
@@ -76444,6 +76487,301 @@ class Responsive {
 
 }
 
+class LivePreview {
+  constructor(builder) {
+    this.builder = builder;
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
+    this.util = util;
+    this.builderStuff = builderStuff;
+    const dom = this.builder.dom;
+    this.dom = dom;
+    let modal = builderStuff.querySelector('.content-preview');
+
+    if (!modal) {
+      let html = `
+            <style>
+            .is-modal.content-preview {
+                transition: all 0.1s ease;
+            }
+            .is-modal.content-preview > div > div {
+                transition: all 0.1s ease;
+            }
+            .is-modal.content-preview .is-modal-refresh,
+            .is-modal.content-preview .is-modal-device,
+            .is-modal.content-preview .is-modal-close {
+                background:transparent !important;
+                width:32px !important;
+                height:32px !important;
+                position:absolute !important;
+                box-shadow:none !important;
+            }
+            .is-modal.content-preview .is-modal-device {
+                top:2px;
+                left:2px;
+            }
+            .is-modal.content-preview .is-modal-refresh {
+                top:2px;
+                right:34px;
+            }
+            .is-modal.content-preview .is-modal-close {
+                top:2px;
+                right:2px;
+            }
+    
+            .is-screen-1920 { 
+                width: 576px !important;
+                height: 332px !important; 
+            }
+            .is-screen-1440 { 
+                width: 431px !important; 
+                height: 258px !important; 
+            }
+            .is-screen-768 { 
+                width: 245px !important;
+                height: 363px !important;
+            }
+            .is-screen-1024 { 
+                width: 328px !important;
+                height: 281px !important;
+            }
+            .is-screen-375 { 
+                width: 167px !important; 
+                height: 332px !important;
+            }
+    
+            .is-screen-1920 .preview-screen {
+                width: 1920px;height: 992px;transform: scale(0.3);
+            }
+            .is-screen-1440 .preview-screen {
+                width: 1440px;height: 744px;transform: scale(0.3);
+            }
+            .is-screen-768 .preview-screen {
+                width: 768px;height: 1024px;transform: scale(0.32);
+            }
+            .is-screen-1024 .preview-screen {
+                width: 1024px;height: 768px;transform: scale(0.32);
+            }
+            .is-screen-375 .preview-screen {
+                width: 375px;height: 667px;transform: scale(0.446);
+            }
+            .is-screen-375 .is-modal-bar > span {
+                display: none;
+            }
+    
+            .content-preview:focus-within {
+                z-index:100021 !important
+            }
+            </style>
+            <div class="is-modal is-modal-content content-preview is-screen-1920" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" ${this.builder.previewStyle ? `style="${this.builder.previewStyle}"` : ''}>
+                <div class="is-modal-bar is-draggable" draggable=""> 
+                    <span>${util.out('Live Preview')}</span>
+                    <button class="is-modal-device" tabindex="-1" style="user-select:none;cursor:default">
+                        
+                    </button>
+                    <button class="is-modal-refresh" tabindex="-1" title="${util.out('Reload')}">
+                        <svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#icon-reload"></use></svg>
+                    </button>
+                    <button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">
+                        <svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
+                    </button>
+                </div>
+                <div style="position:relative;position:absolute;top:0;left:0;width:100%;height:100%;border-top:transparent 35px solid;">
+                    <div class="preview-screen" style="padding:0;position: absolute;top: 0;left: 0;box-sizing: border-box;transform-origin: top left;">
+                        <iframe src="about:blank" style="box-sizing:border-box;width: 100%;height: 100%;position:absolute;"></iframe>
+                    </div>
+                </div>
+                <div style="position:absolute;left:3px;bottom:3px;border-radius:3px;display:flex;overflow:hidden;">
+                    <button class="is-modal-size" tabindex="-1" title="${util.out('Screen Sizes')}" style="width:30px;height:30px;">
+                        <svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#icon-devices"></use></svg>
+                    </button>
+                </div>
+            </div>
+            `;
+      dom.appendHtml(builderStuff, html);
+      const modal = builderStuff.querySelector('.is-modal.content-preview');
+      this.modal = modal;
+      const btnPreviewClose = modal.querySelector('.is-modal-close');
+      btnPreviewClose.addEventListener('click', () => {
+        this.closePreview();
+      });
+      const btnModalSize = modal.querySelector('.is-modal-size');
+      const infoDevice = modal.querySelector('.is-modal-device');
+      btnModalSize.addEventListener('click', () => {
+        if (modal.classList.contains('is-screen-1920')) {
+          modal.classList.remove('is-screen-1920');
+          modal.classList.add('is-screen-1440');
+          localStorage.setItem('_livepreviewscreen', 'is-screen-1440');
+          infoDevice.setAttribute('title', util.out('Laptop'));
+          infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-laptop"></use></svg>';
+        } else if (modal.classList.contains('is-screen-1440')) {
+          modal.classList.remove('is-screen-1440');
+          modal.classList.add('is-screen-1024');
+          infoDevice.setAttribute('title', util.out('Tablet (Landscape)'));
+          localStorage.setItem('_livepreviewscreen', 'is-screen-1024');
+          infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>';
+        } else if (modal.classList.contains('is-screen-1024')) {
+          modal.classList.remove('is-screen-1024');
+          modal.classList.add('is-screen-768');
+          localStorage.setItem('_livepreviewscreen', 'is-screen-768');
+          infoDevice.setAttribute('title', util.out('Tablet (Portrait)'));
+          infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>';
+        } else if (modal.classList.contains('is-screen-768')) {
+          modal.classList.remove('is-screen-768');
+          modal.classList.add('is-screen-375');
+          localStorage.setItem('_livepreviewscreen', 'is-screen-375');
+          infoDevice.setAttribute('title', util.out('Mobile'));
+          infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-mobile"></use></svg>';
+        } else if (modal.classList.contains('is-screen-375')) {
+          modal.classList.remove('is-screen-375');
+          modal.classList.add('is-screen-1920');
+          localStorage.setItem('_livepreviewscreen', 'is-screen-1920');
+          infoDevice.setAttribute('title', util.out('Desktop'));
+          infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>';
+        }
+
+        this.previewRefresh(true);
+      });
+      const btnModalRefresh = modal.querySelector('.is-modal-refresh');
+      btnModalRefresh.addEventListener('click', () => {
+        this.previewRefresh();
+      }); //Extend onChange
+
+      let old2 = this.builder.settings.onChange;
+
+      this.builder.settings.onChange = () => {
+        old2.call(this);
+        this.previewRefresh();
+      };
+    }
+  }
+
+  previewRefresh(disableOnContentLoad) {
+    if (this.modal.classList.contains('active')) {
+      // let html = this.builder.html();
+      // localStorage.setItem('preview-html', html); 
+      if (this.builder.onPreviewOpen) this.builder.onPreviewOpen();
+      const iframe = this.modal.querySelector('iframe');
+
+      if (!this.builder.doc.querySelector('.is-wrapper')) {
+        // ContentBuilder
+        if (this.builder.previewURL) {
+          iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
+        } else {
+          this.writeHtml(iframe);
+        }
+      } else {
+        iframe.src = this.builder.previewURL + '?' + Math.floor(Date.now() / 1000);
+      }
+
+      iframe.onload = () => {
+        if (this.builder.onPreviewContentLoad && !disableOnContentLoad) this.builder.onPreviewContentLoad();
+        iframe.contentWindow.document.addEventListener('click', () => {
+          iframe.focus();
+        });
+      };
+    }
+  }
+
+  openPreview() {
+    // if(!this.builder.previewURL) return;
+    if (this.modal.classList.contains('active')) return;
+    const util = this.util;
+    const modal = this.modal;
+    modal.classList.add('active');
+
+    if (localStorage.getItem('_livepreviewscreen') != null) {
+      modal.classList.remove('is-screen-1920');
+      modal.classList.remove('is-screen-1440');
+      modal.classList.remove('is-screen-1024');
+      modal.classList.remove('is-screen-768');
+      modal.classList.remove('is-screen-375');
+      modal.classList.add(localStorage.getItem('_livepreviewscreen'));
+      const infoDevice = modal.querySelector('.is-modal-device');
+
+      if (modal.classList.contains('is-screen-1920')) {
+        infoDevice.setAttribute('title', util.out('Desktop'));
+        infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>';
+      } else if (modal.classList.contains('is-screen-1440')) {
+        infoDevice.setAttribute('title', util.out('Laptop'));
+        infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-laptop"></use></svg>';
+      } else if (modal.classList.contains('is-screen-1024')) {
+        infoDevice.setAttribute('title', util.out('Tablet (Landscape)'));
+        infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>';
+      } else if (modal.classList.contains('is-screen-768')) {
+        infoDevice.setAttribute('title', util.out('Tablet (Portrait)'));
+        infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>';
+      } else if (modal.classList.contains('is-screen-375')) {
+        infoDevice.setAttribute('title', util.out('Mobile'));
+        infoDevice.innerHTML = '<svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-mobile"></use></svg>';
+      }
+    }
+
+    this.previewRefresh();
+    localStorage.setItem('_livepreview', '1');
+  }
+
+  closePreview() {
+    const modal = this.modal;
+    modal.classList.remove('active');
+    if (this.builder.onPreviewClose) this.builder.onPreviewClose();
+    localStorage.removeItem('_livepreview');
+  }
+
+  writeHtml(iframe) {
+    let doc = this.builder.doc;
+    let basehref = '';
+    let base = doc.querySelectorAll('base[href]');
+
+    if (base.length > 0) {
+      basehref = '<base href="' + base[0].href + '" />';
+    }
+
+    let csslinks = '';
+    let styles = doc.querySelectorAll('link[href]');
+
+    for (let i = 0; i < styles.length; i++) {
+      if (styles[i].href.indexOf('.css') != -1 && styles[i].href.indexOf('contentbox.css') == -1 && styles[i].href.indexOf('contentbuilder.css') == -1) {
+        csslinks += '<link href="' + styles[i].href + '" rel="stylesheet" type="text/css" />';
+      }
+    }
+
+    let jsincludes1 = '';
+    let scripts = doc.head.querySelectorAll('script[src]');
+
+    for (let i = 0; i < scripts.length; i++) {
+      if (scripts[i].src.indexOf('.js') != -1 && scripts[i].src.indexOf('_next/') == -1 && //next
+      scripts[i].src.indexOf('static/js/') == -1 && //react
+      scripts[i].src.indexOf('src/') == -1 && //vue
+      scripts[i].src.indexOf('index') == -1 && scripts[i].src.indexOf('contentbox.js') == -1 && scripts[i].src.indexOf('contentbox.min.js') == -1 && scripts[i].src.indexOf('contentbuilder.js') == -1 && scripts[i].src.indexOf('contentbuilder.min.js') == -1 && scripts[i].src.indexOf('plugin.js') == -1 && scripts[i].src.indexOf('config.js') == -1 && scripts[i].src.indexOf('en.js') == -1 && scripts[i].src.indexOf('rangy') == -1 && scripts[i].src.indexOf('minimalist-blocks') == -1) {
+        jsincludes1 += '<script src="' + scripts[i].src + '" type="text/javascript"></script>';
+      }
+    }
+
+    let jsincludes2 = '';
+    scripts = doc.body.querySelectorAll('script[src]');
+
+    for (let i = 0; i < scripts.length; i++) {
+      if (scripts[i].src.indexOf('.js') != -1 && scripts[i].src.indexOf('_next/') == -1 && //next
+      scripts[i].src.indexOf('static/js/') == -1 && //react
+      scripts[i].src.indexOf('src/') == -1 && //vue
+      scripts[i].src.indexOf('index') == -1 && scripts[i].src.indexOf('contentbox.js') == -1 && scripts[i].src.indexOf('contentbox.min.js') == -1 && scripts[i].src.indexOf('contentbuilder.js') == -1 && scripts[i].src.indexOf('contentbuilder.min.js') == -1 && scripts[i].src.indexOf('plugin.js') == -1 && scripts[i].src.indexOf('config.js') == -1 && scripts[i].src.indexOf('en.js') == -1 && scripts[i].src.indexOf('rangy') == -1 && scripts[i].src.indexOf('minimalist-blocks') == -1) {
+        jsincludes2 += '<script src="' + scripts[i].src + '" type="text/javascript"></script>';
+      }
+    }
+
+    let maxwidth = '800px';
+    let maxw = window.getComputedStyle(doc.querySelector('.is-builder')).getPropertyValue('max-width');
+    if (!isNaN(parseInt(maxw))) maxwidth = maxw;
+    let content = this.builder.html();
+    doc = iframe.contentWindow.document;
+    doc.open();
+    doc.write('<html>' + '<head>' + basehref + '<meta charset="utf-8">' + '<title></title>' + '<style>#_cbhtml > *:not(.is-lightbox) {display:none}</style>' + csslinks + (this.builder.useLightbox ? '<link href="' + this.builder.assetPath + 'scripts/lightbox/lightbox.css" rel="stylesheet" type="text/css" />' : '') + '<style>' + '.slider-image { display:block !important; }' + '.container {margin:35px auto 0; max-width: ' + maxwidth + '; width:100%; padding:0 20px; box-sizing: border-box;}' + '</style>' + '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>' + jsincludes1 + '</head>' + '<body>' + '<div class="container preview">' + content + '</div>' + jsincludes2 + (this.builder.useLightbox ? '<script src="' + this.builder.assetPath + 'scripts/lightbox/lightbox.js"></script><script>window.lightbox.init();</script>' : '') + '</body>' + '</html>');
+    doc.close();
+  }
+
+}
+
 class ContentBuilder {
   constructor(opts = {}) {
     let defaults = {
@@ -76459,6 +76797,15 @@ class ContentBuilder {
       snippetJSON: {
         'snippets': []
       },
+      // Live Preview
+      // previewURL: 'preview.html',
+      onPreviewOpen: () => {
+        let html = this.html();
+        localStorage.setItem('preview-html', html);
+      },
+      // onPreviewClose: ()=>{},
+      previewStyle: 'top:auto;bottom:50px;left:50px;right:auto;',
+      livePreviewOpen: false,
       scriptPath: '',
       // Deprecated
       // Old way:
@@ -76588,11 +76935,11 @@ class ContentBuilder {
       assetRefresh: false,
       // asset manager specified in imageSelect, fileSelect & videoSelect will always refreshed on click/open
       customTags: [],
-      buttons: ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'zoom', 'more'],
+      buttons: ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'zoom', 'livepreview', 'more'],
       buttonsMore: ['icon', 'image', '|', 'list', 'font', 'formatPara', '|', 'html', 'preferences'],
-      elementButtons: ['left', 'center', 'right', 'full', 'undo', 'redo', 'zoom', 'more'],
+      elementButtons: ['left', 'center', 'right', 'full', 'undo', 'redo', 'zoom', 'livepreview', 'more'],
       elementButtonsMore: ['|', 'html', 'preferences'],
-      iconButtons: ['icon', 'color', 'textsettings', 'createLink', '|', 'undo', 'redo', 'zoom', 'more'],
+      iconButtons: ['icon', 'color', 'textsettings', 'createLink', '|', 'undo', 'redo', 'zoom', 'livepreview', 'more'],
       iconButtonsMore: ['|', 'html', 'preferences'],
       lang: [],
       checkLang: false,
@@ -77241,6 +77588,7 @@ class ContentBuilder {
     this.colTool = new ColumnTool(this); // Render Column Tool
 
     this._rowTool = new RowTool(this);
+    this.livePreview = new LivePreview(this);
     this.mediaPicker = new MediaPicker(this); // Extend the onChange function
 
     var oldget = this.opts.onChange;
@@ -77506,6 +77854,16 @@ class ContentBuilder {
     window.selectAsset = this.selectAsset.bind(this);
     window.assetType = this.assetType.bind(this);
     window.hideModal = this.hideModal.bind(this);
+    setTimeout(() => {
+      // Remember UI
+      if (localStorage.getItem('_livepreview') != null) {
+        this.openPreview();
+      } else {
+        if (this.opts.livePreviewOpen) {
+          this.openPreview();
+        }
+      }
+    }, 300);
   } // constructor
   // Convenience constructor, so that the plugin can be called directly using: ContentBuilder.run({ ... });
 
@@ -78547,6 +78905,14 @@ class ContentBuilder {
   beautify(html) {
     const htmlutil = new HtmlUtil(this);
     return htmlutil.beautify(html);
+  }
+
+  openPreview() {
+    this.livePreview.openPreview();
+  }
+
+  closePreview() {
+    this.livePreview.closePreview();
   } // Module related
 
 
@@ -79110,6 +79476,10 @@ class ContentBuilder {
     this.opts.onChange(); //Trigger Render event
 
     this.opts.onRender();
+
+    if (localStorage.getItem('_livepreview') != null) {
+      this.livePreview.openPreview();
+    }
   } // loadHtml(html) {
   //     let area = this.getScope();
   //     area.innerHTML = html;