Update demo

src/demo.js

@@ -184,12 +184,37 @@ require(['src/config/require-config.js'], function() {
 			commands: 		{
 					defaults		: [{
 													id: 	'open-github',
-
 													run: 	function(em, sender){
 														sender.set('active',false);
 														window.open('https://github.com/artf/grapesjs','_blank');
 													},
-
+													stop: function(){}
+												},{
+													id: 	'undo',
+													run: 	function(em, sender){
+														sender.set('active',false);
+														em.get('UndoManager').undo();
+													},
+													stop: function(){}
+												},{
+													id: 	'redo',
+													run: 	function(em, sender){
+														sender.set('active',false);
+														em.get('UndoManager').redo();
+													},
+													stop: function(){}
+												},{
+													id: 	'clean-all',
+													run: 	function(em, sender){
+														sender.set('active',false);
+														if(confirm('Are you sure to clean the canvas?')){
+															var comps = em.get('Components').getComponents();
+															var len = comps.length;
+															for(var i = 0; i < len; i++){
+																comps.pop();
+															}
+														}
+													},
 													stop: function(){}
 												}],
 			},
@@ -274,6 +299,13 @@ require(['src/config/require-config.js'], function() {
 					       	   { id: 'export', 		className: 'fa fa-code', 	command: 'export-template', attributes: { title: 'View code' }, },
 					       	   { id: 'view-github', className: 'fa fa-github', 	command: 'open-github', attributes: { title: 'View on Github' }, },
 					],
+				},{
+					id	: 'options2',
+					buttons	: [
+					       	   { id: 'undo', 	className: 'fa fa-undo icon-undo', 	command: 'undo', attributes: { title: 'Undo (CTRL/CMD + Z)' }, },
+					       	   { id: 'redo', 		className: 'fa fa-repeat icon-redo', 	command: 'redo', attributes: { title: 'Redo (CTRL/CMD + SHIFT + Z)' }, },
+					       	   { id: 'clean-all', className: 'fa fa-trash icon-blank', 	command: 'clean-all', attributes: { title: 'Empty canvas' }, },
+					],
 				},{
 					id	: 'views',
 					buttons	: [{ id: 'open-sm', 	className: 'fa fa-paint-brush', command: 'open-sm', 	active: true, attributes: { title: 'Open Style Manager' },},
@@ -578,6 +610,36 @@ require(['src/config/require-config.js'], function() {
 							    		   { value : 'center', 	name : 'Center',	className: 'fa fa-align-center' },
 							    		   { value : 'right', 	name : 'Right', 	className: 'fa fa-align-right'},
 							    		   { value : 'justify', name : 'Justify', 	className: 'fa fa-align-justify'},],
+						},{
+							name		: 'Text shadow',
+							property	: 'text-shadow',
+							type		: 'stack',
+							preview		: true,
+							properties	: [{
+											name: 		'X position',
+											property: 	'h-shadow',
+											type: 		'integer',
+											units: 		['px','%'],
+											defaults : 	0,
+										},{
+											name: 		'Y position',
+											property: 	'v-shadow',
+											type: 		'integer',
+											units: 		['px','%'],
+											defaults : 	0,
+										},{
+											name: 		'Blur',
+											property: 	'blur-radius',
+											type: 		'integer',
+											units: 		['px'],
+											defaults : 	0,
+											min: 0,
+										},{
+											name: 		'Color',
+											property: 	'shadow-color',
+											type: 		'color',
+											defaults: 	'black',
+										},],
 						}],
 					},{
 						name: 'Decorations',

styles/css/main.css

@@ -2739,7 +2739,7 @@ ol.example li.placeholder:before {
   box-sizing: border-box;
   text-align: center;
   z-index: 3; }
-  .wte-pn-panel#wte-pn-commands, .wte-pn-panel#wte-pn-options {
+  .wte-pn-panel#wte-pn-commands, .wte-pn-panel#wte-pn-options, .wte-pn-panel#wte-pn-options2 {
     min-width: 35px;
     height: 100%;
     width: 3.5%;
@@ -2747,6 +2747,13 @@ ol.example li.placeholder:before {
   .wte-pn-panel#wte-pn-options {
     bottom: 0;
     height: auto; }
+  .wte-pn-panel#wte-pn-options2 {
+    bottom: 150px;
+    height: auto; }
+  .wte-pn-panel .icon-undo, .wte-pn-panel .icon-redo {
+    font-size: 20px;
+    height: 30px;
+    width: 25px; }
   .wte-pn-panel#wte-pn-views {
     border-bottom: 2px solid #3c3c3c;
     right: 0;
@@ -3166,6 +3173,12 @@ ol.example li.placeholder:before {
         background-color: #4c4c4c; }
       .wte-sm-sector .wte-sm-property .wte-sm-layer.wte-sm-no-preview #wte-sm-preview-box, .wte-clm-tags .wte-sm-property .wte-sm-layer.wte-sm-no-preview #wte-sm-preview-box {
         display: none; }
+  .wte-sm-sector #wte-sm-text-shadow #wte-sm-preview::after, .wte-clm-tags #wte-sm-text-shadow #wte-sm-preview::after {
+    color: #000;
+    content: "T";
+    font-weight: 900;
+    line-height: 17px;
+    padding: 0 4px; }
   .wte-sm-sector .wte-sm-stack .wte-sm-properties, .wte-clm-tags .wte-sm-stack .wte-sm-properties {
     padding-top: 5px; }
   .wte-sm-sector .wte-sm-stack #wte-sm-add, .wte-clm-tags .wte-sm-stack #wte-sm-add {

styles/scss/main.scss

@@ -223,6 +223,18 @@ $leftWidth: 16.5%;
   	height: auto;
   }
 
+  &##{$pn-prefix}options2{
+  	@extend ##{$pn-prefix}commands;
+  	bottom: 150px;
+  	height: auto;
+  }
+
+  .icon-undo, .icon-redo{
+  	font-size: 20px;
+    height: 30px;
+    width: 25px;
+  }
+
   &##{$pn-prefix}views{
   	border-bottom: 2px solid darken($mainColor, 3%);
   	right: 0;
@@ -683,6 +695,13 @@ $arrowColor:		darken($fontColor,24%); /*b1b1b1*/
 			}
 		}
 	}
+	##{$sm-prefix}text-shadow ##{$sm-prefix}preview::after {
+	  color: #000;
+	  content: "T";
+	  font-weight: 900;
+	  line-height: 17px;
+	  padding: 0 4px;
+	}
 	/*------------------END Property--------------------*/
 
 	.#{$sm-prefix}stack .#{$sm-prefix}properties{padding-top: 5px;}