@innovastudio/contentbox 1.6.29 → 1.6.31

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.29",
+  "version": "1.6.31",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -52,7 +52,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.6",
+    "@innovastudio/contentbuilder": "^1.5.8",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.css

@@ -612,6 +612,7 @@ body.controlpanel .is-content-view.mobile {
   width: 38px;
   height: 34px;
   background-color: transparent;
+  color: #111;
   box-shadow: none;
   margin: 2px;
   border-radius: 5px;
@@ -1770,10 +1771,14 @@ body.topspace .custom-topbar {
   height: var(--topspace);
 }
 
-@media all and (max-width: 970px) {
+@media all and (max-width: 1100px) {
   .custom-topbar > div:first-child {
     display: none;
   }
+
+  .custom-topbar > div:nth-child(2) {
+    margin-left: 0;
+  }
 }
 .custom-topbar > div:nth-child(3) {
   justify-content: flex-end;

package/public/contentbox/contentbox.esm.js

@@ -8953,19 +8953,56 @@ class Text {
           span.removeAttribute('data-keep');
         }
       }); // clean
+      // let elms = activeColumn.querySelectorAll('ul,p'); 
+      // Array.prototype.forEach.call(elms, (elm) => {
+      //     let text = elm.innerHTML.trim();
+      //     if(text==='') {
+      //         elm.parentNode.removeChild(elm);
+      //     }
+      // });
 
-      let elms = activeColumn.querySelectorAll('ul,p');
-      Array.prototype.forEach.call(elms, elm => {
-        let text = elm.innerHTML.trim();
+      let elm = this.getElm();
+      const ul = elm.closest('ul,ol');
+      const p = elm.closest('p,h1,h2,h3,h4,h5,h6');
+
+      if (ul && p) {
+        /*
+        Case:
+        After applying list, the structure will be:
+        <p style="...">
+            <ul>
+                <li>Lorem ipsum</li>
+            </ul>
+        </p>
+         DOM will reformat this into:
+        <p style="..."></p>
+        <ul>
+            <li>Lorem ipsum</li>
+        </ul>
+        <p></p>
+         The list will lost its style
+        */
+        const list = ul.querySelectorAll('li');
+        list.forEach(li => {
+          this.appendAttributes(p, li);
+        });
+      }
 
-        if (text === '') {
-          elm.parentNode.removeChild(elm);
-        }
-      });
       onFinish();
     }, 10);
   }
 
