@innovastudio/contentbox 1.6.165 → 1.6.167

package/public/contentbox/contentbox.esm.js

@@ -12381,7 +12381,7 @@ class SettingsUIGenerator$1 {
       groupElement.className = 'cb-settings-group';
       const groupTitle = document.createElement('h3');
       groupTitle.className = 'cb-settings-group-title';
-      groupTitle.style.cssText = 'font-size: 17px;font-weight: 500;';
+      groupTitle.style.cssText = 'font-size: 16px;font-weight: 400;';
       groupTitle.textContent = group.label;
       groupElement.appendChild(groupTitle);
       group.fields.forEach(fieldKey => {
@@ -12625,6 +12625,45 @@ class SettingsUIGenerator$1 {
     return label;
   }
 
+  hexToRgba(color) {
+    // If it's already rgba() or rgb(), just return as-is
+    if (/^rgba?\(/i.test(color)) {
+      return color;
+    } // Otherwise assume hex
+
+
+    color = color.replace(/^#/, ''); // Expand shorthand hex (#rgb or #rgba)
+
+    if (color.length === 3 || color.length === 4) {
+      color = color.split('').map(ch => ch + ch).join('');
+    } // Parse r, g, b, a
+
+
+    const r = parseInt(color.substring(0, 2), 16);
+    const g = parseInt(color.substring(2, 4), 16);
+    const b = parseInt(color.substring(4, 6), 16);
+    const a = color.length === 8 ? parseInt(color.substring(6, 8), 16) / 255 : 1;
+    return `rgba(${r}, ${g}, ${b}, ${a})`;
+  }
+
+  toHex(colorStr) {
+    const ctx = document.createElement('canvas').getContext('2d');
+    ctx.fillStyle = colorStr;
+    const computed = ctx.fillStyle; // browser-normalized color
+    // If already hex and 7 or 9 chars long (#rrggbb or #rrggbbaa), return as-is
+
+    if (computed.startsWith('#')) return computed; // Parse rgba(...) or rgb(...)
+
+    const rgba = computed.match(/\d+(\.\d+)?/g).map(Number);
+    const [r, g, b, a = 1] = rgba; // default alpha = 1
+    // Convert RGB and Alpha to hex (2 digits each)
+
+    const rgbHex = [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');
+    const alphaHex = Math.round(a * 255).toString(16).padStart(2, '0'); // Only include alpha if it's not fully opaque
+
+    return a < 1 ? `#${rgbHex}${alphaHex}` : `#${rgbHex}`;
+  }
+
   createColorInput(name, config, value) {
     const container = document.createElement('div');
     const label = document.createElement('label');
@@ -12645,13 +12684,15 @@ class SettingsUIGenerator$1 {
     colorBtn.type = 'button';
     colorBtn.title = config.label || 'Color';
     colorBtn.className = 'btn-color is-btn-color';
-    colorBtn.style.backgroundColor = input.value;
+    colorBtn.style.backgroundColor = this.hexToRgba(input.value);
     colorBtn.setAttribute('aria-label', `Choose color for ${config.label || name}`);
 
     const openPicker = e => {
       e.preventDefault();
       this.builder.openColorPicker(input.value, color => {
-        input.value = color;
+        // input.value = color;
+        const hex = this.toHex(color);
+        input.value = hex;
         colorBtn.style.backgroundColor = color;
         input.dispatchEvent(new Event('change', {
           bubbles: true
@@ -12717,10 +12758,10 @@ class SettingsUIGenerator$1 {
     input.type = 'range';
     input.className = 'is-rangeslider';
     input.name = name;
-    input.value = currentVal;
     if (config.min !== undefined) input.min = config.min;
     if (config.max !== undefined) input.max = config.max;
     if (config.step !== undefined) input.step = config.step;
+    input.value = currentVal;
     input.addEventListener('input', () => {
       labelText.textContent = (config.label || name) + ': ' + input.value + (config.unit || '');
     });
@@ -12853,7 +12894,23 @@ class PanelPlugin {
       const originalElement = editableClone.cloneNode(false); // Let plugin handle everything - pass the editable clone
 
       const editorUI = plugin.editor.openContentEditor(editableClone, this.builder, async () => {
-        this.builder.editor.saveForUndo(); // Store edited content from clone
+        this.builder.editor.saveForUndo(); // Add index for sortable grid (for easy reorder)
+
+        let grid = editableClone.querySelector('.grid-sortable');
+
+        if (!grid) {
+          if (currentElement.classList.contains('grid-sortable')) {
+            grid = editableClone;
+          }
+        }
+
+        if (grid) {
+          Array.from(grid.children).forEach((child, index) => {
+            if (child.nodeType === 1 && child.tagName !== 'STYLE' && child.tagName !== 'SCRIPT') child.setAttribute('data-index', index);
+          });
+        } //----
+        // Store edited content from clone
+
 
         currentElement.setAttribute('data-cb-original-content', editableClone.innerHTML); // Also performs similar value updates like the applyChanges()
         // currentElement.setAttribute('data-cb-content', editableClone.getAttribute('data-cb-content'));
@@ -12884,6 +12941,8 @@ class PanelPlugin {
 
         await runtime.reinitialize(currentElement.parentElement);
         this.builder.onChange();
+        this.builder.editor.hideElementTools();
+        this.builder.makeSortable(currentElement.parentElement);
       });
       div.appendChild(editorUI);
     } // Generate form
@@ -12906,6 +12965,8 @@ class PanelPlugin {
     const container = this.currentElement.parentElement || this.currentElement.closest('.is-wrapper');
     await runtime.reinitialize(container);
     this.builder.onChange(); // console.log('Settings applied and component reinitialized');
+
+    this.builder.makeSortable(container);
   }
 
 }
@@ -13825,6 +13886,12 @@ class PanelBox {
 
         </div>
 
+        <div class="submain box-plugin-settings">
+
+            <hr style="width: 100%;border-bottom: #ededed 2px solid;margin-top: 20px;">
+
+        </div>
+
         <button class="accordion-item btn-accordion-content" aria-expanded="false" aria-controls="boxcontent1">
             ${out('Content')}
             <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>
@@ -15203,9 +15270,134 @@ class PanelBox {
       chkAutoLayout.checked = true;
     } else {
       chkAutoLayout.checked = false;
+    } // PLUGIN SETTINGS
+
+
+    const divPluginSettings = panel.querySelector('.box-plugin-settings');
+    this.divPluginSettings = divPluginSettings;
+    const runtime = this.builder.win.builderRuntime;
+
+    if (overlayContent && runtime) {
+      const currentElement = overlayContent.querySelector('[data-cb-type]');
+
+      if (currentElement) {
+        divPluginSettings.style.display = '';
+        this.renderPluginSettings(currentElement);
+      } else {
+        divPluginSettings.style.display = 'none';
+      }
     }
   }
 
+  renderPluginSettings(currentElement) {
+    this.currentElement = currentElement;
+    this.generator = null;
+    this.currentForm = null;
+    const divPluginSettings = this.divPluginSettings;
+    divPluginSettings.innerHTML = '';
+    const runtime = this.builder.win.builderRuntime;
+    const pluginName = currentElement.getAttribute('data-cb-type');
+    const plugin = runtime.getPlugin(pluginName);
+    if (!plugin) return;
+    let displayName = out(plugin.displayName || plugin.name);
+    const divTitle = document.createElement('h3');
+    divTitle.style.cssText = 'font-family: sans-serif;font-weight: 300;font-size: 20px;margin: 0 0 12px;';
+    divTitle.innerText = displayName;
+    divPluginSettings.appendChild(divTitle);
+    this.generator = new SettingsUIGenerator$1(runtime, this.builder);
+    const hasContentEditor = plugin && plugin.editor && plugin.editor.openContentEditor;
+
+    if (hasContentEditor) {
+      // Get original content for the editor to work with
+      const originalContent = currentElement.getAttribute('data-cb-original-content'); // Create a temporary element for editing (so editor can manipulate it)
+
+      let editableClone = document.querySelector('.editable-clone');
+      if (editableClone) editableClone.remove(); // editableClone = document.createElement('div');
+
+      editableClone = currentElement.cloneNode(false);
+      editableClone.innerHTML = originalContent;
+      editableClone.className = 'editable-clone';
+      editableClone.style.display = 'none'; // Hidden, just for editing
+
+      document.body.appendChild(editableClone);
+      const originalElement = editableClone.cloneNode(false); // Let plugin handle everything - pass the editable clone
+
+      const editorUI = plugin.editor.openContentEditor(editableClone, this.builder, async () => {
+        this.builder.editor.saveForUndo(); // Add index for sortable grid (for easy reorder)
+
+        let grid = editableClone.querySelector('.grid-sortable');
+
+        if (!grid) {
+          if (currentElement.classList.contains('grid-sortable')) {
+            grid = editableClone;
+          }
+        }
+
+        if (grid) {
+          Array.from(grid.children).forEach((child, index) => {
+            if (child.nodeType === 1 && child.tagName !== 'STYLE' && child.tagName !== 'SCRIPT') child.setAttribute('data-index', index);
+          });
+        } //----
+        // Store edited content from clone
+
+
+        currentElement.setAttribute('data-cb-original-content', editableClone.innerHTML); // Also performs similar value updates like the applyChanges()
+        // currentElement.setAttribute('data-cb-content', editableClone.getAttribute('data-cb-content'));
+
+        const getChangedDataAttributes = (el1, el2) => {
+          const changed = [];
+
+          for (const key of Object.keys(el1.dataset)) {
+            if (key in el2.dataset && el1.dataset[key] !== el2.dataset[key]) {
+              changed.push(key);
+            }
+          }
+
+          return changed;
+        };
+
+        const changedAttributes = getChangedDataAttributes(originalElement, editableClone);
+        changedAttributes.forEach(attrName => {
+          // console.log(attrName)
+          // console.log(editableClone.dataset[attrName])
+          currentElement.dataset[attrName] = editableClone.dataset[attrName];
+        }); // -------
+
+        currentElement.innerHTML = editableClone.innerHTML; // Update current content
+        // Remove temporary clone
+
+        editableClone.remove(); // Reinitialize plugin with new content
+
+        await runtime.reinitialize(currentElement.parentElement);
+        this.builder.onChange();
+        this.builder.editor.hideElementTools();
+        this.builder.makeSortable(currentElement.parentElement);
+      });
+      divPluginSettings.appendChild(editorUI);
+    } // Generate form
+
+
+    this.currentForm = this.generator.generateForm(pluginName, currentElement, () => {
+      this.builder.editor.saveForUndo();
+      this.applyChanges(runtime);
+    });
+    divPluginSettings.appendChild(this.currentForm);
+  }
+
+  async applyChanges(runtime) {
+    if (!this.currentElement || !this.currentForm) return; // 1. Get form values
+
+    const values = this.generator.getFormValues(this.currentForm); // 2. Apply to element attributes
+
+    this.generator.applyValues(this.currentElement, values); // 3. Reinitialize component
+
+    const container = this.currentElement.parentElement || this.currentElement.closest('.is-wrapper');
+    await runtime.reinitialize(container);
+    this.builder.onChange(); // console.log('Settings applied and component reinitialized');
+
+    this.builder.makeSortable(container);
+  }
+
   getStateTargeted() {
     let activeBox = this.builder.controlpanel.activeBox;
     if (!activeBox) return;
@@ -26210,8 +26402,14 @@ class ControlPanel {
 
     this.builder.onPageContentClick = e => {
       if (old) old.call(this);
-      if (this.builder.controlPanel && !document.body.classList.contains('controlpanel')) this.open();
-      if (document.body.classList.contains('controlpanel')) this.clickContent(e);
+
+      if (this.builder.controlPanel && !document.body.classList.contains('controlpanel')) {
+        //if previously close, open
+        this.open();
+      } else {
+        // if already open
+        if (document.body.classList.contains('controlpanel')) this.clickContent(e);
+      }
     };
 
     const btnClose = controlPanel.querySelector('.btn-close');
@@ -26934,6 +27132,7 @@ class ControlPanel {
             }
 
             const plugin = runtime.getPlugin(pluginName);
+            if (!plugin) return;
             let titleHtml = out(plugin.displayName || plugin.name);
             this.title.innerHTML = titleHtml; // this.title.style.cssText = 'margin-bottom: 0';
 
@@ -32643,18 +32842,21 @@ class Util$1 {
       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') {
@@ -32772,6 +32974,12 @@ class Util$1 {
 
     //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
@@ -32864,6 +33072,11 @@ class Util$1 {
 
       //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');
@@ -33037,6 +33250,9 @@ class Util$1 {
       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', '');
@@ -33254,6 +33470,11 @@ class Util$1 {
     }
   }
 
+  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;
@@ -41663,6 +41884,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;
@@ -42235,6 +42457,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) {
@@ -43367,6 +43608,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() {
@@ -43379,6 +43623,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() {
@@ -43408,6 +43655,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();
@@ -43458,6 +43708,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;
@@ -43488,6 +43741,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();
@@ -43538,6 +43794,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;
@@ -43579,6 +43838,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;
@@ -44241,6 +44501,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
 
@@ -44285,6 +44548,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
 
@@ -44355,6 +44621,7 @@ class Grid {
 
     // Re-init plugins
     if (this.builder.win.builderRuntime) this.builder.win.builderRuntime.reinitialize(rowElement);
+    this.builder.makeSortable(rowElement);
   }
 }
 class RowTool$1 {
@@ -81073,6 +81340,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');
@@ -81183,6 +81451,7 @@ class RowTool {
       if (elm) dom.addEventListener(elm, 'click', () => {
         this.grid.removeRow();
         util.clearControls();
+        util.clearModals();
         if (this.builder.onSelectChange) this.builder.onSelectChange();
       });
     }
@@ -120580,6 +120849,9 @@ class BlockModal {
     new Tabs({
       element: modal
     });
+    new Draggable$2({
+      selector: '.is-modal.editblock .is-draggable'
+    });
   } // constructor
 
   getPage() {
@@ -123188,6 +123460,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
           }
         });
       });
+      this.makeSortable(this.doc);
     }
 
     // Load plugins
@@ -125063,8 +125336,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
+                  }
                 }
               }
             }
@@ -125165,6 +125446,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');
     });
@@ -126829,6 +127113,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);
@@ -126952,24 +127237,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$1(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();
@@ -127009,24 +127277,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$1(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
 
@@ -129625,6 +129876,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$1(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);
+    }
+  }
 }
 
 class ContentStuff {
@@ -165286,23 +165617,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
         activeModule.appendChild(range.createContextualFragment(html)); // We use createContextualFragment so that embedded javascript code (code block) will be executed
 
         this.settings.onRender();
-        const grids = activeModule.querySelectorAll('.grid-sortable');
-        grids.forEach(grid => {
-          new Sortable(grid, {
-            animation: 600,
-            onStart: () => {
-              this.editor.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.onChange();
-              }
-            }
-          });
-        });
+        this.makeSortable(activeModule);
         this.settings.onChange();
         this.hideModal(modalEditModule);
       });
@@ -166369,27 +166684,89 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       const typePanel = document.querySelector('#divSidebarTypography');
       if (typePanel.classList.contains('active')) this.sidebar.selectType();
     });
-    const grids = box.querySelectorAll('.grid-sortable'); // apply sortable to all grids, including any in is-container,
-    // since ContentBuilder loadHTML is not used here in ContentBox
+    this.makeSortable(box, true);
+  } // boxSetup
+  // Make list inside plugin element sortable
 
+
+  makeSortable(container, module) {
+    const grids = container.querySelectorAll('.grid-sortable');
     grids.forEach(grid => {
-      new Sortable(grid, {
+      const sortable = new Sortable(grid, {
         animation: 600,
         onStart: () => {
           this.editor.saveForUndo(true);
         },
-        onSort: () => {
-          if (grid.closest('[data-html]')) {
+        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;
     });
-  } // boxSetup
+  }
+
+  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);
+    }
+  }
 
   addSection(html, contentCss) {
     let newSection = this.addIdea(html);