@innovastudio/contentbox 1.6.201 → 1.6.202

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@innovastudio/contentbox",
-  "version": "1.6.201",
+  "version": "1.6.202",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "types": "index.d.ts",
@@ -72,7 +72,7 @@
     "@gltf-transform/core": "^4.5.0",
     "@gltf-transform/extensions": "^4.5.0",
     "@gltf-transform/functions": "^4.5.0",
-    "@innovastudio/contentbuilder": "^1.5.219",
+    "@innovastudio/contentbuilder": "^1.5.220",
     "js-beautify": "^1.14.0",
     "marked": "^17.0.0",
     "meshoptimizer": "^1.2.0",

package/public/contentbox/contentbox.esm.js

@@ -15507,10 +15507,12 @@ class PanelButton {
     const inpHref = panel.querySelector('.inp-href');
     inpHref.addEventListener('input', () => {
       this.edit(btn => setHref$1(btn, inpHref.value), false);
+      this.syncLinkDialog();
     });
     const chkNewTab = panel.querySelector('.chk-newtab');
     chkNewTab.addEventListener('change', () => {
       this.edit(btn => setNewTab$1(btn, chkNewTab.checked), false);
+      this.syncLinkDialog();
     }); // --- Colours ---
 
     panel.querySelectorAll('[data-colorstate]').forEach(btn => {
@@ -15580,6 +15582,20 @@ class PanelButton {
       this.getState();
       this.repositionTools();
     }
+  } // ContentBuilder's link dialog edits the same href/target and can be open
+  // alongside this panel. It reads its fields when it opens, so without this
+  // its Ok would write back the link as it was before the panel touched it.
+  // (The other direction is the editor's own: see elementhyperlink.js.)
+
+
+  syncLinkDialog() {
+    const btn = this.target();
+    const modal = this.builder.editor.builderStuff.querySelector('.is-modal.createlink');
+    if (!btn || !modal || !modal.classList.contains('active')) return;
+    const url = modal.querySelector('.input-url');
+    if (url && document.activeElement !== url) url.value = btn.getAttribute('href') || '';
+    const newwindow = modal.querySelector('.input-newwindow');
+    if (newwindow) newwindow.checked = btn.getAttribute('target') === '_blank';
   } // Size and padding change the button's box, which leaves the floating
   // tools pointing at where it used to be.
 
@@ -18790,7 +18806,7 @@ class PanelOverlay {
 
                 <label class="label checkbox mt-3">
                     <input type="checkbox" class="chk-newwindow" id="_chk_ovl_newwindow_${this.random()}">
-                    <span>${out('Open new window')}</span>
+                    <span>${out('Open in new tab')}</span>
                 </label>
 
             </div>
@@ -74561,10 +74577,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>
 
@@ -75644,9 +75660,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;
@@ -75965,6 +75994,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;
@@ -75996,10 +76042,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">
@@ -76042,6 +76088,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
@@ -76051,35 +76098,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;
             }
           }
@@ -76087,6 +76118,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');
             }
@@ -76098,7 +76130,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();
@@ -76256,6 +76295,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', () => {
@@ -76401,7 +76451,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';
@@ -76705,6 +76758,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';