@innovastudio/contentbuilder 1.0.58 → 1.0.62

package/public/contentbuilder/contentbuilder.esm.js

@@ -2396,6 +2396,7 @@ class Util {
                             on = true;
                         }
                     }
+                    /*
                     if(on) {
                         parent._cb.clearFont();
                     } else {
@@ -2406,6 +2407,13 @@ class Util {
                         //parent._cb.applyFont(fontfamily, fontstyle, provider);
                         parent._cb.setFont(fontfamily, fontstyle, fontdisplay, provider);
                     }
+                    */
+                    var provider = elm.getAttribute('data-provider');
+                    var fontfamily = elm.getAttribute('data-font-family');
+                    var fontstyle = elm.getAttribute('data-font-style');
+                    var fontdisplay = elm.getAttribute('data-font-display');
+                    //parent._cb.applyFont(fontfamily, fontstyle, provider);
+                    parent._cb.setFont(fontfamily, fontstyle, fontdisplay, provider);
 
                 });
             }
@@ -2597,6 +2605,7 @@ class Util {
                             on = true;
                         }
                     }
+                    /*
                     if(on) {
                         parent._cb.clearFont();
                     } else {
@@ -2607,6 +2616,13 @@ class Util {
                         //parent._cb.applyFont(fontfamily, fontstyle, provider);
                         parent._cb.setFont(fontfamily, fontstyle, fontdisplay, provider);
                     }
+                    */
+                    var provider = elm.getAttribute('data-provider');
+                    var fontfamily = elm.getAttribute('data-font-family');
+                    var fontstyle = elm.getAttribute('data-font-style');
+                    var fontdisplay = elm.getAttribute('data-font-display');
+                    //parent._cb.applyFont(fontfamily, fontstyle, provider);
+                    parent._cb.setFont(fontfamily, fontstyle, fontdisplay, provider);
 
                 });
             }
@@ -2716,6 +2732,16 @@ class Dom {
     return children;
   }
 
