@innovastudio/contentbuilder 1.5.166 → 1.5.168

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.166",
+  "version": "1.5.168",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "types": "index.d.ts",
@@ -52,7 +52,7 @@
     "sass": "^1.42.1",
     "sass-loader": "^12.1.0",
     "serve-static": "^1.14.1",
-    "sharp": "^0.30.3",
+    "sharp": "^0.34.4",
     "style-loader": "^3.3.0",
     "webpack": "^5.53.0",
     "webpack-cli": "^4.8.0",

package/public/contentbuilder/contentbuilder.esm.js

@@ -5544,13 +5544,24 @@ class Util {
         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;
@@ -5604,7 +5615,7 @@ class Util {
     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);
@@ -15099,11 +15110,18 @@ class HtmlUtil {
           elm.removeAttribute('data-item-id');
         });
       }
-      const elms = element.querySelectorAll('[data-scroll], [data-scroll-once]');
+      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) {
@@ -47560,6 +47578,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>
@@ -48065,6 +48085,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');
           }
@@ -49132,6 +49158,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',
@@ -49715,6 +49879,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 = [];
@@ -50830,7 +51140,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';
@@ -53590,8 +53900,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
@@ -62739,7 +63051,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
@@ -63098,7 +63418,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();
@@ -97972,7 +98292,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,iframe');
+                            if (elm) elm.click();else newCol.click();
+                          }
+                        } else {
+                          newCol.children[0].click(); // Focus on first element
+                        }
+                      } catch (e) {
+                        // Do Nothing
+                      }
+                    }, 400);
                   }
                 }
               }