Add ES6 compiler

index.html

@@ -1126,6 +1126,39 @@
 
     });
 
+
+    window.editor = editor;
+
+    var pnm = editor.Panels;
+    pnm.addButton('options', [{
+      id: 'undo',
+      className: 'fa fa-undo icon-undo',
+      command: function(editor, sender) {
+        sender.set('active', 0);
+        editor.UndoManager.undo(1);
+      },
+      attributes: { title: 'Undo (CTRL/CMD + Z)'}
+    },{
+      id: 'redo',
+      className: 'fa fa-repeat icon-redo',
+      command: function(editor, sender) {
+        sender.set('active', 0);
+        editor.UndoManager.redo(1);
+      },
+      attributes: { title: 'Redo (CTRL/CMD + SHIFT + Z)' }
+    },{
+      id: 'clean-all',
+      className: 'fa fa-trash icon-blank',
+      command:  function(editor, sender) {
+        if(sender) sender.set('active', false);
+        if(confirm('Are you sure to clean the canvas?')) {
+          var comps = editor.DomComponents.clear();
+          localStorage.clear();
+        }
+      },
+      attributes: { title: 'Empty canvas' }
+    }]);
+
     editor.render();
     </script>
   </body>

package.json

@@ -25,6 +25,9 @@
     "webpack-dev-server": "^1.14.1"
   },
   "devDependencies": {
+    "babel-core": "^6.24.1",
+    "babel-loader": "^7.0.0",
+    "babel-preset-es2015": "^6.24.1",
     "chai": "^3.5.0",
     "documentation": "^4.0.0-beta2",
     "istanbul": "^0.4.2",
@@ -59,6 +62,7 @@
     "build:fonts": "./node_modules/.bin/grunt build:fonts",
     "v:patch": "npm version --no-git-tag-version patch",
     "start": "WEBPACK_ENV=dev webpack-dev-server --progress --colors & npm run build:css -- -w",
-    "test": "./node_modules/.bin/grunt test"
+    "test": "mocha --compilers js:babel-core/register --require ./test/helper.js --recursive ./test/*.js",
+    "test:dev": "npm test -- -R min -w"
   }
 }

src/commands/view/OpenBlocks.js

@@ -1,28 +1,29 @@
 define(function() {
 
-		return {
+    return {
 
-			run: function(editor, sender) {
-				var config = editor.Config;
-				var pfx = config.stylePrefix;
-				var bm = editor.BlockManager;
-				if(!this.blocks){
-					this.blocks = $('<div/>').get(0);
-					this.blocks.appendChild(bm.render());
-					var panels = editor.Panels;
-					if(!panels.getPanel('views-container'))
-						panelC = panels.addPanel({id: 'views-container'});
-					else
-						panelC = panels.getPanel('views-container');
-					panelC.set('appendContent', this.blocks).trigger('change:appendContent');
-				}
+      run: function(editor, sender) {
+        var config = editor.Config;
+        var pfx = config.stylePrefix;
+        var bm = editor.BlockManager;
+        var panelC;
+        if(!this.blocks){
+          this.blocks = $('<div/>').get(0);
+          this.blocks.appendChild(bm.render());
+          var panels = editor.Panels;
+          if(!panels.getPanel('views-container'))
+            panelC = panels.addPanel({id: 'views-container'});
+          else
+            panelC = panels.getPanel('views-container');
+          panelC.set('appendContent', this.blocks).trigger('change:appendContent');
+        }
 
-				this.blocks.style.display = 'block';
-			},
+        this.blocks.style.display = 'block';
+      },
 
-			stop: function() {
-				if(this.blocks)
-					this.blocks.style.display = 'none';
-			}
-		};
-	});
+      stop: function() {
+        if(this.blocks)
+          this.blocks.style.display = 'none';
+      }
+    };
+  });

src/commands/view/OpenTraitManager.js

@@ -1,32 +1,33 @@
 define(function() {
 
-		return {
+    return {
 
-			run: function(editor, sender) {
-				var config = editor.Config;
-				var pfx = config.stylePrefix;
-				var tm = editor.TraitManager;
-				if(!this.obj){
+      run: function(editor, sender) {
+        var config = editor.Config;
+        var pfx = config.stylePrefix;
+        var tm = editor.TraitManager;
+        var panelC;
+        if(!this.obj){
           var tmView = tm.getTraitsViewer();
-					var confTm = tm.getConfig();
-					this.obj = $('<div/>')
-					.append('<div class="'+pfx+'traits-label">' + confTm.labelContainer + '</div>')
-					.get(0);
-					this.obj.appendChild(tmView.render().el);
-					var panels = editor.Panels;
-					if(!panels.getPanel('views-container'))
-						panelC = panels.addPanel({id: 'views-container'});
-					else
-						panelC = panels.getPanel('views-container');
-					panelC.set('appendContent', this.obj).trigger('change:appendContent');
-				}
+          var confTm = tm.getConfig();
+          this.obj = $('<div/>')
+          .append('<div class="'+pfx+'traits-label">' + confTm.labelContainer + '</div>')
+          .get(0);
+          this.obj.appendChild(tmView.render().el);
+          var panels = editor.Panels;
+          if(!panels.getPanel('views-container'))
+            panelC = panels.addPanel({id: 'views-container'});
+          else
+            panelC = panels.getPanel('views-container');
+          panelC.set('appendContent', this.obj).trigger('change:appendContent');
+        }
 
-				this.obj.style.display = 'block';
-			},
+        this.obj.style.display = 'block';
+      },
 
-			stop: function() {
-				if(this.obj)
-					this.obj.style.display = 'none';
-			}
-		};
-	});
+      stop: function() {
+        if(this.obj)
+          this.obj.style.display = 'none';
+      }
+    };
+  });

src/grapesjs/index.js

@@ -36,7 +36,7 @@ define(function (require) {
        *   style: '.hello{color: red}',
        * })
        */
-      init: function(config) {
+      init(config) {
         var c = config || {};
         var els = c.container;
 

webpack.config.js

@@ -28,6 +28,15 @@ module.exports = {
       libraryTarget: 'umd',
   },
   plugins: plugins,
+  module: {
+    loaders: [{
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: /src/,
+        exclude: /node_modules/,
+        query: {presets: ['es2015']}
+    }],
+  },
   resolve: {
     modulesDirectories: ['src', 'node_modules'],
     alias: {