@innovastudio/contentbox 1.5.67 → 1.5.69

package/public/contentbox/contentbox.esm.js

@@ -14057,10 +14057,10 @@ class EditBox {
                     <div data-glide-el="track" class="glide__track">
                         <ul class="glide__slides">
                             <li class="glide__slide">
-                                <div><img src="${imageList[0]}" alt=""></div>
+                                <div><img src="${this.builder.mediaPath + imageList[0]}" alt=""></div>
                             </li>
                             <li class="glide__slide">
-                                <div><img src="${imageList[1]}" alt=""></div>
+                                <div><img src="${this.builder.mediaPath + imageList[1]}" alt=""></div>
                             </li>
                         </ul>
                     </div>
@@ -14156,11 +14156,11 @@ class EditBox {
                     "images":
                         [
                             {
-                                "src": "${imageList[0]}", 
+                                "src": "${this.builder.mediaPath + imageList[0]}", 
                                 "caption": "", "style": ""
                             },
                             {
-                                "src": "${imageList[1]}", 
+                                "src": "${this.builder.mediaPath + imageList[1]}", 
                                 "caption": "", "style": ""
                             }
                         ]
@@ -73942,6 +73942,33 @@ class ColumnTool {
         util.clearControls();
       });
 
+      /*
+      const fixLayout = (row) => {
+          let hasFixed = false;
+          let elm = row.firstElementChild;
+          let cols = this.builder.cols;
+          cols.forEach(item=>{
+              let elmClass = elm.getAttribute('class');
+              if(elmClass) {
+                  // console.log(elmClass, item);
+                  if(elmClass.indexOf(item)!==-1) {
+                      hasFixed=true;
+                  }
+              }
+          });
+          // console.log('result:' + hasFixed);
+          if(!hasFixed) {
+              if(this.builder.framework==='foundation') Array.from(row.children).map((item) => {
+                  if(item.classList.contains('is-row-tool')) return;
+                  if(item.classList.contains('is-col-tool')) return;
+                  if(item.classList.contains('is-rowadd-tool')) return;
+                  item.classList.remove('column');
+              });
+              util.fixLayout(row);
+          }
+      };
+      */
+
       // Increase
       elm = columnMore.querySelector('.cell-increase');
       dom.addEventListener(elm, 'click', () => {
@@ -73969,7 +73996,10 @@ class ColumnTool {
             });
             util.fixLayout(row);
           }
+
+          // fixLayout(row);
         }
+
         this.grid.increaseColumn();
 
         // Refresh Module
@@ -74013,7 +74043,10 @@ class ColumnTool {
             });
             util.fixLayout(row);
           }
+
+          // fixLayout(row);
         }
+
         this.grid.decreaseColumn();
 
         // Refresh Module
@@ -92721,6 +92754,9 @@ class Dictation {
                     transform: rotate(450deg);
                 }
             }
+            .inp-command::placeholder {
+                color: #aaa;
+            }
         </style>
         <div class="is-overlay page-command-overlay">
             <svg class="spinner" width="40px" height="40px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
