@innovastudio/contentbox 1.6.196 → 1.6.198

package/package.json

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

package/public/contentbox/contentbox.esm.js

@@ -25956,9 +25956,11 @@ function convertSection(section, win) {
       if (isLegacyAttr(a.name)) el.removeAttribute(a.name);
     });
     LEGACY_CLASSES.forEach(c => el.classList && el.classList.remove(c));
-    byPct.forEach(f => el.setAttribute(`data-fx-${f.pct}`, toFxValue(f.props)));
-    el.setAttribute('data-fx-ease', 'linear'); // skrollrr interpolates linearly
+    byPct.forEach(f => el.setAttribute(`data-fx-${f.pct}`, toFxValue(f.props))); // Linear is correct: lax interpolated linearly (it only eases when
+    // options.easing is passed, and skrollrr never passed it). Legacy's
+    // visible softness was NOT keyframe easing — see the scrub note below.
 
+    el.setAttribute('data-fx-ease', 'linear');
     el.style.transform = '';
     el.style.opacity = '';
   });
@@ -25985,10 +25987,24 @@ function convertSection(section, win) {
   } else {
     // legacy anchors span in -> out, i.e. the whole crossing
     section.setAttribute('data-fx-end', 'bottom top');
-  } // ~0.1s matches the old CSS 'transition: all .3s ease-out' softness
+  }
+  /* Legacy's smoothness came from `transition: all .3s ease-out` on each
+   * element — a TIME lag on top of linear keyframes, not a keyframe shape.
+   * The scrub is the Motion equivalent, so it carries that lag across.
+   *
+   * 0.1 was the original guess and it is about HALF the real softness:
+   * kinetra's scrub advances by dt/scrub per frame (kinetra.js ~965), so at
+   * 60fps scrub=0.1 gives a per-frame gain of ~0.167, while a 0.3s ease-out
+   * restarted each frame gives ~0.086 — which corresponds to scrub ~0.19.
+   * Converted sections rendered with 0.1 start and stop noticeably abruptly.
+   *
+   * The same wrong constant was in the runtime's legacy path; it was fixed
+   * there by restoring the CSS transition outright (skrollrr-kinetra.js,
+   * `animationTransition`). Converted content has no legacy attributes left,
+   * so the scrub is the only lever here — 0.2 is the matching value. */
 
 
-  section.setAttribute('data-fx-scrub', hardScrub ? '0' : '0.1');
+  section.setAttribute('data-fx-scrub', hardScrub ? '0' : '0.4');
   return {
     converted: plans.length,
     droppedVariants,
@@ -44954,6 +44970,17 @@ class Util$1 {
   hidePops() {
     const dom = this.dom;
     const builderStuff = this.builder.builderStuff;
+
+    /* Fast path. This runs on every scroll event (see the window 'scroll'
+     * handler in contentbuilder.js — its 10ms debounce is shorter than the
+     * ~16ms gap between scroll events, so it does not coalesce them), which
+     * meant two full querySelectorAll sweeps plus their loops ~60x/second
+     * even with nothing open. When nothing is showing, the loops below are
+     * no-ops, so skip straight to the image handles. */
+    if (!builderStuff.querySelector('.is-tool.active, .is-tool[style*="display"], .is-pop.active')) {
+      if (this.builder.editingEngine) this.builder.editingEngine.hideImageHandles();
+      return;
+    }
     let tools = builderStuff.querySelectorAll('.is-tool');
     Array.prototype.forEach.call(tools, tool => {
       // if(tool.classList.contains('is-row-tool')||
@@ -69763,11 +69790,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() {
@@ -107083,16 +107122,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++;
         });
@@ -107103,10 +107168,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;
@@ -107120,10 +107182,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;
@@ -107161,10 +107220,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;
@@ -107194,10 +107250,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++;
         });
@@ -107209,13 +107262,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;
             });
@@ -107227,10 +107276,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;
@@ -107260,10 +107306,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
@@ -107281,13 +107324,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 + '%';
@@ -107299,10 +107352,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;
@@ -107322,6 +107372,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();
   }
 }