@innovastudio/contentbuilder 1.2.0 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbuilder",
-  "version": "1.2.0",
+  "version": "1.2.3",
   "type": "module",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",

package/public/contentbuilder/contentbuilder.esm.js

@@ -4068,6 +4068,10 @@ class Util {
     return document.querySelector('.cell-active');
   }
 
+  rowSelected() {
+    return document.querySelector('.row-active');
+  }
+
   builderStuff() {
     return document.querySelector('#_cbhtml');
   }
@@ -13961,8 +13965,16 @@ class HtmlUtil {
     }
 
     if (mode === 'row') {
-      const cell = util.cellSelected();
-      const row = cell.parentNode;
+      let row;
+      let cell = util.cellSelected();
+
+      if (cell) {
+        row = cell.parentNode;
+      } else {
+        row = util.rowSelected();
+      }
+
+      if (!row) return;
       row.innerHTML = html;
       let builderActive = document.querySelector('.builder-active');
       if (builderActive) this.builder.applyBehaviorOn(builderActive); //Trigger Change event
@@ -13995,18 +14007,93 @@ class HtmlUtil {
   }
 
   viewHtmlExternal() {
-    const source = document.querySelector('textarea[data-source-active]');
     const util = this.builder.util;
     const builderStuff = this.builder.builderStuff;
     const viewhtmlexternal = builderStuff.querySelector('.viewhtmlexternal');
+    util.showModal(viewhtmlexternal, true, null, false);
+    let codeEditor = viewhtmlexternal.querySelector('.input-code-editor');
+    codeEditor.style.opacity = 0.01;
+
+    this._viewHtmlExternal();
+  }
+
+  _viewHtmlExternal() {
+    const source = document.querySelector('textarea[data-source-active]');
+    const builderStuff = this.builder.builderStuff;
+    const viewhtmlexternal = builderStuff.querySelector('.viewhtmlexternal');
     let codeEditor = viewhtmlexternal.querySelector('.input-code-editor');
 
-    if (codeEditor.innerHTML === '') {
+    if (!codeEditor.querySelector('.monaco-editor')) {
       // First time code editor load
-      try {
+      loader.init().then(monaco => {
+        this.builder.monaco = monaco;
+        if (!codeEditor.getAttribute('data-mode-id')) this.builder.codeEditorExternal = monaco.editor.create(codeEditor, {
+          value: '',
+          minimap: {
+            enabled: false
+          },
+          automaticLayout: true,
+          contextmenu: false,
+          fontSize: 13,
+          scrollbar: {
+            useShadows: false,
+            vertical: 'visible',
+            horizontal: 'visible',
+            horizontalScrollbarSize: 12,
+            verticalScrollbarSize: 12
+          },
+          language: 'html',
+          theme: this.builder.styleDark || this.builder.styleColoredDark ? 'vs-dark' : ''
+        });
+        this.builder.codeEditorExternal.onKeyUp(() => {
+          const source = document.querySelector('textarea[data-source-active]');
+          source.value = this.builder.codeEditorExternal.getModel().getValue();
+        });
+      });
+      setTimeout(() => {
+        this._viewHtmlExternal();
+      }, 100);
+      return;
+    } // code editor
+
+
+    const model = this.builder.monaco.editor.createModel(source.value, 'html');
+    this.builder.codeEditorExternal.setModel(model);
+    codeEditor.style.opacity = '';
+  }
+
+  view(mode, area) {
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
+    let viewhtml;
+
+    if (this.builder.opts.htmlSyntaxHighlighting) {
+      viewhtml = builderStuff.querySelector('.viewhtmlmonaco');
+    } else {
+      viewhtml = builderStuff.querySelector('.viewhtml');
+    }
+
+    util.showModal(viewhtml, true);
+    let codeEditor = viewhtml.querySelector('.input-code-editor');
+    codeEditor.style.opacity = 0.01;
+
+    this._view(mode, area);
+  }
+
+  _view(mode, area) {
+    const util = this.builder.util;
+    const builderStuff = this.builder.builderStuff;
+    let viewhtml;
+
+    if (this.builder.opts.htmlSyntaxHighlighting) {
+      viewhtml = builderStuff.querySelector('.viewhtmlmonaco');
+      let codeEditor = viewhtml.querySelector('.input-code-editor');
+
+      if (!codeEditor.querySelector('.monaco-editor')) {
+        // First time code editor load
         loader.init().then(monaco => {
           this.builder.monaco = monaco;
-          this.builder.codeEditorExternal = monaco.editor.create(codeEditor, {
+          if (!codeEditor.getAttribute('data-mode-id')) this.builder.codeEditor = monaco.editor.create(codeEditor, {
             value: '',
             minimap: {
               enabled: false
@@ -14024,74 +14111,21 @@ class HtmlUtil {
             language: 'html',
             theme: this.builder.styleDark || this.builder.styleColoredDark ? 'vs-dark' : ''
           });
-          this.builder.codeEditorExternal.onKeyUp(() => {
-            source.value = this.builder.codeEditorExternal.getModel().getValue();
+          let textarea = viewhtml.querySelector('textarea');
+          this.builder.codeEditor.onKeyUp(() => {
+            textarea.value = this.builder.codeEditor.getModel().getValue();
           });
         });
         setTimeout(() => {
-          this.viewHtmlExternal();
+          this._view(mode, area);
         }, 100);
         return;
-      } catch (e) {// Do Nothing
-      }
-    }
-
-    util.showModal(viewhtmlexternal, true, null, false); // code editor
-
-    const model = this.builder.monaco.editor.createModel(source.value, 'html');
-    this.builder.codeEditorExternal.setModel(model);
-  }
-
-  view(mode, area) {
-    const util = this.builder.util;
-    const builderStuff = this.builder.builderStuff;
-    let viewhtml;
-
-    if (this.builder.opts.htmlSyntaxHighlighting) {
-      viewhtml = builderStuff.querySelector('.viewhtmlmonaco');
-      let codeEditor = viewhtml.querySelector('.input-code-editor');
-
-      if (codeEditor.innerHTML === '') {
-        // First time code editor load
-        try {
-          loader.init().then(monaco => {
-            this.builder.monaco = monaco;
-            this.builder.codeEditor = monaco.editor.create(codeEditor, {
-              value: '',
-              minimap: {
-                enabled: false
-              },
-              automaticLayout: true,
-              contextmenu: false,
-              fontSize: 13,
-              scrollbar: {
-                useShadows: false,
-                vertical: 'visible',
-                horizontal: 'visible',
-                horizontalScrollbarSize: 12,
-                verticalScrollbarSize: 12
-              },
-              language: 'html',
-              theme: this.builder.styleDark || this.builder.styleColoredDark ? 'vs-dark' : ''
-            });
-            let textarea = viewhtml.querySelector('textarea');
-            this.builder.codeEditor.onKeyUp(() => {
-              textarea.value = this.builder.codeEditor.getModel().getValue();
-            });
-          });
-          setTimeout(() => {
-            this.view(mode, area);
-          }, 100);
-          return;
-        } catch (e) {// Do Nothing
-        }
       }
     } else {
       viewhtml = builderStuff.querySelector('.viewhtml');
     }
 
-    let textarea = viewhtml.querySelector('textarea');
-    util.showModal(viewhtml, true);
+    let textarea = viewhtml.querySelector('textarea'); // util.showModal(viewhtml, true);
 
     if (mode === 'cell') {
       // old: 3550
@@ -14106,9 +14140,19 @@ class HtmlUtil {
 
     if (mode === 'row') {
       // old: 15534
-      const cell = util.cellSelected();
-      if (!cell) return;
-      const row = cell.parentNode;
+      // const cell = util.cellSelected();
+      // if(!cell) return;
+      // const row = cell.parentNode;
+      let row;
+      let cell = util.cellSelected();
+
+      if (cell) {
+        row = cell.parentNode;
+      } else {
+        row = util.rowSelected();
+      }
+
+      if (!row) return;
       let textarea = viewhtml.querySelector('textarea');
       this.builder.cleanHtmlFormatting = true;
       textarea.value = this.readHtml(row, true); // for view=true
@@ -14171,6 +14215,8 @@ class HtmlUtil {
     rowMore.style.display = '';
     this.builder.codeEditorMode = mode;
     this.builder.codeEditorArea = area;
+    let codeEditor = viewhtml.querySelector('.input-code-editor');
+    codeEditor.style.opacity = '';
   }
 
   fromViewToActual(html) {
@@ -16924,18 +16970,38 @@ class Grid {
   removeRow() {
     // let builder = this.builder;
     // let columnTool = this.columnTool;
-    let util = this.util;
-    const cell = util.cellSelected();
-    if (!cell) return;
-    const row = cell.parentNode; //Change to row selection
+    let util = this.util; // const cell = util.cellSelected();
+    // if(!cell) return;
+    // const row = cell.parentNode;
+
+    let row;
+    let cell = util.cellSelected();
+
+    if (cell) {
+      row = cell.parentNode;
+    } else {
+      row = util.rowSelected();
+    }
+
+    if (!row) return; //Change to row selection
 
     dom$E.removeClass(row, 'row-outline');
     this.columnTool.hide(); //Hide Column tool
 
     util.confirm(util.out('Are you sure you want to delete this block?'), ok => {
-      const cell = util.cellSelected();
-      if (!cell) return;
-      const row = cell.parentNode;
+      // const cell = util.cellSelected();
+      // if(!cell) return;
+      // const row = cell.parentNode; 
+      let row;
+      let cell = util.cellSelected();
+
+      if (cell) {
+        row = cell.parentNode;
+      } else {
+        row = util.rowSelected();
+      }
+
+      if (!row) return;
 
       if (ok) {
         this.builder.uo.saveForUndo();
@@ -16949,10 +17015,20 @@ class Grid {
   moveRowUp() {
     // let builder = this.builder;
     let columnTool = this.columnTool;
-    let util = this.util;
-    const cell = util.cellSelected();
-    if (!cell) return;
-    let row = cell.parentNode; //Change to row selection
+    let util = this.util; // const cell = util.cellSelected();
+    // if(!cell) return;
+    // let row = cell.parentNode;
+
+    let row;
+    let cell = util.cellSelected();
+
+    if (cell) {
+      row = cell.parentNode;
+    } else {
+      row = util.rowSelected();
+    }
+
+    if (!row) return; //Change to row selection
 
     dom$E.removeClass(row, 'row-outline');
     columnTool.hide(); //Hide Column tool
@@ -16986,10 +17062,20 @@ class Grid {
   moveRowDown() {
     // let builder = this.builder;
     let columnTool = this.columnTool;
-    let util = this.util;
-    const cell = util.cellSelected();
-    if (!cell) return;
-    let row = cell.parentNode; //Change to row selection
+    let util = this.util; // const cell = util.cellSelected();
+    // if(!cell) return;
+    // let row = cell.parentNode;
+
+    let row;
+    let cell = util.cellSelected();
+
+    if (cell) {
+      row = cell.parentNode;
+    } else {
+      row = util.rowSelected();
+    }
+
+    if (!row) return; //Change to row selection
 
     dom$E.removeClass(row, 'row-outline');
     columnTool.hide(); //Hide Column tool
@@ -17023,10 +17109,20 @@ class Grid {
   duplicateRow() {
     let builder = this.builder;
     let columnTool = this.columnTool;
-    let util = this.util;
-    const cell = util.cellSelected();
-    if (!cell) return;
-    let row = cell.parentNode; //Change to row selection
+    let util = this.util; // const cell = util.cellSelected();
+    // if(!cell) return;
+    // let row = cell.parentNode;
+
+    let row;
+    let cell = util.cellSelected();
+
+    if (cell) {
+      row = cell.parentNode;
+    } else {
+      row = util.rowSelected();
+    }
+
+    if (!row) return; //Change to row selection
 
     dom$E.removeClass(row, 'row-outline');
     columnTool.hide(); //Hide Column tool
@@ -51362,8 +51458,18 @@ class RowTool {
       });
       elm = rowMore.querySelector('.row-html');
       if (elm) dom$o.addEventListener(elm, 'click', () => {
-        const cell = util.cellSelected();
-        if (!cell) return;
+        // const cell = util.cellSelected();
+        // if(!cell) return;
+        let row;
+        let cell = util.cellSelected();
+
+        if (cell) {
+          row = cell.parentNode;
+        } else {
+          row = util.rowSelected();
+        }
+
+        if (!row) return;
         htmlutil.view('row');
       });
     }
@@ -51452,9 +51558,16 @@ class RowTool {
       });
       elm = rowtool.querySelector('.row-more');
       if (elm) dom$o.addEventListener(elm, 'click', () => {
+        let row;
         let cell = util.cellSelected();
-        if (!cell) return;
-        let row = cell.parentNode; //Change to row selection
+
+        if (cell) {
+          row = cell.parentNode;
+        } else {
+          row = util.rowSelected();
+        }
+
+        if (!row) return; //Change to row selection
 
         dom$o.removeClass(row, 'row-outline'); //Hide Column tool
 
@@ -51487,7 +51600,7 @@ class RowTool {
         let btnRowHtml = rowMore.querySelector('.row-html');
         let btnRowDuplicate = rowMore.querySelector('.row-duplicate');
 
-        if (cell.getAttribute('data-html')) {
+        if (row.querySelector('[data-html]')) {
           if (btnRowHtml) btnRowHtml.style.display = 'none';
           if (btnRowDuplicate) btnRowDuplicate.style.display = 'none';
         } else {