@innovastudio/contentbuilder 1.0.55 → 1.0.59

package/public/contentbuilder/contentbuilder.esm.js

@@ -1237,6 +1237,11 @@ class Util {
 
       emptyinfo.addEventListener('click', () => {
         this.clearActiveCell();
+        const builders = document.querySelectorAll(this.builder.opts.container);
+        Array.prototype.forEach.call(builders, item => {
+          dom.removeClass(item, 'builder-active');
+        });
+        dom.addClass(builder, 'builder-active');
         dom.addClass(emptyinfo, 'row-active'); // Needed for addContent(). Directly apply class in Util is fine.
 
         const builderStuff = this.builder.builderStuff;
@@ -8213,9 +8218,9 @@ let hash$1 = {};
 class HtmlUtil {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
-    const builderstuff = util.builderStuff();
-    let viewhtml = builderstuff.querySelector('.viewhtml');
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
+    let viewhtml = builderStuff.querySelector('.viewhtml');
 
     if (!viewhtml) {
       /*
@@ -8261,10 +8266,10 @@ class HtmlUtil {
             </div>
             
             `;
-      dom$E.appendHtml(builderstuff, html);
-      viewhtml = builderstuff.querySelector('.viewhtml');
-      let viewhtmlformatted = builderstuff.querySelector('.viewhtmlformatted');
-      let viewhtmlnormal = builderstuff.querySelector('.viewhtmlnormal');
+      dom$E.appendHtml(builderStuff, html);
+      viewhtml = builderStuff.querySelector('.viewhtml');
+      let viewhtmlformatted = builderStuff.querySelector('.viewhtmlformatted');
+      let viewhtmlnormal = builderStuff.querySelector('.viewhtmlnormal');
       let elm = viewhtml.querySelector('.input-html-larger');
       dom$E.addEventListener(elm, 'click', () => {
         let textarea = viewhtml.querySelector('textarea'); // Used  by html dialog (syntaxhighlighting)
@@ -8300,9 +8305,9 @@ class HtmlUtil {
   }
 
   viewHtmlNormal() {
-    const util = new Util(this.builder);
-    const builderstuff = util.builderStuff();
-    const viewhtmlnormal = builderstuff.querySelector('.viewhtmlnormal');
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
+    const viewhtmlnormal = builderStuff.querySelector('.viewhtmlnormal');
     let iframe = viewhtmlnormal.querySelector('iframe');
     iframe.outerHTML = '<iframe id="ifrHtml" style="width:100%;height:100%;border: none;" src="about:blank"></iframe>'; //clear
 
@@ -8315,9 +8320,9 @@ class HtmlUtil {
   }
 
   viewHtmlLarger() {
-    const util = new Util(this.builder);
-    const builderstuff = util.builderStuff();
-    const viewhtmllarger = builderstuff.querySelector('.viewhtmllarger');
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
+    const viewhtmllarger = builderStuff.querySelector('.viewhtmllarger');
     let iframe = viewhtmllarger.querySelector('iframe');
     iframe.outerHTML = '<iframe id="ifrHtml" style="width:100%;height:100%;border: none;" src="about:blank"></iframe>'; //clear
 
@@ -8329,14 +8334,14 @@ class HtmlUtil {
   }
 
   view(mode, area) {
-    const util = new Util(this.builder);
-    const builderstuff = util.builderStuff();
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     let viewhtml;
 
     if (this.builder.opts.htmlSyntaxHighlighting) {
-      viewhtml = builderstuff.querySelector('.viewhtmlformatted');
+      viewhtml = builderStuff.querySelector('.viewhtmlformatted');
     } else {
-      viewhtml = builderstuff.querySelector('.viewhtml');
+      viewhtml = builderStuff.querySelector('.viewhtml');
     }
 
     viewhtml.querySelector('.is-modal-footer').innerHTML = `<button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
@@ -8362,7 +8367,7 @@ class HtmlUtil {
 
       dom$E.removeClass(row, 'row-outline'); //Hide Column tool
 
-      let columnTool = builderstuff.querySelector('.is-column-tool');
+      let columnTool = builderStuff.querySelector('.is-column-tool');
       dom$E.removeClass(columnTool, 'active');
     }
 
@@ -8478,9 +8483,9 @@ class HtmlUtil {
     } //Hide popup
 
 
-    let columnMore = builderstuff.querySelector('.is-pop.columnmore');
+    let columnMore = builderStuff.querySelector('.is-pop.columnmore');
     columnMore.style.display = '';
-    let rowMore = builderstuff.querySelector('.is-pop.rowmore');
+    let rowMore = builderStuff.querySelector('.is-pop.rowmore');
     rowMore.style.display = '';
   }
 
@@ -8508,17 +8513,17 @@ class HtmlUtil {
       });
     }
 
-    const util = new Util(this.builder); //Prepare temporary helpers: #tmp_content & #tmp_buildercontent
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff; //Prepare temporary helpers: #tmp_content & #tmp_buildercontent
 
-    const builderstuff = util.builderStuff();
-    let elm = builderstuff.querySelector('#tmp_content');
-    if (elm) builderstuff.removeChild(elm);
-    elm = builderstuff.querySelector('#tmp_buildercontent');
-    if (elm) builderstuff.removeChild(elm);
+    let elm = builderStuff.querySelector('#tmp_content');
+    if (elm) builderStuff.removeChild(elm);
+    elm = builderStuff.querySelector('#tmp_buildercontent');
+    if (elm) builderStuff.removeChild(elm);
     let html = `<div id="tmp_content" style="position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;"></div>
             <div id="tmp_buildercontent" style="position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;"></div>`;
-    dom$E.appendHtml(builderstuff, html);
-    let tmp = builderstuff.querySelector('#tmp_content');
+    dom$E.appendHtml(builderStuff, html);
+    let tmp = builderStuff.querySelector('#tmp_content');
     tmp.innerHTML = content.innerHTML; //Find subblocks (previously is-builder) in custom code blocks and save them to data-html-1, data-html-2, and so on.
 
     let blocks = tmp.querySelectorAll('[data-html]');
@@ -8559,7 +8564,7 @@ class HtmlUtil {
           _builder.removeAttribute('between-blocks-center'); // old  
           _builder.removeAttribute('hideelementhighlight'); 
            let builderhtml = _builder.innerHTML;
-          let tmpbuilder = builderstuff.querySelector('#tmp_buildercontent');
+          let tmpbuilder = builderStuff.querySelector('#tmp_buildercontent');
           tmpbuilder.innerHTML = builderhtml;
            let elms = tmp.querySelectorAll('.sortable-chosen');
           dom.removeClasses(elms, 'sortable-chosen');
@@ -8843,10 +8848,10 @@ class HtmlUtil {
       html = html.replace(/<font/g, '<span').replace(/<\/font/g, '</span');
     }
 
-    elm = builderstuff.querySelector('#tmp_content');
-    if (elm) builderstuff.removeChild(elm);
-    elm = builderstuff.querySelector('#tmp_buildercontent');
-    if (elm) builderstuff.removeChild(elm); // return html;
+    elm = builderStuff.querySelector('#tmp_content');
+    if (elm) builderStuff.removeChild(elm);
+    elm = builderStuff.querySelector('#tmp_buildercontent');
+    if (elm) builderStuff.removeChild(elm); // return html;
 
     let beautify = JsBeautify.html;
     return beautify(html);
@@ -9622,7 +9627,8 @@ const prepareSvgIcons = () => {
 class Snippets {
   constructor(builder) {
     this.builder = builder;
-    this.util = new Util(this.builder);
+    const util = this.builder.util;
+    this.util = util;
   }
 
   getSnippetsHtml() {
@@ -10519,8 +10525,8 @@ class Snippets {
 const dom$B = new Dom();
 
 const renderQuickAdd = builder => {
-  const util = new Util(builder);
-  const builderStuff = util.builderStuff();
+  const util = builder.util;
+  const builderStuff = builder.builderStuff;
   let quickadd = builderStuff.querySelector('.quickadd');
 
   if (!quickadd) {
@@ -11586,10 +11592,9 @@ class RowTool$1 {
   }
 
   position(row) {
-    const util = new Util(this.builder);
-    const builderstuff = util.builderStuff();
+    const builderStuff = this.builder.builderStuff;
     let rowTool = row.querySelector('.is-row-tool');
-    let rowMore = builderstuff.querySelector('.rowmore');
+    let rowMore = builderStuff.querySelector('.rowmore');
     dom$A.addClass(rowMore, 'transition1');
     const elm = rowTool.querySelector('.row-more');
     const top = elm.getBoundingClientRect().top + window.pageYOffset;
@@ -11626,10 +11631,9 @@ class ColumnTool$1 {
   }
 
   position(col) {
-    const util = new Util(this.builder);
-    const builderstuff = util.builderStuff();
-    this.columnTool = builderstuff.querySelector('.is-column-tool');
-    this.columnMore = builderstuff.querySelector('.columnmore');
+    const builderStuff = this.builder.builderStuff;
+    this.columnTool = builderStuff.querySelector('.is-column-tool');
+    this.columnMore = builderStuff.querySelector('.columnmore');
     dom$A.addClass(this.columnMore, 'transition1');
     setTimeout(() => {
       this.columnTool.style.top = col.getBoundingClientRect().top - 29 + window.pageYOffset + 'px';
@@ -11645,17 +11649,15 @@ class ColumnTool$1 {
   }
 
   hide() {
-    const util = new Util(this.builder);
-    const builderstuff = util.builderStuff();
-    this.columnTool = builderstuff.querySelector('.is-column-tool'); // this.columnMore = builderstuff.querySelector('.columnmore');
+    const builderStuff = this.builder.builderStuff;
+    this.columnTool = builderStuff.querySelector('.is-column-tool'); // this.columnMore = builderStuff.querySelector('.columnmore');
 
     dom$A.removeClass(this.columnTool, 'active');
   }
 
   show() {
-    const util = new Util(this.builder);
-    const builderstuff = util.builderStuff();
-    this.columnTool = builderstuff.querySelector('.is-column-tool'); // this.columnMore = builderstuff.querySelector('.columnmore');
+    const builderStuff = this.builder.builderStuff;
+    this.columnTool = builderStuff.querySelector('.is-column-tool'); // this.columnMore = builderStuff.querySelector('.columnmore');
 
     dom$A.addClass(this.columnTool, 'active');
   }
@@ -11778,7 +11780,8 @@ class Draggable$1 {
 const dom$z = new Dom();
 
 const renderGridEditor = builder => {
-  const util = new Util(builder);
+  const util = builder.util;
+  const builderStuff = builder.builderStuff;
   const grid = new Grid(builder);
   const htmlutil = new HtmlUtil(builder);
   let rowhtmlbutton = '';
@@ -11825,8 +11828,7 @@ const renderGridEditor = builder => {
     </div>`; //LATER:
   //<button title="${util.out('Element Tool')}" class="cell-elmtool"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-gear"></use></svg></button>
 
-  const builderstuff = util.builderStuff();
-  dom$z.appendHtml(builderstuff, html);
+  dom$z.appendHtml(builderStuff, html);
   new Draggable$1({
     selector: '.is-draggable'
   });
@@ -15101,8 +15103,8 @@ Sortable.mount(Remove, Revert);
 const dom$x = new Dom();
 
 const renderSnippetPanel = builder => {
-  const util = new Util(builder);
-  const builderStuff = util.builderStuff();
+  const util = builder.util;
+  const builderStuff = builder.builderStuff;
   let hideHandle = '';
   let sidePanel = builder.opts.sidePanel;
 
@@ -38430,9 +38432,9 @@ const dom$w = new Dom();
 class Image {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     let imageTool = builderStuff.querySelector('#divImageTool');
     let imageResizer;
 
@@ -40625,8 +40627,8 @@ const dom$v = new Dom();
 class Hyperlink {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
-    const builderStuff = util.builderStuff();
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.builderStuff = builderStuff;
     let linkTool = builderStuff.querySelector('#divLinkTool');
 
@@ -41179,9 +41181,9 @@ const dom$u = new Dom();
 class Spacer {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     let spacerTool = builderStuff.querySelector('.is-spacer-tool');
 
@@ -41345,9 +41347,9 @@ const dom$t = new Dom();
 class Module {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     let moduleTool = builderStuff.querySelector('.is-module-tool');
     let moduleModal;
@@ -41424,6 +41426,8 @@ class Module {
         var index = 1;
         const builders = module.querySelectorAll('[data-subblock]');
         Array.prototype.forEach.call(builders, builder => {
+          // Glide Slider Support
+          if (dom$t.hasClass(builder.parentNode, 'glide__slide--clone')) return;
           let builderhtml = builder.innerHTML;
           module.setAttribute('data-html-' + index, encodeURIComponent(builderhtml));
           index++;
@@ -41591,12 +41595,12 @@ const dom$s = new Dom();
 class Code {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
+    this.builderStuff = builderStuff;
     const htmlUtil = new HtmlUtil(builder);
     this.htmlUtil = htmlUtil;
-    const builderStuff = util.builderStuff();
-    this.builderStuff = builderStuff;
     let codeTool = builderStuff.querySelector('.is-code-tool');
 
     if (!codeTool) {
@@ -41793,9 +41797,9 @@ const dom$r = new Dom();
 class Iframe {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     let iframeTool = builderStuff.querySelector('.is-iframe-tool');
     let iframeModal;
@@ -41936,9 +41940,9 @@ const dom$q = new Dom();
 class Table {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     let tableTool = builderStuff.querySelector('.is-table-tool');
     let tableModal;
@@ -42451,9 +42455,9 @@ const dom$p = new Dom();
 class Video {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
-    this.util = util;
+    const util = this.builder.util;
     const builderStuff = this.builder.builderStuff;
+    this.util = util;
     this.builderStuff = builderStuff;
     let videoTool = builderStuff.querySelector('.is-video-tool');
 
@@ -42670,8 +42674,10 @@ const dom$o = new Dom();
 class Element$1 {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
+    this.builderStuff = builderStuff;
     this.hyperlink = new Hyperlink(builder);
     this.image = new Image(builder);
     this.spacer = new Spacer(builder);
@@ -42680,8 +42686,6 @@ class Element$1 {
     this.iframe = new Iframe(builder);
     this.table = new Table(builder);
     this.video = new Video(builder);
-    const builderStuff = util.builderStuff();
-    this.builderStuff = builderStuff;
     window.addEventListener('keydown', e => {
       if (e.keyCode === 46) {
         //delete
@@ -42944,11 +42948,11 @@ const dom$n = new Dom();
 class RowTool {
   constructor(builder) {
     this.builder = builder;
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.grid = new Grid(builder);
-    const util = new Util(this.builder);
     const htmlutil = new HtmlUtil(builder);
-    const builderstuff = util.builderStuff();
-    let rowMore = builderstuff.querySelector('.rowmore');
+    let rowMore = builderStuff.querySelector('.rowmore');
     let htmlbutton = '';
     if (builder.opts.rowHtmlEditor) htmlbutton = `<button type="button" title="${util.out('HTML')}" class="row-html">
                 <span><svg class="is-icon-flex" style="margin-right:-3px;width:12px;height:12px;"><use xlink:href="#ion-ios-arrow-left"></use></svg><svg class="is-icon-flex" style="margin-left:-2px;width:12px;height:12px;"><use xlink:href="#ion-ios-arrow-right"></use></svg></span>${util.out('HTML')}
@@ -42963,8 +42967,8 @@ class RowTool {
                     ${htmlbutton}
                 </div>
             </div>`;
-      dom$n.appendHtml(builderstuff, html);
-      rowMore = builderstuff.querySelector('.rowmore');
+      dom$n.appendHtml(builderStuff, html);
+      rowMore = builderStuff.querySelector('.rowmore');
       let elm = rowMore.querySelector('.row-up');
       if (elm) dom$n.addEventListener(elm, 'click', () => {
         this.grid.moveRowUp();
@@ -43009,8 +43013,8 @@ class RowTool {
   }
 
   render(row) {
-    const util = new Util(this.builder);
-    const builderstuff = util.builderStuff();
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     let rowMore = this.rowMore;
     let rowtool = row.querySelector('.is-row-tool');
 
@@ -43031,7 +43035,7 @@ class RowTool {
       });
       let elm = rowtool.querySelector('.row-grideditor');
       if (elm) dom$n.addEventListener(elm, 'click', () => {
-        const grideditor = builderstuff.querySelector('.grideditor');
+        const grideditor = builderStuff.querySelector('.grideditor');
 
         if (dom$n.hasClass(grideditor, 'active')) {
           dom$n.removeClass(grideditor, 'active');
@@ -43079,7 +43083,7 @@ class RowTool {
 
         dom$n.removeClass(row, 'row-outline'); //Hide Column tool
 
-        let columnTool = builderstuff.querySelector('.is-column-tool');
+        let columnTool = builderStuff.querySelector('.is-column-tool');
         dom$n.removeClass(columnTool, 'active');
         const elm = rowtool.querySelector('.row-more');
         const top = elm.getBoundingClientRect().top + window.pageYOffset;
@@ -43133,7 +43137,7 @@ class RowAddTool {
   }
 
   render(row) {
-    const util = new Util(this.builder);
+    const util = this.builder.util;
     const quickadd = renderQuickAdd(this.builder);
     let rowaddtool = row.querySelector('.is-rowadd-tool');
 
@@ -44848,9 +44852,9 @@ class ColumnTool {
   constructor(builder) {
     this.builder = builder;
     this.grid = new Grid(builder);
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     let columnTool = builderStuff.querySelector('.is-column-tool');
     let columnMore;
     let htmlbutton = '';
@@ -46279,9 +46283,9 @@ const dom$k = new Dom();
 class ELementStyleEditor {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     let modalStyles = builderStuff.querySelector('.editstyles');
 
@@ -46399,9 +46403,9 @@ const dom$j = new Dom();
 class ElementBoxStyles {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     const elementStyleEditor = new ELementStyleEditor(builder);
     let panelStuff = builderStuff.querySelector('#divElementBox');
@@ -46917,9 +46921,9 @@ const dom$i = new Dom();
 class ElementSpacingStyles {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     const elementStyleEditor = new ELementStyleEditor(builder);
     let panelStuff = builderStuff.querySelector('#divElementSpacing');
@@ -47570,9 +47574,9 @@ const dom$h = new Dom();
 class ElementBorderStyles {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     const elementStyleEditor = new ELementStyleEditor(builder);
     let panelStuff = builderStuff.querySelector('#divElementBorder');
@@ -48292,9 +48296,9 @@ const dom$g = new Dom();
 class ElementTextStyles {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     const elementStyleEditor = new ELementStyleEditor(builder);
     let panelStuff = builderStuff.querySelector('#divElementText');
@@ -48813,9 +48817,9 @@ const dom$f = new Dom();
 class ElementCornerStyles {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     const elementStyleEditor = new ELementStyleEditor(builder);
     let panelStuff = builderStuff.querySelector('#divElementCorner');
@@ -49008,9 +49012,9 @@ const dom$e = new Dom();
 class ElementShadowStyles {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     const elementStyleEditor = new ELementStyleEditor(builder);
     let panelStuff = builderStuff.querySelector('#divElementShadow');
@@ -49271,9 +49275,9 @@ const dom$d = new Dom();
 class ElementDisplayStyles {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     const elementStyleEditor = new ELementStyleEditor(builder);
     let panelStuff = builderStuff.querySelector('#divElementDisplay');
@@ -49462,9 +49466,9 @@ const dom$c = new Dom();
 class ElementPositionStyles {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     const elementStyleEditor = new ELementStyleEditor(builder);
     let panelStuff = builderStuff.querySelector('#divElementPosition');
@@ -49801,9 +49805,9 @@ const dom$b = new Dom();
 class ElementEffectStyles {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     const elementStyleEditor = new ELementStyleEditor(builder);
     let panelStuff = builderStuff.querySelector('#divElementEffect');
@@ -50356,9 +50360,9 @@ const dom$a = new Dom();
 class ElementAttributeStyles {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     let panelStuff = builderStuff.querySelector('#divElementAttribute');
     this.panelStuff = panelStuff;
@@ -50500,9 +50504,9 @@ const dom$9 = new Dom();
 class ElementAnimationStyles {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     let panelStuff = builderStuff.querySelector('#divElementAnimation');
     this.panelStuff = panelStuff;
@@ -50751,9 +50755,9 @@ let arrElms = [];
 class ElementPanel {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     let panel = builderStuff.querySelector('.elementstyles');
 
@@ -50980,13 +50984,14 @@ const dom$7 = new Dom();
 class ElementTool {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
+    this.builderStuff = builderStuff;
     const elementPanel = new ElementPanel(builder);
     this.elementPanel = elementPanel;
-    const builderstuff = util.builderStuff();
-    let elementTool = builderstuff.querySelector('.is-element-tool');
-    let elementMore = builderstuff.querySelector('.elmmore');
+    let elementTool = builderStuff.querySelector('.is-element-tool');
+    let elementMore = builderStuff.querySelector('.elmmore');
 
     if (!elementTool) {
       let html = `<div class="is-tool is-element-tool">
@@ -51006,9 +51011,9 @@ class ElementTool {
                 </div>
             </div>
             `;
-      dom$7.appendHtml(builderstuff, html);
-      elementTool = builderstuff.querySelector('.is-element-tool');
-      elementMore = builderstuff.querySelector('.elmmore'); // Prepare for tooltip
+      dom$7.appendHtml(builderStuff, html);
+      elementTool = builderStuff.querySelector('.is-element-tool');
+      elementMore = builderStuff.querySelector('.elmmore'); // Prepare for tooltip
 
       let elms = elementTool.querySelectorAll('[title]');
       Array.prototype.forEach.call(elms, elm => {
@@ -51094,14 +51099,14 @@ class ElementTool {
 
             if (cell.childElementCount === 0 && row.childElementCount === 3) {
               row.parentNode.removeChild(row);
-              let columnTool = builderstuff.querySelector('.is-column-tool'); // quick access
+              let columnTool = builderStuff.querySelector('.is-column-tool'); // quick access
 
               dom$7.removeClass(columnTool, 'active');
               util.checkEmpty();
             } else if (cell.childElementCount === 0) {
               row.removeChild(cell);
               util.fixLayout(row, builder);
-              let columnTool = builderstuff.querySelector('.is-column-tool'); // // quick access
+              let columnTool = builderStuff.querySelector('.is-column-tool'); // // quick access
 
               dom$7.removeClass(columnTool, 'active');
             }
@@ -51507,8 +51512,8 @@ const dom$6 = new Dom();
 class Preferences {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
-    const builderstuff = util.builderStuff();
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     let htmlThemes = '';
 
     if (this.builder.themes) {
@@ -51528,7 +51533,7 @@ class Preferences {
       htmlThemes += '</div>';
     }
 
-    let config = builderstuff.querySelector('.viewconfig');
+    let config = builderStuff.querySelector('.viewconfig');
 
     if (!config) {
       let html = `<div class="is-modal viewconfig">
@@ -51654,8 +51659,8 @@ class Preferences {
                     </div>
                 </div>
             </div>`;
-      dom$6.appendHtml(builderstuff, html);
-      config = builderstuff.querySelector('.viewconfig');
+      dom$6.appendHtml(builderStuff, html);
+      config = builderStuff.querySelector('.viewconfig');
 
       if (!(builder.opts.snippetList === '#divSnippetList' && builder.opts.snippetJSON.snippets.length > 0)) {
         config.querySelector('.option-opensnippets').style.display = 'none';
@@ -51820,9 +51825,9 @@ class Preferences {
         this.setColumnTool(true);
         this.setBuilderMode('');
         this.setEmailMode();
-        builderstuff.querySelector('#divHideCellTool').style.display = 'none';
-        builderstuff.querySelector('#divOutlineMode').style.display = 'none';
-        builderstuff.querySelector('#divBuilderMode').style.display = 'none';
+        builderStuff.querySelector('#divHideCellTool').style.display = 'none';
+        builderStuff.querySelector('#divOutlineMode').style.display = 'none';
+        builderStuff.querySelector('#divBuilderMode').style.display = 'none';
       }
     }
 
@@ -52005,23 +52010,23 @@ class Preferences {
   }
 
   setToolbar(toolbar) {
-    let builderstuff = document.querySelector('#_cbhtml');
+    const builderStuff = this.builder.builderStuff;
 
     if (toolbar === 'top') {
-      builderstuff.removeAttribute('toolbarleft', '');
-      builderstuff.removeAttribute('toolbarright', '');
+      builderStuff.removeAttribute('toolbarleft', '');
+      builderStuff.removeAttribute('toolbarright', '');
     } else if (toolbar === 'left') {
-      builderstuff.setAttribute('toolbarleft', '');
-      builderstuff.removeAttribute('toolbarright', '');
+      builderStuff.setAttribute('toolbarleft', '');
+      builderStuff.removeAttribute('toolbarright', '');
     } else if (toolbar === 'right') {
-      builderstuff.setAttribute('toolbarright', '');
-      builderstuff.removeAttribute('toolbarleft', '');
+      builderStuff.setAttribute('toolbarright', '');
+      builderStuff.removeAttribute('toolbarleft', '');
     } // this.positionToolbar();
 
 
-    const rteTool = builderstuff.querySelector('.is-rte-tool');
-    const rteMoreOptions = builderstuff.querySelector('.rte-more-options');
-    const elementRteMoreOptions = builderstuff.querySelector('.elementrte-more-options');
+    const rteTool = builderStuff.querySelector('.is-rte-tool');
+    const rteMoreOptions = builderStuff.querySelector('.rte-more-options');
+    const elementRteMoreOptions = builderStuff.querySelector('.elementrte-more-options');
     if (rteTool) this.builder.rte.positionToolbar();
 
     if (rteMoreOptions) {
@@ -52033,14 +52038,14 @@ class Preferences {
   }
 
   setEmailMode() {
-    let builderstuff = document.querySelector('#_cbhtml');
-    builderstuff.setAttribute('emailmode', '');
+    const builderStuff = this.builder.builderStuff;
+    builderStuff.setAttribute('emailmode', '');
   }
   /*
   positionToolbar() { // direct
-      let builderstuff = document.querySelector('#_cbhtml');
-      const rteTool = builderstuff.querySelector('.is-rte-tool');
-      const rteMoreOptions = builderstuff.querySelector('.rte-more-options');
+      let builderStuff = document.querySelector('#_cbhtml');
+      const rteTool = builderStuff.querySelector('.is-rte-tool');
+      const rteMoreOptions = builderStuff.querySelector('.rte-more-options');
       if(rteTool){ // check in case rte stuff hasn't rendered yet
            const viewportWidth = window.innerWidth;
           const viewportHeight = window.innerHeight;
@@ -52071,19 +52076,19 @@ class Preferences {
       }
   }
    setToolbarDisplay(toolbardisplay) {
-      let builderstuff = document.querySelector('#_cbhtml');
+      let builderStuff = document.querySelector('#_cbhtml');
       if(toolbardisplay==='auto'){
-           builderstuff.removeAttribute('toolbarstay','');
+           builderStuff.removeAttribute('toolbarstay','');
            // direct
-          const rteTool = builderstuff.querySelector('.is-rte-tool');
+          const rteTool = builderStuff.querySelector('.is-rte-tool');
           if(rteTool) { // check in case rte stuff hasn't rendered yet
               rteTool.style.display = '';
           }
        } else {
-           builderstuff.setAttribute('toolbarstay','');
+           builderStuff.setAttribute('toolbarstay','');
            // direct
           const viewportWidth = window.innerWidth;
-          const rteTool = builderstuff.querySelector('.is-rte-tool');
+          const rteTool = builderStuff.querySelector('.is-rte-tool');
           if(rteTool) { // check in case rte stuff hasn't rendered yet
               let w = rteTool.offsetWidth;
               let left = (viewportWidth/2) - (w/2);
@@ -52095,12 +52100,12 @@ class Preferences {
 
 
   setElementTool(hideelementtool) {
-    let builderstuff = document.querySelector('#_cbhtml');
+    const builderStuff = this.builder.builderStuff;
 
     if (hideelementtool) {
-      builderstuff.setAttribute('hideelementtool', '');
+      builderStuff.setAttribute('hideelementtool', '');
     } else {
-      builderstuff.removeAttribute('hideelementtool', '');
+      builderStuff.removeAttribute('hideelementtool', '');
     }
   }
 
@@ -52127,12 +52132,12 @@ class Preferences {
   }
 
   setColumnTool(hidecolumntool) {
-    let builderstuff = document.querySelector('#_cbhtml');
+    const builderStuff = this.builder.builderStuff;
 
     if (hidecolumntool) {
-      builderstuff.setAttribute('hidecolumntool', '');
+      builderStuff.setAttribute('hidecolumntool', '');
     } else {
-      builderstuff.removeAttribute('hidecolumntool', '');
+      builderStuff.removeAttribute('hidecolumntool', '');
     }
   }
 
@@ -52148,15 +52153,15 @@ class Preferences {
   }
 
   setToolStyle(toolStyle) {
-    let builderstuff = document.querySelector('#_cbhtml');
+    const builderStuff = this.builder.builderStuff;
     const builders = document.querySelectorAll(this.builder.opts.container);
     Array.prototype.forEach.call(builders, builder => {
       if (toolStyle === 'gray') {
         builder.setAttribute('gray', '');
-        builderstuff.setAttribute('gray', '');
+        builderStuff.setAttribute('gray', '');
       } else {
         builder.removeAttribute('gray');
-        builderstuff.removeAttribute('gray', '');
+        builderStuff.removeAttribute('gray', '');
       }
     });
   }
@@ -52195,24 +52200,24 @@ class Preferences {
   }
 
   setBuilderMode(builderMode) {
-    let builderstuff = document.querySelector('#_cbhtml');
+    const builderStuff = this.builder.builderStuff;
     const builders = document.querySelectorAll(this.builder.opts.container);
     Array.prototype.forEach.call(builders, builder => {
       if (builderMode === '') {
         builder.removeAttribute('minimal');
         builder.removeAttribute('clean');
-        builderstuff.removeAttribute('minimal');
-        builderstuff.removeAttribute('clean');
+        builderStuff.removeAttribute('minimal');
+        builderStuff.removeAttribute('clean');
       } else if (builderMode === 'minimal') {
         builder.setAttribute('minimal', '');
         builder.removeAttribute('clean');
-        builderstuff.setAttribute('minimal', '');
-        builderstuff.removeAttribute('clean');
+        builderStuff.setAttribute('minimal', '');
+        builderStuff.removeAttribute('clean');
       } else if (builderMode === 'clean') {
         builder.setAttribute('clean', '');
         builder.removeAttribute('minimal');
-        builderstuff.setAttribute('clean', '');
-        builderstuff.removeAttribute('minimal');
+        builderStuff.setAttribute('clean', '');
+        builderStuff.removeAttribute('minimal');
       }
     });
   }
@@ -52290,20 +52295,14 @@ class Preferences {
 
 }
 
-/*
-LATER:
-- Get/show current font size, line height & letter spacing
-- Click toggle button shows gray highlight
-- Image di luar domain gak bisa di-edit (kasih warning)
-*/
 const dom$5 = new Dom();
 
 class Rte {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
     this.util = util;
-    const builderStuff = util.builderStuff();
     this.builderStuff = builderStuff;
     this.elementStyleEditor = new ELementStyleEditor(builder);
     this.hyperlink = new Hyperlink(builder);
@@ -52508,18 +52507,18 @@ class Rte {
                         <button title="18px" data-value="18">18</button>
                         <button title="21px" data-value="21">21</button>
                         <button title="24px" data-value="24">24</button>
-                        <button title="28px" data-value="28">28</button>
+                        <!--<button title="28px" data-value="28">28</button>-->
                         <button title="32px" data-value="32">32</button>
-                        <!--<button title="35px" data-value="35">35</button>-->
-                        <button title="38px" data-value="38">38</button>
-                        <!--<button title="42px" data-value="42">42</button>-->
+                        <!--<button title="38px" data-value="38">38</button>-->
                         <button title="48px" data-value="48">48</button>
-                        <!--<button title="54px" data-value="54">54</button>-->
-                        <button title="60px" data-value="60">60</button>
-                        <!--<button title="68px" data-value="68">68</button>-->
+                        <!--<button title="60px" data-value="60">60</button>-->
                         <button title="76px" data-value="76">76</button>
-                        <!--<button title="84px" data-value="84">84</button>-->
                         <button title="96px" data-value="96">96</button>
+
+                        <button title="120px" data-value="120">120</button>
+                        <button title="160px" data-value="160">160</button>
+                        <button title="200px" data-value="200">200</button>
+
                         <button title="${util.out('Decrease')}" data-value="-" style="font-size:13px">-</button>
                         <button title="${util.out('Increase')}" data-value="+" style="font-size:13px">+</button>
                         <button title="${util.out('Clear')}" data-value=""><svg class="is-icon-flex" style="width:18px;height:18px;margin-top: 2px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
@@ -54160,14 +54159,41 @@ class Rte {
         } // var text = dom.getSelected();
 
 
-        this.builder.uo.saveForUndo();
-        let currentLineHeight = Number(window.getComputedStyle(elm).getPropertyValue('line-height').match(/\d+/)[0]);
+        this.builder.uo.saveForUndo(); // let currentLineHeight = Number(window.getComputedStyle(elm).getPropertyValue('line-height').match(/\d+/)[0]);
+
+        let isInPx = false;
+        let currentLineHeight = elm.style.lineHeight;
+
+        if (currentLineHeight) {
+          if (currentLineHeight.indexOf('px') === -1) {
+            currentLineHeight = parseFloat(currentLineHeight);
+          } else {
+            isInPx = true;
+          }
+        } else {
+          isInPx = true;
+        }
+
+        if (isInPx) {
+          let fontSize = Number(window.getComputedStyle(elm).getPropertyValue('font-size').match(/\d+/)[0]);
+          currentLineHeight = Number(window.getComputedStyle(elm).getPropertyValue('line-height').match(/\d+/)[0]);
+
+          if (fontSize > currentLineHeight) {
+            currentLineHeight = fontSize / currentLineHeight;
+          } else if (fontSize < currentLineHeight) {
+            currentLineHeight = currentLineHeight / fontSize;
+          } else {
+            currentLineHeight = 1;
+          }
+        }
+
         let lineheight;
 
         if (num === '+') {
-          lineheight = currentLineHeight + 1 + 'px';
+          lineheight = currentLineHeight + 0.1;
         } else if (num === '-') {
-          lineheight = currentLineHeight - 1 + 'px';
+          lineheight = currentLineHeight - 0.1;
+          if (lineheight < 0.2) lineheight = 0.2; // prevent very small number
         } else if (num === '') {
           lineheight = '';
         } else {
@@ -56566,8 +56592,10 @@ const dom$3 = new Dom();
 
 class Tooltip {
   constructor(builder) {
-    const util = new Util(builder);
-    const builderStuff = util.builderStuff();
+    this.builder = builder;
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
+    this.util = util;
     this.builderStuff = builderStuff;
     let tooltip = builderStuff.querySelector('.is-tooltip');
 
@@ -56692,17 +56720,18 @@ const dom$2 = new Dom();
 class Lightbox {
   constructor(builder) {
     this.builder = builder;
-    const util = new Util(builder);
-    let builderStuff = document.querySelector('#_cbhtml'); // All editing controls will be placed within <div id="_cbhtml">...</div>
-
-    if (!builderStuff) {
-      builderStuff = dom$2.createElement('div');
-      builderStuff.id = '_cbhtml';
-      builderStuff.className = 'is-ui';
-      dom$2.appendChild(document.body, builderStuff);
-    }
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
+    this.util = util;
+    this.builderStuff = builderStuff; // let builderStuff = document.querySelector('#_cbhtml'); // All editing controls will be placed within <div id="_cbhtml">...</div>
+    // if(!builderStuff) {
+    //     builderStuff = dom.createElement('div');
+    //     builderStuff.id = '_cbhtml';
+    //     builderStuff.className = 'is-ui';
+    //     dom.appendChild(document.body, builderStuff);
+    // } 
+    // this.builderStuff = builderStuff;
 
-    this.builderStuff = builderStuff;
     let html = `
             <div class="is-lightbox lightbox-externalvideo">
                 <button class="cmd-lightbox-close" title="${util.out('Close')}" type="button" style="flex:none;position:absolute;top:0;right:0;background:none;z-index:1;">