@innovastudio/contentbuilder 1.5.199 → 1.5.200

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.199",
+  "version": "1.5.200",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "types": "index.d.ts",

package/public/contentbuilder/contentbuilder.css

@@ -1,3 +1,8 @@
+:root {
+  --focus-outline-color: #3e93f7;
+  --rangeslider-thumb-color: #0e75de;
+}
+
 body {
   overflow-x: hidden !important;
 }
@@ -28,7 +33,7 @@ button:focus {
 
 a:focus-visible,
 button:focus-visible {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
   outline-offset: 2px;
 }
 
@@ -37,7 +42,7 @@ button:focus-visible {
 }
 
 .focus-outline {
-  outline: #3e93f7 2px solid !important;
+  outline: var(--focus-outline-color) 2px solid !important;
   outline-offset: 2px !important;
 }
 
@@ -464,7 +469,7 @@ button:focus-visible {
 }
 #_cbhtml .style-helper.outline-color,
 .is-ui .style-helper.outline-color {
-  background: #3e93f7;
+  background: var(--focus-outline-color);
 }
 #_cbhtml .style-helper-button-classic,
 .is-ui .style-helper-button-classic {
@@ -1292,7 +1297,7 @@ button:focus-visible {
 }
 #_cbhtml .is-rte-pop.rte-color-picker input[type=text]:focus,
 .is-ui .is-rte-pop.rte-color-picker input[type=text]:focus {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
   outline-offset: -2px;
 }
 #_cbhtml .is-rte-pop.rte-color-picker .color-default button,
@@ -2257,7 +2262,7 @@ button:focus-visible {
 }
 #_cbhtml .is-modal a:focus,
 .is-ui .is-modal a:focus {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
   outline-offset: 0;
 }
 #_cbhtml .is-modal.active,
@@ -2330,7 +2335,7 @@ button:focus-visible {
 }
 #_cbhtml .is-modal .form-upload-larger:focus-within,
 .is-ui .is-modal .form-upload-larger:focus-within {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
   outline-offset: 0;
   border-radius: 6px;
 }
@@ -3288,7 +3293,7 @@ button:focus-visible {
 }
 #_cbhtml .is-modal.insertimage .is-drop-area:focus-within,
 .is-ui .is-modal.insertimage .is-drop-area:focus-within {
-  border-color: #3e93f7;
+  border-color: var(--focus-outline-color);
 }
 #_cbhtml .is-modal.insertimage .is-drop-area.image-dropping,
 .is-ui .is-modal.insertimage .is-drop-area.image-dropping {
@@ -3924,7 +3929,7 @@ button:focus-visible {
 }
 #_cbhtml textarea:not(.monaco-mouse-cursor-text):focus,
 .is-ui textarea:not(.monaco-mouse-cursor-text):focus {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
   outline-offset: 0;
   box-shadow: none;
 }
@@ -3959,7 +3964,7 @@ button:focus-visible {
 }
 #_cbhtml select:focus,
 .is-ui select:focus {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
   outline-offset: -2px;
   box-shadow: none;
 }
@@ -3987,7 +3992,7 @@ button:focus-visible {
 #_cbhtml input[type=number]:focus,
 .is-ui input[type=text]:focus,
 .is-ui input[type=number]:focus {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
   outline-offset: -2px;
   box-shadow: none;
 }
@@ -4005,7 +4010,7 @@ button:focus-visible {
 }
 #_cbhtml input[type=radio]:focus,
 .is-ui input[type=radio]:focus {
-  outline: #3e93f7 1px solid;
+  outline: var(--focus-outline-color) 1px solid;
 }
 #_cbhtml label,
 .is-ui label {
@@ -4045,7 +4050,7 @@ button:focus-visible {
 }
 #_cbhtml .is-rangeslider:focus,
 .is-ui .is-rangeslider:focus {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
   outline-offset: 2px;
 }
 #_cbhtml .is-rangeslider::-webkit-slider-thumb,
@@ -4055,7 +4060,7 @@ button:focus-visible {
   width: 25px !important;
   height: 24px !important;
   border-radius: 3px !important;
-  background: #0e75de;
+  background: var(--rangeslider-thumb-color);
   cursor: pointer;
   margin: 0 !important;
 }
@@ -4064,7 +4069,7 @@ button:focus-visible {
   width: 25px !important;
   height: 24px !important;
   border-radius: 3px !important;
-  background: #0e75de;
+  background: var(--rangeslider-thumb-color);
   cursor: pointer;
   margin: 0 !important;
 }
@@ -5069,7 +5074,7 @@ button:focus-visible {
 }
 #_cbhtml .pickcolor input[type=text]:focus,
 .is-ui .pickcolor input[type=text]:focus {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
   outline-offset: -2px;
 }
 #_cbhtml .pickcolor .color-default button,
@@ -6596,7 +6601,7 @@ div[data-html] {
   margin-top: 3px;
 }
 .custom-select .select-styled:focus-visible {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
   outline-offset: -1px;
 }
 .custom-select .select-styled > span:first-child {
@@ -8532,7 +8537,7 @@ iframe.wait-autoplay {
   align-items: center;
 }
 #_cbhtml .is-modal.pluginsettings div[contenteditable=true]:focus-visible {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
 }
 
 .dark #_cbhtml .is-accordion > div {

package/public/contentbuilder/contentbuilder.esm.js

@@ -94406,6 +94406,7 @@ class ContentBuilder {
     this.doDocumentClick = e => {
       let target = e.target;
       if (!target) return;
+      if (target.closest('[data-top-locked], [data-bottom-locked]')) return;
       rteClick(e);
       let rowClicked;
       if (target.parentNode && target.parentNode.classList) rowClicked = target.parentNode.classList.contains('is-builder');
@@ -95197,6 +95198,7 @@ class ContentBuilder {
     if (this.opts.useCssClasses) this.dom.contentReformat(builder, this.opts.cssClasses);
   }
   applyBehaviorOn(builder) {
+    if (builder.closest('[data-top-locked], [data-bottom-locked]')) return;
     const util = this.util;
     if (builder.closest('[data-cb-type]')) {
       // Fix buttons not wrapped in  <div style="white-space: nowrap;">