@innovastudio/contentbox 1.4.11 → 1.4.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.4.11",
+  "version": "1.4.13",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -46,7 +46,7 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.3.9",
+    "@innovastudio/contentbuilder": "^1.3.11",
     "js-beautify": "^1.14.0"
   }
 }

package/public/contentbox/contentbox.esm.js

@@ -12125,7 +12125,11 @@ class EditBox {
     dom$j.removeClass(elm, 'center');
     let elms = activeBox.querySelectorAll('.is-builder > div > div, .is-builder > div > div > *');
     elms.forEach(elm => {
+      if (elm.closest('.is-section-tool') || elm.closest('.is-box-tool') || elm.closest('.is-tool') || elm.closest('.is-rowadd-tool')) return;
       elm.style.textAlign = '';
+      dom$j.removeClass(elm, 'left');
+      dom$j.removeClass(elm, 'right');
+      dom$j.removeClass(elm, 'center');
       dom$j.removeClass(elm, this.builder.cssClasses.textAlign.left);
       dom$j.removeClass(elm, this.builder.cssClasses.textAlign.center);
       dom$j.removeClass(elm, this.builder.cssClasses.textAlign.right);
@@ -12133,6 +12137,9 @@ class EditBox {
       this.builder.editor.dom.doFunction(elm, theEl => {
         if (theEl.closest('.is-section-tool') || theEl.closest('.is-box-tool') || theEl.closest('.is-tool') || theEl.closest('.is-rowadd-tool')) return;
         theEl.style.textAlign = '';
+        dom$j.removeClass(theEl, 'left');
+        dom$j.removeClass(theEl, 'right');
+        dom$j.removeClass(theEl, 'center');
         dom$j.removeClass(theEl, this.builder.cssClasses.textAlign.left);
         dom$j.removeClass(theEl, this.builder.cssClasses.textAlign.center);
         dom$j.removeClass(theEl, this.builder.cssClasses.textAlign.right);
@@ -27655,9 +27662,12 @@ class HtmlUtil {
           col.style.cursor = '';
         });
       });
-    });
+    }); // cleanup cursor from drag to resize columns
+
     const rows = dom$h.elementChildren(tmp);
     rows.forEach(row => {
+      row.style.cursor = ''; //if tmp is row html, then this is a column
+
       const cols = dom$h.elementChildren(row);
       cols.forEach(col => {
         col.style.cursor = '';
@@ -78932,26 +78942,61 @@ class Rte {
 
       const command = item.getAttribute('data-block'); //h1, h2, h3, h4, p, pre  
 
+      /*
       let block = this.builder.doc.queryCommandValue('FormatBlock');
       block = block.toLowerCase();
-
       if (block === 'pre') {
-        let elm = dom.textSelection();
+          let elm = dom.textSelection();
+          if(elm) {
+              let pre = elm.closest('pre');
+              if(pre) {
+                  let newnode = pre.cloneNode(true);
+                  let s = newnode.outerHTML.replace('<pre', '<' + command);
+                  s = s.replace('</pre>', '</' + command + '>');
+                  pre.outerHTML = s;
+              }
+              pre.focus();
+          }
+      } else {
+          this.builder.doc.execCommand('formatBlock', false, '<' + command + '>'); //Needs contenteditable.         
+      }
+      */
 
-        if (elm) {
-          let pre = elm.closest('pre');
+      const selection = dom.getSelection();
+      if (!selection) return;
+      const anchorNode = selection.anchorNode;
+      let container;
+
+      if (anchorNode) {
+        container = anchorNode.nodeType !== Node.TEXT_NODE && anchorNode.nodeType !== Node.COMMENT_NODE ? anchorNode : anchorNode.parentElement;
+      }
+
+      if (!container) return;
+      let element = container.closest('h1') || container.closest('h2') || container.closest('h3') || container.closest('h4') || container.closest('h5') || container.closest('h6') || container.closest('pre') || container.closest('p');
+
+      if (element) {
+        // const tagName = element.tagName.toLowerCase();
+        element.setAttribute('data-replacetagname', '1');
+        const newElement = document.createElement(command); // Copy the attributes
+
+        for (var i = 0, l = element.attributes.length; i < l; ++i) {
+          var nodeName = element.attributes.item(i).nodeName;
+          var nodeValue = element.attributes.item(i).nodeValue;
+          newElement.setAttribute(nodeName, nodeValue);
+        } // move all elements in the other container.
 
-          if (pre) {
-            let newnode = pre.cloneNode(true);
-            let s = newnode.outerHTML.replace('<pre', '<' + command);
-            s = s.replace('</pre>', '</' + command + '>');
-            pre.outerHTML = s;
-          }
 
-          pre.focus();
+        while (element.firstChild) {
+          newElement.appendChild(element.firstChild);
+        }
+
+        element.parentNode.replaceChild(newElement, element);
+        const result = document.querySelector('[data-replacetagname="1"]');
+
+        if (result) {
+          result.removeAttribute('data-replacetagname');
+          dom.selectElementContents(result);
         }
-      } else {
-        this.builder.doc.execCommand('formatBlock', false, '<' + command + '>'); //Needs contenteditable.         
       } //save selection
 
 
@@ -80591,7 +80636,7 @@ class Rte {
             for (let i = 0; i < Object.keys(classes).length; i++) {
               let className = Object.values(classes)[i];
 
-              if (dom.hasClass(container, className)) {
+              if (container.closest(`.${className}`)) {
                 if (num === '+') {
                   if (i + 1 === Object.keys(classes).length) return;
                   newClassName = Object.values(classes)[i + 1];