@innovastudio/contentbox 1.6.168 → 1.6.169

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.168",
+  "version": "1.6.169",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "types": "index.d.ts",
@@ -52,14 +52,14 @@
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.38.1",
     "sass-loader": "^12.1.0",
-    "sharp": "^0.30.3",
+    "sharp": "^0.34.4",
     "webpack": "^5.51.1",
     "webpack-cli": "^4.8.0",
     "webpack-dev-server": "^4.0.0",
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.166",
+    "@innovastudio/contentbuilder": "^1.5.173",
     "js-beautify": "^1.14.0",
     "sortablejs": "^1.15.2"
   }

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');
@@ -22747,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>
 
@@ -22771,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>
 
@@ -22793,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>
 
@@ -22815,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>
@@ -25271,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) {
@@ -27117,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]')) {
@@ -27147,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) {
@@ -32944,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;
@@ -33004,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);
@@ -42493,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) {
@@ -74960,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>
@@ -75465,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');
           }
@@ -76532,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',
@@ -77115,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 = [];
@@ -78230,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';
@@ -80990,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
@@ -85104,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');
@@ -90139,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
@@ -90498,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();
@@ -125372,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);
                   }
                 }
               }
@@ -160328,7 +160685,7 @@ class ContentBox {
           'title': 'Sections'
         }, {
           'name': 'snippet',
-          'title': 'Content Blocks'
+          'title': 'Blocks'
         }, {
           'name': 'typography',
           'title': 'Typography'
@@ -164700,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