@innovastudio/contentbox 1.6.195 → 1.6.197

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@innovastudio/contentbox",
-  "version": "1.6.195",
+  "version": "1.6.197",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "types": "index.d.ts",
@@ -67,7 +67,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.213",
+    "@innovastudio/contentbuilder": "^1.5.215",
     "js-beautify": "^1.14.0",
     "marked": "^17.0.0",
     "sortablejs": "^1.15.2"

package/public/contentbox/contentbox.esm.js

@@ -46429,11 +46429,13 @@ class Dom {
   // source: https://stackoverflow.com/questions/2871081/jquery-setting-cursor-position-in-contenteditable-div
   moveCursorToElement(element) {
     var sel, range;
-    if (window.getSelection && this.builder.doc.createRange) {
+    if (this.builder.win.getSelection && this.builder.doc.createRange) {
       range = this.builder.doc.createRange();
       range.selectNodeContents(element);
       range.collapse(false);
-      sel = window.getSelection();
+      // The CONTENT window's selection — with the editor in an iframe the
+      // global one belongs to the host page, so the caret never moved.
+      sel = this.builder.win.getSelection();
       sel.removeAllRanges();
       sel.addRange(range);
     } else if (this.builder.doc.body.createTextRange) {
@@ -69761,11 +69763,23 @@ class Plugin {
       }
     };
     if (!this.builder.handlePluginClick_) {
-      document.addEventListener('click', handlePluginClick);
-      if (this.builder.iframeDocument) {
-        this.builder.doc.addEventListener('click', handlePluginClick);
-      }
       this.builder.handlePluginClick_ = true;
+      // Register on the NEXT task, not now. showPluginEditor() can be
+      // reached from a microtask inside the very click that opens the
+      // panel: the RTE button runs convertSelectionToPlugin(), whose
+      // runtime.reinitialize().then() resolves while that click is still
+      // propagating towards document. A listener added mid-propagation
+      // still receives that same click, so the panel was closed the
+      // instant it opened — and only on a first open, because afterwards
+      // the previous listener had already fired and removed itself.
+      // Deferring means this listener can never see the click that
+      // created it, whichever toolbar or panel opened the panel.
+      setTimeout(() => {
+        document.addEventListener('click', handlePluginClick);
+        if (this.builder.iframeDocument) {
+          this.builder.doc.addEventListener('click', handlePluginClick);
+        }
+      }, 0);
     }
   }
   hidePluginEditor() {
@@ -107081,16 +107095,42 @@ class Resize {
   enable() {
     const col = this.element;
     const row = col.parentNode;
+
+    // The builder injects its own elements into a row — tools, the add-row
+    // bar, and the row overlay that appears once the row is selected in the
+    // side panel. They are not columns, and measuring them as columns makes
+    // the totals below nonsense. Filter them out in ONE place so a new
+    // injected element can never silently break the maths again.
+    const isBuilderUI = item => item.nodeType !== 1 || item.classList.contains('is-tool') || item.classList.contains('is-row-tool') || item.classList.contains('is-col-tool') || item.classList.contains('is-rowadd-tool') || item.classList.contains('is-row-overlay');
+    const columnsOf = parent => Array.from(parent.children).filter(item => !isBuilderUI(item));
+
+    // A column width is only ever stored as a percentage; pixels are used
+    // purely while a drag is in progress. resizeEnd normally converts them
+    // back, but it does not run if the drag is interrupted — and pixel
+    // widths saved into the page push content off screen on smaller
+    // devices. This is the backstop for that: whatever happens to the drag,
+    // a leftover pixel width is converted on the next tick. Capture phase,
+    // so it still runs if something stops the event bubbling.
+    const normalizeToPercent = () => {
+      setTimeout(() => {
+        if (!col.style.width || col.style.width.indexOf('px') === -1) return;
+        const parent = col.parentNode;
+        if (!parent || !parent.offsetWidth) return;
+        const pct = col.offsetWidth / parent.offsetWidth * 100;
+        if (isFinite(pct) && pct > 0) col.style.width = pct + '%';
+      }, 0);
+    };
+    this.normalizeToPercent = normalizeToPercent;
+    this.eventTarget = col.ownerDocument;
+    this.eventTarget.addEventListener('mouseup', normalizeToPercent, true);
+    this.eventTarget.addEventListener('touchend', normalizeToPercent, true);
     this.resize = new Resizeable({
       pane: col,
       resizeHeight: this.builder.resizeHeight,
       onResize: (width, height) => {
         this.builder.util.hideControls();
         let numOfCols = 1;
-        Array.from(col.parentNode.children).map(item => {
-          if (item.classList.contains('is-row-tool')) return;
-          if (item.classList.contains('is-rowadd-tool')) return;
-          if (item.classList.contains('is-col-tool')) return;
+        columnsOf(col.parentNode).map(item => {
           if (item === col) return;
           numOfCols++;
         });
@@ -107101,10 +107141,7 @@ class Resize {
           // adjust others
           const maxWidth = () => {
             let otherWidth = 0;
-            Array.from(col.parentNode.children).map(item => {
-              if (item.classList.contains('is-row-tool')) return;
-              if (item.classList.contains('is-rowadd-tool')) return;
-              if (item.classList.contains('is-col-tool')) return;
+            columnsOf(col.parentNode).map(item => {
               // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
 
               if (item === col) return;
@@ -107118,10 +107155,7 @@ class Resize {
             // percentage = (max / row.offsetWidth) * 100;
             // Or make others auto
 
-            Array.from(col.parentNode.children).map(item => {
-              if (item.classList.contains('is-row-tool')) return;
-              if (item.classList.contains('is-rowadd-tool')) return;
-              if (item.classList.contains('is-col-tool')) return;
+            columnsOf(col.parentNode).map(item => {
               // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
 
               if (item === col) return;
@@ -107159,10 +107193,7 @@ class Resize {
             }
           } else {
             // New: if other cols has no width, set to 100%
-            Array.from(col.parentNode.children).map(item => {
-              if (item.classList.contains('is-row-tool')) return;
-              if (item.classList.contains('is-rowadd-tool')) return;
-              if (item.classList.contains('is-col-tool')) return;
+            columnsOf(col.parentNode).map(item => {
               // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
 
               if (item === col) return;
@@ -107192,10 +107223,7 @@ class Resize {
       },
       resizeEnd: () => {
         let numOfCols = 1;
-        Array.from(col.parentNode.children).map(item => {
-          if (item.classList.contains('is-row-tool')) return;
-          if (item.classList.contains('is-rowadd-tool')) return;
-          if (item.classList.contains('is-col-tool')) return;
+        columnsOf(col.parentNode).map(item => {
           if (item === col) return;
           numOfCols++;
         });
@@ -107207,13 +107235,9 @@ class Resize {
           // adjust others
           const maxWidth = () => {
             let otherWidth = 0;
-            Array.from(col.parentNode.children).map(item => {
-              if (item.classList.contains('is-row-tool')) return;
-              if (item.classList.contains('is-rowadd-tool')) return;
-              if (item.classList.contains('is-col-tool')) return;
+            columnsOf(col.parentNode).map(item => {
               // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
 
-              if (item.classList.contains('row-tool')) return;
               if (item === col) return;
               otherWidth += item.offsetWidth;
             });
@@ -107225,10 +107249,7 @@ class Resize {
             // percentage = (max / row.offsetWidth) * 100;
             // Or make others auto
 
-            Array.from(col.parentNode.children).map(item => {
-              if (item.classList.contains('is-row-tool')) return;
-              if (item.classList.contains('is-rowadd-tool')) return;
-              if (item.classList.contains('is-col-tool')) return;
+            columnsOf(col.parentNode).map(item => {
               // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
 
               if (item === col) return;
@@ -107258,10 +107279,7 @@ class Resize {
           // New: Final fix (if column resized exceeds its max)
           let othersWidth = 0;
           let activeColumnWidth = 0;
-          Array.from(col.parentNode.children).map(item => {
-            if (item.classList.contains('is-row-tool')) return;
-            if (item.classList.contains('is-rowadd-tool')) return;
-            if (item.classList.contains('is-col-tool')) return;
+          columnsOf(col.parentNode).map(item => {
             // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
 
             // // Refresh Module
@@ -107279,13 +107297,23 @@ class Resize {
           if (activeColumnWidth > maxResult) {
             percentage = maxResult / row.offsetWidth * 100;
           }
-          col.style.width = percentage + '%';
+
+          // The column is carrying a pixel width at this point (set
+          // just above, to measure it). A width is only ever stored as
+          // a percentage, so if the maths produced something CSS will
+          // reject — negative, zero, NaN, Infinity — the assignment
+          // would silently fail and leave those pixels behind, which
+          // then breaks the layout on smaller screens. Fall back to
+          // the column's real share of the row instead.
+          if (!isFinite(percentage) || percentage <= 0) {
+            percentage = col.offsetWidth / row.offsetWidth * 100;
+          }
+          if (isFinite(percentage) && percentage > 0) {
+            col.style.width = percentage + '%';
+          }
 
           // Refresh Module
-          Array.from(col.parentNode.children).map(item => {
-            if (item.classList.contains('is-row-tool')) return;
-            if (item.classList.contains('is-rowadd-tool')) return;
-            if (item.classList.contains('is-col-tool')) return;
+          columnsOf(col.parentNode).map(item => {
             if (item.getAttribute('data-html')) {
               let moduleWidth = item.offsetWidth / row.offsetWidth * 100;
               item.style.width = moduleWidth + '%';
@@ -107297,10 +107325,7 @@ class Resize {
         if (col.style.height) {
           col.style.minHeight = col.style.height;
           col.style.height = '';
-          Array.from(col.parentNode.children).map(item => {
-            if (item.classList.contains('is-row-tool')) return;
-            if (item.classList.contains('is-rowadd-tool')) return;
-            if (item.classList.contains('is-col-tool')) return;
+          columnsOf(col.parentNode).map(item => {
             // if(this.opts.filterSibling) if(item.classList.contains(this.opts.filterSibling)) return;
 
             if (item === col) return;
@@ -107320,6 +107345,10 @@ class Resize {
     });
   }
   destroy() {
+    if (this.eventTarget && this.normalizeToPercent) {
+      this.eventTarget.removeEventListener('mouseup', this.normalizeToPercent, true);
+      this.eventTarget.removeEventListener('touchend', this.normalizeToPercent, true);
+    }
     this.resize.destroy();
   }
 }
@@ -122499,20 +122528,6 @@ class ContentBuilder {
     // force (and the option itself) disappears at the final step.
     this.opts.engine = 'inscribe';
     this.engine = 'inscribe';
-    if (!this.opts.uploadFile && !this.opts.upload) {
-      this.opts.uploadFile = async e => {
-        const selectedFile = e.target.files[0];
-        const reader = new FileReader();
-        const result = await new Promise((resolve, reject) => {
-          reader.onload = () => resolve(reader.result);
-          reader.onerror = reject;
-          reader.readAsDataURL(selectedFile);
-        });
-        return {
-          url: result
-        };
-      };
-    }
     if (this.opts.uploadFile) {
       const uploadHandler = async e => {
         const data = await this.opts.uploadFile(e);
@@ -122713,6 +122728,26 @@ class ContentBuilder {
       this.opts.onLargerImageUpload = this.opts.onImageUpload;
     }
 
+    // Last-resort uploader for a builder configured without one (the demo
+    // and no-backend setups): embed the picked file as a data URL. Filled
+    // in per upload type, and only where nothing else provided a handler,
+    // so it can never overwrite `upload`, `uploadFile`, or a legacy
+    // per-type callback — overwriting those turned every upload into a
+    // silent base64 embed instead of calling the host app's uploader.
+    const embedAsDataUrl = async e => {
+      const selectedFile = e.target.files[0];
+      const reader = new FileReader();
+      const result = await new Promise((resolve, reject) => {
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = reject;
+        reader.readAsDataURL(selectedFile);
+      });
+      this.returnUrl(result);
+    };
+    ['onImageUpload', 'onLargerImageUpload', 'onVideoUpload', 'onAudioUpload', 'onMediaUpload', 'onFileUpload'].forEach(name => {
+      if (!this.opts[name]) this.opts[name] = embedAsDataUrl;
+    });
+
     // useButtonPlugin
     if (this.opts.emailMode) {
       this.useButtonPlugin = true;
@@ -128215,7 +128250,11 @@ Please obtain a license at: https://innovastudio.com/contentbox`);
   handleCellKeydown(col, e) {
     if (e.which === 46 || e.which === 8) {
       //delete or backspace
-      if (this.activeIcon) {
+      // Only when the selected icon is still live AND belongs to THIS
+      // column: a stale activeIcon (already deleted, or left over from
+      // another column) would otherwise swallow the key — cancelling the
+      // delete without removing anything, or throwing on a detached node.
+      if (this.activeIcon && this.activeIcon.isConnected && col.contains(this.activeIcon)) {
         // Delete icon
         if (this.activeIcon.parentNode.tagName.toLowerCase() === 'a' && this.activeIcon.parentNode.innerText.trim() === '') {
           let link = this.activeIcon.parentNode;
@@ -128303,46 +128342,56 @@ Please obtain a license at: https://innovastudio.com/contentbox`);
         }
       }
     }
-    if (e.keyCode === 46) {
-      // console.log("delete");
-      let curr;
+
+    // LEGACY empty-block guards for Delete/Backspace (module/custom-code
+    // columns only). Inscribe owns block joining in its regions
+    // (_joinBack/_joinFwd + ensureBlocks), so running these there is both
+    // unnecessary and harmful: the Delete branch mutates the DOM behind
+    // Inscribe's back (bypassing its history) and the Backspace branch
+    // cancels the key outright.
+    //
+    // Both read the caret from `this.win` — the CONTENT window — not the
+    // global `window`, and only act when the caret really is inside this
+    // column. Reading the global selection was the cause of "Backspace
+    // stopped working": with the editor in an iframe (or after a click
+    // landed a caret in the editor UI), the global selection points at
+    // some unrelated node whose textContent is '' and which has no
+    // previousElementSibling, so EVERY Backspace was preventDefault()ed —
+    // typing kept working, and only a page reload cleared it.
+    const legacyDeleteGuard = !this.inscribeRegionAt(col, e.target);
+    if (legacyDeleteGuard && (e.keyCode === 46 || e.keyCode === 8)) {
+      let curr = null;
       try {
-        if (window.getSelection) {
-          curr = window.getSelection().getRangeAt(0).commonAncestorContainer;
-        } else if (document.selection) {
-          curr = document.selection.createRange();
-        }
-        if (curr.innerHTML === '<br>') {
-          let next = curr.nextElementSibling;
-          if (next) {
-            curr.parentNode.removeChild(curr); //without this, empty P, H1, H2 (contains only <br />) cannot be deleted (when there is another P below)
-            // Of course, we can backspace from the P below, but the formatting will change.
-            e.preventDefault();
+        const sel = this.win.getSelection ? this.win.getSelection() : null;
+        if (sel && sel.rangeCount) curr = sel.getRangeAt(0).commonAncestorContainer;
+      } catch (err) {
+        curr = null;
+      }
+      if (curr && col.contains(curr)) {
+        if (e.keyCode === 46) {
+          if (curr.innerHTML === '<br>') {
+            let next = curr.nextElementSibling;
+            if (next) {
+              curr.parentNode.removeChild(curr); //without this, empty P, H1, H2 (contains only <br />) cannot be deleted (when there is another P below)
+              // Of course, we can backspace from the P below, but the formatting will change.
+              e.preventDefault();
+            }
           }
         }
-      } catch (e) {
-        // Do Nothing
-      }
-    }
-    if (e.keyCode === 8) {
-      // delete on Mac
-      let curr;
-      try {
-        if (window.getSelection) {
-          curr = window.getSelection().getRangeAt(0).commonAncestorContainer;
-        } else if (document.selection) {
-          curr = document.selection.createRange();
-        }
-        if (curr.textContent === '') {
-          let prev = curr.previousElementSibling;
-          if (!prev) {
-            e.preventDefault(); //Without this, empty P, H1, H2 (that doesn't have prev element) will be lost => can make empty column.
+        if (e.keyCode === 8) {
+          // delete on Mac
+          // Element nodes only: a text node has no previousElementSibling,
+          // so an empty text node under the caret would always cancel the key.
+          if (curr.nodeType === 1 && curr.textContent === '') {
+            let prev = curr.previousElementSibling;
+            if (!prev) {
+              e.preventDefault(); //Without this, empty P, H1, H2 (that doesn't have prev element) will be lost => can make empty column.
+            }
           }
         }
-      } catch (e) {
-        // Do Nothing
       }
     }
+
     if (e.which === 9 && !e.shiftKey) {
       // tab key pressed
       const activeCol = this.activeCol;
@@ -128353,7 +128402,7 @@ Please obtain a license at: https://innovastudio.com/contentbox`);
           if (target) target.click();
           // if(target.firstElementChild) target.firstElementChild.click();
 
-          let selection = window.getSelection();
+          let selection = this.win.getSelection();
           let range = this.createRange(target, {
             count: 0
           });
@@ -128377,7 +128426,7 @@ Please obtain a license at: https://innovastudio.com/contentbox`);
               if (firstCol) firstCol.click();
               // if(firstCol.firstElementChild) firstCol.firstElementChild.click();
 
-              let selection = window.getSelection();
+              let selection = this.win.getSelection();
               let range = this.createRange(firstCol, {
                 count: 0
               });
@@ -128406,7 +128455,7 @@ Please obtain a license at: https://innovastudio.com/contentbox`);
           const target = activeCol.previousElementSibling;
           if (target) target.click();
           if (target.firstElementChild) target.firstElementChild.click();
-          let selection = window.getSelection();
+          let selection = this.win.getSelection();
           let range = this.createRange(target, {
             count: 0
           });
@@ -128429,7 +128478,7 @@ Please obtain a license at: https://innovastudio.com/contentbox`);
               const target = divs[divs.length - 1];
               if (target) target.click();
               if (target.firstElementChild) target.firstElementChild.click();
-              let selection = window.getSelection();
+              let selection = this.win.getSelection();
               let range = this.createRange(target, {
                 count: 0
               });
@@ -128498,7 +128547,7 @@ Please obtain a license at: https://innovastudio.com/contentbox`);
   }
   createRange(node, chars, range) {
     if (!range) {
-      range = document.createRange();
+      range = this.doc.createRange();
       range.selectNode(node);
       range.setStart(node, 0);
     }
@@ -161222,6 +161271,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       videoHandler: this.settings.videoHandler,
       audioHandler: this.settings.audioHandler,
       fileHandler: this.settings.fileHandler,
+      upload: this.settings.upload,
       uploadFile: this.settings.uploadFile,
       onVideoUpload: this.settings.onVideoUpload,
       onAudioUpload: this.settings.onAudioUpload,