@innovastudio/contentbuilder 1.5.82 → 1.5.84

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.82",
+  "version": "1.5.84",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "types": "index.d.ts",

package/public/contentbuilder/contentbuilder.css

@@ -1108,6 +1108,30 @@ button:focus-visible {
 .is-ui .is-rte-pop.rte-paragraph-options > ul > li > *:not(p) {
   transform: scale(0.8);
 }
+#_cbhtml .is-rte-pop.rte-paragraph-options > ul > li h1,
+.is-ui .is-rte-pop.rte-paragraph-options > ul > li h1 {
+  font-size: 2.5rem !important;
+}
+#_cbhtml .is-rte-pop.rte-paragraph-options > ul > li h2,
+.is-ui .is-rte-pop.rte-paragraph-options > ul > li h2 {
+  font-size: 2rem !important;
+}
+#_cbhtml .is-rte-pop.rte-paragraph-options > ul > li h3,
+.is-ui .is-rte-pop.rte-paragraph-options > ul > li h3 {
+  font-size: 1.73rem !important;
+}
+#_cbhtml .is-rte-pop.rte-paragraph-options > ul > li h4,
+.is-ui .is-rte-pop.rte-paragraph-options > ul > li h4 {
+  font-size: 1.5rem !important;
+}
+#_cbhtml .is-rte-pop.rte-paragraph-options > ul > li h5,
+.is-ui .is-rte-pop.rte-paragraph-options > ul > li h5 {
+  font-size: 1.25rem !important;
+}
+#_cbhtml .is-rte-pop.rte-paragraph-options > ul > li h6,
+.is-ui .is-rte-pop.rte-paragraph-options > ul > li h6 {
+  font-size: 1rem !important;
+}
 #_cbhtml .is-rte-pop.rte-textsetting-options > div,
 .is-ui .is-rte-pop.rte-textsetting-options > div {
   width: 233px;
@@ -5762,7 +5786,7 @@ button:focus-visible {
   background: transparent;
 }
 .is-builder[clean] .is-tool.is-row-tool .row-grideditor svg {
-  fill: #000;
+  fill: #000 !important;
   width: 13px;
   height: 13px;
   margin-left: -1px;

package/public/contentbuilder/contentbuilder.esm.js

@@ -1208,6 +1208,44 @@ const renderQuickAdd = builder => {
   const util = builder.util;
   const builderStuff = builder.builderStuff;
   const dom = builder.dom;
+  let quickAddButtons = ['paragraph', 'headline', 'image', 'list', 'heading1', 'heading2', 'heading3', 'heading4', 'quote', 'preformatted', 'button', 'twobutton', 'map', 'youtube', 'video', 'icon', 'svg', 'table', 'social', 'code', 'spacer']; // default
+
+  if (builder.quickAddButtons) {
+    quickAddButtons = builder.quickAddButtons;
+  }
+  const buttonTemplates = {
+    paragraph: `<button title="${util.out('Paragraph')}" class="add-paragraph"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-align-full"></use></svg></span>${util.out('Paragraph')}</button>`,
+    headline: `<button title="${util.out('Headline')}" class="add-headline"><span style="font-family:serif;display:block;margin:0 0 8px;font-size:11px;">H</span>${util.out('Headline')}</button>`,
+    image: `<button title="${util.out('Image')}" class="add-image"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex ion-image" style="width:14px;height:14px;"><use xlink:href="#ion-image"></use></svg></span>${util.out('Image')}</button>`,
+    list: `<button title="${util.out('List')}" class="add-list"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-list-bullet"></use></svg></span>${util.out('List')}</button>`,
+    heading1: `<button title="${util.out('Heading 1')}" class="add-heading1"><span style="font-family:serif;display:block;margin:0 0 8px;">H1</span>${util.out('Heading 1')}</button>`,
+    heading2: `<button title="${util.out('Heading 2')}" class="add-heading2"><span style="font-family:serif;display:block;margin:0 0 8px;">H2</span>${util.out('Heading 2')}</button>`,
+    heading3: `<button title="${util.out('Heading 3')}" class="add-heading3"><span style="font-family:serif;display:block;margin:0 0 8px;">H3</span>${util.out('Heading 3')}</button>`,
+    heading4: `<button title="${util.out('Heading 4')}" class="add-heading4"><span style="font-family:serif;display:block;margin:0 0 8px;">H4</span>${util.out('Heading 4')}</button>`,
+    quote: `<button title="${util.out('Quote')}" class="add-quote"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-quote"></use></svg></span>${util.out('Quote')}</button>`,
+    preformatted: `<button style="display:none" title="${util.out('Preformatted')}" class="add-preformatted"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-code"></use></svg></span>${util.out('Preformatted')}</button>`,
+    button: `<button title="${util.out('Button')}" class="add-button"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;border:#a1a1a1 1px solid;background:#f3f3f3;width:10px;height:4px;"></span></span>${util.out('Button')}</button>`,
+    twobutton: `<button title="${util.out('Two Button')}" class="add-twobutton"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;border:#a1a1a1 1px solid;background:#f3f3f3;width:10px;height:4px;"></span></span>${util.out('Two Button')}</button>`,
+    map: `<button title="${util.out('Map')}" class="add-map"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-location"></use></svg></use></svg></svg></span>${util.out('Map')}</button>`,
+    youtube: `<button title="${util.out('Youtube')}" class="add-youtube"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-social-youtube-outline"></use></svg></use></svg></svg></span>${util.out('Youtube')}</button>`,
+    video: `<button title="${util.out('Video')}" class="add-video"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-ios-play"></use></svg></use></svg></svg></span>${util.out('Video')}</button>`,
+    audio: `<button title="${util.out('Audio')}" class="add-audio"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-volume-medium"></use></svg></use></svg></svg></span>${util.out('Audio')}</button>`,
+    icon: `<button title="${util.out('Icon')}" class="add-icon"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-android-happy"></use></svg></use></svg></svg></span>${util.out('Icon')}</button>`,
+    svg: `<button title="${util.out('SVG')}" class="add-svg"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-5px"><use xlink:href="#icon-svg"></use></svg></use></svg></svg></span>${util.out('SVG')}</button>`,
+    table: `<button title="${util.out('Table')}" class="add-table"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#icon-table"></use></svg></use></svg></svg></span>${util.out('Table')}</button>`,
+    social: `<button title="${util.out('Social Links')}" class="add-social"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-social-twitter"></use></svg></use></svg></svg></span>${util.out('Social Links')}</button>`,
+    code: `<button title="${util.out('HTML/JS')}" class="add-code"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-code"></use></svg></use></svg></svg></span>${util.out('HTML/JS')}</button>`,
+    spacer: `<button title="${util.out('Spacer')}" class="add-spacer"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;background:#eee;width:30px;height:5px;"></span></span>${util.out('Spacer')}</button>`,
+    line: `<button title="${util.out('Line')}" class="add-line"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;background:#ddd;width:30px;height:2px;"></span></span>${util.out('Line')}</button>`
+  };
+
+  // Filter buttons (backward compatibility)
+  const filteredButtons = quickAddButtons.filter(item => {
+    if (builder.opts.emailMode && item === 'button') return false;
+    if (builder.opts.emailMode && item === 'twobutton') return false;
+    return true;
+  });
+  let buttonsHtml = filteredButtons.map(item => buttonTemplates[item] || '').join('');
   let quickadd = builderStuff.querySelector('.quickadd');
   if (!quickadd) {
     const html = `<div class="is-pop quickadd arrow-right" style="z-index:10003;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
@@ -1217,34 +1255,11 @@ const renderQuickAdd = builder => {
             <div class="is-pop-tab-item active" data-value="right">${util.out('Add to Right')}</div>
         </div>
         <div style="padding:12px;display:flex;flex-direction:row;flex-flow: wrap;justify-content: center;align-items: center;">
-            <button title="${util.out('Paragraph')}" class="add-paragraph"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-align-full"></use></svg></span>${util.out('Paragraph')}</button>
-            <button title="${util.out('Headline')}" class="add-headline"><span style="font-family:serif;display:block;margin:0 0 8px;font-size:11px;">H</span>${util.out('Headline')}</button>
-            <button title="${util.out('Image')}" class="add-image"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex ion-image" style="width:14px;height:14px;"><use xlink:href="#ion-image"></use></svg></span>${util.out('Image')}</button>
-            <button title="${util.out('List')}" class="add-list"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-list-bullet"></use></svg></span>${util.out('List')}</button>
-            <button title="${util.out('Heading 1')}" class="add-heading1"><span style="font-family:serif;display:block;margin:0 0 8px;">H1</span>${util.out('Heading 1')}</button>
-            <button title="${util.out('Heading 2')}" class="add-heading2"><span style="font-family:serif;display:block;margin:0 0 8px;">H2</span>${util.out('Heading 2')}</button>
-            <button title="${util.out('Heading 3')}" class="add-heading3"><span style="font-family:serif;display:block;margin:0 0 8px;">H3</span>${util.out('Heading 3')}</button>
-            <button title="${util.out('Heading 4')}" class="add-heading4"><span style="font-family:serif;display:block;margin:0 0 8px;">H4</span>${util.out('Heading 4')}</button>
-            <button title="${util.out('Quote')}" class="add-quote"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-quote"></use></svg></span>${util.out('Quote')}</button>
-            <button style="display:none" title="${util.out('Preformatted')}" class="add-preformatted"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-code"></use></svg></span>${util.out('Preformatted')}</button>
-            ${builder.opts.emailMode ? '' : `<button title="${util.out('Button')}" class="add-button"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;border:#a1a1a1 1px solid;background:#f3f3f3;width:10px;height:4px;"></span></span>${util.out('Button')}</button>`}
-            ${builder.opts.emailMode ? '' : `<button title="${util.out('Two Button')}" class="add-twobutton"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;border:#a1a1a1 1px solid;background:#f3f3f3;width:10px;height:4px;"></span></span>${util.out('Two Button')}</button>`}
-            <button title="${util.out('Map')}" class="add-map"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-location"></use></svg></use></svg></svg></span>${util.out('Map')}</button>
-            <button title="${util.out('Youtube')}" class="add-youtube"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-social-youtube-outline"></use></svg></use></svg></svg></span>${util.out('Youtube')}</button>
-            <button title="${util.out('Video')}" class="add-video"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-ios-play"></use></svg></use></svg></svg></span>${util.out('Video')}</button>
-            <button style="display:none" title="${util.out('Audio')}" class="add-audio"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-volume-medium"></use></svg></use></svg></svg></span>${util.out('Audio')}</button>
-            <button title="${util.out('Icon')}" class="add-icon"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-android-happy"></use></svg></use></svg></svg></span>${util.out('Icon')}</button>
-            <button title="${util.out('SVG')}" class="add-svg"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-5px"><use xlink:href="#icon-svg"></use></svg></use></svg></svg></span>${util.out('SVG')}</button>
-            <button title="${util.out('Table')}" class="add-table"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#icon-table"></use></svg></use></svg></svg></span>${util.out('Table')}</button>
-            <button title="${util.out('Social Links')}" class="add-social"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-social-twitter"></use></svg></use></svg></svg></span>${util.out('Social Links')}</button>
-            <button title="${util.out('HTML/JS')}" class="add-code"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-code"></use></svg></use></svg></svg></span>${util.out('HTML/JS')}</button>
-            <button title="${util.out('Spacer')}" class="add-spacer"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;background:#eee;width:30px;height:5px;"></span></span>${util.out('Spacer')}</button>
-            <button style="display:none" title="${util.out('Line')}" class="add-line"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;background:#ddd;width:30px;height:2px;"></span></span>${util.out('Line')}</button>
-            <div class="pop-separator"></div>
-            <button title="${util.out('More...')}" class="add-more" style="flex-direction:initial;">${util.out('More...')}</button>
+            ${buttonsHtml}
+            <div class="pop-separator" ${builder.noSnippets ? ' style="display:none"' : ''}></div>
+            <button title="${util.out('More...')}" class="add-more" style="flex-direction:initial;${builder.noSnippets ? 'display:none' : ''}">${util.out('More...')}</button>
         </div>
-        </div>
-        `;
+        </div>`;
     dom.appendHtml(builderStuff, html);
     quickadd = builderStuff.querySelector('.quickadd');
     let tabs = quickadd.querySelectorAll('.is-pop-tab-item');
@@ -1344,7 +1359,7 @@ const renderQuickAdd = builder => {
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-button');
-    if (elm) dom.addEventListener(elm, 'click', () => {
+    dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       let 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>
@@ -1355,7 +1370,7 @@ const renderQuickAdd = builder => {
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-twobutton');
-    if (elm) dom.addEventListener(elm, 'click', () => {
+    dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
       let 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>
@@ -51619,20 +51634,20 @@ class RowTool {
         const separator = columnMore.querySelector('.is-separator');
         let nogrid = cell.closest('[nogrid]'); //dom.parentsHasAttribute(col, 'nogrid');
         if (nogrid) {
-          btnPrev.style.display = 'none';
-          btnNext.style.display = 'none';
-          btnUp.style.display = 'none';
-          btnDown.style.display = 'none';
+          if (btnPrev) btnPrev.style.display = 'none';
+          if (btnNext) btnNext.style.display = 'none';
+          if (btnUp) btnUp.style.display = 'none';
+          if (btnDown) btnDown.style.display = 'none';
           if (btnIncrease) btnIncrease.style.display = 'none';
           if (btnDecrease) btnDecrease.style.display = 'none';
-          btnDuplicate.style.display = 'none';
-          btnPrev.setAttribute('disabled', 'disabled');
-          btnNext.setAttribute('disabled', 'disabled');
-          btnUp.setAttribute('disabled', 'disabled');
-          btnDown.setAttribute('disabled', 'disabled');
-          btnIncrease.setAttribute('disabled', 'disabled');
-          btnDecrease.setAttribute('disabled', 'disabled');
-          btnDuplicate.setAttribute('disabled', 'disabled');
+          if (btnDuplicate) btnDuplicate.style.display = 'none';
+          if (btnPrev) btnPrev.setAttribute('disabled', 'disabled');
+          if (btnNext) btnNext.setAttribute('disabled', 'disabled');
+          if (btnUp) btnUp.setAttribute('disabled', 'disabled');
+          if (btnDown) btnDown.setAttribute('disabled', 'disabled');
+          if (btnIncrease) btnIncrease.setAttribute('disabled', 'disabled');
+          if (btnDecrease) btnDecrease.setAttribute('disabled', 'disabled');
+          if (btnDuplicate) btnDuplicate.setAttribute('disabled', 'disabled');
           let btnColHtml = columnMore.querySelector('.cell-html');
           if (btnColHtml) btnColHtml.style.display = '';
           if (cell.getAttribute('data-html')) {
@@ -51642,20 +51657,20 @@ class RowTool {
             this.columnTool.querySelector('.cell-more').setAttribute('disabled', 'disabled');
           }
         } else {
-          btnPrev.style.display = '';
-          btnNext.style.display = '';
-          btnUp.style.display = '';
-          btnDown.style.display = '';
+          if (btnPrev) btnPrev.style.display = '';
+          if (btnNext) btnNext.style.display = '';
+          if (btnUp) btnUp.style.display = '';
+          if (btnDown) btnDown.style.display = '';
           if (btnIncrease) btnIncrease.style.display = '';
           if (btnDecrease) btnDecrease.style.display = '';
-          btnDuplicate.style.display = '';
-          btnPrev.removeAttribute('disabled');
-          btnNext.removeAttribute('disabled');
-          btnUp.removeAttribute('disabled');
-          btnDown.removeAttribute('disabled');
+          if (btnDuplicate) btnDuplicate.style.display = '';
+          if (btnPrev) btnPrev.removeAttribute('disabled');
+          if (btnNext) btnNext.removeAttribute('disabled');
+          if (btnUp) btnUp.removeAttribute('disabled');
+          if (btnDown) btnDown.removeAttribute('disabled');
           if (btnIncrease) btnIncrease.removeAttribute('disabled');
           if (btnDecrease) btnDecrease.removeAttribute('disabled');
-          btnDuplicate.removeAttribute('disabled');
+          if (btnDuplicate) btnDuplicate.removeAttribute('disabled');
           let btnColHtml = columnMore.querySelector('.cell-html');
           if (btnColHtml) {
             btnColHtml.style.display = '';
@@ -51669,21 +51684,21 @@ class RowTool {
 
           if (row.childElementCount - num === 1) {
             //-num => minus is-row-tool, is-col-tool, is-rowadd-tool & is-row-overlay
-            btnPrev.style.display = 'none';
-            btnNext.style.display = 'none';
+            if (btnPrev) btnPrev.style.display = 'none';
+            if (btnNext) btnNext.style.display = 'none';
             if (btnIncrease) btnIncrease.style.display = 'none';
             if (btnDecrease) btnDecrease.style.display = 'none';
-            btnPrev.setAttribute('disabled', 'disabled');
-            btnNext.setAttribute('disabled', 'disabled');
+            if (btnPrev) btnPrev.setAttribute('disabled', 'disabled');
+            if (btnNext) btnNext.setAttribute('disabled', 'disabled');
             if (btnIncrease) btnIncrease.setAttribute('disabled', 'disabled');
             if (btnDecrease) btnDecrease.setAttribute('disabled', 'disabled');
           } else {
-            btnPrev.style.display = '';
-            btnNext.style.display = '';
+            if (btnPrev) btnPrev.style.display = '';
+            if (btnNext) btnNext.style.display = '';
             if (btnIncrease) btnIncrease.style.display = '';
             if (btnDecrease) btnDecrease.style.display = '';
-            btnPrev.removeAttribute('disabled');
-            btnNext.removeAttribute('disabled');
+            if (btnPrev) btnPrev.removeAttribute('disabled');
+            if (btnNext) btnNext.removeAttribute('disabled');
             if (btnIncrease) btnIncrease.removeAttribute('disabled');
             if (btnDecrease) btnDecrease.removeAttribute('disabled');
           }
@@ -51711,18 +51726,18 @@ class RowTool {
           }
         }
         if (cell.classList.contains('column-lock')) {
-          btnPrev.style.display = 'none';
-          btnNext.style.display = 'none';
-          btnUp.style.display = 'none';
-          btnDown.style.display = 'none';
-          btnIncrease.style.display = 'none';
-          btnDecrease.style.display = 'none';
-          btnDuplicate.style.display = 'none';
-          separator.style.display = 'none';
-          btnLock.style.display = 'none';
+          if (btnPrev) btnPrev.style.display = 'none';
+          if (btnNext) btnNext.style.display = 'none';
+          if (btnUp) btnUp.style.display = 'none';
+          if (btnDown) btnDown.style.display = 'none';
+          if (btnIncrease) btnIncrease.style.display = 'none';
+          if (btnDecrease) btnDecrease.style.display = 'none';
+          if (btnDuplicate) btnDuplicate.style.display = 'none';
+          if (separator) separator.style.display = 'none';
+          if (btnLock) btnLock.style.display = 'none';
         } else {
-          separator.style.display = '';
-          btnLock.style.display = '';
+          if (separator) separator.style.display = '';
+          if (btnLock) btnLock.style.display = '';
         }
       });
       const btnCellRemove = coltool.querySelector('.cell-remove');
@@ -51850,20 +51865,33 @@ class RowTool {
     const util = this.builder.util;
     const dom = this.builder.dom;
     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')}
-            </button>`;
     if (!rowMore) {
+      let rowMoreButtons = ['moveup', 'movedown', 'duplicate', 'html', 'separator', 'lock', 'settings']; // default
+
+      if (builder.rowMoreButtons) {
+        rowMoreButtons = builder.rowMoreButtons;
+      }
+      const buttonTemplates = {
+        moveup: `<button style="flex: 1 1 calc(50% - 10px);" type="button" title="${util.out('Move Up')}" class="row-up"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></span>${util.out('Move Up')}</button>`,
+        movedown: `<button style="flex: 1 1 calc(50% - 10px);" type="button" title="${util.out('Move Down')}" class="row-down"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></span>${util.out('Move Down')}</button>`,
+        duplicate: `<button style="flex: 1 1 calc(50% - 10px);" type="button" title="${util.out('Duplicate')}" class="row-duplicate"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></span>${util.out('Duplicate')}</button>`,
+        html: `<button style="flex: 1 1 calc(50% - 10px);" 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')}
+                    </button>`,
+        separator: '<div class="is-separator"></div>',
+        lock: `<button style="flex: 1 1 calc(50% - 10px);" type="button" title="${util.out('Lock')}" class="row-locking"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-lock"></use></svg></span>${util.out('Lock')}</button>`,
+        settings: `<button style="flex: 1 1 calc(50% - 10px);" type="button" title="${util.out('Settings')}" class="row-settings"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-cog"></use></svg></span>${util.out('Settings')}</button>`
+      };
+
+      // Filter buttons
+      const filteredButtons = rowMoreButtons.filter(item => {
+        if (!builder.opts.rowHtmlEditor && item === 'html') return false;
+        return true;
+      });
+      let buttonsHtml = filteredButtons.map(item => buttonTemplates[item] || '').join('');
       let html = `<div class="is-pop rowmore" style="z-index:10002;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
                 <div style="display:flex;flex-flow:wrap;">
-                    <button type="button" title="${util.out('Move Up')}" class="row-up"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></span>${util.out('Move Up')}</button>
-                    <button type="button" title="${util.out('Move Down')}" class="row-down"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></span>${util.out('Move Down')}</button>
-                    <button type="button" title="${util.out('Duplicate')}" class="row-duplicate"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></span>${util.out('Duplicate')}</button>
-                    ${htmlbutton}
-                    <div class="is-separator"></div>
-                    <button type="button" title="${util.out('Lock')}" class="row-locking"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-lock"></use></svg></span>${util.out('Lock')}</button>
-                    <button type="button" title="${util.out('Settings')}" class="row-settings"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-cog"></use></svg></span>${util.out('Settings')}</button>
+                    ${buttonsHtml}
                 </div>
             </div>
             `;
@@ -53326,29 +53354,40 @@ class ColumnTool {
     const dom = this.builder.dom;
     this.grid = new Grid(builder);
     let columnMore = builderStuff.querySelector('.is-pop.columnmore');
-    let resizebutton = `
-            <button type="button" title="${util.out('Increase')}" class="cell-increase"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-increase"></use></svg></span>${util.out('Increase')}</button>
-            <button type="button" title="${util.out('Decrease')}" class="cell-decrease"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-decrease"></use></svg></span>${util.out('Decrease')}</button>      
-        `;
-    let htmlbutton = '';
-    if (builder.opts.columnHtmlEditor) htmlbutton = `<button type="button" title="${util.out('HTML')}" class="cell-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')}
-            </button>`;
     if (!columnMore) {
+      let columnMoreButtons = ['moveleft', 'moveright', 'moveup', 'movedown', 'increase', 'decrease', 'duplicate', 'html', 'separator', 'lock', 'settings']; // default
+
+      if (builder.columnMoreButtons) {
+        columnMoreButtons = builder.columnMoreButtons;
+      }
+      const buttonTemplates = {
+        moveleft: `<button type="button" title="${util.out('Move Left')}" class="cell-prev" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-left"></use></svg></span>${util.out('Move Left')}</button>`,
+        moveright: `<button type="button" title="${util.out('Move Right')}" class="cell-next" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-right"></use></svg></span>${util.out('Move Right')}</button>`,
+        moveup: `<button type="button" title="${util.out('Move Up')}" class="cell-up" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></span>${util.out('Move Up')}</button>`,
+        movedown: `<button type="button" title="${util.out('Move Down')}" class="cell-down" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></span>${util.out('Move Down')}</button>`,
+        increase: `<button type="button" title="${util.out('Increase')}" class="cell-increase" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-increase"></use></svg></span>${util.out('Increase')}</button>`,
+        decrease: `<button type="button" title="${util.out('Decrease')}" class="cell-decrease" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-decrease"></use></svg></span>${util.out('Decrease')}</button>`,
+        duplicate: `<button type="button" title="${util.out('Duplicate')}" class="cell-duplicate" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></span>${util.out('Duplicate')}</button>`,
+        html: `<button type="button" title="${util.out('HTML')}" class="cell-html" style="flex: 1 1 calc(50% - 10px);">
+                        <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')}
+                    </button>`,
+        separator: '<div class="is-separator"></div>',
+        lock: `<button type="button" title="${util.out('Lock')}" class="cell-locking" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-lock"></use></svg></span>${util.out('Lock')}</button>`,
+        settings: `<button type="button" title="${util.out('Settings')}" class="cell-settings" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-cog"></use></svg></span>${util.out('Settings')}</button>`
+      };
+
+      // Filter buttons
+      const filteredButtons = columnMoreButtons.filter(item => {
+        if (!builder.opts.columnHtmlEditor && item === 'html') return false;
+        return true;
+      });
+      let buttonsHtml = filteredButtons.map(item => buttonTemplates[item] || '').join('');
+
       // Refer to .is-col-tool in in rowtool.js
       let html = `
             <div class="is-pop columnmore" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
                 <div style="display:flex;flex-flow:wrap;">
-                    <button type="button" title="${util.out('Move Left')}" class="cell-prev"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-left"></use></svg></span>${util.out('Move Left')}</button>
-                    <button type="button" title="${util.out('Move Right')}" class="cell-next"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-right"></use></svg></span>${util.out('Move Right')}</button>
-                    <button type="button" title="${util.out('Move Up')}" class="cell-up"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></span>${util.out('Move Up')}</button>
-                    <button type="button" title="${util.out('Move Down')}" class="cell-down"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></span>${util.out('Move Down')}</button>
-                    ${resizebutton}
-                    <button type="button" title="${util.out('Duplicate')}" class="cell-duplicate"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></span>${util.out('Duplicate')}</button>
-                    ${htmlbutton}
-                    <div class="is-separator"></div>
-                    <button type="button" title="${util.out('Lock')}" class="cell-locking"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-lock"></use></svg></span>${util.out('Lock')}</button>
-                    <button type="button" title="${util.out('Settings')}" class="cell-settings"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-cog"></use></svg></span>${util.out('Settings')}</button>
+                    ${buttonsHtml}
                 </div>
             </div>
             `;
@@ -60328,6 +60367,24 @@ class ElementTool {
     let elementTool = builderStuff.querySelector('.is-element-tool');
     let elementMore = builderStuff.querySelector('.elmmore');
     if (!elementTool) {
+      let elementMoreButtons = ['moveup', 'movedown', 'duplicate', 'settings']; // default
+
+      if (builder.elementMoreButtons) {
+        elementMoreButtons = builder.elementMoreButtons;
+      }
+      const buttonTemplates = {
+        moveup: `<button type="button" title="${util.out('Move Up')}" class="elm-up" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></span>${util.out('Move Up')}</button>`,
+        movedown: `<button type="button" title="${util.out('Move Down')}" class="elm-down" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></span>${util.out('Move Down')}</button>`,
+        duplicate: `<button type="button" title="${util.out('Duplicate')}" class="elm-duplicate" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></span>${util.out('Duplicate')}</button>`,
+        settings: `<button type="button" title="${util.out('Settings')}" class="elm-settings" style="flex: 1 1 calc(50% - 10px);"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-cog"></use></svg></span>${util.out('Settings')}</button>`
+      };
+
+      // Filter buttons
+      const filteredButtons = elementMoreButtons.filter(item => {
+        if (!builder.opts.elementEditor && item === 'settings') return false;
+        return true;
+      });
+      let buttonsHtml = filteredButtons.map(item => buttonTemplates[item] || '').join('');
       let html = `<div class="is-tool is-element-tool">
                 <button type="button" tabindex="-1" title="${util.out('Add')}" class="elm-add">
                     <svg class="is-icon-flex" style="width:14px;height:14px;color:#111"><use xlink:href="#icon-plus"></use></svg>
@@ -60345,12 +60402,7 @@ class ElementTool {
 
             <div class="is-pop elmmore" style="z-index:10002;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
                 <div style="display:flex;flex-flow:wrap;">
-                    <button type="button" title="${util.out('Move Up')}" class="elm-up"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></span>${util.out('Move Up')}</button>
-                    <button type="button" title="${util.out('Move Down')}" class="elm-down"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></span>${util.out('Move Down')}</button>
-                    <button type="button" title="${util.out('Duplicate')}" class="elm-duplicate"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></span>${util.out('Duplicate')}</button>
-                    ${this.builder.opts.elementEditor ? `
-                    <button type="button" title="${util.out('Settings')}" class="elm-settings"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-cog"></use></svg></span>${util.out('Settings')}</button>
-                    ` : ''} 
+                    ${buttonsHtml}
                 </div>
             </div>
             `;
@@ -60863,6 +60915,10 @@ class ElementTool {
     }
     if (activeElement && activeElement.classList.contains('ovl') && this.builder.activeIframe) {
       activeElement = this.builder.activeIframe.closest('.embed-responsive');
+    } else if (activeElement && activeElement.classList.contains('ovl')) {
+      if (activeElement.parentNode.querySelector('audio')) {
+        activeElement = activeElement.parentNode;
+      }
     }
     this.builder.activeElement = activeElement;
     if (activeElement) {
@@ -91540,7 +91596,7 @@ class PageSize {
                 position: relative;
                 flex:none;
                 background: #fff;
-                /* overflow: hidden;*/
+                overflow: hidden;
                 box-shadow: none;
             }
             ${css}