@@ -93118,14 +93154,15 @@ class Dictation {
           if (transcript && message.data.is_final) {
             finalTranscripts += ' ' + transcript;
           }
+
+          // Format
+          finalTranscripts = finalTranscripts.charAt(0).toUpperCase() + finalTranscripts.slice(1);
+          finalTranscripts = finalTranscripts.trim();
           inpCommand.value = finalTranscripts;
           clearTimeout(speechTimeout);
-
-          // console.log('Writing..');
-
+          console.log('Writing..');
           speechTimeout = setTimeout(() => {
-            // console.log('Clear');
-
+            console.log('Clear');
             this.builder.commandText = '';
             finalTranscripts = '';
             if (this.builder.autoSendCommand) {
@@ -107116,7 +107153,6 @@ Example result:
 `,
   redesign_layout2: [`To redesign the provided section:
 - Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
-- You must update the title class with 'leading-09 size-116 font-extrabold'.
 
 This is the template:
 
@@ -107128,7 +107164,7 @@ This is the template:
                 <div class="spacer height-60"></div>
             </div>
             <div class="column" style="width: 60%; flex: 0 0 auto;">
-                <h1 class="leading-09 size-116 font-extrabold">{{Place title here}}</h1>
+                <h1 class="leading-09 size-116 font-extrabold">{{TITLE}}</h1>
             </div>
         </div>
         <div class="row">
@@ -107160,8 +107196,6 @@ This is the template:
     </div>
 </div>
 
-Important: include all images from the original section in the returned result!
-    
 `, `To redesign the provided section:
 - Decide the best placement of each content element (title, paragraph, images, etc) and change the position based on the template below.
 - You must update the title class with 'tracking-tight leading-09 size-120 font-normal'.
@@ -109725,6 +109759,19 @@ class Command {
             }
 
             this.builder.editor.lib.updateBackgroundImage(activeBox, chosenImage);
+
+            if (activeBox.classList.contains('is-section')) {
+              const overlay = activeBox.querySelector('div.is-overlay');
+
+              if (overlay && overlay.querySelector('.is-overlay-bg')) {
+                let box = overlay.closest('.is-box');
+                if (box) if (box.querySelector('.is-container')) {
+                  box.classList.add('m-overlay-stack');
+                  box.classList.add('m-dark-text');
+                }
+              }
+            }
+
             this.builder.settings.onChange();
             this.dictation.finish();
             return false;
@@ -109958,11 +110005,7 @@ class Command {
           question = `Add a new section containing your response on this user request: ${question}`;
         } else if (args.new_section || args.new_section_two_boxes || args.new_section_three_boxes || args.new_section_four_boxes) {
           if (args.new_section === 'new-section' || args.new_section === 'new-section-2-columns' || args.new_section === 'new-section-3-columns' || args.new_section === 'new-section-3-columns' || args.new_section === 'new-section-4-columns') {
-            if (args.section_background && args.section_background === 'image') {
-              context = this.chooseContext(cl.new_section);
-            } else if ((args.add_headline || args.add_paragraph) && args.add_image === 'image') {
-              context = cl.new_section_with_image;
-            } else if (args.add_image === 'gallery') {
+            if (args.add_image === 'gallery') {
               context = cl.new_section_with_gallery;
             } else if (args.add_list_with_image) {
               context = cl.new_section_with_list_images;
@@ -109976,6 +110019,10 @@ class Command {
               context = this.chooseContext(cl.new_section_article_with_image);
             } else if (args.add_article) {
               context = this.chooseContext(cl.new_section_article);
+            } else if (args.section_background && args.section_background === 'image') {
+              context = this.chooseContext(cl.new_section);
+            } else if ((args.add_headline || args.add_paragraph) && args.add_image === 'image') {
+              context = cl.new_section_with_image;
             } else {
               context = cl.new_section_others;
             }
@@ -110170,6 +110217,11 @@ ${currentHtml}
 
             if (args.section_background && args.section_background === 'video') {
               html = this.setBgVideo(html);
+            } // Apply bg stack
+
+
+            if (args.section_background && args.section_background === 'image') {
+              html = this.applyBgStack(html);
             } // Render
 
 
@@ -110190,8 +110242,10 @@ ${currentHtml}
 
             if (args.section_background && args.section_background === 'video') {
               html = this.setBgVideo(html);
-            } // Render
+            } // Apply bg stack
+
 
+            html = this.applyBgStack(html); // Render
 
             this.renderResult_NewSection(html);
           }
@@ -110432,7 +110486,9 @@ ${currentHtml}`;
       } else {
         context = this.chooseContext(cl.change_layout_of_box, val);
       }
-    }
+    } // Experiment
+    // context = cl.redesign_layout2[0];
+
 
     if (useSavedSection) {
       let con = this.lib.getPreviousSectionStyleContext();
@@ -110442,7 +110498,15 @@ ${currentHtml}`;
       } else {
         context = con.boxContext;
       }
-    }
+    } // get content width
+    // let contentWidth = '';
+    // const container = activeBox.querySelector('.is-container');
+    // if(container) container.classList.forEach(item=>{
+    //     if(item.indexOf('is-content-')!==-1 && item !=='is-content-left' && item !== 'is-content-right') {
+    //         contentWidth=item;
+    //     }
+    // });
+
 
     if (this.builder.consoleLog) console.log(context); // get typo class.
 
@@ -110477,7 +110541,9 @@ ${currentHtml}`;
         console.log('Unable to proceed. Error: mergeContent.');
         this.dictation.finish(true);
         return;
-      }
+      } // mergedHtml =  this.applyBgStack(mergedHtml);
+      // this.renderResult(mergedHtml, typeClass, contentWidth); // To apply original content width
+
 
       this.renderResult(mergedHtml, typeClass);
       this.dictation.finish(); // Must be called after finished
@@ -110619,8 +110685,7 @@ ${currentHtml}`;
 
 
     const adjustIntentForContentAlignment = (intent, question) => {
-      if (intent === 'move_content_left' || intent === 'move_content_center' || intent === 'move_content_right' || intent === 'move_content_top' || intent === 'move_content_middle' || intent === 'move_content_bottom' || intent === 'make_content_center' || // This
-      intent === 'align_content_top_left' || intent === 'align_content_top_center' || intent === 'align_content_top_right' || intent === 'align_content_middle_left' || intent === 'align_content_middle_center' || intent === 'align_content_middle_right' || intent === 'align_content_bottom_left' || intent === 'align_content_bottom_center' || intent === 'align_content_bottom_right') {
+      if (intent === 'move_content_left' || intent === 'move_content_center' || intent === 'move_content_right' || intent === 'move_content_top' || intent === 'move_content_bottom' || intent === 'align_content_top_left' || intent === 'align_content_top_right' || intent === 'align_content_bottom_left' || intent === 'align_content_bottom_right') {
         let direct = false;
 
         if (question.indexOf('top left') !== -1 || question.indexOf('left top') !== -1 || question.indexOf('top center') !== -1 || question.indexOf('center top') !== -1 || question.indexOf('top right') !== -1 || question.indexOf('right top') !== -1 || question.indexOf('middle left') !== -1 || question.indexOf('left middle') !== -1 || question.indexOf('middle center') !== -1 || question.indexOf('center middle') !== -1 || question.indexOf('middle right') !== -1 || question.indexOf('right middle') !== -1 || question.indexOf('bottom left') !== -1 || question.indexOf('left bottom') !== -1 || question.indexOf('bottom center') !== -1 || question.indexOf('center bottom') !== -1 || question.indexOf('bottom right') !== -1 || question.indexOf('right bottom') !== -1) {
@@ -110630,14 +110695,12 @@ ${currentHtml}`;
         if (!direct) {
           if (question.indexOf('top') !== -1) {
             intent = 'move_content_top';
-          } else if (question.indexOf('middle') !== -1) {
-            intent = 'move_content_middle';
           } else if (question.indexOf('bottom') !== -1) {
             intent = 'move_content_bottom';
           } else if (question.indexOf('left') !== -1) {
             intent = 'move_content_left';
           } else if (question.indexOf('center') !== -1) {
-            if (intent === 'make_content_center') ;else intent = 'move_content_center';
+            intent = 'move_content_center';
           } else if (question.indexOf('right') !== -1) {
             intent = 'move_content_right';
           }
@@ -110666,31 +110729,16 @@ ${currentHtml}`;
       this.builder.animateScroll.applyPresetBasic('is-fadeIn', 100);
       this.builder.settings.onChange();
       return false;
-    } else if (intent == 'fade_in_slow') {
-      this.builder.editor.saveForUndo();
-      this.builder.animateScroll.applyPresetBasic('is-fadeIn', 300);
-      this.builder.settings.onChange();
-      return false;
     } else if (intent == 'fade_in_up') {
       this.builder.editor.saveForUndo();
       this.builder.animateScroll.applyPresetBasic('is-fadeInUp', 100);
       this.builder.settings.onChange();
       return false;
-    } else if (intent == 'fade_in_up_slow') {
-      this.builder.editor.saveForUndo();
-      this.builder.animateScroll.applyPresetBasic('is-fadeInUp', 300);
-      this.builder.settings.onChange();
-      return false;
     } else if (intent == 'slide_up') {
       this.builder.editor.saveForUndo();
       this.builder.animateScroll.applyPresetBasic('is-slideInUp', 100);
       this.builder.settings.onChange();
       return false;
-    } else if (intent == 'slide_up_slow') {
-      this.builder.editor.saveForUndo();
-      this.builder.animateScroll.applyPresetBasic('is-slideInUp', 300);
-      this.builder.settings.onChange();
-      return false;
     } else if (intent == 'zoom_in') {
       this.builder.editor.saveForUndo();
       this.builder.animateScroll.applyPresetBasic('is-zoomIn', 300);
@@ -110860,6 +110908,19 @@ ${currentHtml}`;
 
       let chosenImage = this.chooseBgImage(activeBox);
       this.builder.editor.lib.updateBackgroundImage(activeBox, chosenImage);
+
+      if (activeBox.classList.contains('is-section')) {
+        const overlay = activeBox.querySelector('div.is-overlay');
+
+        if (overlay && overlay.querySelector('.is-overlay-bg')) {
+          let box = overlay.closest('.is-box');
+          if (box) if (box.querySelector('.is-container')) {
+            box.classList.add('m-overlay-stack');
+            box.classList.add('m-dark-text');
+          }
+        }
+      }
+
       this.builder.settings.onChange();
       return false;
     } else if (intent === 'change_bg_image') {
@@ -110878,6 +110939,19 @@ ${currentHtml}`;
       }
 
       this.builder.editor.lib.updateBackgroundImage(activeBox, chosenImage);
+
+      if (activeBox.classList.contains('is-section')) {
+        const overlay = activeBox.querySelector('div.is-overlay');
+
+        if (overlay && overlay.querySelector('.is-overlay-bg')) {
+          let box = overlay.closest('.is-box');
+          if (box) if (box.querySelector('.is-container')) {
+            box.classList.add('m-overlay-stack');
+            box.classList.add('m-dark-text');
+          }
+        }
+      }
+
       this.builder.settings.onChange();
       return false;
     } else if (intent === 'remove_bg_color') {
@@ -111274,132 +111348,61 @@ ${currentHtml}`;
 
       this.builder.settings.onChange();
       return false;
-    }
-    /*else if(intent==='move_content_left') {
-      
-      this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'left');
-       this.builder.settings.onChange();
-      return false;
-      
-    } else if(intent==='move_content_center') {
-      
-      this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'center');
-      // this.builder.editor.lib.moveContent(activeBox, 'middle');
-       this.builder.settings.onChange();
-      return false;
-      
-    } else if(intent==='move_content_right') {
-      
-      this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'right');
-       this.builder.settings.onChange();
-      return false;
-      
-    } else if(intent==='move_content_top') {
-      
+    } else if (intent === 'move_content_left') {
       this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'top');
-       this.builder.settings.onChange();
-      return false;
-      
-    } else if(intent==='move_content_middle') {
-      
-      this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'middle');
-       this.builder.settings.onChange();
-      return false;
-      
-    } else if(intent==='move_content_bottom') {
-      
-      this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'bottom');
-       this.builder.settings.onChange();
+      this.builder.editor.lib.moveContent(activeBox, 'left');
+      this.builder.editor.lib.moveContent(activeBox, 'middle');
+      this.builder.settings.onChange();
       return false;
-      
-    } else if(intent==='make_content_center') { // This
-      
+    } else if (intent === 'move_content_center') {
       this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'center');
+      this.builder.editor.lib.moveContent(activeBox, 'center');
       this.builder.editor.lib.moveContent(activeBox, 'middle');
-       this.builder.settings.onChange();
+      this.builder.settings.onChange();
       return false;
-      
-    } else if(intent==='align_content_top_left') {
-      
+    } else if (intent === 'move_content_right') {
       this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'top');
-      this.builder.editor.lib.moveContent(activeBox, 'left');
-       this.builder.settings.onChange();
+      this.builder.editor.lib.moveContent(activeBox, 'right');
+      this.builder.editor.lib.moveContent(activeBox, 'middle');
+      this.builder.settings.onChange();
       return false;
-      
-    } else if(intent==='align_content_top_center') {
-      
+    } else if (intent === 'move_content_top') {
       this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'top');
       this.builder.editor.lib.moveContent(activeBox, 'center');
-       this.builder.settings.onChange();
+      this.builder.editor.lib.moveContent(activeBox, 'top');
+      this.builder.settings.onChange();
       return false;
-      
-    } else if(intent==='align_content_top_right') {
-      
+    } else if (intent === 'move_content_bottom') {
       this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'top');
-      this.builder.editor.lib.moveContent(activeBox, 'right');
-       this.builder.settings.onChange();
+      this.builder.editor.lib.moveContent(activeBox, 'center');
+      this.builder.editor.lib.moveContent(activeBox, 'bottom');
+      this.builder.settings.onChange();
       return false;
-      
-    } else if(intent==='align_content_middle_left') {
-      
+    } else if (intent === 'align_content_top_left') {
       this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'middle');
+      this.builder.editor.lib.moveContent(activeBox, 'top');
       this.builder.editor.lib.moveContent(activeBox, 'left');
-       this.builder.settings.onChange();
-      return false;
-      
-    } else if(intent==='align_content_middle_center') {
-      
-      this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'middle');
-      this.builder.editor.lib.moveContent(activeBox, 'center');
-       this.builder.settings.onChange();
+      this.builder.settings.onChange();
       return false;
-      
-    } else if(intent==='align_content_middle_right') {
-      
+    } else if (intent === 'align_content_top_right') {
       this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'middle');
+      this.builder.editor.lib.moveContent(activeBox, 'top');
       this.builder.editor.lib.moveContent(activeBox, 'right');
-       this.builder.settings.onChange();
+      this.builder.settings.onChange();
       return false;
-      
-    } else if(intent==='align_content_bottom_left') {
-      
+    } else if (intent === 'align_content_bottom_left') {
       this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'bottom');
+      this.builder.editor.lib.moveContent(activeBox, 'bottom');
       this.builder.editor.lib.moveContent(activeBox, 'left');
-       this.builder.settings.onChange();
-      return false;
-      
-    } else if(intent==='align_content_bottom_center') {
-      
-      this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'bottom');
-      this.builder.editor.lib.moveContent(activeBox, 'center');
-       this.builder.settings.onChange();
+      this.builder.settings.onChange();
       return false;
-      
-    } else if(intent==='align_content_bottom_right') {
-      
+    } else if (intent === 'align_content_bottom_right') {
       this.builder.editor.saveForUndo();
-       this.builder.editor.lib.moveContent(activeBox, 'bottom');
+      this.builder.editor.lib.moveContent(activeBox, 'bottom');
       this.builder.editor.lib.moveContent(activeBox, 'right');
-       this.builder.settings.onChange();
+      this.builder.settings.onChange();
       return false;
-      
-    } */
-    else if (intent === 'increase_space') {
+    } else if (intent === 'increase_space') {
       let elm = this.builder.editor.activeElement;
 
       if (elm) {
@@ -111847,6 +111850,22 @@ ${currentHtml}`;
     return doc.documentElement.innerHTML;
   }
 
+  applyBgStack(html) {
+    const parser = new DOMParser();
+    let doc = parser.parseFromString(html, 'text/html');
+    const overlay = doc.querySelector('div.is-overlay');
+
+    if (overlay && overlay.querySelector('.is-overlay-bg')) {
+      let box = overlay.closest('.is-box');
+      if (box) if (box.querySelector('.is-container')) {
+        box.classList.add('m-overlay-stack');
+        box.classList.add('m-dark-text');
+      }
+    }
+
+    return doc.documentElement.innerHTML;
+  }
+
   fixCommon(html) {
     html = html.replaceAll('{{CONTENT}}', '');
     const parser = new DOMParser();
@@ -111873,6 +111892,34 @@ ${currentHtml}`;
           col.style.width = '';
           col.style.flex = '';
         }
+      }); // Fix grid (width)
+
+      const rows = container.querySelectorAll('.row');
+      rows.forEach(row => {
+        let totalWidth = 0;
+        let hasAutoWidthCol = false;
+        let lastCol;
+        const cols = row.querySelectorAll('.column');
+        cols.forEach(col => {
+          if (col.style.width && col.style.width.includes('%')) {
+            totalWidth += parseFloat(col.style.width);
+          } else {
+            hasAutoWidthCol = true;
+          }
+
+          lastCol = col;
+        });
+
+        if (totalWidth > 100) {
+          console.log('FIX: clear width. Total: ' + totalWidth);
+          cols.forEach(col => {
+            col.style.width = '';
+            col.style.flex = '';
+          });
+        } else if (totalWidth < 100 && !hasAutoWidthCol) {
+          console.log('FIX: add col. Total: ' + totalWidth);
+          if (lastCol) lastCol.insertAdjacentHTML('afterend', '<div class="column"><div class="spacer height-60"></div></div>');
+        }
       }); // Replace element style with class
 
       const elements = doc.querySelectorAll('*');
@@ -111968,17 +112015,6 @@ ${currentHtml}`;
 
           doc = parser.parseFromString(docBox.body.innerHTML, 'text/html');
         }
-      } // Apply bg stacking
-
-
-      const overlay = doc.querySelector('div.is-overlay');
-
-      if (overlay && overlay.querySelector('.is-overlay-bg')) {
-        let box = overlay.closest('.is-box');
-        if (box) if (box.querySelector('.is-container')) {
-          box.classList.add('m-overlay-stack');
-          box.classList.add('m-dark-text');
-        }
       }
 
       if (container) {
@@ -112354,7 +112390,7 @@ ${currentHtml}`;
     this.dictation.finish(); // Must be called after finished
   }
 
-  renderResult(html, typeClass) {
+  renderResult(html, typeClass, contentWidth) {
     const activeBox = this.builder.activeBox;
     const activeSection = this.builder.activeSection;
     let sectionBox = false;
@@ -112367,7 +112403,7 @@ ${currentHtml}`;
 
     if (sectionBox) {
       // section
-      // Replace class
+      // Replace type class
       const parser = new DOMParser();
       const htmlDocument = parser.parseFromString(html, 'text/html');
 
@@ -112378,6 +112414,21 @@ ${currentHtml}`;
           section.classList.remove(...Array.from(section.classList).filter(className => className.startsWith('type-')));
           section.classList.add(typeClass);
         }
+      } // Replace content width
+
+
+      if (contentWidth) {
+        const container = htmlDocument.querySelector('.is-container');
+
+        if (container) {
+          container.classList.forEach(item => {
+            if (item.indexOf('is-content-') !== -1 && item !== 'is-content-left' && item !== 'is-content-right') {
+              container.classList.remove(item);
+              container.classList.add(contentWidth);
+            }
+          });
+          container.classList.add(contentWidth);
+        }
       }
 
       html = htmlDocument.body.innerHTML; // const typeClass = this.lib.getTypographyClass(html);
@@ -112412,6 +112463,7 @@ ${currentHtml}`;
       const replacementElement = tempContainer.firstChild; // replacementElement.setAttribute('class', savedClasses);
 
       if (savedClass) replacementElement.classList.add(savedClass); // const typeClass = this.lib.getTypographyClass(html);
+      // Replace type class
 
       if (typeClass) {
         const section = htmlDocument.querySelector('div.is-section');
@@ -112420,6 +112472,20 @@ ${currentHtml}`;
           section.classList.remove(...Array.from(section.classList).filter(className => className.startsWith('type-')));
           section.classList.add(typeClass);
         }
+      } // Replace content width
+
+
+      if (contentWidth) {
+        const container = replacementElement.querySelector('.is-container');
+
+        if (container) {
+          container.classList.forEach(item => {
+            if (item.indexOf('is-content-') !== -1 && item !== 'is-content-left' && item !== 'is-content-right') {
+              container.classList.remove(item);
+            }
+          });
+          container.classList.add(contentWidth);
+        }
       } // Replace
 
 
@@ -115127,7 +115193,7 @@ class ContentBox {
       speechRecognitionLang: 'en-US',
       similarityThreshold: 0.65,
       // for commandList similarity checking
-      headlineList: ['We\'re [CompanyName]. Full stack development with a spark of creativity.', 'Transforming your digital experience with [CompanyName]. Achieve your online goals with our customized solutions.', 'Revolutionizing web development with [CompanyName]. Unleash your digital potential with our high-performance solutions.'],
+      headlineList: ['We\'re [CompanyName]. Full stack development with a spark of creativity.'],
       mediaPath: 'assets/gallery/',
       media: {
         slider: ['slide-01.jpg', 'slide-02.jpg'],
@@ -115199,11 +115265,8 @@ class ContentBox {
         select_image: ['select image'],
         change_font: ['change font', 'change typography', 'change style'],
         fade_in: ['fade in'],
-        fade_in_slow: ['fade in slow'],
         fade_in_up: ['fade in up'],
-        fade_in_up_slow: ['fade in up slow'],
         slide_up: ['slide up'],
-        slide_up_slow: ['slide up slow'],
         zoom_in: ['zoom in'],
         zoom_out: ['zoom out'],
         animate_once: ['animate once'],
@@ -115272,22 +115335,14 @@ class ContentBox {
         align_right: ['align right', 'align text right', 'right aligned'],
         align_full: ['align full', 'align justify', 'justify', 'justify text', 'justify full'],
         clear_alignment: ['clear alignment', 'remove alignment', 'clear text alignment', 'remove text alignment'],
-        make_content_center: ['make content center'],
-        // middle center
         move_content_left: ['move content left', 'align content left'],
         move_content_center: ['move content center', 'align content center'],
         move_content_right: ['move content right', 'align content right'],
         move_content_top: ['move content top', 'align content top'],
-        move_content_middle: ['move content middle', 'align content middle'],
         move_content_bottom: ['move content bottom', 'align content bottom'],
         align_content_top_left: ['move content top left', 'align content top left'],
-        align_content_top_center: ['move content top center', 'align content top center'],
         align_content_top_right: ['move content top right', 'align content top right'],
-        align_content_middle_left: ['move content middle left', 'align content middle left'],
-        align_content_middle_center: ['move content middle center', 'align content middle center'],
-        align_content_middle_right: ['move content middle right', 'align content middle right'],
         align_content_bottom_left: ['move content bottom left', 'align content bottom left'],
-        align_content_bottom_center: ['move content bottom center', 'align content bottom center'],
         align_content_bottom_right: ['move content bottom right', 'align content bottom right'],
         increase_space: ['more space', 'increase space', 'enlarge space'],
         decrease_space: ['less space', 'decrease space', 'reduce space'],
@@ -115340,7 +115395,7 @@ Provide an engaging headline.`, 'Create a new section showcasing a photo gallery
 
         },
         selection: {
-          title: 'Selection',
+          title: 'Selection & Layout',
           list: ['Select the headline', // 'Select the paragraph',
           // 'Select the button',
           // 'Select the space',
@@ -115361,7 +115416,7 @@ Provide an engaging headline.`, 'Create a new section showcasing a photo gallery
           list: [// 'Set the background color to light green',
           // 'Change the background color to light yellow',
           'Add a background image', 'Change the background image', 'Add a background slider', 'Add a background video', 'Clear background', // 'Adjust the section height to 50%',
-          'Adjust the section height to 70%', 'Adjust the section height to 100%', 'Set the section height to auto']
+          'Adjust the section height to 70%', 'Change the section height to 100%', 'Set the section height to auto']
         },
         typography: {
           title: 'Typography',
@@ -115371,21 +115426,25 @@ Provide an engaging headline.`, 'Create a new section showcasing a photo gallery
           title: 'Content',
           list: ['Set the content color to white', 'Set the content color to black', 'Increase the width of the content', 'Reduce the width of the content', 'Increase the default font size', // 'Decrease the default font size',
           'Increase the default line height', // 'Decrease the default line height',
-          'Clear the content', 'Add new content', // 'Add text',
+          'Clear the content', 'Add new content', // 'Align the content to the center',
+          // 'Align the content to the left',
           // 'Align the content to the center',
-          'Align the content to the left', // 'Align the content to the center',
           // 'Align the content to the right',
-          'Align the content to the top', 'Align the content to the middle', // 'Align the content to the bottom',
-          'Make the content centered']
+          // 'Align the content to the top',
+          // 'Align the content to the middle',
+          // 'Align the content to the bottom',
+          // 'Make the content centered'
+          'Move the content to the left', 'Move the content to the center', 'Move the content to the right', 'Move the content to the top']
         },
         element: {
           title: 'Element',
-          list: ['Add a paragraph', 'Add an image', 'Add a Youtube video', // 'Add a table',
+          list: ['Add a headline', 'Add a paragraph', 'Add an image', 'Add a Youtube video', // 'Add a table',
           // 'Add audio',
           // 'Add map',
           // 'Add an icon',
           // 'Add social links',
-          'Add a button', 'Add two buttons', 'Add a space', 'Increase the space', 'Reduce the space']
+          'Add a button', 'Add two buttons', 'Add a space', 'Increase the space' // 'Reduce the space',
+          ]
         },
         text: {
           title: 'Text Formatting',
@@ -115401,7 +115460,7 @@ Provide an engaging headline.`, 'Create a new section showcasing a photo gallery
         },
         animation: {
           title: 'Animation',
-          list: ['Add a fade in animation', 'Add fade in slow animation', 'Add fade in up animation', 'Add fade in up slow animation', 'Add slide up animation', 'Add slide up slow animation', 'Add zoom in animation', 'Add zoom out animation', 'Clear the animation', 'Animate once', 'Always animate']
+          list: ['Add a fade in animation', 'Add fade in up animation', 'Add slide up animation', 'Add zoom in animation', 'Add zoom out animation', 'Clear the animation', 'Animate once', 'Always animate']
         }
       },
 
@@ -117304,6 +117363,8 @@ Provide an engaging headline.`, 'Create a new section showcasing a photo gallery
 
   addIdea(newArea) {
     this.editor.saveForUndo();
+    const d = new Date();
+    newArea = newArea.replace('[%YEAR%]', d.getFullYear());
     let newSection;
     let arrSections = [];
 
@@ -117529,7 +117590,114 @@ Provide an engaging headline.`, 'Create a new section showcasing a photo gallery
         return false;
       });
     });
-    this.sectionStack(); //Trigger Change event
+    this.sectionStack();
+
+    const addMultiClass = (col, multiClass) => {
+      let current = col.getAttribute('class');
+      col.setAttribute('class', current + ' ' + multiClass);
+    };
+
+    const applyClass = (col, w) => {
+      //['col-md-1', 'col-md-2', 'col-md-3', 'col-md-4', 'col-md-5', 'col-md-6', 'col-md-7', 'col-md-8', 'col-md-9', 'col-md-10', 'col-md-11', 'col-md-12'];
+      if (94 <= w && w <= 100) {
+        //col-md-11 = 91.666667%
+        addMultiClass(col, this.editor.cols[11]);
+      }
+
+      if (86 <= w && w < 94) {
+        //col-md-11 = 91.666667%
+        addMultiClass(col, this.editor.cols[10]);
+      }
+
+      if (78 <= w && w < 86) {
+        //col-md-10 = 83.333333%
+        addMultiClass(col, this.editor.cols[9]);
+      }
+
+      if (70 <= w && w < 78) {
+        //col-md-9 = 75%
+        addMultiClass(col, this.editor.cols[8]);
+      }
+
+      if (62 <= w && w < 70) {
+        //col-md-8 = 66.666667%
+        addMultiClass(col, this.editor.cols[7]);
+      }
+
+      if (54 <= w && w < 62) {
+        //col-md-7 = 58.333333%
+        addMultiClass(col, this.editor.cols[6]);
+      }
+
+      if (46 <= w && w < 54) {
+        //col-md-6 = 50%
+        addMultiClass(col, this.editor.cols[5]);
+      }
+
+      if (37 <= w && w < 46) {
+        //col-md-5 = 41.666667%
+        addMultiClass(col, this.editor.cols[4]);
+      }
+
+      if (29 <= w && w < 37) {
+        //col-md-4 = 33%
+        addMultiClass(col, this.editor.cols[3]);
+      }
+
+      if (21 <= w && w < 29) {
+        //col-md-3 = 25%
+        addMultiClass(col, this.editor.cols[2]);
+      }
+
+      if (13 <= w && w < 21) {
+        //col-md-2 = 16.666667%%
+        addMultiClass(col, this.editor.cols[1]);
+      }
+
+      if (5 <= w && w < 13) {
+        //col-md-1 = 8.333333%%%
+        addMultiClass(col, this.editor.cols[0]);
+      }
+    };
+
+    if (!this.editor.useDefaultGrid) {
+      let rows = newSection.querySelectorAll('.is-container > div');
+      rows.forEach(row => {
+        let cols = this.editor.util.getAllColumns(row);
+        cols.forEach(col => {
+          if (col.style.width && col.style.width.includes('%')) {
+            let w = parseFloat(col.style.width);
+            col.setAttribute('data-temp-w', w);
+          } else {
+            let colWidth = Number(window.getComputedStyle(col).getPropertyValue('width').match(/\d+/)[0]);
+            let rowWidth = Number(window.getComputedStyle(row).getPropertyValue('width').match(/\d+/)[0]);
+            let w = colWidth / rowWidth * 100;
+            col.setAttribute('data-temp-w', w);
+          }
+        });
+      });
+      rows = newSection.querySelectorAll('.is-container > div');
+      rows.forEach(row => {
+        let cols = this.editor.util.getAllColumns(row);
+        cols.forEach(col => {
+          let w = col.getAttribute('data-temp-w');
+          applyClass(col, parseFloat(w));
+          col.removeAttribute('data-temp-w');
+          let classes = this.editor.cols[0].split(' ');
+          if (!classes.includes('column')) col.classList.remove('column');else {
+            const classNames = col.className.split(' ');
+            const uniqueClassNames = [...new Set(classNames)]; // Using Set to remove duplicates
+
+            col.className = uniqueClassNames.join(' ');
+          }
+          col.style.width = '';
+          col.style.flex = '';
+        }); // this.editor.util.fixLayout(row);
+      });
+    }
+
+    this.clearSelection();
+    this.selectNewSection(newSection); //Trigger Change event
 
     this.onChange();
     dom.removeElement(document.querySelector('.is-sidebar-overlay'));
@@ -117545,6 +117713,48 @@ Provide an engaging headline.`, 'Create a new section showcasing a photo gallery
   } // addIdea
 
 
+  clearSelection() {
+    const prevBox = this.doc.querySelector('.box-select');
+    if (prevBox) prevBox.classList.remove('box-select');
+    const prevSection = this.doc.querySelector('.section-select');
+    if (prevSection) prevSection.classList.remove('section-select');
+    this.editor.util.clearActiveCell();
+    this.editor.util.clearAfterUndoRedo();
+  }
+
+  selectNewSection(newSection) {
+    let sectionBox = false;
+    if (newSection.classList.contains('is-box')) sectionBox = true;
+
+    if (sectionBox) {
+      // section
+      // select box
+      newSection.classList.add('box-select');
+      this.activeBox = newSection;
+      this.wrapperEl.classList.add('hard-select'); // select section
+
+      newSection.classList.add('section-select');
+      this.activeSection = newSection; // Select
+
+      this.positionTool(newSection);
+    } else {
+      // select box
+      let box = newSection.querySelector('.is-box');
+
+      if (box) {
+        box.classList.add('box-select');
+        this.activeBox = box;
+      }
+
+      this.wrapperEl.classList.add('hard-select'); // select section
+
+      newSection.classList.add('section-select');
+      this.activeSection = newSection; // Select
+
+      this.positionTool(newSection);
+    }
+  }
+
   refreshUIStyle() {
     // -------