@innovastudio/contentbox 1.6.149 → 1.6.151

package/index.d.ts

@@ -81,6 +81,10 @@ interface ContentBoxOptions {
     audioSelect?: string;
     mediaSelect?: string;
 
+    filePicker?: string;
+
+    assetBasePath?: string;
+
     selectIcon?: string;
     otherSelectCaption?: string;
     otherSelectIcon?: string;
@@ -148,7 +152,8 @@ interface ContentBoxOptions {
     photoselect?: string;
     moduleConfig?: any[]; 
 
-    uploadFile?: (file: File) => Promise<any>;
+    upload?: (file: File) => Promise<any>;
+    uploadFile?: (e: Event) => Promise<any>;
 
     largerImageHandler?: string;
     onLargerImageUpload?: () => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.149",
+  "version": "1.6.151",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "types": "index.d.ts",
@@ -59,7 +59,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.144",
+    "@innovastudio/contentbuilder": "^1.5.149",
     "js-beautify": "^1.14.0",
     "sortablejs": "^1.15.2"
   }

package/public/contentbox/contentbox.css

@@ -2363,8 +2363,8 @@ body.frame-center.controlpanel .is-content-view {
   cursor: pointer;
 }
 #_cbhtml .is-sidebar button.is-sidebar-button svg {
-  width: 16px;
-  height: 16px;
+  width: 18px;
+  height: 18px;
 }
 #_cbhtml .is-sidebar button.is-sidebar-button span {
   font-family: serif;

package/public/contentbox/contentbox.esm.js

