@innovastudio/contentbuilder 1.4.55 → 1.4.57

package/public/contentbuilder/contentbuilder.esm.js

@@ -5444,6 +5444,9 @@ class Util {
     localStorage.removeItem('_htmlview');
     localStorage.removeItem('_pasteresult'); //DON'T HAVE PROP
     localStorage.removeItem('_livepreview');
+    localStorage.removeItem('_dictation');
+    localStorage.removeItem('_mic');
+    localStorage.removeItem('_autosendcommand');
 
     //NOT USED
     localStorage.removeItem('_scrollableeditor');
@@ -8437,7 +8440,7 @@ class Dom {
 
 var js$1 = {exports: {}};
 
-var src = {};
+var src$1 = {};
 
 var javascript = {exports: {}};
 
@@ -13576,9 +13579,9 @@ function style_html(html_source, options, js, css) {
 }
 style_html.defaultOptions = html_beautify.defaultOptions;
 
-src.js = js_beautify;
-src.css = css_beautify;
-src.html = style_html;
+src$1.js = js_beautify;
+src$1.css = css_beautify;
+src$1.html = style_html;
 
 /*jshint node:true */
 
@@ -13621,7 +13624,7 @@ function get_beautify(js_beautify, css_beautify, html_beautify) {
 
 {
   (function(mod) {
-    var beautifier = src;
+    var beautifier = src$1;
     beautifier.js_beautify = beautifier.js;
     beautifier.css_beautify = beautifier.css;
     beautifier.html_beautify = beautifier.html;
@@ -14261,7 +14264,7 @@ var loader = {
   __getMonacoInstance: __getMonacoInstance
 };
 
-const dom$j = new Dom();
+const dom$k = new Dom();
 let hash$1 = {};
 class HtmlUtil {
   constructor(builder) {
@@ -14308,28 +14311,28 @@ class HtmlUtil {
             </div>
             
             `;
-      dom$j.appendHtml(builderStuff, html);
+      dom$k.appendHtml(builderStuff, html);
       viewhtml = builderStuff.querySelector('.viewhtml');
       let viewhtmlmonaco = builderStuff.querySelector('.viewhtmlmonaco');
       let viewhtmlexternal = builderStuff.querySelector('.viewhtmlexternal');
       let elm = viewhtml.querySelector('.input-ok');
-      dom$j.addEventListener(elm, 'click', () => {
+      dom$k.addEventListener(elm, 'click', () => {
         this.applyHtml(viewhtml);
       });
       elm = viewhtml.querySelector('.input-cancel');
-      dom$j.addEventListener(elm, 'click', () => {
+      dom$k.addEventListener(elm, 'click', () => {
         this.builder.hideModal(viewhtml);
       });
       elm = viewhtmlmonaco.querySelector('.input-ok');
-      dom$j.addEventListener(elm, 'click', () => {
+      dom$k.addEventListener(elm, 'click', () => {
         this.applyHtml(viewhtmlmonaco);
       });
       elm = viewhtmlmonaco.querySelector('.input-cancel');
-      dom$j.addEventListener(elm, 'click', () => {
+      dom$k.addEventListener(elm, 'click', () => {
         this.builder.hideModal(viewhtmlmonaco);
       });
       elm = viewhtmlexternal.querySelector('.input-ok');
-      dom$j.addEventListener(elm, 'click', () => {
+      dom$k.addEventListener(elm, 'click', () => {
         const source = document.querySelector('textarea[data-source-active]');
         const selectorOk = source.getAttribute('data-source-ok');
         source.removeAttribute('data-source-active');
@@ -14339,7 +14342,7 @@ class HtmlUtil {
         this.builder.hideModal(viewhtmlexternal);
       });
       elm = viewhtmlexternal.querySelector('.input-cancel');
-      dom$j.addEventListener(elm, 'click', () => {
+      dom$k.addEventListener(elm, 'click', () => {
         const source = document.querySelector('textarea[data-source-active]');
         const selectorCancel = source.getAttribute('data-source-cancel');
         source.removeAttribute('data-source-active');
@@ -14611,7 +14614,7 @@ class HtmlUtil {
       this.builder.cleanHtmlFormatting = false;
 
       //Change to row selection
-      dom$j.removeClass(row, 'row-outline');
+      dom$k.removeClass(row, 'row-outline');
     }
     if (mode === 'full') {
       // 
@@ -14845,10 +14848,10 @@ class HtmlUtil {
       _builder.style.WebkitTransform = '';
       _builder.style.MozTransform = '';
       _builder.removeAttribute('data-sort');
-      dom$j.removeClass(_builder, 'builder-active');
-      const rows = dom$j.elementChildren(_builder);
+      dom$k.removeClass(_builder, 'builder-active');
+      const rows = dom$k.elementChildren(_builder);
       rows.forEach(row => {
-        const cols = dom$j.elementChildren(row);
+        const cols = dom$k.elementChildren(row);
         cols.forEach(col => {
           col.style.cursor = '';
         });
@@ -14856,95 +14859,95 @@ class HtmlUtil {
     });
 
     // cleanup cursor from drag to resize columns
-    const rows = dom$j.elementChildren(tmp);
+    const rows = dom$k.elementChildren(tmp);
     rows.forEach(row => {
       row.style.cursor = ''; //if tmp is row html, then this is a column
-      const cols = dom$j.elementChildren(row);
+      const cols = dom$k.elementChildren(row);
       cols.forEach(col => {
         col.style.cursor = '';
       });
     });
     let elms = tmp.querySelectorAll('.sortable-chosen');
-    dom$j.removeClasses(elms, 'sortable-chosen');
+    dom$k.removeClasses(elms, 'sortable-chosen');
     elms = tmp.querySelectorAll('.sortable-ghost');
-    dom$j.removeClasses(elms, 'sortable-ghost');
+    dom$k.removeClasses(elms, 'sortable-ghost');
     elms = tmp.querySelectorAll('.elm-active');
-    dom$j.removeClasses(elms, 'elm-active');
+    dom$k.removeClasses(elms, 'elm-active');
     elms = tmp.querySelectorAll('.elm-inspected');
-    dom$j.removeClasses(elms, 'elm-inspected');
+    dom$k.removeClasses(elms, 'elm-inspected');
     elms = tmp.querySelectorAll('.cell-active');
-    dom$j.removeClasses(elms, 'cell-active');
+    dom$k.removeClasses(elms, 'cell-active');
     elms = tmp.querySelectorAll('.row-active');
-    dom$j.removeClasses(elms, 'row-active');
+    dom$k.removeClasses(elms, 'row-active');
     elms = tmp.querySelectorAll('.row-outline');
-    dom$j.removeClasses(elms, 'row-outline');
+    dom$k.removeClasses(elms, 'row-outline');
     elms = tmp.querySelectorAll('.is-builder');
-    dom$j.removeClasses(elms, 'is-builder');
+    dom$k.removeClasses(elms, 'is-builder');
     elms = tmp.querySelectorAll('.row-outline');
-    dom$j.removeClasses(elms, 'row-outline');
+    dom$k.removeClasses(elms, 'row-outline');
     elms = tmp.querySelectorAll('[data-click]');
-    dom$j.removeAttributes(elms, 'data-click');
+    dom$k.removeAttributes(elms, 'data-click');
     elms = tmp.querySelectorAll('[contenteditable]');
-    dom$j.removeAttributes(elms, 'contenteditable');
+    dom$k.removeAttributes(elms, 'contenteditable');
     elms = tmp.querySelectorAll('[draggridoutline]');
-    dom$j.removeAttributes(elms, 'draggridoutline');
+    dom$k.removeAttributes(elms, 'draggridoutline');
     elms = tmp.querySelectorAll('[between-blocks-left]');
-    dom$j.removeAttributes(elms, 'between-blocks-left');
+    dom$k.removeAttributes(elms, 'between-blocks-left');
     elms = tmp.querySelectorAll('[between-blocks-center]');
-    dom$j.removeAttributes(elms, 'between-blocks-center');
+    dom$k.removeAttributes(elms, 'between-blocks-center');
     elms = tmp.querySelectorAll('[hideelementhighlight]');
-    dom$j.removeAttributes(elms, 'hideelementhighlight');
+    dom$k.removeAttributes(elms, 'hideelementhighlight');
     elms = tmp.querySelectorAll('[data-module-active]');
-    dom$j.removeAttributes(elms, 'data-module-active');
+    dom$k.removeAttributes(elms, 'data-module-active');
     elms = tmp.querySelectorAll('[draggable]');
-    dom$j.removeAttributes(elms, 'draggable');
+    dom$k.removeAttributes(elms, 'draggable');
     elms = tmp.querySelectorAll('[data-animated]');
-    dom$j.removeAttributes(elms, 'data-animated');
+    dom$k.removeAttributes(elms, 'data-animated');
     elms = tmp.querySelectorAll('[data-saveforundo]');
-    dom$j.removeAttributes(elms, 'data-saveforundo');
+    dom$k.removeAttributes(elms, 'data-saveforundo');
     elms = tmp.querySelectorAll('[hidesnippetaddtool]');
-    dom$j.removeAttributes(elms, 'hidesnippetaddtool');
+    dom$k.removeAttributes(elms, 'hidesnippetaddtool');
     elms = tmp.querySelectorAll('[gray]');
-    dom$j.removeAttributes(elms, 'gray');
+    dom$k.removeAttributes(elms, 'gray');
     elms = tmp.querySelectorAll('[rowoutline]');
-    dom$j.removeAttributes(elms, 'rowoutline');
+    dom$k.removeAttributes(elms, 'rowoutline');
     elms = tmp.querySelectorAll('[hidecolumntool]');
-    dom$j.removeAttributes(elms, 'hidecolumntool');
+    dom$k.removeAttributes(elms, 'hidecolumntool');
     elms = tmp.querySelectorAll('[grayoutline]');
-    dom$j.removeAttributes(elms, 'grayoutline');
+    dom$k.removeAttributes(elms, 'grayoutline');
     elms = tmp.querySelectorAll('[hideoutline]');
-    dom$j.removeAttributes(elms, 'hideoutline');
+    dom$k.removeAttributes(elms, 'hideoutline');
     elms = tmp.querySelectorAll('[leftrowtool]');
-    dom$j.removeAttributes(elms, 'leftrowtool');
+    dom$k.removeAttributes(elms, 'leftrowtool');
     elms = tmp.querySelectorAll('[minimal]');
-    dom$j.removeAttributes(elms, 'minimal');
+    dom$k.removeAttributes(elms, 'minimal');
     elms = tmp.querySelectorAll('[clean]');
-    dom$j.removeAttributes(elms, 'clean');
+    dom$k.removeAttributes(elms, 'clean');
     elms = tmp.querySelectorAll('[grideditor]');
-    dom$j.removeAttributes(elms, 'grideditor');
+    dom$k.removeAttributes(elms, 'grideditor');
     elms = tmp.querySelectorAll('[gridoutline]');
-    dom$j.removeAttributes(elms, 'gridoutline');
-    dom$j.removeElements(tmp.querySelectorAll('.is-row-tool'));
-    dom$j.removeElements(tmp.querySelectorAll('.is-col-tool'));
-    dom$j.removeElements(tmp.querySelectorAll('.is-rowadd-tool'));
-    dom$j.removeElements(tmp.querySelectorAll('.ovl'));
-    dom$j.removeElements(tmp.querySelectorAll('.row-add-initial'));
+    dom$k.removeAttributes(elms, 'gridoutline');
+    dom$k.removeElements(tmp.querySelectorAll('.is-row-tool'));
+    dom$k.removeElements(tmp.querySelectorAll('.is-col-tool'));
+    dom$k.removeElements(tmp.querySelectorAll('.is-rowadd-tool'));
+    dom$k.removeElements(tmp.querySelectorAll('.ovl'));
+    dom$k.removeElements(tmp.querySelectorAll('.row-add-initial'));
 
     //Extra cleaning
     elms = tmp.querySelectorAll('.aos-init');
-    dom$j.removeClasses(elms, 'aos-init');
+    dom$k.removeClasses(elms, 'aos-init');
     elms = tmp.querySelectorAll('.aos-animate');
-    dom$j.removeClasses(elms, 'aos-animate');
+    dom$k.removeClasses(elms, 'aos-animate');
     elms = tmp.querySelectorAll('.skrollable');
-    dom$j.removeClasses(elms, 'skrollable');
+    dom$k.removeClasses(elms, 'skrollable');
     elms = tmp.querySelectorAll('.skrollable-after');
-    dom$j.removeClasses(elms, 'skrollable-after');
+    dom$k.removeClasses(elms, 'skrollable-after');
     elms = tmp.querySelectorAll('.skrollable-before');
-    dom$j.removeClasses(elms, 'skrollable-before');
+    dom$k.removeClasses(elms, 'skrollable-before');
     elms = tmp.querySelectorAll('.skrollable-between');
-    dom$j.removeClasses(elms, 'skrollable-between');
+    dom$k.removeClasses(elms, 'skrollable-between');
     elms = tmp.querySelectorAll('.is-inview');
-    dom$j.removeClasses(elms, 'is-inview');
+    dom$k.removeClasses(elms, 'is-inview');
     let emptyclasses = tmp.querySelectorAll('[class=""]');
     Array.prototype.forEach.call(emptyclasses, emptyclass => {
       emptyclass.removeAttribute('class');
@@ -14953,9 +14956,9 @@ class HtmlUtil {
     Array.prototype.forEach.call(unusedOverlays, unusedOverlay => {
       if (!unusedOverlay.hasAttribute('style')) unusedOverlay.parentNode.removeChild(unusedOverlay);
     });
-    dom$j.removeEmptyStyle(tmp);
+    dom$k.removeEmptyStyle(tmp);
     elms = tmp.querySelectorAll('[data-keep]');
-    dom$j.removeAttributes(elms, 'data-keep');
+    dom$k.removeAttributes(elms, 'data-keep');
 
     //Backward compatible: cleanup button <span contenteditable="false"><a contenteditable="true">button</a></span>
     let links = tmp.querySelectorAll('a');
@@ -14972,76 +14975,76 @@ class HtmlUtil {
 
       // Remove dummy DIV after last section
       let elms = tmp.querySelectorAll('.is-dummy');
-      dom$j.removeElements(elms);
+      dom$k.removeElements(elms);
       elms = tmp.querySelectorAll('[data-scroll]');
-      dom$j.removeAttributes(elms, 'data-scroll');
+      dom$k.removeAttributes(elms, 'data-scroll');
       elms = tmp.querySelectorAll('[data-scroll-once]');
-      dom$j.removeAttributes(elms, 'data-scroll-once');
+      dom$k.removeAttributes(elms, 'data-scroll-once');
       if (this.builder.shortenOutput) {
         elms = tmp.querySelectorAll('[data-noedit]');
-        dom$j.removeAttributes(elms, 'data-noedit');
+        dom$k.removeAttributes(elms, 'data-noedit');
         elms = tmp.querySelectorAll('[data-module]');
-        dom$j.removeAttributes(elms, 'data-module');
+        dom$k.removeAttributes(elms, 'data-module');
         elms = tmp.querySelectorAll('[data-module-desc]');
-        dom$j.removeAttributes(elms, 'data-module-desc');
+        dom$k.removeAttributes(elms, 'data-module-desc');
         elms = tmp.querySelectorAll('[data-dialog-width]');
-        dom$j.removeAttributes(elms, 'data-dialog-width');
+        dom$k.removeAttributes(elms, 'data-dialog-width');
         elms = tmp.querySelectorAll('[data-dialog-height]');
-        dom$j.removeAttributes(elms, 'data-dialog-height');
+        dom$k.removeAttributes(elms, 'data-dialog-height');
         elms = tmp.querySelectorAll('[data-html]');
-        dom$j.removeAttributes(elms, 'data-html');
+        dom$k.removeAttributes(elms, 'data-html');
         elms = tmp.querySelectorAll('[data-settings]');
-        dom$j.removeAttributes(elms, 'data-settings');
+        dom$k.removeAttributes(elms, 'data-settings');
         elms = tmp.querySelectorAll('[data-html-1]');
-        dom$j.removeAttributes(elms, 'data-html-1');
+        dom$k.removeAttributes(elms, 'data-html-1');
         elms = tmp.querySelectorAll('[data-html-2]');
-        dom$j.removeAttributes(elms, 'data-html-2');
+        dom$k.removeAttributes(elms, 'data-html-2');
         elms = tmp.querySelectorAll('[data-html-3]');
-        dom$j.removeAttributes(elms, 'data-html-3');
+        dom$k.removeAttributes(elms, 'data-html-3');
         elms = tmp.querySelectorAll('[data-html-4]');
-        dom$j.removeAttributes(elms, 'data-html-4');
+        dom$k.removeAttributes(elms, 'data-html-4');
         elms = tmp.querySelectorAll('[data-html-5]');
-        dom$j.removeAttributes(elms, 'data-html-5');
+        dom$k.removeAttributes(elms, 'data-html-5');
         elms = tmp.querySelectorAll('[data-html-6]');
-        dom$j.removeAttributes(elms, 'data-html-6');
+        dom$k.removeAttributes(elms, 'data-html-6');
         elms = tmp.querySelectorAll('[data-html-7]');
-        dom$j.removeAttributes(elms, 'data-html-7');
+        dom$k.removeAttributes(elms, 'data-html-7');
         elms = tmp.querySelectorAll('[data-html-8]');
-        dom$j.removeAttributes(elms, 'data-html-8');
+        dom$k.removeAttributes(elms, 'data-html-8');
         elms = tmp.querySelectorAll('[data-html-9]');
-        dom$j.removeAttributes(elms, 'data-html-9');
+        dom$k.removeAttributes(elms, 'data-html-9');
         elms = tmp.querySelectorAll('[data-html-10]');
-        dom$j.removeAttributes(elms, 'data-html-10');
+        dom$k.removeAttributes(elms, 'data-html-10');
         elms = tmp.querySelectorAll('[data-html-12]');
-        dom$j.removeAttributes(elms, 'data-html-12');
+        dom$k.removeAttributes(elms, 'data-html-12');
         elms = tmp.querySelectorAll('[data-html-13]');
-        dom$j.removeAttributes(elms, 'data-html-13');
+        dom$k.removeAttributes(elms, 'data-html-13');
         elms = tmp.querySelectorAll('[data-html-14]');
-        dom$j.removeAttributes(elms, 'data-html-14');
+        dom$k.removeAttributes(elms, 'data-html-14');
         elms = tmp.querySelectorAll('[data-html-15]');
-        dom$j.removeAttributes(elms, 'data-html-15');
+        dom$k.removeAttributes(elms, 'data-html-15');
         elms = tmp.querySelectorAll('[data-html-16]');
-        dom$j.removeAttributes(elms, 'data-html-16');
+        dom$k.removeAttributes(elms, 'data-html-16');
         elms = tmp.querySelectorAll('[data-html-17]');
-        dom$j.removeAttributes(elms, 'data-html-17');
+        dom$k.removeAttributes(elms, 'data-html-17');
         elms = tmp.querySelectorAll('[data-html-18]');
-        dom$j.removeAttributes(elms, 'data-html-18');
+        dom$k.removeAttributes(elms, 'data-html-18');
         elms = tmp.querySelectorAll('[data-html-19]');
-        dom$j.removeAttributes(elms, 'data-html-19');
+        dom$k.removeAttributes(elms, 'data-html-19');
         elms = tmp.querySelectorAll('[data-html-20]');
-        dom$j.removeAttributes(elms, 'data-html-20');
+        dom$k.removeAttributes(elms, 'data-html-20');
         elms = tmp.querySelectorAll('[data-html-21]');
-        dom$j.removeAttributes(elms, 'data-html-21');
+        dom$k.removeAttributes(elms, 'data-html-21');
         elms = tmp.querySelectorAll('[data-html-21]');
-        dom$j.removeAttributes(elms, 'data-html-21');
+        dom$k.removeAttributes(elms, 'data-html-21');
         elms = tmp.querySelectorAll('[data-html-22]');
-        dom$j.removeAttributes(elms, 'data-html-22');
+        dom$k.removeAttributes(elms, 'data-html-22');
         elms = tmp.querySelectorAll('[data-html-23]');
-        dom$j.removeAttributes(elms, 'data-html-23');
+        dom$k.removeAttributes(elms, 'data-html-23');
         elms = tmp.querySelectorAll('[data-html-24]');
-        dom$j.removeAttributes(elms, 'data-html-24');
+        dom$k.removeAttributes(elms, 'data-html-24');
         elms = tmp.querySelectorAll('[data-html-25]');
-        dom$j.removeAttributes(elms, 'data-html-25');
+        dom$k.removeAttributes(elms, 'data-html-25');
       }
 
       // cleaning
@@ -15057,22 +15060,22 @@ class HtmlUtil {
       });
       elms = tmp.querySelectorAll('.is-animated');
       Array.prototype.forEach.call(elms, elm => {
-        dom$j.removeClass(elm, 'animated');
-        dom$j.removeClass(elm, 'pulse');
-        dom$j.removeClass(elm, 'bounceIn');
-        dom$j.removeClass(elm, 'fadeIn');
-        dom$j.removeClass(elm, 'fadeOut'); //new
-        dom$j.removeClass(elm, 'fadeInDown');
-        dom$j.removeClass(elm, 'fadeInLeft');
-        dom$j.removeClass(elm, 'fadeInRight');
-        dom$j.removeClass(elm, 'fadeInUp');
-        dom$j.removeClass(elm, 'flipInX');
-        dom$j.removeClass(elm, 'flipInY');
-        dom$j.removeClass(elm, 'slideInUp');
-        dom$j.removeClass(elm, 'slideInDown');
-        dom$j.removeClass(elm, 'slideInLeft');
-        dom$j.removeClass(elm, 'slideInRight');
-        dom$j.removeClass(elm, 'zoomIn');
+        dom$k.removeClass(elm, 'animated');
+        dom$k.removeClass(elm, 'pulse');
+        dom$k.removeClass(elm, 'bounceIn');
+        dom$k.removeClass(elm, 'fadeIn');
+        dom$k.removeClass(elm, 'fadeOut'); //new
+        dom$k.removeClass(elm, 'fadeInDown');
+        dom$k.removeClass(elm, 'fadeInLeft');
+        dom$k.removeClass(elm, 'fadeInRight');
+        dom$k.removeClass(elm, 'fadeInUp');
+        dom$k.removeClass(elm, 'flipInX');
+        dom$k.removeClass(elm, 'flipInY');
+        dom$k.removeClass(elm, 'slideInUp');
+        dom$k.removeClass(elm, 'slideInDown');
+        dom$k.removeClass(elm, 'slideInLeft');
+        dom$k.removeClass(elm, 'slideInRight');
+        dom$k.removeClass(elm, 'zoomIn');
         elm.style.animationDelay = '';
         elm.style.transitionDelay = '';
         elm.style.transitionDuration = '';
@@ -15087,39 +15090,39 @@ class HtmlUtil {
       //Cleanup utils
       elms = tmp.querySelectorAll('.is-appeared');
       Array.prototype.forEach.call(elms, elm => {
-        dom$j.removeClass(elm, 'is-appeared');
+        dom$k.removeClass(elm, 'is-appeared');
       });
       elms = tmp.querySelectorAll('.box-active');
       Array.prototype.forEach.call(elms, elm => {
-        dom$j.removeClass(elm, 'box-active');
+        dom$k.removeClass(elm, 'box-active');
       });
       elms = tmp.querySelectorAll('.section-active');
       Array.prototype.forEach.call(elms, elm => {
-        dom$j.removeClass(elm, 'section-active');
+        dom$k.removeClass(elm, 'section-active');
       });
       elms = tmp.querySelectorAll('.section-select');
       Array.prototype.forEach.call(elms, elm => {
-        dom$j.removeClass(elm, 'section-select');
+        dom$k.removeClass(elm, 'section-select');
       });
       elms = tmp.querySelectorAll('.box-select');
       Array.prototype.forEach.call(elms, elm => {
-        dom$j.removeClass(elm, 'box-select');
+        dom$k.removeClass(elm, 'box-select');
       });
       elms = tmp.querySelectorAll('.is-section-tool');
-      dom$j.removeElements(elms);
+      dom$k.removeElements(elms);
       elms = tmp.querySelectorAll('.is-box-tool');
-      dom$j.removeElements(elms);
+      dom$k.removeElements(elms);
       elms = tmp.querySelectorAll('.is-section-info');
-      dom$j.removeElements(elms);
+      dom$k.removeElements(elms);
       var html_content = '';
       var html_footer = '';
       var html_others = '';
 
       // Apply behavior on each row
-      const sections = dom$j.elementChildren(tmp);
+      const sections = dom$k.elementChildren(tmp);
       sections.forEach(section => {
         let currentSection = section;
-        if (dom$j.hasClass(currentSection, 'is-section')) {
+        if (dom$k.hasClass(currentSection, 'is-section')) {
           var secclass = '';
           // var secstyle = '';
           if (currentSection.getAttribute('class')) secclass = ' class="' + currentSection.getAttribute('class') + '"';
@@ -15163,69 +15166,69 @@ class HtmlUtil {
       });
       if (this.builder.shortenOutput) {
         elms = tmp.querySelectorAll('[data-noedit]');
-        dom$j.removeAttributes(elms, 'data-noedit');
+        dom$k.removeAttributes(elms, 'data-noedit');
         elms = tmp.querySelectorAll('[data-module]');
-        dom$j.removeAttributes(elms, 'data-module');
+        dom$k.removeAttributes(elms, 'data-module');
         elms = tmp.querySelectorAll('[data-module-desc]');
-        dom$j.removeAttributes(elms, 'data-module-desc');
+        dom$k.removeAttributes(elms, 'data-module-desc');
         elms = tmp.querySelectorAll('[data-dialog-width]');
-        dom$j.removeAttributes(elms, 'data-dialog-width');
+        dom$k.removeAttributes(elms, 'data-dialog-width');
         elms = tmp.querySelectorAll('[data-dialog-height]');
-        dom$j.removeAttributes(elms, 'data-dialog-height');
+        dom$k.removeAttributes(elms, 'data-dialog-height');
         elms = tmp.querySelectorAll('[data-html]');
-        dom$j.removeAttributes(elms, 'data-html');
+        dom$k.removeAttributes(elms, 'data-html');
         elms = tmp.querySelectorAll('[data-settings]');
-        dom$j.removeAttributes(elms, 'data-settings');
+        dom$k.removeAttributes(elms, 'data-settings');
         elms = tmp.querySelectorAll('[data-html-1]');
-        dom$j.removeAttributes(elms, 'data-html-1');
+        dom$k.removeAttributes(elms, 'data-html-1');
         elms = tmp.querySelectorAll('[data-html-2]');
-        dom$j.removeAttributes(elms, 'data-html-2');
+        dom$k.removeAttributes(elms, 'data-html-2');
         elms = tmp.querySelectorAll('[data-html-3]');
-        dom$j.removeAttributes(elms, 'data-html-3');
+        dom$k.removeAttributes(elms, 'data-html-3');
         elms = tmp.querySelectorAll('[data-html-4]');
-        dom$j.removeAttributes(elms, 'data-html-4');
+        dom$k.removeAttributes(elms, 'data-html-4');
         elms = tmp.querySelectorAll('[data-html-5]');
-        dom$j.removeAttributes(elms, 'data-html-5');
+        dom$k.removeAttributes(elms, 'data-html-5');
         elms = tmp.querySelectorAll('[data-html-6]');
-        dom$j.removeAttributes(elms, 'data-html-6');
+        dom$k.removeAttributes(elms, 'data-html-6');
         elms = tmp.querySelectorAll('[data-html-7]');
-        dom$j.removeAttributes(elms, 'data-html-7');
+        dom$k.removeAttributes(elms, 'data-html-7');
         elms = tmp.querySelectorAll('[data-html-8]');
-        dom$j.removeAttributes(elms, 'data-html-8');
+        dom$k.removeAttributes(elms, 'data-html-8');
         elms = tmp.querySelectorAll('[data-html-9]');
-        dom$j.removeAttributes(elms, 'data-html-9');
+        dom$k.removeAttributes(elms, 'data-html-9');
         elms = tmp.querySelectorAll('[data-html-10]');
-        dom$j.removeAttributes(elms, 'data-html-10');
+        dom$k.removeAttributes(elms, 'data-html-10');
         elms = tmp.querySelectorAll('[data-html-12]');
-        dom$j.removeAttributes(elms, 'data-html-12');
+        dom$k.removeAttributes(elms, 'data-html-12');
         elms = tmp.querySelectorAll('[data-html-13]');
-        dom$j.removeAttributes(elms, 'data-html-13');
+        dom$k.removeAttributes(elms, 'data-html-13');
         elms = tmp.querySelectorAll('[data-html-14]');
-        dom$j.removeAttributes(elms, 'data-html-14');
+        dom$k.removeAttributes(elms, 'data-html-14');
         elms = tmp.querySelectorAll('[data-html-15]');
-        dom$j.removeAttributes(elms, 'data-html-15');
+        dom$k.removeAttributes(elms, 'data-html-15');
         elms = tmp.querySelectorAll('[data-html-16]');
-        dom$j.removeAttributes(elms, 'data-html-16');
+        dom$k.removeAttributes(elms, 'data-html-16');
         elms = tmp.querySelectorAll('[data-html-17]');
-        dom$j.removeAttributes(elms, 'data-html-17');
+        dom$k.removeAttributes(elms, 'data-html-17');
         elms = tmp.querySelectorAll('[data-html-18]');
-        dom$j.removeAttributes(elms, 'data-html-18');
+        dom$k.removeAttributes(elms, 'data-html-18');
         elms = tmp.querySelectorAll('[data-html-19]');
-        dom$j.removeAttributes(elms, 'data-html-19');
+        dom$k.removeAttributes(elms, 'data-html-19');
         elms = tmp.querySelectorAll('[data-html-20]');
-        dom$j.removeAttributes(elms, 'data-html-20');
+        dom$k.removeAttributes(elms, 'data-html-20');
         elms = tmp.querySelectorAll('[data-html-21]');
-        dom$j.removeAttributes(elms, 'data-html-21');
+        dom$k.removeAttributes(elms, 'data-html-21');
         elms = tmp.querySelectorAll('[data-html-21]');
-        dom$j.removeAttributes(elms, 'data-html-21');
+        dom$k.removeAttributes(elms, 'data-html-21');
         elms = tmp.querySelectorAll('[data-html-22]');
-        dom$j.removeAttributes(elms, 'data-html-22');
+        dom$k.removeAttributes(elms, 'data-html-22');
         elms = tmp.querySelectorAll('[data-html-23]');
-        dom$j.removeAttributes(elms, 'data-html-23');
+        dom$k.removeAttributes(elms, 'data-html-23');
         elms = tmp.querySelectorAll('[data-html-24]');
-        dom$j.removeAttributes(elms, 'data-html-24');
+        dom$k.removeAttributes(elms, 'data-html-24');
         elms = tmp.querySelectorAll('[data-html-25]');
-        dom$j.removeAttributes(elms, 'data-html-25');
+        dom$k.removeAttributes(elms, 'data-html-25');
       }
       html = tmp.innerHTML.trim();
       html = html.replace(/<font/g, '<span').replace(/<\/font/g, '</span');
@@ -21768,7 +21771,7 @@ _extends(Remove, {
 Sortable.mount(new AutoScrollPlugin());
 Sortable.mount(Remove, Revert);
 
-const dom$i = new Dom();
+const dom$j = new Dom();
 class Select {
   constructor(dropDown) {
     const [toggler, menu] = dropDown.children;
@@ -21789,13 +21792,13 @@ class Select {
       this.toggle(false);
       dropDown.dispatchEvent(new Event('change'));
       toggler.focus();
-      let elms = dom$i.elementChildren(menu);
+      let elms = dom$j.elementChildren(menu);
       elms.forEach(elm => {
-        dom$i.removeClass(elm, 'selected');
+        dom$j.removeClass(elm, 'selected');
       });
       let optionselected = menu.querySelector('[data-value="' + val + '"]');
       if (optionselected) {
-        dom$i.addClass(optionselected, 'selected');
+        dom$j.addClass(optionselected, 'selected');
       }
     };
     const handleItemKeyDown = e => {
@@ -21845,7 +21848,7 @@ class Select {
         // menu.children[0].focus();
         let optionselected = menu.querySelector('[data-value="' + this.value + '"]');
         if (optionselected) {
-          dom$i.addClass(optionselected, 'selected');
+          dom$j.addClass(optionselected, 'selected');
           optionselected.focus();
         }
         document.addEventListener('click', handleClickOut);
@@ -60982,7 +60985,7 @@ class ColumnTool {
   }
 }
 
-const dom$h = new Dom();
+const dom$i = new Dom();
 class ELementStyleEditor {
   constructor(builder) {
     this.builder = builder;
@@ -61013,20 +61016,20 @@ class ELementStyleEditor {
                 </div>
             </div>           
             `;
-      dom$h.appendHtml(builderStuff, html);
+      dom$i.appendHtml(builderStuff, html);
       modalStyles = builderStuff.querySelector('.editstyles');
       let btn = modalStyles.querySelector('.is-modal-close');
-      dom$h.addEventListener(btn, 'click', () => {
-        dom$h.removeClass(modalStyles, 'active');
+      dom$i.addEventListener(btn, 'click', () => {
+        dom$i.removeClass(modalStyles, 'active');
         var panel = this.builderStuff.querySelector('.is-side.elementstyles'); // if all close
-        if (!dom$h.hasClass(panel, 'active')) {
+        if (!dom$i.hasClass(panel, 'active')) {
           let elms = document.querySelectorAll('[data-saveforundo]');
           Array.prototype.forEach.call(elms, elm => {
             elm.removeAttribute('data-saveforundo');
           });
           elms = document.querySelectorAll('.elm-inspected');
           Array.prototype.forEach.call(elms, elm => {
-            dom$h.removeClass(elm, 'elm-inspected');
+            dom$i.removeClass(elm, 'elm-inspected');
           });
         }
       });
@@ -61037,24 +61040,24 @@ class ELementStyleEditor {
 
         //builder classes
         let bElmActive = false;
-        if (dom$h.hasClass(elm, 'elm-active')) {
+        if (dom$i.hasClass(elm, 'elm-active')) {
           bElmActive = true;
         }
         let bCellActive = false;
-        if (dom$h.hasClass(elm, 'elm-active')) {
+        if (dom$i.hasClass(elm, 'elm-active')) {
           bCellActive = true;
         }
         let bRowActive = false;
-        if (dom$h.hasClass(elm, 'row-active')) {
+        if (dom$i.hasClass(elm, 'row-active')) {
           bRowActive = true;
         }
         elm.setAttribute('class', val); //update
 
         //builder classes
-        if (bElmActive) dom$h.addClass(elm, 'elm-active');
-        if (bCellActive) dom$h.addClass(elm, 'cell-active');
-        if (bRowActive) dom$h.addClass(elm, 'row-active');
-        dom$h.addClass(elm, 'elm-inspected');
+        if (bElmActive) dom$i.addClass(elm, 'elm-active');
+        if (bCellActive) dom$i.addClass(elm, 'cell-active');
+        if (bRowActive) dom$i.addClass(elm, 'row-active');
+        dom$i.addClass(elm, 'elm-inspected');
 
         //Trigger Change event
         this.builder.opts.onChange();
@@ -61070,10 +61073,10 @@ class ELementStyleEditor {
     this.modalStyles = modalStyles;
   }
   toggleStyleEditor() {
-    if (!dom$h.hasClass(this.modalStyles, 'active')) {
-      dom$h.addClass(this.modalStyles, 'active');
+    if (!dom$i.hasClass(this.modalStyles, 'active')) {
+      dom$i.addClass(this.modalStyles, 'active');
     } else {
-      dom$h.removeClass(this.modalStyles, 'active');
+      dom$i.removeClass(this.modalStyles, 'active');
     }
   }
   refresh() {
@@ -61090,7 +61093,7 @@ class ELementStyleEditor {
   }
 }
 
-const dom$g = new Dom();
+const dom$h = new Dom();
 class ElementGeneralStyles {
   constructor(builder) {
     this.builder = builder;
@@ -61166,7 +61169,7 @@ class ElementGeneralStyles {
 
 
         `;
-    dom$g.appendHtml(panelStuff, html);
+    dom$h.appendHtml(panelStuff, html);
 
     // Background color
     let btnElmBgColor = panelStuff.querySelector('.input-elm-bgcolor');
@@ -61216,7 +61219,7 @@ class ElementGeneralStyles {
 
     // Elm Background Image
     const btnElmBgImage = panelStuff.querySelector('.input-elm-bgimage');
-    if (btnElmBgImage) dom$g.addEventListener(btnElmBgImage, 'click', () => {
+    if (btnElmBgImage) dom$h.addEventListener(btnElmBgImage, 'click', () => {
       const elm = this.builder.inspectedElement;
 
       //Get current value
@@ -61254,12 +61257,12 @@ class ElementGeneralStyles {
 
     // Elm Background Image Adjust
     const btnImageAdjust = panelStuff.querySelector('.input-elm-bgimageadjust');
-    if (btnImageAdjust) dom$g.addEventListener(btnImageAdjust, 'click', () => {
+    if (btnImageAdjust) dom$h.addEventListener(btnImageAdjust, 'click', () => {
       const elm = this.builder.inspectedElement;
       this.builder.colTool.openImageAdjust(elm, btnImageAdjust);
     });
     const btnImageRemove = panelStuff.querySelector('.input-elm-bgremove');
-    if (btnImageRemove) dom$g.addEventListener(btnImageRemove, 'click', () => {
+    if (btnImageRemove) dom$h.addEventListener(btnImageRemove, 'click', () => {
       const elm = this.builder.inspectedElement;
       this.builder.uo.saveForUndo();
       elm.style.backgroundImage = '';
@@ -61460,7 +61463,7 @@ class ElementGeneralStyles {
   }
 }
 
-const dom$f = new Dom();
+const dom$g = new Dom();
 class ElementBoxStyles {
   constructor(builder) {
     this.builder = builder;
@@ -61572,7 +61575,7 @@ class ElementBoxStyles {
                     </div>
                 </div>
         `;
-    dom$f.appendHtml(panelStuff, html);
+    dom$g.appendHtml(panelStuff, html);
 
     // Others
     let inpElmMaxWidth = panelStuff.querySelector('#inpElmMaxWidth');
@@ -61913,7 +61916,7 @@ class ElementBoxStyles {
   }
 }
 
-const dom$e = new Dom();
+const dom$f = new Dom();
 class ElementSpacingStyles {
   constructor(builder) {
     this.builder = builder;
@@ -62054,7 +62057,7 @@ class ElementSpacingStyles {
                 </div>
             </div>
         `;
-    dom$e.appendHtml(panelStuff, html);
+    dom$f.appendHtml(panelStuff, html);
 
     // Margin
     let inpElmMarginLeft = panelStuff.querySelector('#inpElmMarginLeft');
@@ -62354,9 +62357,9 @@ class ElementSpacingStyles {
       this.builder.uo.saveForUndo();
       let elm = this.builder.inspectedElement;
       if (chkResetMarginLeft.checked) {
-        dom$e.addClass(elm, 'margin-left-1024-reset');
+        dom$f.addClass(elm, 'margin-left-1024-reset');
       } else {
-        dom$e.removeClass(elm, 'margin-left-1024-reset');
+        dom$f.removeClass(elm, 'margin-left-1024-reset');
       }
       elementStyleEditor.refresh();
 
@@ -62368,9 +62371,9 @@ class ElementSpacingStyles {
       this.builder.uo.saveForUndo();
       let elm = this.builder.inspectedElement;
       if (chkResetMarginRight.checked) {
-        dom$e.addClass(elm, 'margin-right-1024-reset');
+        dom$f.addClass(elm, 'margin-right-1024-reset');
       } else {
-        dom$e.removeClass(elm, 'margin-right-1024-reset');
+        dom$f.removeClass(elm, 'margin-right-1024-reset');
       }
       elementStyleEditor.refresh();
 
@@ -62519,12 +62522,12 @@ class ElementSpacingStyles {
     }
 
     // Responsive Positioning
-    if (dom$e.hasClass(elm, 'margin-left-1024-reset')) {
+    if (dom$f.hasClass(elm, 'margin-left-1024-reset')) {
       panelStuff.querySelector('#chkResetMarginLeft').checked = true;
     } else {
       panelStuff.querySelector('#chkResetMarginLeft').checked = false;
     }
-    if (dom$e.hasClass(elm, 'margin-right-1024-reset')) {
+    if (dom$f.hasClass(elm, 'margin-right-1024-reset')) {
       panelStuff.querySelector('#chkResetMarginRight').checked = true;
     } else {
       panelStuff.querySelector('#chkResetMarginRight').checked = false;
@@ -62532,7 +62535,7 @@ class ElementSpacingStyles {
   }
 }
 
-const dom$d = new Dom();
+const dom$e = new Dom();
 class ElementBorderStyles {
   constructor(builder) {
     this.builder = builder;
@@ -62652,7 +62655,7 @@ class ElementBorderStyles {
                     </div>
                 </div>                
         `;
-    dom$d.appendHtml(panelStuff, html);
+    dom$e.appendHtml(panelStuff, html);
 
     // Border color
     let btnElmBorderColor = panelStuff.querySelector('.input-elm-bordercolor');
@@ -63232,7 +63235,7 @@ class ElementBorderStyles {
   }
 }
 
-const dom$c = new Dom();
+const dom$d = new Dom();
 class ElementTextStyles {
   constructor(builder) {
     this.builder = builder;
@@ -63373,7 +63376,7 @@ class ElementTextStyles {
                 </div>
             </div>
         `;
-    dom$c.appendHtml(panelStuff, html);
+    dom$d.appendHtml(panelStuff, html);
     const htmlmodal = `
             <div class="is-modal pickfontfamily" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
                 <div class="is-modal-content">
@@ -63384,7 +63387,7 @@ class ElementTextStyles {
                 </div>
             </div>
         `;
-    dom$c.appendHtml(builderStuff, htmlmodal);
+    dom$d.appendHtml(builderStuff, htmlmodal);
     const fontModal = builderStuff.querySelector('.is-modal.pickfontfamily');
 
     // Text color
@@ -63493,8 +63496,8 @@ class ElementTextStyles {
       // Get current class size & remove all class size from the element
       const arrSizes = this.builder.opts.fontSizeClassValues;
       for (var i = 0; i <= arrSizes.length - 1; i++) {
-        if (dom$c.hasClass(elm, 'size-' + arrSizes[i])) {
-          dom$c.removeClass(elm, 'size-' + arrSizes[i]);
+        if (dom$d.hasClass(elm, 'size-' + arrSizes[i])) {
+          dom$d.removeClass(elm, 'size-' + arrSizes[i]);
         }
       }
       elementStyleEditor.refresh();
@@ -63636,9 +63639,9 @@ class ElementTextStyles {
             f = f.split(',')[0];
             f = f.trim().toLowerCase();
             if (f === fontname && f !== '') {
-              dom$c.addClass(e, 'on');
+              dom$d.addClass(e, 'on');
             } else {
-              dom$c.removeClass(e, 'on');
+              dom$d.removeClass(e, 'on');
             }
           });
 
@@ -63653,7 +63656,7 @@ class ElementTextStyles {
       } else {
         if (iframeDocument) {
           [].forEach.call(iframeDocument.querySelectorAll('#divFontList > li'), e => {
-            dom$c.removeClass(e, 'on');
+            dom$d.removeClass(e, 'on');
           });
         }
       }
@@ -63752,7 +63755,7 @@ class ElementTextStyles {
   }
 }
 
-const dom$b = new Dom();
+const dom$c = new Dom();
 class ElementCornerStyles {
   constructor(builder) {
     this.builder = builder;
@@ -63803,7 +63806,7 @@ class ElementCornerStyles {
                 </div>
             </div>
         `;
-    dom$b.appendHtml(panelStuff, html);
+    dom$c.appendHtml(panelStuff, html);
     const inpElmBorderRadius = panelStuff.querySelector('#inpElmBorderRadius');
     inpElmBorderRadius.addEventListener('click', () => {
       this.builder.uo.saveForUndo();
@@ -63930,7 +63933,7 @@ class ElementCornerStyles {
   }
 }
 
-const dom$a = new Dom();
+const dom$b = new Dom();
 class ElementShadowStyles {
   constructor(builder) {
     this.builder = builder;
@@ -64005,7 +64008,7 @@ class ElementShadowStyles {
                 </div>
             </div>
         `;
-    dom$a.appendHtml(panelStuff, html);
+    dom$b.appendHtml(panelStuff, html);
 
     // Shadow color
     let btnElmShadowColor = panelStuff.querySelector('.input-elm-shadowcolor');
@@ -64177,7 +64180,7 @@ class ElementShadowStyles {
   }
 }
 
-const dom$9 = new Dom();
+const dom$a = new Dom();
 class ElementDisplayStyles {
   constructor(builder) {
     this.builder = builder;
@@ -64274,7 +64277,7 @@ class ElementDisplayStyles {
                 </div>
             </div>
         `;
-    dom$9.appendHtml(panelStuff, html);
+    dom$a.appendHtml(panelStuff, html);
     const inpElmDisplay = panelStuff.querySelector('#inpElmDisplay');
     inpElmDisplay.addEventListener('change', () => {
       this.builder.uo.saveForUndo();
@@ -64371,7 +64374,7 @@ class ElementDisplayStyles {
   }
 }
 
-const dom$8 = new Dom();
+const dom$9 = new Dom();
 class ElementPositionStyles {
   constructor(builder) {
     this.builder = builder;
@@ -64465,7 +64468,7 @@ class ElementPositionStyles {
                 </div>
             </div>
         `;
-    dom$8.appendHtml(panelStuff, html);
+    dom$9.appendHtml(panelStuff, html);
     const inpElmPosition = panelStuff.querySelector('#inpElmPosition');
     inpElmPosition.addEventListener('change', () => {
       this.builder.uo.saveForUndo();
@@ -64694,7 +64697,7 @@ class ElementPositionStyles {
   }
 }
 
-const dom$7 = new Dom();
+const dom$8 = new Dom();
 class ElementEffectStyles {
   constructor(builder) {
     this.builder = builder;
@@ -64773,7 +64776,7 @@ class ElementEffectStyles {
                 </div>
             </div>
         `;
-    dom$7.appendHtml(panelStuff, html);
+    dom$8.appendHtml(panelStuff, html);
     const inpElmOpacity = panelStuff.querySelector('#inpElmOpacity');
     inpElmOpacity.addEventListener('click', () => {
       this.builder.uo.saveForUndo();
@@ -65191,7 +65194,7 @@ class ElementEffectStyles {
   }
 }
 
-const dom$6 = new Dom();
+const dom$7 = new Dom();
 class ElementAttributeStyles {
   constructor(builder) {
     this.builder = builder;
@@ -65266,7 +65269,7 @@ class ElementAttributeStyles {
                 </div>
             </div>
         `;
-    dom$6.appendHtml(panelStuff, html);
+    dom$7.appendHtml(panelStuff, html);
     let inps = panelStuff.querySelectorAll('#inpElmAttr1,#inpElmAttr2,#inpElmAttr3,#inpElmAttr4,#inpElmAttr5,#inpElmAttrVal1,#inpElmAttrVal2,#inpElmAttrVal3,#inpElmAttrVal4,#inpElmAttrVal5');
     Array.prototype.forEach.call(inps, inp => {
       inp.addEventListener('click', () => {
@@ -65331,7 +65334,7 @@ class ElementAttributeStyles {
   }
 }
 
-const dom$5 = new Dom();
+const dom$6 = new Dom();
 class ElementMoreStyles {
   constructor(builder) {
     this.builder = builder;
@@ -65358,7 +65361,7 @@ class ElementMoreStyles {
             </div>
 
         `;
-    dom$5.appendHtml(panelStuff, html);
+    dom$6.appendHtml(panelStuff, html);
     const inpElmId = panelStuff.querySelector('#inpElmId');
     inpElmId.addEventListener('change', () => {
       let elm = this.builder.inspectedElement;
@@ -65414,7 +65417,7 @@ class ElementMoreStyles {
   }
 }
 
-const dom$4 = new Dom();
+const dom$5 = new Dom();
 class ElementAnimationStyles {
   constructor(builder) {
     this.builder = builder;
@@ -65554,7 +65557,7 @@ class ElementAnimationStyles {
                 </div>
             </div>
         `;
-    dom$4.appendHtml(panelStuff, html);
+    dom$5.appendHtml(panelStuff, html);
     let inp = panelStuff.querySelector('#selElmAnim');
     inp.addEventListener('change', () => {
       this.builder.uo.saveForUndo();
@@ -65621,8 +65624,8 @@ class ElementAnimationStyles {
       if (window.AOS) window.AOS.init({
         duration: 1
       });
-      dom$4.removeClass(elm, 'aos-init');
-      dom$4.removeClass(elm, 'aos-animate');
+      dom$5.removeClass(elm, 'aos-init');
+      dom$5.removeClass(elm, 'aos-animate');
       setTimeout(function () {
         elm.style.visibility = '';
         if (window.AOS) window.AOS.init({
@@ -65654,7 +65657,7 @@ class ElementAnimationStyles {
   }
 }
 
-const dom$3 = new Dom();
+const dom$4 = new Dom();
 let arrElms = [];
 class ElementPanel {
   constructor(builder) {
@@ -65738,15 +65741,15 @@ class ElementPanel {
                     </div>
             </div>              
             `;
-      dom$3.appendHtml(builderStuff, html);
+      dom$4.appendHtml(builderStuff, html);
       this.elementStyleEditor = new ELementStyleEditor(builder);
       panel = builderStuff.querySelector('.elementstyles');
       let btn = panel.querySelector('.is-side-close');
-      dom$3.addEventListener(btn, 'click', () => {
+      dom$4.addEventListener(btn, 'click', () => {
         this.hidePanel();
       });
       btn = panel.querySelector('.elm-editstyle');
-      dom$3.addEventListener(btn, 'click', () => {
+      dom$4.addEventListener(btn, 'click', () => {
         this.elementStyleEditor.toggleStyleEditor();
       });
     }
@@ -65779,7 +65782,7 @@ class ElementPanel {
     this.elementAnimationStyles = elementAnimationStyles;
   }
   click() {
-    if (dom$3.hasClass(this.panel, 'active') || dom$3.hasClass(this.elementStyleEditor.modalStyles, 'active')) {
+    if (dom$4.hasClass(this.panel, 'active') || dom$4.hasClass(this.elementStyleEditor.modalStyles, 'active')) {
       this.inspect(this.builder.inspectedElement);
     }
   }
@@ -65805,16 +65808,16 @@ class ElementPanel {
     elm.setAttribute('data-saveforundo', '');
     elms = this.builder.doc.querySelectorAll('.elm-inspected');
     Array.prototype.forEach.call(elms, elm => {
-      dom$3.removeClass(elm, 'elm-inspected');
+      dom$4.removeClass(elm, 'elm-inspected');
     });
     setTimeout(() => {
-      dom$3.addClass(elm, 'elm-inspected');
+      dom$4.addClass(elm, 'elm-inspected');
     }, 10);
     panel.querySelector('.elm-list').innerHTML = '';
     let element = elm;
     let i = 0;
     arrElms = [];
-    while (!dom$3.hasClass(element, 'is-builder')) {
+    while (!dom$4.hasClass(element, 'is-builder')) {
       arrElms.push(element);
       if (!element) {
         // This should not happen. But on quick user click (ex. undo then redo quickly), an element can lost, so checking is needed
@@ -65824,13 +65827,13 @@ class ElementPanel {
         break;
       }
       var tagName = element.tagName.toLowerCase();
-      var a = dom$3.createElement('a');
+      var a = dom$4.createElement('a');
       a.setAttribute('data-index', i);
       i++;
       a.setAttribute('href', '#');
       a.innerHTML = tagName;
       if (panel.querySelector('.elm-list').innerHTML === '') {
-        dom$3.addClass(a, 'active');
+        dom$4.addClass(a, 'active');
         panel.querySelector('.elm-list').insertAdjacentHTML('afterbegin', a.outerHTML);
       } else {
         panel.querySelector('.elm-list').insertAdjacentHTML('afterbegin', '&nbsp;>&nbsp; ');
@@ -65840,7 +65843,7 @@ class ElementPanel {
     }
     const links = panel.querySelectorAll('.elm-list a');
     Array.prototype.forEach.call(links, link => {
-      dom$3.addEventListener(link, 'click', e => {
+      dom$4.addEventListener(link, 'click', e => {
         let index = link.getAttribute('data-index');
         this.builder.inspectedElement = arrElms[index];
         this.inspect(arrElms[index]);
@@ -65861,10 +65864,10 @@ class ElementPanel {
 
     let panels = this.builderStuff.querySelectorAll('.is-side');
     Array.prototype.forEach.call(panels, panel => {
-      dom$3.removeClass(panel, 'active');
+      dom$4.removeClass(panel, 'active');
     });
     setTimeout(() => {
-      dom$3.addClass(panel, 'active'); // add 10ms delay after display is set 'block' for visible animation
+      dom$4.addClass(panel, 'active'); // add 10ms delay after display is set 'block' for visible animation
 
       // Focus
       let content = panel.querySelector('.is-tab-content.active');
@@ -65882,14 +65885,14 @@ class ElementPanel {
   }
   hidePanel() {
     var panel = this.builderStuff.querySelector('.is-side.elementstyles');
-    dom$3.removeClass(panel, 'active');
+    dom$4.removeClass(panel, 'active');
     let elms = this.builder.doc.querySelectorAll('[data-saveforundo]');
     Array.prototype.forEach.call(elms, elm => {
       elm.removeAttribute('data-saveforundo');
     });
     elms = this.builder.doc.querySelectorAll('.elm-inspected');
     Array.prototype.forEach.call(elms, elm => {
-      dom$3.removeClass(elm, 'elm-inspected');
+      dom$4.removeClass(elm, 'elm-inspected');
     });
   }
 }
@@ -67292,7 +67295,7 @@ class Preferences {
   }
 }
 
-const dom$2 = new Dom();
+const dom$3 = new Dom();
 class ColorClassPicker {
   constructor(opts = {}, mode) {
     let defaults = {
@@ -67425,7 +67428,7 @@ class ColorClassPicker {
     this.showColorGradient('gray');
     let btns = document.querySelectorAll('.base-color');
     Array.prototype.forEach.call(btns, btn => {
-      dom$2.addEventListener(btn, 'click', () => {
+      dom$3.addEventListener(btn, 'click', () => {
         const base = btn.getAttribute('data-base');
         this.showColorGradient(base);
         let val = btn.getAttribute('data-value');
@@ -67435,7 +67438,7 @@ class ColorClassPicker {
     });
     btns = document.querySelectorAll('.quick-color');
     Array.prototype.forEach.call(btns, btn => {
-      dom$2.addEventListener(btn, 'click', e => {
+      dom$3.addEventListener(btn, 'click', e => {
         e.preventDefault();
         let val = btn.getAttribute('data-value');
         if (this.mode === 'text') val = val.replace('bg-', 'text-');
@@ -67456,7 +67459,7 @@ class ColorClassPicker {
     divDetails.innerHTML = s;
     const btns = document.querySelectorAll('.detail-color');
     Array.prototype.forEach.call(btns, btn => {
-      dom$2.addEventListener(btn, 'click', () => {
+      dom$3.addEventListener(btn, 'click', () => {
         let val = btn.getAttribute('data-value');
         if (this.mode === 'text') val = val.replace('bg-', 'text-');
         this.opts.onPick(val);
@@ -72858,7 +72861,7 @@ class SaveImages {
   }
 }
 
-const dom$1 = new Dom();
+const dom$2 = new Dom();
 class Tooltip {
   constructor(builder) {
     this.builder = builder;
@@ -72869,7 +72872,7 @@ class Tooltip {
     let tooltip = builderStuff.querySelector('.is-tooltip');
     if (!tooltip) {
       let html = '<div class="is-tooltip"></div>';
-      dom$1.appendHtml(builderStuff, html);
+      dom$2.appendHtml(builderStuff, html);
       tooltip = builderStuff.querySelector('.is-tooltip');
     }
     this.tooltip = tooltip;
@@ -73797,7 +73800,7 @@ class ShortcutInfo {
   }
 }
 
-const dom = new Dom();
+const dom$1 = new Dom();
 class Tabs {
   constructor() {
     // Close all dropdown
@@ -73832,7 +73835,7 @@ class Tabs {
         }
         return false;
       }
-      if (dom.hasClass(tab, 'active')) {
+      if (dom$1.hasClass(tab, 'active')) {
         return false;
       }
       const id = tab.getAttribute('data-content');
@@ -73843,21 +73846,21 @@ class Tabs {
       // Highlight selected
       let samegrouptabs = document.querySelectorAll('.is-tabs[data-group="' + group + '"] > a');
       Array.prototype.forEach.call(samegrouptabs, samegrouptab => {
-        dom.removeClass(samegrouptab, 'active');
+        dom$1.removeClass(samegrouptab, 'active');
       });
       samegrouptabs = document.querySelectorAll('.is-tabs-more[data-group="' + group + '"] > li');
       Array.prototype.forEach.call(samegrouptabs, samegrouptab => {
-        dom.removeClass(samegrouptab, 'active');
+        dom$1.removeClass(samegrouptab, 'active');
       });
-      dom.addClass(tab, 'active');
+      dom$1.addClass(tab, 'active');
       let samegroupcontents = document.querySelectorAll('.is-tab-content[data-group="' + group + '"]');
       Array.prototype.forEach.call(samegroupcontents, samegroupcontent => {
         samegroupcontent.style.display = 'none';
-        dom.removeClass(samegroupcontent, 'active');
+        dom$1.removeClass(samegroupcontent, 'active');
       });
       const content = document.querySelector('#' + id);
       content.style.display = 'flex';
-      dom.addClass(content, 'active');
+      dom$1.addClass(content, 'active');
       document.querySelector('.is-tabs-more').style.display = 'none';
 
       // Close all dropdown
@@ -76346,6 +76349,1579 @@ class LivePreview {
   }
 }
 
+// Collection of common editing functions
+
+class Lib {
+  constructor(builder) {
+    this.builder = builder;
+  }
+
+  // Get complete/outer HTML of an element;
+  getHtml(element) {
+    const combineStrings = (outer, inner) => {
+      // Find the opening tag of the first/parent element
+      const openingTagRegex = /<([a-zA-Z]+\b[^>]*)>/;
+      const openingTagMatch = outer.match(openingTagRegex);
+      const openingTag = openingTagMatch[1];
+      const combinedResult = `<${openingTag}>${inner}</div>`;
+      return combinedResult;
+    };
+    let html = combineStrings(element.outerHTML, this.builder.readHtml(element, false, true));
+    return html;
+  }
+
+  // Run functions based on short command
+  processShortCommand(command) {
+    let shortCommandList = {
+      undo: ['undo'],
+      redo: ['undo'],
+      increase: ['increase', 'bigger', 'larger', 'enlarge'],
+      decrease: ['decrease', 'smaller'],
+      bold: ['bold'],
+      italic: ['italic'],
+      underline: ['underline'],
+      strikethrough: ['strikethrough'],
+      superscript: ['superscript'],
+      subscript: ['subscript'],
+      uppercase: ['uppercase'],
+      lowercase: ['lowercase'],
+      capitalize: ['capitalize'],
+      clean: ['clean']
+    };
+    if (this.builder.shortCommandList) shortCommandList = this.builder.shortCommandList;
+    const getMatchingCommand = command => {
+      for (const key in shortCommandList) {
+        if (shortCommandList[key].includes(command)) {
+          return key;
+        }
+      }
+      return false;
+    };
+    const intent = getMatchingCommand(command);
+
+    // Undo/Redo
+    if (intent === 'undo') {
+      this.builder.undo();
+      return false;
+    }
+    if (intent === 'redo') {
+      this.builder.redo();
+      return false;
+    }
+
+    // The process below needs active element
+    let elm = this.builder.activeElement;
+    if (!elm) return command;
+
+    // Size
+    const isTextBlockElement = element => {
+      const textBlockTags = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P', 'PRE'];
+      const tagName = element.tagName.toUpperCase();
+      return textBlockTags.includes(tagName);
+    };
+    if (intent === 'increase') {
+      if (elm.classList.contains('spacer')) {
+        this.builder.saveForUndo();
+        this.builder.lib.increaseElementHeight(elm);
+        return false;
+      } else if (isTextBlockElement(elm)) {
+        this.builder.saveForUndo();
+        this.builder.lib.increaseFontSize(elm);
+        return false;
+      }
+    }
+    if (intent === 'decrease') {
+      if (elm.classList.contains('spacer')) {
+        this.builder.saveForUndo();
+        this.builder.lib.decreaseElementHeight(elm);
+        return false;
+      } else if (isTextBlockElement(elm)) {
+        this.builder.saveForUndo();
+        this.builder.lib.decreaseFontSize(elm);
+        return false;
+      }
+    }
+
+    // Text
+    const formatText = s => {
+      this.builder.saveForUndo();
+      this.builder.util.restoreSelection();
+      this.builder.formatTextNonToggle(s);
+      this.builder.util.saveSelection();
+    };
+    if (intent === 'bold') {
+      formatText('bold');
+      return false;
+    }
+    if (intent === 'italic') {
+      formatText('italic');
+      return false;
+    }
+    if (intent === 'underline') {
+      formatText('underline');
+      return false;
+    }
+    if (intent === 'strikethrough') {
+      formatText('strikethrough');
+      return false;
+    }
+    if (intent === 'superscript') {
+      formatText('superscript');
+      return false;
+    }
+    if (intent === 'subscript') {
+      formatText('subscript');
+      return false;
+    }
+    if (intent === 'uppercase') {
+      formatText('uppercase');
+      return false;
+    }
+    if (intent === 'lowercase') {
+      formatText('lowercase');
+      return false;
+    }
+    if (intent === 'capitalize') {
+      formatText('capitalize');
+      return false;
+    }
+    if (intent === 'clean') {
+      formatText('clean');
+      return false;
+    }
+    return command;
+  }
+  getCurrentBackground(activeBox) {
+    let currentImage = '';
+    const overlayBgs = activeBox.querySelectorAll('.is-overlay-bg');
+    overlayBgs.forEach(overlayBg => {
+      if (overlayBg.style.backgroundImage) {
+        if (overlayBg.style.backgroundImage.indexOf('url(') !== -1) {
+          let url = overlayBg.style.backgroundImage.slice(4, -1).replace(/["']/g, '');
+          // let filename = url.substring(url.lastIndexOf('/') + 1);
+          if (currentImage !== '') currentImage = ', ';
+          // currentImage+= `${filename}`;
+          currentImage += `${url}`;
+        }
+      }
+    });
+    return currentImage;
+  }
+  clearBackgroundColor(activeBox) {
+    let overlayBg = activeBox.querySelector('.is-overlay');
+    if (overlayBg) {
+      overlayBg.style.backgroundColor = '';
+    }
+  }
+  clearBackgroundImage(activeBox) {
+    let overlayBg = activeBox.querySelector('.is-overlay-bg');
+    if (overlayBg) {
+      overlayBg.parentNode.removeChild(overlayBg);
+    }
+  }
+  updateBackgroundImage(activeBox, url) {
+    let overlay = activeBox.querySelector('.is-overlay');
+    if (!overlay) {
+      activeBox.insertAdjacentHTML('afterbegin', '<div class="is-overlay"></div>');
+      overlay = activeBox.querySelector('.is-overlay');
+    }
+    if (activeBox.classList.contains('is-section')) {
+      if (activeBox.classList.contains('min-height-20') || activeBox.classList.contains('min-height-25') || activeBox.classList.contains('min-height-30') || activeBox.classList.contains('min-height-40') || activeBox.classList.contains('min-height-50') || activeBox.classList.contains('min-height-60') || activeBox.classList.contains('min-height-70') || activeBox.classList.contains('min-height-75') || activeBox.classList.contains('min-height-80') || activeBox.classList.contains('min-height-90') || activeBox.classList.contains('min-height-100')) ; else {
+        activeBox.classList.add('min-height-60');
+      }
+    }
+    let overlayBg = overlay.querySelector('.is-overlay-bg');
+    if (!overlayBg) {
+      overlay.insertAdjacentHTML('beforeend', '<div class="is-overlay-bg"></div>');
+      overlayBg = overlay.querySelector('.is-overlay-bg');
+    }
+    overlayBg.style.backgroundImage = 'url(\'' + url + '\')';
+    overlayBg.style.backgroundPosition = 50 + '%' + ' ' + 60 + '%'; //default
+
+    // Reset position & filter (grayscale)
+    overlayBg.style.filter = '';
+    overlay.style.filter = '';
+  }
+  moveContent(activeBox, val) {
+    const container = activeBox.querySelector('.is-container');
+    if (val === 'left' || val === 'center' || val === 'right') {
+      container.classList.remove('is-content-left');
+      container.classList.remove('is-content-right');
+      container.classList.remove('edge-x--1');
+      container.classList.remove('edge-x--0-75');
+      container.classList.remove('edge-x--0-5');
+      container.classList.remove('edge-x--0-25');
+      container.classList.remove('edge-x-0');
+      container.classList.remove('edge-x-0-25');
+      container.classList.remove('edge-x-0-5');
+      container.classList.remove('edge-x-0-75');
+      container.classList.remove('edge-x-1');
+      container.classList.remove('edge-x-2');
+      container.classList.remove('edge-x-3');
+      container.classList.remove('edge-x-4');
+      container.classList.remove('edge-x-5');
+      container.classList.remove('edge-x-6');
+    }
+    if (val === 'left') {
+      container.classList.add('is-content-left');
+      container.classList.add('edge-x-2');
+    }
+    if (val === 'right') {
+      container.classList.add('is-content-right');
+      container.classList.add('edge-x-2');
+    }
+    if (val === 'top' || val === 'middle' || val === 'bottom') {
+      activeBox.classList.remove('is-content-top');
+      activeBox.classList.remove('is-content-bottom');
+      activeBox.classList.remove('edge-y--5');
+      activeBox.classList.remove('edge-y--4');
+      activeBox.classList.remove('edge-y--3');
+      activeBox.classList.remove('edge-y--2');
+      activeBox.classList.remove('edge-y--1');
+      activeBox.classList.remove('edge-y-0');
+      activeBox.classList.remove('edge-y-0-25');
+      activeBox.classList.remove('edge-y-0-5');
+      activeBox.classList.remove('edge-y-0-75');
+      activeBox.classList.remove('edge-y-1');
+      activeBox.classList.remove('edge-y-2');
+      activeBox.classList.remove('edge-y-3');
+      activeBox.classList.remove('edge-y-4');
+      activeBox.classList.remove('edge-y-5');
+      activeBox.classList.remove('edge-y-6');
+      activeBox.classList.remove('edge-y-7');
+      activeBox.classList.remove('edge-y-8');
+    }
+    if (val === 'top') {
+      activeBox.classList.add('is-content-top');
+      activeBox.classList.add('edge-y-2');
+    }
+    if (val === 'bottom') {
+      activeBox.classList.add('is-content-bottom');
+      activeBox.classList.add('edge-y-2');
+    }
+  }
+  updateContentSize(activeBox, val) {
+    const container = activeBox.querySelector('.is-container');
+    // const contentSizes = this.builder.contentSizes;
+    const contentSizes = [300, 320, 360, 400, 440, 480, 520, 560, 600, 640, 680, 720, 760, 800, 840, 880, 920, 960, 1000, 1040, 1080, 1120, 1160, 1200, 1240, 1280, 1320, 1360, 1400, 1440, 1480, 1520, 1560, 1600, 1640, 1680, 1720, 1760, 1800, 1840, 1880, 1920, 1960, 2000, 2040, 2080, 2120, 2160, 2200, 2240, 2280, 2320, 2360, 2400, 2440, 2480, 2520, 2560, 2600, 2640, 2680, 2700];
+    if (val === '') {
+      container.style.maxWidth = '';
+      container.classList.forEach(item => {
+        if (item.indexOf('is-content-') !== -1 && item !== 'is-content-left' && item !== 'is-content-right') {
+          container.classList.remove(item);
+        }
+      });
+      container.classList.add('is-content-none');
+      return;
+    }
+    let targetWidth;
+    for (let i = 0; i < contentSizes.length; i++) {
+      if (container.classList.contains(`is-content-${contentSizes[i]}`)) {
+        if (val === '+') {
+          if (i + 1 >= contentSizes.length) {
+            targetWidth = contentSizes[i];
+          } else {
+            targetWidth = contentSizes[i + 1];
+          }
+          break;
+        }
+        if (val === '-') {
+          if (i - 1 < 0) {
+            targetWidth = contentSizes[i];
+          } else {
+            targetWidth = contentSizes[i - 1];
+          }
+          break;
+        }
+      }
+    }
+    if (!targetWidth) {
+      const currentWidth = container.offsetWidth;
+      // let targetWidth;
+
+      for (let i = 0; i < contentSizes.length; i++) {
+        if (contentSizes[i] <= currentWidth && currentWidth < contentSizes[i + 1]) {
+          if (val === '+') {
+            targetWidth = contentSizes[i + 1];
+            break;
+          }
+        }
+        if (contentSizes[i] < currentWidth && currentWidth <= contentSizes[i + 1]) {
+          if (val === '-') {
+            targetWidth = contentSizes[i];
+            break;
+          }
+        }
+      }
+    }
+    if (!targetWidth) targetWidth = 800;
+    container.style.maxWidth = ''; //remove inline style
+
+    container.classList.forEach(item => {
+      if (item.indexOf('is-content-') !== -1 && item !== 'is-content-left' && item !== 'is-content-right') {
+        container.classList.remove(item);
+      }
+    });
+    container.classList.add('is-content-' + targetWidth);
+  }
+  updateContentColor(activeBox, val) {
+    if (val == 'light') {
+      activeBox.classList.remove('is-dark-text');
+      activeBox.classList.add('is-light-text');
+    }
+    if (val == 'dark') {
+      activeBox.classList.remove('is-light-text');
+      activeBox.classList.add('is-dark-text');
+    }
+    if (val == '') {
+      activeBox.classList.remove('is-light-text');
+      activeBox.classList.remove('is-dark-text');
+    }
+  }
+  chooseHeadline() {
+    let list = ['We create simple and effective designs.', 'Ultimate Experiences With Story, Emotion, And Purpose.', 'Build Anything Beautifully', 'With Less Stuff and More Compassion', 'We\'re [CompanyName]. Full stack development with a spark of creativity.', 'Transforming your digital experience with [CompanyName]. Achieve your online goals with our customized solutions.', 'Revolutionizing web development with [CompanyName]. Unleash your digital potential with our high-performance solutions.', 'Creative and Inspiring'];
+    if (this.builder.headlineList) list = this.builder.headlineList;
+    let randomIndex = Math.floor(Math.random() * list.length);
+    return list[randomIndex];
+  }
+  _addBlock(activeBox, html, pos) {
+    /*
+     let bSnippet = false;
+    let attr;
+    
+    if(activeBox.querySelector('.cell-active')) {
+         // This is needed before calling addSnippet()
+        const builderStuff = this.builder.builderStuff;
+        let quickadd = builderStuff.querySelector('.quickadd');
+        quickadd.setAttribute('data-mode','row');
+        // ----
+         if(html!=='') this.builder.addSnippet(html, bSnippet);
+        return;
+    } 
+    */
+
+    let container = activeBox.querySelector('.is-container');
+    if (activeBox.classList.contains('is-container')) container = activeBox;
+    let row;
+    if (activeBox.querySelector('.row-active')) {
+      row = activeBox.querySelector('.row-active');
+    } else {
+      const rows = this.builder.dom.elementChildren(container);
+      row = rows[rows.length - 1]; // last row
+    }
+
+    let rowElement, cellElement;
+    if (this.builder.opts.row === '') {
+      rowElement = this.htmlToElement(this.builder.opts.rowFormat);
+      let s = this.builder.opts.cellFormat;
+      let pos = s.indexOf('</');
+      html = s.substring(0, pos) + html + s.substring(pos);
+
+      // go to last deeper level
+      let targetrow = this.builder.dom.elementChildren(rowElement);
+      while (targetrow.length > 0) {
+        targetrow = targetrow[0];
+        if (this.builder.dom.elementChildren(targetrow).length > 0) {
+          targetrow = this.builder.dom.elementChildren(targetrow);
+        } else {
+          break;
+        }
+      }
+      targetrow.innerHTML = html;
+      cellElement = targetrow.firstChild;
+      // if(attr) {
+      //     cellElement.setAttribute(attr,'');
+      // }
+    } else {
+      cellElement = document.createElement('div');
+      cellElement.classList.add(this.builder.opts.cols[this.builder.opts.cols.length - 1]);
+      cellElement.innerHTML = html;
+
+      // if(attr) {
+      //     cellElement.setAttribute(attr,'');
+      // }
+
+      rowElement = document.createElement('div');
+      rowElement.classList.add(this.builder.opts.row);
+      rowElement.appendChild(cellElement);
+    }
+    row.parentNode.insertBefore(rowElement, row);
+    if (pos === 'after') this.builder.dom.moveAfter(rowElement, row);
+    this.builder.applyBehaviorOn(container);
+    cellElement.click();
+  }
+  addBlock(activeBox, val, pos) {
+    let html = '';
+    // let bSnippet = true;
+
+    if (val === 'headline') {
+      html = `
+            <h1 class="font-normal leading-11 size-54">${this.chooseHeadline()}</h1>
+            `;
+    }
+    if (val === 'paragraph') {
+      html = `
+            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+        when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
+            `;
+    }
+    if (val === 'image') {
+      html = `<img src="${this.builder.opts.snippetPath}example.png" alt="" />`;
+      if (this.builder.opts.snippetSampleImage) {
+        html = `<img src="${this.builder.opts.snippetSampleImage}" alt="" />`;
+      }
+    }
+    if (val === 'space') {
+      html = '<div class="spacer height-40"></div>';
+    }
+    if (val === 'button') {
+      html = `
+            <div>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Read More</a>
+            </div>
+            `;
+    }
+    if (val === 'twobuttons') {
+      html = `
+            <div>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Read More</a>
+                <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 border-current hover:border-current font-normal leading-14 rounded tracking-wide">Get Started</a>
+            </div>
+            `;
+    }
+    if (val === 'icon') {
+      html = `
+            <div class="text-center">
+                <i class="icon ion-android-alarm-clock size-80"></i>
+            </div>
+            `;
+    }
+    if (val === 'youtube') {
+      html = `
+            <div class="embed-responsive embed-responsive-16by9">
+                <iframe width="560" height="315" src="https://www.youtube.com/embed/P5yHEKqx86U?rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
+            </div>
+            `;
+    }
+    if (val === 'video') {
+      html = `<video style="width: 100%;" loop="" autoplay="">
+                <source src="${this.builder.opts.snippetPath}example.mp4" type="video/mp4"></video>`;
+      if (this.builder.opts.snippetSampleVideo) {
+        html = `<video style="width: 100%;" loop="" autoplay="">
+                    <source src="${this.builder.opts.snippetSampleVideo}" type="video/mp4"></video>`;
+      }
+    }
+    if (val === 'audio') {
+      html = `<div style="display:flex;width:100%;position:relative;margin:15px 0;background:transparent;">
+                    <audio controls="" style="width:100%">
+                        <source src="${this.builder.opts.snippetPath}example.mp3" type="audio/mpeg">
+                        Your browser does not support the audio element.
+                    </audio>
+                </div>`;
+      if (this.builder.opts.snippetSampleAudio) {
+        html = `<div style="display:flex;width:100%;position:relative;margin:15px 0;background:transparent;">
+                        <audio controls="" style="width:100%">
+                            <source src="${this.builder.opts.snippetSampleAudio}" type="audio/mpeg">
+                            Your browser does not support the audio element.
+                        </audio>
+                </div>`;
+      }
+    }
+    if (val === 'map') {
+      html = `<div class="embed-responsive embed-responsive-16by9">
+            <iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" class="mg1" src="https://maps.google.com/maps?q=Melbourne,+Victoria,+Australia&amp;hl=en&amp;sll=-7.981898,112.626504&amp;sspn=0.009084,0.016512&amp;oq=melbourne&amp;hnear=Melbourne+Victoria,+Australia&amp;t=m&amp;z=10&amp;output=embed"></iframe>
+            </div>`;
+    }
+    if (val === 'social') {
+      html = `<div class="is-social" style="text-align: center;">
+                <a href="https://twitter.com/"><i class="icon ion-social-twitter" style="margin-right: 1em"></i></a>
+                <a href="https://www.facebook.com/"><i class="icon ion-social-facebook" style="margin-right: 1em"></i></a>
+                <a href="mailto:you@example.com"><i class="icon ion-android-drafts"></i></a>
+            </div>`;
+    }
+    if (val === 'table') {
+      html = `<table class="default" style="border-collapse:collapse;width:100%;">
+                <thead>
+                <tr>
+                    <td style="vertical-align:top;"><br></td>
+                    <td style="vertical-align:top;"><br></td>
+                </tr>
+                </thead>
+                <tr>
+                    <td style="vertical-align:top;"><br></td>
+                    <td style="vertical-align:top;"><br></td>
+                </tr>
+            </table>`;
+    }
+    this._addBlock(activeBox, html, pos);
+  }
+  alignContent(activeBox, command) {
+    activeBox.classList.remove('is-align-left');
+    activeBox.classList.remove('is-align-center');
+    activeBox.classList.remove('is-align-right');
+    activeBox.classList.remove('is-align-justify');
+    if (command === 'left') activeBox.classList.add('is-align-left');
+    if (command === 'center') activeBox.classList.add('is-align-center');
+    if (command === 'right') activeBox.classList.add('is-align-right');
+    if (command === 'justify') activeBox.classList.add('is-align-justify');
+    let elms = activeBox.querySelectorAll('.is-builder > div > div, .is-builder > div > div > *');
+    elms.forEach(elm => {
+      if (elm.closest('.is-section-tool') || elm.closest('.is-box-tool') || elm.closest('.is-tool') || elm.closest('.is-rowadd-tool')) return;
+      elm.style.textAlign = '';
+      elm.classList.remove('left');
+      elm.classList.remove('right');
+      elm.classList.remove('center');
+      elm.classList.remove(this.builder.cssClasses.textAlign.left);
+      elm.classList.remove(this.builder.cssClasses.textAlign.center);
+      elm.classList.remove(this.builder.cssClasses.textAlign.right);
+      elm.classList.remove(this.builder.cssClasses.textAlign.justify);
+      this.builder.dom.doFunction(elm, theEl => {
+        if (theEl.closest('.is-section-tool') || theEl.closest('.is-box-tool') || theEl.closest('.is-tool') || theEl.closest('.is-rowadd-tool')) return;
+        theEl.style.textAlign = '';
+        elm.classList.remove('left');
+        elm.classList.remove('right');
+        elm.classList.remove('center');
+        elm.classList.remove(this.builder.cssClasses.textAlign.left);
+        elm.classList.remove(this.builder.cssClasses.textAlign.center);
+        elm.classList.remove(this.builder.cssClasses.textAlign.right);
+        elm.classList.remove(this.builder.cssClasses.textAlign.justify);
+      }, true);
+    });
+  }
+  alignText(element, command) {
+    if (this.builder.useCssClasses) {
+      element.style.textAlign = '';
+      element.classList.remove(this.builder.cssClasses.textAlign.left);
+      element.classList.remove(this.builder.cssClasses.textAlign.center);
+      element.classList.remove(this.builder.cssClasses.textAlign.right);
+      element.classList.remove(this.builder.cssClasses.textAlign.justify);
+      if (command === 'left') element.classList.add(this.builder.cssClasses.textAlign.left);
+      if (command === 'center') element.classList.add(this.builder.cssClasses.textAlign.center);
+      if (command === 'right') element.classList.add(this.builder.cssClasses.textAlign.right);
+      if (command === 'justify') element.classList.add(this.builder.cssClasses.textAlign.justify);
+    } else {
+      element.style.textAlign = command;
+    }
+  }
+  increaseLineHeight(element, isContainer) {
+    let lineHeightClasses = Object.values(this.builder.cssClasses.leading);
+    if (isContainer) {
+      const classList = this.builder.cssClasses.leading;
+      lineHeightClasses = [classList.leading_10, classList.leading_11, classList.leading_12, classList.leading_13, classList.leading_14, 'leading-15', classList.leading_16, classList.leading_17, classList.leading_18, classList.leading_19, 'leading-20'];
+    }
+    const currentClass = this.getCurrentLineHeightClass(element, isContainer);
+    const currentIndex = lineHeightClasses.indexOf(currentClass);
+    if (currentIndex !== -1 && currentIndex < lineHeightClasses.length - 1) {
+      const newClass = lineHeightClasses[currentIndex + 1];
+      element.classList.remove(currentClass);
+      element.classList.add(newClass);
+    }
+  }
+  decreaseLineHeight(element, isContainer) {
+    let lineHeightClasses = Object.values(this.builder.cssClasses.leading);
+    if (isContainer) {
+      const classList = this.builder.cssClasses.leading;
+      lineHeightClasses = [classList.leading_10, classList.leading_11, classList.leading_12, classList.leading_13, classList.leading_14, 'leading-15', classList.leading_16, classList.leading_17, classList.leading_18, classList.leading_19, 'leading-20'];
+    }
+    const currentClass = this.getCurrentLineHeightClass(element, isContainer);
+    const currentIndex = lineHeightClasses.indexOf(currentClass);
+    if (currentIndex !== -1 && currentIndex > 0) {
+      const newClass = lineHeightClasses[currentIndex - 1];
+      element.classList.remove(currentClass);
+      element.classList.add(newClass);
+    }
+  }
+  getCurrentLineHeightClass(element, isContainer) {
+    const classes = element.classList;
+    for (let i = 0; i < classes.length; i++) {
+      const classValue = classes[i];
+      if (classValue.startsWith('leading-')) {
+        return classValue;
+      }
+    }
+    const computedStyle = window.getComputedStyle(element);
+    let lineHeight = parseFloat(computedStyle.lineHeight);
+    let fontSize = parseFloat(computedStyle.fontSize);
+    let currentClassName = '';
+    lineHeight = (lineHeight / fontSize).toFixed(1);
+    const classList = this.builder.cssClasses.leading;
+    if (isContainer) {
+      if (lineHeight === '1') {
+        currentClassName = classList.leading_10;
+      } else if (lineHeight === '1.1') {
+        currentClassName = classList.leading_11;
+      } else if (lineHeight === '1.2') {
+        currentClassName = classList.leading_12;
+      } else if (lineHeight === '1.3') {
+        currentClassName = classList.leading_13;
+      } else if (lineHeight === '1.4') {
+        currentClassName = classList.leading_14;
+      } else if (lineHeight === '1.5') {
+        currentClassName = 'leading-15';
+      } else if (lineHeight === '1.6') {
+        currentClassName = classList.leading_16;
+      } else if (lineHeight === '1.7') {
+        currentClassName = classList.leading_17;
+      } else if (lineHeight === '1.8') {
+        currentClassName = classList.leading_18;
+      } else if (lineHeight === '1.9') {
+        currentClassName = classList.leading_19;
+      } else if (lineHeight === '2') {
+        currentClassName = classList.leading_20;
+      }
+    } else {
+      if (lineHeight === '0.5') {
+        currentClassName = classList.leading_5;
+      } else if (lineHeight === '0.6') {
+        currentClassName = classList.leading_6;
+      } else if (lineHeight === '0.7') {
+        currentClassName = classList.leading_7;
+      } else if (lineHeight === '0.8') {
+        currentClassName = classList.leading_8;
+      } else if (lineHeight === '0.9') {
+        currentClassName = classList.leading_9;
+      } else if (lineHeight === '1') {
+        currentClassName = classList.leading_10;
+      } else if (lineHeight === '1.1') {
+        currentClassName = classList.leading_11;
+      } else if (lineHeight === '1.2') {
+        currentClassName = classList.leading_12;
+      } else if (lineHeight === '1.3') {
+        currentClassName = classList.leading_13;
+      } else if (lineHeight === '1.4') {
+        currentClassName = classList.leading_14;
+      } else if (lineHeight === '1.5') {
+        currentClassName = classList.leading_15;
+      } else if (lineHeight === '1.6') {
+        currentClassName = classList.leading_16;
+      } else if (lineHeight === '1.7') {
+        currentClassName = classList.leading_17;
+      } else if (lineHeight === '1.8') {
+        currentClassName = classList.leading_18;
+      } else if (lineHeight === '1.9') {
+        currentClassName = classList.leading_19;
+      } else if (lineHeight === '2') {
+        currentClassName = classList.leading_20;
+      } else if (lineHeight === '2.1') {
+        currentClassName = classList.leading_21;
+      } else if (lineHeight === '2.2') {
+        currentClassName = classList.leading_22;
+      } else if (lineHeight === '2.3') {
+        currentClassName = classList.leading_23;
+      } else if (lineHeight === '2.4') {
+        currentClassName = classList.leading_24;
+      } else if (lineHeight === '2.5') {
+        currentClassName = classList.leading_25;
+      } else if (lineHeight === '2.6') {
+        currentClassName = classList.leading_26;
+      } else if (lineHeight === '2.7') {
+        currentClassName = classList.leading_27;
+      } else if (lineHeight === '2.8') {
+        currentClassName = classList.leading_28;
+      } else if (lineHeight === '2.9') {
+        currentClassName = classList.leading_29;
+      } else if (lineHeight === '3') {
+        currentClassName = classList.leading_30;
+      }
+    }
+    if (currentClassName !== '') return currentClassName;
+    return classList.leading_14;
+  }
+
+  // Font Size Stuff
+  increaseFontSize(activeElement, isDefaultSize) {
+    const fontSizeClassValues = this.builder.opts.fontSizeClassValues;
+    const currentFontSize = this.getCurrentFontSize(activeElement);
+    const currentIndex = fontSizeClassValues.indexOf(currentFontSize);
+    if (currentIndex < fontSizeClassValues.length - 1) {
+      const nextFontSize = fontSizeClassValues[currentIndex + 1];
+      const nextSizeClass = `size-${nextFontSize}`;
+      if (isDefaultSize) if (nextSizeClass === 'size-24') return; // max for is-container font size is size-21
+
+      if (this.hasSizeClass(activeElement)) {
+        activeElement.classList.remove(this.getSizeClass(activeElement));
+      }
+      activeElement.classList.add(nextSizeClass);
+    }
+  }
+  decreaseFontSize(activeElement, isDefaultSize) {
+    const fontSizeClassValues = this.builder.opts.fontSizeClassValues;
+    const currentFontSize = this.getCurrentFontSize(activeElement);
+    const currentIndex = fontSizeClassValues.indexOf(currentFontSize);
+    if (currentIndex > 0) {
+      const previousFontSize = fontSizeClassValues[currentIndex - 1];
+      const previousSizeClass = `size-${previousFontSize}`;
+      if (isDefaultSize) if (previousFontSize === 'size-15') return; // min for is-container font size is size-15
+
+      if (this.hasSizeClass(activeElement)) {
+        activeElement.classList.remove(this.getSizeClass(activeElement));
+      }
+      activeElement.classList.add(previousSizeClass);
+    }
+  }
+  clearFontSize(activeElement) {
+    activeElement.classList.remove(this.getSizeClass(activeElement));
+  }
+
+  // Function to get the current font size dynamically
+  getCurrentFontSize(activeElement) {
+    const fontSizeClassValues = this.builder.opts.fontSizeClassValues;
+    if (this.hasSizeClass(activeElement)) {
+      const sizeClass = this.getSizeClass(activeElement);
+      const fontSizeString = sizeClass.split('-')[1];
+      return Number(fontSizeString);
+    } else {
+      const computedStyle = window.getComputedStyle(activeElement);
+      const fontSizeString = computedStyle.getPropertyValue('font-size');
+      const currentFontSize = Number(fontSizeString.match(/\d+/)[0]);
+
+      // Check if the font size exists in the array
+      if (fontSizeClassValues.includes(currentFontSize)) {
+        return currentFontSize;
+      } else {
+        // Find the closest font size in the array
+        const closestFontSize = this.findClosestFontSize(currentFontSize);
+        return closestFontSize;
+      }
+    }
+  }
+
+  // Function to check if paragraph has 'size-' class
+  hasSizeClass(element) {
+    if (Array.from(element.classList).some(value => value.startsWith('size-'))) {
+      return true;
+    }
+
+    // let currentElement = element.parentElement;
+
+    // while (currentElement) {
+    //     if (Array.from(currentElement.classList).some((value) => value.startsWith('size-'))) {
+    //         return true;
+    //     }
+    //     currentElement = currentElement.parentElement;
+    // }
+    return false;
+  }
+
+  // Function to get the 'size-' class if present
+  getSizeClass(activeElement) {
+    return Array.from(activeElement.classList).find(value => value.startsWith('size-'));
+  }
+  // getSizeClass(activeElement) {
+  //     let sizeClass = Array.from(activeElement.classList).find((value) => value.startsWith('size-'));
+
+  //     if (!sizeClass) {
+  //         let parentElement = activeElement.parentElement;
+
+  //         while (parentElement) {
+  //             sizeClass = Array.from(parentElement.classList).find((value) => value.startsWith('size-'));
+  //             if (sizeClass) {
+  //                 break;
+  //             }
+  //             parentElement = parentElement.parentElement;
+  //         }
+  //     }
+
+  //     return sizeClass;
+  // }
+
+  // Function to find the closest font size in the array
+  findClosestFontSize(currentFontSize) {
+    const fontSizeClassValues = this.builder.opts.fontSizeClassValues;
+    let closestFontSize = null;
+
+    // Find the closest font size smaller than currentFontSize
+    for (let i = fontSizeClassValues.length - 1; i >= 0; i--) {
+      if (fontSizeClassValues[i] < currentFontSize) {
+        closestFontSize = fontSizeClassValues[i];
+        break;
+      }
+    }
+
+    // If no smaller font size found, find the closest font size larger than currentFontSize
+    if (closestFontSize === null) {
+      for (let i = 0; i < fontSizeClassValues.length; i++) {
+        if (fontSizeClassValues[i] > currentFontSize) {
+          closestFontSize = fontSizeClassValues[i];
+          break;
+        }
+      }
+    }
+
+    // If no closest font size found, use the first font size in the array
+    if (closestFontSize === null) {
+      closestFontSize = fontSizeClassValues[0];
+    }
+    return closestFontSize;
+  }
+
+  // Space Stuff
+
+  // Increase the height of an element
+  increaseElementHeight(element) {
+    const currentHeightClass = this.getCurrentHeightClass(element);
+    const nextHeightClass = this.getNextHeightClass(currentHeightClass, true);
+    if (nextHeightClass) {
+      element.classList.remove(currentHeightClass);
+      element.classList.add(nextHeightClass);
+    }
+  }
+
+  // Decrease the height of an element
+  decreaseElementHeight(element) {
+    const currentHeightClass = this.getCurrentHeightClass(element);
+    const prevHeightClass = this.getNextHeightClass(currentHeightClass, false);
+    if (prevHeightClass) {
+      element.classList.remove(currentHeightClass);
+      element.classList.add(prevHeightClass);
+    }
+  }
+
+  // Get the current height class of an element
+  getCurrentHeightClass(element) {
+    const classes = Array.from(element.classList);
+    return classes.find(className => className.startsWith('height-'));
+  }
+
+  // Get the next height class based on the current height class and direction
+  getNextHeightClass(currentHeightClass, increase) {
+    const heightClasses = ['height-20', 'height-40', 'height-60', 'height-80', 'height-100', 'height-120', 'height-140', 'height-160', 'height-180', 'height-200', 'height-220', 'height-240', 'height-260', 'height-280', 'height-300'];
+    const currentIndex = heightClasses.indexOf(currentHeightClass);
+    const nextIndex = increase ? currentIndex + 1 : currentIndex - 1;
+    if (nextIndex >= 0 && nextIndex < heightClasses.length) {
+      return heightClasses[nextIndex];
+    }
+    return null;
+  }
+}
+
+const dom = new Dom();
+class Dictation {
+  constructor(opts = {}, builder) {
+    let defaults = {
+      send: () => {},
+      abort: () => {}
+    };
+    this.opts = Object.assign(this, defaults, opts);
+    this.builder = builder;
+    const util = this.builder.util;
+    this.util = util;
+    const builderStuff = this.builder.builderStuff;
+    this.builderStuff = builderStuff;
+    let html = `
+        <style>
+            .is-modal.page-command {
+                width: 300px !important; 
+                height: 200px !important; 
+                top: auto !important; 
+                bottom: 30px !important; 
+                left: auto !important; 
+                right: 30px !important; 
+                z-index: 10002 !important; 
+                font-size: 12px;
+            }
+            .page-command-overlay {
+                background: rgb(148 148 148 / 22%);
+                display: none;
+                z-index: 10004;
+                justify-content: center;
+                align-items:center;
+            }
+            .is-modal.page-command {
+                z-index: 10005 !important;
+            }
+
+            .spinner {
+                -webkit-animation: rotator 1.4s linear infinite;
+                        animation: rotator 1.4s linear infinite;
+            }
+            @-webkit-keyframes rotator {
+                0% {
+                    transform: rotate(0deg);
+                }
+                100% {
+                    transform: rotate(270deg);
+                }
+            }
+            @keyframes rotator {
+                0% {
+                    transform: rotate(0deg);
+                }
+                100% {
+                    transform: rotate(270deg);
+                }
+            }
+            .path {
+                stroke: #b7b7b7;
+                stroke-dasharray: 187;
+                stroke-dashoffset: 0;
+                transform-origin: center;
+                -webkit-animation: dash 1.4s ease-in-out infinite;
+                        animation: dash 1.4s ease-in-out infinite;
+            }
+            @-webkit-keyframes dash {
+                0% {
+                    stroke-dashoffset: 187;
+                }
+                50% {
+                    stroke-dashoffset: 46.75;
+                    transform: rotate(135deg);
+                }
+                100% {
+                    stroke-dashoffset: 187;
+                    transform: rotate(450deg);
+                }
+            }
+            @keyframes dash {
+                0% {
+                    stroke-dashoffset: 187;
+                }
+                50% {
+                    stroke-dashoffset: 46.75;
+                    transform: rotate(135deg);
+                }
+                100% {
+                    stroke-dashoffset: 187;
+                    transform: rotate(450deg);
+                }
+            }
+        </style>
+        <div class="is-overlay page-command-overlay">
+            <svg class="spinner" width="40px" height="40px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+                <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+            </svg>
+        </div>
+        <div class="is-modal is-modal-content page-command" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+            <div class="is-modal-bar is-draggable" draggable=""> 
+                <span style="display: flex;
+                justify-content: center;
+                align-items: center;">
+                    ${util.out('Send a Command')}</span>
+                <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="display:flex;flex-direction:column;justify-content:space-between;position:absolute;box-sizing:border-box;top:0;left:0;width:100%;height:100%;border-top:transparent 35px solid;overflow-y:hidden;overflow-x:auto;">
+            
+                <textarea class="inp-command" style="width:100%;height:121px;border:none;outline:none;background:transparent;line-height: 1.2;
+                font-family: sans-serif;font-weight: 300;font-size: 17px;"></textarea>
+                <div style="display:flex">
+                    <button title="${util.out('Mic')}" class="cmd-enable-dictation classic-secondary" style="width:40px;height:43px;flex:none;padding:0;outline-offset:-2px;">
+                        <svg class="is-icon-flex" style="width: 18px; height: 18px;"><use xlink:href="#icon-microphone"></use></svg> 
+                    </button>
+                    <button title="${util.out('Clear')}" class="cmd-clear-command classic-secondary" style="width:40px;height:43px;flex:none;padding:0;outline-offset:-2px;">
+                        <svg class="is-icon-flex" style="width: 18px; height: 18px;"><use xlink:href="#icon-eraser"></use></svg> 
+                    </button>
+                    <label for="chkAutoSendCommand" style="margin:0;display:flex;padding-left:10px;padding-right:10px;white-space:nowrap;width:100%;align-items:center;letter-spacing:0"><input id="chkAutoSendCommand" type="checkbox"> <span style="margin-left:3px">${util.out('Auto Send')}</span></label>
+                    <button title="${util.out('Send')}" class="cmd-send-command classic-primary" style="width:100%;padding-left:5px;padding-right:5px;height:43px;outline-offset:-2px;">Send</button>
+                </div>
+            </div>
+        </div>
+        `;
+    dom.appendHtml(builderStuff, html);
+    const modalCommand = builderStuff.querySelector('.page-command');
+    this.modalCommand = modalCommand;
+    this.builder.commandText = '';
+    this.builder.autoSendCommand = false;
+    this.aborted = true;
+    if (localStorage.getItem('_dictation') !== null) {
+      if (localStorage.getItem('_dictation') === '1') {
+        this.modalCommand.classList.add('active');
+        if (localStorage.getItem('_mic') !== null) {
+          if (localStorage.getItem('_mic') === '1') {
+            this.startDictation();
+          }
+        } else {
+          this.startDictation();
+        }
+      }
+    }
+    const btnDictation = builderStuff.querySelector('.cmd-enable-dictation');
+    if (localStorage.getItem('_mic') !== null) {
+      if (localStorage.getItem('_mic') === '0') {
+        btnDictation.innerHTML = '<svg class="is-icon-flex" style="width:18px; height:18px;"><use xlink:href="#icon-microphone-off"></use></svg>';
+      }
+    }
+    const chkAutoSend = builderStuff.querySelector('#chkAutoSendCommand');
+    if (localStorage.getItem('_autosendcommand') !== null) {
+      if (localStorage.getItem('_autosendcommand') === '1') {
+        chkAutoSend.checked = true;
+      }
+    }
+    this.modalCommand.addEventListener('focus', () => {
+      util.saveSelection(); // must be called in case used by formatText()
+    });
+
+    btnDictation.addEventListener('click', () => {
+      if (this.aborted) {
+        this.startDictation();
+        btnDictation.innerHTML = '<svg class="is-icon-flex" style="width:18px; height:18px;"><use xlink:href="#icon-microphone"></use></svg>';
+      } else {
+        this.stopDictation();
+        btnDictation.innerHTML = '<svg class="is-icon-flex" style="width:18px; height:18px;"><use xlink:href="#icon-microphone-off"></use></svg>';
+      }
+    });
+    chkAutoSend.addEventListener('change', () => {
+      if (chkAutoSend.checked) {
+        this.builder.autoSendCommand = true;
+        localStorage.setItem('_autosendcommand', '1');
+      } else {
+        this.builder.autoSendCommand = false;
+        localStorage.setItem('_autosendcommand', '0');
+      }
+    });
+    const btnClear = builderStuff.querySelector('.cmd-clear-command');
+    btnClear.addEventListener('click', () => {
+      const inpCommand = this.builderStuff.querySelector('.inp-command');
+      this.builder.commandText = '';
+      inpCommand.value = '';
+    });
+    const btnSend = builderStuff.querySelector('.cmd-send-command');
+    btnSend.addEventListener('click', async () => {
+      if (this.builder.isInProgress) {
+        // Abort
+
+        this.opts.abort();
+        this.finish();
+        return;
+      }
+      const inpCommand = this.modalCommand.querySelector('.inp-command');
+      let question = inpCommand.value;
+      question = question.trim();
+      if (question === '') {
+        return;
+      }
+
+      // this.startSending();
+
+      this.opts.send(question);
+    });
+    const inpCommand = this.builderStuff.querySelector('.inp-command');
+    inpCommand.addEventListener('keydown', e => {
+      if (e.keyCode === 13 && !e.shiftKey) {
+        e.preventDefault();
+        return;
+      }
+    });
+    inpCommand.addEventListener('keyup', e => {
+      if (e.keyCode === 13 && !e.shiftKey) {
+        btnSend.click();
+        e.preventDefault();
+        return;
+      }
+      this.builder.commandText = inpCommand.value;
+    });
+    const btnClose = this.modalCommand.querySelector('.is-modal-close');
+    btnClose.addEventListener('click', () => {
+      this.modalCommand.classList.remove('active');
+      this.stopDictation();
+      localStorage.setItem('_dictation', '0');
+    });
+  }
+  openDictation() {
+    this.modalCommand.classList.add('active');
+    this.startDictation();
+    localStorage.setItem('_dictation', '1');
+  }
+  stopDictation() {
+    this.recognition.abort();
+    this.aborted = true;
+    localStorage.setItem('_mic', '0');
+  }
+  startDictation() {
+    this.aborted = false;
+    if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
+      var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+      this.recognition = new SpeechRecognition();
+      this.recognition.continuous = true;
+      this.recognition.interimResults = true;
+      let lang = 'en-US';
+      if (this.builder.speechRecognitionLang) lang = this.builder.speechRecognitionLang;
+      this.recognition.lang = lang;
+      this.recognition.start();
+      let speechTimeout;
+      this.recognition.onresult = event => {
+        clearTimeout(speechTimeout);
+        if (this.builder.isInProgress) return;
+        var interimTranscripts = '';
+        var finalTranscripts = '';
+        for (var i = event.resultIndex; i < event.results.length; ++i) {
+          if (event.results[i].isFinal) {
+            finalTranscripts += event.results[i][0].transcript;
+          } else {
+            interimTranscripts += event.results[i][0].transcript;
+          }
+        }
+        if (interimTranscripts.indexOf('send') !== -1 || finalTranscripts.indexOf('send') !== -1) {
+          const btnSend = this.modalCommand.querySelector('.cmd-send-command');
+          btnSend.click();
+          return;
+        }
+        this.builder.commandText += finalTranscripts; // + '<i style="color:#999">' + interimTranscripts + '</i>';
+
+        const inpCommand = this.modalCommand.querySelector('.inp-command');
+        inpCommand.value = this.builder.commandText;
+        if (this.builder.autoSendCommand) {
+          speechTimeout = setTimeout(() => {
+            if (inpCommand.value.trim() === '') return;
+            const btnSend = this.modalCommand.querySelector('.cmd-send-command');
+            btnSend.click();
+          }, 1000);
+        }
+      };
+      this.recognition.onend = () => {
+        if (!this.aborted) this.startDictation();
+      };
+      this.recognition.onstart = () => {
+        localStorage.setItem('_mic', '1');
+      };
+      this.recognition.onerror = () => {
+        // console.log(e.error);
+      };
+    } else {
+      // this.aborted = true;
+      alert(this.util.out('Speech recognition not supported in this browser.'));
+    }
+  }
+  startSending() {
+    const btnSend = this.modalCommand.querySelector('.cmd-send-command');
+    btnSend.innerHTML = `
+        <svg class="spinner" width="14px" height="14px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+            <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+        </svg>
+        <span style="margin-left:5px">${this.util.out('Abort')}</span>
+        `;
+    const ovl = this.builderStuff.querySelector('.page-command-overlay');
+    ovl.style.display = 'flex';
+    this.builder.isInProgress = true;
+  }
+  finish() {
+    const btnSend = this.modalCommand.querySelector('.cmd-send-command');
+    btnSend.innerText = this.util.out('Send');
+    const ovl = this.builderStuff.querySelector('.page-command-overlay');
+    ovl.style.display = 'none';
+    this.builder.isInProgress = false;
+    if (this.builder.autoSendCommand) {
+      // Clear
+      const inpCommand = this.builderStuff.querySelector('.inp-command');
+      this.builder.commandText = '';
+      inpCommand.value = '';
+    }
+    const elmTool = this.builderStuff.querySelector('.is-element-tool');
+    elmTool.style.display = '';
+  }
+}
+
+var src = {
+	compareTwoStrings:compareTwoStrings,
+	findBestMatch:findBestMatch
+};
+
+function compareTwoStrings(first, second) {
+	first = first.replace(/\s+/g, '');
+	second = second.replace(/\s+/g, '');
+
+	if (first === second) return 1; // identical or empty
+	if (first.length < 2 || second.length < 2) return 0; // if either is a 0-letter or 1-letter string
+
+	let firstBigrams = new Map();
+	for (let i = 0; i < first.length - 1; i++) {
+		const bigram = first.substring(i, i + 2);
+		const count = firstBigrams.has(bigram)
+			? firstBigrams.get(bigram) + 1
+			: 1;
+
+		firstBigrams.set(bigram, count);
+	}
+	let intersectionSize = 0;
+	for (let i = 0; i < second.length - 1; i++) {
+		const bigram = second.substring(i, i + 2);
+		const count = firstBigrams.has(bigram)
+			? firstBigrams.get(bigram)
+			: 0;
+
+		if (count > 0) {
+			firstBigrams.set(bigram, count - 1);
+			intersectionSize++;
+		}
+	}
+
+	return (2.0 * intersectionSize) / (first.length + second.length - 2);
+}
+
+function findBestMatch(mainString, targetStrings) {
+	if (!areArgsValid(mainString, targetStrings)) throw new Error('Bad arguments: First argument should be a string, second should be an array of strings');
+	
+	const ratings = [];
+	let bestMatchIndex = 0;
+
+	for (let i = 0; i < targetStrings.length; i++) {
+		const currentTargetString = targetStrings[i];
+		const currentRating = compareTwoStrings(mainString, currentTargetString);
+		ratings.push({target: currentTargetString, rating: currentRating});
+		if (currentRating > ratings[bestMatchIndex].rating) {
+			bestMatchIndex = i;
+		}
+	}
+	
+	
+	const bestMatch = ratings[bestMatchIndex];
+	
+	return { ratings: ratings, bestMatch: bestMatch, bestMatchIndex: bestMatchIndex };
+}
+
+function areArgsValid(mainString, targetStrings) {
+	if (typeof mainString !== 'string') return false;
+	if (!Array.isArray(targetStrings)) return false;
+	if (!targetStrings.length) return false;
+	if (targetStrings.find( function (s) { return typeof s !== 'string'})) return false;
+	return true;
+}
+
+class Similarity {
+  constructor(settings = {}) {
+    const defaults = {
+      commandList: {
+        add_bg_color: ['add a background color', 'add background color'],
+        add_bg_image: ['add a background image', 'add background image', 'add a background', 'add background'],
+        change_bg_color: ['change the background color', 'change background color'],
+        change_bg_image: ['change the background image', 'change background image', 'change the background', 'change background'],
+        remove_bg_color: ['remove background color', 'remove the background color', 'clear background color', 'clear the background color'],
+        remove_bg: ['remove background', 'remove background image', 'remove the background', 'remove the background image', 'clear background', 'clear background image', 'clear the background', 'clear the background image'],
+        increase_content_width: ['increase content width', 'enlarge content width'],
+        decrease_content_width: ['decrease content width', 'reduce content width'],
+        clear_content_width: ['clear content width', 'remove content width', 'make content full', 'full width content'],
+        make_content_light: ['make the content white', 'make the content light', 'make the text white', 'make the text light', 'make content white', 'make content light', 'make text white', 'make text light', 'change the content white', 'change the content light', 'change the text white', 'change the text light', 'change to white content', 'change to light content', 'change to white text', 'change to light text'],
+        make_content_dark: ['make the content black', 'make the content dark', 'make the text black', 'make the text dark', 'make content black', 'make content dark', 'make text black', 'make text dark', 'change the content black', 'change the content dark', 'change the text black', 'change the text dark', 'change to black content', 'change to dark content', 'change to black text', 'change to dark text'],
+        make_section_height_10: ['make section height 10'],
+        make_section_height_15: ['make section height 15'],
+        make_section_height_20: ['make section height 20'],
+        make_section_height_25: ['make section height 25'],
+        make_section_height_30: ['make section height 30'],
+        make_section_height_40: ['make section height 40'],
+        make_section_height_50: ['make section height 50'],
+        make_section_height_60: ['make section height 60'],
+        make_section_height_70: ['make section height 70'],
+        make_section_height_75: ['make section height 75'],
+        make_section_height_80: ['make section height 80'],
+        make_section_height_85: ['make section height 85'],
+        make_section_height_90: ['make section height 90'],
+        make_section_height_100: ['make section height 100'],
+        make_section_height_auto: ['make section height auto'],
+        suggest_headline: ['suggest a headline', 'suggest headline', 'suggest a header', 'suggest header', 'suggest a title', 'suggest title', 'write a headline', 'write headline', 'write a header', 'write header', 'write a title', 'write title'],
+        add_headline: ['add a headline', 'add headline', 'add a header', 'add header', 'add a title', 'add title'],
+        add_paragraph: ['add a paragraph', 'add paragraph'],
+        add_image: ['add an image', 'add image'],
+        add_youtube: ['add a youtube', 'add youtube'],
+        add_video: ['add a video', 'add video', 'add an HTML5 video', 'add HTML5 video', 'add an mp4 video', 'add mp4 video'],
+        add_audio: ['add an audio', 'add audio', 'add a music', 'add music', 'add an mp3', 'add mp3'],
+        add_map: ['add a map', 'add map', 'add a google map', 'add google map'],
+        add_table: ['add a table', 'add table'],
+        add_social: ['add a social', 'add social'],
+        add_icon: ['add an icon', 'add icon'],
+        add_button: ['add a button', 'add button'],
+        add_2buttons: ['add 2 button', 'add 2 button', 'add 2 buttons', 'add 2 buttons'],
+        add_space: ['add a space', 'add space'],
+        position_before: ['above', 'before'],
+        increase_line_height: ['increase line height', 'increase line spacing', 'increase text spacing', 'increase the line height', 'increase the line spacing', 'increase the text spacing', 'enlarge line height', 'enlarge line spacing', 'enlarge text spacing', 'enlarge the line height', 'enlarge the line spacing', 'enlarge the text spacing', 'bigger line height', 'bigger line spacing', 'bigger text spacing', 'bigger the line height', 'bigger the line spacing', 'bigger the text spacing', 'make line height bigger', 'make line spacing bigger', 'make text spacing bigger', 'make the line height bigger', 'make the line spacing bigger', 'make the text spacing bigger'],
+        increase_default_line_height: ['increase default line height', 'increase default line spacing', 'increase default text spacing', 'increase the default line height', 'increase the default line spacing', 'increase the default text spacing', 'enlarge default line height', 'enlarge default line spacing', 'enlarge default text spacing', 'enlarge the default line height', 'enlarge the default line spacing', 'enlarge the default text spacing', 'bigger default line height', 'bigger default line spacing', 'bigger default text spacing', 'bigger the default line height', 'bigger the default line spacing', 'bigger the default text spacing', 'make default line height bigger', 'make default line spacing bigger', 'make default text spacing bigger', 'make the default line height bigger', 'make the default line spacing bigger', 'make the default text spacing bigger'],
+        decrease_line_height: ['decrease line height', 'decrease line spacing', 'decrease text spacing', 'decrease the line height', 'decrease the line spacing', 'decrease the text spacing', 'reduce line height', 'reduce line spacing', 'reduce text spacing', 'reduce the line height', 'reduce the line spacing', 'reduce the text spacing', 'smaller line height', 'smaller line spacing', 'smaller text spacing', 'smaller the line height', 'smaller the line spacing', 'smaller the text spacing', 'make line height smaller', 'make line spacing smaller', 'make text spacing smaller', 'make the line height smaller', 'make the line spacing smaller', 'make the text spacing smaller'],
+        decrease_default_line_height: ['decrease default line height', 'decrease default line spacing', 'decrease default text spacing', 'decrease the default line height', 'decrease the default line spacing', 'decrease the default text spacing', 'reduce default line height', 'reduce default line spacing', 'reduce default text spacing', 'reduce the default line height', 'reduce the default line spacing', 'reduce the default text spacing', 'smaller default line height', 'smaller default line spacing', 'smaller default text spacing', 'smaller the default line height', 'smaller the default line spacing', 'smaller the default text spacing', 'make default line height smaller', 'make default line spacing smaller', 'make default text spacing smaller', 'make the default line height smaller', 'make the default line spacing smaller', 'make the default text spacing smaller'],
+        increase_font_size: ['increase font', 'increase size', 'increase font size', 'increase the font', 'increase the size', 'increase the font size', 'increase text', 'increase size', 'increase text size', 'increase the text', 'increase the text size', 'enlarge font', 'enlarge size', 'enlarge font size', 'enlarge the font', 'enlarge the size', 'enlarge the font size', 'enlarge text', 'enlarge size', 'enlarge text size', 'enlarge the text', 'enlarge the text size', 'text bigger', 'font bigger', 'size bigger'],
+        decrease_font_size: ['decrease font', 'decrease size', 'decrease font size', 'decrease the font', 'decrease the size', 'decrease the font size', 'decrease text', 'decrease size', 'decrease text size', 'decrease the text', 'decrease the text size', 'reduce font', 'reduce size', 'reduce font size', 'reduce the font', 'reduce the size', 'reduce the font size', 'reduce text', 'reduce size', 'reduce text size', 'reduce the text', 'reduce the text size', 'text smaller', 'font smaller', 'size smaller'],
+        increase_default_font_size: ['increase default font', 'increase default size', 'increase default font size', 'increase the default font', 'increase the default size', 'increase the default font size', 'increase default text', 'increase default size', 'increase default text size', 'increase the default text', 'increase the default text size', 'enlarge default font', 'enlarge default size', 'enlarge default font size', 'enlarge the default font', 'enlarge the default size', 'enlarge the default font size', 'enlarge default text', 'enlarge default text size', 'enlarge the default text', 'enlarge the default text size', 'default text bigger', 'default font bigger', 'default size bigger', 'increase default content', 'increase default content size', 'increase the default content', 'increase the default content size', 'enlarge default content', 'enlarge default content size', 'enlarge the default content', 'enlarge the default content size'],
+        decrease_default_font_size: ['decrease default font', 'decrease default size', 'decrease default font size', 'decrease the default font', 'decrease the default size', 'decrease the default font size', 'decrease default text', 'decrease default size', 'decrease default text size', 'decrease the default text', 'decrease the default text size', 'reduce default font', 'reduce default size', 'reduce default font size', 'reduce the default font', 'reduce the default size', 'reduce the default font size', 'reduce default text', 'reduce default text size', 'reduce the default text', 'reduce the default text size', 'default text smaller', 'default font smaller', 'default size smaller', 'decrease default content', 'decrease default content size', 'decrease the default content', 'decrease the default content size', 'reduce default content', 'reduce default content size', 'reduce the default content', 'reduce the default content size'],
+        clear_font_size: ['clear font size', 'remove font size', 'clear text size', 'remove text size', 'use default font size', 'ude the default font size'],
+        align_left: ['align left', 'align the text left', 'align text left', 'left aligned'],
+        align_center: ['align center', 'align the text center', 'align text center', 'center aligned'],
+        align_right: ['align right', 'align the text right', 'align text right', 'right aligned'],
+        align_full: ['align full', 'align justify', 'justify', 'justify text', 'justify the text', 'justify full'],
+        clear_alignment: ['clear alignment', 'remove alignment', 'clear the text alignment', 'remove the text alignment', 'clear text alignment', 'remove text alignment'],
+        make_content_centered: ['make the content center', 'make the content centered'],
+        move_content_left: ['move content left', 'move content to left', 'move the content left', 'move content to the left', 'move content to the left', 'place content on the left', 'move the content to the left', 'move the content to the left', 'place the content on the left'],
+        move_content_center: ['move content center', 'move content to center', 'move the content center', 'move content to the center', 'move content to the center', 'place content on the center', 'move the content to the center', 'move the content to the center', 'place the content on the center'],
+        move_content_right: ['move content right', 'move content to right', 'move the content right', 'move content to the right', 'move content to the right', 'place content on the right', 'move the content to the right', 'move the content to the right', 'place the content on the right'],
+        move_content_top: ['move content top', 'move content to top', 'move the content top', 'move content to the top', 'move content to the top', 'place content on the top', 'move the content to the top', 'move the content to the top', 'place the content on the top'],
+        move_content_middle: ['move content middle', 'move content to middle', 'move the content middle', 'move content to the middle', 'move content to the middle', 'place content on the middle', 'move the content to the middle', 'move the content to the middle', 'place the content on the middle'],
+        move_content_bottom: ['move content bottom', 'move content to bottom', 'move the content bottom', 'move content to the bottom', 'move content to the bottom', 'place content on the bottom', 'move the content to the bottom', 'move the content to the bottom', 'place the content on the bottom'],
+        increase_space: ['more space', 'increase space', 'increase the space', 'enlarge the space'],
+        decrease_space: ['less space', 'decrease space', 'decrease the space', 'reduce the space'],
+        move_row_up: ['move up', 'move row up'],
+        move_row_down: ['move down', 'move row down'],
+        duplicate_row: ['duplicate row', 'copy row'],
+        remove_row: ['remove row', 'delete row'],
+        move_col_left: ['move left', 'move column left'],
+        move_col_right: ['move right', 'move column right'],
+        duplicate_col: ['duplicate column', 'copy column'],
+        remove_col: ['remove column', 'delete column'],
+        move_column_up: ['move column up'],
+        move_column_down: ['move column down']
+      }
+    };
+    this.settings = Object.assign(this, defaults, settings);
+  }
+  check(command) {
+    const {
+      commandList
+    } = this.settings;
+    let maxSimilarity = 0;
+    let maxKey = '';
+    for (const [key, value] of Object.entries(commandList)) {
+      const similarity = this.calculate(command, value);
+      if (similarity > maxSimilarity) {
+        maxSimilarity = similarity;
+        maxKey = key;
+      }
+    }
+    const similarityThreshold = 0.5;
+    if (maxSimilarity >= similarityThreshold) {
+      return maxKey;
+    }
+    return false;
+  }
+  calculate(command, list) {
+    const normalizedCommand = command.toLowerCase();
+    let maxSimilarity = 0;
+    for (const cmd of list) {
+      const similarity = src.compareTwoStrings(normalizedCommand, cmd);
+      if (similarity > maxSimilarity) {
+        // console.log(list)
+        // console.log(similarity)
+        maxSimilarity = similarity;
+      }
+    }
+    return maxSimilarity;
+  }
+}
+
+class Command {
+  constructor(builder) {
+    this.builder = builder;
+    const builderStuff = this.builder.builderStuff;
+    this.builderStuff = builderStuff;
+    const controller = new AbortController(); // Abort
+    let signal = controller.signal;
+    if (this.builder.commandList) {
+      this.cp = new Similarity({
+        commandList: this.builder.commandList
+      });
+    } else {
+      this.cp = new Similarity();
+    }
+
+    // Dictation Panel 
+    this.dictation = this.builder.dictation;
+    this.dictation.opts.send = async question => {
+      if (question === '') {
+        return;
+      }
+      question = this.builder.lib.processShortCommand(question);
+      if (!question) {
+        this.dictation.finish(); // Must be called after finished
+        return;
+      }
+      question = this.processPrompt(question);
+      if (!question) {
+        this.dictation.finish(); // Must be called after finished
+        return;
+      }
+      let currentHtml = this.builder.html();
+
+      // Update prompt
+      question = `${question}:
+    
+            ${currentHtml}`;
+      const response = await fetch('http://localhost:8081/answer', {
+        signal,
+        // Abort
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          question
+        })
+      });
+      if (!response.ok) {
+        const error = await response.json();
+        console.error('Error:', error.error);
+        this.dictation.finish(); // Must be called after finished
+
+        return;
+      }
+      const data = await response.json();
+      let html = this.getHtmlResult(data.answer);
+      this.builder.saveForUndo();
+
+      // Update HTML
+      this.builder.loadHtml(html);
+
+      //Trigger Change event
+      this.builder.settings.onChange();
+      this.dictation.finish(); // Must be called after finished
+    };
+
+    this.dictation.opts.abort = () => {
+      // console.log('abort');
+
+      controller.abort();
+      this.dictation.finish(); // Must be called after finished
+    };
+  }
+
+  //-------------------
+
+  processPrompt(question) {
+    const activeBox = this.builder.activeBox;
+    let intent = this.builder.similarity.check(question);
+    // console.log(intent);
+
+    if (!intent) return question;
+    if (intent === 'add_bg_color' || intent === 'change_bg_color' || intent === 'suggest_headline') {
+      return question; // Pass to ChatGPT
+    }
+
+    this.builder.saveForUndo();
+    if (intent === 'move_row_up') {
+      this.builder.moveRowUp();
+    } else if (intent === 'move_row_down') {
+      this.builder.moveRowDown();
+    } else if (intent === 'duplicate_row') {
+      this.builder.duplicateRow();
+    } else if (intent === 'remove_row') {
+      this.builder.removeRow();
+    } else if (intent === 'move_col_left') {
+      this.builder.moveColumnLeft();
+    } else if (intent === 'move_col_right') {
+      this.builder.moveColumnRight();
+    } else if (intent === 'duplicate_col') {
+      this.builder.duplicateColumn();
+    } else if (intent === 'remove_col') {
+      this.builder.removeColumn();
+    } else if (intent === 'move_column_up') {
+      this.builder.moveColumnUp();
+    } else if (intent === 'move_column_down') {
+      this.builder.moveColumnDown();
+    } else if (intent === 'add_headline') {
+      this.builder.lib.addBlock(activeBox, 'headline', 'after');
+    } else if (intent === 'add_paragraph') {
+      this.builder.lib.addBlock(activeBox, 'paragraph', 'after');
+    } else if (intent === 'add_image') {
+      this.builder.lib.addBlock(activeBox, 'image', 'after');
+    } else if (intent === 'add_youtube') {
+      this.builder.lib.addBlock(activeBox, 'youtube', 'after');
+    } else if (intent === 'add_video') {
+      this.builder.lib.addBlock(activeBox, 'video', 'after');
+    } else if (intent === 'add_audio') {
+      this.builder.lib.addBlock(activeBox, 'audio', 'after');
+    } else if (intent === 'add_map') {
+      this.builder.lib.addBlock(activeBox, 'map', 'after');
+    } else if (intent === 'add_table') {
+      this.builder.lib.addBlock(activeBox, 'table', 'after');
+    } else if (intent === 'add_social') {
+      this.builder.lib.addBlock(activeBox, 'social', 'after');
+    } else if (intent === 'add_icon') {
+      this.builder.lib.addBlock(activeBox, 'icon', 'after');
+    } else if (intent === 'add_button') {
+      this.builder.lib.addBlock(activeBox, 'button', 'after');
+    } else if (intent === 'add_2buttons') {
+      this.builder.lib.addBlock(activeBox, 'twobuttons', 'after');
+    } else if (intent === 'add_space') {
+      this.builder.lib.addBlock(activeBox, 'space', 'after');
+    } else if (intent === 'increase_font_size') {
+      let elm = this.builder.activeElement;
+      if (elm) {
+        this.builder.lib.increaseFontSize(elm);
+      }
+    } else if (intent === 'decrease_font_size') {
+      let elm = this.builder.activeElement;
+      if (elm) {
+        this.builder.lib.decreaseFontSize(elm);
+      }
+    } else if (intent === 'clear_font_size') {
+      let elm = this.builder.activeElement;
+      if (elm) {
+        this.builder.lib.clearFontSize(elm);
+      }
+    } else if (intent === 'align_left') {
+      let elm = this.builder.activeElement;
+      if (elm) {
+        this.builder.lib.alignText(elm, 'left');
+      } else {
+        this.builder.lib.alignContent(activeBox, 'left');
+      }
+    } else if (intent === 'align_center') {
+      let elm = this.builder.activeElement;
+      if (elm) {
+        this.builder.lib.alignText(elm, 'center');
+      } else {
+        this.builder.lib.alignContent(activeBox, 'center');
+      }
+    } else if (intent === 'align_right') {
+      let elm = this.builder.activeElement;
+      if (elm) {
+        this.builder.lib.alignText(elm, 'right');
+      } else {
+        this.builder.lib.alignContent(activeBox, 'right');
+      }
+    } else if (intent === 'align_full') {
+      let elm = this.builder.activeElement;
+      if (elm) {
+        this.builder.lib.alignText(elm, 'justify');
+      } else {
+        this.builder.lib.alignContent(activeBox, 'justify');
+      }
+    } else if (intent === 'clear_alignment') {
+      let elm = this.builder.activeElement;
+      if (elm) {
+        this.builder.lib.alignText(elm, '');
+      } else {
+        this.builder.lib.alignContent(activeBox, '');
+      }
+    } else if (intent === 'increase_space') {
+      let elm = this.builder.activeElement;
+      if (elm) {
+        this.builder.lib.increaseElementHeight(elm);
+      }
+    } else if (intent === 'decrease_space') {
+      let elm = this.builder.activeElement;
+      if (elm) {
+        this.builder.lib.decreaseElementHeight(elm);
+      }
+    } else if (intent === 'increase_line_height') {
+      let elm = this.builder.activeElement;
+      if (elm) {
+        this.builder.lib.increaseLineHeight(elm);
+      }
+    } else if (intent === 'decrease_line_height') {
+      let elm = this.builder.activeElement;
+      if (elm) {
+        this.builder.lib.decreaseLineHeight(elm);
+      }
+    }
+
+    //Trigger Change event
+    this.builder.settings.onChange();
+    return false;
+  } // /processPrompt()
+
+  //-------------------
+
+  openDictation() {
+    this.dictation.openDictation();
+  }
+  getHtmlResult(html) {
+    if (html.indexOf('```') !== -1) {
+      const regex = /<div[^>]*>[\s\S]*<\/div>/;
+      const matches = html.match(regex);
+      const extractedString = matches && matches[0];
+      html = extractedString;
+    }
+    return html;
+  }
+}
+
 class ContentBuilder {
   constructor(opts = {}) {
     let defaults = {
@@ -76589,6 +78165,7 @@ class ContentBuilder {
       imageRenameOnEdit: true,
       disableAutoEmbedVideo: false,
       deleteConfirm: false,
+      isContentBox: false,
       sectionTemplate: `
             <div class="is-section is-box is-section-100 type-opensans">
                 <div class="is-overlay"></div>
@@ -77244,6 +78821,20 @@ class ContentBuilder {
 
     // Shortcut Info
     this.ShortcutInfo = new ShortcutInfo(this);
+
+    // Prompt Stuff
+    this.dictation = new Dictation({}, this); // Dictation Panel 
+    this.lib = new Lib(this); // Libraries of common editing functions
+    if (this.commandList) {
+      this.similarity = new Similarity({
+        commandList: this.commandList
+      });
+    } else {
+      this.similarity = new Similarity();
+    }
+    if (!this.opts.isContentBox) {
+      this.command = new Command(this);
+    }
     if (this.iframe) {
       this.win.addEventListener('scroll', this.doWindowScroll = () => {
         this.util.hidePops();