Reverse files.

index.html

@@ -1,138 +1,122 @@
 <!doctype html>
 <html lang="en">
-
+  <head>
-<head>
+    <meta charset="utf-8">
-  <meta charset="utf-8">
+    <title>GrapesJS</title>
-  <title>GrapesJS</title>
+    <link rel="stylesheet" href="dist/css/grapes.min.css">
-  <link rel="stylesheet" href="dist/css/grapes.min.css">
+    <script src="dist/grapes.min.js"></script>
-  <script src="dist/grapes.min.js"></script>
-  <style>
-    body,
-    html {
-      height: 100%;
-      margin: 0;
-    }
-  </style>
-</head>
-
-<body>
-  <div id="gjs" style="height:0px; overflow:hidden;">
-    <div class="panel">
-      <h1 class="welcome">Welcome to</h1>
-      <div class="big-title">
-        <svg class="logo" viewBox="0 0 100 100">
-          <path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2"
-          />
-        </svg>
-        <span>GrapesJS</span>
-      </div>
-      <div class="description">
-        This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can copy and rename
-        it to _index.html, on next server start the new file will be served, and it will be ignored by git.
-      </div>
-    </div>
     <style>
-      .panel {
+      body,
-        width: 90%;
+      html {
-        max-width: 700px;
+        height: 100%;
-        border-radius: 3px;
+        margin: 0;
-        padding: 30px 20px;
-        margin: 150px auto 0px;
-        background-color: #d983a6;
-        box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
-        color: rgba(255, 255, 255, 0.75);
-        font: caption;
-        font-weight: 100;
-      }
-
-      .welcome {
-        text-align: center;
-        font-weight: 100;
-        margin: 0px;
-      }
-
-      .logo {
-        width: 70px;
-        height: 70px;
-        vertical-align: middle;
       }
+    </style>
+  </head>
 
-      .logo path {
+  <body>
-        pointer-events: none;
+    <div id="gjs" style="height:0px; overflow:hidden;">
-        fill: none;
+      <div class="panel">
-        stroke-linecap: round;
+        <h1 class="welcome">Welcome to</h1>
-        stroke-width: 7;
+        <div class="big-title">
-        stroke: #fff
+          <svg class="logo" viewBox="0 0 100 100">
-      }
+            <path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2"/>
+          </svg>
+          <span>GrapesJS</span>
+        </div>
+        <div class="description">
+          This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can
+          copy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git.
+        </div>
+      </div>
+      <style>
+        .panel {
+          width: 90%;
+          max-width: 700px;
+          border-radius: 3px;
+          padding: 30px 20px;
+          margin: 150px auto 0px;
+          background-color: #d983a6;
+          box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.25);
+          color:rgba(255,255,255,0.75);
+          font: caption;
+          font-weight: 100;
+        }
 
-      .big-title {
+        .welcome {
-        text-align: center;
+          text-align: center;
-        font-size: 3.5rem;
+          font-weight: 100;
-        margin: 15px 0;
+          margin: 0px;
-      }
+        }
 
-      .description {
+        .logo {
-        text-align: justify;
+          width: 70px;
-        font-size: 1rem;
+          height: 70px;
-        line-height: 1.5rem;
+          vertical-align: middle;
-      }
+        }
-    </style>
-  </div>
 
-  <script type="text/javascript">
+        .logo path {
-    var editor = grapesjs.init({
+          pointer-events: none;
-      showOffsets: 1,
+          fill: none;
-      noticeOnUnload: 0,
+          stroke-linecap: round;
-      container: '#gjs',
+          stroke-width: 7;
-      height: '100%',
+          stroke: #fff
-      fromElement: true,
-      storageManager: { autoload: 0 },
-      styleManager: {
-        sectors: [{
-          name: 'General',
-          open: false,
-          buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom']
-        }, {
-          name: 'Dimension',
-          open: false,
-          buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
-        }, {
-          name: 'Typography',
-          open: false,
-          buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-shadow'],
-        }, {
-          name: 'Decorations',
-          open: false,
-          buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'],
-        }, {
-          name: 'Extra',
-          open: false,
-          buildProps: ['transition', 'perspective', 'transform'],
         }
-        ],
-      },
-    });
 
-    editor.BlockManager.add('testBlock', {
+        .big-title {
-      label: 'Block',
+          text-align: center;
-      category: {
+          font-size: 3.5rem;
-        label: 'General',
+          margin: 15px 0;
-        order: 2,
+        }
-        open: false,
-      },
-      attributes: { class: 'gjs-fonts gjs-f-b1' },
-      content: `<div style="padding-top:50px; padding-bottom:50px; text-align:center">Test block</div>`
-    })
 
-    editor.BlockManager.add('testBlock2', {
+        .description {
-      label: 'Block2',
+          text-align: justify;
-      category: 'Test category',
+          font-size: 1rem;
-      attributes: { class: 'gjs-fonts gjs-f-2' },
+          line-height: 1.5rem;
-      content: `<div style="padding-top:50px; padding-bottom:50px; text-align:center">Test block 2</div>`
+        }
-    })
 
+      </style>
+    </div>
 
-  </script>
+    <script type="text/javascript">
-</body>
+      var editor = grapesjs.init({
+        showOffsets: 1,
+        noticeOnUnload: 0,
+        container: '#gjs',
+        height: '100%',
+        fromElement: true,
+        storageManager: { autoload: 0 },
+        styleManager : {
+          sectors: [{
+              name: 'General',
+              open: false,
+              buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom']
+            },{
+              name: 'Dimension',
+              open: false,
+              buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
+            },{
+              name: 'Typography',
+              open: false,
+              buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-shadow'],
+            },{
+              name: 'Decorations',
+              open: false,
+              buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'],
+            },{
+              name: 'Extra',
+              open: false,
+              buildProps: ['transition', 'perspective', 'transform'],
+            }
+          ],
+        },
+      });
 
-</html>
+      editor.BlockManager.add('testBlock', {
+        label: 'Block',
+        attributes: { class:'gjs-fonts gjs-f-b1' },
+        content: `<div style="padding-top:50px; padding-bottom:50px; text-align:center">Test block</div>`
+      })
+    </script>
+  </body>
+</html>

src/block_manager/view/BlocksView.js

@@ -122,7 +122,7 @@ module.exports = Backbone.View.extend({
       } else if (typeof category == 'object') {
         category.id = category.label;
       }
-      
+
       var catModel = this.categories.add(category);
       var catId = catModel.get('id');
       var catView = this.renderedCategories[catId];