@innovastudio/contentbox 1.6.76 → 1.6.78

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.76",
+  "version": "1.6.78",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -52,7 +52,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.68",
+    "@innovastudio/contentbuilder": "^1.5.69",
     "js-beautify": "^1.14.0",
     "sortablejs": "^1.15.2"
   }

package/public/contentbox/contentbox.css

@@ -1,3 +1,5 @@
+/* @import url("../icons/bootstrap-icons.min.css");  */
+@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
 /* IFRAME */
 .is-content-view.desktop-lg {
   width: 1920px;

package/public/contentbox/contentbox.esm.js

@@ -9025,7 +9025,7 @@ class Text {
       const config = this.builder.cssClasses;
       let activeElement = this.builder.controlpanel.activeElement;
 
-      if (activeElement.tagName.toLowerCase() === 'div' && (activeElement.classList.contains('text-left') || activeElement.classList.contains('text-center') || activeElement.classList.contains('text-right') || activeElement.classList.contains('text-justify'))) {
+      if (activeElement.tagName.toLowerCase() === 'div' && (activeElement.classList.contains(config.textAlign.left) || activeElement.classList.contains(config.textAlign.center) || activeElement.classList.contains(config.textAlign.right) || activeElement.classList.contains(config.textAlign.justify))) {
         // div with icon or svg inside
         let elm = activeElement;
         elm.classList.remove(config.textAlign.left);
@@ -11275,13 +11275,14 @@ class PanelText {
     const blocks = this.text.getSelectedBlocks(true);
 
     if (blocks.length === 1) {
+      const config = this.builder.cssClasses;
       this.panel.querySelectorAll('[data-align]').forEach(elm => elm.classList.remove('on'));
 
-      if (activeElement.classList.contains('text-left')) {
+      if (activeElement.classList.contains(config.textAlign.left)) {
         this.panel.querySelector('button[data-align=left]').classList.add('on');
-      } else if (activeElement.classList.contains('text-center')) {
+      } else if (activeElement.classList.contains(config.textAlign.center)) {
         this.panel.querySelector('button[data-align=center]').classList.add('on');
-      } else if (activeElement.classList.contains('text-right')) {
+      } else if (activeElement.classList.contains(config.textAlign.right)) {
         this.panel.querySelector('button[data-align=right]').classList.add('on');
       }
     }
@@ -25662,7 +25663,7 @@ class ControlPanel {
     }
   }
 
-  open_() {
+  open_(what) {
     const viewportWidth = document.documentElement.clientWidth;
 
     if (viewportWidth <= 1322) {
@@ -25683,8 +25684,13 @@ class ControlPanel {
     }, 300);
     this.getActive(); // Show/hide panel
 
-    if (this.activeElement) this.select('element');else if (this.activeBlock) this.select('block'); // freeform
-    else if (!this.activeElement && !this.activeColumn && !this.activeRow && this.activeBox) this.select('box');else this.select('');
+    if (what) {
+      this.select(what);
+    } else {
+      if (this.activeElement) this.select('element');else if (this.activeBlock) this.select('block'); // freeform
+      else if (!this.activeElement && !this.activeColumn && !this.activeRow && this.activeBox) this.select('box');else this.select('');
+    }
+
     this.repositionTool(); // Sync with external buttons
 
     let btns = document.querySelectorAll('[data-state="togglepanel"]');
@@ -26099,7 +26105,7 @@ class ControlPanel {
 
     if (what === 'element' || what === 'column' || what === 'row' || what === 'box' || what === 'section') {
       if (document.body.classList.contains('controlpanel')) ; else {
-        this.open_(); // Force open
+        this.open_(what); // Force open
       }
     }
 
@@ -27216,6 +27222,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
@@ -27445,6 +27456,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;
                         }
@@ -75347,9 +75364,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();
@@ -75475,6 +75493,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">
@@ -75546,9 +75565,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
@@ -76750,9 +76770,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