@innovastudio/contentbuilder 1.5.132 → 1.5.134

package/index.d.ts

@@ -285,7 +285,11 @@ declare class ContentBuilder {
     constructor(options?: ContentBuilderOptions);
 
     html(element?: HTMLElement): void;
-    loadSnippets(snippetFile: string, snippetOpen?: boolean): void;
+    // loadSnippets(snippetFile: string, snippetOpen?: boolean): void;
+    
+    loadSnippets(path: string, snippetOpen?: boolean): Promise<void>;
+    loadSnippets(source: { snippets: string; style?: string }, snippetOpen?: boolean): Promise<void>;
+
     viewSnippets(): void;
     saveImages(handler?: string, onComplete?: () => void, onBase64Upload?: () => void): void;
     applyBehavior(): void;

package/package.json

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

package/public/contentbuilder/contentbuilder.css

@@ -3942,7 +3942,7 @@ button:focus-visible {
   letter-spacing: 1px;
   height: 35px;
   line-height: 1.7;
-  color: #4a4a4a;
+  color: #0d0d0d;
   border-radius: 5px;
   border: none;
   background-color: #f6f6f6;

package/public/contentbuilder/contentbuilder.esm.js

@@ -83424,6 +83424,9 @@ class Dictation {
                 font-size: 14px;
             }
             */
+            .is-modal.commandconfig .is-modal-overlay {
+                background: transparent !important;
+            }
             .is-modal.commandconfig ul {
                 margin: 0;
                 padding: 0 0 0 16px;
@@ -83600,7 +83603,7 @@ class Dictation {
                 align-items: center;">
                     ${util.out('AI Assistant')}</span>
     
-                <button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">
+                <button class="is-modal-close" title="${util.out('Close')}">
                     <svg class="is-icon-flex"style="width:22px;height:22px"><use xlink:href="#ion-ios-close-empty"></use></svg>
                 </button>
             </div>
@@ -83648,13 +83651,20 @@ class Dictation {
             </div>
         </div>
 
-        <div class="is-modal commandconfig" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
-            <div class="is-modal-content" style="max-width:380px;padding:55px 40px 35px;">
-                <div class="is-modal-bar is-draggable">
-                    ${util.out('Settings')}
-                    <button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">&#10005;</button>
-                </div>
-              
+        <div class="is-modal is-modal-content commandconfig" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="top:calc(50% - 250px);left:calc(50% - 191px);max-width:380px;height:auto;z-index: 10005">
+            <div class="is-modal-bar is-draggable" draggable=""> 
+                <span style="display: flex;
+                justify-content: center;
+                align-items: center;">
+                    ${util.out('Settings')}</span>
+    
+                <button class="is-modal-close" title="${util.out('Close')}">
+                    <svg class="is-icon-flex"style="width:22px;height:22px"><use xlink:href="#ion-ios-close-empty"></use></svg>
+                </button>
+            </div>
+
+            <div style="width:100%;border-top:transparent 35px solid;box-sizing:border-box;padding:16px 40px 35px;">
+                
                 <div class="is-label"><span>${util.out('Temperature')}</span>: <span class="val-temp">0.6</span></div>
                 <div style="padding-top:4px">
                     <input type="range" min="0" max="2" step="0.01" value="0.6" class="temperature-slider is-rangeslider" style="margin:0 !important;">
@@ -83717,6 +83727,9 @@ class Dictation {
     new Draggable$2({
       selector: '.is-modal.page-command .is-draggable'
     });
+    new Draggable$2({
+      selector: '.is-modal.commandconfig .is-draggable'
+    });
     const modalCommandList = builderStuff.querySelector('.commandlist');
     this.modalCommandList = modalCommandList;
     const modalConfig = builderStuff.querySelector('.commandconfig');
@@ -97816,7 +97829,7 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
   viewZoom() {
     this.rte.viewZoom();
   }
-  loadSnippets(snippetFile, snippetOpen) {
+  async loadSnippets(source, snippetOpen) {
     if (this.preview) return;
     if (this.opts.snippetList === '#divSnippetList') {
       let snippetPanel = document.querySelector(this.opts.snippetList);
@@ -97826,31 +97839,78 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       }
     }
 
-    if (this.isScriptAlreadyIncluded(snippetFile)) return;
-    const script = document.createElement('script');
-    script.src = snippetFile;
-    script.id = '_snippet_data';
-    script.async = true;
-    script.onload = () => {
-      if (!document.body.contains(this.builderStuff)) return; // in case the instance is destroyed
-
-      this.opts.snippetJSON = window.data_basic;
-      if (!this.canvas) for (let i = this.opts.snippetJSON.snippets.length - 1; i >= 0; i--) {
-        if (this.opts.snippetJSON.snippets[i].mode === 'canvas') {
-          this.opts.snippetJSON.snippets.splice(i, 1);
+    let snippetFile;
+    if (typeof source === 'string') {
+      snippetFile = source;
+    } else {
+      snippetFile = source.snippets;
+      let linkStyle = document.head.querySelector('#_snippet_style');
+      if (!linkStyle) {
+        const link = document.createElement('link');
+        link.id = '_snippet_style';
+        link.rel = 'stylesheet';
+        link.href = source.style;
+
+        // Find the last stylesheet <link> in <head>
+        const lastCss = [...document.head.querySelectorAll('link[rel="stylesheet"]')].pop();
+        if (lastCss) {
+          lastCss.after(link);
+        } else {
+          // No linked CSS → look for first embedded <style>
+          const firstStyle = document.head.querySelector('style');
+          if (firstStyle) {
+            document.head.insertBefore(link, firstStyle);
+          } else {
+            document.head.appendChild(link);
+          }
         }
-      }
 
-      // if snippetPath is specified (not empty), then use the specified. Otherwise, use the one generated from snippet file (_snippets_path)
-      if (this.opts.snippetPath === '') {
-        this.opts.snippetPath = window._snippets_path;
-      }
-      if (this.opts.snippetJSON.snippets.length > 0) {
-        renderSnippetPanel(this, snippetOpen); // Render Snippet Panel
+        // Then wait for it to load
+        await new Promise((resolve, reject) => {
+          link.onload = resolve;
+          link.onerror = reject;
+        });
       }
-    };
+    }
+    let includeScript = document.body.querySelector('#_snippet_data');
+    if (!includeScript) {
+      const script = document.createElement('script');
+      script.src = snippetFile;
+      script.id = '_snippet_data';
+      script.async = true;
+      script.onload = () => {
+        if (!document.body.contains(this.builderStuff)) return; // in case the instance is destroyed
+
+        this.opts.snippetJSON = window.data_basic;
+        if (!this.canvas) for (let i = this.opts.snippetJSON.snippets.length - 1; i >= 0; i--) {
+          if (this.opts.snippetJSON.snippets[i].mode === 'canvas') {
+            this.opts.snippetJSON.snippets.splice(i, 1);
+          }
+        }
+
+        // if snippetPath is specified (not empty), then use the specified. Otherwise, use the one generated from snippet file (_snippets_path)
+        if (this.opts.snippetPath === '') {
+          this.opts.snippetPath = window._snippets_path;
+        }
+        if (this.opts.snippetJSON.snippets.length > 0) {
+          renderSnippetPanel(this, snippetOpen); // Render Snippet Panel
+        }
 
-    document.body.appendChild(script);
+        if (this.opts.snippetJSON.target === 'ContentBuilder') {
+          console.log(`
+    ContentBuilder is a commercial library.
+    Please obtain a license at: https://innovastudio.com/contentbuilder
+    `);
+        }
+        if (this.opts.snippetJSON.target === 'ContentBox') {
+          console.log(`
+    ContentBox is a commercial library.
+    Please obtain a license at: https://innovastudio.com/contentbox
+    `);
+        }
+      };
+      document.body.appendChild(script);
+    }
   }
   isScriptAlreadyIncluded(src) {
     const scripts = document.getElementsByTagName('script');