@innovastudio/contentbox 1.6.135 → 1.6.137

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;
@@ -378,6 +380,9 @@ declare class ContentBox {
     constructor(options: ContentBoxOptions);
 
     boxImage(url: string, err?: string): void;
+    selectAsset(url: string): void;
+    hideModal(modal?: HTMLElement): void;
+    closeAsset(): void;
     returnUrl(s: string): void;
     htmlCheck(): void;
     loadHtml(html: string): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.135",
+  "version": "1.6.137",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "types": "index.d.ts",
@@ -59,7 +59,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.125",
+    "@innovastudio/contentbuilder": "^1.5.130",
     "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}
@@ -109717,6 +109730,152 @@ class Dictation {
     };
     this.opts = Object.assign(this, defaults, opts);
     this.builder = builder;
+    this.imageModels = [{
+      id: 'fal-ai/nano-banana',
+      // ok
+      label: 'Nano Banana',
+      sizes: [],
+      // no size options
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/imagen4/preview/fast',
+      // ok
+      label: 'Imagen 4 Preview Fast',
+      sizes: ['1:1', '4:3', '16:9', '3:4', '9:16']
+    }, {
+      id: 'fal-ai/imagen4/preview',
+      // ok
+      label: 'Imagen 4 Preview',
+      sizes: ['1:1', '4:3', '16:9', '3:4', '9:16']
+    }, {
+      id: 'fal-ai/imagen4/preview/ultra',
+      // ok
+      label: 'Imagen 4 Preview Ultra',
+      sizes: ['1:1', '4:3', '16:9', '3:4', '9:16']
+    }, {
+      id: 'fal-ai/hidream-i1-fast',
+      // ok
+      label: 'HiDream-I1 Fast',
+      // sizes: => uses defaultSizes
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/hidream-i1-dev',
+      // ok
+      label: 'HiDream-I1 Dev',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/hidream-i1-full',
+      // ok
+      label: 'HiDream-I1 Full',
+      output_format: 'jpeg'
+    }, {
+      id: 'bria/text-to-image/3.2',
+      // ok
+      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',
+      // ok
+      label: 'Recraft V3'
+    }, {
+      id: 'fal-ai/flux-1/schnell',
+      // ok
+      label: 'FLUX.1 Schnell',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/flux/krea',
+      // ok
+      label: 'FLUX.1 Krea',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/flux-krea-lora',
+      // ok
+      label: 'FLUX.1 Krea Lora',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/flux-kontext-lora/text-to-image',
+      // ok
+      label: 'FLUX Kontext Lora',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/flux-pro/kontext/text-to-image',
+      // ok 
+      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',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/flux-pro/kontext/max/text-to-image',
+      // ok
+      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',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/flux-pro/v1.1-ultra',
+      // ok
+      label: 'FLUX 1.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',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/bytedance/seedream/v4/text-to-image',
+      // ok
+      label: 'ByteDance Seedream 4.0'
+    }, {
+      id: 'fal-ai/wan/v2.2-5b/text-to-image',
+      // ok
+      label: 'Wan 2.2 5B',
+      output_format: 'jpeg',
+      output_param: 'image_format'
+    }, {
+      id: 'fal-ai/wan/v2.2-a14b/text-to-image',
+      // ok
+      label: 'Wan 2.2 14B'
+    }, {
+      id: 'fal-ai/qwen-image',
+      // ok
+      label: 'Qwen Image',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/ideogram/v3',
+      // ok
+      label: 'Ideogram V3'
+    }, {
+      id: 'fal-ai/minimax/image-01',
+      // ok
+      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'
+    }, {
+      id: 'fal-ai/playground-v25',
+      // ok
+      label: 'Playground v25',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/sana',
+      // ok
+      label: 'Sana Base',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/sana/sprint',
+      // ok
+      label: 'Sana Sprint',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/sana/v1.5/4.8b',
+      // ok
+      label: 'Sana v1.5 4.8B',
+      output_format: 'jpeg'
+    }, {
+      id: 'fal-ai/sana/v1.5/1.6b',
+      // ok
+      label: 'Sana v1.5 1.6B',
+      output_format: 'jpeg'
+    }];
+    if (this.builder.imageGenerationModels) {
+      this.imageModels = this.builder.imageGenerationModels;
+    }
   } // constructor
 
   renderPanel() {
@@ -110046,6 +110205,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 +110406,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 +110544,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 +110616,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 +119322,7 @@ class ContentBuilder {
     let defaults = {
       page: '',
       container: '.is-container',
+      siteToken: '',
       row: '',
       cols: [],
       colequal: [],
@@ -120450,6 +120732,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;
@@ -121216,7 +121499,9 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
 
         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)');
@@ -121360,6 +121645,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     window.selectImage = this.selectImage.bind(this);
     window.selectVideo = this.selectVideo.bind(this);
     window.selectAsset = this.selectAsset.bind(this);
+    window.closeAsset = this.closeAsset.bind(this);
     window.assetType = this.assetType.bind(this);
     window.hideModal = this.hideModal.bind(this);
     window.generateImage = this.generateImage.bind(this);
@@ -123865,6 +124151,20 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     this.util._hideModal(modal); // this _hideModal will also trigger cancelCallback defined by showModal. This is done by programmatically click the overlay.
   }
 
+  closeAsset() {
+    let modal = document.querySelector('.is-modal.videoselect.active');
+    if (modal) this.hideModal(modal);
+    modal = document.querySelector('.is-modal.imageselect.active');
+    if (modal) this.hideModal(modal);
+    modal = document.querySelector('.is-modal.fileselect.active');
+    if (modal) this.hideModal(modal);
+    modal = document.querySelector('.is-modal.audioselect.active');
+    if (modal) this.hideModal(modal);
+    modal = document.querySelector('.is-modal.mediaselect.active');
+    if (modal) this.hideModal(modal);
+    modal = document.querySelector('.is-modal.otherselect.active');
+    if (modal) this.hideModal(modal);
+  }
   draggable(selector) {
     new Draggable$2({
       selector: selector
@@ -124476,7 +124776,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;
@@ -124527,16 +124828,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,
@@ -124555,14 +124896,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
@@ -160759,6 +161101,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,
@@ -164124,6 +164468,14 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     this.editor.hideModal(modal);
   }
 
+  selectAsset(url) {
+    this.editor.selectAsset(url);
+  }
+
+  closeAsset() {
+    this.editor.closeAsset();
+  }
+
   refreshModule() {
     this.box.refreshModule();
   }