Update grapesjs v0.14.5

demo-mjml.html

@@ -5,13 +5,13 @@
     <title>GrapesJS Demo - Free Open Source MJML Newsletter Builder</title>
     <meta name="description" content="GrapesJS MJML Newsletter Builder - Best Free Open Source Responsive MJML Newsletter Editor">
     <meta name="keywords" content="newsletter builder, web template editor, html builder, html editor">
-    <link rel="stylesheet" href="./stylesheets/grapes.min.css?v0.13.8">
+    <link rel="stylesheet" href="./stylesheets/grapes.min.css?v0.14.5">
     <link rel="stylesheet" href="./stylesheets/tooltip.css">
     <link rel="stylesheet" href="./stylesheets/toastr.min.css">
     <link rel="stylesheet" href="./stylesheets/grapesjs-mjml.css">
     <link rel="stylesheet" href="stylesheets/demos.css">
 
-    <script src="js/grapes.min.js?v0.13.8"></script>
+    <script src="js/grapes.min.js?v0.14.5"></script>
     <script src="./js/toastr.min.js"></script>
     <script src="./js/ajaxable.min.js"></script>
     <script src="//feather.aviary.com/imaging/v3/editor.js"></script>
@@ -259,7 +259,7 @@
         // Show logo with the version
         var logoCont = document.querySelector('.gjs-logo-cont');
         document.querySelector('.gjs-logo-version').innerHTML = 'v' + grapesjs.version;
-        var logoPanel = document.querySelector('#gjs-pn-commands');
+        var logoPanel = document.querySelector('.gjs-pn-commands');
         logoPanel.appendChild(logoCont);
 
         // Move Ad

demo-newsletter-editor.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <title>GrapesJS Demo - Free Open Source Newsletter Editor</title>
     <meta content="Best Free Open Source Responsive Newsletter Builder" name="description">
-    <link rel="stylesheet" href="stylesheets/grapes.min.css?v0.13.8">
+    <link rel="stylesheet" href="stylesheets/grapes.min.css?v0.14.5">
     <link rel="stylesheet" href="stylesheets/material.css">
     <link rel="stylesheet" href="stylesheets/tooltip.css">
     <link rel="stylesheet" href="stylesheets/toastr.min.css">
@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="stylesheets/demos.css">
 
     <script src="//feather.aviary.com/imaging/v3/editor.js"></script>
-    <script src="js/grapes.min.js?v0.13.8"></script>
+    <script src="js/grapes.min.js?v0.14.5"></script>
     <script src="./js/ckeditor/ckeditor.js"></script>
     <script src="./js/grapesjs-plugin-ckeditor.min.js"></script>
     <script src="./js/grapesjs-preset-newsletter.min.js?v=0.2.15"></script>
@@ -736,7 +736,7 @@
         // Show logo with the version
         var logoCont = document.querySelector('.gjs-logo-cont');
         document.querySelector('.gjs-logo-version').innerHTML = 'v' + grapesjs.version;
-        var logoPanel = document.querySelector('#gjs-pn-commands');
+        var logoPanel = document.querySelector('.gjs-pn-commands');
         logoPanel.appendChild(logoCont);
 
         // Move Ad

demo.html

@@ -5,7 +5,7 @@
     <title>GrapesJS Demo - Free Open Source Website Page Builder</title>
     <meta content="Best Free Open Source Responsive Websites Builder" name="description">
     <link rel="stylesheet" href="stylesheets/toastr.min.css">
-    <link rel="stylesheet" href="stylesheets/grapes.min.css?v0.13.8">
+    <link rel="stylesheet" href="stylesheets/grapes.min.css?v0.14.5">
     <link rel="stylesheet" href="stylesheets/grapesjs-preset-webpage.min.css">
     <link rel="stylesheet" href="stylesheets/tooltip.css">
     <link rel="stylesheet" href="stylesheets/grapesjs-plugin-filestack.css">
@@ -15,7 +15,7 @@
     <script src="//feather.aviary.com/imaging/v3/editor.js"></script>
     <script src="js/toastr.min.js"></script>
 
-    <script src="js/grapes.min.js?v0.13.8"></script>
+    <script src="js/grapes.min.js?v0.14.5"></script>
     <script src="js/grapesjs-preset-webpage.min.js"></script>
     <script src="js/grapesjs-lory-slider.min.js?0.1.5"></script>
     <script src="js/grapesjs-tabs.min.js?0.1.1"></script>
@@ -88,12 +88,12 @@
            background: rgba(51, 51, 51, 0.9);
          }
 
-         #gjs-pn-commands {
+         .gjs-pn-commands {
            min-height: 40px;
          }
 
          #gjs-sm-float,
-         #gjs-pn-views .fa-cog {
+         .gjs-pn-views .fa-cog {
             display: none;
          }
 
