@innovastudio/contentbox 1.6.165 → 1.6.166

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.165",
+  "version": "1.6.166",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "types": "index.d.ts",
@@ -59,7 +59,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.163",
+    "@innovastudio/contentbuilder": "^1.5.164",
     "js-beautify": "^1.14.0",
     "sortablejs": "^1.15.2"
   }

package/public/contentbox/contentbox.esm.js

@@ -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);
   }
 
 }
@@ -26934,6 +26995,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 +32705,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 +32837,10 @@ 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();
+    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
@@ -32864,6 +32933,7 @@ class Util$1 {
 
       //Hide Column tool (new!)
       this.builder.util.hideColumnTool();
+      this.builder.makeSortable(rowElement);
     } else if (bSnippet) {
       if (noedit) {
         this.addContent(html, mode, 'data-noedit');
@@ -33037,6 +33107,7 @@ class Util$1 {
       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', '');
@@ -41663,6 +41734,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 +42307,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 +43458,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 +43473,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 +43505,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 +43558,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 +43591,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 +43644,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;
@@ -44241,6 +44350,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 +44397,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
 
@@ -123188,6 +123303,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
           }
         });
       });
+      this.makeSortable(this.doc);
     }
 
     // Load plugins
@@ -125165,6 +125281,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');
     });
@@ -126952,24 +127069,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 +127109,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 +129708,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 +165449,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 +166516,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);