+  getElementOffset(el) {
+    const rect = el.getBoundingClientRect();
+    return {
+      top: rect.top + window.pageYOffset,
+      left: rect.left + window.pageXOffset,
+      width: rect.width,
+      height: rect.height
+    };
+  }
+
   parentsHasClass(element, classname) {
     while (element) {
       // if(classname==='is-side') console.log(element.nodeName); // NOTE: click on svg can still returns undefined in IE11
@@ -2925,40 +2951,45 @@ class Dom {
   }
 
   textSelection() {
+    /*
     try {
-      var elm;
-      var curr = window.getSelection().getRangeAt(0).commonAncestorContainer;
-
-      if (curr.nodeType === 3) {
-        // text node
-        elm = curr.parentNode;
-
-        if (this.parentsHasClass(elm, 'is-builder')) {
-          return elm;
+        var elm;
+        var curr = window.getSelection().getRangeAt(0).commonAncestorContainer;
+        if (curr.nodeType === 3) {  // text node
+            elm = curr.parentNode;
+            if(this.parentsHasClass(elm, 'is-builder')) {
+                return elm;
+            }
+            else {
+                return false;  
+            } 
         } else {
-          return false;
-        }
-      } else {
-        elm = curr;
-        var nodeName = elm.nodeName.toLowerCase();
-
-        if (nodeName === 'i' && elm.innerHTML === '') {
-          //icon
-          if (this.parentsHasClass(elm, 'is-builder')) {
-            return elm;
-          }
-        } // Check if a block (because when placing cursor using arrow keys on empty block, nodeType=1 not 3)
-
-
-        if (nodeName === 'p' || nodeName === 'h1' || nodeName === 'h2' || nodeName === 'h3' || nodeName === 'h4' || nodeName === 'h5' || nodeName === 'h6' || nodeName === 'li' || nodeName === 'pre' || nodeName === 'blockquote') {
-          return elm;
+            elm = curr;
+            var nodeName = elm.nodeName.toLowerCase();
+            if(nodeName === 'i' && elm.innerHTML === '') { //icon
+                if(this.parentsHasClass(elm, 'is-builder')) {
+                    return elm;
+                }
+            }
+            
+            // Check if a block (because when placing cursor using arrow keys on empty block, nodeType=1 not 3)
+            if(nodeName === 'p' || nodeName === 'h1' || nodeName === 'h2'
+            || nodeName === 'h3' || nodeName === 'h4' || nodeName === 'h5'
+            || nodeName === 'h6' || nodeName === 'li' || nodeName === 'pre'
+            || nodeName === 'blockquote') {
+                return elm;
+            }
+            return false;
         }
-
-        return false;
-      }
     } catch (e) {
-      return false;
+        return false;
     }
+    */
+    const selection = this.getSelection();
+    const anchorNode = selection.anchorNode;
+    if (!anchorNode) return false;
+    const container = anchorNode.nodeType !== Node.TEXT_NODE && anchorNode.nodeType !== Node.COMMENT_NODE ? anchorNode : anchorNode.parentElement;
+    return container;
   }
 
   getStyle(element, property) {
@@ -3010,7 +3041,347 @@ class Dom {
       }
     }
   } // ---
+  // execCommand replacement
+
+
+  execCommand(action, value, callback) {
+    const selection = this.getSelection();
+    if (!selection) return;
+    const anchorNode = selection.anchorNode;
+
+    if (anchorNode) {
+      const container = anchorNode.nodeType !== Node.TEXT_NODE && anchorNode.nodeType !== Node.COMMENT_NODE ? anchorNode : anchorNode.parentElement;
+      const sameSelection = container && container.innerText === selection.toString();
+      let newElement;
+
+      if (sameSelection || selection.toString().trim() === '') {
+        newElement = this.updateSelection(action, value, container);
+      } else {
+        newElement = this.replaceSelection(action, value, selection, container);
+      }
+
+      if (callback) callback(true, newElement);
+    } else {
+      if (callback) callback(false);
+    }
+  }
+
+  updateSelection(action, value, container) {
+    // container.style[action] = value; //APPLY => Use getStyleValue to check if toggle is needed.
+    container.style[action] = this.getStyleValue(container, action, value); // Optional, better if used: check if the style is the same as its parent. If so, clear it.
+
+    this.checkStyleIfSameAsParent(container, action);
+    this.cleanChildren(action, container); // this.cleanUnusedSpan(container);
+
+    return container;
+  }
+
+  replaceSelection(action, value, selection, container) {
+    const range = selection.getRangeAt(0);
+    const fragment = range.extractContents();
+    const span = this.createSpan(container, action, value);
+    span.appendChild(fragment);
+    this.cleanChildren(action, span); // this.cleanUnusedSpan(span);
+
+    range.insertNode(span);
+    selection.selectAllChildren(span); // Optional, better if used: check if the style is the same as its parent. If so, clear it.
+
+    this.checkStyleIfSameAsParent(span, action);
+    return span;
+  }
+
+  checkStyleIfSameAsParent(element, action) {
+    if (element.parentNode) {
+      if (element.parentNode.style[action] === element.style[action] || window.getComputedStyle(element.parentNode, null).getPropertyValue(action) === element.style[action]) {
+        element.style[action] = '';
+
+        if (element.getAttribute('style') === '' || element.style === null) {
+          element.removeAttribute('style');
+        } // let unused = ( element.attributes.length === 0 || (element.attributes.length === 1 && element.hasAttribute('data-keep')));
+        // if (element.nodeName.toLowerCase() === 'span' && unused) {
+        //     const text = document.createTextNode(element.textContent);
+        //     element.parentElement.replaceChild(text, element);
+        // }
+
+      }
+    }
+  }
+
+  createSpan(container, action, value) {
+    const span = document.createElement('span'); // span.style[action] = value; //APPLY => Use getStyleValue to check if toggle is needed.
+
+    span.style[action] = this.getStyleValue(container, action, value);
+    return span;
+  }
+
+  findParentStyle(node, action) {
+    if (node.nodeName.toUpperCase() === 'HTML' || node.nodeName.toUpperCase() === 'BODY') {
+      return null;
+    }
+
+    if (!node.parentNode) {
+      return null;
+    }
+
+    const hasStyle = node.style[action] !== null && node.style[action] !== undefined && node.style[action] !== '';
+
+    if (hasStyle) {
+      return node;
+    }
+
+    this.findParentStyle(node.parentNode, action);
+  }
+
+  getStyleValue(container, action, value) {
+    if (action === 'font-weight' || action === 'font-style' || action === 'text-decoration' || action === 'text-transform') {
+      // Toggle
+      // let currentValue = window.getComputedStyle(container, null).getPropertyValue(action);
+      let parent = this.findParentStyle(container, action);
+      let currentValue;
+
+      if (parent) {
+        currentValue = parent.style[action];
+      }
+
+      if (value === currentValue) {
+        //toggle here
+        // value = 'initial'; // the problem with initial is that it is always refer to font-weight: 400 (won;t work for custom 300 for normal paragraph)
+        // so we'll do the test first, to find the actuat initial value
+        container.style[action] = ''; // test
 
+        let initialValue = window.getComputedStyle(container, null).getPropertyValue(action); // get the actual initial value
+        // console.log('initial:' +initialValue);
+
+        container.style[action] = currentValue; //return back from test
+
+        value = initialValue;
+      }
+    }
+
+    return value;
+  }
+
+  getSelection() {
+    if (window && window.getSelection) {
+      return window.getSelection();
+    } else if (document && document.getSelection) {
+      return document.getSelection();
+    } else if (document && document.selection) {
+      return document.selection.createRange().text;
+    }
+
+    return null;
+  }
+
+  cleanChildren(action, span) {
+    if (!span.hasChildNodes()) {
+      return;
+    } // Direct children with same style rule
+
+
+    const children = Array.from(span.children).filter(element => {
+      return element.style[action] !== undefined && element.style[action.style] !== '';
+    });
+
+    if (children && children.length > 0) {
+      children.forEach(element => {
+        element.style[action] = '';
+
+        if (element.getAttribute('style') === '' || element.style === null) {
+          element.removeAttribute('style');
+        }
+      });
+    } // Deeper childrens
+
+
+    const cleanChildrenChildren = Array.from(span.children).map(element => {
+      return this.cleanChildren(action, element);
+    });
+
+    if (!cleanChildrenChildren || cleanChildrenChildren.length <= 0) {
+      return;
+    }
+  } // Clean HTML stuff
+
+
+  removeEmptyStyle(area) {
+    if (!area.hasChildNodes()) {
+      return;
+    }
+
+    const children = Array.from(area.children).filter(element => {
+      return element.getAttribute('style');
+    });
+
+    if (children && children.length > 0) {
+      children.forEach(element => {
+        if (element.getAttribute('style').trim() === '' || element.style === null) {
+          element.removeAttribute('style');
+        }
+      });
+    } // Deeper childrens
+
+
+    const removeEmptyStyleChildren = Array.from(area.children).map(element => {
+      return this.removeEmptyStyle(element);
+    });
+
+    if (!removeEmptyStyleChildren || removeEmptyStyleChildren.length <= 0) {
+      return;
+    }
+  }
+
+  cleanEmptySpans(area) {
+    let spans = area.querySelectorAll('span');
+    const filter = Array.prototype.filter;
+    let children = filter.call(spans, element => {
+      return element.attributes.length === 0;
+    }); // Remove empty spans
+
+    if (children && children.length > 0) {
+      children.forEach(element => {
+        element.outerHTML = element.innerHTML;
+      });
+    } // Remove spans which have empty content
+
+
+    spans = area.querySelectorAll('span');
+    filter.call(spans, element => {
+      if (element.innerHTML === '') {
+        element.parentNode.removeChild(element);
+      }
+    }); // Recheck
+
+    spans = area.querySelectorAll('span');
+    children = filter.call(spans, element => {
+      return element.attributes.length === 0;
+    });
+
+    if (children && children.length > 0) {
+      this.cleanEmptySpans(area);
+    } else {
+      return;
+    }
+  } // Font Size stuff
+
+
+  cleanClassSize(span, className) {
+    if (!span.hasChildNodes()) {
+      return;
+    } // Direct children with same style rule
+
+
+    const children = Array.from(span.children).filter(element => {
+      return this.hasClass(element, className);
+    });
+
+    if (children && children.length > 0) {
+      children.forEach(element => {
+        this.removeClass(element, className);
+      });
+    } // Deeper childrens
+
+
+    const cleanClassSizeChildren = Array.from(span.children).map(element => {
+      return this.cleanClassSize(element, className);
+    });
+
+    if (!cleanClassSizeChildren || cleanClassSizeChildren.length <= 0) {
+      return;
+    }
+  } // Remove Format stuff
+
+
+  removeFormat() {
+    const selection = this.getSelection();
+    if (!selection) return;
+    const anchorNode = selection.anchorNode;
+    if (!anchorNode) return;
+    const container = anchorNode.nodeType !== Node.TEXT_NODE && anchorNode.nodeType !== Node.COMMENT_NODE ? anchorNode : anchorNode.parentElement;
+    const sameSelection = container && container.innerText === selection.toString();
+
+    if (sameSelection || selection.toString().trim() === '') {
+      this.cleanElement(container);
+    } else {
+      this.cleanSelection(selection);
+    }
+  }
+
+  cleanElement(elm) {
+    elm.style.fontWeight = '';
+    elm.style.fontStyle = '';
+    elm.style.textDecoration = '';
+    elm.style.textTransform = '';
+    elm.style.fontFamily = '';
+    elm.style.fontSize = '';
+    elm.style.color = '';
+    elm.style.backgroundColor = '';
+    elm.classList.forEach(item => {
+      if (item.indexOf('size-') !== -1) {
+        this.removeClass(elm, item);
+      }
+    });
+    let elms = elm.querySelectorAll('*');
+    elms.forEach(elm => {
+      elm.style.fontWeight = '';
+      elm.style.fontStyle = '';
+      elm.style.textDecoration = '';
+      elm.style.textTransform = '';
+      elm.style.fontFamily = '';
+      elm.style.fontSize = '';
+      elm.style.color = '';
+      elm.style.backgroundColor = '';
+      elm.classList.forEach(item => {
+        if (item.indexOf('size-') !== -1) {
+          this.removeClass(elm, item);
+        }
+      });
+    });
+    this.cleanUnusedSpan(elm); // causes lost selection
+  }
+
+  cleanSelection(selection) {
+    const range = selection.getRangeAt(0);
+    const fragment = range.extractContents();
+    const span = document.createElement('span');
+    span.appendChild(fragment);
+    range.insertNode(span);
+    selection.selectAllChildren(span);
+    this.cleanElement(span);
+  }
+
+  cleanUnusedSpan(span) {
+    if (!span.hasChildNodes()) {
+      return;
+    } // Direct children with no style
+
+
+    const children = Array.from(span.children).filter(element => {
+      if (element.getAttribute('style') === '' || element.style === null) {
+        element.removeAttribute('style');
+      }
+
+      let unused = element.attributes.length === 0 || element.attributes.length === 1 && element.hasAttribute('data-keep');
+      return element.nodeName.toLowerCase() === 'span' && unused;
+    });
+
+    if (children && children.length > 0) {
+      children.forEach(element => {
+        const text = document.createTextNode(element.textContent);
+        element.parentElement.replaceChild(text, element);
+      });
+      return;
+    } // Deeper childrens
+
+
+    const cleanUnusedSpanChildren = Array.from(span.children).map(element => {
+      return this.cleanUnusedSpan(element);
+    });
+
+    if (!cleanUnusedSpanChildren || cleanUnusedSpanChildren.length <= 0) {
+      return;
+    }
+  }
 
 }
 