+  appendAttributes(sourceElement, destinationElement) {
+    // Append classes
+    destinationElement.classList.add(...sourceElement.classList); // Append styles
+
+    for (let i = 0; i < sourceElement.style.length; i++) {
+      let property = sourceElement.style[i];
+      let value = sourceElement.style.getPropertyValue(property);
+      destinationElement.style.setProperty(property, value);
+    }
+  }
+
   formatText(command) {
     if (command === 'bold') this.execCommandToggle('fontWeight');
     if (command === 'italic') this.execCommandToggle('fontStyle');
@@ -12476,7 +12513,12 @@ class PanelSvg {
       let currentColor = this.builder.editor.dom.getStyle(svg, 'color');
       const colorpicker = this.builder.editor.colorpicker();
       colorpicker.open(color => {
-        svg.style.color = color;
+        if (svg.style.fill) {
+          svg.style.fill = color;
+        } else {
+          svg.style.color = color;
+        }
+
         btnColorPick.style.backgroundColor = color; // preview
 
         this.builder.editor.onChange();
@@ -12556,8 +12598,16 @@ class PanelSvg {
     if (div.classList.contains('text-right')) panel.querySelector('[data-align="right"]').classList.add('on');
     if (div.classList.contains('text-center')) panel.querySelector('[data-align="center"]').classList.add('on');
     if (div.classList.contains('text-justify')) panel.querySelector('[data-align="justify"]').classList.add('on');
-    const btnColorPick = panel.querySelector('.btn-color');
-    let currentColor = this.builder.editor.dom.getStyle(svg, 'color');
+    const btnColorPick = panel.querySelector('.btn-color'); // let currentColor = this.builder.editor.dom.getStyle(svg, 'color');
+
+    let currentColor;
+
+    if (svg.style.fill) {
+      currentColor = svg.style.fill;
+    } else {
+      currentColor = svg.style.color;
+    }
+
     btnColorPick.style.backgroundColor = currentColor; // panel.querySelectorAll('.fontsizes button').forEach(btn=>btn.classList.remove('on'));
     // let currentSize = svg.getAttribute('width');
     // panel.querySelectorAll('.fontsizes button').forEach(btn=>{
@@ -25193,7 +25243,7 @@ class ControlPanel {
           this.title.innerHTML = titleHtml;
           this.panelIframe.classList.add('active');
           this.objPanelIframe.getState();
-        } else if (element.tagName.toLowerCase() === 'i' && element.classList.contains('icon')) {
+        } else if (element.tagName.toLowerCase() === 'i' && (element.classList.contains('icon') || element.classList.contains('bi'))) {
           let titleHtml = out('Icon');
           this.title.innerHTML = titleHtml;
           this.panelIcon.classList.add('active');
@@ -26831,11 +26881,13 @@ const renderQuickAdd = builder => {
     elm = quickadd.querySelector('.add-social');
     dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      const html = `<div class="is-social" style="text-align: center;">
-                <a href="https://twitter.com/"><i class="icon ion-social-twitter" style="margin-right: 1em"></i></a>
-                <a href="https://www.facebook.com/"><i class="icon ion-social-facebook" style="margin-right: 1em"></i></a>
-                <a href="mailto:you@example.com"><i class="icon ion-android-drafts"></i></a>
-            </div>`;
+      const html = `
+            <div class="is-social text-left">
+                <a href="https://twitter.com/"><i class="bi bi-twitter-x"></i></a>
+                <a href="https://www.facebook.com/"><i class="bi bi-facebook"></i></a>
+                <a href="https://www.instagram.com/" title=""><i class="icon bi bi-instagram"></i></a>
+            </div>
+            `;
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-map');
@@ -70594,6 +70646,8 @@ class Image$1 {
         try {
           img.setAttribute('data-filename', input.files[0].name); //needed for saveimage.js | 
 
+          // img.crossOrigin = 'anonymous';
+
           this.processImage(input.files[0], img, () => {
             imageProgress.style.display = 'none';
             elm = imageTool.querySelector('#fileEmbedImage');
@@ -96598,7 +96652,7 @@ class Rte {
   addIcon(classname) {
     const dom = this.dom;
     this.util.restoreSelection();
-    if (this.builder.activeIcon) {
+    if (this.builder.activeIcon && this.builder.doc.contains(this.builder.activeIcon)) {
       this.builder.uo.saveForUndo();
 
       /*
@@ -96630,6 +96684,12 @@ class Rte {
       this.builder.uo.saveForUndo();
       this.util.pasteHtmlAtCaret('<i class="' + classname + ' icon-active"></i>', true);
       this.builder.activeIcon = this.builder.doc.querySelector('.icon-active');
+
+      // this.util.pasteHtmlAtCaret('<i class="icon-active"></i>', true); 
+      // const newIcon = this.builder.doc.querySelector('.icon-active');
+      // newIcon.className = classname + ' icon-active';
+      // this.builder.activeIcon = newIcon;
+
       dom.selectElementContents(this.builder.activeIcon);
       this.util.saveSelection();
     }
@@ -147514,7 +147574,12 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
             transition: none !important;
             z-index:1;
         }
-        </style>`);
+
+
+        i.bi, i.icon { display: inline-flex; }
+
+        </style>`); // i.bi, i.icon { display: inline-flex; } => this makes icons more cursor friendly
+
     dom.appendHtml(document.head, `<style id="_contentboxstuff_css">
 
             #_cbhtml .is-modal.editbox.is-modal-content {