@@ -363,7 +363,7 @@ const prepareSvgIcons$1 = builder => {
                 <path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path>
             </symbol>
 
-            <symbol id="icon-typography" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol id="icon-typography" viewBox="0 0 24 24" stroke-width="1,3" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <line x1="4" y1="20" x2="7" y2="20"></line>
                 <line x1="14" y1="20" x2="21" y2="20"></line>
@@ -372,12 +372,6 @@ const prepareSvgIcons$1 = builder => {
                 <polyline points="5 20 11 4 13 4 20 20"></polyline>
             </symbol>
 
-            <symbol id="icon-plus" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                <line x1="12" y1="5" x2="12" y2="19"></line>
-                <line x1="5" y1="12" x2="19" y2="12"></line>
-            </symbol>
-
             <symbol id="icon-hand-move" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M8 13v-8.5a1.5 1.5 0 0 1 3 0v7.5"></path>
@@ -388,7 +382,7 @@ const prepareSvgIcons$1 = builder => {
                 <path d="M14 3.458c1.32 .354 2.558 .902 3.685 1.612"></path>
             </symbol>
             
-            <symbol id="icon-wand" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol id="icon-wand" viewBox="0 0 24 24" stroke-width="1.05" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <polyline points="6 21 21 6 18 3 3 18 6 21"></polyline>
                 <line x1="15" y1="6" x2="18" y2="9"></line>
@@ -622,7 +616,7 @@ const prepareSvgIcons$1 = builder => {
                 <path d="M6 15l6 -6l6 6"></path>
             </symbol>
 
-            <symbol id="icon-anim-timeline" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol id="icon-anim-timeline" viewBox="0 0 24 24" stroke-width="1.1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M9.225 18.412a1.595 1.595 0 0 1 -1.225 .588c-.468 0 -.914 -.214 -1.225 -.588l-4.361 -5.248a1.844 1.844 0 0 1 0 -2.328l4.361 -5.248a1.595 1.595 0 0 1 1.225 -.588c.468 0 .914 .214 1.225 .588l4.361 5.248a1.844 1.844 0 0 1 0 2.328l-4.361 5.248z"></path>
                 <path d="M17 5l4.586 5.836a1.844 1.844 0 0 1 0 2.328l-4.586 5.836"></path>
@@ -631,6 +625,9 @@ const prepareSvgIcons$1 = builder => {
             <symbol id="icon-download" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" /><path d="M7 11l5 5l5 -5" /><path d="M12 4l0 12" />
             </symbol>
+            <symbol id="icon-blocks" viewBox="0 0 24 24" stroke-width="1.3" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" /><path d="M4 4l0 .01" /><path d="M8 4l0 .01" /><path d="M12 4l0 .01" /><path d="M16 4l0 .01" /><path d="M4 8l0 .01" /><path d="M4 12l0 .01" /><path d="M4 16l0 .01" />
+            </symbol>
 
             </defs>
         </svg>`;
@@ -979,7 +976,7 @@ class SideBar {
           '<svg class="svg-icon"><use xlink:href="#icon-plus"></use></svg>' + '</button>';
         } else if (button.name === 'snippet') {
           html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarSnippets" data-title="' + out(button.title) + '" title="' + out(button.title) + '">' + // '<svg class="svg-icon"><use xlink:href="#icon-align-center"></use></svg>' +
-          '<svg class="svg-icon"><use xlink:href="#icon-box-multiple"></use></svg>' + '</button>';
+          '<svg class="svg-icon" style="width:20px;height:20px"><use xlink:href="#icon-blocks"></use></svg>' + '</button>';
         } else if (button.name === 'typography') {
           if (this.builder.enableContentStyle) {
             html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarTypography" data-command="typography" data-title="' + out(button.title) + '" title="' + out(button.title) + '">' + // '<span style="">a</span>' +
@@ -25259,12 +25256,14 @@ class Settings {
                     <option value="actual">${out('Actual')}</option>
                 </select>
 
+                ${this.builder.themes && this.builder.themes.length > 0 ? `
                 <div class="label">${out('Theme')}:</div>
                 <div class="group">
                     <button type="button" title="${out('Light')}" data-theme="light" style="background:#fff;border:rgb(132 132 132 / 16%) 1px solid;"></button>
                     <button type="button" title="${out('Dark')}" data-theme="dark" style="background:#000;border:rgba(0,0,0,0.15) 1px solid;"></button>
                 </div>
-
+                ` : ''}
+                
             </div>
         `;
     dialog.insertAdjacentHTML('beforeend', html);
@@ -42263,7 +42262,7 @@ const prepareSvgIcons = builder => {
                 <circle cx="12" cy="16" r="1" />
                 <path d="M8 11v-4a4 4 0 0 1 8 0v4" />
             </symbol>
-            <symbol viewBox="0 0 24 24" id="icon-code" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol viewBox="0 0 24 24" id="icon-code" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z"/>
                 <polyline points="7 8 3 12 7 16" />
                 <polyline points="17 8 21 12 17 16" />
@@ -42551,7 +42550,7 @@ const prepareSvgIcons = builder => {
                 <path d="M17 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2" /><path d="M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4" /><path d="M7 13m0 2a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2z" />
             </symbol>
 
-            <symbol id="icon-plus" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol id="icon-plus" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <line x1="12" y1="5" x2="12" y2="19"></line>
                 <line x1="5" y1="12" x2="19" y2="12"></line>
@@ -110406,6 +110405,10 @@ class Dictation {
       const inpCommandLang = this.modalConfig.querySelector('.input-command-lang');
       localStorage.setItem('_command_lang', inpCommandLang.value);
       this.builder.speechRecognitionLang = inpCommandLang.value;
+      const inpImageModelSelect = this.modalConfig.querySelector('#inpImageModelSelect');
+      localStorage.setItem('_image_model', inpImageModelSelect.value);
+      const inpImageSizeSelect = this.modalConfig.querySelector('#inpImageSizeSelect');
+      localStorage.setItem('_image_size', inpImageSizeSelect.value);
       this.builder.hideModal(this.modalConfig);
     });
     const btnConfigReset = this.modalConfig.querySelector('.input-reset');
@@ -110686,8 +110689,12 @@ class Dictation {
     let models = this.imageModels;
 
     // Default selections
-    const defaultModelId = this.builder.imageModel || 'fal-ai/flux-1/schnell';
-    const defaultSize = this.builder.imageSize || 'landscape_4_3';
+    let defaultModelId = this.builder.imageModel || 'fal-ai/flux-1/schnell';
+    let defaultSize = this.builder.imageSize || 'landscape_4_3';
+    const storedModel = localStorage.getItem('_image_model');
+    if (storedModel) defaultModelId = storedModel;
+    const storedSize = localStorage.getItem('_image_size');
+    if (storedSize) defaultSize = storedSize;
 
     // Helper: return available sizes for a model
     function getSizesForModel(modelId) {
@@ -120459,17 +120466,27 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
 
     this.opts = Object.assign(this, defaults, opts);
     if (this.opts.uploadFile) {
-      const uploadHandler = () => {
-        return async file => {
-          const data = await this.opts.uploadFile(file);
-          this.returnUrl(data.url);
-        };
+      const uploadHandler = async e => {
+        const data = await this.opts.uploadFile(e);
+        this.returnUrl(data.url);
+      };
+      this.onImageUpload = uploadHandler;
+      this.onVideoUpload = uploadHandler;
+      this.onAudioUpload = uploadHandler;
+      this.onMediaUpload = uploadHandler;
+      this.onFileUpload = uploadHandler;
+    }
+    if (this.opts.upload) {
+      const uploadHandler = async e => {
+        const file = e.target.files[0];
+        const data = await this.opts.upload(file);
+        this.returnUrl(data.url);
       };
-      this.onImageUpload = uploadHandler();
-      this.onVideoUpload = uploadHandler();
-      this.onAudioUpload = uploadHandler();
-      this.onMediaUpload = uploadHandler();
-      this.onFileUpload = uploadHandler();
+      this.onImageUpload = uploadHandler;
+      this.onVideoUpload = uploadHandler;
+      this.onAudioUpload = uploadHandler;
+      this.onMediaUpload = uploadHandler;
+      this.onFileUpload = uploadHandler;
     }
     if (this.opts.basePath) {
       this.opts.assetPath = this.opts.basePath + 'assets/';
@@ -120568,6 +120585,19 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     } else if (this.opts.videoselect !== '') {
       this.opts.videoSelect = this.opts.videoselect;
     }
+    if (this.opts.filePicker) {
+      this.opts.imageSelect = this.opts.filePicker;
+      this.opts.videoSelect = this.opts.filePicker;
+      this.opts.audioSelect = this.opts.filePicker;
+      this.opts.fileSelect = this.opts.filePicker;
+      this.opts.mediaSelect = this.opts.filePicker;
+      // this.settings.otherSelect = this.settings.filePicker; // this enables additional selector button on link dialog
+
+      // backward compatible
+      this.settings.imageselect = this.settings.filePicker;
+      this.settings.fileselect = this.settings.filePicker;
+      this.settings.videoselect = this.settings.filePicker;
+    }
     if (this.assetPanelFullScreen) {
       this.imageSelectWidth = '100vw';
       this.imageSelectHeight = '100vh';
@@ -134600,63 +134630,97 @@ class Util {
     this.builder = builder;
   }
 
-  getPageTemplate(framework) {
+  getPageTemplate(framework, options) {
     let pageTemplate = '';
 
     if (framework === '') {
-      pageTemplate = `
-            <!DOCTYPE html>
-            <html lang="en">
-            <head>
-                <meta charset="utf-8">
-                <title>Page</title>
-                <meta name="viewport" content="width=device-width, initial-scale=1">
-                <meta name="description" content="">
-                <link rel="shortcut icon" href="#">
-                
-                <link href="[%PATH%]/assets/minimalist-blocks/content.css" rel="stylesheet"> 
-                <link href="[%PATH%]/box/box-flex.css" rel="stylesheet">
-    
-                [%MAINCSS%]
-                [%SECTIONCSS%]
-            </head>
-            <body style="touch-action: pan-y">
-                
-            <main id="main">
-                <div class="is-wrapper">
-                    [%CONTENT%]
-                </div>
-            </main>
-            
-            <link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet">
-            <link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet">
-            <script src="[%PATH%]/assets/scripts/glide/glide.js"></script>
-    
-            <link href="[%PATH%]/assets/scripts/navbar/navbar.css" rel="stylesheet">
-            <script src="[%PATH%]/assets/scripts/navbar/navbar.min.js"></script>
+      if (options.runtime) {
+        pageTemplate = `
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Page</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="A drag & drop HTML editor Javascript library for web applications.">  
+    <link rel="shortcut icon" href="#"> 
+    [%MAINCSS%]
+    [%SECTIONCSS%]
+    <link href="[%PATH%]/runtime/contentbox-runtime.css" rel="stylesheet">
+</head>
+<body style="touch-action: pan-y">
+
+<div class="is-wrapper">
+    [%CONTENT%]
+</div>
+
+<script src="[%PATH%]/runtime/contentbox-runtime.min.js"></script>
+<script>
+    const libraryInstance = new ContentBoxRuntime();
+    libraryInstance.init();
+</script>
+
+<!-- Optional: smooth scrolling -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script>
+
+</body>
+</html>
+`;
+      } else {
+        pageTemplate = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Page</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <link rel="shortcut icon" href="#">
     
-            <script src="[%PATH%]/box/box-flex.js"></script>
+    <link href="[%PATH%]/assets/minimalist-blocks/content.css" rel="stylesheet"> 
+    <link href="[%PATH%]/box/box-flex.css" rel="stylesheet">
+
+    [%MAINCSS%]
+    [%SECTIONCSS%]
+</head>
+<body style="touch-action: pan-y">
     
-            <!-- Optional: if you want to add smooth scrolling -->
-            <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script>
-            <script>
-            SmoothScroll({
-                frameRate: 150,
-                animationTime: 800,
-                stepSize: 120,
-                pulseAlgorithm: 1,
-                pulseScale: 4,
-                pulseNormalize: 1,
-                accelerationDelta: 300,
-                accelerationMax: 2,
-                keyboardSupport: 1,
-                arrowScroll: 50,
-                fixedBackground: 0
-            });
-            </script>
-            </body>
-            </html>
-            `;
+<main id="main">
+    <div class="is-wrapper">
+        [%CONTENT%]
+    </div>
+</main>
+
+<link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet">
+<link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet">
+<script src="[%PATH%]/assets/scripts/glide/glide.js"></script>
+
+<link href="[%PATH%]/assets/scripts/navbar/navbar.css" rel="stylesheet">
+<script src="[%PATH%]/assets/scripts/navbar/navbar.min.js"></script>
+
+<script src="[%PATH%]/box/box-flex.js"></script>
+
+<!-- Optional: if you want to add smooth scrolling -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script>
+<script>
+SmoothScroll({
+    frameRate: 150,
+    animationTime: 800,
+    stepSize: 120,
+    pulseAlgorithm: 1,
+    pulseScale: 4,
+    pulseNormalize: 1,
+    accelerationDelta: 300,
+    accelerationMax: 2,
+    keyboardSupport: 1,
+    arrowScroll: 50,
+    fixedBackground: 0
+});
+</script>
+</body>
+</html>
+`;
+      }
     } else if (framework === 'tailwind') {
       pageTemplate = `
             <!DOCTYPE html>
@@ -157649,64 +157713,13 @@ class ContentBox {
       maxColumns: 6,
       useLightbox: true,
       lightboxArrow: true,
-      themes: [['#ffffff', '', ''], ['#282828', 'dark', 'contentbuilder/themes/dark.css']
-      /*['#0088dc','colored','contentbuilder/themes/colored-blue.css'],
-      ['#006add','colored','contentbuilder/themes/colored-blue6.css'],
-      ['#0a4d92','colored','contentbuilder/themes/colored-darkblue.css'],
-      ['#96af16','colored','contentbuilder/themes/colored-green.css'],
-      ['#f3522b','colored','contentbuilder/themes/colored-orange.css'],
-               ['#b92ea6','colored','contentbuilder/themes/colored-magenta.css'],
-      ['#e73171','colored','contentbuilder/themes/colored-pink.css'],
-      ['#782ec5','colored','contentbuilder/themes/colored-purple.css'],
-      ['#ed2828','colored','contentbuilder/themes/colored-red.css'],
-      ['#f9930f','colored','contentbuilder/themes/colored-yellow.css'],
-      ['#13b34b','colored','contentbuilder/themes/colored-green4.css'],
-      ['#333333','colored-dark','contentbuilder/themes/colored-dark.css'], 
-      
-      ['#dbe5f5','light','contentbuilder/themes/light-blue.css'],
-      ['#fbe6f2','light','contentbuilder/themes/light-pink.css'],
-      ['#dcdaf3','light','contentbuilder/themes/light-purple.css'],
-      ['#ffe9e0','light','contentbuilder/themes/light-red.css'],
-      ['#fffae5','light','contentbuilder/themes/light-yellow.css'],
-      ['#ddf3dc','light','contentbuilder/themes/light-green.css'],
-      ['#c7ebfd','light','contentbuilder/themes/light-blue2.css'],
-      
-      ['#ffd5f2','light','contentbuilder/themes/light-pink2.css'],
-      ['#eadafb','light','contentbuilder/themes/light-purple2.css'],
-      ['#c5d4ff','light','contentbuilder/themes/light-blue3.css'],
-      ['#ffefb1','light','contentbuilder/themes/light-yellow2.css'],
-      ['#fefefe','light','contentbuilder/themes/light-gray3.css'],
-      ['#e5e5e5','light','contentbuilder/themes/light-gray2.css'],
-      ['#dadada','light','contentbuilder/themes/light-gray.css'],
-               ['#3f4ec9','colored','contentbuilder/themes/colored-blue2.css'],
-      ['#6779d9','colored','contentbuilder/themes/colored-blue4.css'],
-      ['#10b9d7','colored','contentbuilder/themes/colored-blue3.css'], 
-      ['#006add','colored','contentbuilder/themes/colored-blue5.css'],
-      ['#e92f94','colored','contentbuilder/themes/colored-pink3.css'],
-      ['#a761d9','colored','contentbuilder/themes/colored-purple2.css'],
-      ['#f9930f','colored','contentbuilder/themes/colored-yellow2.css'],
-               ['#f3522b','colored','contentbuilder/themes/colored-red3.css'],
-      ['#36b741','colored','contentbuilder/themes/colored-green2.css'],
-      ['#00c17c','colored','contentbuilder/themes/colored-green3.css'],
-      ['#fb3279','colored','contentbuilder/themes/colored-pink2.css'],
-      ['#ff6d13','colored','contentbuilder/themes/colored-orange2.css'], 
-      ['#f13535','colored','contentbuilder/themes/colored-red2.css'],
-      ['#646464','colored','contentbuilder/themes/colored-gray.css'],
-               ['#3f4ec9','dark','contentbuilder/themes/dark-blue.css'],
-      ['#0b4d92','dark','contentbuilder/themes/dark-blue2.css'],
-      ['#006add','dark','contentbuilder/themes/dark-blue3.css'],
-      ['#5f3ebf','dark','contentbuilder/themes/dark-purple.css'],
-      ['#e92f69','dark','contentbuilder/themes/dark-pink.css'],
-      ['#4c4c4c','dark','contentbuilder/themes/dark-gray.css'],
-      ['#ed2828','dark','contentbuilder/themes/dark-red.css'],
-               ['#006add','colored','contentbuilder/themes/colored-blue8.css'],
-      ['#ff7723','colored','contentbuilder/themes/colored-orange3.css'],
-      ['#ff5722','colored','contentbuilder/themes/colored-red5.css'],
-      ['#f13535','colored','contentbuilder/themes/colored-red4.css'],
-      ['#00bd79','colored','contentbuilder/themes/colored-green5.css'],
-      ['#557ae9','colored','contentbuilder/themes/colored-blue7.css'],
-      ['#fb3279','colored','contentbuilder/themes/colored-pink4.css'],*/
+
+      /*
+      themes: [ 
+          ['#ffffff','',''],
+          ['#282828','dark','contentbuilder/themes/dark.css'], 
       ],
+      */
       backgroundColor: '#f1f1f1',
       imageselect: '',
       fileselect: '',
@@ -157741,6 +157754,27 @@ class ContentBox {
       audioSelectMaxWidth: '1600px',
       mediaSelectMaxWidth: '1600px',
       otherSelectMaxWidth: '1600px',
+
+      /*
+      imageSelectWidth: '100%',
+      imageSelectHeight: '90vh',
+      fileSelectWidth: '100%',
+      fileSelectHeight: '90vh',
+      videoSelectWidth: '100%',
+      videoSelectHeight: '90vh',
+      audioSelectWidth: '100%',
+      audioSelectHeight: '90vh',
+      mediaSelectWidth: '100%',
+      mediaSelectHeight: '90vh',
+      otherSelectWidth: '100%',
+      otherSelectHeight: '90vh',
+       imageSelectMaxWidth: '90vw',
+      fileSelectMaxWidth: '90vw',
+      videoSelectMaxWidth: '90vw',
+      audioSelectMaxWidth: '90vw',
+      mediaSelectMaxWidth: '90vw',
+      otherSelectMaxWidth: '90vw',
+      */
       assetPanelFullScreen: false,
       codeEditorWidth: '80vw',
       codeEditorHeight: '80vh',
@@ -160787,24 +160821,41 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     }
 
     if (this.uploadFile) {
-      const uploadHandler = type => {
-        return async file => {
-          const data = await this.uploadFile(file);
+      const uploadHandler = async e => {
+        const data = await this.uploadFile(e);
+        this.returnUrl(data.url);
+      };
 
-          if (type === 'cover') {
-            this.boxImage(data.url);
-          } else {
-            this.returnUrl(data.url);
-          }
-        };
+      this.onImageUpload = uploadHandler;
+      this.onVideoUpload = uploadHandler;
+      this.onAudioUpload = uploadHandler;
+      this.onMediaUpload = uploadHandler;
+      this.onFileUpload = uploadHandler; // Cover upload needs special handling
+
+      this.onUploadCoverImage = async e => {
+        const data = await this.uploadFile(e);
+        this.boxImage(data.url);
       };
+    }
+
+    if (this.upload) {
+      const uploadHandler = async e => {
+        const file = e.target.files[0];
+        const data = await this.upload(file);
+        this.returnUrl(data.url);
+      };
+
+      this.onImageUpload = uploadHandler;
+      this.onVideoUpload = uploadHandler;
+      this.onAudioUpload = uploadHandler;
+      this.onMediaUpload = uploadHandler;
+      this.onFileUpload = uploadHandler; // Cover upload needs special handling
 
-      this.onUploadCoverImage = uploadHandler('cover');
-      this.onImageUpload = uploadHandler('image');
-      this.onVideoUpload = uploadHandler('video');
-      this.onAudioUpload = uploadHandler('audio');
-      this.onMediaUpload = uploadHandler('media');
-      this.onFileUpload = uploadHandler('file');
+      this.onUploadCoverImage = async e => {
+        const file = e.target.files[0];
+        const data = await this.upload(file);
+        this.boxImage(data.url);
+      };
     }
 
     if (this.topSpace) {
@@ -160855,6 +160906,67 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       this.settings.videoselect = this.settings.videoSelect;
     } else if (this.settings.videoselect !== '') {
       this.settings.videoSelect = this.settings.videoselect;
+    }
+
+    if (this.settings.filePicker) {
+      this.settings.imageSelect = this.settings.filePicker;
+      this.settings.videoSelect = this.settings.filePicker;
+      this.settings.audioSelect = this.settings.filePicker;
+      this.settings.fileSelect = this.settings.filePicker;
+      this.settings.mediaSelect = this.settings.filePicker; // this.settings.otherSelect = this.settings.filePicker; // this enables additional selector button on link dialog
+      // backward compatible
+
+      this.settings.imageselect = this.settings.filePicker;
+      this.settings.fileselect = this.settings.filePicker;
+      this.settings.videoselect = this.settings.filePicker;
+    }
+
+    const assetBasePath = this.settings.assetBasePath; // if set, must end with /
+
+    if (assetBasePath !== undefined) {
+      this.settings.iframeSrc = settings.iframeSrc || `${assetBasePath}blank.html`; // Base path for general assets
+
+      this.settings.assetPath = settings.assetPath || `${assetBasePath}assets/`; // Font assets path
+
+      this.settings.fontAssetPath = settings.fontAssetPath || `${assetBasePath}assets/fonts/`; // Snippet file and related paths
+
+      this.settings.snippetUrl = settings.snippetUrl || `${assetBasePath}assets/minimalist-blocks/content.js`; // Full URL to snippet file
+
+      this.settings.snippetPath = settings.snippetPath || `${assetBasePath}assets/minimalist-blocks/`; // Base path for images and resources
+
+      this.settings.snippetPathReplace = settings.snippetPathReplace || ['assets/minimalist-blocks/', `${assetBasePath}assets/minimalist-blocks/`]; // Replace local image paths with remote URLs
+      // Module and plugin paths
+
+      this.settings.modulePath = settings.modulePath || `${assetBasePath}assets/modules/`; // module files. Use local path to avoid CORS issues (e.g., public/assets/modules/)
+
+      this.settings.pluginPath = settings.pluginPath || `${assetBasePath}contentbuilder/`; // plugin files
+      // Typography styles path
+
+      this.settings.contentStylePath = settings.contentStylePath || `${assetBasePath}assets/styles/`; // Templates path
+
+      this.settings.templates = settings.templates || [{
+        url: `${assetBasePath}assets/templates-simple/templates.js`,
+        path: `${assetBasePath}assets/templates-simple/`,
+        pathReplace: [],
+        numbering: true,
+        showNumberOnHover: true
+      }, {
+        url: `${assetBasePath}assets/templates-quick/templates.js`,
+        path: `${assetBasePath}assets/templates-quick/`,
+        pathReplace: [],
+        numbering: true,
+        showNumberOnHover: true
+      }, {
+        url: `${assetBasePath}assets/templates-animated/templates.js`,
+        path: `${assetBasePath}assets/templates-animated/`,
+        pathReplace: [],
+        numbering: true,
+        showNumberOnHover: true
+      }]; // Path adjustments for Form Builder
+
+      this.settings.assetsFolder = settings.assetsFolder || `${assetBasePath}assets/formfiles/`, this.settings.templatesUrl = settings.templatesUrl || `${assetBasePath}assets/templates.json`, this.settings.exampleImageUrl = settings.exampleImageUrl || `${assetBasePath}assets/formfiles/ai-V8Khk.jpg`;
+      this.settings.exampleVideoUrl = settings.exampleVideoUrl || `${assetBasePath}assets/formfiles/ai-thhyR.mp4`;
+      this.settings.exampleAudioUrl = settings.exampleAudioUrl || `${assetBasePath}assets/formfiles/ai-3EVMb.wav`;
     } // if(this.settings.largerImageHandler!=='') {
     //     this.settings.mediaHandler = this.settings.largerImageHandler;
     // } else if(this.settings.mediaHandler!='') {
@@ -160899,10 +161011,6 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
 
     if (this.controlPanel) {
       this.controlpanel = new ControlPanel(this);
-    }
-
-    if (!this.pageTemplate) {
-      this.pageTemplate = this.util.getPageTemplate(this.framework);
     } // IFRAME
 
 
@@ -161518,6 +161626,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       onThemeChange: () => {
         this.refreshUIStyle();
       },
+      filePicker: this.settings.filePicker,
       fileSelect: this.settings.fileSelect,
       imageSelect: this.settings.imageSelect,
       videoSelect: this.settings.videoSelect,
@@ -165042,7 +165151,14 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
   }
 
   export(options = {}, shortenOutput = false) {
-    let pageTemplate = this.pageTemplate;
+    let pageTemplate;
+
+    if (this.pageTemplate) {
+      pageTemplate = this.pageTemplate;
+    } else {
+      pageTemplate = this.util.getPageTemplate(this.framework, options);
+    }
+
     let output = ''; // [%CONTENT%]
 
     this.cleanupUnused();