@innovastudio/contentbox 1.6.179 → 1.6.181

package/index.d.ts

@@ -128,6 +128,15 @@ interface ContentBoxOptions {
     onRender?: () => void;
     onChange?: () => void;
     onStart?: () => void;
+    
+    onAddSection?: () => void;
+    onPageClick?: () => void;
+    sectionListSelector?: string;
+    snippetListSelector?: string;
+    typographyListSelector?: string;
+    leftOffset?: string;
+    topOffset?: string;
+    tooltipScope?: string;
 
     onImageBrowseClick?: () => void;
     onImageSettingClick?: () => void;
@@ -388,6 +397,12 @@ interface ContentBoxOptions {
     maxAutoSaveInterval?: number;
     minAutoSaveInterval?: number;
     autoSave?: () => void | Promise<void>;
+
+    onLoadHtml?: () => void | Promise<void>;
+    iframeDragDrop?: boolean;
+
+    activeStyleOffset?: number;
+    contentStylesVersion?: number;
 }
 
 interface OpenModalOptions {
@@ -400,6 +415,15 @@ interface OpenModalOptions {
     onClose?: (modal: HTMLElement, iframe: HTMLIFrameElement) => void; // callback when closed
 }
 
+interface LoadAssetOptions {
+    retries?: number;
+    retryDelay?: number;
+}
+interface InlineScriptOptions {
+    retries?: number;
+    retryDelay?: number;
+}
+
 declare class ContentBox {
     constructor(options: ContentBoxOptions);
 
@@ -438,5 +462,46 @@ declare class ContentBox {
         btn?: HTMLElement
     ): void;
     openIconPicker(callback: (iconHtml: string) => void): void;
+    loadSectionList(): void;
+    loadTypographyList(): void;
+    addSection(html: string): void;
+
+    loadAsset(
+        id: string,
+        tag: 'script' | 'link',
+        attrs: Record<string, any>,
+        options?: LoadAssetOptions
+    ): Promise<HTMLElement>;
+
+    loadInlineScript(
+        id: string,
+        code: string,
+        options?: InlineScriptOptions
+    ): Promise<HTMLScriptElement>;
+
+    runInlineScript(
+        id: string,
+        code: string,
+        options?: InlineScriptOptions
+    ): Promise<HTMLScriptElement>;
+
+    onLoadHtml?: () => void | Promise<void>;
+
+    setTopContentProvider(provider: (() => string) | null): void;
+    setBottomContentProvider(provider: (() => string) | null): void;
+
+    setTypographyStyleScope(scope: string): void;
+
+    applyDragDropBlocks(snippetList: HTMLElement): void;
+
+    getActiveSectionHtml(numOfSections?: number): string;
+
+    applyTypographyStyle(className: string, cssFile?: string): void;
+    applyInlineTypographyStyle(className: string, cssText: string): void;
+    getInlineTypographyStyle(classname: string): string | null;
+
+    confirm(message: string, yesText?: string): Promise<boolean>;
+
+    refresh(): void;
 }
 export default ContentBox;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.179",
+  "version": "1.6.181",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "types": "index.d.ts",
@@ -59,7 +59,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.192",
+    "@innovastudio/contentbuilder": "^1.5.209",
     "js-beautify": "^1.14.0",
     "marked": "^17.0.0",
     "sortablejs": "^1.15.2"

package/public/contentbox/contentbox.css

@@ -4,7 +4,22 @@
 */
 @import url("https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.0/css/ionicons.min.css");
 @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
+:root {
+  --focus-outline-color: #3e93f7;
+  --rangeslider-thumb-color: #0e75de;
+}
+
 /* IFRAME */
+@media (max-width: 1366px) {
+  button[data-device=desktop-lg] {
+    display: none !important;
+  }
+
+  button[data-device=desktop] svg {
+    width: 1.2rem !important;
+    height: 1.2rem !important;
+  }
+}
 .is-content-view.desktop-lg {
   width: 1920px;
   height: 1080px;
@@ -906,6 +921,7 @@ body.controlpanel .is-content-view.mobile {
   font-weight: inherit;
   letter-spacing: inherit;
   line-height: 1;
+  transition: all 0.15s ease;
 }
 .builder-ui button.auto {
   width: auto;
@@ -938,8 +954,11 @@ body.controlpanel .is-content-view.mobile {
 .builder-ui button.on {
   background-color: rgb(237, 237, 237);
 }
+.builder-ui button.on:hover {
+  background-color: rgb(239, 239, 239);
+}
 .builder-ui button:not(.is-btn-color):hover {
-  background-color: rgb(237, 237, 237);
+  background-color: rgb(243, 244, 246);
 }
 .builder-ui .panel-plugin .is-accordion {
   display: flex;
@@ -974,7 +993,7 @@ body.controlpanel .is-content-view.mobile {
   border-radius: 4px;
 }
 .builder-ui .panel-plugin div[contenteditable=true]:focus-visible {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
 }
 .builder-ui .panel-plugin button {
   background-color: rgb(239, 239, 239);
@@ -990,6 +1009,14 @@ body.controlpanel .is-content-view.mobile {
   font-size: 14px;
   padding: 10px 13px;
 }
+.builder-ui .panel-plugin label {
+  display: flex;
+  font-size: 14px;
+  line-height: 1.6;
+}
+.builder-ui .panel-plugin .cb-settings-form {
+  margin-top: 20px;
+}
 .builder-ui .flex-unit {
   display: flex;
   gap: 15px;
@@ -1124,7 +1151,7 @@ body.controlpanel .is-content-view.mobile {
 .builder-ui textarea:focus,
 .builder-ui select:focus,
 .builder-ui div[contenteditable=true]:focus {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
   outline-offset: 0;
   box-shadow: none;
 }
@@ -1235,7 +1262,7 @@ body.controlpanel .is-content-view.mobile {
   margin-top: 3px;
 }
 .builder-ui .custom-select .select-styled:focus-visible {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
   outline-offset: -1px;
 }
 .builder-ui .custom-select .select-styled > span:first-child {
@@ -1347,6 +1374,81 @@ body.controlpanel .is-wrapper {
   margin-left: 0 !important;
 }
 
+/* Typography Selection */
+.typography-list {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-weight: 300;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  padding-top: 43px !important;
+  padding-bottom: 25px !important;
+}
+.typography-list > div {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #000;
+  border: rgba(205, 205, 205, 0.62) 1px solid;
+  box-shadow: 0px 7px 10px -6px rgba(0, 0, 0, 0.08);
+  position: relative;
+  cursor: pointer;
+  aspect-ratio: 4/4.6;
+}
+.typography-list > div div:first-child {
+  text-align: center;
+  position: absolute;
+  background: transparent;
+  top: -28px;
+  left: 0;
+  width: 100%;
+  font-size: 12px;
+  line-height: 1.4;
+  z-index: 1;
+}
+.typography-list > div img {
+  width: 100%;
+  height: auto;
+  min-height: 200px;
+  -webkit-transition: all 0.16s ease;
+  transition: all 0.16s ease;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.typography-list .is-overlay {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+}
+.typography-list > div .is-overlay:after {
+  background: rgba(0, 0, 0, 0.03);
+  position: absolute;
+  content: "";
+  display: block;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transition: all 0.3s ease-in-out;
+  opacity: 0;
+}
+.typography-list > div:hover .is-overlay:after {
+  opacity: 0.9;
+}
+.typography-list > div.active img {
+  outline: var(--focus-outline-color) 2px solid;
+  transition: none !important;
+}
+
+.is-design-list,
+.typography-list {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent !important;
+}
+
 .builder-ui .is-controlpanel {
   background-color: #fff;
   position: fixed;
@@ -1649,6 +1751,44 @@ body.controlpanel .is-wrapper {
   width: auto;
   padding: 0 14px;
 }
+.builder-ui .is-controlpanel .group.imageeffect, .builder-ui .is-controlpanel .group.aspectratio, .builder-ui .is-controlpanel .group.duration, .builder-ui .is-controlpanel .group.topspacing {
+  width: 225px;
+}
+.builder-ui .is-controlpanel .group.imageeffect button, .builder-ui .is-controlpanel .group.aspectratio button, .builder-ui .is-controlpanel .group.duration button, .builder-ui .is-controlpanel .group.topspacing button {
+  width: 50px;
+  transition: all 0.15s ease;
+}
+.builder-ui .is-controlpanel .group.imageeffect button.active, .builder-ui .is-controlpanel .group.aspectratio button.active, .builder-ui .is-controlpanel .group.duration button.active, .builder-ui .is-controlpanel .group.topspacing button.active {
+  background-color: rgb(233, 233, 233);
+}
+.builder-ui .is-controlpanel .group.imageeffect button.active:hover, .builder-ui .is-controlpanel .group.aspectratio button.active:hover, .builder-ui .is-controlpanel .group.duration button.active:hover, .builder-ui .is-controlpanel .group.topspacing button.active:hover {
+  background-color: rgb(235, 235, 235);
+}
+.builder-ui .is-controlpanel .group.imageeffect button:hover, .builder-ui .is-controlpanel .group.aspectratio button:hover, .builder-ui .is-controlpanel .group.duration button:hover, .builder-ui .is-controlpanel .group.topspacing button:hover {
+  background-color: rgb(243, 244, 246);
+}
+.builder-ui .is-controlpanel .group.imageeffect button {
+  width: 105px;
+}
+.builder-ui .is-controlpanel .group.duration button {
+  width: 39px;
+}
+.builder-ui .is-controlpanel .group.topspacing button {
+  width: 39px;
+}
+.builder-ui .is-controlpanel button.toggle {
+  width: 36px;
+  transition: all 0.15s ease;
+}
+.builder-ui .is-controlpanel button.toggle.active {
+  background-color: rgb(233, 233, 233);
+}
+.builder-ui .is-controlpanel button.toggle.active:hover {
+  background-color: rgb(235, 235, 235);
+}
+.builder-ui .is-controlpanel button.toggle:hover {
+  background-color: rgb(243, 244, 246);
+}
 .builder-ui .is-controlpanel .label.changedevice {
   display: flex;
   flex-direction: row;
@@ -1921,7 +2061,7 @@ body.controlpanel .is-wrapper {
   opacity: 1;
 }
 .is-rangeslider:focus {
-  outline: #3e93f7 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
   outline-offset: 2px;
 }
 .is-rangeslider::-webkit-slider-thumb {
@@ -1930,7 +2070,7 @@ body.controlpanel .is-wrapper {
   width: 25px !important;
   height: 24px !important;
   border-radius: 3px !important;
-  background: #0e75de;
+  background: var(--rangeslider-thumb-color);
   cursor: pointer;
   margin: 0 !important;
 }
@@ -1938,7 +2078,7 @@ body.controlpanel .is-wrapper {
   width: 25px !important;
   height: 24px !important;
   border-radius: 3px !important;
-  background: #0e75de;
+  background: var(--rangeslider-thumb-color);
   cursor: pointer;
   margin: 0 !important;
 }
@@ -2221,11 +2361,14 @@ body.frame-center.controlpanel .is-content-view {
 .dark .builder-ui button.is-btn-color {
   border: 1px solid transparent;
 }
-.dark .builder-ui button.on {
+.dark .builder-ui button:not(.is-btn-color).on {
   background-color: rgb(69, 69, 69);
 }
+.dark .builder-ui button:not(.is-btn-color).on:hover {
+  background-color: rgb(64, 64, 64);
+}
 .dark .builder-ui button:not(.is-btn-color):hover {
-  background-color: rgb(69, 69, 69);
+  background-color: rgb(59, 59, 59);
 }
 .dark .builder-ui .panel-plugin .is-accordion > div {
   border: 1px solid #6e6e6e;
@@ -2280,6 +2423,28 @@ body.frame-center.controlpanel .is-content-view {
 .dark .builder-ui .is-controlpanel .panel-dialog.blocks .div-blocks > div {
   outline: #d5d5d5 1px solid;
 }
+.dark .builder-ui .is-controlpanel .group.imageeffect button.active, .dark .builder-ui .is-controlpanel .group.aspectratio button.active, .dark .builder-ui .is-controlpanel .group.duration button.active, .dark .builder-ui .is-controlpanel .group.topspacing button.active {
+  background-color: rgb(69, 69, 69);
+}
+.dark .builder-ui .is-controlpanel .group.imageeffect button.active:hover, .dark .builder-ui .is-controlpanel .group.aspectratio button.active:hover, .dark .builder-ui .is-controlpanel .group.duration button.active:hover, .dark .builder-ui .is-controlpanel .group.topspacing button.active:hover {
+  background-color: rgb(64, 64, 64);
+}
+.dark .builder-ui .is-controlpanel .group.imageeffect button:hover, .dark .builder-ui .is-controlpanel .group.aspectratio button:hover, .dark .builder-ui .is-controlpanel .group.duration button:hover, .dark .builder-ui .is-controlpanel .group.topspacing button:hover {
+  background-color: rgb(59, 59, 59);
+}
+.dark .builder-ui .is-controlpanel .group button.toggle {
+  width: 36px;
+  transition: all 0.15s ease;
+}
+.dark .builder-ui .is-controlpanel .group button.toggle.active {
+  background-color: rgb(69, 69, 69);
+}
+.dark .builder-ui .is-controlpanel .group button.toggle.active:hover {
+  background-color: rgb(64, 64, 64);
+}
+.dark .builder-ui .is-controlpanel .group button.toggle:hover {
+  background-color: rgb(59, 59, 59);
+}
 .dark .builder-ui .custom-select {
   --cs-height: 46px;
   --cs-border: 1px solid #5e5e5e;
@@ -2649,7 +2814,7 @@ body.frame-center.controlpanel .is-content-view {
   margin: 30px 0 70px;
   display: flex;
   color: #000;
-  border: rgba(205, 205, 205, 0.32) 1px solid;
+  border: rgba(205, 205, 205, 0.75) 1px solid;
   box-shadow: 0px 7px 10px -6px rgba(0, 0, 0, 0.08);
   position: relative;
   cursor: pointer;
@@ -2712,7 +2877,7 @@ body.frame-center.controlpanel .is-content-view {
 }
 
 #divStyles > div.active img {
-  outline: #5fa1f0 2px solid;
+  outline: var(--focus-outline-color) 2px solid;
   transition: none !important;
 }
 
@@ -2964,7 +3129,7 @@ body.frame-center.controlpanel .is-content-view {
 }
 
 .ai-disclaimer .input-ok:focus {
-  outline: #3e93f7 2px solid !important;
+  outline: var(--focus-outline-color) 2px solid !important;
   outline-offset: 2px !important;
 }