- Updated demo scripts

- Fixed image 'ghosts' on drag
- Fixed unit select inside composite properties
- Added new way to manage default components

.gitignore

@@ -6,6 +6,7 @@ style/.sass-cache/
 grapes.sublime-project
 grapes.sublime-workspace
 
+img/
 private/
 vendor/
 node_modules/

README.md

@@ -104,6 +104,9 @@ var config = {
   // Where to render editor (eg. #myId)
   container:          '',
 
+  // Enable/Disable the possibility to copy (ctrl + c) and paste (ctrl + v) elements
+  copyPaste         : true,
+
   // Enable/Disable undo manager
   undoManager:        true,
 

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Open source Web Template Editor",
-  "version": "0.0.51",
+  "version": "0.1.0",
   "author": "Artur Arseniev",
   "homepage": "http://grapesjs.com",
   "main": [

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Open source Web Template Editor",
-  "version": "0.0.51",
+  "version": "0.1.0",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/asset_manager/main.js

@@ -2,7 +2,7 @@ define(function(require) {
 	/**
 	 * @class 	AssetManager
 	 * @param 	{Object} Configurations
-	 * 
+	 *
 	 * @return	{Object}
  	 * */
 	var AssetManager	= function(config)
@@ -13,58 +13,62 @@ define(function(require) {
 			AssetsView	= require('./view/AssetsView'),
 			FileUpload	= require('./view/FileUploader');
 
-		for (var name in defaults) { 
+		for (var name in defaults) {
 			if (!(name in c))
 				c[name] = defaults[name];
 		}
-		
+
 		this.assets		= new Assets(c.assets);
 		var obj				= {
 				collection	: this.assets,
 		    	config		: c,
 		};
-		
+
 	    this.am 		= new AssetsView(obj);
 	    this.fu 		= new FileUpload(obj);
 	};
-	
+
 	AssetManager.prototype	= {
-			
+
 			/**
 			 * Get collection of assets
-			 * 
+			 *
 			 * @return	{Object}
 			 * */
 			getAssets	: function(){
 				return	this.assets;
 			},
-			
+
 			/**
 			 * Set new target
 			 * @param	{Object}	m Model
-			 * 
+			 *
 			 * @return	void
 			 * */
 			setTarget	: function(m){
 				this.am.collection.target = m;
 			},
-			
+
 			/**
 			 * Set callback after asset was selected
 			 * @param	{Object}	f Callback function
-			 * 
+			 *
 			 * @return	void
 			 * */
 			onSelect	: function(f){
 				this.am.collection.onSelect = f;
 			},
-
-			render		: function(){
-				if(!this.rendered)
+
+			/**
+			 * Render
+			 * @param  {Boolean} f 	Force to render
+			 */
+			render		: function(f){
+				if(!this.rendered || f)
 					this.rendered	= this.am.render().$el.add(this.fu.render().$el);
 				return	this.rendered;
 			},
 	};
-	
+
 	return AssetManager;
 });

src/code_manager/model/HtmlGenerator.js

@@ -1,39 +1,50 @@
-define(['backbone'], 
+define(['backbone'],
 	function (Backbone) {
 		/**
 		 * @class HtmlGenerator
 		 * */
 		return Backbone.Model.extend({
-			
+
 			/** @inheritdoc */
-			getId	: function(){ 
-				return 'html'; 
+			getId	: function(){
+				return 'html';
 			},
-			
+
 			/** @inheritdoc */
 			build: function(model){
 				var coll 	= model.get('components') || model,
 					code 	= '';
-				
+
 				coll.each(function(m){
-					var tag 	= m.get('tagName'),		// Tag name
-						attr 	= '',					// Attributes string
-						cln		= m.get('components');	// Children
-
+					var tag 	= m.get('tagName'),			// Tag name
+							sTag	= 0,										// Single tag
+							attr 	= '',										// Attributes string
+							cln		= m.get('components');	// Children
+
 					_.each(m.get('attributes'),function(value, prop){
+						if(prop == 'onmousedown')
+							return;
 						attr 	+= value && prop!='style' ? ' ' + prop + '="' + value + '" ' : '';
 					});
-
-					code += '<'+tag+' id="'+m.cid+'"' + attr + '>' + m.get('content');
-
+
+					if(m.get('type') == 'image'){
+							tag 	= 'img';
+							sTag	= 1;
+							attr 	+= 'src="' + m.get('src') + '"';
+					}
+
+					code += '<'+tag+' id="'+m.cid+'"' + attr + (sTag ? '/' : '') + '>' + m.get('content');
+
 					if(cln.length)
 						code += this.build(cln);
-
-					code += '</'+tag+'>';
+
+					if(!sTag)
+						code += '</'+tag+'>';
+
 				}, this);
-				
+
 				return code;
 			},
-			
+
 		});
 });

src/commands/main.js

@@ -20,6 +20,13 @@ define(function(require) {
 		this.config			= c;
 		this.Abstract		= AbsCommands;
 
+		// Load commands passed by configuration
+		for( var k in c.defaults){
+			var obj 	= c.defaults[k];
+			if(obj.id)
+				this.add(obj.id, obj);
+		}
+
 		this.defaultCommands					= {};
 		this.defaultCommands['select-comp']		= require('./view/SelectComponent');
 		this.defaultCommands['create-comp']		= require('./view/CreateComponent');

src/commands/view/ImageComponent.js

@@ -1,37 +1,40 @@
 define(['backbone', './InsertCustom'],
 	function(Backbone, InsertCustom) {
-		/** 
+		/**
 		 * @class ImageComponent
 		 * */
 		return _.extend({}, InsertCustom, {
-			
+
 			/**
 			 * Trigger before insert
 			 * @param 	{Object}	object
-			 * 
+			 *
 			 * */
 			beforeInsert: function(object){
 				object.type 			= 'image';
 				object.style			= {};
+				object.attributes = {};
 				if (!this.nearToFloat()) {
 					object.style.display	= 'block';
 				}
+				// This allow to avoid 'ghosts' on drag
+				object.attributes.onmousedown = 'return false';
 				if (this.config.firstCentered && (this.$wp.get(0) == this.posTargetEl.get(0)) ) {
 					object.style.margin 	= '0 auto';
 				}
 			},
-			
+
 			/**
 			 * Trigger after insert
 			 * @param	{Object}	model	Model created after insert
-			 * 
+			 *
 			 * */
 			afterInsert: function(model){
 				model.trigger('dblclick');
 				if(this.sender)
 					this.sender.set('active', false);
 			},
-			
-			
+
+
 		});
 	});

src/commands/view/InsertCustom.js

@@ -1,72 +1,77 @@
 define(['backbone', './SelectPosition'],
 	function(Backbone, SelectPosition) {
-		/** 
+		/**
 		 * @class InsertCustom
 		 * */
 		return _.extend({}, SelectPosition, {
-			
-			/** 
-			 * Run method 
+
+			/**
+			 * Run method
 			 * */
 			run: function(em, sender){
 				this.enable();
+				this.em				= em;
 				this.sender		= sender;
-				this.opt 		= sender.get('options') || {};
+				this.opt 			= sender.get('options') || {};
 				this.content	= this.opt.content;
 			},
-			
+
 			enable: function(){
 				SelectPosition.enable.apply(this, arguments);
 				_.bindAll(this,'insertComponent');
 				this.$wp	= this.$wrapper;
 				this.$wp.on('click', this.insertComponent);
 			},
-			
-			/** 
+
+			/**
 			 * Start insert event
-			 * 
+			 *
 			 * @return void
 			 * */
 			insertComponent: function(){
 				this.$wp.off('click', this.insertComponent);
 				this.stopSelectPosition();
 				this.removePositionPlaceholder();
 				var object 	= this.buildContent();
-				this.beforeInsert(object);						
-				var model = this.posTargetCollection.add(object, { at: this.posIndex, silent:false });				
+				this.beforeInsert(object);
+				var model = this.posTargetCollection.add(object, { at: this.posIndex, silent:false });
 				if(this.opt.terminateAfterInsert && this.sender)
 					this.sender.set('active',false);
 				else
 					this.enable();
+
+				if(this.em)
+						this.em.initChildrenComp(model);
+
 				this.afterInsert(model, this);
 			},
-			
+
 			/**
 			 * Trigger before insert
 			 * @param 	{Object}	obj
-			 * 
+			 *
 			 * @return 	void
 			 * */
 			beforeInsert: function(obj){},
-			
+
 			/**
 			 * Trigger after insert
 			 * @param	{Object}	model	Model created after insert
-			 * 
+			 *
 			 * @return 	void
 			 * */
 			afterInsert: function(model){},
-			
-			/** 
+
+			/**
 			 * Create different object, based on content, to insert inside canvas
-			 * 
+			 *
 			 * @return 	{Object}
 			 * */
 			buildContent: function(){
 				var result = {};
 				if(typeof this.content === 'string'){
-					result = {						
-						content	: this.content, 
+					result = {
+						content	: this.content,
 						tagName	: 'span',
 					};
 				}else if(typeof this.content === 'object'){

src/commands/view/OpenLayers.js

@@ -13,14 +13,15 @@ define(['Navigator'], function(Layers) {
 						lyStylePfx		= config.layers.stylePrefix || 'nv-';
 
 					config.layers.stylePrefix = config.stylePrefix + lyStylePfx;
-					var layers			= new Layers(collection, config.layers);
-					this.$layers 		= layers.render();
+					config.layers.em 	= em;
+					var layers				= new Layers(collection, config.layers);
+					this.$layers 			= layers.render();
 
 					// Check if panel exists otherwise crate it
 					if(!panels.getPanel('views-container'))
-						this.panel		= panels.addPanel({ id: 'views-container'});
+						this.panel			= panels.addPanel({ id: 'views-container'});
 					else
-						this.panel		= panels.getPanel('views-container');
+						this.panel			= panels.getPanel('views-container');
 
 					this.panel.set('appendContent', this.$layers).trigger('change:appendContent');
 				}