@innovastudio/contentbuilder 1.5.137 → 1.5.139

package/index.d.ts

@@ -7,6 +7,7 @@ interface ContentBuilderOptions {
     colequal?: any[]; 
     colsizes?: any[]; 
     imageQuality?: number;
+    maxZoom?: number;
     elementSelection?: boolean;
     paste?: string;
     snippetJSON?: object;

package/package.json

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

package/public/contentbuilder/content.css

@@ -21,8 +21,6 @@
   width: 100%;
   padding: 0 20px;
   box-sizing: border-box;
-  /* Overide Bootstrap */
-  /* Responsive Utility */
 }
 .is-container h1, .is-container h2, .is-container h3, .is-container h4, .is-container h5, .is-container h6 {
   font-weight: 500;
@@ -197,145 +195,30 @@
     float: right;
   }
 }
+
+/* Overide Bootstrap */
 .is-container .row {
   flex-wrap: initial;
 }
+
 .is-container .row > * {
   flex-shrink: initial;
 }
+
+/* Responsive Utility */
 @media all and (max-width: 760px) {
   .is-container .flow-reverse {
     display: flex;
     flex-direction: column-reverse;
   }
-  .is-container .column, .is-container > div {
+
+  .is-container .column,
+.is-container > div {
     min-width: 100%;
     /* If there is column's inline width, this will make the column full-width in mobile */
     min-height: unset !important;
   }
 }
-
-/* Responsive Utility */
-/*
-body {
-
-    &:not(.data-editor) {
-        .is-container {
-            @media (max-width: 760px) {
-                .xs-hidden {display:none !important}
-            }
-            @media (min-width: 761px) and (max-width: 970px) {
-                .sm-hidden {display:none !important}
-                .sm-autofit > div:not(.is-row-overlay):not(.is-row-tool):not(.is-col-tool) {
-                    width: 100% !important;
-                    flex: auto !important;
-                }
-            }
-            @media (min-width: 971px) and (max-width: 1280px) {
-                .md-hidden {display:none !important}
-                .md-autofit > div:not(.is-row-overlay):not(.is-row-tool):not(.is-col-tool) {
-                    width: 100% !important;
-                    flex: auto !important;
-                }
-            }
-            @media (min-width: 1281px) {
-                .desktop-hidden {display:none !important}
-                .desktop-autofit:not(.desktop-items-1):not(.desktop-items-2):not(.desktop-items-3):not(.desktop-items-4):not(.desktop-items-5):not(.desktop-items-6) > div:not(.is-row-overlay):not(.is-row-tool):not(.is-col-tool) {
-                    width: 100% !important;
-                    flex: auto !important;
-                }
-            }
-        }
-    }
-
-    &.data-editor {
-        .is-container {
-            @media (max-width: 760px) {
-                .xs-hidden {opacity:0.6}
-            }
-            @media (min-width: 761px) and (max-width: 970px) {
-                .sm-hidden {opacity:0.6}
-            }
-            @media (min-width: 971px) and (max-width: 1280px) {
-                .md-hidden {opacity:0.6}
-            }
-            @media (min-width: 1281px) {
-                .desktop-hidden {opacity:0.6}
-            }
-        }
-    }
-}
-
-.is-container {
-
-    // wrap & reverse columns
-    @media (max-width: 760px) {
-        .xs-items-6, .xs-items-5, .xs-items-4, .xs-items-3, .xs-items-2, .xs-items-1 { 
-            display: flex !important; flex-flow: wrap; justify-content: space-between;
-        }
-        .xs-items-6 > div:not(.is-tool,.is-rowadd-tool,.is-row-overlay) { width: calc(100% * (1/6)) !important; max-width: unset !important; flex: 1 0 auto !important; min-width: unset !important; padding-right:15px; }
-        .xs-items-5 > div:not(.is-tool,.is-rowadd-tool,.is-row-overlay) { width: calc(100% * (1/5)) !important; max-width: unset !important; flex: 1 0 auto !important; min-width: unset !important; padding-right:15px; }
-        .xs-items-4 > div:not(.is-tool,.is-rowadd-tool,.is-row-overlay) { width: calc(100% * (1/4)) !important; max-width: unset !important; flex: 1 0 auto !important; min-width: unset !important; padding-right:15px; }
-        .xs-items-3 > div:not(.is-tool,.is-rowadd-tool,.is-row-overlay) { width: calc(100% * (1/3)) !important; max-width: unset !important; flex: 1 0 auto !important; min-width: unset !important; padding-right:15px; }
-        .xs-items-2 > div:not(.is-tool,.is-rowadd-tool,.is-row-overlay) { width: calc(100% * (1/2)) !important; max-width: unset !important; flex: 1 0 auto !important; min-width: unset !important; padding-right:15px; }
-        .xs-items-1 > div:not(.is-tool,.is-rowadd-tool,.is-row-overlay) { width: calc(100% * (1/1)) !important; max-width: unset !important; flex: 1 0 auto !important; min-width: unset !important; }
-        // no class (not set) = xs-items-1 
-
-        .xs-column-reverse { display: flex; flex-direction: column-reverse !important; } 
-        .xs-column-reverse.xs-items-1 { flex-direction: column-reverse !important; } 
-        .xs-column-reverse.xs-items-2 { flex-direction: row-reverse !important; } 
-        .xs-column-reverse.xs-items-3 { flex-direction: row-reverse !important; } 
-        .xs-column-reverse.xs-items-4 { flex-direction: row-reverse !important; } 
-        .xs-column-reverse.xs-items-5 { flex-direction: row-reverse !important; } 
-        .xs-column-reverse.xs-items-6 { flex-direction: row-reverse !important; } 
-    }
-    @media (min-width: 761px) and (max-width: 970px) {
-        .sm-items-6, .sm-items-5, .sm-items-4, .sm-items-3, .sm-items-2, .sm-items-1 { 
-            display: flex !important; flex-flow: wrap; justify-content: space-between;
-        }
-        .sm-items-6 > div:not(.is-tool,.is-rowadd-tool,.is-row-overlay) { width: calc(100% * (1/6)) !important; max-width: unset !important; flex: 1 0 auto !important; margin: 0; padding-left: 15px;padding-right: 15px; }
-        .sm-items-5 > div:not(.is-tool,.is-rowadd-tool,.is-row-overlay) { width: calc(100% * (1/5)) !important; max-width: unset !important; flex: 1 0 auto !important; margin: 0; padding-left: 15px;padding-right: 15px; }
-        .sm-items-4 > div:not(.is-tool,.is-rowadd-tool,.is-row-overlay) { width: calc(100% * (1/4)) !important; max-width: unset !important; flex: 1 0 auto !important; margin: 0; padding-left: 15px;padding-right: 15px; }
-        .sm-items-3 > div:not(.is-tool,.is-rowadd-tool,.is-row-overlay) { width: calc(100% * (1/3)) !important; max-width: unset !important; flex: 1 0 auto !important; margin: 0; padding-left: 15px;padding-right: 15px; }
-        .sm-items-2 > div:not(.is-tool,.is-rowadd-tool,.is-row-overlay) { width: calc(100% * (1/2)) !important; max-width: unset !important; flex: 1 0 auto !important; margin: 0; padding-left: 15px;padding-right: 15px; }
-        .sm-items-1 > div:not(.is-tool,.is-rowadd-tool,.is-row-overlay) { width: calc(100% * (1/1)) !important; max-width: unset !important; flex: 1 0 auto !important; margin: 0; padding-left: 15px;padding-right: 15px; }
-        // no class (not set) => use default (all columns in one line)
-
-        .sm-column-reverse { display: flex; flex-direction: row-reverse !important; } 
-        .sm-column-reverse.sm-items-1 { flex-direction: column-reverse !important; } 
-    }
-    @media (min-width: 971px) and (max-width: 1280px) {
-        .md-items-6, .md-items-5, .md-items-4, .md-items-3, .md-items-2, .md-items-1 { 
-            display: flex !important; flex-flow: wrap; justify-content: space-between;
-        }
-        .md-items-6 > div:not(.is-tool,.is-rowadd-tool,.is-row-overlay) { width: calc(100% * (1/6)) !important; max-width: unset !important; flex: 1 0 auto !important; margin: 0; padding-left: 15px;padding-right: 15px; }
-        .md-items-5 > div:not(.is-tool,.is-rowadd-tool,.is-row-overlay) { width: calc(100% * (1/5)) !important; max-width: unset !important; flex: 1 0 auto !important; margin: 0; padding-left: 15px;padding-right: 15px; }
-        .md-items-4 > div:not(.is-tool,.is-rowadd-tool,.is-row-overlay) { width: calc(100% * (1/4)) !important; max-width: unset !important; flex: 1 0 auto !important; margin: 0; padding-left: 15px;padding-right: 15px; }
-        .md-items-3 > div:not(.is-tool,.is-rowadd-tool,.is-row-overlay) { width: calc(100% * (1/3)) !important; max-width: unset !important; flex: 1 0 auto !important; margin: 0; padding-left: 15px;padding-right: 15px; }
-        .md-items-2 > div:not(.is-tool,.is-rowadd-tool,.is-row-overlay) { width: calc(100% * (1/2)) !important; max-width: unset !important; flex: 1 0 auto !important; margin: 0; padding-left: 15px;padding-right: 15px; }
-        .md-items-1 > div:not(.is-tool,.is-rowadd-tool,.is-row-overlay) { width: calc(100% * (1/1)) !important; max-width: unset !important; flex: 1 0 auto !important; margin: 0; padding-left: 15px;padding-right: 15px; }
-        // no class (not set) => use default (all columns in one line)
-
-        .md-column-reverse { display: flex; flex-direction: row-reverse !important; } 
-        .md-column-reverse.md-items-1 { flex-direction: column-reverse !important; } 
-    }
-    @media (min-width: 1281px) {
-        .desktop-items-6, .desktop-items-5, .desktop-items-4, .desktop-items-3, .desktop-items-2, .desktop-items-1 { 
-            display: flex !important; flex-flow: wrap; justify-content: space-between;
-        }
-        .desktop-items-6 > div:not(.is-tool,.is-rowadd-tool,.is-row-overlay) { width: calc(100% * (1/6)) !important; max-width: unset !important; flex: 1 0 auto !important; margin: 0; padding-left: 15px;padding-right: 15px; }
-        .desktop-items-5 > div:not(.is-tool,.is-rowadd-tool,.is-row-overlay) { width: calc(100% * (1/5)) !important; max-width: unset !important; flex: 1 0 auto !important; margin: 0; padding-left: 15px;padding-right: 15px; }
-        .desktop-items-4 > div:not(.is-tool,.is-rowadd-tool,.is-row-overlay) { width: calc(100% * (1/4)) !important; max-width: unset !important; flex: 1 0 auto !important; margin: 0; padding-left: 15px;padding-right: 15px; }
-        .desktop-items-3 > div:not(.is-tool,.is-rowadd-tool,.is-row-overlay) { width: calc(100% * (1/3)) !important; max-width: unset !important; flex: 1 0 auto !important; margin: 0; padding-left: 15px;padding-right: 15px; }
-        .desktop-items-2 > div:not(.is-tool,.is-rowadd-tool,.is-row-overlay) { width: calc(100% * (1/2)) !important; max-width: unset !important; flex: 1 0 auto !important; margin: 0; padding-left: 15px;padding-right: 15px; }
-        .desktop-items-1 > div:not(.is-tool,.is-rowadd-tool,.is-row-overlay) { width: calc(100% * (1/1)) !important; max-width: unset !important; flex: 1 0 auto !important; margin: 0; padding-left: 15px;padding-right: 15px; }
-        // no class (not set) => use default (all columns in one line)
-
-        .desktop-column-reverse { display: flex; flex-direction: row-reverse !important; } 
-        .desktop-column-reverse.desktop-items-1 { flex-direction: column-reverse !important; } 
-    }
-}
-*/
 @media (max-width: 760px) {
   body:not(.data-editor) .xs-hidden {
     display: none !important;
@@ -390,7 +273,7 @@ body {
 }
 /* wrap & reverse columns */
 @media (max-width: 760px) {
-  .xs-items-6, .xs-items-5, .xs-items-4, .xs-items-3, .xs-items-2, .xs-items-1 {
+  .is-container .xs-items-6, .is-container .xs-items-5, .is-container .xs-items-4, .is-container .xs-items-3, .is-container .xs-items-2, .is-container .xs-items-1 {
     display: flex !important;
     flex-flow: wrap;
     justify-content: space-between;
@@ -474,7 +357,7 @@ body {
   }
 }
 @media (min-width: 761px) and (max-width: 970px) {
-  .sm-items-6, .sm-items-5, .sm-items-4, .sm-items-3, .sm-items-2, .sm-items-1 {
+  .is-container .sm-items-6, .is-container .sm-items-5, .is-container .sm-items-4, .is-container .sm-items-3, .is-container .sm-items-2, .is-container .sm-items-1 {
     display: flex !important;
     flex-flow: wrap;
     justify-content: space-between;
@@ -545,7 +428,7 @@ body {
   }
 }
 @media (min-width: 971px) and (max-width: 1280px) {
-  .md-items-6, .md-items-5, .md-items-4, .md-items-3, .md-items-2, .md-items-1 {
+  .is-container .md-items-6, .is-container .md-items-5, .is-container .md-items-4, .is-container .md-items-3, .is-container .md-items-2, .is-container .md-items-1 {
     display: flex !important;
     flex-flow: wrap;
     justify-content: space-between;
@@ -616,7 +499,7 @@ body {
   }
 }
 @media (min-width: 1281px) {
-  .desktop-items-6, .desktop-items-5, .desktop-items-4, .desktop-items-3, .desktop-items-2, .desktop-items-1 {
+  .is-container .desktop-items-6, .is-container .desktop-items-5, .is-container .desktop-items-4, .is-container .desktop-items-3, .is-container .desktop-items-2, .is-container .desktop-items-1 {
     display: flex !important;
     flex-flow: wrap;
     justify-content: space-between;
@@ -6940,7 +6823,9 @@ body {
 .is-container .cursor-pointer {
   cursor: pointer;
 }
-.is-container *, .is-container ::before, .is-container ::after {
+.is-container *,
+.is-container *::before,
+.is-container *::after {
   border-width: 0;
   border-style: solid;
   border-color: #e5e7eb;

package/public/contentbuilder/contentbuilder.css

@@ -8402,3 +8402,26 @@ iframe.wait-autoplay {
 .drag-over-image {
   outline: #a2f0ce 3px solid;
 }
+
+.is-ui {
+  /* reset */
+}
+.is-ui *,
+.is-ui *::before,
+.is-ui *::after {
+  border-width: 0;
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+.is-ui .flex {
+  display: flex;
+}
+.is-ui .flex-row {
+  flex-direction: row;
+}
+.is-ui .flex-col {
+  flex-direction: column;
+}
+.is-ui .flex-wrap {
+  flex-wrap: wrap;
+}