@@ -106,7 +106,7 @@
            background-color: #756467;
          }
 
-        .gjs-pn-panel#gjs-pn-views {
+        .gjs-pn-panel.gjs-pn-views {
           padding: 0;
           border-bottom: none;
         }
@@ -115,7 +115,7 @@
           box-shadow: none;
         }
 
-        #gjs-pn-views .gjs-pn-btn {
+        .gjs-pn-views .gjs-pn-btn {
             margin: 0;
             height: 40px;
             padding: 10px;
@@ -996,6 +996,7 @@
             },
             filestackOpts: { key: 'AYmqZc2e8RLGLE7TGkX3Hz' },
             aviaryOpts: { key: '1' },
+            blocksBasicOpts: { flexGrid: 1 },
             customStyleManager: [{
               name: 'General',
               buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'],
@@ -1015,8 +1016,15 @@
             },{
                 name: 'Dimension',
                 open: false,
-                buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
+                buildProps: ['width', 'flex-width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
-                properties:[{
+                properties: [{
+                  id: 'flex-width',
+                  type: 'integer',
+                  name: 'Width',
+                  units: ['px', '%'],
+                  property: 'flex-basis',
+                  toRequire: 1,
+                },{
                   property: 'margin',
                   properties:[
                     { name: 'Top', property: 'margin-top'},
@@ -1379,7 +1387,7 @@
         // Show logo with the version
         var logoCont = document.querySelector('.gjs-logo-cont');
         document.querySelector('.gjs-logo-version').innerHTML = 'v' + grapesjs.version;
-        var logoPanel = document.querySelector('#gjs-pn-commands');
+        var logoPanel = document.querySelector('.gjs-pn-commands');
         logoPanel.appendChild(logoCont);
 
 
@@ -1395,7 +1403,7 @@
           '<div class="gjs-sm-properties" style="display: none;"></div></div>');
         var traitsProps = traitsSector.find('.gjs-sm-properties');
         traitsProps.append($('.gjs-trt-traits'));
-        $('#gjs-sm-sectors').before(traitsSector);
+        $('.gjs-sm-sectors').before(traitsSector);
         traitsSector.find('.gjs-sm-title').on('click', function(){
           var traitStyle = traitsProps.get(0).style;
           var hidden = traitStyle.display == 'none';

stylesheets/demos.css

@@ -10,18 +10,19 @@ html {
   font-weight: lighter;
 }
 
+#toast-container > div {
+  opacity: 0.95;
+}
+
 #toast-container > div,
 #toast-container > div:hover {
   box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
   font-family: Helvetica, sans-serif;
 }
 
-#toast-container > div {
-  opacity: 0.95;
-}
-
 /* LOGO VERSION */
 
+.gjs-pn-commands .gjs-pn-buttons,
 #gjs-pn-commands .gjs-pn-buttons {
   display: none;
 }
@@ -78,7 +79,8 @@ html {
 
 /* ADS */
 
-.gjs-pn-panel#gjs-pn-views-container {
+.gjs-pn-panel#gjs-pn-views-container,
+.gjs-pn-panel.gjs-pn-views-container {
   height: calc(100% - 150px);
 }
 

stylesheets/grapesjs-mjml.css

@@ -46,7 +46,8 @@
 .gjs-pn-panel,
 .gjs-sm-sector .gjs-sm-composite.gjs-clm-field,
 .gjs-sm-sector .gjs-sm-field.gjs-sm-composite,
-.gjs-sm-sector .gjs-sm-stack #gjs-sm-add {
+.gjs-sm-sector .gjs-sm-stack #gjs-sm-add,
+.gjs-two-color {
   color: #888686;
 }
 
@@ -64,7 +65,8 @@
 .gjs-sm-select option,
 .gjs-sm-unit option,
 .sp-container,
-.gjs-block {
+.gjs-block,
+.gjs-one-bg {
   background-color: #2c2e35;
 }
 

stylesheets/grapesjs-preset-newsletter.css

@@ -42,7 +42,8 @@
 .gjs-pn-panel,
 .gjs-sm-sector .gjs-sm-composite.gjs-clm-field,
 .gjs-sm-sector .gjs-sm-field.gjs-sm-composite,
-.gjs-sm-sector .gjs-sm-stack #gjs-sm-add {
+.gjs-sm-sector .gjs-sm-stack #gjs-sm-add,
+.gjs-two-color {
   color: #a0aabf; }
 
 #gjs-rte-toolbar,
@@ -59,7 +60,8 @@
 .gjs-sm-sector .gjs-sm-colorp-c,
 .gjs-sm-select option,
 .gjs-sm-unit option,
-.sp-container {
+.sp-container,
+.gjs-one-bg {
   background-color: #373d49; }
 
 .gjs-import-label,