@innovastudio/contentbuilder 1.5.148 → 1.5.150

package/index.d.ts

@@ -102,6 +102,8 @@ interface ContentBuilderOptions {
     videoSelect?: string;
     audioSelect?: string;
     mediaSelect?: string;
+    filePicker?: string;
+    filePickerSize?: string;
     selectIcon?: string;
     otherSelect?: string;
     otherSelectCaption?: string;
@@ -218,6 +220,9 @@ interface ContentBuilderOptions {
     commandInfoCanvasMode?: any[]; 
     onStartRequest?: () => void;
 
+    defaultHeaders?: { [key: string]: string };
+    headers?: { [key: string]: string };
+    
     defaultImageGenerationProvider?: string;
     imageModel?: string;
     imageSize?: string; 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.148",
+  "version": "1.5.150",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "types": "index.d.ts",

package/public/contentbuilder/contentbuilder.css

@@ -520,8 +520,8 @@ button:focus-visible {
   top: 0;
   left: 0;
   background: #fff;
-  border: 1px solid #f2f2f2;
-  box-shadow: 4px 17px 20px 0px rgba(0, 0, 0, 0.08);
+  border: 1px solid #dcdcdc;
+  box-shadow: 3px 11px 24px 0px rgba(0, 0, 0, 0.05);
   outline: none;
   border-radius: 7px;
   overflow: hidden;
@@ -2845,7 +2845,8 @@ button:focus-visible {
   flex-direction: row;
   align-items: flex-start;
   border-radius: 6px;
-  box-shadow: 9px 14px 30px 1px rgba(0, 0, 0, 0.12);
+  border: 1px solid #dcdcdc;
+  box-shadow: 3px 11px 24px 0px rgba(0, 0, 0, 0.05);
   background-color: #fff;
 }
 #_cbhtml .is-modal.snippetwindow.left,

package/public/contentbuilder/contentbuilder.esm.js

@@ -4723,6 +4723,7 @@ class Util {
   showRtePop(pop, onShow, btn) {
     const dom = this.dom;
     pop.style.display = 'flex';
+    pop.setAttribute('aria-hidden', 'false');
     if (onShow) onShow();
     dom.removeClass(pop, 'deactive');
     dom.addClass(pop, 'active');
@@ -4787,6 +4788,7 @@ class Util {
     pop.style.display = '';
     dom.removeClass(pop, 'active');
     dom.addClass(pop, 'deactive');
+    pop.setAttribute('aria-hidden', 'true');
   }
   showPopOverlay(pop, cancelCallback, btn) {
     const builderStuff = this.builder.builderStuff;
@@ -5460,12 +5462,27 @@ class Util {
       if (mode === 'cell' || mode === 'cell-right') {
         dom.moveAfter(cellElement, cell);
       }
+      let element;
+      if (cellElement.childNodes && cellElement.childNodes[0]) {
+        element = cellElement.childNodes[0];
+      }
       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
-    }
 
+      // 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();
+      }
+    }
     if (mode === 'row') {
       this.builder.uo.saveForUndo();
       let rowElement, cellElement;
@@ -5503,11 +5520,26 @@ class Util {
       }
       row.parentNode.insertBefore(rowElement, row);
       dom.moveAfter(rowElement, row);
+      let element;
+      if (rowElement.childNodes && rowElement.childNodes[0].childNodes && rowElement.childNodes[0].childNodes) {
+        element = rowElement.childNodes[0].childNodes[0];
+      }
       let builderActive = this.builder.doc.querySelector('.builder-active');
       if (builderActive) this.builder.applyBehaviorOn(builderActive);
-      cellElement.click(); //change active block to the newly created
-    }
 
+      // 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();
+      }
+    }
     if (mode === 'elm') {
       let elm = this.builder.activeElement; // See elementtool.js line 195-196. // document.querySelector('.elm-active');
       if (!elm) return;
@@ -5538,6 +5570,9 @@ class Util {
         let checkLoad = setInterval(() => {
           if (newelement.complete) {
             newelement.click();
+            setTimeout(() => {
+              this.builder.element.image.repositionImageTool();
+            }, 100);
             clearInterval(checkLoad);
           }
         }, 30);
@@ -67707,6 +67742,7 @@ class Rte {
         const top = btn.getBoundingClientRect().top;
         const left = btn.getBoundingClientRect().left;
         pop.style.display = 'flex';
+        pop.setAttribute('aria-hidden', 'false');
         const w = pop.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
         const h = pop.offsetHeight;
         if (!dom.hasClass(pop, 'active')) {
@@ -67741,6 +67777,7 @@ class Rte {
         const top = btn.getBoundingClientRect().top;
         const left = btn.getBoundingClientRect().left;
         pop.style.display = 'flex';
+        pop.setAttribute('aria-hidden', 'false');
         const w = pop.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
         const h = pop.offsetHeight;
         if (!dom.hasClass(pop, 'active')) {
@@ -68577,6 +68614,7 @@ class Rte {
         const top = btn.getBoundingClientRect().top;
         const left = btn.getBoundingClientRect().left;
         pop.style.display = 'flex';
+        pop.setAttribute('aria-hidden', 'false');
         const w = pop.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
         const h = pop.offsetHeight;
         if (!dom.hasClass(pop, 'active')) {
@@ -68903,6 +68941,7 @@ class Rte {
         const top = btn.getBoundingClientRect().top;
         const left = btn.getBoundingClientRect().left;
         pop.style.display = 'flex';
+        pop.setAttribute('aria-hidden', 'false');
         const w = pop.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
         const h = pop.offsetHeight;
         if (!dom.hasClass(pop, 'active')) {
@@ -70420,6 +70459,7 @@ class Rte {
     const top = btnRteIcons.getBoundingClientRect().top;
     const left = btnRteIcons.getBoundingClientRect().left;
     pop.style.display = 'flex';
+    pop.setAttribute('aria-hidden', 'false');
     const w = pop.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
     const h = pop.offsetHeight;
     if (!dom.hasClass(pop, 'active')) {
@@ -70507,6 +70547,7 @@ class Rte {
     });
     const pop = this.rteMoreOptions;
     pop.style.display = 'flex';
+    pop.setAttribute('aria-hidden', 'false');
     const w = pop.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
     const h = pop.offsetHeight;
     if (this.builder.opts.toolbar === 'left') {
@@ -70583,6 +70624,7 @@ class Rte {
     const top = btnElementRteMore.getBoundingClientRect().top;
     const left = btnElementRteMore.getBoundingClientRect().left;
     pop.style.display = 'flex';
+    pop.setAttribute('aria-hidden', 'false');
     const w = pop.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
     const h = pop.offsetHeight;
     if (this.builder.opts.toolbar === 'left') {
@@ -83887,6 +83929,10 @@ class Dictation {
       const inpCommandLang = this.modalConfig.querySelector('.input-command-lang');
       localStorage.setItem('_command_lang', inpCommandLang.value);
       this.builder.speechRecognitionLang = inpCommandLang.value;
+      const inpImageModelSelect = this.modalConfig.querySelector('#inpImageModelSelect');
+      localStorage.setItem('_image_model', inpImageModelSelect.value);
+      const inpImageSizeSelect = this.modalConfig.querySelector('#inpImageSizeSelect');
+      localStorage.setItem('_image_size', inpImageSizeSelect.value);
       this.builder.hideModal(this.modalConfig);
     });
     const btnConfigReset = this.modalConfig.querySelector('.input-reset');
@@ -84167,8 +84213,12 @@ class Dictation {
     let models = this.imageModels;
 
     // Default selections
-    const defaultModelId = this.builder.imageModel || 'fal-ai/flux-1/schnell';
-    const defaultSize = this.builder.imageSize || 'landscape_4_3';
+    let defaultModelId = this.builder.imageModel || 'fal-ai/flux-1/schnell';
+    let defaultSize = this.builder.imageSize || 'landscape_4_3';
+    const storedModel = localStorage.getItem('_image_model');
+    if (storedModel) defaultModelId = storedModel;
+    const storedSize = localStorage.getItem('_image_size');
+    if (storedSize) defaultSize = storedSize;
 
     // Helper: return available sizes for a model
     function getSizesForModel(modelId) {
@@ -84364,6 +84414,7 @@ class Dictation {
       return;
     }
     this.modalCommand.classList.add('active');
+    this.modalCommand.setAttribute('aria-hidden', 'false');
     inpCommand.focus();
     localStorage.setItem('_dictation', '1');
     const chkAutoSend = this.builderStuff.querySelector('#chkAutoSendCommand');
@@ -93010,6 +93061,7 @@ class ContentBuilder {
       mediaSelect: '',
       // NEW: for image & video
 
+      filePickerSize: 'medium',
       // selectIcon: '<svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg>',
       selectIcon: '<svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#icon-folder"></use></svg>',
       // NEW: for any other file select. Will be visible on hyperlink dialog, image dialog (image link), and Column Settings dialog (on Click tab)
@@ -94059,7 +94111,20 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     } else if (this.opts.videoselect !== '') {
       this.opts.videoSelect = this.opts.videoselect;
     }
-    if (this.assetPanelFullScreen) {
+    if (this.opts.filePicker) {
+      this.opts.imageSelect = this.opts.filePicker;
+      this.opts.videoSelect = this.opts.filePicker;
+      this.opts.audioSelect = this.opts.filePicker;
+      this.opts.fileSelect = this.opts.filePicker;
+      this.opts.mediaSelect = this.opts.filePicker;
+      // this.settings.otherSelect = this.settings.filePicker; // this enables additional selector button on link dialog
+
+      // backward compatible
+      this.settings.imageselect = this.settings.filePicker;
+      this.settings.fileselect = this.settings.filePicker;
+      this.settings.videoselect = this.settings.filePicker;
+    }
+    if (this.assetPanelFullScreen || this.filePickerSize === 'fullscreen') {
       this.imageSelectWidth = '100vw';
       this.imageSelectHeight = '100vh';
       this.fileSelectWidth = '100vw';
@@ -94079,6 +94144,26 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       this.mediaSelectMaxWidth = '100vw';
       this.otherSelectMaxWidth = '100vw';
     }
+    if (this.filePickerSize === 'large') {
+      this.imageSelectWidth = '100%';
+      this.imageSelectHeight = '90vh';
+      this.fileSelectWidth = '100%';
+      this.fileSelectHeight = '90vh';
+      this.videoSelectWidth = '100%';
+      this.videoSelectHeight = '90vh';
+      this.audioSelectWidth = '100%';
+      this.audioSelectHeight = '90vh';
+      this.mediaSelectWidth = '100%';
+      this.mediaSelectHeight = '90vh';
+      this.otherSelectWidth = '100%';
+      this.otherSelectHeight = '90vh';
+      this.imageSelectMaxWidth = '92vw';
+      this.fileSelectMaxWidth = '92vw';
+      this.videoSelectMaxWidth = '92vw';
+      this.audioSelectMaxWidth = '92vw';
+      this.mediaSelectMaxWidth = '92vw';
+      this.otherSelectMaxWidth = '92vw';
+    }
 
     // if(this.opts.largerImageHandler!=='') {
     //     this.opts.mediaHandler = this.opts.largerImageHandler;