@innovastudio/contentbox 1.6.136 → 1.6.138

package/index.d.ts

@@ -300,8 +300,10 @@ interface ContentBoxOptions {
     commandInfoCanvasMode?: any[]; 
     onStartRequest?: () => void;
 
-    imageModel?: string;
     defaultImageGenerationProvider?: string;
+    imageModel?: string;
+    imageSize?: string; 
+    imageGenerationModels?: any[]; 
 
     //-- Asset Manager
     listFilesUrl?: string;

package/package.json

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

package/public/contentbox/contentbox.esm.js

@@ -72087,6 +72087,11 @@ class DragDropImageUploader {
   }
   _onDragOver(e) {
     e.preventDefault();
+
+    // Only allow highlighting when dragging files (not snippets, etc.)
+    if (!e.dataTransfer.types.includes('Files')) {
+      return;
+    }
     const img = this._getImageUnderCursor(e);
     if (img) {
       if (this.targetImage && this.targetImage !== img) {
@@ -73230,6 +73235,8 @@ class Image$1 {
     const util = this.builder.util;
     let isModule = dom.parentsHasAttribute(elm, 'data-html');
     if (isModule) {
+      // Now this block is not used anymore, since direct image embed/change is disabled for modules (e.g. slider). See click(e) line 1577
+
       if (this.imageTool) this.imageTool.style.display = '';
 
       // Extra: make image[data-image-embed] clickable/editable
@@ -73402,6 +73409,12 @@ class Image$1 {
     const util = this.builder.util;
     const dom = this.builder.dom;
     let elm = e.target;
+    if (elm.closest('[data-html]')) {
+      // Do not show imageTool if the image is inside a code block
+      this.builder.activeImage = null;
+      this.hideImageTool();
+      return;
+    }
 
     //Image
     if (elm.tagName.toLowerCase() === 'img') {
@@ -78586,19 +78599,19 @@ class RowTool {
     if (!rowtool) {
       let html = `<div class="is-tool is-row-tool" style="${!this.builder.rowTool && this.builder.rowTool !== '' ? 'display:none;' : ''}">
                 <div title="${util.out('Move')}" role="button" tabindex="-1" class="row-handle" style="${this.builder.rowHandle ? '' : 'display:none;'}width:100%;cursor:move;text-align:center;"><svg class="is-icon-flex"><use xlink:href="#ion-move"></use></svg></div>
-                <button type="button" tabindex="-1" title="${util.out('More')}" class="row-more"><svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-dots2"></use></svg></button>
+                <button type="button" tabindex="-1" title="${util.out('More')}" class="row-more"><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#icon-dots2"></use></svg></button>
                 <button type="button" tabindex="-1" title="${util.out('Grid Editor')}" class="row-grideditor"><svg class="is-icon-flex"><use xlink:href="#ion-grid"></use></svg></button>
-                <button type="button" tabindex="-1" title="${util.out('Delete')}" class="row-remove"><svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-trash2"></use></svg></button>
+                <button type="button" tabindex="-1" title="${util.out('Delete')}" class="row-remove"><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#icon-trash2"></use></svg></button>
             </div>
             <div class="is-tool is-col-tool">
                 <button type="button" tabindex="-1" title="${util.out('Add')}" class="cell-add">
-                    <svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-plus"></use></svg>
+                    <svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#icon-plus"></use></svg>
                 </button>
                 <button type="button" tabindex="-1" title="${util.out('More')}" class="cell-more">
-                    <svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-dots2"></use></svg>
+                    <svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#icon-dots2"></use></svg>
                 </button>
                 <button type="button" tabindex="-1" title="${util.out('Delete')}" class="cell-remove">
-                    <svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-trash2"></use></svg>
+                    <svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#icon-trash2"></use></svg>
                 </button>
             </div>
             `;
@@ -88300,7 +88313,7 @@ class Preferences {
                                 </select>
                             </label>  
 
-                            ${this.builder.themes ? `
+                            ${this.builder.themes && this.builder.themes.length > 0 ? `
                                 <label style="${this.builder.isTouchSupport ? 'display:none;' : 'display:block;'}margin-top:10px;margin-bottom:5px;">
                                     ${util.out('Theme')}:&nbsp;
                                     ${htmlThemes}
@@ -97362,14 +97375,14 @@ class Rte {
     if (btnLink) btnLink.style.display = '';
     if (btnSymbol) btnSymbol.style.display = '';
     if (!customcode && !noedit && !_protected || subblock) {
-      if ((elm.tagName.toLowerCase() === 'img' || dom.hasClass(elm, 'is-social') || dom.hasClass(elm, 'is-rounded-button-medium') || dom.hasClass(elm, 'cell-active')) && !dom.getSelected()) {
+      if ((dom.hasClass(elm, 'is-social') || dom.hasClass(elm, 'is-rounded-button-medium') || dom.hasClass(elm, 'cell-active')) && !dom.getSelected()) {
         if (this.elementRteTool.style.display === 'none' || this.elementRteTool.style.display === '') {
           this.elementRteTool.style.display = 'flex';
           this.rteTool.style.display = 'none';
           this.showAlignButtons();
           this.positionToolbar();
         }
-      } else if (dom.hasClass(elm, 'spacer') || elm.tagName.toLowerCase() === 'video' || dom.hasClass(elm, 'ovl') || col.getAttribute('data-html') && !subblock) {
+      } else if (elm.tagName.toLowerCase() === 'img' || dom.hasClass(elm, 'spacer') || elm.tagName.toLowerCase() === 'video' || dom.hasClass(elm, 'ovl') || col.getAttribute('data-html') && !subblock) {
         //|| col===elm
 
         if (this.elementRteTool.style.display === 'none' || this.elementRteTool.style.display === '') {
@@ -109717,6 +109730,147 @@ class Dictation {
     };
     this.opts = Object.assign(this, defaults, opts);
     this.builder = builder;
+    this.imageModels = [{
+      id: 'fal-ai/nano-banana',
+      label: 'Nano Banana',
+      sizes: [],
+      // no size options
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/imagen4/preview/fast',
+      label: 'Imagen 4 Preview Fast',
+      sizes: ['1:1', '4:3', '16:9', '3:4', '9:16']
+    }, {
+      id: 'fal-ai/imagen4/preview',
+      label: 'Imagen 4 Preview',
+      sizes: ['1:1', '4:3', '16:9', '3:4', '9:16']
+    }, {
+      id: 'fal-ai/imagen4/preview/ultra',
+      label: 'Imagen 4 Preview Ultra',
+      sizes: ['1:1', '4:3', '16:9', '3:4', '9:16']
+    }, {
+      id: 'fal-ai/flux-1/schnell',
+      label: 'FLUX.1 Schnell',
+      // sizes: => uses defaultSizes
+      output_format: 'jpeg'
+    },
+    // Krea
+    {
+      id: 'fal-ai/flux/krea',
+      label: 'FLUX.1 Krea',
+      output_format: 'jpeg'
+    },
+    // {
+    //     id: 'fal-ai/flux-krea-lora',
+    //     label: 'FLUX.1 Krea Lora',
+    //     output_format: 'jpeg'
+    // },
+    // Kontext
+    {
+      id: 'fal-ai/flux-kontext-lora/text-to-image',
+      label: 'FLUX.1 Kontext Lora',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/flux-pro/kontext/text-to-image',
+      label: 'FLUX.1 Kontext Pro',
+      sizes: ['21:9', '16:9', '4:3', '3:2', '1:1', '2:3', '3:4', '9:16', '9:21'],
+      size_param: 'aspect_ratio',
+      // aspect_ratio
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/flux-pro/kontext/max/text-to-image',
+      label: 'FLUX.1 Kontext Max',
+      sizes: ['21:9', '16:9', '4:3', '3:2', '1:1', '2:3', '3:4', '9:16', '9:21'],
+      size_param: 'aspect_ratio',
+      // aspect_ratio
+      output_format: 'jpeg'
+    },
+    // Pro
+    {
+      id: 'fal-ai/flux-pro/new',
+      label: 'FLUX.1 Pro',
+      // new, fast
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/flux-pro/v1.1',
+      label: 'FLUX1.1 Pro',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/flux-pro/v1.1-ultra',
+      label: 'FLUX1.1 Pro Ultra',
+      sizes: ['21:9', '16:9', '4:3', '3:2', '1:1', '2:3', '3:4', '9:16', '9:21'],
+      size_param: 'aspect_ratio',
+      // aspect_ratio
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/bytedance/seedream/v4/text-to-image',
+      label: 'ByteDance Seedream 4.0'
+    }, {
+      id: 'fal-ai/wan/v2.2-5b/text-to-image',
+      label: 'Wan 2.2 5B',
+      output_format: 'jpeg',
+      output_param: 'image_format'
+    }, {
+      id: 'fal-ai/wan/v2.2-a14b/text-to-image',
+      label: 'Wan 2.2 14B'
+    }, {
+      id: 'fal-ai/qwen-image',
+      label: 'Qwen Image',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/hidream-i1-fast',
+      label: 'HiDream-I1 Fast',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/hidream-i1-dev',
+      label: 'HiDream-I1 Dev',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/hidream-i1-full',
+      label: 'HiDream-I1 Full',
+      output_format: 'jpeg'
+    }, {
+      id: 'bria/text-to-image/3.2',
+      // new
+      label: 'Bria (3.2)',
+      sizes: ['1:1', '3:2', '4:3', '5:4', '16:9', '2:3', '3:4', '4:5', '9:16']
+    }, {
+      id: 'fal-ai/recraft/v3/text-to-image',
+      label: 'Recraft V3'
+    }, {
+      id: 'fal-ai/ideogram/v3',
+      label: 'Ideogram V3'
+    }, {
+      id: 'fal-ai/minimax/image-01',
+      // new
+      label: 'MiniMax Image-01',
+      sizes: ['21:9', '16:9', '4:3', '3:2', '1:1', '2:3', '3:4', '9:16'],
+      size_param: 'aspect_ratio' // aspect_ratio
+    }, {
+      id: 'fal-ai/playground-v25',
+      // new
+      label: 'Playground v25',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/sana',
+      label: 'Sana Base',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/sana/sprint',
+      label: 'Sana Sprint',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/sana/v1.5/4.8b',
+      label: 'Sana v1.5 4.8B',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/sana/v1.5/1.6b',
+      label: 'Sana v1.5 1.6B',
+      output_format: 'jpeg'
+    }];
+    if (this.builder.imageGenerationModels) {
+      this.imageModels = this.builder.imageGenerationModels;
+    }
   } // constructor
 
   renderPanel() {
@@ -110046,6 +110200,22 @@ class Dictation {
                     </div>
                 </label>
 
+                <div class="div-image-generation-options" style="display:none">
+                    <div style="font-weight:500;margin:18px 0 0 0;">${util.out('Image Generation')}</div>
+
+                    <label class="label-input-image-model" for="input_image_model" style="margin: 7px 0 0 0;display: flex;flex-direction: column;letter-spacing: 0;">
+                        <div style="width:100%"><span>${util.out('Model')}</span>:</div>
+                        <select id="inpImageModelSelect" style="margin-top: 3px"></select>
+                    </label>
+
+                    <label class="label-input-image-size div-size-container" for="input_image_size" style="margin: 7px 0 0 0;display: flex;flex-direction: column;letter-spacing: 0;">
+                        <div style="width:100%"><span>${util.out('Image Size')}</span>:</div>
+                        <select id="inpImageSizeSelect" style="margin-top: 3px"></select>
+                    </label>
+
+                    <input id="inpImageOutputFormat" type="hidden" />
+                </div>
+
                 <div style="text-align:right;margin-top:25px;">
                     <button title="${util.out('Ok')}" class="input-ok classic-primary" style="width:100%;">${util.out('Ok')}</button>
                 </div>
@@ -110231,7 +110401,7 @@ class Dictation {
         }
       }
       let bImageGeneration = false;
-      if (this.builder.textToImageUrl) {
+      if (this.builder.textToImageUrl || this.builder.generateMediaUrl_Fal) {
         bImageGeneration = true;
       }
       for (const key in commandInfo) {
@@ -110369,7 +110539,7 @@ class Dictation {
     const btnScopeOthers = this.modalCommand.querySelector('.scope-others');
     const btnScopeImage = this.modalCommand.querySelector('.scope-image');
     btnScopeBlock.disabled = true;
-    if (this.builder.textToImageUrl && !this.builder.hideImageGeneration) btnScopeImage.style.display = ''; // show generate image button
+    if ((this.builder.textToImageUrl || this.builder.generateMediaUrl_Fal) && !this.builder.hideImageGeneration) btnScopeImage.style.display = ''; // show generate image button
 
     const assistModeBtns = modalCommand.querySelectorAll('.div-assistant-mode button');
     assistModeBtns.forEach(btn => {
@@ -110441,8 +110611,114 @@ class Dictation {
       }
     };
     this.initialStart = false; // for Safari
+
+    this.renderImageOptions();
   }
+  renderImageOptions() {
+    const modal = this.modalConfig;
+    const util = this.builder.util;
+    const divImageSettings = modal.querySelector('.div-image-generation-options');
+    if (this.builder.generateMediaUrl_Fal) {
+      divImageSettings.style.display = '';
+    }
+    const sizeDefs = {
+      square_hd: util.out('Square HD'),
+      square: util.out('Square'),
+      landscape_4_3: util.out('Landscape 4x3'),
+      landscape_16_9: util.out('Landscape 16x9'),
+      portrait_4_3: util.out('Portrait 3x4'),
+      portrait_16_9: util.out('Portrait 9x16'),
+      '1:1': util.out('Square'),
+      '3:2': util.out('Landscape 3x2'),
+      '4:3': util.out('Landscape 4x3'),
+      '5:4': util.out('Landscape 5x4'),
+      '16:9': util.out('Landscape 16x9'),
+      '2:3': util.out('Portrait 2x3'),
+      '3:4': util.out('Portrait 3x4'),
+      '4:5': util.out('Portrait 4x5'),
+      '9:16': util.out('Portrait 9x16'),
+      '21:9': util.out('Landscape 21:9'),
+      '9:21': util.out('Landscape 9:21')
+    };
 
+    // Default set
+    const defaultSizes = ['square', 'square_hd', 'landscape_4_3', 'landscape_16_9', 'portrait_4_3', 'portrait_16_9'];
+
+    // Models
+    let models = this.imageModels;
+
+    // Default selections
+    const defaultModelId = this.builder.imageModel || 'fal-ai/flux-1/schnell';
+    const defaultSize = this.builder.imageSize || 'landscape_4_3';
+
+    // Helper: return available sizes for a model
+    function getSizesForModel(modelId) {
+      const model = models.find(m => m.id === modelId);
+      if (!model) return defaultSizes;
+
+      // if sizes explicitly empty array → means no size options
+      if (Array.isArray(model.sizes) && model.sizes.length === 0) {
+        return null;
+      }
+      return model.sizes || defaultSizes;
+    }
+
+    // Elements
+    const modelSelect = modal.querySelector('#inpImageModelSelect');
+    const sizeSelect = modal.querySelector('#inpImageSizeSelect');
+    const sizeContainer = sizeSelect.closest('.div-size-container') || sizeSelect; // wrap div if you have one
+    const outputFormatField = modal.querySelector('#inpImageOutputFormat'); // hidden input
+
+    // Populate model select
+    models.forEach(m => {
+      const option = document.createElement('option');
+      option.value = m.id;
+      option.textContent = m.label;
+      modelSelect.appendChild(option);
+    });
+
+    // Populate sizes when model changes
+    const renderSizes = (modelId, keepSelected = true) => {
+      const model = models.find(m => m.id === modelId);
+      const prevValue = sizeSelect.value;
+      sizeSelect.innerHTML = ''; // clear
+
+      const sizes = getSizesForModel(modelId);
+      // Handle size visibility
+      if (!sizes) {
+        sizeContainer.style.display = 'none';
+      } else {
+        sizeContainer.style.display = 'flex';
+        sizes.forEach(s => {
+          const option = document.createElement('option');
+          option.value = s;
+          option.textContent = sizeDefs[s] || s;
+          sizeSelect.appendChild(option);
+        });
+
+        // Try to restore previous size selection
+        if (keepSelected && sizes.includes(prevValue)) {
+          sizeSelect.value = prevValue;
+        } else if (sizes.includes(defaultSize)) {
+          sizeSelect.value = defaultSize;
+        } else {
+          sizeSelect.value = sizes[0];
+        }
+      }
+
+      // Handle output_format if present
+      if (outputFormatField && model) {
+        outputFormatField.value = model.output_format || '';
+      }
+    };
+    modelSelect.addEventListener('change', e => {
+      renderSizes(e.target.value);
+    });
+
+    // Trigger initial render with defaults
+    modelSelect.value = defaultModelId;
+    renderSizes(defaultModelId, false);
+  }
   resetConfig() {
     const tempSlider = this.modalConfig.querySelector('.temperature-slider');
     const valTemp = this.modalConfig.querySelector('.val-temp');
@@ -119041,6 +119317,7 @@ class ContentBuilder {
     let defaults = {
       page: '',
       container: '.is-container',
+      siteToken: '',
       row: '',
       cols: [],
       colequal: [],
@@ -120450,6 +120727,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     const builders = this.doc.querySelectorAll(this.opts.container);
     Array.prototype.forEach.call(builders, builder => {
       builder.classList.add('is-container');
+      if (this.siteToken) builder.setAttribute('data-site-token', this.siteToken);
 
       // Check if preview
       if (this.dom.hasClass(builder, 'preview')) this.preview = true;
@@ -121210,13 +121488,28 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
           }
       }
       */
-
+      const clickedElementEditable = target.closest('[contenteditable]');
+      let insideEditable = this.doc.activeElement && this.doc.activeElement.closest('[contenteditable]') && this.doc.activeElement.closest('.is-builder');
+      if (insideEditable && !clickedElementEditable) {
+        this.saveSelection();
+        const selection = this.dom.getSelection();
+        if (selection && !selection.isCollapsed) {
+          // Only if there is text selected (not caret selection)
+          const col = this.doc.activeElement.closest('[contenteditable]');
+          if (col) {
+            // this.handleCellClick(col, e);
+            this.activateColumnAndRte(col);
+          }
+        }
+      }
       if (!(a || p || b || c || d || f || g || h || i || j || o || isSpecialElement || clrPicker) || rowClicked && !i || containerClicked) {
         // Click anywhere but is not inside builder area, modal, popup, tool or rte, then clear row/column (cell) selection
 
         if (!this.dom.getSelected()) {
           let inputFocused = document.activeElement.tagName.toLowerCase() === 'input';
-          let insideEditable = this.doc.activeElement && this.doc.activeElement.closest('[contenteditable]');
+
+          // let insideEditable = this.doc.activeElement && this.doc.activeElement.closest('[contenteditable]');
+          let insideEditable = target.closest('[contenteditable]');
 
           // if(!document.querySelector('.is-modal.active')) { // Additional (to prevent lost focus)
           let openedModal = document.querySelector('.is-modal.active:not(.is-modal-content)');
@@ -124491,7 +124784,8 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
   async waitingResultFal(jsonBody, requestId) {
     jsonBody.request_id = requestId;
     const getResultEndpoint = (model, requestId) => {
-      let endpoint = `https://queue.fal.run/${model}/requests/${requestId}`;
+      let endpoint = 'https://queue.fal.run/{MODEL}/requests/{REQUEST_ID}';
+      endpoint = endpoint.replace('{REQUEST_ID}', requestId);
       let firstTwoParts = model.split('/').slice(0, 2).join('/');
       endpoint = endpoint.replace('{MODEL}', firstTwoParts);
       return endpoint;
@@ -124542,16 +124836,56 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
   }
 
   async generateImage_Fal(prompt, callback) {
+    const modal = this.dictation.modalConfig;
+
+    // Construct inputs: model, prompt, size, output format
+    const inpImageModelSelect = modal.querySelector('#inpImageModelSelect');
+    const inpImageSizeSelect = modal.querySelector('#inpImageSizeSelect');
+    const outputFormatField = modal.querySelector('#inpImageOutputFormat');
+    const modelId = inpImageModelSelect.value;
+    const modelDef = this.dictation.imageModels.find(m => m.id === modelId) || {};
+
+    // Build options dynamically
+    let options = {};
+
+    // Handle size/aspect_ratio if model has sizes
+    if (modelDef && modelDef.sizes !== undefined) {
+      if (modelDef.sizes !== null && modelDef.sizes.length !== 0) {
+        const sizeParam = modelDef.size_param || 'image_size'; // default
+        const imageSize = inpImageSizeSelect.value;
+        options[sizeParam] = imageSize;
+      }
+      // if sizes = [] => no size options => exclude size.
+    } else {
+      // if sizes not defined, use default set
+      const imageSize = inpImageSizeSelect.value;
+      options['image_size'] = imageSize;
+    }
+
+    // Handle output_format if present
+    const outputFormat = outputFormatField.value;
+    if (outputFormat) {
+      const outputParam = modelDef.output_param || 'output_format'; // default
+      options[outputParam] = outputFormat;
+    }
+    // if output_format not defined, exclude output_format.
+
     this.controller = new AbortController();
     this.signal = this.controller.signal;
-    let model = this.imageModel || 'flux-schnell';
-    let jsonBody = {};
-    jsonBody.model = model;
-    jsonBody.customData = this.customData;
-    jsonBody.endpoint = `https://queue.fal.run/${model}`;
-    jsonBody.payload = {
-      prompt
+    let jsonBody = {
+      model: modelId,
+      customData: this.customData,
+      endpoint: `https://queue.fal.run/${modelId}`,
+      payload: {
+        prompt,
+        ...options
+      }
     };
+
+    // console.log(jsonBody);
+    // this.dictation.finish();
+    // return;
+
     let url = this.generateMediaUrl_Fal;
     let headers = {
       ...this.headers,
@@ -124570,14 +124904,15 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     }
     let requestId = result.request_id;
     const getStatusEndpoint = (model, requestId) => {
-      let endpoint = `https://queue.fal.run/${model}/requests/${requestId}`;
+      let endpoint = 'https://queue.fal.run/{MODEL}/requests/{REQUEST_ID}/status';
+      endpoint = endpoint.replace('{REQUEST_ID}', requestId);
       let firstTwoParts = model.split('/').slice(0, 2).join('/');
       endpoint = endpoint.replace('{MODEL}', firstTwoParts);
       return endpoint;
     };
-    const statusEndpoint = getStatusEndpoint(model, requestId);
+    const statusEndpoint = getStatusEndpoint(modelId, requestId);
     let inputCheckStatus = {
-      model,
+      model: modelId,
       endpoint: statusEndpoint,
       request_id: requestId
       // customData: this.customData
@@ -124865,6 +125200,32 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       }
     }
   }
+  activateColumnAndRte(col) {
+    const util = this.util;
+    util.clearActiveCell();
+    this.activeCol = col;
+    col.classList.add('cell-active');
+    let row = col.parentNode;
+    row.classList.add('row-active');
+    const builders = this.doc.querySelectorAll(this.opts.container);
+    builders.forEach(builder => {
+      builder.classList.remove('builder-active');
+    });
+    row.parentNode.classList.add('builder-active');
+    this.doc.body.classList.add('content-edit');
+    if (row.childElementCount - 2 === 1) ; else {
+      row.classList.add('row-outline');
+    }
+
+    // Call onContentClick to indicate click on editable content (eg. for plugin usage)
+    // if(this.opts.onContentClick) this.opts.onContentClick(e);
+
+    this.colTool.click(col);
+    // this.elmTool.click(col, e);
+    this.activeElement = col;
+    this.inspectedElement = col;
+    if (!this.controlPanel) this.rte.click(col);
+  }
   handleCellClick(col, e) {
     if (this.cleanEditing) {
       col.parentNode.querySelector('.is-row-tool').style.display = '';
@@ -160774,6 +161135,8 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       imageScheduler: this.settings.imageScheduler,
       imageAutoUpscale: this.settings.imageAutoUpscale,
       defaultImageGenerationProvider: this.settings.defaultImageGenerationProvider,
+      imageSize: this.settings.imageSize,
+      imageGenerationModels: this.settings.imageGenerationModels,
       generateMediaUrl_Fal: this.settings.generateMediaUrl_Fal,
       checkRequestStatusUrl_Fal: this.settings.checkRequestStatusUrl_Fal,
       getResultUrl_Fal: this.settings.getResultUrl_Fal,