@innovastudio/contentbuilder 1.5.67 → 1.5.69

package/package.json

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

package/public/contentbuilder/contentbuilder.esm.js

@@ -841,6 +841,11 @@ class Snippets {
         
                 var snippets = data_basic.snippets; //DATA
 
+                ${!this.builder.canvas && !this.builder.isContentBox ? `
+                const canvasFilter = (item) => (item.mode!=='canvas');
+                snippets = snippets.filter(canvasFilter);
+                ` : ''}
+
                 if (slider !== null){
                     if(slider==='slick') {
                         //remove glide
@@ -1070,6 +1075,12 @@ class Snippets {
                         if(snippets[i].id + ''=== snippetid) {
                             
                             var html = snippets[i].html;
+
+                            // check if is block
+                            if(html.includes('"is-block')) {
+                                html = snippets[i].html2;
+                            }
+
                             var noedit = snippets[i].noedit;
                             break;
                         }
@@ -48972,9 +48983,10 @@ class Hyperlink {
     linkTool.style.top = top - h - 3 + 'px';
     linkTool.style.left = left + link.offsetWidth * this.builder.opts.zoom - w + 'px';
     const handleLinkButtonClick = e => {
+      const clrPicker = document.querySelector('.pop-picker.active') || document.querySelector('.pickgradientcolor.active');
       let elm = e.target;
       if (!elm) return;
-      if (!elm.closest('#divLinkTool') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('a')) {
+      if (!elm.closest('#divLinkTool') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('a') && !clrPicker) {
         // click outside
 
         this.hideTool();
@@ -49100,6 +49112,7 @@ class Button {
     const contentStuff = this.builder.contentStuff;
     const dom = this.builder.dom;
     this.dom = dom;
+    this.builderStuff = builderStuff;
     let buttonTool = builderStuff.querySelector('#divButtonTool');
     if (!buttonTool) {
       let html = `<div id="divButtonTool" class="is-tool">
@@ -49171,9 +49184,10 @@ class Button {
       this.renderTool();
       this.showTool(btn);
       const handleButtonClick = e => {
+        const clrPicker = document.querySelector('.pop-picker.active') || document.querySelector('.pickgradientcolor.active');
         let elm = e.target;
         if (!elm) return;
-        if (!elm.closest('#divButtonTool') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('button')) {
+        if (!elm.closest('#divButtonTool') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('button') && !clrPicker) {
           // click outside
 
           // hide
@@ -50375,9 +50389,11 @@ class Table {
     this.realtime();
     const handleTableClick = e => {
       // console.log('handleTableClick');
+
+      const clrPicker = document.querySelector('.pop-picker.active') || document.querySelector('.pickgradientcolor.active');
       let elm = e.target;
       if (!elm) return;
-      if (!elm.closest('.is-table-tool') && !elm.closest('.is-sidebar') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('table')) {
+      if (!elm.closest('.is-table-tool') && !elm.closest('.is-sidebar') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('table') && !clrPicker) {
         // click outside
 
         // hide
@@ -51996,6 +52012,11 @@ class RowTool {
           row.style.backgroundColor = color;
           elm.style.backgroundColor = color; // preview
 
+          if (color !== '') {
+            let btnRowGradient = rowSettings.querySelector('.input-row-gradient');
+            btnRowGradient.style.backgroundImage = '';
+            row.style.backgroundImage = '';
+          }
           this.builder.opts.onChange();
         }, rowSettings.querySelector('.input-row-bgcolor').style.backgroundColor, () => {
           btnRowBgColor.removeAttribute('data-focus');
@@ -52111,9 +52132,13 @@ class RowTool {
           div.innerHTML = '';
           const inpSrc = this.imageSource.querySelector('.input-src');
           inpSrc.value = '';
+          if (row.style.backgroundImage && row.style.backgroundImage.includes('linear-gradient')) {
+            const btnCellBgColor = this.rowSettings.querySelector('.input-row-bgcolor');
+            btnCellBgColor.style.backgroundColor = '';
+            row.style.backgroundColor = '';
+          }
 
-          //Trigger Change event
-          this.builder.opts.onChange();
+          // this.builder.opts.onChange();
         }, isChanged => {
           btnRowGradient.removeAttribute('data-focus');
           btnRowGradient.focus();
@@ -53713,6 +53738,11 @@ class ColumnTool {
           cell.style.backgroundColor = color;
           elm.style.backgroundColor = color; // preview
 
+          if (color !== '') {
+            let btnCellGradient = cellSettings.querySelector('.input-cell-gradient');
+            btnCellGradient.style.backgroundImage = '';
+            cell.style.backgroundImage = '';
+          }
           this.builder.opts.onChange();
         }, cellSettings.querySelector('.input-cell-bgcolor').style.backgroundColor, () => {
           btnCellBgColor.removeAttribute('data-focus');
@@ -53846,7 +53876,13 @@ class ColumnTool {
           div.innerHTML = '';
           const inpSrc = this.imageSource.querySelector('.input-src');
           inpSrc.value = '';
-          this.builder.opts.onChange();
+          if (cell.style.backgroundImage && cell.style.backgroundImage.includes('linear-gradient')) {
+            const btnCellBgColor = cellSettings.querySelector('.input-cell-bgcolor');
+            btnCellBgColor.style.backgroundColor = '';
+            cell.style.backgroundColor = '';
+          }
+
+          // this.builder.opts.onChange();
         }, isChanged => {
           btnCellGradient.removeAttribute('data-focus');
           btnCellGradient.focus();
@@ -55519,17 +55555,20 @@ class ElementGeneralStyles {
 
     // Background color
     let btnElmBgColor = panelStuff.querySelector('.input-elm-bgcolor');
-    btnElmBgColor.addEventListener('click', e => {
+    btnElmBgColor.addEventListener('click', () => {
       this.builder.uo.saveForUndo(true); // checkLater = true
 
-      let elm = e.target;
       this.builder.colorPicker.open(color => {
-        this.builder.inspectedElement.style.backgroundColor = color;
-        elm.style.backgroundColor = color; // preview
+        let elm = this.builder.inspectedElement;
+        elm.style.backgroundColor = color;
+        btnElmBgColor.style.backgroundColor = color; // preview
 
+        if (color !== '') {
+          let btnElmGradient = panelStuff.querySelector('.input-elm-gradient');
+          btnElmGradient.style.backgroundImage = '';
+          elm.style.backgroundImage = '';
+        }
         elementStyleEditor.refresh();
-
-        //Trigger Change event
         this.builder.opts.onChange();
       }, panelStuff.querySelector('.input-elm-bgcolor').style.backgroundColor, () => {
         btnElmBgColor.removeAttribute('data-focus');
@@ -55546,10 +55585,15 @@ class ElementGeneralStyles {
       this.builder.uo.saveForUndo(true); // checkLater = true
 
       gradientPicker.open(this.builder.inspectedElement, () => {
+        let elm = this.builder.inspectedElement;
+        if (elm.style.backgroundImage && elm.style.backgroundImage.includes('linear-gradient')) {
+          const btnElmBgColor = panelStuff.querySelector('.input-elm-bgcolor');
+          btnElmBgColor.style.backgroundColor = '';
+          elm.style.backgroundColor = '';
+        }
         elementStyleEditor.refresh();
 
-        //Trigger Change event
-        this.builder.opts.onChange();
+        // this.builder.opts.onChange();
       }, isChanged => {
         if (isChanged) {
           elementStyleEditor.refresh();