@innovastudio/contentbuilder 1.5.163 → 1.5.165

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.163",
+  "version": "1.5.165",
   "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

@@ -5469,18 +5469,21 @@ class Util {
       let builderActive = this.builder.doc.querySelector('.builder-active');
       if (builderActive) this.builder.applyBehaviorOn(builderActive);
       this.fixLayout(row);
-
-      // cellElement.click(); //change active block to the newly created
-      if (element && element.tagName.toLowerCase() === 'img') {
-        element.onload = () => {
+      try {
+        // cellElement.click(); //change active block to the newly created
+        if (element && element.tagName.toLowerCase() === 'img') {
+          element.onload = () => {
+            element.click();
+            element.onload = null;
+            setTimeout(() => {
+              this.builder.element.image.repositionImageTool();
+            }, 100);
+          };
+        } else if (element) {
           element.click();
-          element.onload = null;
-          setTimeout(() => {
-            this.builder.element.image.repositionImageTool();
-          }, 100);
-        };
-      } else if (element) {
-        element.click();
+        }
+      } catch (e) {
+        // Do Nothing
       }
     }
     if (mode === 'row') {
@@ -5598,6 +5601,12 @@ class Util {
 
     //Trigger Render event
     this.builder.opts.onRender();
+
+    // Reinit after drag drop block
+    if (this.builder.win.builderRuntime) this.builder.win.builderRuntime.reinitialize();
+    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
@@ -5690,6 +5699,11 @@ class Util {
 
       //Hide Column tool (new!)
       this.builder.util.hideColumnTool();
+
+      // 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');
@@ -5863,6 +5877,9 @@ class Util {
       this.builder.doc.querySelectorAll('.dummy-module').forEach(module => {
         module.classList.remove('dummy-module');
       });
+      setTimeout(() => {
+        this.builder.makeSortable(this.builder.doc);
+      }, 400);
 
       // Change to row selection
       rowElement.className = rowElement.className.replace('row-outline', '');
@@ -6080,6 +6097,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;
@@ -14489,6 +14511,7 @@ class HtmlUtil {
     // Re-init plugins
     if (this.builder.win.builderRuntime) await this.builder.win.builderRuntime.reinitialize();
     this.builder.hideModal(modal);
+    this.builder.makeSortable(this.builder.doc);
   }
   viewHtmlExternal() {
     const util = this.builder.util;
@@ -15061,6 +15084,25 @@ class HtmlUtil {
         element.classList.remove(`cb-${type}`);
       }
       element.removeAttribute('data-cb-loaded');
+      let grid;
+      if (element.classList.contains('grid-sortable')) {
+        grid = element;
+      }
+      if (element.querySelector('.grid-sortable')) {
+        grid = element.querySelector('.grid-sortable');
+      }
+      element.removeAttribute('id');
+      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]');
+      elms.forEach(elm => {
+        elm.removeAttribute('data-scroll');
+        elm.removeAttribute('data-scroll-once');
+      });
     });
     html = '';
     if (multiple) {
@@ -16193,6 +16235,9 @@ class Grid {
       this.builder.hideTools();
       cell.parentElement.insertBefore(cell, cell.previousElementSibling);
       this.builder.opts.onChange(true);
+
+      // Re-init plugins
+      if (this.builder.win.builderRuntime) this.builder.win.builderRuntime.reinitialize(cell);
     }
   }
   moveColumnNext() {
@@ -16205,6 +16250,9 @@ class Grid {
       this.builder.hideTools();
       cell.parentElement.insertBefore(cellnext, cell);
       this.builder.opts.onChange(true);
+
+      // Re-init plugins
+      if (this.builder.win.builderRuntime) this.builder.win.builderRuntime.reinitialize(cell);
     }
   }
   moveColumnUp() {
@@ -16234,6 +16282,9 @@ class Grid {
           //Move row up
           row.parentNode.insertBefore(row, row.previousElementSibling);
           this.builder.opts.onChange(true);
+
+          // Re-init plugins
+          if (this.builder.win.builderRuntime) this.builder.win.builderRuntime.reinitialize(row);
           return;
         } else {
           this.builder.uo.saveForUndo();
@@ -16284,6 +16335,9 @@ class Grid {
     row = cell.parentNode; //update active row
     util.fixLayout(row);
     if (row.nextElementSibling) util.fixLayout(row.nextElementSibling);
+
+    // Re-init plugins
+    if (this.builder.win.builderRuntime) this.builder.win.builderRuntime.reinitialize(row);
   }
   moveColumnDown() {
     let builder = this.builder;
@@ -16314,6 +16368,9 @@ class Grid {
           //Move row down
           row.parentNode.insertBefore(row.nextElementSibling, row);
           this.builder.opts.onChange(true);
+
+          // Re-init plugins
+          if (this.builder.win.builderRuntime) this.builder.win.builderRuntime.reinitialize(row);
           return;
         } else {
           this.builder.uo.saveForUndo();
@@ -16364,6 +16421,9 @@ class Grid {
     row = cell.parentNode; //update active row
     util.fixLayout(row);
     if (row.previousElementSibling) util.fixLayout(row.previousElementSibling);
+
+    // Re-init plugins
+    if (this.builder.win.builderRuntime) this.builder.win.builderRuntime.reinitialize(row);
   }
   duplicateColumn() {
     let builder = this.builder;
@@ -16405,6 +16465,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;
@@ -17067,6 +17128,9 @@ class Grid {
       row.parentNode.insertBefore(row, row.previousElementSibling);
       this.rowTool.position(row);
       this.builder.opts.onChange();
+
+      // Re-init plugins
+      if (this.builder.win.builderRuntime) this.builder.win.builderRuntime.reinitialize(row);
     } else {
       // Move to previous container
 
@@ -17111,6 +17175,9 @@ class Grid {
       row.parentNode.insertBefore(row.nextElementSibling, row);
       this.rowTool.position(row);
       this.builder.opts.onChange();
+
+      // Re-init plugins
+      if (this.builder.win.builderRuntime) this.builder.win.builderRuntime.reinitialize(row);
     } else {
       // Move to next container
 
@@ -17181,6 +17248,7 @@ class Grid {
 
     // Re-init plugins
     if (this.builder.win.builderRuntime) this.builder.win.builderRuntime.reinitialize(rowElement);
+    this.builder.makeSortable(rowElement);
   }
 }
 class RowTool$1 {
@@ -53899,6 +53967,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');
@@ -54009,6 +54078,7 @@ class RowTool {
       if (elm) dom.addEventListener(elm, 'click', () => {
         this.grid.removeRow();
         util.clearControls();
+        util.clearModals();
         if (this.builder.onSelectChange) this.builder.onSelectChange();
       });
     }
@@ -93406,6 +93476,9 @@ class BlockModal {
     new Tabs({
       element: modal
     });
+    new Draggable$2({
+      selector: '.is-modal.editblock .is-draggable'
+    });
   } // constructor
 
   getPage() {
@@ -96014,6 +96087,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
           }
         });
       });
+      this.makeSortable(this.doc);
     }
 
     // Load plugins
@@ -97889,8 +97963,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
+                  }
                 }
               }
             }
@@ -97991,6 +98073,9 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
         });
       });
     });
