@innovastudio/contentbuilder 1.5.157 → 1.5.159

package/public/contentbuilder/contentbuilder.esm.js

@@ -14428,7 +14428,7 @@ class HtmlUtil {
       this.builder.opts.onRender();
 
       // Re-select
-      if (row.firstChild) row.firstChild.click();
+      // if(row.firstChild) row.firstChild.click();
       //Change to row selection
       row.classList.remove('row-outline');
       //Hide Column tool (new!)
@@ -15040,6 +15040,7 @@ class HtmlUtil {
 
         // Remove runtime-added attributes
         element.removeAttribute('data-cb-original-content');
+        element.removeAttribute('data-cb-loaded');
 
         // element.removeAttribute('data-cb-logo-loop-initialized');
 
@@ -50724,6 +50725,815 @@ class Spacer {
   }
 }
 
+/**
+ * ContentBox Settings UI Generator
+ * Automatically generates settings form based on plugin schema
+ * 
+ * Usage in ContentBox Editor:
+ * const generator = new SettingsUIGenerator(runtime);
+ * const form = generator.generateForm('logo-loop', currentElement);
+ * panel.appendChild(form);
+ */
+
+class SettingsUIGenerator {
+  constructor(runtime, builder) {
+    this.runtime = runtime;
+    this.builder = builder;
+  }
+
+  /**
+   * Generate settings form for a plugin
+   * @param {string} pluginName - Plugin name
+   * @param {HTMLElement} element - Current element being edited
+   * @returns {HTMLElement} Form element
+   */
+  generateForm(pluginName, element, onChange) {
+    const plugin = this.runtime.getPlugin(pluginName);
+    if (!plugin || !plugin.settings) {
+      console.warn(`Plugin "${pluginName}" has no settings schema`);
+      return this.createEmptyForm();
+    }
+    const form = document.createElement('div');
+    form.className = 'cb-settings-form';
+
+    // Get current values from element
+    const currentValues = this.getCurrentValues(element, plugin.settings);
+
+    // Check if plugin has grouped settings
+    if (plugin.settings._groups) {
+      this.generateGroupedForm(form, plugin.settings, currentValues);
+    } else {
+      this.generateFlatForm(form, plugin.settings, currentValues);
+    }
+
+    // Attach listeners for auto-update
+    if (typeof onChange === 'function') {
+      form.addEventListener('input', () => {
+        const values = this.getFormValues(form);
+        onChange(values, element);
+      });
+      form.addEventListener('change', () => {
+        const values = this.getFormValues(form);
+        onChange(values, element);
+      });
+    }
+    return form;
+  }
+
+  /**
+   * Generate flat form (no groups)
+   */
+  generateFlatForm(container, settings, currentValues) {
+    Object.keys(settings).forEach(key => {
+      if (key.startsWith('_')) return; // Skip meta keys
+
+      const field = settings[key];
+      const fieldElement = this.createField(key, field, currentValues[key]);
+      container.appendChild(fieldElement);
+    });
+  }
+
+  /**
+   * Generate grouped form
+   */
+  generateGroupedForm(container, settings, currentValues) {
+    const groups = settings._groups || [];
+    groups.forEach(group => {
+      const groupElement = document.createElement('div');
+      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.textContent = group.label;
+      groupElement.appendChild(groupTitle);
+      group.fields.forEach(fieldKey => {
+        const field = settings[fieldKey];
+        if (!field) return;
+        const fieldElement = this.createField(fieldKey, field, currentValues[fieldKey]);
+        groupElement.appendChild(fieldElement);
+      });
+      container.appendChild(groupElement);
+    });
+  }
+
+  /**
+   * Create a single form field
+   */
+  createField(name, config, value) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'cb-settings-field';
+    wrapper.style.marginBottom = '20px';
+    wrapper.setAttribute('data-field', name);
+
+    // Add conditional display logic
+    if (config.dependsOn) {
+      wrapper.setAttribute('data-depends-on', JSON.stringify(config.dependsOn));
+      wrapper.style.display = 'none'; // Hidden by default, shown by JS
+    }
+
+    // Label
+    const label = document.createElement('label');
+    label.className = 'cb-settings-label';
+    label.style.fontWeight = 500;
+    label.textContent = config.label || name;
+    // wrapper.appendChild(label);
+
+    // Input based on type
+    const input = this.createInput(name, config, value);
+    wrapper.appendChild(input);
+
+    // Description
+    // if (config.description) {
+    //     const desc = document.createElement('p');
+    //     desc.className = 'cb-settings-description';
+    //     desc.textContent = config.description;
+    //     wrapper.appendChild(desc);
+    // }
+
+    return wrapper;
+  }
+
+  /**
+   * Create input element based on field type
+   */
+  createInput(name, config, value) {
+    const currentValue = value !== undefined ? value : config.default;
+    switch (config.type) {
+      case 'number':
+        return this.createNumberInput(name, config, currentValue);
+      case 'boolean':
+        return this.createCheckboxInput(name, config, currentValue);
+      case 'select':
+        return this.createSelectInput(name, config, currentValue);
+      case 'radio':
+        return this.createRadioInput(name, config, currentValue);
+      case 'textarea':
+        return this.createTextareaInput(name, config, currentValue);
+      case 'color':
+        return this.createColorInput(name, config, currentValue);
+      case 'range':
+        return this.createRangeInput(name, config, currentValue);
+      case 'text':
+      default:
+        return this.createTextInput(name, config, currentValue);
+    }
+  }
+  createTextInput(name, config, value) {
+    const label = document.createElement('label');
+    label.className = 'label';
+    label.style.fontWeight = 500;
+    const labelText = document.createElement('div');
+    labelText.textContent = config.label || name;
+    label.appendChild(labelText);
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.name = name;
+    input.value = value || '';
+    if (config.placeholder) input.placeholder = config.placeholder;
+    label.appendChild(input);
+
+    // Add description if exists
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      label.appendChild(desc);
+    }
+    return label;
+  }
+  createNumberInput(name, config, value) {
+    const label = document.createElement('label');
+    label.className = 'label';
+    label.style.fontWeight = 500;
+    const labelText = document.createElement('div');
+    labelText.textContent = config.label || name;
+    if (config.unit) {
+      labelText.textContent += ` (${config.unit})`;
+    }
+    label.appendChild(labelText);
+    const input = document.createElement('input');
+    input.type = 'number';
+    input.style.cssText = 'width: 100px;';
+    input.name = name;
+    input.value = value !== undefined ? value : config.default;
+    if (config.min !== undefined) input.min = config.min;
+    if (config.max !== undefined) input.max = config.max;
+    if (config.step !== undefined) input.step = config.step;
+    label.appendChild(input);
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      label.appendChild(desc);
+    }
+    return label;
+  }
+  createCheckboxInput(name, config, value) {
+    const label = document.createElement('label');
+    label.className = 'label checkbox';
+    const div = document.createElement('div');
+    const input = document.createElement('input');
+    input.type = 'checkbox';
+    input.name = name;
+    input.checked = value !== undefined ? value : config.default;
+    const span = document.createElement('span');
+    span.textContent = config.label || name;
+    label.appendChild(input);
+    label.appendChild(span);
+    div.appendChild(label);
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      div.appendChild(desc);
+    }
+    return label;
+  }
+  createSelectInput(name, config, value) {
+    const label = document.createElement('label');
+    label.className = 'label';
+    label.style.fontWeight = 500;
+    const labelText = document.createTextNode((config.label || name) + ':');
+    label.appendChild(labelText);
+    const select = document.createElement('select');
+    select.name = name;
+    config.options.forEach(option => {
+      const opt = document.createElement('option');
+      opt.value = option.value;
+      opt.textContent = option.label;
+      if (option.value === value) opt.selected = true;
+      select.appendChild(opt);
+    });
+    label.appendChild(select);
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      label.appendChild(desc);
+    }
+    return label;
+  }
+  createRadioInput(name, config, value) {
+    const wrapper = document.createElement('div');
+    const title = document.createElement('div');
+    title.textContent = config.label || name;
+    title.style.cssText = 'margin-bottom: 8px;font-weight: 590;';
+    wrapper.appendChild(title);
+    config.options.forEach(option => {
+      const label = document.createElement('label');
+      label.className = 'label checkbox';
+      const input = document.createElement('input');
+      input.type = 'radio';
+      input.name = name;
+      input.value = option.value;
+      input.checked = option.value === value;
+      const span = document.createElement('span');
+      span.textContent = option.label;
+      label.appendChild(input);
+      label.appendChild(span);
+      wrapper.appendChild(label);
+    });
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      wrapper.appendChild(desc);
+    }
+    return wrapper;
+  }
+  createTextareaInput(name, config, value) {
+    const label = document.createElement('label');
+    label.className = 'label';
+    label.style.fontWeight = 500;
+    const labelText = document.createElement('div');
+    labelText.textContent = config.label || name;
+    label.appendChild(labelText);
+    const textarea = document.createElement('textarea');
+    textarea.name = name;
+    textarea.value = value || '';
+    textarea.rows = config.rows || 4;
+    if (config.placeholder) textarea.placeholder = config.placeholder;
+    label.appendChild(textarea);
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      label.appendChild(desc);
+    }
+    return label;
+  }
+  createColorInput(name, config, value) {
+    const container = document.createElement('div');
+    const label = document.createElement('label');
+    label.className = 'label';
+    label.style.fontWeight = 500;
+    label.style.cursor = 'pointer';
+    const labelText = document.createElement('div');
+    labelText.textContent = config.label || name;
+    label.appendChild(labelText);
+    const input = document.createElement('input');
+    input.type = 'hidden';
+    input.name = name;
+    input.value = value || config.default || '#000000';
+    const group = document.createElement('div');
+    group.className = 'group';
+    group.style.cssText = 'width: 52px; margin:0; overflow: visible;';
+    const colorBtn = document.createElement('button');
+    colorBtn.type = 'button';
+    colorBtn.title = config.label || 'Color';
+    colorBtn.className = 'btn-color is-btn-color';
+    colorBtn.style.backgroundColor = 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;
+        colorBtn.style.backgroundColor = color;
+        input.dispatchEvent(new Event('change', {
+          bubbles: true
+        }));
+      }, colorBtn);
+    };
+    colorBtn.addEventListener('click', openPicker);
+    // Make label click trigger the button
+    label.addEventListener('click', e => {
+      if (e.target === label || e.target === labelText) {
+        colorBtn.click();
+      }
+    });
+    group.appendChild(colorBtn);
+    label.appendChild(input);
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      label.appendChild(desc);
+    }
+    container.appendChild(label);
+    container.appendChild(group);
+    return container;
+  }
+  createColorInput2(name, config, value) {
+    const label = document.createElement('label');
+    label.className = 'label';
+    label.style.fontWeight = 500;
+    const labelText = document.createElement('div');
+    labelText.textContent = config.label || name;
+    label.appendChild(labelText);
+    const input = document.createElement('input');
+    input.type = 'color';
+    input.name = name;
+    input.style.cssText = 'width:40px;height:40px';
+    input.value = value || config.default || '#000000';
+    label.appendChild(input);
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      label.appendChild(desc);
+    }
+    return label;
+  }
+  createRangeInput(name, config, value) {
+    const label = document.createElement('label');
+    label.className = 'label';
+    label.style.fontWeight = 500;
+    const currentVal = value !== undefined ? value : config.default;
+    const labelText = document.createElement('div');
+    labelText.textContent = (config.label || name) + ': ' + currentVal + (config.unit || '');
+    label.appendChild(labelText);
+    const input = document.createElement('input');
+    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.addEventListener('input', () => {
+      labelText.textContent = (config.label || name) + ': ' + input.value + (config.unit || '');
+    });
+    label.appendChild(input);
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      label.appendChild(desc);
+    }
+    return label;
+  }
+
+  /**
+   * Get current values from element attributes
+   */
+  getCurrentValues(element, settings) {
+    const values = {};
+    Object.keys(settings).forEach(key => {
+      if (key.startsWith('_')) return;
+      const attrName = 'data-cb-' + key.replace(/([A-Z])/g, '-$1').toLowerCase();
+      const attrValue = element.getAttribute(attrName);
+      if (attrValue !== null) {
+        values[key] = this.parseValue(attrValue, settings[key].type);
+      }
+    });
+    return values;
+  }
+
+  /**
+   * Parse attribute value based on type
+   */
+  parseValue(value, type) {
+    switch (type) {
+      case 'number':
+        return parseFloat(value);
+      case 'boolean':
+        return value === 'true';
+      default:
+        return value;
+    }
+  }
+
+  /**
+   * Get form values
+   */
+  getFormValues(form) {
+    const values = {};
+    const inputs = form.querySelectorAll('input, select, textarea');
+    inputs.forEach(input => {
+      const name = input.name;
+      if (!name) return;
+      if (input.type === 'checkbox') {
+        values[name] = input.checked;
+      } else if (input.type === 'radio') {
+        if (input.checked) {
+          values[name] = input.value;
+        }
+      } else {
+        values[name] = input.value;
+      }
+    });
+    return values;
+  }
+
+  /**
+   * Apply form values to element
+   */
+  applyValues(element, values) {
+    Object.keys(values).forEach(key => {
+      const attrName = 'data-cb-' + key.replace(/([A-Z])/g, '-$1').toLowerCase();
+      element.setAttribute(attrName, values[key]);
+    });
+  }
+  createEmptyForm() {
+    const form = document.createElement('div');
+    form.className = 'cb-settings-form';
+    form.innerHTML = '<p>This plugin has no configurable settings.</p>';
+    return form;
+  }
+}
+
+class Plugin {
+  constructor(builder) {
+    this.builder = builder;
+  }
+  renderTool() {
+    const builderStuff = this.builder.builderStuff;
+    const contentStuff = this.builder.contentStuff;
+    const util = this.builder.util;
+    const dom = this.builder.dom;
+    let pluginTool = builderStuff.querySelector('.is-plugin-tool');
+    if (!pluginTool) {
+      let html = `
+            <div class="is-tool is-plugin-tool">
+                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
+            </div>
+            `;
+      dom.appendHtml(builderStuff, html);
+      if (!this.builder.iframe) {
+        pluginTool = builderStuff.querySelector('.is-plugin-tool');
+      } else {
+        pluginTool = contentStuff.querySelector('.is-plugin-tool');
+      }
+      this.pluginTool = pluginTool;
+      let btn = pluginTool.querySelector('button');
+      dom.addEventListener(btn, 'click', () => {
+        // old 10317
+
+        if (this.pluginModal && this.pluginModal.classList.contains('active')) {
+          this.hidePluginEditor();
+        } else {
+          this.renderPanel();
+          this.showPluginEditor();
+        }
+        btn.setAttribute('data-focus', true);
+      });
+    }
+  }
+  renderPanel() {
+    const builderStuff = this.builder.builderStuff;
+    const util = this.builder.util;
+    const dom = this.builder.dom;
+    let pluginModal = builderStuff.querySelector('.is-modal.pluginsettings');
+    if (!pluginModal) {
+      let html = `
+            <div class="is-modal is-modal-content pluginsettings" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+                <div class="is-modal-bar is-draggable">
+                    <span>${util.out('Plugin Settings')}</span>
+                    <button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">&#10005;</button>
+                </div>
+                <div class="is-modal-controls" style="box-sizing:border-box;padding:30px;overflow-y: auto;height: calc(100% - 30px);">
+                    <div class="is-tabs" data-group="table">
+                        <a title="${util.out('Style')}" id="tabTableGeneral" href="" data-content="divTableGeneral" class="active">${util.out('Style')}</a>
+                        <a title="${util.out('Layout')}" id="tabTableLayout" href="" data-content="divTableLayout">${util.out('Layout')}</a>
+                    </div>
+                    <div id="divTableGeneral" class="is-tab-content active" tabindex="-1" data-group="table" style="display:block">
+
+                        <div style="display:flex;padding-bottom:12px">
+                            <div style="padding-right:15px">
+                                <div>${util.out('Background')}:</div>
+                                <div>
+                                    <button title="${util.out('Background Color')}" class="input-table-bgcolor is-btn-color"></button>
+                                </div>
+                            </div>
+                            <div>
+                                <div>${util.out('Text Color')}:</div>
+                                <div>
+                                    <button title="${util.out('Text Color')}" class="input-table-textcolor is-btn-color"></button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div style="padding-bottom:12px;">
+                            <div>${util.out('Border Thickness')}:</div>
+                            <div>
+                                <select id="selCellBorderWidth" style="width:120px;"><option value="0">No Border</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>  
+                            </div>
+                        </div>
+                        
+                        <div style="padding-bottom:12px;">
+                            <div>${util.out('Border Color')}:</div>
+                            <div>
+                                <button title="${util.out('Border Color')}" class="input-table-bordercolor is-btn-color"></button>
+                            </div>
+                        </div>
+                        
+                        <div style="padding-bottom:12px;">
+                            <div>${util.out('Apply To')}:</div>
+                            <div>
+                                <select id="selTableApplyTo" style="width:120px;">
+                                    <option value="table">${util.out('Table')}</option>
+                                    <option value="currentrow">${util.out('Current Row')}</option>
+                                    <option value="currentcol">${util.out('Current Column')}</option>
+                                    <option value="evenrows">${util.out('Even Rows')}</option>
+                                    <option value="oddrows">${util.out('Odd Rows')}</option>  
+                                    <option value="currentcell">${util.out('Current Cell')}</option>  
+                                </select>
+                            </div>
+                        </div>
+
+                    </div>
+
+                    <div id="divTableLayout" class="is-tab-content" tabindex="-1" data-group="table">
+                    
+                        <div style="padding-bottom:12px;">
+                            <div>${util.out('Insert Row')}:</div>
+                            <div style="display:flex">
+                                <button class="classic" title="${util.out('Above')}" data-table-cmd="rowabove" title="${util.out('Above')}" style="margin-right:15px"> ${util.out('Above')} </button>
+                                <button class="classic" title="${util.out('Below')}" data-table-cmd="rowbelow" title="${util.out('Below')}" style=""> ${util.out('Below')} </button>
+                            </div> 
+                        </div>
+                        
+                        <div style="padding-bottom:15px;">
+                            <div>${util.out('Insert Column')}:</div>
+                            <div style="display:flex">
+                                <button class="classic" title="${util.out('Left')}" data-table-cmd="columnleft" title="${util.out('Left')}" style="margin-right:15px"> ${util.out('Left')} </button> 
+                                <button class="classic" title="${util.out('Right')}" data-table-cmd="columnright" title="${util.out('Right')}" style=""> ${util.out('Right')} </button> 
+                            </div> 
+                        </div>
+
+                        <div style="padding-bottom:15px;">
+                            <button class="classic" title="${util.out('Delete Row')}" data-table-cmd="delrow" title="Delete Row" style=""> ${util.out('Delete Row')} </button> 
+                        </div>
+
+                        <div style="padding-bottom:15px;">    
+                            <button class="classic" title="${util.out('Delete Column')}" data-table-cmd="delcolumn" title="Delete Column" style=""> ${util.out('Delete Column')} </button> 
+                        </div>
+                        
+                        <div>    
+                            <button class="classic" title="${util.out('Merge Cell')}" data-table-cmd="mergecell" style="">${util.out('Merge Cell')}</button> 
+                        </div>
+                    </div>
+                </div>
+            </div>
+            `;
+      dom.appendHtml(builderStuff, html);
+      pluginModal = builderStuff.querySelector('.is-modal.pluginsettings');
+      this.pluginModal = pluginModal;
+      let btnOk = pluginModal.querySelector('.input-ok');
+      dom.addEventListener(btnOk, 'click', () => {
+        this.builder.uo.saveForUndo();
+        this.builder.opts.onChange();
+        util.hideModal(pluginModal);
+      });
+      let btnCancel = pluginModal.querySelector('.input-cancel');
+      dom.addEventListener(btnCancel, 'click', () => {
+        util.hideModal(pluginModal);
+      });
+      new Tabs({
+        element: pluginModal
+      });
+      new Draggable$2({
+        selector: '.is-modal.pluginsettings .is-draggable'
+      });
+    }
+  }
+  showPluginEditor() {
+    const pluginModal = this.pluginModal;
+    this.builder.util.showModal(pluginModal);
+    this.realtime();
+    const handlePluginClick = e => {
+      const clrPicker = document.querySelector('.pop-picker.active') || document.querySelector('.pickgradientcolor.active');
+      let elm = e.target;
+      let elmRemoved = !document.contains(elm); // e.g. when deleting a card in card list plugin
+
+      if (this.builder.doc.activeElement) {
+        if (this.builder.doc.activeElement.closest('.is-modal')) {
+          // prevent modal close when mouseup outside the modal
+          return;
+        }
+      }
+      if (!elm) return;
+      if (!elm.closest('.is-plugin-tool') && !elm.closest('.is-sidebar') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('[data-cb-type]') && !clrPicker && !elmRemoved) {
+        // click outside
+
+        // hide
+        this.hidePluginEditor();
+        // console.log('HIDE');
+
+        document.removeEventListener('click', handlePluginClick);
+        if (this.builder.iframeDocument) {
+          this.builder.doc.removeEventListener('click', handlePluginClick);
+        }
+        this.builder.handlePluginClick_ = false;
+      }
+      if (elm.closest('[data-cb-type]')) {
+        this.realtime();
+      }
+    };
+    if (!this.builder.handlePluginClick_) {
+      document.addEventListener('click', handlePluginClick);
+      if (this.builder.iframeDocument) {
+        this.builder.doc.addEventListener('click', handlePluginClick);
+      }
+      this.builder.handlePluginClick_ = true;
+    }
+  }
+  hidePluginEditor() {
+    const pluginModal = this.pluginModal;
+    if (pluginModal) this.builder.util.hideModal(pluginModal);
+  }
+  realtime() {
+    const util = this.builder.util;
+    const pluginModal = this.pluginModal;
+    let currentElement = this.builder.activePlugin;
+    const runtime = this.builder.win.builderRuntime;
+    if (currentElement && runtime) {
+      const pluginName = currentElement.getAttribute('data-cb-type');
+      const plugin = runtime.getPlugin(pluginName);
+      let titleHtml = util.out(plugin.displayName || plugin.name);
+      const modalBar = pluginModal.querySelector('.is-modal-bar > span');
+      modalBar.innerHTML = titleHtml;
+      const container = pluginModal.querySelector('.is-modal-controls');
+
+      // Clear panel
+      container.innerHTML = '';
+      const div = document.createElement('div');
+      div.classList.add('submain');
+      container.appendChild(div);
+
+      // Store references
+      this.currentElement = currentElement;
+      this.generator = new SettingsUIGenerator(runtime, this.builder);
+
+      // Check if plugin has custom content editor
+      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.uo.saveForUndo();
+
+          // 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);
+          // let hasChange = changedAttributes.length > 0;
+          for (const attrName of changedAttributes) {
+            // console.log(attrName);
+            currentElement.dataset[attrName] = editableClone.dataset[attrName];
+            // update form (not working)
+            // const convertCbKey = (str) => {
+            //     return str.replace(/^cb/, '').replace(/^./, c => c.toLowerCase());
+            // }
+            // const name = convertCbKey(attrName);
+            // this.currentForm.querySelector(`[name="${name}"]`).value = editableClone.dataset[attrName];
+          }
+          // console.log(hasChange)
+          // -------
+
+          currentElement.innerHTML = editableClone.innerHTML; // Update current content
+
+          // Remove temporary clone
+          editableClone.remove();
+
+          // update form (working)
+          // currentElement.click();
+          // return;
+
+          // Reinitialize plugin with new content
+          await runtime.reinitialize(currentElement.parentElement);
+          this.builder.onChange();
+        });
+        div.appendChild(editorUI);
+      }
+
+      // Generate form
+      this.currentForm = this.generator.generateForm(pluginName, currentElement, () => {
+        this.builder.uo.saveForUndo();
+        this.applyChanges(runtime);
+      });
+      this.currentForm.style.marginTop = '20px';
+      div.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);
+
+    //Trigger Change event
+    this.builder.opts.onChange();
+
+    // console.log('Settings applied and component reinitialized');
+  }
+
+  click(e) {
+    const plugin = e.target.closest('[data-cb-type]');
+    if (plugin) {
+      this.builder.activePlugin = plugin;
+      this.renderTool();
+      this.pluginTool.style.display = 'flex';
+      let _toolwidth = this.pluginTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
+
+      let w = plugin.offsetWidth * this.builder.opts.zoom;
+      let top = plugin.getBoundingClientRect().top + this.builder.win.pageYOffset;
+      let left = plugin.getBoundingClientRect().left - 2;
+      left = left + (w - _toolwidth);
+
+      //Adjust left in case an element is outside the screen
+      const _screenwidth = window.innerWidth;
+      if (_toolwidth + left > _screenwidth) left = plugin.getBoundingClientRect().left;
+      this.pluginTool.style.top = top + 'px';
+      this.pluginTool.style.left = left + 'px';
+    } else {
+      this.builder.activePlugin = null;
+      if (this.pluginTool) this.pluginTool.style.display = '';
+    }
+  }
+}
+
 class Module {
   constructor(builder) {
     this.builder = builder;
@@ -52565,6 +53375,7 @@ class Element$1 {
     this.button = new Button(builder);
     this.image = new Image$1(builder);
     this.spacer = new Spacer(builder);
+    this.plugin = new Plugin(builder);
     this.module = new Module(builder);
     this.code = new Code(builder);
     this.iframe = new Iframe(builder);
@@ -52603,6 +53414,10 @@ class Element$1 {
 
     // Set contentEditable FALSE on special elements
 
+    const plugins = col.querySelectorAll('[data-cb-type]'); // plugins
+    Array.prototype.forEach.call(plugins, plugin => {
+      plugin.contentEditable = false;
+    });
     let sociallinks = col.querySelectorAll('.is-social');
     Array.prototype.forEach.call(sociallinks, sociallink => {
       sociallink.contentEditable = false;
@@ -52767,6 +53582,9 @@ class Element$1 {
 
     // Module
     this.module.click(col, e);
+
+    // Plugin
+    this.plugin.click(e);
   }
 }
 
@@ -61922,6 +62740,12 @@ class ElementTool {
     const btnMore = elementTool.querySelector('.elm-more');
     dom.addEventListener(btnMore, 'click', () => {
       const viewportHeight = window.innerHeight;
+      const elmSettings = elementMore.querySelector('.elm-settings');
+      if (this.builder.activeElement.hasAttribute('data-cb-type')) {
+        elmSettings.style.display = 'none';
+      } else {
+        elmSettings.style.display = '';
+      }
 
       /*
       let top, left;
@@ -62187,7 +63011,10 @@ class ElementTool {
     if (dom.parentsHasClass(elm, 'is-subblock')) {
       subblock = true;
     }
-    if ((customcode || noedit || _protected) && !subblock) ; else {
+    const plugin = elm.closest('[data-cb-type]');
+    if ((customcode || noedit || _protected) && !subblock) ; else if (plugin) {
+      activeElement = plugin;
+    } else {
       const tagName = elm.tagName.toLowerCase();
       // LATER: label, code, figcaption ?
       if (!elm.classList.contains('cell-active') && (tagName === 'h1' || tagName === 'h2' || tagName === 'h3' || tagName === 'h4' || tagName === 'h5' || tagName === 'h6' || tagName === 'p' || tagName === 'div' || tagName === 'pre' || tagName === 'blockquote' || tagName === 'li' || tagName === 'img' || tagName === 'iframe')) {
@@ -62339,7 +63166,8 @@ class ElementTool {
     let elm = this.builder.activeElement;
     if (!elm) return;
     if (elm.closest('.is-dock')) return;
-    if (elm.closest('[data-cb-type]')) return;
+    // if(elm.closest('[data-cb-type]')) return;
+
     let top, left;
     if (!this.builder.iframe) {
       top = elm.getBoundingClientRect().top + window.pageYOffset;
@@ -97180,6 +98008,143 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
   fromViewToActual(html) {
     return this.htmlutil.fromViewToActual(html);
   }
+  openColorPicker(currentColor, callback, btn) {
+    this.colorPicker.open(callback, currentColor, () => {}, btn);
+  }
+  openIconPicker(callback) {
+    let iconModal = this.builderStuff.querySelector('.is-modal.iconselect');
+    if (!iconModal) {
+      // Create modal with search input and event listeners once
+      let html = `
+            <style>
+                .is-modal.iconselect .icon-search-wrapper {
+                    position: sticky;
+                    top: 0;
+                    background: white;
+                    padding: 20px;
+                    border-bottom: 1px solid #ddd;
+                    z-index: 10;
+                }
+                .is-modal.iconselect .icon-search {
+                    width: 100%;
+                    padding: 10px 15px;
+                    font-size: 16px;
+                    border: 1px solid #ccc;
+                    border-radius: 4px;
+                    box-sizing: border-box;
+                }
+                .is-modal.iconselect .icon-search:focus {
+                    outline: none;
+                    border-color: #007bff;
+                }
+                .is-modal.iconselect .icon-list {
+                    display: flex;
+                    gap: 10px;
+                    flex-flow: wrap;
+                    padding: 20px;
+                }
+                .is-modal.iconselect .icon-list > button {
+                    display: flex !important;
+                    width: 80px !important;
+                    height: 80px !important;
+                    flex: none;
+                    font-size: 30px !important;
+                    box-shadow: none !important;
+                    align-items: center;
+                    justify-content: center;
+                }
+                .is-modal.iconselect .icon-list > button.hidden {
+                    display: none !important;
+                }
+                .is-modal.iconselect .no-results {
+                    padding: 40px 20px;
+                    text-align: center;
+                    color: #666;
+                    display: none;
+                }
+                .is-modal.iconselect .no-results.show {
+                    display: block;
+                }
+            </style>
+            <div class="is-modal iconselect" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+                <div class="is-modal-content scroll" style="width: 90vw; max-width: 908px; height: 70vh; min-height: 525px; padding: 0;">
+                    <div style="height: 100%; overflow-y: auto; display: flex; flex-direction: column;">
+                        <div class="icon-search-wrapper">
+                            <input type="text" class="icon-search" placeholder="Search icons... (e.g., alarm, wrench)" />
+                        </div>
+                        <div class="icon-list"></div>
+                        <div class="no-results">No icons found matching your search.</div>
+                    </div>
+                </div>
+            </div>
+            `;
+      this.dom.appendHtml(this.builderStuff, html);
+      iconModal = this.builderStuff.querySelector('.is-modal.iconselect');
+      this.iconModal = iconModal;
+      const iconList = this.builderStuff.querySelector('.icon-list');
+      const searchInput = this.builderStuff.querySelector('.icon-search');
+      const noResults = this.builderStuff.querySelector('.no-results');
+      iconList.innerHTML = this.rte.getIcons2() + this.rte.getIcons();
+      let icons = iconList.querySelectorAll('button');
+
+      // Add click handlers for icons
+      icons.forEach(icon => {
+        icon.addEventListener('click', () => {
+          // Get the current callback from the modal's data
+          const currentCallback = iconModal._currentCallback;
+          if (currentCallback) {
+            currentCallback(icon.innerHTML);
+          }
+          this.util.hideModal(iconModal);
+        });
+      });
+
+      // Add search/filter functionality
+      searchInput.addEventListener('input', e => {
+        const searchTerm = e.target.value.toLowerCase().trim();
+        let visibleCount = 0;
+        icons.forEach(icon => {
+          const iconElement = icon.querySelector('i');
+          if (!iconElement) return;
+
+          // Get class names from the icon
+          const iconClasses = iconElement.className.toLowerCase();
+
+          // Check if search term matches any part of the icon classes
+          if (searchTerm === '' || iconClasses.includes(searchTerm)) {
+            icon.classList.remove('hidden');
+            visibleCount++;
+          } else {
+            icon.classList.add('hidden');
+          }
+        });
+
+        // Show/hide no results message
+        if (visibleCount === 0 && searchTerm !== '') {
+          noResults.classList.add('show');
+        } else {
+          noResults.classList.remove('show');
+        }
+      });
+
+      // Clear search when modal is opened
+      iconModal.addEventListener('modalshow', () => {
+        searchInput.value = '';
+        searchInput.dispatchEvent(new Event('input'));
+      });
+    }
+
+    // Store the current callback and reset search
+    iconModal._currentCallback = callback;
+    const searchInput = iconModal.querySelector('.icon-search');
+    if (searchInput) {
+      searchInput.value = '';
+      searchInput.dispatchEvent(new Event('input'));
+      // Focus search input after a brief delay to ensure modal is visible
+      setTimeout(() => searchInput.focus(), 100);
+    }
+    this.util.showModal(iconModal);
+  }
   colorpicker(onPick, defaultcolor) {
     // return new ColorPicker({
     //     onPick: onPick,