@innovastudio/contentbuilder 1.5.219 → 1.5.220

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@innovastudio/contentbuilder",
-  "version": "1.5.219",
+  "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 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)')}
+                            <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';