@innovastudio/contentbuilder 1.4.128 → 1.4.130

package/package.json

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

package/public/contentbuilder/contentbuilder.esm.js

@@ -1158,18 +1158,20 @@ class Util {
     this.builder.activeIcon = null;
 
     // RTE
-    let rteTool = builderStuff.querySelector('.is-rte-tool');
-    // rteTool.style.display = 'none';
-    let rteButtons = rteTool.querySelectorAll('button');
-    Array.prototype.forEach.call(rteButtons, rteButton => {
-      dom.removeClass(rteButton, 'on');
-    });
-    let elementRteTool = builderStuff.querySelector('.is-elementrte-tool');
-    // rteTool.style.display = 'none';
-    rteButtons = elementRteTool.querySelectorAll('button');
-    Array.prototype.forEach.call(rteButtons, rteButton => {
-      dom.removeClass(rteButton, 'on');
-    });
+    if (!this.builder.controlPanel) {
+      let rteTool = builderStuff.querySelector('.is-rte-tool');
+      // rteTool.style.display = 'none';
+      let rteButtons = rteTool.querySelectorAll('button');
+      Array.prototype.forEach.call(rteButtons, rteButton => {
+        dom.removeClass(rteButton, 'on');
+      });
+      let elementRteTool = builderStuff.querySelector('.is-elementrte-tool');
+      // rteTool.style.display = 'none';
+      rteButtons = elementRteTool.querySelectorAll('button');
+      Array.prototype.forEach.call(rteButtons, rteButton => {
+        dom.removeClass(rteButton, 'on');
+      });
+    }
     let pops = builderStuff.querySelectorAll('.is-pop');
     Array.prototype.forEach.call(pops, pop => {
       pop.style.display = '';
@@ -1247,7 +1249,7 @@ class Util {
     this.builder.activeIcon = null;
     this.builder.inspectedElement = null;
     this.builder.activeElement = null;
-    if (all) {
+    if (all && !this.builder.controlPanel) {
       // RTE
       let rtetool = builderStuff.querySelector('.is-rte-tool');
       if (rtetool) rtetool.style.display = 'none';
@@ -1378,17 +1380,19 @@ class Util {
     });
 
     // RTE
-    if (this.builder.toolbarDisplay === 'auto') {
-      let rtetool = builderStuff.querySelector('.is-rte-tool');
-      if (rtetool) rtetool.style.display = 'none';
-      let elementRtetool = builderStuff.querySelector('.is-elementrte-tool');
-      if (elementRtetool) elementRtetool.style.display = 'none';
+    if (!this.builder.controlPanel) {
+      if (this.builder.toolbarDisplay === 'auto') {
+        let rtetool = builderStuff.querySelector('.is-rte-tool');
+        if (rtetool) rtetool.style.display = 'none';
+        let elementRtetool = builderStuff.querySelector('.is-elementrte-tool');
+        if (elementRtetool) elementRtetool.style.display = 'none';
 
-      // Click ok on code view should hide these as well
-      let rtetoolmore = builderStuff.querySelector('.rte-more-options');
-      if (rtetoolmore) rtetoolmore.style.display = '';
-      let elementRtetoolmore = builderStuff.querySelector('.elementrte-more-options');
-      if (elementRtetoolmore) elementRtetoolmore.style.display = '';
+        // Click ok on code view should hide these as well
+        let rtetoolmore = builderStuff.querySelector('.rte-more-options');
+        if (rtetoolmore) rtetoolmore.style.display = '';
+        let elementRtetoolmore = builderStuff.querySelector('.elementrte-more-options');
+        if (elementRtetoolmore) elementRtetoolmore.style.display = '';
+      }
     }
 
     // Element
@@ -1396,13 +1400,15 @@ class Util {
     Array.prototype.forEach.call(elms, elm => {
       dom.removeClass(elm, 'elm-active');
     });
-    let rtepops = builderStuff.querySelectorAll('.is-rte-pop');
-    Array.prototype.forEach.call(rtepops, rtepop => {
-      rtepop.style.display = '';
-      dom.removeClass(rtepop, 'active');
-      dom.removeClass(rtepop, 'deactive');
-      // dom.addClass(rtepop, 'deactive');
-    });
+    if (!this.builder.controlPanel) {
+      let rtepops = builderStuff.querySelectorAll('.is-rte-pop');
+      Array.prototype.forEach.call(rtepops, rtepop => {
+        rtepop.style.display = '';
+        dom.removeClass(rtepop, 'active');
+        dom.removeClass(rtepop, 'deactive');
+        // dom.addClass(rtepop, 'deactive');
+      });
+    }
 
     let pops = builderStuff.querySelectorAll('.is-pop');
     Array.prototype.forEach.call(pops, pop => {
@@ -11844,12 +11850,45 @@ const prepareSvgIcons = builder => {
                 <path d="M5 10h11a4 4 0 1 1 0 8h-1"></path>
             </symbol>
             <symbol id="icon-publish" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-            <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
-            <path d="M9 12l2 2l4 -4"></path>
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
+                <path d="M9 12l2 2l4 -4"></path>
+            </symbol>
+
+            <symbol id="icon-align-box-top" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                <path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
+                <path d="M15 10h-7" />
+                <path d="M15 7h-7" />
+            </symbol>
+            <symbol id="icon-align-box-middle" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                <path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
+                <path d="M15 13h-7" />
+                <path d="M15 10h-7" />
+            </symbol>
+            <symbol id="icon-align-box-bottom" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
+                <path d="M15 17h-7" />
+                <path d="M15 14h-7" />
+            </symbol>
+            <symbol id="icon-align-box-stretch" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                <path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z" />
+                <path d="M15 17h-7" />
+                <path d="M15 7h-7" />
+            </symbol>
+
+            <symbol id="icon-align-box-left" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /><path d="M9 15h-2" /><path d="M13 12h-6" /><path d="M11 9h-4" />
+            </symbol>
+            <symbol id="icon-align-box-center" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 19v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /><path d="M11 15h2" /><path d="M9 12h6" /><path d="M10 9h4" />
+            </symbol>
+            <symbol id="icon-align-box-right" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 15h2" /><path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z" /><path d="M11 12h6" /><path d="M13 9h4" />
             </symbol>
 
-            
             </defs>
         </svg>`;
   builder.dom.appendHtml(builder.builderStuff, html);
@@ -13190,23 +13229,23 @@ const renderQuickAdd = builder => {
     elm = quickadd.querySelector('.add-button');
     if (elm) dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      let html = `<div>
+      let html = `<div class="flex">
             <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Read More</a>
             </div>`;
       if (builder.opts.emailMode) {
-        html = '<div><a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a></div>';
+        html = '<div class="flex"><a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a></div>';
       }
       util.addContent(html, mode);
     });
     elm = quickadd.querySelector('.add-twobutton');
     if (elm) dom.addEventListener(elm, 'click', () => {
       const mode = quickadd.getAttribute('data-mode');
-      let html = `<div>
+      let html = `<div class="flex">
                 <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Read More</a>
                 <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 border-current hover:border-current font-normal leading-14 rounded tracking-wide">Get Started</a>
             </div>`;
       if (builder.opts.emailMode) {
-        html = `<div>
+        html = `<div class="flex">
                     <a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a> &nbsp;
                     <a href="#" role="button" style="display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgba(0, 0, 0, 0); border-color: rgb(53, 53, 53); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px; color: rgb(53, 53, 53);">Get Started</a>
                 </div>`;
@@ -49141,17 +49180,26 @@ class Hyperlink {
     // Link tool
     const linkTool = this.linkTool;
     let linkDisplay = dom.getStyle(link, 'display');
-    if (linkDisplay === 'inline-block' || linkDisplay === 'flex') {
-      linkTool.querySelector('.link-duplicate').style.display = 'block';
-      linkTool.querySelector('.link-remove').style.display = 'block';
-    } else {
-      if (this.builder.activeIcon) {
+    /*
+    if(linkDisplay==='inline-block' || linkDisplay==='flex'){
         linkTool.querySelector('.link-duplicate').style.display = 'block';
         linkTool.querySelector('.link-remove').style.display = 'block';
-      } else {
-        linkTool.querySelector('.link-duplicate').style.display = 'none';
-        linkTool.querySelector('.link-remove').style.display = 'none';
-      }
+    } else {
+        if(this.builder.activeIcon) {
+            linkTool.querySelector('.link-duplicate').style.display = 'block';
+            linkTool.querySelector('.link-remove').style.display = 'block';
+        } else {
+            linkTool.querySelector('.link-duplicate').style.display = 'none';
+            linkTool.querySelector('.link-remove').style.display = 'none';
+        }
+    }
+    */
+    if (linkDisplay === 'inline' & !this.builder.activeIcon) {
+      linkTool.querySelector('.link-duplicate').style.display = 'none';
+      linkTool.querySelector('.link-remove').style.display = 'none';
+    } else {
+      linkTool.querySelector('.link-duplicate').style.display = 'block';
+      linkTool.querySelector('.link-remove').style.display = 'block';
     }
 
     // Button Stuff
@@ -76281,6 +76329,7 @@ class ContentBuilder {
       this.elmTool.repositionElementTool(true);
       this.element.image.imageTool.style.display = '';
       this.element.module.moduleTool.style.display = '';
+      this.element.hyperlink.linkTool.style.display = '';
       this.colTool.lockIndicator.style.display = '';
       return ret;
     };
@@ -76877,6 +76926,27 @@ class ContentBuilder {
           // ON KEYUP
           col.addEventListener('keyup', this.handleCellKeyup.bind(this, col));
 
+          // ON DOUBLE CLICK TO SELECT
+          let isDoubleClick = false; // Double click flag
+
+          col.addEventListener('dblclick', () => {
+            isDoubleClick = true;
+          });
+          col.addEventListener('mouseup', () => {
+            if (isDoubleClick) {
+              let selection = this.win.getSelection();
+              let selectedText = selection.toString().trim();
+              if (selectedText.length > 0) {
+                let elm = this.dom.getElm();
+                if (!this.dom.hasClass(elm.parentNode.parentNode, 'is-builder')) {
+                  this.dom.selectElementContents(elm);
+                }
+              }
+              // Reset the flag after handling the double-click
+              isDoubleClick = false;
+            }
+          });
+
           // ON FOCUS
           // col.addEventListener('focus', this.handleCellFocus.bind(this, col));