@innovastudio/contentbuilder 1.5.163 → 1.5.164

package/package.json

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

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,10 @@ class Util {
 
     //Trigger Render event
     this.builder.opts.onRender();
+
+    // Reinit after drag drop block
+    if (this.builder.win.builderRuntime) this.builder.win.builderRuntime.reinitialize();
+    this.builder.makeSortable(this.builder.doc);
   }
 
   // https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro
@@ -5690,6 +5697,7 @@ class Util {
 
       //Hide Column tool (new!)
       this.builder.util.hideColumnTool();
+      this.builder.makeSortable(rowElement);
     } else if (bSnippet) {
       if (noedit) {
         this.addContent(html, mode, 'data-noedit');
@@ -5863,6 +5871,7 @@ class Util {
       this.builder.doc.querySelectorAll('.dummy-module').forEach(module => {
         module.classList.remove('dummy-module');
       });
+      this.builder.makeSortable(this.builder.doc);
 
       // Change to row selection
       rowElement.className = rowElement.className.replace('row-outline', '');
@@ -14489,6 +14498,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 +15071,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 +16222,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 +16237,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 +16269,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 +16322,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 +16355,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 +16408,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;
@@ -17067,6 +17114,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 +17161,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
 
@@ -96014,6 +96067,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
           }
         });
       });
+      this.makeSortable(this.doc);
     }
 
     // Load plugins
@@ -97991,6 +98045,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
         });
       });
     });
+    this.makeSortable(this.doc);
     this.doc.querySelectorAll('.dummy-module').forEach(module => {
       module.classList.remove('dummy-module');
     });
@@ -99778,24 +99833,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 +99873,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 +102472,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 };