@innovastudio/contentbuilder 1.4.95 → 1.4.97

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.4.95",
+  "version": "1.4.97",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.esm.js

@@ -14404,9 +14404,9 @@ class HtmlUtil {
             </div>
 
             <div class="is-modal viewhtmlmonaco" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <div class="is-modal-content" style="max-width: 55vw;padding:0">
+                <div class="is-modal-content" style="width:${this.builder.blockCodeEditorWidth};max-width:${this.builder.blockCodeEditorMaxWidth};padding:0">
                     <textarea style="position:absolute;display:none;"></textarea>
-                    <div class="input-code-editor" style="width:100%;height:65vh;"></div>
+                    <div class="input-code-editor" style="width:100%;height:${this.builder.blockCodeEditorHeight};"></div>
                     <div class="is-modal-footer" style="display:flex;justify-content:flex-end;border-top:1px solid ${this.builder.styleSeparatorColor};">
                         <button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
                         <button title="${util.out('Ok')}" class="input-ok classic-primary">${util.out('Ok')}</button>
@@ -14415,8 +14415,8 @@ class HtmlUtil {
             </div>
 
             <div class="is-modal viewhtmlexternal" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <div class="is-modal-content" style="max-width: 55vw;padding:0">
-                    <div class="input-code-editor" style="width:100%;height:65vh;"></div>
+                <div class="is-modal-content" style="width:${this.builder.codeEditorWidth};max-width:${this.builder.codeEditorMaxWidth};padding:0">
+                    <div class="input-code-editor" style="width:100%;height:${this.builder.codeEditorHeight};"></div>
                     <div class="is-modal-footer" style="display:flex;justify-content:flex-end;border-top:1px solid ${this.builder.styleSeparatorColor};">
                         <button title="${util.out('Cancel')}" class="input-cancel classic-secondary">${util.out('Cancel')}</button>
                         <button title="${util.out('Ok')}" class="input-ok classic-primary">${util.out('Ok')}</button>
@@ -14783,6 +14783,16 @@ class HtmlUtil {
     this.builder.codeEditorArea = area;
     let codeEditor = viewhtml.querySelector('.input-code-editor');
     codeEditor.style.opacity = '';
+    let modelContent = viewhtml.querySelector('.is-modal-content');
+    if (mode === 'full') {
+      modelContent.style.width = this.builder.codeEditorWidth;
+      modelContent.style.maxWidth = this.builder.codeEditorMaxWidth;
+      codeEditor.style.height = this.builder.codeEditorHeight;
+    } else {
+      modelContent.style.width = this.builder.blockCodeEditorWidth;
+      modelContent.style.maxWidth = this.builder.blockCodeEditorMaxWidth;
+      codeEditor.style.height = this.builder.blockCodeEditorHeight;
+    }
   }
   fromViewToActual(html) {
     for (var key in hash$1) {
@@ -49652,13 +49662,13 @@ class Image$1 {
                 </div>
 
                 <div class="is-modal imageselect" style="z-index:10005" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                    <div style="max-width:${this.builder.imageSelectWidth};height:${this.builder.imageSelectHeight};padding:0;">
+                    <div style="width:${this.builder.imageSelectWidth};max-width:${this.builder.imageSelectMaxWidth};height:${this.builder.imageSelectHeight};padding:0;">
                         <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>
                     </div>
                 </div>
 
                 <div class="is-modal mediaselect" style="z-index:10005" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                    <div style="max-width:${this.builder.mediaSelectWidth};height:${this.builder.mediaSelectHeight};padding:0;">
+                    <div style="width:${this.builder.mediaSelectWidth};max-width:${this.builder.mediaSelectMaxWidth};height:${this.builder.mediaSelectHeight};padding:0;">
                         <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>
                     </div>
                 </div>
@@ -50085,6 +50095,8 @@ class Image$1 {
       if (this.builder.opts.onImageSelectClick || this.builder.opts.imageselect) {
         btnOpenAsset.style.display = 'block';
         dom.addEventListener(btnOpenAsset, 'click', () => {
+          let img = this.builder.activeImage;
+          let currentSrc = img ? img.getAttribute('src') : '';
           this.builder.openImageSelect(src => {
             this.builder.uo.saveForUndo();
             let img = this.builder.activeImage;
@@ -50105,7 +50117,7 @@ class Image$1 {
 
             //Trigger Render event
             this.builder.opts.onRender();
-          });
+          }, currentSrc);
         });
       } else {
         btnOpenAsset.style.display = 'none';
@@ -52731,12 +52743,12 @@ class Hyperlink {
             </div>
             
             <div class="is-modal fileselect" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <div class="is-modal-content" style="max-width:${this.builder.fileSelectWidth};height:${this.builder.fileSelectHeight};padding:0;">
+                <div class="is-modal-content" style="width:${this.builder.fileSelectWidth};max-width:${this.builder.fileSelectMaxWidth};height:${this.builder.fileSelectHeight};padding:0;">
                     <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>
                 </div>
             </div>
             <div class="is-modal otherselect" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <div class="is-modal-content" style="max-width:${this.builder.otherSelectWidth};height:${this.builder.otherSelectHeight};padding:0;">
+                <div class="is-modal-content" style="width:${this.builder.otherSelectWidth};max-width:${this.builder.otherSelectMaxWidth};height:${this.builder.otherSelectHeight};padding:0;">
                     <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>
                 </div>
             </div>
@@ -54849,7 +54861,7 @@ class Video {
             </div>
 
             <div class="is-modal videoselect" style="z-index:10005" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <div style="max-width:${this.builder.videoSelectWidth};height:${this.builder.videoSelectHeight};padding:0;">
+                <div style="width:${this.builder.videoSelectWidth};max-width:${this.builder.videoSelectMaxWidth};height:${this.builder.videoSelectHeight};padding:0;">
                     <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>
                 </div>
             </div>
@@ -55060,7 +55072,7 @@ class Audio {
             </div>
 
             <div class="is-modal audioselect" style="z-index:10005" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-                <div style="max-width:${this.builder.audioSelectWidth};height:${this.builder.audioSelectHeight};padding:0;">
+                <div style="width:${this.builder.audioSelectWidth};max-width:${this.builder.audioSelectMaxWidth};height:${this.builder.audioSelectHeight};padding:0;">
                     <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>
                 </div>
             </div>
@@ -60112,6 +60124,8 @@ class ColumnTool {
         const inpSrc = this.cellSettings.querySelector('.input-src');
         elm = this.divCellClick.querySelector('.input-select');
         if (elm) dom.addEventListener(elm, 'click', () => {
+          //TODO: Simplify using openAsset
+
           //---default
           this.builder.targetInput = inpSrc; // used by selectAsset() (see contentbuilder.js)
           this.builder.targetCallback = () => {
@@ -78970,18 +78984,30 @@ class ContentBuilder {
       otherSelectCaption: 'Select Document',
       // otherSelectIcon: '<svg class="is-icon-flex"><use xlink:href="#ion-ios-folder-outline"></use></svg>',
       otherSelectIcon: '<svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#icon-list-search"></use></svg>',
-      imageSelectWidth: '1024px',
+      imageSelectWidth: '80vw',
       imageSelectHeight: '80vh',
-      fileSelectWidth: '1024px',
+      fileSelectWidth: '80vw',
       fileSelectHeight: '80vh',
-      videoSelectWidth: '1024px',
+      videoSelectWidth: '80vw',
       videoSelectHeight: '80vh',
-      audioSelectWidth: '1024px',
+      audioSelectWidth: '80vw',
       audioSelectHeight: '80vh',
-      mediaSelectWidth: '1024px',
+      mediaSelectWidth: '80vw',
       mediaSelectHeight: '80vh',
-      otherSelectWidth: '1024px',
+      otherSelectWidth: '80vw',
       otherSelectHeight: '80vh',
+      imageSelectMaxWidth: '1600px',
+      fileSelectMaxWidth: '1600px',
+      videoSelectMaxWidth: '1600px',
+      audioSelectMaxWidth: '1600px',
+      mediaSelectMaxWidth: '1600px',
+      otherSelectMaxWidth: '1600px',
+      codeEditorWidth: '80vw',
+      codeEditorHeight: '80vh',
+      codeEditorMaxWidth: '1600px',
+      blockCodeEditorWidth: '80vw',
+      blockCodeEditorHeight: '45vh',
+      blockCodeEditorMaxWidth: '960px',
       assetRefresh: false,
       // asset manager specified in imageSelect, fileSelect & videoSelect will always refreshed on click/open
       customTags: [],
@@ -80938,12 +80964,12 @@ class ContentBuilder {
     return this.targetAssetType; // not used yet
   }
 
-  openImageSelect(callback) {
+  openImageSelect(callback, defaultValue) {
     const inpUrl = document.createElement('input');
 
     // dummy button (for the openAsset() method, for the old Asset Manager. Not needed for the new.)
     const btn = document.createElement('button');
-    this.openAsset(inpUrl, 'image', btn);
+    this.openAsset(inpUrl, 'image', btn, defaultValue);
     let out = s => this.util.out(s);
     const desc = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
     Object.defineProperty(inpUrl, 'value', {
@@ -81036,7 +81062,9 @@ class ContentBuilder {
       this.targetAssetType = targetAssetType;
     }
   }
-  openAsset(targetInput, targetAssetType, theTrigger) {
+  openAsset(targetInput, targetAssetType, theTrigger, defaultValue) {
+    let iframe;
+    let modal;
     if (targetAssetType === 'media' && (this.opts.onMediaSelectClick || this.opts.onImageSelectClick)) {
       if (this.opts.onMediaSelectClick) {
         this.opts.onMediaSelectClick({
@@ -81070,8 +81098,6 @@ class ContentBuilder {
         theTrigger: theTrigger
       });
     } else {
-      let iframe;
-      let modal;
       if (targetAssetType === 'media') {
         modal = this.builderStuff.querySelector('.is-modal.mediaselect');
         iframe = modal.querySelector('iframe');
@@ -81100,6 +81126,23 @@ class ContentBuilder {
       this.targetCallback = null;
       this.targetAssetType = targetAssetType;
     }
+    if (!defaultValue) defaultValue = '';
+    if (targetInput && targetInput.value) {
+      defaultValue = targetInput.value;
+    }
+    if (this.onAssetOpen) {
+      if (iframe) {
+        if (iframe.contentWindow.document.body.innerHTML !== '') {
+          this.onAssetOpen(defaultValue, iframe.contentWindow);
+        } else {
+          iframe.addEventListener('load', () => {
+            this.onAssetOpen(defaultValue, iframe.contentWindow);
+          });
+        }
+      } else {
+        this.onAssetOpen(defaultValue, iframe);
+      }
+    }
   }
 
   // Grid