@innovastudio/contentbuilder 1.5.164 → 1.5.166

package/package.json

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

package/public/contentbuilder/content.css

@@ -8,11 +8,6 @@
   font-weight: 300;
   line-height: 1.4;
   /* Default Elements */
-  /* Built-in Grid */
-  margin: 0 auto;
-  width: 100%;
-  padding: 0 20px;
-  box-sizing: border-box;
 }
 .is-container h1, .is-container h2, .is-container h3, .is-container h4, .is-container h5, .is-container h6 {
   font-weight: 500;
@@ -122,72 +117,100 @@
 .is-container a {
   box-sizing: border-box;
 }
-.is-container .column {
+
+/* Built-in Grid */
+.is-container {
+  margin: 0 auto;
+  width: 100%;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+
+.column {
   position: relative;
   box-sizing: border-box;
   width: 100%;
 }
+
 @media (min-width: 761px) {
-  .is-container .row {
+  .row {
     display: flex;
   }
-  .is-container .column {
+
+  .column {
     padding-left: 1rem;
     padding-right: 1rem;
   }
-  .is-container .column.full {
+
+  .column.full {
     width: 100%;
   }
-  .is-container .column.two-third {
+
+  .column.two-third {
     width: 66.7%;
   }
-  .is-container .column.two-fourth {
+
+  .column.two-fourth {
     width: 75%;
   }
-  .is-container .column.two-fifth {
+
+  .column.two-fifth {
     width: 80%;
   }
-  .is-container .column.two-sixth {
+
+  .column.two-sixth {
     width: 83.3%;
   }
-  .is-container .column.half {
+
+  .column.half {
     width: 50%;
   }
-  .is-container .column.third {
+
+  .column.third {
     width: 33.3%;
   }
-  .is-container .column.fourth {
+
+  .column.fourth {
     width: 25%;
   }
-  .is-container .column.fifth {
+
+  .column.fifth {
     width: 20%;
   }
-  .is-container .column.sixth {
+
+  .column.sixth {
     width: 16.6%;
   }
-  .is-container .column.seventh {
+
+  .column.seventh {
     width: 14.2857142857%;
   }
-  .is-container .column.eighth {
+
+  .column.eighth {
     width: 12.5%;
   }
-  .is-container .column.ninth {
+
+  .column.ninth {
     width: 11.1111111111%;
   }
-  .is-container .column.tenth {
+
+  .column.tenth {
     width: 10%;
   }
-  .is-container .column.eleventh {
+
+  .column.eleventh {
     width: 9.0909090909%;
   }
-  .is-container .column.twelfth {
+
+  .column.twelfth {
     width: 8.3333333333%;
   }
-  .is-container .column.flow-opposite {
+
+  .column.flow-opposite {
     float: right;
   }
 }
-.is-container .is-row-overlay {
+.is-row-overlay {
   position: absolute;
   top: 0;
   left: 0;

package/public/contentbuilder/contentbuilder.css

@@ -2359,7 +2359,7 @@ button:focus-visible {
 .is-ui .is-modal.is-modal-content,
 .is-ui .is-modal .is-modal-content {
   background: #fff;
-  border: 1px solid #e3e3e3;
+  border: 1px solid #dadada;
   box-shadow: 6px 14px 20px 0px rgba(95, 95, 95, 0.11);
   border-radius: 11px;
   overflow: hidden;
@@ -2375,7 +2375,7 @@ button:focus-visible {
 #_cbhtml .is-modal:not(.is-modal-content) > div:not(.is-modal-overlay),
 .is-ui .is-modal:not(.is-modal-content) > div:not(.is-modal-overlay) {
   background: #fff;
-  border: 1px solid #e3e3e3;
+  border: 1px solid #dadada;
   box-shadow: 6px 14px 20px 0px rgba(95, 95, 95, 0.11);
   position: relative;
   width: 100%;
@@ -2416,9 +2416,10 @@ button:focus-visible {
   box-sizing: border-box;
   text-align: center;
   font-family: sans-serif;
-  font-size: 13px;
+  font-size: 14px;
+  font-weight: 500;
   letter-spacing: 1px;
-  color: #545454;
+  color: #828282;
   touch-action: none;
   user-select: none;
   z-index: 1;
@@ -2431,17 +2432,17 @@ button:focus-visible {
   width: 32px;
   height: 32px;
   position: absolute;
-  top: 2px;
-  right: 2px;
+  top: 0px;
+  right: 0px;
   box-sizing: border-box;
   padding: 0;
   line-height: 32px;
   font-size: 12px;
-  color: #545454;
+  color: #828282;
   text-align: center;
   cursor: pointer;
   box-shadow: none;
-  background: transparent;
+  background-color: transparent !important;
   border: none;
 }
 #_cbhtml .is-modal div.is-modal-footer button,
@@ -2640,19 +2641,6 @@ button:focus-visible {
   flex-direction: row;
   align-items: flex-start;
 }
-#_cbhtml .is-modal.pluginsettings .is-modal-bar,
-.is-ui .is-modal.pluginsettings .is-modal-bar {
-  line-height: 30px;
-  height: 30px;
-  background-color: #fafafa;
-}
-#_cbhtml .is-modal.pluginsettings .is-modal-bar .is-modal-close,
-.is-ui .is-modal.pluginsettings .is-modal-bar .is-modal-close {
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
-  font-size: 10px;
-}
 #_cbhtml .is-modal.pluginsettings.active,
 .is-ui .is-modal.pluginsettings.active {
   display: flex;
@@ -2683,17 +2671,8 @@ button:focus-visible {
 }
 #_cbhtml .is-modal.edittable .is-modal-bar,
 .is-ui .is-modal.edittable .is-modal-bar {
-  line-height: 30px;
-  height: 30px;
   background-color: #fafafa;
 }
-#_cbhtml .is-modal.edittable .is-modal-bar .is-modal-close,
-.is-ui .is-modal.edittable .is-modal-bar .is-modal-close {
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
-  font-size: 10px;
-}
 #_cbhtml .is-modal.edittable.active,
 .is-ui .is-modal.edittable.active {
   display: flex;
@@ -2738,18 +2717,6 @@ button:focus-visible {
   flex-direction: row;
   align-items: flex-start;
 }
-#_cbhtml .is-modal.editblock .is-modal-bar,
-.is-ui .is-modal.editblock .is-modal-bar {
-  line-height: 30px;
-  height: 30px;
-}
-#_cbhtml .is-modal.editblock .is-modal-bar .is-modal-close,
-.is-ui .is-modal.editblock .is-modal-bar .is-modal-close {
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
-  font-size: 10px;
-}
 #_cbhtml .is-modal.editblock.active,
 .is-ui .is-modal.editblock.active {
   display: flex;
@@ -2959,19 +2926,6 @@ button:focus-visible {
 .is-ui .is-modal.buttoneditor .is-modal-overlay {
   display: none !important;
 }
-#_cbhtml .is-modal.buttoneditor .is-modal-bar,
-.is-ui .is-modal.buttoneditor .is-modal-bar {
-  line-height: 30px;
-  height: 30px;
-  background-color: #fafafa;
-}
-#_cbhtml .is-modal.buttoneditor .is-modal-bar .is-modal-close,
-.is-ui .is-modal.buttoneditor .is-modal-bar .is-modal-close {
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
-  font-size: 10px;
-}
 #_cbhtml .is-modal.buttoneditor.active,
 .is-ui .is-modal.buttoneditor.active {
   display: flex;

package/public/contentbuilder/contentbuilder.esm.js

@@ -5135,6 +5135,7 @@ class Util {
   }
 
   hideModal(modal) {
+    if (!modal) return;
     this.builder.doc.activeElement.blur();
     document.activeElement.blur();
     // this.builder.doc.body.focus(); 
@@ -5604,7 +5605,9 @@ class Util {
 
     // Reinit after drag drop block
     if (this.builder.win.builderRuntime) this.builder.win.builderRuntime.reinitialize();
-    this.builder.makeSortable(this.builder.doc);
+    setTimeout(() => {
+      this.builder.makeSortable(this.builder.doc);
+    }, 400);
   }
 
   // https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro
@@ -5697,7 +5700,11 @@ class Util {
 
       //Hide Column tool (new!)
       this.builder.util.hideColumnTool();
-      this.builder.makeSortable(rowElement);
+
+      // this.builder.makeSortable(rowElement); // cause other sortable not working
+      setTimeout(() => {
+        this.builder.makeSortable(this.builder.doc);
+      }, 400);
     } else if (bSnippet) {
       if (noedit) {
         this.addContent(html, mode, 'data-noedit');
@@ -5871,7 +5878,9 @@ class Util {
       this.builder.doc.querySelectorAll('.dummy-module').forEach(module => {
         module.classList.remove('dummy-module');
       });
-      this.builder.makeSortable(this.builder.doc);
+      setTimeout(() => {
+        this.builder.makeSortable(this.builder.doc);
+      }, 400);
 
       // Change to row selection
       rowElement.className = rowElement.className.replace('row-outline', '');
@@ -6089,6 +6098,11 @@ class Util {
     }
   }
 
+  clearModals() {
+    const builderStuff = this.builder.builderStuff;
+    let modal = builderStuff.querySelector('.pluginsettings.active');
+    this.hideModal(modal);
+  }
   clearControls() {
     const dom = this.dom;
     const builderStuff = this.builder.builderStuff;
@@ -16452,6 +16466,7 @@ class Grid {
 
     // Re-init plugins
     if (this.builder.win.builderRuntime) this.builder.win.builderRuntime.reinitialize(cellElement);
+    this.builder.makeSortable(cellElement);
   }
   removeColumn() {
     let util = this.util;
@@ -17234,6 +17249,7 @@ class Grid {
 
     // Re-init plugins
     if (this.builder.win.builderRuntime) this.builder.win.builderRuntime.reinitialize(rowElement);
+    this.builder.makeSortable(rowElement);
   }
 }
 class RowTool$1 {
@@ -53952,6 +53968,7 @@ class RowTool {
         const grid = new Grid(this.builder);
         grid.removeColumn();
         util.clearControls();
+        util.clearModals();
         if (this.builder.onSelectChange) this.builder.onSelectChange();
       });
       let btnGridEditor = rowtool.querySelector('.row-grideditor');
@@ -54062,6 +54079,7 @@ class RowTool {
       if (elm) dom.addEventListener(elm, 'click', () => {
         this.grid.removeRow();
         util.clearControls();
+        util.clearModals();
         if (this.builder.onSelectChange) this.builder.onSelectChange();
       });
     }
@@ -93459,6 +93477,9 @@ class BlockModal {
     new Tabs({
       element: modal
     });
+    new Draggable$2({
+      selector: '.is-modal.editblock .is-draggable'
+    });
   } // constructor
 
   getPage() {
@@ -97943,8 +97964,16 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
               let newRow = newRows[0]; // get first added row
               if (newRow.children.length > 0) {
                 const newCol = newRow.children[0];
+                const isPlugin = newCol.querySelector('[data-cb-type]');
                 if (newCol.children.length > 0) {
-                  newCol.children[0].click(); // Focus on first element
+                  if (isPlugin) {
+                    setTimeout(() => {
+                      // give time for plugin to render (apply style) => for correct elm tool position
+                      newCol.children[0].click();
+                    }, 400);
+                  } else {
+                    newCol.children[0].click(); // Focus on first element
+                  }
                 }
               }
             }
@@ -98045,7 +98074,9 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
         });
       });
     });
-    this.makeSortable(this.doc);
+    setTimeout(() => {
+      this.makeSortable(this.doc);
+    }, 400);
     this.doc.querySelectorAll('.dummy-module').forEach(module => {
       module.classList.remove('dummy-module');
     });
@@ -99710,6 +99741,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     this.rte.viewZoom();
   }
   async loadSnippets(source, snippetOpen) {
+    this.snippetUrl = source;
     if (this.preview) return;
     if (this.opts.snippetList === '#divSnippetList') {
       let snippetPanel = document.querySelector(this.opts.snippetList);