@innovastudio/contentbuilder 1.5.218 → 1.5.219

package/index.d.ts

@@ -587,6 +587,12 @@ declare class ContentBuilder {
 
     generateImage(prompt: string, callback?: () => void): void;
     openFilePicker(type?: string, callback?: () => void): void;
+    /** Is an asset manager configured for this type of file? */
+    hasFilePicker(type?: string): boolean;
+    /** Upload a file from the user's computer; the callback gets its URL. */
+    openFileUpload(type?: string, callback?: (url: string) => void): void;
+    /** Select and upload buttons for a URL field in a plugin's settings, in the editor's own order. Select is included only where an asset manager is configured. */
+    createFileButtons(type?: string, callback?: (url: string) => void): HTMLButtonElement[];
     openColorPicker(
         currentColor: string,
         callback: (color: string) => void,

package/package.json

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

package/public/contentbuilder/contentbuilder.esm.js

@@ -29563,7 +29563,7 @@ class Image$1 {
                         <label class="label-checkbox">
                             <input class="input-newwindow" id="__input_newwindow2" type="checkbox" /> ${util.out('Open new window')}
                         </label>
-                        <label class="label-checkbox" id="lblImageLinkOpenLightbox" style="${this.builder.useLightbox ? '' : 'display:none'}">
+                        <label class="label-checkbox mt-1" id="lblImageLinkOpenLightbox" style="${this.builder.useLightbox ? '' : 'display:none'}">
                             <input class="input-openlightbox" id="__input_openlightbox2" type="checkbox" /> ${util.out('Open in a lightbox (for image, video or Youtube)')}
                         </label>
                         </div>
@@ -46273,7 +46273,16 @@ class ColorPickerKelir {
     }
 
     // Close the picker on scroll — it's positioned once, so scrolling detaches it.
-    const hideOnScroll = () => {
+    //
+    // The page moving under the picker is the only scroll that counts. A text
+    // input scrolls its own content whenever the caret passes the edge — on
+    // paste, on Delete, on Cmd+Left/Right — and that is a scroll event too,
+    // which a capture listener on window receives even though it does not
+    // bubble. Without this guard the picker closed while its own hex field
+    // was being edited.
+    const hideOnScroll = e => {
+      const target = e && e.target;
+      if (target && target.nodeType === 1 && popPicker.contains(target)) return;
       this.builder.util.hidePop(popPicker);
       window.removeEventListener('scroll', hideOnScroll, true);
       if (this.builder.win && this.builder.win !== window) this.builder.win.removeEventListener('scroll', hideOnScroll, true);
@@ -92847,6 +92856,90 @@ class ContentBuilder {
   openFilePicker(type, callback) {
     this.openAssetSelect(type, callback);
   }
+
+  /**
+   * Is an asset manager reachable for this type of file? Mirrors the branches
+   * openAsset() takes: either a picker page (filePicker / imageSelect / ...)
+   * or the host's own onXSelectClick handler.
+   */
+  hasFilePicker(type) {
+    if (type === 'media') return !!(this.onMediaSelectClick || this.onImageSelectClick || this.mediaSelect || this.imageSelect);
+    if (type === 'video') return !!(this.onVideoSelectClick || this.videoSelect);
+    if (type === 'audio') return !!(this.onAudioSelectClick || this.audioSelect);
+    if (type === 'all') return !!(this.onFileSelectClick || this.fileSelect);
+    return !!(this.onImageSelectClick || this.imageSelect);
+  }
+
+  /**
+   * Upload a file from the user's computer and hand its URL to `callback`.
+   *
+   * The per-type upload handler always exists — a builder configured without
+   * one gets the data-URL fallback — so this is available whatever the host
+   * set up. The URL comes back through returnUrl(), the same path the image
+   * tool's upload button uses.
+   */
+  openFileUpload(type, callback) {
+    const accept = type === 'video' ? 'video/*' : type === 'audio' ? 'audio/*' : type === 'media' ? 'image/*,video/*' : type === 'all' ? '*' : 'image/*';
+    const handler = type === 'video' ? this.onVideoUpload : type === 'audio' ? this.onAudioUpload : type === 'media' ? this.onMediaUpload : type === 'all' ? this.onFileUpload : this.onImageUpload;
+    if (!handler) return;
+    const inpFile = document.createElement('input');
+    inpFile.type = 'file';
+    inpFile.accept = accept;
+    inpFile.style.display = 'none';
+    document.body.appendChild(inpFile);
+    inpFile.addEventListener('change', async e => {
+      if (!e.target.files || !e.target.files.length) {
+        inpFile.remove();
+        return;
+      }
+      this.onAssetUpload = url => {
+        if (callback) callback(url);
+      };
+      await handler(e);
+      inpFile.remove();
+    });
+    inpFile.click();
+  }
+
+  /**
+   * The file controls for a URL field in a plugin's settings: select from the
+   * asset manager, and upload from the computer.
+   *
+   * Returns the buttons to append next to the input, in the order and with the
+   * icons the editor's own image dialog uses — select first, upload last, and
+   * select only where an asset manager is configured. A plugin appends what it
+   * gets rather than deciding, so a builder without an asset manager never
+   * shows a button that cannot open one.
+   *
+   *   const [ ...buttons ] = builder.createFileButtons('media', (url) => {...});
+   *   row.append(input, ...buttons);
+   *
+   * `type` may be a function for a field whose kind follows another control
+   * (a Media Type select, say) — it is then read on each click.
+   */
+  createFileButtons(type, callback) {
+    const out = s => this.util.out(s);
+    const fileType = () => typeof type === 'function' ? type() : type;
+    const button = (label, icon, onClick) => {
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'cbx-iconbtn';
+      btn.title = label;
+      btn.setAttribute('aria-label', label);
+      btn.innerHTML = `<svg aria-hidden="true"><use xlink:href="#${icon}"></use></svg>`;
+      btn.addEventListener('click', e => {
+        e.preventDefault();
+        onClick(btn);
+      });
+      return btn;
+    };
+    const buttons = [];
+    if (this.hasFilePicker(fileType())) {
+      buttons.push(button(out('Select'), 'icon-folder', btn => this.openFilePicker(fileType(), callback, btn)));
+    }
+    buttons.push(button(out('Upload'), 'icon-upload', () => this.openFileUpload(fileType(), callback)));
+    return buttons;
+  }
   openAssetSelect(targetAssetType, callback, defaultValue) {
     const inpUrl = document.createElement('input');