@innovastudio/contentbuilder 1.4.59 → 1.4.61

package/public/contentbuilder/contentbuilder.esm.js

@@ -4744,8 +4744,13 @@ class Util {
       }
       row.parentNode.insertBefore(rowElement, row);
       dom.moveAfter(rowElement, row);
+
+      // checkEmpty & onRender called here
       let builderActive = this.builder.doc.querySelector('.builder-active');
-      if (builderActive) this.builder.applyBehaviorOn(builderActive);
+      if (builderActive) this.builder.applyBehaviorOn(builderActive);else {
+        builderActive = this.builder.doc.querySelector('.is-builder');
+        this.builder.applyBehaviorOn(builderActive);
+      }
       cellElement.click(); //change active block to the newly created
 
       // Change to row selection
@@ -7545,7 +7550,7 @@ class Dom {
       for (var i = 0; i < sel.rangeCount; ++i) {
         selectedNodes = selectedNodes.concat(sel.getRangeAt(i).getNodes());
       }
-      const blockElms = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'pre'];
+      const blockElms = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'pre', 'li'];
       selectedNodes.forEach(item => {
         if (item.tagName) {
           const tagName = item.tagName.toLowerCase();
@@ -15828,6 +15833,15 @@ const prepareSvgIcons = builder => {
                 <path d="M12 4l0 12"></path>
             </symbol>
 
+            <symbol id="icon-message-search" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M8 9h8"></path>
+                <path d="M8 13h5"></path>
+                <path d="M12 21l-.5 -.5l-2.5 -2.5h-3a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v4.5"></path>
+                <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
+                <path d="M20.2 20.2l1.8 1.8"></path>
+            </symbol>
+            
             </defs>
         </svg>`;
   builder.dom.appendHtml(builder.builderStuff, html);
@@ -18188,6 +18202,7 @@ class Grid {
         this.builder.uo.saveForUndo();
         row.parentNode.removeChild(row);
         util.checkEmpty();
+        util.clearActiveCell();
         this.builder.opts.onChange();
       }
     });
@@ -76372,6 +76387,7 @@ class Lib {
 
   // Run functions based on short command
   processShortCommand(command) {
+    command = command.toLowerCase();
     let shortCommandList = this.builder.shortCommandList;
     const getMatchingCommand = command => {
       for (const key in shortCommandList) {
@@ -76548,11 +76564,19 @@ class Lib {
     }
     if (val === 'left') {
       container.classList.add('is-content-left');
-      container.classList.add('edge-x-2');
+      if (activeBox.querySelector('.glide')) {
+        container.classList.add('edge-x-3'); // to give space for slider arrow
+      } else {
+        container.classList.add('edge-x-2');
+      }
     }
     if (val === 'right') {
       container.classList.add('is-content-right');
-      container.classList.add('edge-x-2');
+      if (activeBox.querySelector('.glide')) {
+        container.classList.add('edge-x-3'); // to give space for slider arrow
+      } else {
+        container.classList.add('edge-x-2');
+      }
     }
     if (val === 'top' || val === 'middle' || val === 'bottom') {
       activeBox.classList.remove('is-content-top');
@@ -77194,16 +77218,110 @@ class Dictation {
     this.util = util;
     const builderStuff = this.builder.builderStuff;
     this.builderStuff = builderStuff;
+    const commandInfo = this.builder.commandInfo;
+    let htmlList = '';
+    for (const key in commandInfo) {
+      if (Object.prototype.hasOwnProperty.call(commandInfo, key)) {
+        const {
+          title,
+          list,
+          width
+        } = commandInfo[key];
+        htmlList += `<h2>${title}</h2>`;
+        for (const item of list) {
+          if (width) htmlList += `<div role="button" tabindex="0" class="command-item" style="width:${width}">${item}</div>`;else htmlList += `<div role="button" tabindex="0" class="command-item">${item}</div>`;
+        }
+      }
+    }
     let html = `
         <style>
+            .is-modal.commandlist {
+                z-index: 10005 !important
+            }
+            .is-modal.commandlist .is-modal-content {
+                max-width:calc(100% - 150px);
+                height:calc(100% - 150px);
+                padding:0 !important;
+            }
+            .is-modal.commandlist .is-modal-close {
+                position: absolute !important;
+                top: 5px;
+                right: 15px;
+                box-shadow: none !important;
+            }
+            .is-modal.commandlist .is-modal-close {
+                background: transparent !important;
+            }
+            .is-modal.commandlist .is-modal-close svg {
+                width:50px;height:50px;
+            }
+            .is-modal.commandlist .is-modal-content > div {
+                display: flex;
+                flex-flow: wrap;
+                align-items: flex-start;
+                /*align-items: inherits;*/
+                justify-content: flex-start;
+                padding: 2.2rem;
+                box-sizing: border-box;
+                overflow-y: auto;
+                overflow-x: hidden;
+                width: 100%;
+                height: 100%;
+            }
+            .is-modal.commandlist .is-modal-content > div > h2 {
+                display: block;
+                width: 100%;
+                flex: none;
+                font-family: "Open Sans", sans-serif;
+                font-weight: 300;
+                margin-bottom: 30px;
+                font-size: 28px;
+            }
+            .is-modal.commandlist .is-modal-content > div > div {
+                margin-right: 2.2rem;
+                margin-bottom: 2.2rem;
+                display: flex;
+                flex: none;
+                width: 255px;
+                height: auto;
+                flex-direction: column;
+                justify-content: space-between;
+                border-radius: 0.25rem;
+                border: 1px solid rgb(156 163 175/.75);
+                padding: 1.5rem 2rem;
+                letter-spacing: .025em;
+                box-shadow: 5px 5px 0px rgb(0 0 0 / 3%);
+                font-size: 20px;
+                font-weight: 300;
+                font-family: sans-serif;
+                line-height: 1.3;
+                cursor:pointer;
+                transition: all 0.3s ease;
+            }
+            /*
+            .is-modal.commandlist .is-modal-content > div > div:focus {
+                outline: #5fa1f0 2px solid;
+                outline-offset: 2px;
+            }
+            */
+            .is-modal.commandlist .is-modal-content > div > div:hover {
+                background: rgba(0, 0, 0, 0.03);
+                /*
+                outline: #5fa1f0 2px solid;
+                border: 1px solid transparent;
+                */
+            }
+            .dark .is-modal.commandlist .is-modal-content > div > div:hover {
+                background: rgba(255, 255, 255, 0.05);
+            }
             .is-modal.page-command {
-                width: 300px !important; 
+                width: 340px !important; 
                 height: 200px !important; 
                 top: auto !important; 
                 bottom: 30px !important; 
                 left: auto !important; 
                 right: 30px !important; 
-                z-index: 10002 !important; 
+                z-index: 10005 !important;
                 font-size: 12px;
             }
             .page-command-overlay {
@@ -77214,9 +77332,6 @@ class Dictation {
                 justify-content: center;
                 align-items:center;
             }
-            .is-modal.page-command {
-                z-index: 10005 !important;
-            }
 
             .spinner {
                 -webkit-animation: rotator 1.4s linear infinite;
@@ -77285,17 +77400,20 @@ class Dictation {
                 align-items: center;">
                     ${util.out('Send a Command')}</span>
                 <button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">
-                    <svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
+                    <svg class="is-icon-flex"><use xlink:href="#ion-ios-close-empty"></use></svg>
                 </button>
             </div>
             <div style="display:flex;flex-direction:column;justify-content:space-between;position:absolute;box-sizing:border-box;top:0;left:0;width:100%;height:100%;border-top:transparent 35px solid;overflow-y:hidden;overflow-x:auto;">
             
-                <textarea class="inp-command" style="width:100%;height:121px;border:none;outline:none;background:transparent;line-height: 1.2;
+                <textarea class="inp-command" style="resize:none;width:100%;height:121px;border:none;outline:none;background:transparent;line-height: 1.2;
                 font-family: sans-serif;font-weight: 300;font-size: 17px;"></textarea>
                 <div style="display:flex">
                     <button title="${util.out('Mic')}" class="cmd-enable-dictation classic-secondary" style="width:40px;height:43px;flex:none;padding:0;outline-offset:-2px;">
                         <svg class="is-icon-flex" style="width: 18px; height: 18px;"><use xlink:href="#icon-microphone"></use></svg> 
                     </button>
+                    <button title="${util.out('Commands')}" class="cmd-command-list classic-secondary" style="width:40px;height:43px;flex:none;padding:0;outline-offset:-2px;">
+                        <svg class="is-icon-flex" style="width: 18px; height: 18px;"><use xlink:href="#icon-message-search"></use></svg> 
+                    </button>
                     <button title="${util.out('Clear')}" class="cmd-clear-command classic-secondary" style="width:40px;height:43px;flex:none;padding:0;outline-offset:-2px;">
                         <svg class="is-icon-flex" style="width: 18px; height: 18px;"><use xlink:href="#icon-eraser"></use></svg> 
                     </button>
@@ -77304,13 +77422,31 @@ class Dictation {
                 </div>
             </div>
         </div>
+
+        <div class="is-modal commandlist" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="false">
+            <div class="is-modal-overlay"></div>
+
+            <div class="is-modal-content scroll-darker"">
+                <button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">
+                    <svg class="is-icon-flex"><use xlink:href="#ion-ios-close-empty"></use></svg>
+                </button>
+                <div>
+
+                    ${htmlList}
+
+                </div>
+            </div>
+        </div>
         `;
     dom.appendHtml(builderStuff, html);
     const modalCommand = builderStuff.querySelector('.page-command');
     this.modalCommand = modalCommand;
+    const modalCommandList = builderStuff.querySelector('.commandlist');
+    this.modalCommandList = modalCommandList;
     const btnDictation = builderStuff.querySelector('.cmd-enable-dictation');
     const btnClear = builderStuff.querySelector('.cmd-clear-command');
     const chkAutoSend = builderStuff.querySelector('#chkAutoSendCommand');
+    const btnCommandList = builderStuff.querySelector('.cmd-command-list');
     this.builder.commandText = '';
     this.builder.autoSendCommand = false;
     if (localStorage.getItem('_dictation') !== null) {
@@ -77343,6 +77479,35 @@ class Dictation {
       util.saveSelection(); // must be called in case used by formatText()
     });
 
+    btnCommandList.addEventListener('click', () => {
+      util.showModal(this.modalCommandList, false, () => {
+        btnCommandList.removeAttribute('data-focus');
+        btnCommandList.focus();
+      }, false);
+      btnCommandList.setAttribute('data-focus', true);
+    });
+    const handleSelect = s => {
+      const inpCommand = this.builderStuff.querySelector('.inp-command');
+      inpCommand.value = s;
+      util.hideModal(this.modalCommandList);
+    };
+    let items = modalCommandList.querySelectorAll('.command-item');
+    items.forEach(elm => {
+      elm.addEventListener('click', () => {
+        handleSelect(elm.innerText);
+        inpCommand.focus();
+      });
+      elm.addEventListener('keydown', e => {
+        if (e.which === 13 && !e.shiftKey) {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+          handleSelect(elm.innerText);
+          setTimeout(() => {
+            inpCommand.focus();
+          }, 300);
+        }
+      });
+    });
     btnDictation.addEventListener('click', () => {
       if (!this.checkMic()) {
         this.startDictation();
@@ -77378,7 +77543,6 @@ class Dictation {
         // Abort
 
         this.opts.abort();
-        this.finish();
         return;
       }
       const inpCommand = this.modalCommand.querySelector('.inp-command');
@@ -77511,7 +77675,7 @@ class Dictation {
     ovl.style.display = 'flex';
     this.builder.isInProgress = true;
   }
-  finish() {
+  finish(doNotClear) {
     const btnSend = this.modalCommand.querySelector('.cmd-send-command');
     btnSend.innerText = this.util.out('Send');
     const ovl = this.builderStuff.querySelector('.page-command-overlay');
@@ -77520,231 +77684,11 @@ class Dictation {
     if (this.builder.autoSendCommand) {
       // Clear
       const inpCommand = this.builderStuff.querySelector('.inp-command');
-      this.builder.commandText = '';
-      inpCommand.value = '';
-    }
-    const elmTool = this.builderStuff.querySelector('.is-element-tool');
-    elmTool.style.display = '';
-  }
-}
-
-class Command {
-  constructor(builder) {
-    this.builder = builder;
-    const builderStuff = this.builder.builderStuff;
-    this.builderStuff = builderStuff;
-    const controller = new AbortController(); // Abort
-    let signal = controller.signal;
-
-    // Dictation Panel 
-    this.dictation = this.builder.dictation;
-    this.dictation.opts.send = async question => {
-      if (question === '') {
-        return;
-      }
-      question = this.builder.lib.processShortCommand(question);
-      if (!question) {
-        this.dictation.finish(); // Must be called after finished
-        return;
+      if (doNotClear) ; else {
+        this.builder.commandText = '';
+        inpCommand.value = '';
       }
-      question = this.processPrompt(question);
-      if (!question) {
-        this.dictation.finish(); // Must be called after finished
-        return;
-      }
-      let currentHtml = this.builder.html();
-
-      // Update prompt
-      question = `${question}:
-    
-            ${currentHtml}`;
-      const response = await fetch('http://localhost:8081/answer', {
-        signal,
-        // Abort
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          question
-        })
-      });
-      if (!response.ok) {
-        const error = await response.json();
-        console.error('Error:', error.error);
-        this.dictation.finish(); // Must be called after finished
-
-        return;
-      }
-      const data = await response.json();
-      let html = this.getHtmlResult(data.answer);
-      this.builder.saveForUndo();
-
-      // Update HTML
-      this.builder.loadHtml(html);
-
-      //Trigger Change event
-      this.builder.settings.onChange();
-      this.dictation.finish(); // Must be called after finished
-    };
-
-    this.dictation.opts.abort = () => {
-      // console.log('abort');
-
-      controller.abort();
-      this.dictation.finish(); // Must be called after finished
-    };
-  }
-
-  //-------------------
-
-  processPrompt(question) {
-    const activeBox = this.builder.activeBox;
-    let intent = this.builder.similarity.check(question);
-    // console.log(intent);
-
-    if (!intent) return question;
-    if (intent === 'add_bg_color' || intent === 'change_bg_color' || intent === 'suggest_headline') {
-      return question; // Pass to ChatGPT
-    }
-
-    this.builder.saveForUndo();
-    if (intent === 'move_row_up') {
-      this.builder.moveRowUp();
-    } else if (intent === 'move_row_down') {
-      this.builder.moveRowDown();
-    } else if (intent === 'duplicate_row') {
-      this.builder.duplicateRow();
-    } else if (intent === 'remove_row') {
-      this.builder.removeRow();
-    } else if (intent === 'move_col_left') {
-      this.builder.moveColumnLeft();
-    } else if (intent === 'move_col_right') {
-      this.builder.moveColumnRight();
-    } else if (intent === 'duplicate_col') {
-      this.builder.duplicateColumn();
-    } else if (intent === 'remove_col') {
-      this.builder.removeColumn();
-    } else if (intent === 'move_column_up') {
-      this.builder.moveColumnUp();
-    } else if (intent === 'move_column_down') {
-      this.builder.moveColumnDown();
-    } else if (intent === 'add_headline') {
-      this.builder.lib.addBlock(activeBox, 'headline', 'after');
-    } else if (intent === 'add_paragraph') {
-      this.builder.lib.addBlock(activeBox, 'paragraph', 'after');
-    } else if (intent === 'add_image') {
-      this.builder.lib.addBlock(activeBox, 'image', 'after');
-    } else if (intent === 'add_youtube') {
-      this.builder.lib.addBlock(activeBox, 'youtube', 'after');
-    } else if (intent === 'add_video') {
-      this.builder.lib.addBlock(activeBox, 'video', 'after');
-    } else if (intent === 'add_audio') {
-      this.builder.lib.addBlock(activeBox, 'audio', 'after');
-    } else if (intent === 'add_map') {
-      this.builder.lib.addBlock(activeBox, 'map', 'after');
-    } else if (intent === 'add_table') {
-      this.builder.lib.addBlock(activeBox, 'table', 'after');
-    } else if (intent === 'add_social') {
-      this.builder.lib.addBlock(activeBox, 'social', 'after');
-    } else if (intent === 'add_icon') {
-      this.builder.lib.addBlock(activeBox, 'icon', 'after');
-    } else if (intent === 'add_button') {
-      this.builder.lib.addBlock(activeBox, 'button', 'after');
-    } else if (intent === 'add_2buttons') {
-      this.builder.lib.addBlock(activeBox, 'twobuttons', 'after');
-    } else if (intent === 'add_space') {
-      this.builder.lib.addBlock(activeBox, 'space', 'after');
-    } else if (intent === 'increase_font_size') {
-      let elm = this.builder.activeElement;
-      if (elm) {
-        this.builder.lib.increaseFontSize(elm);
-      }
-    } else if (intent === 'decrease_font_size') {
-      let elm = this.builder.activeElement;
-      if (elm) {
-        this.builder.lib.decreaseFontSize(elm);
-      }
-    } else if (intent === 'clear_font_size') {
-      let elm = this.builder.activeElement;
-      if (elm) {
-        this.builder.lib.clearFontSize(elm);
-      }
-    } else if (intent === 'align_left') {
-      let elm = this.builder.activeElement;
-      if (elm) {
-        this.builder.lib.alignText(elm, 'left');
-      } else {
-        this.builder.lib.alignContent(activeBox, 'left');
-      }
-    } else if (intent === 'align_center') {
-      let elm = this.builder.activeElement;
-      if (elm) {
-        this.builder.lib.alignText(elm, 'center');
-      } else {
-        this.builder.lib.alignContent(activeBox, 'center');
-      }
-    } else if (intent === 'align_right') {
-      let elm = this.builder.activeElement;
-      if (elm) {
-        this.builder.lib.alignText(elm, 'right');
-      } else {
-        this.builder.lib.alignContent(activeBox, 'right');
-      }
-    } else if (intent === 'align_full') {
-      let elm = this.builder.activeElement;
-      if (elm) {
-        this.builder.lib.alignText(elm, 'justify');
-      } else {
-        this.builder.lib.alignContent(activeBox, 'justify');
-      }
-    } else if (intent === 'clear_alignment') {
-      let elm = this.builder.activeElement;
-      if (elm) {
-        this.builder.lib.alignText(elm, '');
-      } else {
-        this.builder.lib.alignContent(activeBox, '');
-      }
-    } else if (intent === 'increase_space') {
-      let elm = this.builder.activeElement;
-      if (elm) {
-        this.builder.lib.increaseElementHeight(elm);
-      }
-    } else if (intent === 'decrease_space') {
-      let elm = this.builder.activeElement;
-      if (elm) {
-        this.builder.lib.decreaseElementHeight(elm);
-      }
-    } else if (intent === 'increase_line_height') {
-      let elm = this.builder.activeElement;
-      if (elm) {
-        this.builder.lib.increaseLineHeight(elm);
-      }
-    } else if (intent === 'decrease_line_height') {
-      let elm = this.builder.activeElement;
-      if (elm) {
-        this.builder.lib.decreaseLineHeight(elm);
-      }
-    }
-
-    //Trigger Change event
-    this.builder.settings.onChange();
-    return false;
-  } // /processPrompt()
-
-  //-------------------
-
-  openDictation() {
-    this.dictation.openDictation();
-  }
-  getHtmlResult(html) {
-    if (html.indexOf('```') !== -1) {
-      const regex = /<div[^>]*>[\s\S]*<\/div>/;
-      const matches = html.match(regex);
-      const extractedString = matches && matches[0];
-      html = extractedString;
     }
-    return html;
   }
 }
 
@@ -77827,11 +77771,12 @@ class Similarity {
     for (const [key, value] of Object.entries(commandList)) {
       const similarity = this.calculate(command, value);
       if (similarity > maxSimilarity) {
+        // console.log(key,similarity)
         maxSimilarity = similarity;
         maxKey = key;
       }
     }
-    const similarityThreshold = 0.5;
+    const similarityThreshold = 0.6;
     if (maxSimilarity >= similarityThreshold) {
       return maxKey;
     }
@@ -78466,7 +78411,9 @@ class ContentBuilder {
       enableDragResize: true,
       simpleTextSettings: false,
       enableColumnsPerLine: true,
+      /* Prompt/Command Stuff */
       isContentBox: false,
+      sendCommandUrl: 'http://localhost:8081/answer',
       speechRecognitionLang: 'en-US',
       headlineList: ['We create simple and effective designs.', 'Ultimate Experiences With Story, Emotion, And Purpose.', 'Build Anything Beautifully', 'With Less Stuff and More Compassion', '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.', 'Creative and Inspiring'],
       shortCommandList: {
@@ -78486,17 +78433,38 @@ class ContentBuilder {
         clean: ['clean']
       },
       commandList: {
-        add_bg_color: ['add a background color', 'add background color'],
-        add_bg_image: ['add a background image', 'add background image', 'add a background', 'add background'],
-        change_bg_color: ['change the background color', 'change background color'],
-        change_bg_image: ['change the background image', 'change background image', 'change the background', 'change background'],
-        remove_bg_color: ['remove background color', 'remove the background color', 'clear background color', 'clear the background color'],
-        remove_bg: ['remove background', 'remove background image', 'remove the background', 'remove the background image', 'clear background', 'clear background image', 'clear the background', 'clear the background image'],
+        select: ['select', 'select first'],
+        select_next: ['select next', 'select after'],
+        select_previous: ['select previous', 'select before'],
+        select_last: ['select last'],
+        select_headline: ['select headline'],
+        select_paragraph: ['select paragraph'],
+        select_button: ['select button'],
+        select_space: ['select space'],
+        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'],
+        always_animate: ['always animate'],
+        remove_animation: ['remove animation', 'clear animation', 'remove fade in', 'clear fade in', 'remove slide up', 'clear slide up', 'remove zoom in', 'clear zoom in', 'remove zoom out', 'clear zoom out'],
+        add_bg_color: ['add background color'],
+        add_bg_image: ['add background image', 'add background'],
+        change_bg_color: ['change background color'],
+        change_bg_image: ['change background image', 'change background'],
+        remove_bg_color: ['remove background color', 'clear background color'],
+        remove_bg: ['remove background', 'remove background image', 'clear background', 'clear background image'],
         increase_content_width: ['increase content width', 'enlarge content width'],
         decrease_content_width: ['decrease content width', 'reduce content width'],
         clear_content_width: ['clear content width', 'remove content width', 'make content full', 'full width content'],
-        make_content_light: ['make the content white', 'make the content light', 'make the text white', 'make the text light', 'make content white', 'make content light', 'make text white', 'make text light', 'change the content white', 'change the content light', 'change the text white', 'change the text light', 'change to white content', 'change to light content', 'change to white text', 'change to light text'],
-        make_content_dark: ['make the content black', 'make the content dark', 'make the text black', 'make the text dark', 'make content black', 'make content dark', 'make text black', 'make text dark', 'change the content black', 'change the content dark', 'change the text black', 'change the text dark', 'change to black content', 'change to dark content', 'change to black text', 'change to dark text'],
+        make_content_light: ['make content white', 'make content light', 'make text white', 'make text light', 'change content white', 'change content light', 'change text white', 'change text light', 'change to white content', 'change to light content', 'change to white text', 'change to light text'],
+        make_content_dark: ['make content black', 'make content dark', 'make text black', 'make text dark', 'change content black', 'change content dark', 'change text black', 'change text dark', 'change to black content', 'change to dark content', 'change to black text', 'change to dark text'],
         make_section_height_10: ['make section height 10'],
         make_section_height_15: ['make section height 15'],
         make_section_height_20: ['make section height 20'],
@@ -78512,46 +78480,56 @@ class ContentBuilder {
         make_section_height_90: ['make section height 90'],
         make_section_height_100: ['make section height 100'],
         make_section_height_auto: ['make section height auto'],
-        suggest_headline: ['suggest a headline', 'suggest headline', 'suggest a header', 'suggest header', 'suggest a title', 'suggest title', 'write a headline', 'write headline', 'write a header', 'write header', 'write a title', 'write title'],
-        add_headline: ['add a headline', 'add headline', 'add a header', 'add header', 'add a title', 'add title'],
-        add_paragraph: ['add a paragraph', 'add paragraph'],
-        add_image: ['add an image', 'add image'],
-        add_youtube: ['add a youtube', 'add youtube'],
-        add_video: ['add a video', 'add video', 'add an HTML5 video', 'add HTML5 video', 'add an mp4 video', 'add mp4 video'],
-        add_audio: ['add an audio', 'add audio', 'add a music', 'add music', 'add an mp3', 'add mp3'],
-        add_map: ['add a map', 'add map', 'add a google map', 'add google map'],
-        add_table: ['add a table', 'add table'],
-        add_social: ['add a social', 'add social'],
-        add_icon: ['add an icon', 'add icon'],
-        add_button: ['add a button', 'add button'],
-        add_2buttons: ['add 2 button', 'add 2 button', 'add 2 buttons', 'add 2 buttons'],
-        add_space: ['add a space', 'add space'],
+        suggest_headline: ['suggest headline', 'suggest header', 'suggest title', 'write headline', 'write header', 'write title'],
+        suggest_tagline: ['suggest tagline', 'write tagline'],
+        add_headline: ['add headline', 'add header', 'add title'],
+        add_paragraph: ['add paragraph'],
+        add_image: ['add image'],
+        add_youtube: ['add youtube'],
+        add_video: ['add video'],
+        remove_video: ['remove video', 'clear video'],
+        add_bg_video: ['add background video'],
+        remove_bg_video: ['remove background video', 'clear background video'],
+        add_slider: ['add slider'],
+        remove_slider: ['remove slider', 'clear slider'],
+        add_bg_slider: ['add background slider'],
+        remove_bg_slider: ['remove background slider', 'clear background slider'],
+        add_audio: ['add audio', 'add music', 'add mp3'],
+        add_map: ['add map', 'add google map'],
+        add_table: ['add table'],
+        add_social: ['add social'],
+        add_icon: ['add icon'],
+        add_button: ['add button'],
+        add_2buttons: ['add 2 button', 'add 2 buttons'],
+        add_space: ['add space'],
         position_before: ['above', 'before'],
-        increase_line_height: ['increase line height', 'increase line spacing', 'increase text spacing', 'increase the line height', 'increase the line spacing', 'increase the text spacing', 'enlarge line height', 'enlarge line spacing', 'enlarge text spacing', 'enlarge the line height', 'enlarge the line spacing', 'enlarge the text spacing', 'bigger line height', 'bigger line spacing', 'bigger text spacing', 'bigger the line height', 'bigger the line spacing', 'bigger the text spacing', 'make line height bigger', 'make line spacing bigger', 'make text spacing bigger', 'make the line height bigger', 'make the line spacing bigger', 'make the text spacing bigger'],
-        increase_default_line_height: ['increase default line height', 'increase default line spacing', 'increase default text spacing', 'increase the default line height', 'increase the default line spacing', 'increase the default text spacing', 'enlarge default line height', 'enlarge default line spacing', 'enlarge default text spacing', 'enlarge the default line height', 'enlarge the default line spacing', 'enlarge the default text spacing', 'bigger default line height', 'bigger default line spacing', 'bigger default text spacing', 'bigger the default line height', 'bigger the default line spacing', 'bigger the default text spacing', 'make default line height bigger', 'make default line spacing bigger', 'make default text spacing bigger', 'make the default line height bigger', 'make the default line spacing bigger', 'make the default text spacing bigger'],
-        decrease_line_height: ['decrease line height', 'decrease line spacing', 'decrease text spacing', 'decrease the line height', 'decrease the line spacing', 'decrease the text spacing', 'reduce line height', 'reduce line spacing', 'reduce text spacing', 'reduce the line height', 'reduce the line spacing', 'reduce the text spacing', 'smaller line height', 'smaller line spacing', 'smaller text spacing', 'smaller the line height', 'smaller the line spacing', 'smaller the text spacing', 'make line height smaller', 'make line spacing smaller', 'make text spacing smaller', 'make the line height smaller', 'make the line spacing smaller', 'make the text spacing smaller'],
-        decrease_default_line_height: ['decrease default line height', 'decrease default line spacing', 'decrease default text spacing', 'decrease the default line height', 'decrease the default line spacing', 'decrease the default text spacing', 'reduce default line height', 'reduce default line spacing', 'reduce default text spacing', 'reduce the default line height', 'reduce the default line spacing', 'reduce the default text spacing', 'smaller default line height', 'smaller default line spacing', 'smaller default text spacing', 'smaller the default line height', 'smaller the default line spacing', 'smaller the default text spacing', 'make default line height smaller', 'make default line spacing smaller', 'make default text spacing smaller', 'make the default line height smaller', 'make the default line spacing smaller', 'make the default text spacing smaller'],
-        increase_font_size: ['increase font', 'increase size', 'increase font size', 'increase the font', 'increase the size', 'increase the font size', 'increase text', 'increase size', 'increase text size', 'increase the text', 'increase the text size', 'enlarge font', 'enlarge size', 'enlarge font size', 'enlarge the font', 'enlarge the size', 'enlarge the font size', 'enlarge text', 'enlarge size', 'enlarge text size', 'enlarge the text', 'enlarge the text size', 'text bigger', 'font bigger', 'size bigger'],
-        decrease_font_size: ['decrease font', 'decrease size', 'decrease font size', 'decrease the font', 'decrease the size', 'decrease the font size', 'decrease text', 'decrease size', 'decrease text size', 'decrease the text', 'decrease the text size', 'reduce font', 'reduce size', 'reduce font size', 'reduce the font', 'reduce the size', 'reduce the font size', 'reduce text', 'reduce size', 'reduce text size', 'reduce the text', 'reduce the text size', 'text smaller', 'font smaller', 'size smaller'],
-        increase_default_font_size: ['increase default font', 'increase default size', 'increase default font size', 'increase the default font', 'increase the default size', 'increase the default font size', 'increase default text', 'increase default size', 'increase default text size', 'increase the default text', 'increase the default text size', 'enlarge default font', 'enlarge default size', 'enlarge default font size', 'enlarge the default font', 'enlarge the default size', 'enlarge the default font size', 'enlarge default text', 'enlarge default text size', 'enlarge the default text', 'enlarge the default text size', 'default text bigger', 'default font bigger', 'default size bigger', 'increase default content', 'increase default content size', 'increase the default content', 'increase the default content size', 'enlarge default content', 'enlarge default content size', 'enlarge the default content', 'enlarge the default content size'],
-        decrease_default_font_size: ['decrease default font', 'decrease default size', 'decrease default font size', 'decrease the default font', 'decrease the default size', 'decrease the default font size', 'decrease default text', 'decrease default size', 'decrease default text size', 'decrease the default text', 'decrease the default text size', 'reduce default font', 'reduce default size', 'reduce default font size', 'reduce the default font', 'reduce the default size', 'reduce the default font size', 'reduce default text', 'reduce default text size', 'reduce the default text', 'reduce the default text size', 'default text smaller', 'default font smaller', 'default size smaller', 'decrease default content', 'decrease default content size', 'decrease the default content', 'decrease the default content size', 'reduce default content', 'reduce default content size', 'reduce the default content', 'reduce the default content size'],
-        clear_font_size: ['clear font size', 'remove font size', 'clear text size', 'remove text size', 'use default font size', 'ude the default font size'],
-        align_left: ['align left', 'align the text left', 'align text left', 'left aligned'],
-        align_center: ['align center', 'align the text center', 'align text center', 'center aligned'],
-        align_right: ['align right', 'align the text right', 'align text right', 'right aligned'],
-        align_full: ['align full', 'align justify', 'justify', 'justify text', 'justify the text', 'justify full'],
-        clear_alignment: ['clear alignment', 'remove alignment', 'clear the text alignment', 'remove the text alignment', 'clear text alignment', 'remove text alignment'],
-        make_content_centered: ['make the content center', 'make the content centered'],
-        move_content_left: ['move content left', 'move content to left', 'move the content left', 'move content to the left', 'move content to the left', 'place content on the left', 'move the content to the left', 'move the content to the left', 'place the content on the left'],
-        move_content_center: ['move content center', 'move content to center', 'move the content center', 'move content to the center', 'move content to the center', 'place content on the center', 'move the content to the center', 'move the content to the center', 'place the content on the center'],
-        move_content_right: ['move content right', 'move content to right', 'move the content right', 'move content to the right', 'move content to the right', 'place content on the right', 'move the content to the right', 'move the content to the right', 'place the content on the right'],
-        move_content_top: ['move content top', 'move content to top', 'move the content top', 'move content to the top', 'move content to the top', 'place content on the top', 'move the content to the top', 'move the content to the top', 'place the content on the top'],
-        move_content_middle: ['move content middle', 'move content to middle', 'move the content middle', 'move content to the middle', 'move content to the middle', 'place content on the middle', 'move the content to the middle', 'move the content to the middle', 'place the content on the middle'],
-        move_content_bottom: ['move content bottom', 'move content to bottom', 'move the content bottom', 'move content to the bottom', 'move content to the bottom', 'place content on the bottom', 'move the content to the bottom', 'move the content to the bottom', 'place the content on the bottom'],
-        increase_space: ['more space', 'increase space', 'increase the space', 'enlarge the space'],
-        decrease_space: ['less space', 'decrease space', 'decrease the space', 'reduce the space'],
-        move_row_up: ['move up', 'move row up'],
-        move_row_down: ['move down', 'move row down'],
+        increase_line_height: ['increase line height', 'increase line spacing', 'increase text spacing', 'enlarge line height', 'enlarge line spacing', 'enlarge text spacing', 'bigger line height', 'bigger line spacing', 'bigger text spacing', 'make line height bigger', 'make line spacing bigger', 'make text spacing bigger'],
+        increase_default_line_height: ['increase default line height', 'increase default line spacing', 'increase default text spacing', 'enlarge default line height', 'enlarge default line spacing', 'enlarge default text spacing', 'bigger default line height', 'bigger default line spacing', 'bigger default text spacing', 'make default line height bigger', 'make default line spacing bigger', 'make default text spacing bigger'],
+        decrease_line_height: ['decrease line height', 'decrease line spacing', 'decrease text spacing', 'reduce line height', 'reduce line spacing', 'reduce text spacing', 'smaller line height', 'smaller line spacing', 'smaller text spacing', 'make line height smaller', 'make line spacing smaller', 'make text spacing smaller'],
+        decrease_default_line_height: ['decrease default line height', 'decrease default line spacing', 'decrease default text spacing', 'reduce default line height', 'reduce default line spacing', 'reduce default text spacing', 'smaller default line height', 'smaller default line spacing', 'smaller default text spacing', 'make default line height smaller', 'make default line spacing smaller', 'make default text spacing smaller'],
+        increase_font_size: ['increase font', 'increase size', 'increase font size', 'increase text', 'increase size', 'increase text size', 'enlarge font', 'enlarge size', 'enlarge font size', 'enlarge text', 'enlarge size', 'enlarge text size', 'text bigger', 'font bigger', 'size bigger'],
+        decrease_font_size: ['decrease font', 'decrease size', 'decrease font size', 'decrease text', 'decrease size', 'decrease text size', 'reduce font', 'reduce size', 'reduce font size', 'reduce text', 'reduce size', 'reduce text size', 'text smaller', 'font smaller', 'size smaller'],
+        increase_default_font_size: ['increase default font', 'increase default size', 'increase default font size', 'increase default text', 'increase default size', 'increase default text size', 'enlarge default font', 'enlarge default size', 'enlarge default font size', 'enlarge default text', 'enlarge default text size', 'default text bigger', 'default font bigger', 'default size bigger', 'increase default content', 'increase default content size', 'enlarge default content', 'enlarge default content size'],
+        decrease_default_font_size: ['decrease default font', 'decrease default size', 'decrease default font size', 'decrease default text', 'decrease default size', 'decrease default text size', 'reduce default font', 'reduce default size', 'reduce default font size', 'reduce default text', 'reduce default text size', 'default text smaller', 'default font smaller', 'default size smaller', 'decrease default content', 'decrease default content size', 'reduce default content', 'reduce default content size'],
+        clear_font_size: ['clear font size', 'remove font size', 'clear text size', 'remove text size', 'use default font size'],
+        align_left: ['align left', 'align text left', 'left aligned'],
+        align_center: ['align center', 'align text center', 'center aligned'],
+        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_centered: ['make content center'],
+        move_content_left: ['move content left', 'place content left'],
+        move_content_center: ['move content center', 'place content center'],
+        move_content_right: ['move content right', 'place content right'],
+        move_content_top: ['move content top', 'place content top'],
+        move_content_middle: ['move content middle', 'place content middle'],
+        move_content_bottom: ['move content bottom', 'place content bottom'],
+        increase_space: ['more space', 'increase space', 'enlarge space'],
+        decrease_space: ['less space', 'decrease space', 'reduce space'],
+        move_up: ['move up'],
+        move_down: ['move down'],
+        move_row_up: ['move row up'],
+        move_row_down: ['move row down'],
         duplicate_row: ['duplicate row', 'copy row'],
         remove_row: ['remove row', 'delete row'],
         move_col_left: ['move left', 'move column left'],
@@ -78559,7 +78537,67 @@ class ContentBuilder {
         duplicate_col: ['duplicate column', 'copy column'],
         remove_col: ['remove column', 'delete column'],
         move_column_up: ['move column up'],
-        move_column_down: ['move column down']
+        move_column_down: ['move column down'],
+        move_section_up: ['move section up'],
+        move_section_down: ['move section down'],
+        move_section_top: ['move section top'],
+        move_section_bottom: ['move section bottom'],
+        duplicate_section: ['duplicate section', 'copy section'],
+        remove_section: ['remove section', 'delete section'],
+        remove_content: ['remove content', 'remove all text', 'remove all content', 'delete content', 'delete all text', 'delete all content', 'clear content', 'clear all text', 'clear all content'],
+        add_content: ['add content', 'add text']
+      },
+      commandInfo: {
+        general: {
+          title: 'General',
+          list: ['Let\'s redesign the layout to enhance its visual appeal and user experience.', 'Rewrite all the text to improve the overall copywriting quality.', 'Can you come up with another rendition of the content or offer an alternative wording?', 'Can you suggest a captivating headline for us?', 'Undo', 'Redo']
+          // width: '400px'
+        },
+
+        selection: {
+          title: 'Selection',
+          list: ['Select the headline',
+          // 'Select the paragraph',
+          // 'Select the button',
+          // 'Select the space',
+          // 'Select the image',
+          'Select the next block',
+          // 'Select the previous block',
+          // 'Select the first block',
+          // 'Select the last block',
+          'Move up', 'Move down', 'Duplicate row', 'Remove row', 'Move column left', 'Move column right', 'Duplicate column', 'Remove column'
+          // 'Move column up',
+          // 'Move column down',
+          ]
+        },
+
+        element: {
+          title: 'Element',
+          list: ['Add a paragraph', 'Add an image', 'Add a youtube',
+          // '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']
+        },
+        text: {
+          title: 'Text Formatting',
+          list: [
+          // 'Increase', 'Bigger','Larger','Enlarge', 
+          // 'Decrease', 'Smaller',
+          'Increase font size',
+          // 'Decrease font size',
+          'Clear font size',
+          // 'Align left',
+          'Align center', 'Align right', 'Align justify', 'Clear alignment', 'Bold', 'Italic', 'Underline', 'Strikethrough',
+          // 'Superscript',
+          // 'Subscript',
+          'Uppercase',
+          // 'Lowercase',
+          // 'Capitalize',
+          'Clean']
+        }
       }
     };
 
@@ -78847,12 +78885,20 @@ class ContentBuilder {
     this.ShortcutInfo = new ShortcutInfo(this);
 
     // Prompt Stuff
+    if (!this.opts.isContentBox) {
+      if (localStorage.getItem('_dictation') !== null) {
+        localStorage.removeItem('_dictation');
+      }
+    }
     this.dictation = new Dictation({}, this); // Dictation Panel 
     this.lib = new Lib(this); // Libraries of common editing functions
     this.similarity = new Similarity(this);
-    if (!this.opts.isContentBox) {
-      this.command = new Command(this);
+    /*
+    if(!this.opts.isContentBox) {
+        this.command = new Command(this);
     }
+    */
+
     if (this.iframe) {
       this.win.addEventListener('scroll', this.doWindowScroll = () => {
         this.util.hidePops();