@innovastudio/contentbuilder 1.3.9 → 1.3.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.3.9",
+  "version": "1.3.11",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.css

@@ -807,10 +807,6 @@ button:focus {
 .is-ui .is-rte-pop button:hover {
   background: whitesmoke;
 }
-#_cbhtml .is-rte-pop button:focus,
-.is-ui .is-rte-pop button:focus {
-  outline: none;
-}
 #_cbhtml .is-rte-pop .is-label,
 .is-ui .is-rte-pop .is-label {
   font-size: 9px;
@@ -1035,7 +1031,6 @@ button:focus {
 }
 #_cbhtml .is-rte-pop.rte-color-picker button:focus,
 .is-ui .is-rte-pop.rte-color-picker button:focus {
-  outline: #3e93f7 2px solid;
   outline-offset: -2px;
 }
 #_cbhtml .is-rte-pop.rte-color-picker input[type=text]:focus,
@@ -3068,7 +3063,6 @@ button:focus {
 #_cbhtml .is-btn:focus,
 .is-ui button:focus,
 .is-ui .is-btn:focus {
-  outline: #3e93f7 2px solid;
   outline-offset: 0;
 }
 #_cbhtml button.fullwidth,
@@ -3179,7 +3173,6 @@ button:focus {
 }
 #_cbhtml select:focus,
 .is-ui select:focus {
-  outline: #3e93f7 2px solid;
   outline-offset: 0;
   box-shadow: none;
 }
@@ -3992,7 +3985,6 @@ button:focus {
 }
 #_cbhtml .pickcolor button:focus,
 .is-ui .pickcolor button:focus {
-  outline: #3e93f7 2px solid;
   outline-offset: -2px;
 }
 #_cbhtml .pickcolor input[type=text]:focus,

package/public/contentbuilder/contentbuilder.esm.js

@@ -14994,9 +14994,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 = '';
@@ -66271,26 +66274,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
 
 
@@ -67930,7 +67968,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];