@innovastudio/contentbox 1.6.109 → 1.6.111

package/package.json

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

package/public/contentbox/contentbox.esm.js

@@ -27302,6 +27302,14 @@ class Snippets {
                     // }
 
                 }
+
+
+                if(!(parent._cb.win.FormViewer)){
+                    const result = snippets.filter((item)=>{
+                        return !(item.type === 'form');
+                    });
+                    snippets = [...result];
+                }
                 
 
                 for (let i = 0; i <snippets.length; i++) {
@@ -44467,6 +44475,15 @@ const renderSnippetPanel = (builder, snippetOpen) => {
 
     builder.opts.snippetJSON.snippets = [...snippets];
   }
+
+  // Exclude form snippet if FormViewer not found.
+  if (!builder.win.FormViewer) {
+    const result = snippets.filter(item => {
+      return !(item.type === 'form');
+    });
+    snippets = [...result];
+  }
+  builder.opts.snippetJSON.snippets = [...snippets];
   let index = 1;
   if (builder.opts.emailMode) {
     builder.opts.snippetJSON.snippets.forEach(item => {
@@ -71925,6 +71942,106 @@ var loadImageOrientation = {exports: {}};
 
 var js$2 = loadImage.exports;
 
+class DragDropImageUploader {
+  constructor(element, builder) {
+    this.element = element;
+    this.builder = builder;
+    this.targetImage = null;
+    this.isAttached = false;
+    this._onDragOver = this._onDragOver.bind(this);
+    this._onDragLeave = this._onDragLeave.bind(this);
+    this._onDrop = this._onDrop.bind(this);
+  }
+  attach() {
+    if (this.isAttached) return; // Prevent duplicate attachment
+
+    this.element.addEventListener('dragover', this._onDragOver);
+    this.element.addEventListener('dragleave', this._onDragLeave);
+    this.element.addEventListener('drop', this._onDrop);
+    this.isAttached = true;
+  }
+  detach() {
+    if (!this.isAttached) return;
+    this.element.removeEventListener('dragover', this._onDragOver);
+    this.element.removeEventListener('dragleave', this._onDragLeave);
+    this.element.removeEventListener('drop', this._onDrop);
+    this.isAttached = false;
+  }
+  _getImageUnderCursor(e) {
+    const doc = this.element.ownerDocument || document;
+    const range = doc.caretRangeFromPoint ? doc.caretRangeFromPoint(e.clientX, e.clientY) : doc.caretPositionFromPoint(e.clientX, e.clientY);
+    if (!range) return null;
+    const node = range.startContainer.nodeType === 1 ? range.startContainer : range.startContainer.parentElement;
+    if (this.element.getAttribute('id') === 'divImageResizer') {
+      return this.builder.activeImage;
+    }
+    return node.tagName === 'IMG' ? node : node.querySelector && node.querySelector('img');
+  }
+  async _onDrop(e) {
+    e.preventDefault();
+    if (this.targetImage) {
+      this.targetImage.classList.remove('drag-over-image');
+    }
+    const files = e.dataTransfer.files;
+    if (files && files.length > 0 && files[0].type.startsWith('image/')) {
+      const file = files[0];
+      const result = await this._onUpload(file);
+      if (result && this.targetImage) {
+        this.targetImage.setAttribute('src', result.url);
+
+        // finished steps:
+
+        // let imageProgress = document.querySelector('#divImageProgress');
+        // if(imageProgress) imageProgress.style.display = 'none';
+
+        //Check if image is part of module snippet. If so, refresh the (active) module (hide imageTool). If not, refresh imageTool position
+        this.builder.element.image.refreshIfIsModule(this.targetImage);
+        this.builder.element.image.startImageMonitor(this.targetImage);
+
+        //Trigger Change event
+        this.builder.opts.onChange();
+        this.builder.elmTool.refresh();
+        if (this.builder.onImageChange) this.builder.onImageChange();
+      }
+    }
+    this.targetImage = null;
+  }
+  _onDragOver(e) {
+    e.preventDefault();
+    const img = this._getImageUnderCursor(e);
+    if (img) {
+      if (this.targetImage && this.targetImage !== img) {
+        this.targetImage.classList.remove('drag-over-image');
+      }
+      this.targetImage = img;
+      this.targetImage.classList.add('drag-over-image');
+    }
+  }
+  _onDragLeave() {
+    if (this.targetImage) {
+      this.targetImage.classList.remove('drag-over-image');
+      this.targetImage = null;
+    }
+  }
+  _onUpload(file) {
+    return new Promise(resolve => {
+      this.builder.opts.onAssetUpload = url => {
+        resolve({
+          url: url,
+          name: file.name,
+          size: file.size
+        });
+      };
+      const fakeEvent = {
+        target: {
+          files: [file]
+        }
+      };
+      this.builder.opts.onImageUpload(fakeEvent);
+    });
+  }
+}
+
 class Image$1 {
   constructor(builder) {
     this.builder = builder;
@@ -71966,6 +72083,15 @@ class Image$1 {
       this.imageTool = imageTool;
       imageResizer = document.querySelector('#divImageResizer');
       this.imageResizer = imageResizer;
+
+      // upload
+      if (this.builder.opts.onImageUpload) {
+        if (!imageResizer._dragDropUploaderAttached) {
+          imageResizer._dragDropUploaderAttached = true;
+          const uploader = new DragDropImageUploader(imageResizer, this.builder);
+          uploader.attach();
+        }
+      }
       imageResizer.addEventListener('wheel', () => {
         this.hideImageResizer();
       }, {
@@ -72109,20 +72235,70 @@ class Image$1 {
 
       // Browse local image
       let elm = imageTool.querySelector('#fileEmbedImage');
-      dom.addEventListener(elm, 'change', e => {
+      dom.addEventListener(elm, 'change', async e => {
         this.builder.uo.saveForUndo();
         var input = e.target;
         let img = this.builder.activeImage;
+
+        // content scaling
+        let scale = 1;
+        const contentView = document.querySelector('.is-content-view');
+        if (contentView) {
+          const style = window.getComputedStyle(contentView);
+          const transform = style.transform;
+          if (transform.startsWith('matrix(')) {
+            const matrix = new DOMMatrix(transform);
+            if (matrix.b === 0 && matrix.c === 0 && matrix.a === matrix.d) {
+              scale = matrix.a; // only if pure scale()
+            }
+          }
+        }
+
         let imageProgress = builderStuff.querySelector('#divImageProgress');
         imageProgress.style.display = 'table';
-        imageProgress.style.width = img.offsetWidth * this.builder.opts.zoom + 'px';
-        imageProgress.style.height = img.offsetHeight * this.builder.opts.zoom + 'px';
+        imageProgress.style.width = img.offsetWidth * this.builder.opts.zoom * scale + 'px';
+        imageProgress.style.height = img.offsetHeight * this.builder.opts.zoom * scale + 'px';
         const newPos = this.builder.util.getElementPosition(img);
         let top = newPos.top + window.pageYOffset;
         let left = newPos.left + window.pageXOffset;
         imageProgress.style.top = top + 'px';
         imageProgress.style.left = left + 'px';
 
+        // upload
+        const onUpload = async e => {
+          let file = e.target.files[0];
+          return new Promise(resolve => {
+            this.builder.opts.onAssetUpload = url => {
+              resolve({
+                url: url,
+                name: file.name,
+                size: file.size
+              });
+            };
+            this.builder.opts.onImageUpload(e);
+          });
+        };
+        if (this.builder.opts.onImageUpload) {
+          const result = await onUpload(e);
+          img.setAttribute('src', result.url);
+
+          // finished steps:
+
+          imageProgress.style.display = 'none';
+          elm = imageTool.querySelector('#fileEmbedImage');
+          elm.value = ''; //clear input
+
+          //Check if image is part of module snippet. If so, refresh the (active) module (hide imageTool). If not, refresh imageTool position
+          this.refreshIfIsModule(img);
+          this.startImageMonitor(img);
+
+          //Trigger Change event
+          this.builder.opts.onChange();
+          this.builder.elmTool.refresh();
+          if (this.builder.onImageChange) this.builder.onImageChange();
+          return;
+        }
+
         //The #fileEmbedImage triggered 2 times in IE (because of clearInputs below). This makes input.files[0].name returns error on 2nd trigger. Just add try{}!
         try {
           img.setAttribute('data-filename', input.files[0].name); //needed for saveimage.js | 
@@ -72644,9 +72820,113 @@ class Image$1 {
 
       // Apply (crop) image
       elm = modalImageEdit.querySelector('.input-ok');
-      dom.addEventListener(elm, 'click', () => {
+      dom.addEventListener(elm, 'click', async () => {
         this.builder.uo.saveForUndo();
         let img = this.builder.activeImage;
+        if (this.builder.opts.onImageUpload) {
+          let basename, extension, newname, newfilename;
+          let src = img.getAttribute('src');
+          if (src.indexOf('base64') === -1) {
+            let filename = src.substring(src.lastIndexOf('/') + 1);
+            basename = dom.baseName(filename);
+            extension = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
+          } else if (img.getAttribute('data-filename')) {
+            let attr = img.getAttribute('data-filename');
+            basename = dom.baseName(attr);
+            extension = attr.substr(attr.lastIndexOf('.') + 1).toLowerCase();
+          } else {
+            basename = util.makeId();
+            extension = 'png';
+            const match = src.match(/^data:image\/(.*?);base64,/);
+            if (match) {
+              extension = match[1]; // e.g., "png", "jpeg", "gif"
+            }
+          }
+
+          if (basename.indexOf('-edit') !== -1) {
+            basename = basename.substr(0, basename.indexOf('-edit'));
+          }
+          newname = basename + '-edit' + util.makeId();
+          newname = newname.replaceAll('%20', '-'); // fix 404 error after file upload
+
+          newfilename = newname + '.' + extension;
+          let base64;
+          if (extension === 'jpg' || extension === 'jpeg' || extension === 'webm' || extension === 'webp') {
+            base64 = this.cropper.getCroppedCanvas({
+              fillColor: '#fff',
+              imageSmoothingEnabled: true,
+              imageSmoothingQuality: 'high'
+            }).toDataURL('image/jpeg');
+          } else {
+            base64 = this.cropper.getCroppedCanvas({}).toDataURL();
+          }
+
+          // await this.builder.opts.onBase64Upload(img, base64, newfilename);
+          const getMimeTypeFromFilename = filename => {
+            const ext = filename.split('.').pop().toLowerCase();
+            const mimeTypes = {
+              jpg: 'image/jpeg',
+              jpeg: 'image/jpeg',
+              png: 'image/png',
+              gif: 'image/gif',
+              webp: 'image/webp',
+              svg: 'image/svg+xml',
+              pdf: 'application/pdf',
+              txt: 'text/plain',
+              mp3: 'audio/mpeg',
+              mp4: 'video/mp4',
+              mov: 'video/quicktime',
+              wav: 'audio/wav',
+              json: 'application/json'
+              // add more as needed
+            };
+
+            return mimeTypes[ext] || 'application/octet-stream';
+          };
+          const base64ToFile = (base64, filename) => {
+            const mimeType = getMimeTypeFromFilename(filename);
+            const byteString = atob(base64.split(',')[1]);
+            const byteArray = new Uint8Array(byteString.length);
+            for (let i = 0; i < byteString.length; i++) {
+              byteArray[i] = byteString.charCodeAt(i);
+            }
+            return new File([byteArray], filename, {
+              type: mimeType
+            });
+          };
+          const onUpload = file => {
+            return new Promise(resolve => {
+              this.builder.opts.onAssetUpload = url => {
+                resolve({
+                  url: url,
+                  name: file.name,
+                  size: file.size
+                });
+              };
+              const fakeEvent = {
+                target: {
+                  files: [file]
+                }
+              };
+              this.builder.opts.onImageUpload(fakeEvent);
+            });
+          };
+          const file = base64ToFile(base64, newfilename);
+          const result = await onUpload(file);
+          img.setAttribute('src', result.url);
+
+          // finished steps:
+
+          //Check if image is part of module snippet. If so, refresh the (active) module (hide imageTool). If not, refresh imageTool position
+          this.refreshIfIsModule(img);
+
+          //Trigger Change event
+          this.builder.opts.onChange();
+          util.hideModal(modalImageEdit);
+          this.builder.elmTool.refresh();
+          if (this.builder.onImageChange) this.builder.onImageChange();
+          return;
+        }
         let attr = img.getAttribute('data-filename');
         let extension = 'jpg';
         if (attr) {
@@ -76394,6 +76674,9 @@ class Module {
       let result = await fetch(this.builder.opts.modulePath + modulename + '.html');
       result = await result.text();
       result = result.replace(/<script>/g, `${this.builder.nonce ? `<script nonce="${this.builder.nonce}">` : '<script>'}`);
+
+      // Replace assets path
+      result = result.replace(/="assets\//g, '="' + this.builder.settings.assetPath);
       iframe.srcdoc = result;
       setTimeout(() => {
         iframe.style.opacity = '';
@@ -94417,7 +94700,7 @@ class Rte {
     });
 
     const btnInsertImageOk = modalInsertImage.querySelector('.input-ok');
-    dom.addEventListener(btnInsertImageOk, 'click', () => {
+    dom.addEventListener(btnInsertImageOk, 'click', async () => {
       if (!this.builder.activeCol) {
         util.hideModal(modalInsertImage);
         return;
@@ -94433,7 +94716,76 @@ class Rte {
       }
       if (val === '') return;
       let fileToInsert = modalInsertImage.querySelector('#imgInsertImagePreview').getAttribute('data-filename');
-      util.pasteHtmlAtCaret('<img data-filename="' + fileToInsert + '" src="' + val + '" alt="" />', false);
+      if (this.builder.opts.onImageUpload && val.indexOf('base64') !== -1) {
+        let basename, extension, newname, newfilename;
+        basename = dom.baseName(fileToInsert);
+        extension = fileToInsert.substr(fileToInsert.lastIndexOf('.') + 1).toLowerCase();
+        if (basename.indexOf('-edit') !== -1) {
+          basename = basename.substr(0, basename.indexOf('-edit'));
+        }
+        newname = basename + '-edit' + util.makeId();
+        newname = newname.replaceAll('%20', '-'); // fix 404 error after file upload
+
+        newfilename = newname + '.' + extension;
+        let base64 = val;
+
+        // await this.builder.opts.onBase64Upload(img, base64, newfilename);
+        const getMimeTypeFromFilename = filename => {
+          const ext = filename.split('.').pop().toLowerCase();
+          const mimeTypes = {
+            jpg: 'image/jpeg',
+            jpeg: 'image/jpeg',
+            png: 'image/png',
+            gif: 'image/gif',
+            webp: 'image/webp',
+            svg: 'image/svg+xml',
+            pdf: 'application/pdf',
+            txt: 'text/plain',
+            mp3: 'audio/mpeg',
+            mp4: 'video/mp4',
+            mov: 'video/quicktime',
+            wav: 'audio/wav',
+            json: 'application/json'
+            // add more as needed
+          };
+
+          return mimeTypes[ext] || 'application/octet-stream';
+        };
+        const base64ToFile = (base64, filename) => {
+          const mimeType = getMimeTypeFromFilename(filename);
+          const byteString = atob(base64.split(',')[1]);
+          const byteArray = new Uint8Array(byteString.length);
+          for (let i = 0; i < byteString.length; i++) {
+            byteArray[i] = byteString.charCodeAt(i);
+          }
+          return new File([byteArray], filename, {
+            type: mimeType
+          });
+        };
+        const onUpload = file => {
+          return new Promise(resolve => {
+            this.builder.opts.onAssetUpload = url => {
+              resolve({
+                url: url,
+                name: file.name,
+                size: file.size
+              });
+            };
+            const fakeEvent = {
+              target: {
+                files: [file]
+              }
+            };
+            this.builder.opts.onImageUpload(fakeEvent);
+          });
+        };
+        const file = base64ToFile(base64, newfilename);
+        const result = await onUpload(file);
+        val = result.url;
+      }
+
+      // util.pasteHtmlAtCaret('<img data-filename="' + fileToInsert + '" src="' + val + '" alt="" />', false);
+      util.pasteHtmlAtCaret('<img src="' + val + '" alt="" />', false);
       util.hideModal(modalInsertImage);
       let builderActive = this.builder.doc.querySelector('.builder-active');
       if (builderActive) this.builder.applyBehaviorOn(builderActive);
@@ -109505,6 +109857,9 @@ class Dictation {
     this.modalConfig = modalConfig;
     const btnConfig = builderStuff.querySelector('.cmd-command-config');
     const btnDictation = builderStuff.querySelector('.cmd-enable-dictation');
+    if (!this.builder.settings.enableDictation) {
+      btnDictation.style.display = 'none';
+    }
     const btnClear = builderStuff.querySelector('.cmd-clear-command');
     const chkAutoSend = builderStuff.querySelector('#chkAutoSendCommand');
     const btnCommandList = builderStuff.querySelector('.cmd-command-list');
@@ -118514,7 +118869,7 @@ class ContentBuilder {
       // Option for self-hosted fonts:
       // fontPath: 'assets/cssfonts/', // If set, will be used
 
-      snippetModal: false,
+      snippetModal: true,
       snippetModalLeft: false,
       snippetData: 'assets/minimalist-blocks/snippetlist.html',
       // Deprecated
@@ -118794,7 +119149,7 @@ class ContentBuilder {
       maxEmbedImageWidth: 1600,
       //set -1 for no max (use original image width)
       zoom: 1,
-      useLightbox: false,
+      useLightbox: true,
       lightboxArrow: true,
       imageRenameOnEdit: true,
       disableAutoEmbedVideo: false,
@@ -119183,6 +119538,7 @@ class ContentBuilder {
       sendCommandUrl: '',
       // http://localhost:8081/answer
       // speechTranscribeUrl: 'http://192.168.1.7:8081',
+      enableDictation: false,
       onlineDemo: false,
       autoSendDelay: 4000,
       autoEditBlock: false,
@@ -119588,6 +119944,10 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     }
     this.settings = this.opts; // Backward compatible
 
+    if (this.isContentBox) {
+      this.settings.snippetModal = false;
+    }
+
     // freeform
     if (this.canvas && !this.isContentBox) {
       /*
@@ -121320,6 +121680,15 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
   applyBehaviorOn(builder) {
     const util = this.util;
 
+    // upload
+    if (this.opts.onImageUpload) {
+      if (!builder._dragDropUploaderAttached) {
+        builder._dragDropUploaderAttached = true;
+        const uploader = new DragDropImageUploader(builder, this);
+        uploader.attach();
+      }
+    }
+
     //Make absolute
     if (this.opts.absolutePath) {
       let links = builder.querySelectorAll('a');
@@ -156173,7 +156542,7 @@ class ContentBox {
       // Multiple device buttons on frame
       simpleEditingBreakpoint: '970px',
       // iframe only
-      canvas: false,
+      canvas: true,
       blankHtml: '',
       lang: [],
       // Old Template System:
@@ -156192,8 +156561,26 @@ class ContentBox {
            designPathReplace: ['assets/', 'https://.../assets/'], // Only if needed
       */
       // New Template System:  => this will replace the previous approach (designUrl1, designUrl2, designPath, designPathReplace & defaultDesignCategory)
-      templates: [],
-      // ver.5.3
+      // templates: [], // ver.5.3
+      templates: [{
+        url: 'assets/templates-simple/templates.js',
+        path: 'assets/templates-simple/',
+        pathReplace: [],
+        numbering: true,
+        showNumberOnHover: true
+      }, {
+        url: 'assets/templates-quick/templates.js',
+        path: 'assets/templates-quick/',
+        pathReplace: [],
+        numbering: true,
+        showNumberOnHover: true
+      }, {
+        url: 'assets/templates-animated/templates.js',
+        path: 'assets/templates-animated/',
+        pathReplace: [],
+        numbering: true,
+        showNumberOnHover: true
+      }],
 
       /*
       Example:
@@ -156387,8 +156774,8 @@ class ContentBox {
       blockCodeEditorHeight: '45vh',
       blockCodeEditorMaxWidth: '960px',
       assetRefresh: false,
-      slider: '',
-      navbar: false,
+      slider: 'glide',
+      navbar: true,
       screenMode: 'fullview',
       onRender: function () {},
       onChange: function () {},
@@ -158824,9 +159211,10 @@ class ContentBox {
       //     new_section_bg_color: '..',
       //     new_section: '..'
       // },
-      AIToolbar: true,
+      AIToolbar: false,
       sendCommandUrl: '',
       // http://localhost:8081/answer
+      enableDictation: false,
       hideImageGeneration: false,
 
       /* To enable asset manager */
@@ -159829,6 +160217,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
 
   editorSetup() {
     this.editor = new ContentBuilder({
+      enableDictation: this.settings.enableDictation,
       onStartRequest: this.settings.onStartRequest,
       controlPanel: this.settings.controlPanel,
       canvas: this.settings.canvas,
@@ -160271,6 +160660,10 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
             z-index: 2;
         }
 
+        .is-wrapper .drag-over-image {
+            outline: #a2f0ce 3px solid;
+        }
+
         /*
         .is-wrapper.is-edit {
             min-height: 100vh;