@innovastudio/contentbuilder 1.0.56 → 1.0.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbuilder",
-  "version": "1.0.56",
+  "version": "1.0.60",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.css

@@ -3681,13 +3681,15 @@ button:focus {
   fill: #fff;
 }
 .is-tool.is-row-tool .row-handle {
-  line-height: 25px;
+  display: flex;
+  height: 25px;
+  justify-content: center;
+  align-items: center;
   background: #169af7;
 }
 .is-tool.is-row-tool .row-handle svg {
   width: 13px;
   height: 13px;
-  margin-top: -2px;
 }
 .is-tool.is-row-tool .row-grideditor {
   background: rgba(216, 200, 6, 0.9);
@@ -3723,13 +3725,15 @@ button:focus {
   fill: #000;
 }
 .is-builder[gray] .is-tool.is-row-tool .row-handle {
-  line-height: 27px;
+  display: flex;
+  height: 27px;
+  justify-content: center;
+  align-items: center;
   background: transparent;
 }
 .is-builder[gray] .is-tool.is-row-tool .row-handle svg {
   width: 11px;
   height: 11px;
-  margin-top: -3px;
 }
 .is-builder[gray] .is-tool.is-row-tool .row-grideditor {
   background: transparent;

package/public/contentbuilder/contentbuilder.esm.js

@@ -41426,6 +41426,8 @@ class Module {
         var index = 1;
         const builders = module.querySelectorAll('[data-subblock]');
         Array.prototype.forEach.call(builders, builder => {
+          // Glide Slider Support
+          if (dom$t.hasClass(builder.parentNode, 'glide__slide--clone')) return;
           let builderhtml = builder.innerHTML;
           module.setAttribute('data-html-' + index, encodeURIComponent(builderhtml));
           index++;
@@ -52293,12 +52295,6 @@ class Preferences {
 
 }
 
-/*
-LATER:
-- Get/show current font size, line height & letter spacing
-- Click toggle button shows gray highlight
-- Image di luar domain gak bisa di-edit (kasih warning)
-*/
 const dom$5 = new Dom();
 
 class Rte {
@@ -52511,18 +52507,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>
@@ -54160,17 +54156,58 @@ 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();
 
 
-        this.builder.uo.saveForUndo();
-        let currentLineHeight = Number(window.getComputedStyle(elm).getPropertyValue('line-height').match(/\d+/)[0]);
+        this.builder.uo.saveForUndo(); // let currentLineHeight = Number(window.getComputedStyle(elm).getPropertyValue('line-height').match(/\d+/)[0]);
+
+        let isInPx = false;
+        let currentLineHeight = elm.style.lineHeight;
+
+        if (currentLineHeight) {
+          if (currentLineHeight.indexOf('px') === -1) {
+            currentLineHeight = parseFloat(currentLineHeight);
+          } else {
+            isInPx = true;
+          }
+        } else {
+          isInPx = true;
+        }
+
+        if (isInPx) {
+          let fontSize = Number(window.getComputedStyle(elm).getPropertyValue('font-size').match(/\d+/)[0]);
+          currentLineHeight = Number(window.getComputedStyle(elm).getPropertyValue('line-height').match(/\d+/)[0]);
+
+          if (fontSize > currentLineHeight) {
+            currentLineHeight = fontSize / currentLineHeight;
+          } else if (fontSize < currentLineHeight) {
+            currentLineHeight = currentLineHeight / fontSize;
+          } else {
+            currentLineHeight = 1;
+          }
+        }
+
         let lineheight;
 
         if (num === '+') {
-          lineheight = currentLineHeight + 1 + 'px';
+          lineheight = currentLineHeight + 0.1;
         } else if (num === '-') {
-          lineheight = currentLineHeight - 1 + 'px';
+          lineheight = currentLineHeight - 0.1;
+          if (lineheight < 0.2) lineheight = 0.2; // prevent very small number
         } else if (num === '') {
           lineheight = '';
         } else {
@@ -54181,7 +54218,10 @@ class Rte {
 
 
         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();