+    setTimeout(() => {
+      this.makeSortable(this.doc);
+    }, 400);
     this.doc.querySelectorAll('.dummy-module').forEach(module => {
       module.classList.remove('dummy-module');
     });
@@ -99655,6 +99740,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);
@@ -99778,24 +99864,7 @@ Please obtain a license at: https://innovastudio.com/contentbox`);
       });
 
       // On Load HTML
-      const grids = this.doc.querySelectorAll('.grid-sortable');
-      grids.forEach(grid => {
-        if (grid.closest('.is-builder')) new Sortable(grid, {
-          animation: 600,
-          dragClass: 'hide-drag-class',
-          onStart: () => {
-            this.uo.saveForUndo(true);
-          },
-          onSort: () => {
-            if (grid.closest('[data-html]')) {
-              const moduleElm = grid.closest('[data-html]');
-              const encodedHtml = encodeURIComponent(moduleElm.innerHTML);
-              moduleElm.setAttribute('data-html', encodedHtml);
-              this.opts.onChange();
-            }
-          }
-        });
-      });
+      this.makeSortable(this.doc, true);
       this.refresh();
       if (this.win.Block) {
         this.win.Block.render();
@@ -99835,24 +99904,7 @@ Please obtain a license at: https://innovastudio.com/contentbox`);
     this.applyBehavior();
 
     // On Load HTML
-    const grids = this.doc.querySelectorAll('.grid-sortable');
-    grids.forEach(grid => {
-      if (grid.closest('.is-builder')) new Sortable(grid, {
-        animation: 600,
-        dragClass: 'hide-drag-class',
-        onStart: () => {
-          this.uo.saveForUndo(true);
-        },
-        onSort: () => {
-          if (grid.closest('[data-html]')) {
-            const moduleElm = grid.closest('[data-html]');
-            const encodedHtml = encodeURIComponent(moduleElm.innerHTML);
-            moduleElm.setAttribute('data-html', encodedHtml);
-            this.opts.onChange();
-          }
-        }
-      });
-    });
+    this.makeSortable(this.doc, true);
 
     // this.uo.saveForUndo(); //First time
 
@@ -102451,6 +102503,86 @@ Please obtain a license at: https://innovastudio.com/contentbox`);
     // this.doc.querySelectorAll('.elm-inspected').forEach(elm => elm.classList.remove('elm-inspected'));
     // this.doc.querySelectorAll('.elm-active').forEach(elm => elm.classList.remove('elm-active'));
   }
