@innovastudio/contentbox 1.6.120 → 1.6.122

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.120",
+  "version": "1.6.122",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "types": "index.d.ts",
@@ -59,7 +59,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.117",
+    "@innovastudio/contentbuilder": "^1.5.119",
     "js-beautify": "^1.14.0",
     "sortablejs": "^1.15.2"
   }

package/public/contentbox/contentbox.css

@@ -1,4 +1,8 @@
-/* @import url("../icons/bootstrap-icons.min.css");  */
+/* 
+@import url("../ionicons/css/ionicons.min.css"); 
+@import url("../icons/bootstrap-icons.min.css");  
+*/
+@import url("https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.0/css/ionicons.min.css");
 @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
 /* IFRAME */
 .is-content-view.desktop-lg {

package/public/contentbox/contentbox.esm.js

@@ -44582,7 +44582,8 @@ const renderSnippetPanel = (builder, snippetOpen) => {
   // let safariAgent = false;
 
   let activeBuilderArea;
-  let itemHeight;
+
+  // let itemHeight;
 
   /*
   const isMobile = dom.detectMobileOrTablet();
@@ -44613,7 +44614,8 @@ const renderSnippetPanel = (builder, snippetOpen) => {
 
     sort: false,
     animation: 150,
-    onChoose: evt => {
+    onChoose: () => {
+      //evt
       // Adjust temmporary
       const newCss = `
             <style id="css-scale">
@@ -44625,7 +44627,9 @@ const renderSnippetPanel = (builder, snippetOpen) => {
                 }
             </style>
             `;
-      itemHeight = evt.item.offsetHeight;
+
+      // itemHeight = evt.item.offsetHeight;
+
       if (builder.iframe) {
         const oldCss = builder.contentStuff.querySelector('#css-scale');
         if (oldCss) oldCss.parentNode.removeChild(oldCss);
@@ -44641,16 +44645,18 @@ const renderSnippetPanel = (builder, snippetOpen) => {
       builder.util.clearPops();
       builder.hideElementTools();
     },
-    onClone: evt => {
-      // fix broken image on cloned element
-      var cloneEl = evt.clone;
-      let img = cloneEl.querySelector('img');
-      img.style.opacity = 0.0001;
-      cloneEl.style.height = itemHeight + 'px';
-      let timestamp = new Date().getTime();
-      img.src = img.src + '?' + timestamp;
-      img.style.opacity = '';
+    /*
+    onClone:  (evt) =>{
+        // fix broken image on cloned element
+        var cloneEl = evt.clone;
+        let img = cloneEl.querySelector('img');
+        img.style.opacity = 0.0001;
+        cloneEl.style.height = itemHeight + 'px';
+        let timestamp = new Date().getTime();
+        img.src = img.src+'?'+timestamp;
+        img.style.opacity = '';
     },
+    */
     onMove: () => {
       let emptyinfo = builder.doc.querySelector('.row-add-initial'); // if there is empty info, remove it during snippet drag drop
       // if(emptyinfo) emptyinfo.parentNode.removeChild(emptyinfo);
@@ -72038,14 +72044,24 @@ class DragDropImageUploader {
     this.isAttached = false;
   }
   _getImageUnderCursor(e) {
+    const x = e.clientX;
+    const y = e.clientY;
     const doc = this.element.ownerDocument || document;
-    const range = doc.caretRangeFromPoint ? doc.caretRangeFromPoint(e.clientX, e.clientY) : doc.caretPositionFromPoint(e.clientX, e.clientY);
-    if (!range) return null;
-    const node = range.startContainer.nodeType === 1 ? range.startContainer : range.startContainer.parentElement;
     if (this.element.getAttribute('id') === 'divImageResizer') {
       return this.builder.activeImage;
     }
-    return node.tagName === 'IMG' ? node : node.querySelector && node.querySelector('img');
+
+    // Use elementFromPoint for reliability across browsers
+    const elementAtPoint = doc.elementFromPoint(x, y);
+    if (!elementAtPoint) return null;
+
+    // If the element itself is an image, return it
+    if (elementAtPoint.tagName === 'IMG') {
+      return elementAtPoint;
+    }
+
+    // Otherwise, check if it contains an image (e.g., inside a div, anchor, etc.)
+    return elementAtPoint.querySelector && elementAtPoint.querySelector('img');
   }
   async _onDrop(e) {
     e.preventDefault();