@innovastudio/contentbuilder 1.4.118 → 1.4.120

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.4.118",
+  "version": "1.4.120",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [
@@ -55,7 +55,6 @@
     "cropperjs": "^1.5.12",
     "js-beautify": "^1.14.0",
     "moveable": "^0.30.0",
-    "rangy": "^1.3.0",
     "sortablejs": "^1.14.0",
     "string-similarity-js": "^2.1.4"
   }

package/public/contentbuilder/contentbuilder.css

@@ -248,11 +248,11 @@ button:focus-visible {
 }
 #_cbhtml .style-helper.on,
 .is-ui .style-helper.on {
-  background: whitesmoke;
+  background: #f1f1f1;
 }
 #_cbhtml .style-helper.hover,
 .is-ui .style-helper.hover {
-  background: whitesmoke;
+  background: #f1f1f1;
 }
 #_cbhtml .style-helper svg,
 .is-ui .style-helper svg {
@@ -356,12 +356,12 @@ button:focus-visible {
 }
 #_cbhtml .style-helper-button-classic,
 .is-ui .style-helper-button-classic {
-  background: #f7f7f7;
+  background: transparent;
   color: #000;
 }
 #_cbhtml .style-helper-button-classic.hover,
 .is-ui .style-helper-button-classic.hover {
-  background: #f9f9f9;
+  background: #f1f1f1;
 }
 #_cbhtml .style-helper-button-classic svg,
 .is-ui .style-helper-button-classic svg {
@@ -620,13 +620,13 @@ button:focus-visible {
 #_cbhtml .is-general-options div[role=button].on,
 .is-ui .is-general-options button.on,
 .is-ui .is-general-options div[role=button].on {
-  background: whitesmoke;
+  background: #f1f1f1;
 }
 #_cbhtml .is-general-options button:hover,
 #_cbhtml .is-general-options div[role=button]:hover,
 .is-ui .is-general-options button:hover,
 .is-ui .is-general-options div[role=button]:hover {
-  background: whitesmoke !important;
+  background: #f1f1f1 !important;
 }
 #_cbhtml .is-general-options button:focus,
 #_cbhtml .is-general-options div[role=button]:focus,
@@ -679,7 +679,7 @@ button:focus-visible {
 .is-ui .is-elementrte-tool div[role=button].on,
 .is-ui .is-rte-pop.rte-more-options div[role=button].on,
 .is-ui .is-rte-pop.elementrte-more-options div[role=button].on {
-  background: whitesmoke;
+  background: #f1f1f1;
 }
 #_cbhtml .is-rte-tool div[role=button]:hover,
 #_cbhtml .is-elementrte-tool div[role=button]:hover,
@@ -689,7 +689,7 @@ button:focus-visible {
 .is-ui .is-elementrte-tool div[role=button]:hover,
 .is-ui .is-rte-pop.rte-more-options div[role=button]:hover,
 .is-ui .is-rte-pop.elementrte-more-options div[role=button]:hover {
-  background: whitesmoke;
+  background: #f1f1f1;
 }
 #_cbhtml .is-rte-tool div[role=button]:focus,
 #_cbhtml .is-elementrte-tool div[role=button]:focus,
@@ -721,9 +721,10 @@ button:focus-visible {
 .is-ui .is-rte-pop.elementrte-more-options button {
   background-color: transparent;
   color: #121212;
-  width: 45px;
+  width: 44px;
   height: 40px;
-  margin: 0;
+  margin: 0 2px 0 0;
+  border-radius: 3px;
   box-shadow: none;
 }
 #_cbhtml .is-rte-tool button.on,
@@ -734,7 +735,7 @@ button:focus-visible {
 .is-ui .is-elementrte-tool button.on,
 .is-ui .is-rte-pop.rte-more-options button.on,
 .is-ui .is-rte-pop.elementrte-more-options button.on {
-  background: whitesmoke;
+  background: #f1f1f1;
 }
 #_cbhtml .is-rte-tool button:hover,
 #_cbhtml .is-elementrte-tool button:hover,
@@ -744,7 +745,7 @@ button:focus-visible {
 .is-ui .is-elementrte-tool button:hover,
 .is-ui .is-rte-pop.rte-more-options button:hover,
 .is-ui .is-rte-pop.elementrte-more-options button:hover {
-  background: whitesmoke;
+  background: #f1f1f1;
 }
 #_cbhtml .is-rte-tool button:focus,
 #_cbhtml .is-elementrte-tool button:focus,
@@ -868,11 +869,11 @@ button:focus-visible {
 }
 #_cbhtml .is-rte-pop button.on,
 .is-ui .is-rte-pop button.on {
-  background: whitesmoke;
+  background: #f1f1f1;
 }
 #_cbhtml .is-rte-pop button:hover,
 .is-ui .is-rte-pop button:hover {
-  background: whitesmoke;
+  background: #f1f1f1;
 }
 #_cbhtml .is-rte-pop .is-label,
 .is-ui .is-rte-pop .is-label {
@@ -946,7 +947,7 @@ button:focus-visible {
 }
 #_cbhtml .is-rte-pop.rte-paragraph-options li.on,
 .is-ui .is-rte-pop.rte-paragraph-options li.on {
-  background: whitesmoke;
+  background: #f1f1f1;
 }
 #_cbhtml .is-rte-pop.rte-paragraph-options > ul,
 .is-ui .is-rte-pop.rte-paragraph-options > ul {
@@ -976,7 +977,7 @@ button:focus-visible {
 #_cbhtml .is-rte-pop.rte-paragraph-options > ul > li:hover, #_cbhtml .is-rte-pop.rte-paragraph-options > ul > li:focus,
 .is-ui .is-rte-pop.rte-paragraph-options > ul > li:hover,
 .is-ui .is-rte-pop.rte-paragraph-options > ul > li:focus {
-  background: whitesmoke;
+  background: #f1f1f1;
 }
 #_cbhtml .is-rte-pop.rte-paragraph-options > ul > li > *,
 .is-ui .is-rte-pop.rte-paragraph-options > ul > li > * {
@@ -1006,15 +1007,15 @@ button:focus-visible {
 }
 #_cbhtml .is-rte-pop.rte-textsetting-options button.on,
 .is-ui .is-rte-pop.rte-textsetting-options button.on {
-  background: whitesmoke;
+  background: #f1f1f1;
 }
 #_cbhtml .is-rte-pop.rte-textsetting-options button:hover,
 .is-ui .is-rte-pop.rte-textsetting-options button:hover {
-  background: whitesmoke;
+  background: #f1f1f1;
 }
 #_cbhtml .is-rte-pop.rte-textsetting-options button:focus,
 .is-ui .is-rte-pop.rte-textsetting-options button:focus {
-  background: whitesmoke;
+  background: #f1f1f1;
 }
 #_cbhtml .is-rte-pop.rte-textsetting-options.active,
 .is-ui .is-rte-pop.rte-textsetting-options.active {
@@ -1094,11 +1095,11 @@ button:focus-visible {
 }
 #_cbhtml .is-rte-pop.rte-formatting-options button.on,
 .is-ui .is-rte-pop.rte-formatting-options button.on {
-  background: whitesmoke;
+  background: #f1f1f1;
 }
 #_cbhtml .is-rte-pop.rte-formatting-options button:hover,
 .is-ui .is-rte-pop.rte-formatting-options button:hover {
-  background: whitesmoke;
+  background: #f1f1f1;
 }
 #_cbhtml .is-rte-pop.rte-list-options button,
 .is-ui .is-rte-pop.rte-list-options button {
@@ -1107,11 +1108,11 @@ button:focus-visible {
 }
 #_cbhtml .is-rte-pop.rte-list-options button.on,
 .is-ui .is-rte-pop.rte-list-options button.on {
-  background: whitesmoke;
+  background: #f1f1f1;
 }
 #_cbhtml .is-rte-pop.rte-list-options button:hover,
 .is-ui .is-rte-pop.rte-list-options button:hover {
-  background: whitesmoke;
+  background: #f1f1f1;
 }
 #_cbhtml .is-rte-pop.rte-align-options button,
 .is-ui .is-rte-pop.rte-align-options button {
@@ -1120,11 +1121,11 @@ button:focus-visible {
 }
 #_cbhtml .is-rte-pop.rte-align-options button.on,
 .is-ui .is-rte-pop.rte-align-options button.on {
-  background: whitesmoke;
+  background: #f1f1f1;
 }
 #_cbhtml .is-rte-pop.rte-align-options button:hover,
 .is-ui .is-rte-pop.rte-align-options button:hover {
-  background: whitesmoke;
+  background: #f1f1f1;
 }
 #_cbhtml .is-rte-pop.rte-color-picker,
 .is-ui .is-rte-pop.rte-color-picker {
@@ -1303,11 +1304,11 @@ button:focus-visible {
 }
 #_cbhtml .is-rte-pop.rte-customtag-options > div button:hover,
 .is-ui .is-rte-pop.rte-customtag-options > div button:hover {
-  background: whitesmoke;
+  background: #f1f1f1;
 }
 #_cbhtml .is-rte-pop.rte-customtag-options > div button:focus,
 .is-ui .is-rte-pop.rte-customtag-options > div button:focus {
-  background: whitesmoke;
+  background: #f1f1f1;
 }
 #_cbhtml .is-rte-pop.rte-zoom-options > div,
 .is-ui .is-rte-pop.rte-zoom-options > div {
@@ -1897,11 +1898,11 @@ button:focus-visible {
 }
 #_cbhtml .is-modal button:hover,
 .is-ui .is-modal button:hover {
-  background: #fff;
+  background: #f1f1f1;
 }
 #_cbhtml .is-modal button.on,
 .is-ui .is-modal button.on {
-  background: #f2f2f2;
+  background: #f1f1f1;
 }
 #_cbhtml .is-modal button.is-btn-color,
 .is-ui .is-modal button.is-btn-color {
@@ -2323,6 +2324,10 @@ button:focus-visible {
   width: 100%;
   margin-top: 30px;
 }
+#_cbhtml .is-modal.edittable .is-modal-overlay,
+.is-ui .is-modal.edittable .is-modal-overlay {
+  display: none !important;
+}
 #_cbhtml .is-modal.edittable button,
 .is-ui .is-modal.edittable button {
   height: 35px;
@@ -2690,7 +2695,6 @@ button:focus-visible {
 #_cbhtml .is-modal.columnsettings .image-src > button, #_cbhtml .is-modal.rowsettings .image-src > button,
 .is-ui .is-modal.columnsettings .image-src > button,
 .is-ui .is-modal.rowsettings .image-src > button {
-  background: transparent !important;
   width: 50px;
   height: 43px;
 }
@@ -2713,7 +2717,6 @@ button:focus-visible {
 #_cbhtml .is-modal.imagesource .image-src > button, #_cbhtml .is-modal.mediasource .image-src > button,
 .is-ui .is-modal.imagesource .image-src > button,
 .is-ui .is-modal.mediasource .image-src > button {
-  background: transparent !important;
   width: 50px;
   height: 43px;
 }
@@ -2722,6 +2725,7 @@ button:focus-visible {
 .is-ui .is-modal.mediasource .input-select {
   width: 50px;
   height: 43px;
+  flex: none;
 }
 #_cbhtml .is-modal.imagesource .input-upload, #_cbhtml .is-modal.mediasource .input-upload,
 .is-ui .is-modal.imagesource .input-upload,
@@ -2841,7 +2845,6 @@ button:focus-visible {
 }
 #_cbhtml .is-modal.insertimage .image-src > button,
 .is-ui .is-modal.insertimage .image-src > button {
-  background: transparent !important;
   width: 50px;
   height: 43px;
 }
@@ -2870,7 +2873,6 @@ button:focus-visible {
 }
 #_cbhtml .is-modal.imagelink .image-src button,
 .is-ui .is-modal.imagelink .image-src button {
-  background: transparent !important;
   width: 50px;
   height: 43px;
 }
@@ -2885,7 +2887,6 @@ button:focus-visible {
 }
 #_cbhtml .is-modal.imagelink .image-link button,
 .is-ui .is-modal.imagelink .image-link button {
-  background: transparent !important;
   width: 50px;
   height: 43px;
 }
@@ -2913,10 +2914,6 @@ button:focus-visible {
 .is-ui .is-modal.videolink .video-url .inpVideoLinkSource {
   width: 100%;
 }
-#_cbhtml .is-modal.videolink .video-url button,
-.is-ui .is-modal.videolink .video-url button {
-  background: transparent !important;
-}
 #_cbhtml .is-modal.videolink .input-select,
 .is-ui .is-modal.videolink .input-select {
   width: 50px;
@@ -2925,7 +2922,7 @@ button:focus-visible {
   height: 43px;
   width: 50px;
   border-left: none;
-  background: transparent;
+  flex: none;
 }
 #_cbhtml .is-modal.videolink .input-upload,
 .is-ui .is-modal.videolink .input-upload {
@@ -2947,10 +2944,6 @@ button:focus-visible {
 .is-ui .is-modal.audiolink .audio-url .inpAudioLinkSource {
   width: 100%;
 }
-#_cbhtml .is-modal.audiolink .audio-url button,
-.is-ui .is-modal.audiolink .audio-url button {
-  background: transparent !important;
-}
 #_cbhtml .is-modal.audiolink .input-select,
 .is-ui .is-modal.audiolink .input-select {
   width: 50px;
@@ -2959,7 +2952,7 @@ button:focus-visible {
   height: 43px;
   width: 50px;
   border-left: none;
-  background: transparent;
+  flex: none;
 }
 #_cbhtml .is-modal.audiolink .input-upload,
 .is-ui .is-modal.audiolink .input-upload {
@@ -2986,10 +2979,6 @@ button:focus-visible {
 .is-ui .is-modal.createlink .link-src .input-url {
   width: 100%;
 }
-#_cbhtml .is-modal.createlink .link-src button,
-.is-ui .is-modal.createlink .link-src button {
-  background: transparent !important;
-}
 #_cbhtml .is-modal.createlink .input-select,
 .is-ui .is-modal.createlink .input-select {
   width: 60px;
@@ -2997,7 +2986,7 @@ button:focus-visible {
   height: 43px;
   width: 50px;
   border-left: none;
-  background: transparent;
+  flex: none;
 }
 #_cbhtml .is-modal.viewconfig .div-themes,
 .is-ui .is-modal.viewconfig .div-themes {
@@ -3017,6 +3006,12 @@ button:focus-visible {
 .is-ui .is-modal.viewconfig button.input-setcolor:focus {
   outline-offset: -2px;
 }
+#_cbhtml .is-modal .div-anyfile-upload,
+#_cbhtml .is-modal [class^=image-larger],
+.is-ui .is-modal .div-anyfile-upload,
+.is-ui .is-modal [class^=image-larger] {
+  flex: none;
+}
 #_cbhtml .is-tool#divImageTool, #_cbhtml .is-tool.is-video-tool, #_cbhtml .is-tool.is-audio-tool, #_cbhtml .is-tool.is-iframe-tool,
 .is-ui .is-tool#divImageTool,
 .is-ui .is-tool.is-video-tool,
@@ -3215,11 +3210,11 @@ button:focus-visible {
 }
 #_cbhtml .is-side button:hover,
 .is-ui .is-side button:hover {
-  background: #fff;
+  background: #f1f1f1;
 }
 #_cbhtml .is-side button.on,
 .is-ui .is-side button.on {
-  background: #f2f2f2;
+  background: #f1f1f1;
 }
 #_cbhtml .is-side.active,
 .is-ui .is-side.active {
@@ -3310,14 +3305,14 @@ button:focus-visible {
   width: 100%;
   height: 43px;
   display: block;
-  background: #f7f7f7;
+  background: transparent;
   box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);
 }
 #_cbhtml button.classic:hover,
 #_cbhtml .is-btn.classic:hover,
 .is-ui button.classic:hover,
 .is-ui .is-btn.classic:hover {
-  background: #f9f9f9;
+  background: #f1f1f1;
 }
 #_cbhtml button.classic-primary,
 #_cbhtml .is-btn.classic-primary,
@@ -3329,7 +3324,7 @@ button:focus-visible {
   padding-left: 25px;
   padding-right: 25px;
   min-width: 110px;
-  background: #f3f3f3;
+  background: #f5f5f5;
   border: transparent 1px solid;
   box-shadow: 0px 3px 6px -6px rgba(0, 0, 0, 0.32);
 }
@@ -3337,8 +3332,7 @@ button:focus-visible {
 #_cbhtml .is-btn.classic-primary:hover,
 .is-ui button.classic-primary:hover,
 .is-ui .is-btn.classic-primary:hover {
-  background: #f3f3f3;
-  border: transparent 1px solid;
+  background: #f1f1f1;
 }
 #_cbhtml button.classic-secondary,
 #_cbhtml .is-btn.classic-secondary,
@@ -3357,8 +3351,7 @@ button:focus-visible {
 #_cbhtml .is-btn.classic-secondary:hover,
 .is-ui button.classic-secondary:hover,
 .is-ui .is-btn.classic-secondary:hover {
-  background: transparent;
-  border: transparent 1px solid;
+  background: #f1f1f1;
 }
 #_cbhtml textarea:not(.monaco-mouse-cursor-text),
 .is-ui textarea:not(.monaco-mouse-cursor-text) {
@@ -3436,7 +3429,7 @@ button:focus-visible {
 #_cbhtml input[type=text]:focus,
 .is-ui input[type=text]:focus {
   outline: #3e93f7 2px solid;
-  outline-offset: 0;
+  outline-offset: -2px;
   box-shadow: none;
 }
 #_cbhtml input[type=text] [type=checkbox], #_cbhtml input[type=text] [type=radio],
@@ -3480,6 +3473,7 @@ button:focus-visible {
   -webkit-transition: 0.2s;
   transition: opacity 0.2s;
   margin: 2px !important;
+  border-radius: 2px !important;
 }
 #_cbhtml .is-rangeslider:hover,
 .is-ui .is-rangeslider:hover {
@@ -3496,7 +3490,7 @@ button:focus-visible {
   appearance: none;
   width: 25px !important;
   height: 24px !important;
-  border-radius: 0 !important;
+  border-radius: 3px !important;
   background: #0e75de;
   cursor: pointer;
   margin: 0 !important;
@@ -3505,6 +3499,7 @@ button:focus-visible {
 .is-ui .is-rangeslider::-moz-range-thumb {
   width: 25px !important;
   height: 24px !important;
+  border-radius: 3px !important;
   background: #0e75de;
   cursor: pointer;
   margin: 0 !important;
@@ -3722,7 +3717,7 @@ button:focus-visible {
   right: -230px;
   width: 230px;
   background: #fff;
-  border-left: 1px solid #e8e8e8;
+  border-left: 1px solid #e6e6e6;
   box-shadow: rgba(0, 0, 0, 0.03) 0 0 10px 0px;
 }
 #_cbhtml #divSnippetList.active,
@@ -3745,7 +3740,7 @@ button:focus-visible {
   top: 170px;
   left: -40px;
   background: #fff;
-  border: 1px solid #e8e8e8;
+  border: 1px solid #dfdfdf;
   border-right: none;
   line-height: 39px;
   text-align: center;
@@ -4462,6 +4457,7 @@ button:focus-visible {
   flex-direction: column;
   background-color: transparent;
   box-shadow: none;
+  border-radius: 3px;
 }
 #_cbhtml .is-pop.columnmore button span {
   display: inline-block;
@@ -4469,10 +4465,10 @@ button:focus-visible {
   height: 24px;
 }
 #_cbhtml .is-pop.columnmore button.on {
-  background-color: rgba(0, 0, 0, 0.05) !important;
+  background-color: #f1f1f1;
 }
 #_cbhtml .is-pop.columnmore button:hover {
-  background-color: rgba(0, 0, 0, 0.03) !important;
+  background-color: #f1f1f1;
 }
 #_cbhtml .is-pop.columnmore div.is-separator {
   width: 100%;
@@ -4497,6 +4493,7 @@ button:focus-visible {
   flex-direction: column;
   background-color: transparent;
   box-shadow: none;
+  border-radius: 3px;
 }
 #_cbhtml .is-pop.rowmore button span {
   display: inline-block;
@@ -4504,10 +4501,10 @@ button:focus-visible {
   height: 24px;
 }
 #_cbhtml .is-pop.rowmore button.on {
-  background-color: rgba(0, 0, 0, 0.05) !important;
+  background-color: #f1f1f1;
 }
 #_cbhtml .is-pop.rowmore button:hover {
-  background-color: rgba(0, 0, 0, 0.03) !important;
+  background-color: #f1f1f1;
 }
 #_cbhtml .is-pop.rowmore div.is-separator {
   width: 100%;
@@ -4532,6 +4529,7 @@ button:focus-visible {
   flex-direction: column;
   background-color: transparent;
   box-shadow: none;
+  border-radius: 3px;
 }
 #_cbhtml .is-pop.elmmore button span {
   display: inline-block;
@@ -4539,10 +4537,10 @@ button:focus-visible {
   height: 24px;
 }
 #_cbhtml .is-pop.elmmore button.on {
-  background-color: rgba(0, 0, 0, 0.05) !important;
+  background-color: #f1f1f1;
 }
 #_cbhtml .is-pop.elmmore button:hover {
-  background-color: rgba(0, 0, 0, 0.03) !important;
+  background-color: #f1f1f1;
 }
 #_cbhtml .is-pop.quickadd {
   width: 430px;
@@ -4563,12 +4561,13 @@ button:focus-visible {
   flex-direction: column;
   background-color: transparent;
   box-shadow: none;
+  border-radius: 3px;
 }
 #_cbhtml .is-pop.quickadd button.on {
-  background-color: rgba(0, 0, 0, 0.05) !important;
+  background-color: #f1f1f1;
 }
 #_cbhtml .is-pop.quickadd button:hover {
-  background-color: rgba(0, 0, 0, 0.03) !important;
+  background-color: #f1f1f1;
 }
 #_cbhtml .is-pop.quickadd .pop-separator {
   width: 100%;
@@ -4580,7 +4579,6 @@ button:focus-visible {
   width: 100%;
   height: 50px;
   flex-direction: initial;
-  background: transparent;
   padding: 5px;
 }
 #_cbhtml .is-tool.is-element-tool {