@innovastudio/contentbuilder 1.5.47 → 1.5.49

package/index.d.ts

@@ -1,28 +1,233 @@
 interface ContentBuilderOptions {
+    page?: string;
     container?: string;
+    row?: string;
+    cols?: any[]; 
+    colequal?: any[]; 
+    colsizes?: any[]; 
+    imageQuality?: number;
+    elementSelection?: boolean;
+    paste?: string;
+    snippetJSON?: object;
+    screenMode?: string;
+    onPreviewOpen?: () => void;
+    previewURL?: string;
+    onPreviewClose?: () => void;
+    previewStyle?: string;
+    livePreviewOpen?: boolean;
+    livePreviewAlwaysReload?: boolean;
+    livePreviewReloadEvery?: number;
+    scriptPath?: string;
+    plugins?: any[]; 
+    pluginPath?: string;
+    disableConfig?: boolean;
+    modulePath?: string;
+    assetPath?: string;
+    fontAssetPath?: string;
+    fontPath?: string;
     snippetModal?: boolean;
     snippetModalLeft?: boolean;
+    snippetData?: string;
+    snippetUrl?: string;
+    snippetPath?: string;
+    snippetPathReplace?: any[]; 
+    snippetCategories?: any[]; 
+    defaultSnippetCategory?: number;
+    snippetHandle?: boolean;
+    sidePanel?: string;
+    snippetList?: string;
+    onRender?: () => void;
+    onContentClick?: () => void;
+    onChange?: () => void;
+    onAdd?: () => void;
+    largerImageHandler?: string;
+    onLargerImageUpload?: () => void;
+    imageHandler?: string;
+    onImageUpload?: () => void;
+    fileHandler?: string;
+    onFileUpload?: () => void;
+    mediaHandler?: string;
+    onMediaUpload?: () => void;
+    videoHandler?: string;
+    onVideoUpload?: () => void;
+    audioHandler?: string;
+    onAudioUpload?: () => void;
+    colors?: any[]; 
+    builderMode?: string;
+    rowTool?: string;
+    rowcolOutline?: boolean;
+    columnTool?: boolean;
+    outlineMode?: string;
+    toolStyle?: string;
+    outlineStyle?: string;
+    snippetAddTool?: boolean;
+    elementTool?: boolean;
+    elementHighlight?: boolean;
+    columnHtmlEditor?: boolean;
+    rowHtmlEditor?: boolean;
+    htmlSyntaxHighlighting?: boolean;
+    snippetOpen?: boolean;
+    toolbar?: string;
+    toolbarDisplay?: string;
+    shortenHTML?: boolean;
+    imageResizeOnBlock?: boolean;
+    simpleEditingBreakpoint?: string;
+    resizeHeight?: boolean;
+    snippetsSidebarDisplay?: string;
+    snippetDisplay?: string;
+    onImageSelectClick?: () => void;
+    onFileSelectClick?: () => void;
+    onVideoSelectClick?: () => void;
+    onAudioSelectClick?: () => void;
+    onMediaSelectClick?: () => void;
+    onPluginsLoaded?: () => void;
+    onImageBrowseClick?: () => void;
+    onImageSettingClick?: () => void;
+    onImageEditClick?: () => void;
+    setCropperConfig?: () => void;
+    imageEmbed?: boolean;
+    imageselect?: string;
+    fileselect?: string;
+    videoselect?: string;
+    imageSelect?: string;
+    fileSelect?: string;
+    videoSelect?: string;
+    audioSelect?: string;
+    mediaSelect?: string;
+    selectIcon?: string;
+    otherSelect?: string;
+    otherSelectCaption?: string;
+    otherSelectIcon?: string;
+    imageSelectWidth?: string;
+    imageSelectHeight?: string;
+    fileSelectWidth?: string;
+    fileSelectHeight?: string;
+    videoSelectWidth?: string;
+    videoSelectHeight?: string;
+    audioSelectWidth?: string;
+    audioSelectHeight?: string;
+    mediaSelectWidth?: string;
+    mediaSelectHeight?: string;
+    otherSelectWidth?: string;
+    otherSelectHeight?: string;
+    imageSelectMaxWidth?: string;
+    fileSelectMaxWidth?: string;
+    videoSelectMaxWidth?: string;
+    audioSelectMaxWidth?: string;
+    mediaSelectMaxWidth?: string;
+    otherSelectMaxWidth?: string;
+    assetPanelFullScreen?: boolean;
+    codeEditorWidth?: string;
+    codeEditorHeight?: string;
+    codeEditorMaxWidth?: string;
+    blockCodeEditorWidth?: string;
+    blockCodeEditorHeight?: string;
+    blockCodeEditorMaxWidth?: string;
+    assetRefresh?: boolean;
+    customTags?: any[]; 
+    buttons?: any[]; 
+    buttonsMore?: any[]; 
+    elementButtons?: any[]; 
+    elementButtonsMore?: any[]; 
+    iconButtons?: any[]; 
+    iconButtonsMore?: any[]; 
+    lang?: any[]; 
+    checkLang?: boolean;
+    clearPreferences?: boolean;
+    toolbarAddSnippetButton?: boolean;    
+    animateModal?: boolean;
+    defaultFontSizes?: any[]; 
+    fontSizeClassValues?: any[]; 
+    gradientcolors?: any[]; 
+    elementEditor?: boolean; 
+    customval?: string;
+    moduleConfig?: any[]; 
+    elementAnimate?: boolean; 
+    cleanAOS?: boolean;
+    framework?: string;
+    cellFormat?: string;
+    rowFormat?: string;
+    emailMode?: boolean;
+    absolutePath?: boolean;  
+    emailSnippetCategories?: any[]; 
+    defaultEmailSnippetCategory?: number;
+    undoRedoStyles?: boolean;
+    specialElementClasses?: any[]; 
+    onUndo?: () => void;
+    onRedo?: () => void;
+    onBlockCanvasAdd?: () => void;
+    docContainer?: string;
+    blockContainer?: string;
+    pageSize?: string;
+    pageSizes?: any[]; 
+    maxEmbedImageWidth?: number;
+    zoom?: number;
+    useLightbox?: boolean;
+    lightboxArrow?: boolean;
+    imageRenameOnEdit?: boolean;
+    disableAutoEmbedVideo?: boolean;
+    deleteConfirm?: boolean;
+    disableBootstrapIcons?: boolean;
+    sectionTemplate?: string;
+    onZoomStart?: () => void;
+    onZoom?: () => void;
+    onZoomEnd?: () => void;
+    themes?: any[]; 
+    colHeight?: any[]; 
+    maxColumns?: number;
+    leadingPreset?: any[]; 
+    cssClasses?: object;
+    useCssClasses?: boolean;
+    useButtonPlugin?: boolean;
+    enableDragResize?: boolean;
+    simpleTextSettings?: boolean; 
+    enableColumnsPerLine?: boolean;
+    startAIAssistant?: boolean;
+    isContentBox?: boolean;
+    sendCommandUrl?: string;
+    speechTranscribeUrl?: string;
+    onlineDemo?: boolean;
+    autoSendDelay?: number;
+    autoEditBlock?: boolean;
+    disclaimerAI?: string;
+    showDisclaimer?: boolean;
+    AIModalStyle?: string;
+    enableShortCommands?: boolean;
+    speechRecognitionLang?: string;
+    assistantMode?: string;
+    triggerWords?: object;
+    temperature?: number;
+    topP?: number;
+    useMediaRecorder?: boolean;
+    encoderPath?: string;
+    imageAutoUpscale?: boolean;
+    headlineList?: any[];
+    mediaPath?: string;
+    media?: object;
+    shortCommandList?: object;
+    similarityThreshold?: number;
+    commandList?: object;
 }
 
 declare class ContentBuilder {
     constructor(options?: ContentBuilderOptions);
 
-    html(element: HTMLElement): void;
-    loadSnippets(snippetFile: string, snippetOpen: boolean): void;
+    html(element?: HTMLElement): void;
+    loadSnippets(snippetFile: string, snippetOpen?: boolean): void;
     viewSnippets(): void;
-    saveImages(handler: string, onComplete: () => void, onBase64Upload: () => void): void;
+    saveImages(handler?: string, onComplete?: () => void, onBase64Upload?: () => void): void;
     applyBehavior(): void;
     applyBehaviorOn(element: HTMLElement): void;
     viewConfig(): void;
-    setUIColor(mode: string, csslink: string): void;
+    setUIColor(mode: string, csslink?: string): void;
     viewHtml(): void;
-    loadHtml(html: string, area: HTMLElement): void;
-    pasteHtmlAtCaret(html: string, selectPastedContent: boolean): void;
-    addSnippetl(html: string, bSnippet: boolean, noedit: boolean): void;
+    loadHtml(html: string, area?: HTMLElement): void;
+    pasteHtmlAtCaret(html: string, selectPastedContent?: boolean): void;
+    addSnippet(html: string, bSnippet?: boolean, noedit?: boolean): void;
     undo(): void;
     redo(): void;
     destroy(): void;
-    returnUrl(mode: string): void;
+    returnUrl(s: string): void;
     toggleSnippetModal(): void;
     openSnippetModal(): void;
     closeSnippetModal(): void;
@@ -30,10 +235,10 @@ declare class ContentBuilder {
     openAIAssistant(): void;
     closeAIAssistant(): void;
     saveForUndo(): void;
-    selectAsset(s: string, f: boolean)
-    addBlock(html: string, blockContainer: HTMLElement)
-    addPage(box: HTMLElement)
-    setPageSize(s: string)
+    selectAsset(s: string, f?: boolean)
+    addBlock(html: string, blockContainer?: HTMLElement)
+    addPage(box?: HTMLElement)
+    setPageSize(s?: string)
     openPageOptions(): void;
     print(): void;
 }

package/package.json

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

package/public/contentbuilder/contentbuilder.esm.js

@@ -3711,6 +3711,24 @@ class Dom {
   constructor(builder) {
     this.builder = builder;
   }
+  detectMobileOrTablet() {
+    const userAgent = navigator.userAgent.toLowerCase();
+    const isIOS = /ipad|iphone|ipod/.test(userAgent) && !window.MSStream;
+    const isAndroid = /android/.test(userAgent);
+    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+    const screenWidth = window.innerWidth <= 1600;
+    if (isIOS || isAndroid) {
+      return true; // Definitely a mobile or tablet
+    }
+
+    // Additional check for other touch devices with screen width under 1600px
+    if (isTouchDevice && screenWidth) {
+      return true; // Likely a mobile or tablet
+    }
+
+    return false; // Likely not a mobile or tablet
+  }
+
   getScale(container) {
     let matrix = window.getComputedStyle(container).transform;
     if (matrix === 'none') return 1;
@@ -17223,7 +17241,19 @@ const renderSnippetPanel = (builder, snippetOpen) => {
 
   let activeBuilderArea;
   let itemHeight;
-  new Sortable(snippetlist, {
+  const isMobile = dom.detectMobileOrTablet();
+  let useClick = false;
+  if (isMobile && builder.isContentBox) {
+    const items = snippetlist.querySelectorAll('.snippet-item');
+    items.forEach(item => {
+      item.addEventListener('click', () => {
+        const snippetid = item.getAttribute('data-id');
+        builder.dropSnippet(snippetid);
+      });
+    });
+    useClick = true;
+  }
+  if (!useClick) new Sortable(snippetlist, {
     // forceFallback: safariAgent,
     group: {
       name: 'shared',
@@ -66679,6 +66709,7 @@ class Rte {
     btnFront.forEach(btn => {
       btn.addEventListener('click', () => {
         let activeBlock = this.builder.doc.querySelector('.is-block.cloned');
+        if (!activeBlock) activeBlock = this.builder.doc.querySelector('.is-block.active');
         if (!activeBlock) return;
         this.builder.forward(activeBlock);
       });
@@ -66687,6 +66718,7 @@ class Rte {
     btnBackward.forEach(btn => {
       btn.addEventListener('click', () => {
         let activeBlock = this.builder.doc.querySelector('.is-block.cloned');
+        if (!activeBlock) activeBlock = this.builder.doc.querySelector('.is-block.active');
         if (!activeBlock) return;
         if (activeBlock.style.zIndex === '0') {
           this.builder.moveUp(activeBlock);
@@ -66714,6 +66746,7 @@ class Rte {
     btnDuplicate.forEach(btn => {
       btn.addEventListener('click', () => {
         let activeBlock = this.builder.doc.querySelector('.is-block.cloned');
+        if (!activeBlock) activeBlock = this.builder.doc.querySelector('.is-block.active');
         if (!activeBlock) return;
         this.builder.duplicate(activeBlock);
       });
@@ -83995,7 +84028,8 @@ class EditableBlocks {
     }
     if (block.classList.contains('is-group')) return; // do not clone if block is shape
 
-    if (!block.classList.contains('clone')) {
+    const isMobileOrTablet = this.detectMobileOrTablet();
+    if (!block.classList.contains('clone') & !isMobileOrTablet) {
       let clonedDiv = block.cloneNode(true);
       clonedDiv.classList.add('clone');
       block.parentNode.appendChild(clonedDiv);
@@ -84003,6 +84037,24 @@ class EditableBlocks {
       this.refresh();
     }
   }
+  detectMobileOrTablet() {
+    const userAgent = navigator.userAgent.toLowerCase();
+    const isIOS = /ipad|iphone|ipod/.test(userAgent) && !window.MSStream;
+    const isAndroid = /android/.test(userAgent);
+    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+    const screenWidth = window.innerWidth <= 1600;
+    if (isIOS || isAndroid) {
+      return true; // Definitely a mobile or tablet
+    }
+
+    // Additional check for other touch devices with screen width under 1600px
+    if (isTouchDevice && screenWidth) {
+      return true; // Likely a mobile or tablet
+    }
+
+    return false; // Likely not a mobile or tablet
+  }
+
   selectClear() {
     this.doc.querySelectorAll('.clone').forEach(elm => elm.parentNode.removeChild(elm));
     this.doc.querySelectorAll('.cloned').forEach(elm => elm.classList.remove('cloned'));
@@ -92316,6 +92368,203 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     // return currentScript.replace(currentScriptFile, '');
   }
 
+  dropSnippet(snippetid) {
+    // snippetJSON is snippet's JSON (from assets/minimalist-blocks/content.js) that store all snippets' html
+    const result = this.opts.snippetJSON.snippets.filter(item => {
+      if (item.id + '' === snippetid) return item;else return false;
+    });
+    let html = result[0].html;
+    let noedit = result[0].noedit;
+    let bSnippet;
+    if (html.indexOf('"row') === -1) {
+      bSnippet = true; // Just snippet (without row/column grid)
+    } else {
+      bSnippet = false; // Snippet is wrapped in row/colum
+    }
+
+    if (this.opts.emailMode) bSnippet = false;
+
+    // check if is block
+    let isBlock = false;
+    if (html.includes('"is-block')) {
+      isBlock = true;
+      bSnippet = false;
+    }
+
+    // Convert snippet into your defined 12 columns grid   
+    let rowClass = this.opts.row; //row
+    let colClass = this.opts.cols; //['col s1', 'col s2', 'col s3', 'col s4', 'col s5', 'col s6', 'col s7', 'col s8', 'col s9', 'col s10', 'col s11', 'col s12']
+    if (rowClass !== '' && colClass.length === 12) {
+      // html = html.replace(new RegExp('row clearfix', 'g'), rowClass);
+      html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward
+      html = html.replace(new RegExp('"row', 'g'), '"' + rowClass);
+      html = html.replace(new RegExp('column full', 'g'), colClass[11]);
+      html = html.replace(new RegExp('column half', 'g'), colClass[5]);
+      html = html.replace(new RegExp('column third', 'g'), colClass[3]);
+      html = html.replace(new RegExp('column fourth', 'g'), colClass[2]);
+      html = html.replace(new RegExp('column fifth', 'g'), colClass[1]);
+      html = html.replace(new RegExp('column sixth', 'g'), colClass[1]);
+      html = html.replace(new RegExp('column two-third', 'g'), colClass[7]);
+      html = html.replace(new RegExp('column two-fourth', 'g'), colClass[8]);
+      html = html.replace(new RegExp('column two-fifth', 'g'), colClass[9]);
+      html = html.replace(new RegExp('column two-sixth', 'g'), colClass[9]);
+    }
+    html = html.replace(/{id}/g, this.util.makeId());
+    if (this.opts.onAdd) {
+      html = this.opts.onAdd(html);
+    }
+    if (this.opts.snippetPathReplace.length > 0) {
+      // try {
+      if (this.opts.snippetPathReplace[0] !== '') {
+        let regex = new RegExp(this.opts.snippetPathReplace[0], 'g');
+        html = html.replace(regex, this.opts.snippetPathReplace[1]);
+        let string1 = this.opts.snippetPathReplace[0].replace(/\//g, '%2F');
+        let string2 = this.opts.snippetPathReplace[1].replace(/\//g, '%2F');
+        let regex2 = new RegExp(string1, 'g');
+        html = html.replace(regex2, string2);
+      }
+      // } catch (e) { 1; }
+    }
+
+    // this.addSnippet(html, bSnippet, noedit);
+
+    if (bSnippet) {
+      // Just snippet (without row/column grid), ex. buttons, line, social, video, map.
+      // Can be inserted after current row, column (cell), element, or last row.
+
+      html = `<div class="${this.opts.row}"><div class="${this.opts.cols[this.opts.cols.length - 1]}"${noedit ? ' data-noedit' : ''}>${html}</div></div>`;
+    } else if (isBlock) ; else {
+      // Snippet is wrapped in row/colum (may contain custom code or has [data-html] attribute)
+      // Can only be inserted after current row or last row (not on column or element).
+
+      let snippet = this.dom.createElement('div');
+      snippet.innerHTML = html;
+      let blocks = snippet.querySelectorAll('[data-html]');
+      Array.prototype.forEach.call(blocks, block => {
+        // Render custom code block
+        html = decodeURIComponent(block.getAttribute('data-html'));
+        html = html.replace(/{id}/g, this.util.makeId());
+        html = html.replace(/<script>/g, `${this.nonce ? `<script nonce="${this.nonce}">` : '<script>'}`);
+        for (var i = 1; i <= 20; i++) {
+          html = html.replace('[%HTML' + i + '%]', block.getAttribute('data-html-' + i) === undefined ? '' : decodeURIComponent(block.getAttribute('data-html-' + i))); //render editable area
+        }
+
+        block.innerHTML = html;
+      });
+      html = snippet.innerHTML;
+    }
+    const activeBox = this.doc.querySelector('.box-select');
+    const activeRow = this.doc.querySelector('.row-active');
+    if (activeRow) {
+      this.addRow(html, activeBox);
+    } else {
+      if (activeBox) {
+        if (activeBox.classList.contains('box-canvas')) {
+          // Canvas Mode
+
+          let snippet = this.dom.createElement('div');
+          snippet.innerHTML = html;
+          let blocks = snippet.querySelectorAll('[data-html]');
+          Array.prototype.forEach.call(blocks, block => {
+            // Render custom code block
+            html = decodeURIComponent(block.getAttribute('data-html'));
+            html = html.replace(/{id}/g, this.util.makeId());
+            html = html.replace(/<script>/g, `${this.nonce ? `<script nonce="${this.nonce}">` : '<script>'}`);
+            for (var i = 1; i <= 20; i++) {
+              html = html.replace('[%HTML' + i + '%]', block.getAttribute('data-html-' + i) === undefined ? '' : decodeURIComponent(block.getAttribute('data-html-' + i))); //render editable area
+            }
+
+            block.innerHTML = html;
+          });
+          html = snippet.innerHTML;
+          const blockTemplate = `
+                    <div class="is-block block-steady height-auto" data-new-dummy="1" style="top: 20%; left: 20%; width: 760px;">
+                        <div class="is-container container-new size-18 leading-14">
+                        [%CONTENT%]
+                        </div>
+                    </div>
+                    `; // data-new-dummy will be used by onSort to apply top/left position (snippetpanel.js)
+          // html = blockTemplate.replace('[%CONTENT%]', html);
+
+          this.uo.saveForUndo();
+          this.eb.addBlock(blockTemplate, activeBox);
+          const builders = activeBox.querySelectorAll('.is-container.container-new');
+          builders.forEach(builder => {
+            // After snippet has been added, re-apply behavior on builder areas
+
+            var range = document.createRange();
+            range.setStart(builder, 0);
+            builder.appendChild(range.createContextualFragment(html));
+            this.applyBehaviorOn(builder);
+            builder.classList.remove('container-new');
+          });
+          this.opts.onChange();
+          this.opts.onRender();
+          if (this.opts.onBlockCanvasAdd) this.opts.onBlockCanvasAdd();
+        } else {
+          let container = activeBox.querySelector('.builder-active');
+          if (container) {
+            this.addRow(html, activeBox);
+          } else {
+            container = activeBox.querySelector('.is-container');
+            if (container) {
+              this.addRow(html, activeBox);
+            }
+          }
+        }
+      }
+    }
+    this.activeCol = null;
+  }
+  addRow(html, box) {
+    this.uo.saveForUndo();
+    let rowElement;
+    let bAddLast = false;
+
+    // Add after selected row
+    let cell = this.activeCol;
+    let row;
+    if (cell) {
+      row = cell.parentNode; // in email mode, cell active is also under row active (incorrect, but cell active is not needed in email mode. So this line works!)
+    } else {
+      // If no active cell, check if it is from .row-add-initial (empty info)
+      row = this.doc.querySelector('.row-active');
+      if (!row) {
+        bAddLast = true;
+      }
+    }
+    // Add after last row
+    if (bAddLast) {
+      const container = box.querySelector('.is-builder');
+      const rows = this.dom.elementChildren(container);
+      const lastrow = rows[rows.length - 1];
+      row = lastrow;
+    }
+
+    // Use createContextualFragment() to make embedded script executable
+    let range = document.createRange();
+    row.parentNode.insertBefore(range.createContextualFragment(html), row.nextSibling);
+    // rowElement = snippet.childNodes[0];
+
+    rowElement = row.nextElementSibling; // a must. Must be before applyBehavior to prevent element delete during fixLayout
+
+    // checkEmpty & onRender called here
+    let builderActive = box.querySelector('.builder-active');
+    if (builderActive) this.applyBehaviorOn(builderActive);else {
+      builderActive = box.querySelector('.is-builder');
+      this.applyBehaviorOn(builderActive);
+    }
+    let cellElement = rowElement.querySelector('div');
+    if (cellElement) cellElement.click(); //change active block to the newly created
+
+    // Change to row selection
+    rowElement.className = rowElement.className.replace('row-outline', '');
+
+    //Hide Column tool (new!)
+    this.util.hideColumnTool();
+    this.opts.onChange();
+    this.opts.onRender();
+  }
   sectionDropSetup() {
     if (this.blockContainer) {
       this.sortableOnCanvas = [];