@@ -8702,6 +9073,8 @@ class HtmlUtil {
     dom$E.removeAttributes(elms, 'draggable');
     elms = tmp.querySelectorAll('[data-animated]');
     dom$E.removeAttributes(elms, 'data-animated');
+    elms = tmp.querySelectorAll('[data-saveforundo]');
+    dom$E.removeAttributes(elms, 'data-saveforundo');
     elms = tmp.querySelectorAll('[hidesnippetaddtool]');
     dom$E.removeAttributes(elms, 'hidesnippetaddtool');
     elms = tmp.querySelectorAll('[gray]');
@@ -8747,6 +9120,8 @@ class HtmlUtil {
     Array.prototype.forEach.call(emptystyles, emptystyle => {
       emptystyle.removeAttribute('style');
     });
+    dom$E.removeEmptyStyle(tmp);
+    dom$E.cleanEmptySpans(tmp);
     elms = tmp.querySelectorAll('[data-keep]');
     dom$E.removeAttributes(elms, 'data-keep'); //Cleanup button <span contenteditable="false"><a contenteditable="true">button</a></span>
 
@@ -44940,6 +45315,10 @@ class ColumnTool {
                                 <button title="${util.out('Clear')}" class="input-cell-textcolor" data-command=""><svg class="is-icon-flex" style="flex:none;width:18px;height:18px;margin-top: 2px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
                             </div>
 
+                            <div style="padding-top:20px;">
+                                <label class="label-cell-grayscale label-checkbox" for="chkCellGrayscale"><input id="chkCellGrayscale" class="chk-cell-grayscale" type="checkbox" /> ${util.out('Grayscale')}</label>
+                            </div>
+                            
                             <div style="display:none;padding-top:20px;padding-bottom:3px;">${util.out('Enlarge Row')}:</div>
                             <div style="display: none;">
                                 <button title="${util.out('Normal')}" class="input-row-enlarge" data-command="0" style="margin-right:1px;">${util.out('Normal')}</button>
@@ -45261,6 +45640,7 @@ class ColumnTool {
 
         this.showHideLockIndicator(cell);
         this.builder.element.applyBehavior(cell);
+        this.columnMore.style.display = '';
         e.preventDefault();
       }); // Open Column Settings
 
@@ -45603,6 +45983,22 @@ class ColumnTool {
           this.builder.opts.onChange();
         });
       });
