@innovastudio/contentbox 1.6.167 → 1.6.169

package/public/contentbox/contentbox.esm.js

@@ -10321,12 +10321,17 @@ class Text {
     const anchorNode = selection.anchorNode;
     if (!anchorNode) return false;
     let container = anchorNode.nodeType !== Node.TEXT_NODE && anchorNode.nodeType !== Node.COMMENT_NODE ? anchorNode : anchorNode.parentElement;
+
+    if (container && container.closest('.is-overlay') && this.builder.controlpanel.activeElement) {
+      return this.builder.controlpanel.activeElement; // container => is-overlay when drag & drop bloxk
+    }
     /*
     There is a strange behavior that when clicking an icon i.icon and then clicking its div wrapper, 
     the window.getSelection stays on the icon, not the div.
     To fix this, we check icon selection and compare it with the actual clicked element
     */
 
+
     if (container && container.classList.contains('icon') && this.builder.editor.inspectedElement) {
       if (container !== this.builder.editor.inspectedElement) {
         container = this.builder.editor.inspectedElement;
@@ -12327,7 +12332,7 @@ class SettingsUIGenerator$1 {
 
     if (!plugin || !plugin.settings) {
       // console.warn(`Plugin "${pluginName}" has no settings schema`);
-      return this.createEmptyForm();
+      if (!plugin.editor) return this.createEmptyForm();
     }
 
     const form = document.createElement('div');
@@ -13812,41 +13817,43 @@ class PanelBox {
                 </div>
             </div>
 
-            <div class="flex">
-                <div class="mr-8">
-                    <div class="label mt-3">${out('Background Color')}:</div>
-                    <div class="group">
-                        <button title="${out('Color')}" class="btn-color is-btn-color"></button>
+            <div class="box-bg-settings">
+                <div class="flex">
+                    <div class="mr-8">
+                        <div class="label mt-3">${out('Background Color')}:</div>
+                        <div class="group">
+                            <button title="${out('Color')}" class="btn-color is-btn-color"></button>
+                        </div>
                     </div>
-                </div>
-                <div>
-                    <div class="label mt-3">${out('Gradient')}:</div>
-                    <div class="group">
-                        <button title="${out('Gradient')}" class="btn-gradient is-btn-color"></button>
+                    <div>
+                        <div class="label mt-3">${out('Gradient')}:</div>
+                        <div class="group">
+                            <button title="${out('Gradient')}" class="btn-gradient is-btn-color"></button>
+                        </div>
                     </div>
                 </div>
-            </div>
 
-            <div class="label mt-3">${out('Background Image')}:</div>
+                <div class="label mt-3">${out('Background Image')}:</div>
 
-            <div class="asset-preview"></div>
+                <div class="asset-preview"></div>
 
-            <div class="imagesource mt-1 mb-1">
-                <input type="text" class="inp-src">
-            </div>
+                <div class="imagesource mt-1 mb-1">
+                    <input type="text" class="inp-src">
+                </div>
 
-            <div class="group mt-2">
-                <input class="inp-file" type="file" accept="image/*" style="display:none"/>
-                <button title="${out('Upload')}" class="btn-upload"><svg><use xlink:href="#icon-upload"></use></svg></button>
-                <button title="${out('Select')}" class="btn-asset"><svg><use xlink:href="#icon-folder"></use></svg></button>
-                <button title="${out('Adjust')}" class="btn-adjust"><svg style="width:14px;height:14px;"><use xlink:href="#icon-tool"></use></svg></button>
-                <button title="${out('Clear')}" class="btn-clear"><svg><use xlink:href="#icon-eraser"></use></svg></button>
-            </div>
+                <div class="group mt-2">
+                    <input class="inp-file" type="file" accept="image/*" style="display:none"/>
+                    <button title="${out('Upload')}" class="btn-upload"><svg><use xlink:href="#icon-upload"></use></svg></button>
+                    <button title="${out('Select')}" class="btn-asset"><svg><use xlink:href="#icon-folder"></use></svg></button>
+                    <button title="${out('Adjust')}" class="btn-adjust"><svg style="width:14px;height:14px;"><use xlink:href="#icon-tool"></use></svg></button>
+                    <button title="${out('Clear')}" class="btn-clear"><svg><use xlink:href="#icon-eraser"></use></svg></button>
+                </div>
 
-            <label class="label checkbox grayscale mt-2" style="margin-bottom:16px">
-                <input type="checkbox" class="chk-grayscale" />
-                <span>${out('Grayscale')}</span>
-            </label>
+                <label class="label checkbox grayscale mt-2" style="margin-bottom:16px">
+                    <input type="checkbox" class="chk-grayscale" />
+                    <span>${out('Grayscale')}</span>
+                </label>
+            </div>
 
             <div class="defaulttextcolor">
                 <div class="label mt-3">${out('Text Color')}:</div>
@@ -13886,7 +13893,7 @@ class PanelBox {
 
         </div>
 
-        <div class="submain box-plugin-settings">
+        <div class="submain box-plugin-settings panel-plugin">
 
             <hr style="width: 100%;border-bottom: #ededed 2px solid;margin-top: 20px;">
 
@@ -15275,7 +15282,14 @@ class PanelBox {
 
     const divPluginSettings = panel.querySelector('.box-plugin-settings');
     this.divPluginSettings = divPluginSettings;
-    const runtime = this.builder.win.builderRuntime;
+    const runtime = this.builder.win.builderRuntime; // Reset (can be changed by renderPluginSettings)
+
+    const divBgSettings = this.panel.querySelector('.box-bg-settings');
+    divBgSettings.style.display = '';
+    this.divBgSettings = divBgSettings;
+    const divPanelTitle = this.panel.parentNode.querySelector('.part-title');
+    divPanelTitle.style.display = '';
+    this.divPanelTitle = divPanelTitle;
 
     if (overlayContent && runtime) {
       const currentElement = overlayContent.querySelector('[data-cb-type]');
@@ -15286,6 +15300,8 @@ class PanelBox {
       } else {
         divPluginSettings.style.display = 'none';
       }
+    } else {
+      divPluginSettings.style.display = 'none';
     }
   }
 
@@ -15300,6 +15316,21 @@ class PanelBox {
     const plugin = runtime.getPlugin(pluginName);
     if (!plugin) return;
     let displayName = out(plugin.displayName || plugin.name);
+
+    if (plugin.contentbox) {
+      if (!plugin.contentbox.bg) {
+        this.divBgSettings.style.display = 'none';
+      }
+
+      if (!plugin.contentbox.text) {
+        this.divDefaultTextColor.style.display = 'none';
+      }
+
+      if (!plugin.contentbox.title) {
+        this.divPanelTitle.style.display = 'none';
+      }
+    }
+
     const divTitle = document.createElement('h3');
     divTitle.style.cssText = 'font-family: sans-serif;font-weight: 300;font-size: 20px;margin: 0 0 12px;';
     divTitle.innerText = displayName;
@@ -22721,8 +22752,8 @@ class SpacingContainer {
                     <button title="110" data-topspacing="11">110</button>
                     <button title="120" data-topspacing="12">120</button>
                     <button title="140" data-topspacing="14">140</button>
-                    <!--<button title="160" data-topspacing="16">160</button>
-                    <button title="200" data-topspacing="20">200</button>-->
+                    <button title="160" data-topspacing="16">160</button>
+                    <button title="200" data-topspacing="20">200</button>
                     <button title="${out('Clear')}" data-topspacing=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
                 </div>
 
@@ -22745,6 +22776,8 @@ class SpacingContainer {
                     <button title="110" data-bottomspacing="11">110</button>
                     <button title="120" data-bottomspacing="12">120</button>
                     <button title="140" data-bottomspacing="14">140</button>
+                    <button title="160" data-bottomspacing="16">160</button>
+                    <button title="200" data-bottomspacing="20">200</button>
                     <button title="${out('Clear')}" data-bottomspacing=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
                 </div>
 
@@ -22767,6 +22800,8 @@ class SpacingContainer {
                     <button title="110" data-leftspacing="11">110</button>
                     <button title="120" data-leftspacing="12">120</button>
                     <button title="140" data-leftspacing="14">140</button>
+                    <button title="160" data-leftspacing="16">160</button>
+                    <button title="200" data-leftspacing="20">200</button>
                     <button title="${out('Clear')}" data-leftspacing=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
                 </div>
 
@@ -22789,6 +22824,8 @@ class SpacingContainer {
                     <button title="110" data-rightspacing="11">110</button>
                     <button title="120" data-rightspacing="12">120</button>
                     <button title="140" data-rightspacing="14">140</button>
+                    <button title="160" data-rightspacing="16">160</button>
+                    <button title="200" data-rightspacing="20">200</button>
                     <button title="${out('Clear')}" data-rightspacing=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
                 </div>
             </div>
@@ -25245,7 +25282,7 @@ class Element$2 {
 
   getDeviceTarget(divTarget) {
     const btn = divTarget.querySelector('button.on');
-    return btn.getAttribute('data-device');
+    if (btn) return btn.getAttribute('data-device');else return '';
   }
 
   realtimeVisibility(elm) {
@@ -26355,7 +26392,8 @@ class ControlPanel {
     this.panelRow = controlPanel.querySelector('.panel-row');
     this.panelContainer = controlPanel.querySelector('.panel-container');
     this.panelBlock = controlPanel.querySelector('.panel-block');
-    this.panelBox = controlPanel.querySelector('.panel-box');
+    this.panelBox = controlPanel.querySelector('.panel-box'); // also has .panel-plugin inside
+
     this.panelSection = controlPanel.querySelector('.panel-section');
     this.breadcrumb = controlPanel.querySelector('.part-breadcrumb');
     this.title = controlPanel.querySelector('.part-title');
@@ -27090,6 +27128,9 @@ class ControlPanel {
       } else if (element.classList.contains('ovl')) {
         element = element.parentNode.querySelector('iframe');
         this.activeElement = element;
+      } else if (element.classList.contains('embed-responsive')) {
+        element = element.parentNode.querySelector('iframe');
+        this.activeElement = element;
       }
 
       if (element.closest('[data-html]') && !element.closest('[data-subblock]')) {
@@ -27120,7 +27161,7 @@ class ControlPanel {
       } else {
         if (element.querySelector('.icon') && element.childElementCount === 1) ;
 
-        if (element.closest('[data-cb-type]')) {
+        if (element.closest('[data-cb-type]') && !element.closest('.is-subblock')) {
           const runtime = this.builder.win.builderRuntime;
 
           if (runtime) {
@@ -32508,6 +32549,7 @@ class Util$1 {
   }
 
   hideModal(modal) {
+    if (!modal) return;
     this.builder.doc.activeElement.blur();
     document.activeElement.blur();
     // this.builder.doc.body.focus(); 
@@ -32916,13 +32958,24 @@ class Util$1 {
         element.click();
       }
     }
+    let editingInsidePlugin = false;
+    let elm = this.builder.activeElement;
+    const plugin = elm.closest('[data-cb-type]');
+    const subblock = elm.closest('.is-subblock');
+    if (plugin && subblock) {
+      editingInsidePlugin = true;
+    }
     if (mode === 'elm') {
       let elm = this.builder.activeElement; // See elementtool.js line 195-196. // document.querySelector('.elm-active');
       if (!elm) return;
       this.builder.uo.saveForUndo();
       let element = elm;
       let newelement;
-      if (!element.nextElementSibling && !element.closest('[data-subblock]')) {
+      const plugin = element.closest('[data-cb-type]');
+      if (plugin) {
+        element.insertAdjacentHTML('afterend', html);
+        newelement = element.nextElementSibling;
+      } else if (!element.nextElementSibling && !element.closest('[data-subblock]')) {
         // active element is div.display > p.
         let activeCol = this.builder.activeCol;
         let current;
@@ -32976,7 +33029,7 @@ class Util$1 {
     this.builder.opts.onRender();
 
     // Reinit after drag drop block
-    if (this.builder.win.builderRuntime) this.builder.win.builderRuntime.reinitialize();
+    if (this.builder.win.builderRuntime && !editingInsidePlugin) this.builder.win.builderRuntime.reinitialize();
     setTimeout(() => {
       this.builder.makeSortable(this.builder.doc);
     }, 400);
@@ -42465,17 +42518,32 @@ class HtmlUtil {
         grid = element.querySelector('.grid-sortable');
       }
       element.removeAttribute('id');
+
+      // Clean index in sortable grid
       if (grid) {
         Array.from(grid.children).forEach(elm => {
           elm.removeAttribute('data-index');
           elm.removeAttribute('data-item-id');
         });
       }
-      const elms = element.querySelectorAll('[data-scroll], [data-scroll-once]');
+
+      // Clean data-edit-id in editable area 
+      let editables = element.querySelectorAll('.edit');
+      editables.forEach(area => {
+        area.removeAttribute('data-edit-id');
+      });
+      let elms = element.querySelectorAll('[data-scroll], [data-scroll-once]');
       elms.forEach(elm => {
         elm.removeAttribute('data-scroll');
         elm.removeAttribute('data-scroll-once');
       });
+      elms = element.querySelectorAll('.elm-active, .icon-active');
+      elms.forEach(elm => {
+        elm.classList.remove('elm-active');
+        elm.classList.remove('icon-active');
+      });
+      const oldEditables = element.querySelectorAll('[contenteditable="true"]');
+      oldEditables.forEach(el => el.removeAttribute('contenteditable'));
     });
     html = '';
     if (multiple) {
@@ -74932,6 +75000,8 @@ class ButtonEditor {
                                     <span>${util.out('Padding Left/Right')}</span>:
                                 </div>
                                 <div class="flex flex-row" style="margin-top:5px">
+                                    <button title="2" data-command="0" class="paddingx-command" style="margin-right:4px">0</button>
+                                    <button title="2" data-command="1" class="paddingx-command" style="margin-right:4px">1</button>
                                     <button title="2" data-command="2" class="paddingx-command" style="margin-right:4px">2</button>
                                     <button title="3" data-command="3" class="paddingx-command" style="margin-right:4px">3</button>
                                     <button title="4" data-command="4" class="paddingx-command" style="margin-right:4px">4</button>
@@ -75437,6 +75507,12 @@ class ButtonEditor {
           const val = btn.getAttribute('data-command');
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton || this.builder.activeLink;
           dom.removeClassesByPrefix(activeButton, 'px-');
+          if (val === '0') {
+            dom.addClass(activeButton, 'px-0');
+          }
+          if (val === '1') {
+            dom.addClass(activeButton, 'px-1');
+          }
           if (val === '2') {
             dom.addClass(activeButton, 'px-2');
           }
@@ -76504,6 +76580,144 @@ class ButtonEditor {
       bg: 'rgba(191, 245, 110, 1)',
       hoverBg: 'rgba(183, 236, 103, 1)'
     },
+    // Square buttons
+    {
+      type: 'solid',
+      shape: 'square',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'transparent',
+      hoverBg: 'transparent',
+      customClasses: 'underline px-0'
+    }, {
+      type: 'outline',
+      shape: 'square',
+      text: 'Read More'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'rgb(240, 240, 241)',
+      hoverBg: 'rgb(236, 236, 238)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      text: 'Read More',
+      color: 'rgb(250, 250, 250)',
+      bg: 'rgb(24, 24, 27)',
+      hoverBg: 'rgb(63, 63, 70)'
+    }, {
+      type: 'outline',
+      shape: 'square',
+      text: 'Read More',
+      color: 'rgb(250, 250, 250)',
+      bg: 'transparent',
+      hoverBg: 'transparent'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(13, 151, 255, 1)',
+      hoverBg: 'rgba(7, 138, 237, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: '#3b82f6',
+      hoverBg: 'rgba(47, 116, 228, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: '#fff',
+      hoverBg: 'rgba(248, 248, 250, 1)'
+    },
+    // Colors
+    {
+      type: 'solid',
+      shape: 'square',
+      size: 'medium',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'rgba(111, 235, 255, 1)',
+      hoverBg: 'rgba(98, 230, 252, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'medium',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(19, 166, 27, 1)',
+      hoverBg: 'rgba(17, 155, 25, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'medium',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'rgba(254, 235, 101, 1)',
+      hoverBg: 'rgba(249, 229, 85, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'medium',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(251, 45, 45, 1)',
+      hoverBg: 'rgba(239, 38, 36, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'medium',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(255, 122, 0, 1)',
+      hoverBg: 'rgba(248, 109, 2, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'medium',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(255, 68, 179, 1)',
+      hoverBg: 'rgba(240, 46, 169, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'medium',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'rgba(148, 251, 208, 1)',
+      hoverBg: 'rgba(133, 244, 198, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'medium',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(91, 73, 228, 1)',
+      hoverBg: 'rgba(77, 59, 208, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'medium',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(142, 67, 237, 1)',
+      hoverBg: 'rgba(122, 52, 212, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'medium',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'rgba(191, 245, 110, 1)',
+      hoverBg: 'rgba(183, 236, 103, 1)'
+    },
     // Rounded buttons - Small
     {
       type: 'solid',
@@ -77087,6 +77301,152 @@ class ButtonEditor {
       color: 'rgb(24, 24, 27)',
       bg: 'rgba(191, 245, 110, 1)',
       hoverBg: 'rgba(183, 236, 103, 1)'
+    },
+    // Square buttons - Large
+    {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'transparent',
+      hoverBg: 'transparent',
+      customClasses: 'underline'
+    }, {
+      type: 'outline',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'rgb(240, 240, 241)',
+      hoverBg: 'rgb(236, 236, 238)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: 'rgb(250, 250, 250)',
+      bg: 'rgb(24, 24, 27)',
+      hoverBg: 'rgb(63, 63, 70)'
+    }, {
+      type: 'outline',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: 'rgb(250, 250, 250)',
+      bg: 'transparent',
+      hoverBg: 'transparent'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(13, 151, 255, 1)',
+      hoverBg: 'rgba(7, 138, 237, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: '#3b82f6',
+      hoverBg: 'rgba(47, 116, 228, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: '#fff',
+      hoverBg: 'rgba(248, 248, 250, 1)'
+    },
+    // Colors
+    {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'rgba(111, 235, 255, 1)',
+      hoverBg: 'rgba(98, 230, 252, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(19, 166, 27, 1)',
+      hoverBg: 'rgba(17, 155, 25, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'rgba(254, 235, 101, 1)',
+      hoverBg: 'rgba(249, 229, 85, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(251, 45, 45, 1)',
+      hoverBg: 'rgba(239, 38, 36, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(255, 122, 0, 1)',
+      hoverBg: 'rgba(248, 109, 2, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(255, 68, 179, 1)',
+      hoverBg: 'rgba(240, 46, 169, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'rgba(148, 251, 208, 1)',
+      hoverBg: 'rgba(133, 244, 198, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(91, 73, 228, 1)',
+      hoverBg: 'rgba(77, 59, 208, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: '#ffffff',
+      bg: 'rgba(142, 67, 237, 1)',
+      hoverBg: 'rgba(122, 52, 212, 1)'
+    }, {
+      type: 'solid',
+      shape: 'square',
+      size: 'large',
+      text: 'Read More',
+      color: 'rgb(24, 24, 27)',
+      bg: 'rgba(191, 245, 110, 1)',
+      hoverBg: 'rgba(183, 236, 103, 1)'
     }];
     let templates = buttonConfigs.map(config => this.generateButton(config));
     const moreTemplates = [];
@@ -78202,7 +78562,7 @@ class SettingsUIGenerator {
     const plugin = this.runtime.getPlugin(pluginName);
     if (!plugin || !plugin.settings) {
       console.warn(`Plugin "${pluginName}" has no settings schema`);
-      return this.createEmptyForm();
+      if (!plugin.editor) return this.createEmptyForm();
     }
     const form = document.createElement('div');
     form.className = 'cb-settings-form';
@@ -80962,8 +81322,10 @@ class Element$1 {
         subblock = true;
       }
     }
-    if (elm.closest('[data-cb-type]')) {
+    const plugin = elm.closest('[data-cb-type]');
+    if (plugin) {
       customcode = true;
+      subblock = elm.closest('.is-subblock');
     }
     if (!customcode && !noedit && !_protected || subblock) {
       //previously this is commented: && !noedit && !_protected
@@ -85076,6 +85438,7 @@ class ColumnTool {
   }
   click(col) {
     this.columnTool = col.parentNode.querySelector('.is-col-tool');
+    if (!this.columnTool) return;
     this.columnTool.style.left = col.offsetLeft + 'px';
     this.columnTool.style.top = col.offsetTop + 'px';
     const btnAdd = this.columnTool.querySelector('.cell-add');
@@ -90111,7 +90474,15 @@ class ElementTool {
           if (elm.closest('.is-subblock')) {
             subblock = true;
           }
-
+          const plugin = elm.closest('[data-cb-type]');
+          if (plugin && subblock) {
+            elm.remove();
+            this.elementTool.style.display = 'none';
+            //Trigger Change event
+            this.builder.opts.onChange();
+            if (this.builder.onSelectChange) this.builder.onSelectChange();
+            return;
+          }
           /*
           if(dom.hasClass(elm.parentNode, 'cell-active') || elm.parentNode.hasAttribute('data-subblock')) {
               // Level 1
@@ -90470,7 +90841,7 @@ class ElementTool {
       subblock = true;
     }
     const plugin = elm.closest('[data-cb-type]');
-    if ((customcode || noedit || _protected) && !subblock) ; else if (plugin) {
+    if ((customcode || noedit || _protected) && !subblock) ; else if (plugin && !subblock) {
       activeElement = plugin;
     } else {
       const tagName = elm.tagName.toLowerCase();
@@ -125344,7 +125715,21 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
                       newCol.children[0].click();
                     }, 400);
                   } else {
-                    newCol.children[0].click(); // Focus on first element
+                    const spacer = newCol.querySelector('.spacer');
+                    setTimeout(() => {
+                      try {
+                        if (spacer) {
+                          if (newCol.parentNode.nextElementSibling) {
+                            const elm = newCol.parentNode.nextElementSibling.querySelector('h1,h2,h3,h4,h5,h6,p,img,[data-cb-type]');
+                            if (elm) elm.click();else newCol.click();
+                          }
+                        } else {
+                          newCol.children[0].click(); // Focus on first element
+                        }
+                      } catch (e) {
+                        // Do Nothing
+                      }
+                    }, 400);
                   }
                 }
               }
@@ -160300,7 +160685,7 @@ class ContentBox {
           'title': 'Sections'
         }, {
           'name': 'snippet',
-          'title': 'Content Blocks'
+          'title': 'Blocks'
         }, {
           'name': 'typography',
           'title': 'Typography'
@@ -164672,7 +165057,15 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
 
     if (this.UIColor) {
       this.editor.setUIColor(this.UIColor.mode, this.UIColor.css);
-    }
+    } // Prepare for tooltip
+
+
+    const sidebar = this.builderStuff.querySelector('.is-sidebar');
+    let elms = sidebar.querySelectorAll('[title]');
+    Array.prototype.forEach.call(elms, elm => {
+      elm.setAttribute('data-title', elm.getAttribute('title'));
+      this.editor.tooltip.set(elm, 5, 3);
+    });
   } // editorSetup
   // Live Preview