@innovastudio/contentbuilder 1.5.125 → 1.5.127

package/index.d.ts

@@ -304,10 +304,12 @@ declare class ContentBuilder {
     openAIAssistant(): void;
     closeAIAssistant(): void;
     saveForUndo(): void;
-    selectAsset(s: string, f?: boolean)
-    addBlock(html: string, blockContainer?: HTMLElement)
-    addPage(box?: HTMLElement)
-    setPageSize(s?: string)
+    selectAsset(s: string, f?: boolean): void;
+    hideModal(modal?: HTMLElement): void;
+    closeAsset(): void;
+    addBlock(html: string, blockContainer?: HTMLElement): void;
+    addPage(box?: HTMLElement): void;
+    setPageSize(s?: string): void;
     openPageOptions(): void;
     print(): void;
 

package/package.json

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

package/public/contentbuilder/contentbuilder.css

@@ -5489,12 +5489,12 @@ button:focus-visible {
   align-items: center;
 }
 .is-tool.is-row-tool svg {
-  fill: #fff !important;
-  color: #fff !important;
+  fill: #fff;
+  color: #fff;
 }
 .is-tool.is-row-tool svg * {
-  fill: #fff !important;
-  color: #fff !important;
+  fill: #fff;
+  color: #fff;
 }
 .is-tool.is-row-tool .row-handle {
   display: flex;
@@ -5559,14 +5559,14 @@ button:focus-visible {
   background: rgba(255, 85, 4, 0.9);
 }
 .is-tool.is-col-tool svg {
-  fill: #fff !important;
+  fill: #fff;
   /* $ui-columntool-colored-button-svg-fill */
-  color: #fff !important;
+  color: #fff;
 }
 .is-tool.is-col-tool svg * {
-  fill: #fff !important;
+  fill: #fff;
   /* $ui-columntool-colored-button-svg-fill */
-  color: #fff !important;
+  color: #fff;
 }
 .is-tool.is-col-tool .cell-more svg {
   width: 14px;
@@ -5655,6 +5655,11 @@ button:focus-visible {
 }
 .is-builder[gray] .is-tool.is-row-tool svg {
   fill: #000;
+  color: #000;
+}
+.is-builder[gray] .is-tool.is-row-tool svg * {
+  fill: #000;
+  color: #000;
 }
 .is-builder[gray] .is-tool.is-row-tool .row-handle {
   display: flex;
@@ -5715,8 +5720,13 @@ button:focus-visible {
 .is-builder[gray] .is-tool.is-col-tool svg {
   width: 18px;
   height: 18px;
-  fill: #000 !important;
+  fill: #000;
   /* $ui-columntool-grayed-button-svg-fill */
+  color: #000;
+}
+.is-builder[gray] .is-tool.is-col-tool svg * {
+  fill: #000;
+  color: #000;
 }
 .is-builder[gray] .is-tool.is-col-tool .cell-more svg {
   width: 12px;
@@ -5823,7 +5833,7 @@ button:focus-visible {
 }
 .is-builder[clean] .is-tool.is-row-tool .row-grideditor {
   display: block;
-  background: transparent;
+  background: rgba(216, 200, 6, 0.9);
 }
 .is-builder[clean] .is-tool.is-row-tool .row-grideditor svg {
   fill: #000 !important;
@@ -5849,6 +5859,9 @@ button:focus-visible {
 .is-builder[clean] .row-active:not([data-protected]) {
   outline: 1px solid rgba(132, 132, 132, 0.2);
 }
+.is-builder[clean][gray] .is-tool.is-row-tool .row-grideditor {
+  background: transparent;
+}
 .is-builder[leftrowtool] .is-tool.is-row-tool {
   right: auto;
   left: -40px;

package/public/contentbuilder/contentbuilder.esm.js

@@ -45576,6 +45576,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) {
@@ -46719,6 +46724,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
@@ -46891,6 +46898,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') {
@@ -52075,19 +52088,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>
             `;
@@ -61789,7 +61802,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}
@@ -83720,7 +83733,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) {
@@ -83858,7 +83871,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 => {
@@ -94849,6 +94862,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);
@@ -97354,6 +97368,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
@@ -97965,7 +97993,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;
@@ -98044,7 +98073,8 @@ 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;