+      const chkCellGrayscale = cellSettings.querySelector('.chk-cell-grayscale');
+      dom$l.addEventListener(chkCellGrayscale, 'click', () => {
+        this.builder.uo.saveForUndo();
+        let cell = util.cellSelected();
+
+        if (chkCellGrayscale.checked) {
+          cell.style.filter = 'grayscale(1)';
+        } else {
+          if (cell.style.filter) {
+            cell.style.filter = cell.style.filter.replace('grayscale(1)', '');
+          }
+        } //Trigger Change event
+
+
+        this.builder.opts.onChange();
+      });
       elms = cellSettings.querySelectorAll('.input-cell-height');
       Array.prototype.forEach.call(elms, elm => {
         dom$l.addEventListener(elm, 'click', () => {
@@ -45954,6 +46350,15 @@ class ColumnTool {
       dom$l.addClass(btn, 'on');
     }
 
+    const chkCellGrayscale = this.cellSettings.querySelector('.chk-cell-grayscale');
+    chkCellGrayscale.checked = false;
+
+    if (cell.style.filter) {
+      if (cell.style.filter.indexOf('grayscale') !== -1) {
+        chkCellGrayscale.checked = true;
+      }
+    }
+
     elms = this.cellSettings.querySelectorAll('.input-cell-height');
     Array.prototype.forEach.call(elms, elm => {
       dom$l.removeClass(elm, 'on');
@@ -52507,18 +52912,18 @@ class Rte {
                         <button title="18px" data-value="18">18</button>
                         <button title="21px" data-value="21">21</button>
                         <button title="24px" data-value="24">24</button>
-                        <button title="28px" data-value="28">28</button>
+                        <!--<button title="28px" data-value="28">28</button>-->
                         <button title="32px" data-value="32">32</button>
-                        <!--<button title="35px" data-value="35">35</button>-->
-                        <button title="38px" data-value="38">38</button>
-                        <!--<button title="42px" data-value="42">42</button>-->
+                        <!--<button title="38px" data-value="38">38</button>-->
                         <button title="48px" data-value="48">48</button>
-                        <!--<button title="54px" data-value="54">54</button>-->
-                        <button title="60px" data-value="60">60</button>
-                        <!--<button title="68px" data-value="68">68</button>-->
+                        <!--<button title="60px" data-value="60">60</button>-->
                         <button title="76px" data-value="76">76</button>
-                        <!--<button title="84px" data-value="84">84</button>-->
                         <button title="96px" data-value="96">96</button>
+
+                        <button title="120px" data-value="120">120</button>
+                        <button title="160px" data-value="160">160</button>
+                        <button title="200px" data-value="200">200</button>
+
                         <button title="${util.out('Decrease')}" data-value="-" style="font-size:13px">-</button>
                         <button title="${util.out('Increase')}" data-value="+" style="font-size:13px">+</button>
                         <button title="${util.out('Clear')}" data-value=""><svg class="is-icon-flex" style="width:18px;height:18px;margin-top: 2px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
@@ -54156,6 +54561,20 @@ class Rte {
 
         if (this.builder.activeIcon) {
           elm = this.builder.activeIcon;
+        } // Find block element (line-height only works on block element)
+
+
+        let element = elm;
+
+        while (element) {
+          if (element.tagName === 'BODY' || element.tagName === 'HTML') return false;
+
+          if (window.getComputedStyle(element).getPropertyValue('display') !== 'inline') {
+            elm = element;
+            break;
+          }
+
+          element = element.parentNode;
         } // var text = dom.getSelected();
 
 
@@ -54190,22 +54609,24 @@ class Rte {
         let lineheight;
 
         if (num === '+') {
-          lineheight = currentLineHeight + 0.2;
+          lineheight = currentLineHeight + 0.1;
         } else if (num === '-') {
-          lineheight = currentLineHeight - 0.2;
+          lineheight = currentLineHeight - 0.1;
+          if (lineheight < 0.2) lineheight = 0.2; // prevent very small number
         } else if (num === '') {
           lineheight = '';
         } else {
           lineheight = num;
         }
-
-        if (lineheight < 0.2) lineheight = 0.2; // prevent very small number
-
         /** mod by Jack */
         //elm.style.lineHeight = lineheight;
 
+
         dom$5.doFunction(elm, function (theEl) {
-          theEl.style.lineHeight = lineheight;
+          // apply to block element only
+          if (window.getComputedStyle(theEl).getPropertyValue('display') !== 'inline') {
+            theEl.style.lineHeight = lineheight;
+          }
         }, true); //save selection
 
         util.saveSelection();
@@ -57316,7 +57737,8 @@ class ContentBuilder {
           ['#ed2828','dark','contentbuilder/themes/dark-red.css'],
       ],
       */
-      colHeight: [300, 350, 400, 450, 500, 550, 600, 650, 700]
+      colHeight: [300, 350, 400, 450, 500, 550, 600, 650, 700] // maxColumns: 6,
+
     }; // obj.preserveSelection = true; (can be set programmatically) to prevent click that clears selection on external custom modal.
 
     this.opts = Object.assign(this, defaults, opts);
@@ -57411,7 +57833,7 @@ class ContentBuilder {
           // DEFAULT: Built-in simple css grid
           this.opts.row = 'row clearfix';
           this.opts.cols = ['column sixth', 'column fifth', 'column fourth', 'column third', 'column half', 'column two-third', 'column two-fourth', 'column two-fifth', 'column two-sixth', 'column full'];
-          this.opts.colequal = [['column fifth', 'column fifth', 'column fifth', 'column fifth', 'column fifth'], ['column fourth', 'column fourth', 'column fourth', 'column fourth'], ['column third', 'column third', 'column third'], ['column half', 'column half']];
+          this.opts.colequal = [['column sixth', 'column sixth', 'column sixth', 'column sixth', 'column sixth', 'column sixth'], ['column fifth', 'column fifth', 'column fifth', 'column fifth', 'column fifth'], ['column fourth', 'column fourth', 'column fourth', 'column fourth'], ['column third', 'column third', 'column third'], ['column half', 'column half']];
           this.opts.colsizes = [//needed for columns in which the size increment is not constant.
           [//increment for 3 columns
           ['column third', 'column third', 'column third'], ['column half', 'column fourth', 'column fourth']], [//increment for 2 columns
@@ -59128,11 +59550,13 @@ class ContentBuilder {
       } else if (url.toLowerCase().indexOf('youtube.com') !== -1 || url.toLowerCase().indexOf('vimeo.com') !== -1) {
         this.lightbox.openExternalVideo(url, 'dark', color);
       } else {
-        // Will go to the link
-        const answer = window.confirm(this.util.out('Do you really want to leave?')); // cancel the navigation and stay on the same page
+        if (url.indexOf('#') === 0) ; else {
+          // Will go to the link
+          const answer = window.confirm(this.util.out('Do you really want to leave?')); // cancel the navigation and stay on the same page
 
-        if (!answer) {
-          return false;
+          if (!answer) {
+            return false;
+          }
         }
 
         window.location.href = url;
@@ -59251,20 +59675,31 @@ class ContentBuilder {
               return false;
             } else {
               // Will go to the link
-              const answer = window.confirm(this.util.out('Do you really want to leave?')); // cancel the navigation and stay on the same page
+              if (url.indexOf('#') === 0) ; else {
+                const answer = window.confirm(this.util.out('Do you really want to leave?')); // cancel the navigation and stay on the same page
 
-              if (!answer) {
-                e.preventDefault();
-                return false;
+                if (!answer) {
+                  e.preventDefault();
+                  return false;
+                }
               }
             }
           } else {
-            const answer = window.confirm(this.util.out('Do you really want to leave?')); // cancel the navigation and stay on the same page
+            let url = link.getAttribute('href');
 
-            if (!answer) {
+            if (!url) {
               e.preventDefault();
               return false;
             }
+
+            if (url.indexOf('#') === 0) ; else {
+              const answer = window.confirm(this.util.out('Do you really want to leave?')); // cancel the navigation and stay on the same page
+
+              if (!answer) {
+                e.preventDefault();
+                return false;
+              }
+            }
           }
         }
       } // e.preventDefault();
@@ -59288,7 +59723,30 @@ class ContentBuilder {
     } // Show Lock Indicator
 
 
-    this.colTool.showHideLockIndicator(col);
+    this.colTool.showHideLockIndicator(col); // Check if last row, make sure the Row Add Tool visible
+
+    const tool = row.querySelector('.is-rowadd-tool');
+    const tollAddButton = tool.querySelector('button');
+    tollAddButton.style.marginTop = '';
+    const children = Array.from(row.parentNode.children).filter(element => {
+      return element.nodeName.toLowerCase() === 'div';
+    });
+
+    if (children && children.length > 0) {
+      let lastChild = children[children.length - 1];
+
+      if (row === lastChild) {
+        const section = row.parentNode.parentNode;
+        const sectionOffset = dom.getElementOffset(section);
+        let h1 = sectionOffset.top + sectionOffset.height;
+        const rowOffset = dom.getElementOffset(row);
+        let h2 = rowOffset.top + rowOffset.height;
+
+        if (h1 - h2 < 19) {
+          tollAddButton.style.marginTop = '-14px';
+        }
+      }
+    }
   }
 
   handleCellKeypress(e) {