+
+  // Make list inside plugin element sortable
+  makeSortable(container, module) {
+    const grids = container.querySelectorAll('.grid-sortable');
+    grids.forEach(grid => {
+      const sortable = new Sortable(grid, {
+        animation: 600,
+        onStart: () => {
+          this.uo.saveForUndo(true);
+        },
+        onSort: async () => {
+          if (module) if (grid.closest('[data-html]')) {
+            const moduleElm = grid.closest('[data-html]');
+            const encodedHtml = encodeURIComponent(moduleElm.innerHTML);
+            moduleElm.setAttribute('data-html', encodedHtml);
+            this.onChange();
+          }
+          let plugin = grid.closest('[data-cb-original-content]');
+          if (plugin) {
+            // grid.setAttribute('data-cb-original-content', plugin.innerHTML); // don't do this!
+            this.updateCleanContentOrder(grid); // use this!
+
+            this.onChange();
+            grid.click();
+          }
+        }
+      });
+      // Store instance for later access
+      grid._sortable = sortable;
+    });
+  }
+  async updateCleanContentOrder(grid) {
+    if (!grid) return;
+    const plugin = grid.closest('[data-cb-original-content]');
+    if (!plugin) return;
+
+    // 1. Get the current visual order of data-index from the actual DOM
+    const newIndexOrder = Array.from(grid.children).map(child => child.dataset.index).filter(index => index !== undefined); // in case some lack data-index
+
+    // 2. Parse the *original clean* HTML
+    const cleanHtml = plugin.dataset.cbOriginalContent;
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(cleanHtml, 'text/html');
+    let cleanGrid = doc.querySelector('.grid-sortable');
+    let pluginIsSortableRoot = false;
+    if (!cleanGrid) {
+      // console.log('[step] .grid-sortable not found inside parsed clean HTML — creating wrapper from body children');
+      cleanGrid = doc.createElement('div');
+      cleanGrid.classList.add('grid-sortable');
+      Array.from(doc.body.children).forEach(child => {
+        if (child.nodeType === 1) cleanGrid.appendChild(child);
+      });
+      doc.body.innerHTML = '';
+      doc.body.appendChild(cleanGrid);
+      pluginIsSortableRoot = true;
+    }
+    const cleanItems = Array.from(cleanGrid.children).filter(el => el.nodeType === 1);
+
+    // 3. Build a map: data-index → clean node
+    const cleanItemMap = new Map();
+    cleanItems.forEach(item => {
+      const idx = item.dataset.index;
+      if (idx !== undefined) cleanItemMap.set(idx, item);
+    });
+
+    // 4. Reorder clean items to match newIndexOrder
+    const reorderedCleanItems = newIndexOrder.map(idx => cleanItemMap.get(idx)).filter(Boolean); // skip missing
+
+    // 5. Serialize back to HTML string
+    const newCleanHtml = reorderedCleanItems.map(item => item.outerHTML).join('');
+
+    // 6. Update the clean source
+    if (pluginIsSortableRoot) {
+      plugin.setAttribute('data-cb-original-content', newCleanHtml);
+    } else {
+      cleanGrid.innerHTML = newCleanHtml;
+      const newHTML = doc.body.innerHTML;
+      plugin.setAttribute('data-cb-original-content', newHTML);
+    }
+  }
 }
 
 export { ContentBuilder as default };