@innovastudio/contentbuilder 1.5.218 → 1.5.220

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.220",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "types": "index.d.ts",

package/public/contentbuilder/contentbuilder.esm.js

@@ -29561,10 +29561,10 @@ class Image$1 {
 
                         <div class="cb-field">
                         <label class="label-checkbox">
-                            <input class="input-newwindow" id="__input_newwindow2" type="checkbox" /> ${util.out('Open new window')}
+                            <input class="input-newwindow" id="__input_newwindow2" type="checkbox" /> ${util.out('Open in new tab')}
                         </label>
-                        <label class="label-checkbox" 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 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')}
                         </label>
                         </div>
 
@@ -30644,9 +30644,22 @@ class ButtonEditor {
     if (cmd === 'href') setHref(el, value);else if (cmd === 'newtab') setNewTab(el, value);else if (cmd === 'fontsize') setFontSize(el, value === '' ? '' : parseInt(value, 10));else if (cmd === 'tracking') {
       if (value !== '') setTracking(el, parseInt(value, 10));
     } else if (cmd === 'margin') setMargin(el, side, value === '' ? 0 : parseInt(value, 10));
+    if (cmd === 'href' || cmd === 'newtab') this.syncLinkDialog(el);
     this.builder.opts.onChange();
     this.realtime();
   }
+
+  // The link dialog edits the same href/target and can be open alongside this
+  // panel. Its fields are read when it opens, so without this its Ok would
+  // write back the link as it was before the panel touched it.
+  syncLinkDialog(el) {
+    const modal = this.builderStuff.querySelector('.is-modal.createlink');
+    if (!modal || !this.dom.hasClass(modal, 'active')) return;
+    const url = modal.querySelector('.input-url');
+    if (url && document.activeElement !== url) url.value = el.getAttribute('href') || '';
+    const newwindow = modal.querySelector('.input-newwindow');
+    if (newwindow) newwindow.checked = el.getAttribute('target') === '_blank';
+  }
   openColor(cmd, btn) {
     const el = this.getButton();
     if (!el) return;
@@ -30965,6 +30978,23 @@ class Hyperlink {
       this.buttonEditor = new ButtonEditor(this.builder);
     }
   }
+
+  // The link dialog and a button UI can be open at the same time and both
+  // show the link's href and target. After the dialog writes to the link,
+  // the button UI has to re-read it, or it keeps showing (and writing back)
+  // the old values. The host can own that UI instead (onButtonEdit).
+  syncButtonUI(link) {
+    if (!link || !link.isConnected) return;
+    if (this.builder.opts.onButtonEdit) {
+      if (link === this.builder.activeLinkButton) this.builder.opts.onButtonEdit(link);
+      return;
+    }
+    const dom = this.builder.dom;
+    const buttonModal = this.builder.builderStuff.querySelector('.is-modal.buttoneditor');
+    if (!buttonModal || !dom.hasClass(buttonModal, 'active')) return;
+    if (!this.buttonEditor) this.buttonEditor = new ButtonEditor(this.builder);
+    this.buttonEditor.realtime();
+  }
   renderPanel() {
     const builderStuff = this.builder.builderStuff;
     const util = this.builder.util;
@@ -30996,10 +31026,10 @@ class Hyperlink {
                     </div>
                     <div class="cb-field">
                         <label class="label-checkbox">
-                            <input class="input-newwindow" id="__input_newwindow" type="checkbox" /> ${util.out('Open new window')}
+                            <input class="input-newwindow" id="__input_newwindow" type="checkbox" /> ${util.out('Open in new tab')}
                         </label>
-                        <label class="label-checkbox" id="lblOpenLightbox" style="${this.builder.useLightbox ? '' : 'display:none'}">
-                            <input class="input-openlightbox" id="__input_openlightbox" type="checkbox" /> ${util.out('Open in a lightbox (for image, video or Youtube)')}
+                        <label class="label-checkbox mt-1" id="lblOpenLightbox" style="${this.builder.useLightbox ? '' : 'display:none'}">
+                            <input class="input-openlightbox" id="__input_openlightbox" type="checkbox" /> ${util.out('Open in a lightbox')}
                         </label>
                     </div>
                     <div class="cb-field">
@@ -31042,6 +31072,7 @@ class Hyperlink {
       let inputOk = modal.querySelector('.input-ok');
       dom.addEventListener(inputOk, 'click', () => {
         this.builder.uo.saveForUndo();
+        let editedLink = null;
         let link = this.builder.activeLink;
         if (link) {
           // Edit Existing Link
@@ -31051,35 +31082,19 @@ class Hyperlink {
           let linktext = modal.querySelector('.input-text').value;
           if (linktext === '') linktext = url;
 
-          // Engine seam: edit / unlink an existing link via Inscribe.
-          // A cleared URL means UNLINK. Icon links stay legacy.
-          if (this.builder.opts.engine === 'inscribe' && !this.builder.activeIcon) {
+          // Engine seam: only UNLINK (a cleared URL) goes through
+          // Inscribe. An edit is applied in place below: region.link()
+          // re-wraps the selection in a NEW plain <a>, which dropped
+          // the link's classes and inline styles, so changing a
+          // button's URL stripped the button. Icon links stay legacy.
+          if (url === '' && this.builder.opts.engine === 'inscribe' && !this.builder.activeIcon) {
             const region = this.builder.editingEngine.active;
             if (region && link.isConnected) {
               dom.selectElementContents(link); // target the link
-              if (url !== '') {
-                const attrs = {
-                  target: modal.querySelector('.input-newwindow').checked ? '_blank' : '',
-                  title: title || '',
-                  class: modal.querySelector('.input-openlightbox').checked ? 'is-lightbox' : ''
-                };
-                const created = region.link(url, attrs); // re-wraps, returns <a>
-                if (created && linktext && created.textContent !== linktext) {
-                  created.textContent = linktext;
-                }
-                this.builder.opts.onChange();
-                util.hideModal(modal);
-                if (created && created.isConnected) {
-                  region.focus();
-                  dom.selectElementContents(created);
-                  util.saveSelection();
-                }
-              } else {
-                region.unlink();
-                this.hideTool();
-                this.builder.opts.onChange();
-                util.hideModal(modal);
-              }
+              region.unlink();
+              this.hideTool();
+              this.builder.opts.onChange();
+              util.hideModal(modal);
               return;
             }
           }
@@ -31087,6 +31102,7 @@ class Hyperlink {
             link.setAttribute('href', url);
             if (modal.querySelector('.input-newwindow').checked) {
               link.setAttribute('target', '_blank');
+              if (!link.getAttribute('rel')) link.setAttribute('rel', 'noopener noreferrer');
             } else {
               link.removeAttribute('target');
             }
@@ -31098,7 +31114,14 @@ class Hyperlink {
             if (this.builder.activeIcon) ; else {
               link.innerHTML = linktext;
             }
-            link.setAttribute('title', title);
+            if (title) link.setAttribute('title', title);else link.removeAttribute('title');
+
+            // A button UI (this editor's Button panel, or the
+            // host's own) shows the same link and can be open at
+            // the same time as this dialog, so it has to re-read
+            // what was just written.
+            this.syncButtonUI(link);
+            editedLink = link;
           } else {
             // link.outerHTML = link.innerHTML;
             this.hideTool();
@@ -31256,6 +31279,17 @@ class Hyperlink {
           this.builder.opts.onRender();
         }
         util.hideModal(modal);
+
+        // hideModal() blurs, so the caret goes back on the edited link
+        // afterwards: the dialog can be reopened straight away.
+        if (editedLink && editedLink.isConnected && !this.builder.activeIcon) {
+          const region = this.builder.editingEngine.active;
+          if (region) {
+            region.focus();
+            dom.selectElementContents(editedLink);
+            util.saveSelection();
+          }
+        }
       });
       let inputCancel = modal.querySelector('.input-cancel');
       dom.addEventListener(inputCancel, 'click', () => {
@@ -31401,7 +31435,10 @@ class Hyperlink {
     }
 
     // Button Stuff
-    if (this.builder.useButtonPlugin) {
+    // A host with its own button UI (onButtonEdit) already opens it by
+    // selecting the button, so the pencil is a second route to the same
+    // panel and is left out.
+    if (this.builder.useButtonPlugin || this.builder.opts.onButtonEdit) {
       linkTool.querySelector('.link-button-edit').style.display = 'none';
     } else {
       if (link && this.builder.activeLinkButton) linkTool.querySelector('.link-button-edit').style.display = 'block';else linkTool.querySelector('.link-button-edit').style.display = 'none';
@@ -31705,6 +31742,11 @@ class Button {
       this.buttonEditor.realtime();
     }
     const buttonTool = this.buttonTool;
+
+    // A host with its own button UI (onButtonEdit) already opens it by
+    // selecting the button, so the pencil is a second route to the same
+    // panel and is left out.
+    buttonTool.querySelector('.button-edit').style.display = this.builder.opts.onButtonEdit ? 'none' : '';
     let top = activeButton.getBoundingClientRect().top + this.builder.win.pageYOffset;
     let left = activeButton.getBoundingClientRect().left;
     buttonTool.style.display = 'flex';
@@ -46273,7 +46315,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 +92898,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');