Fetch model properties from the HTML string using "data-gjs-{modelPropName}" format

bower.json

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

package.json

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

src/demo.js

@@ -331,8 +331,8 @@ require(['config/require-config'], function() {
 
     window.editor = editor;
 
-/*
 	// Test custom blocks
+/*
 	var bm = editor.BlockManager;
   bm.get('b1').set({
     content: {
@@ -344,15 +344,7 @@ require(['config/require-config'], function() {
     }
   });
   bm.get('b2').set({
-    content: {
-      classes: ['blk-row'],
-      droppable: ['.blk-cell'],
-      components: [{
-        classes: ['blk-cell', 'blk2'],
-      },{
-        classes: ['blk-cell', 'blk2'],
-      }]
-    }
+		content: '<div class="blk-row" data-gjs-droppable=".blk-cell" data-gjs-draggable="*:not(#wrapper)"><div data-gjs-draggable=".blk-row" class="blk-cell blk2"></div><div data-gjs-draggable=".blk-row" class="blk-cell blk2"></div></div>',
   });
   bm.get('b3').set({
     content: {

src/dom_components/main.js

@@ -40,6 +40,7 @@ define(function(require) {
 		defaults = require('./config/config'),
 		Component = require('./model/Component'),
 		ComponentView = require('./view/ComponentView');
+
 		var component, componentView;
 		var defaultTypes = {
 			'cell': {

src/parser/model/ParserHtml.js

@@ -4,6 +4,7 @@ define(function(require) {
 
     var TEXT_NODE = 'span';
     var c = config;
+    var modelAttrStart = 'data-gjs-';
 
     return {
 
@@ -100,13 +101,21 @@ define(function(require) {
               model.classes = this.parseClass(nodeValue);
             else if (nodeName == 'contenteditable')
               continue;
-            else
+            else if(nodeName.indexOf(modelAttrStart) === 0){
+              var modelAttr = nodeName.replace(modelAttrStart, '');
+              nodeValue = nodeValue === 'true' ? true : nodeValue;
+              nodeValue = nodeValue === 'false' ? false : nodeValue;
+              model[modelAttr] = nodeValue;
+            }else
               model.attributes[nodeName] = nodeValue;
           }
 
-          // Check for nested elements
+
           var nodeChild = node.childNodes.length;
-          if(nodeChild){
+
+          // Check for nested elements and avoid them if an array
+          // was already given
+          if(nodeChild && !model.components){
             // Avoid infinite text nodes nesting
             var firstChild = node.childNodes[0];
             if(nodeChild === 1 && firstChild.nodeType === 3){

src/utils/Sorter.js

@@ -1,5 +1,6 @@
-define(['backbone'],
-  function(Backbone) {
+define(function(require) {
+
+    var Backbone = require('backbone');
 
     return Backbone.View.extend({
 
@@ -33,7 +34,7 @@ define(['backbone'],
         this.offLeft = o.offsetLeft || 0;
         this.document = o.document || document;
         this.$document = $(this.document);
-        this.dropContent = '';
+        this.dropContent = null;
         this.helper = '';
         this.em = o.em || '';
 
@@ -533,28 +534,42 @@ define(['backbone'],
         var $dst = $(dst);
         var targetCollection = $dst.data('collection');
         var targetModel = $dst.data('model');
-        var droppable = targetModel ? targetModel.get('droppable') : 1;
+
+        // Check if the elemenet is DRAGGABLE to the target
         var drag = model && model.get('draggable');
         var draggable = typeof drag !== 'undefined' ? drag : 1;
         var toDrag = draggable;
 
-        if(this.dropContent instanceof Object){
+        if (this.dropContent instanceof Object) {
           draggable = this.dropContent.draggable;
           draggable = typeof draggable !== 'undefined' ? draggable : 1;
+        } else if (typeof this.dropContent === 'string' && targetCollection) {
+          var sandboxOpts = {silent: true};
+          var sandboxModel = targetCollection.add(this.dropContent, sandboxOpts);
+          draggable = sandboxModel.get && sandboxModel.get('draggable');
+          draggable = typeof draggable !== 'undefined' ? draggable : 1;
+          targetCollection.remove(sandboxModel, sandboxOpts);
         }
 
         if(draggable instanceof Array) {
           toDrag = draggable.join(', ');
           draggable = this.matches(dst, toDrag);
+        }else if(typeof draggable === 'string') {
+          toDrag = draggable;
+          draggable = this.matches(dst, toDrag);
         }
 
-        // Check if the target could accept the element
+        // Check if the target could accept the element to be DROPPED inside
         var accepted = 1;
-        if(droppable instanceof Array){
+        var droppable = targetModel ? targetModel.get('droppable') : 1;
+        var toDrop = draggable;
+        if(droppable instanceof Array) {
           // When I drag blocks src is the HTMLElement of the block
-          // TODO Create temp Components collection, render comps there and then
-          // make the check
-          accepted = this.matches(src, droppable.join(', '));
+          toDrop = droppable.join(', ');
+          accepted = this.matches(src, toDrop);
+        }else if(typeof droppable === 'string') {
+          toDrop = droppable;
+          accepted = this.matches(src, toDrop);
         }
 
         if(targetCollection && droppable && accepted && draggable) {
@@ -588,10 +603,10 @@ define(['backbone'],
             warns.push('target is not droppable');
           }
           if(!draggable){
-            warns.push('component not draggable ', toDrag);
+            warns.push('component not draggable, accepted only by [' + toDrag + ']');
           }
           if(!accepted){
-            warns.push('target accepts only [' + droppable.join(', ') + ']');
+            warns.push('target accepts only [' + toDrop + ']');
           }
           console.warn('Invalid target position: ' + warns.join(', '));
         }

styles/css/main.css

@@ -3111,8 +3111,15 @@ ol.example li.placeholder:before {
   top: 0;
   padding: 7px 10px 7px 5px; }
 
-.gjs-nv-item.gjs-nv-selected {
-  border: 2px solid #3b97e3; }
+/*
+.gjs-nv-item{
+	&.gjs-nv-selected{
+		border: 2px solid $colorBlue;
+	}
+}
+*/
+.gjs-nv-selected .gjs-nv-title {
+  background-color: rgba(255, 255, 255, 0.1); }
 
 .gjs-nv-nav-item-edit {
   visibility: hidden; }

styles/scss/main.scss

@@ -664,11 +664,16 @@ ol.example li.placeholder:before {position: absolute;}
   right: 0; top: 0;
   padding: 7px 10px 7px 5px;
 }
+/*
 .#{$nv-prefix}item{
 	&.#{$nv-prefix}selected{
 		border: 2px solid $colorBlue;
 	}
 }
+*/
+.#{$nv-prefix}selected .#{$nv-prefix}title {
+    background-color: rgba(255,255,255,0.1);
+}
 
 .#{$nv-prefix}nav-item-edit {
   visibility: hidden;

test/specs/parser/model/ParserHtml.js

@@ -340,6 +340,38 @@ define([path + 'model/ParserHtml', path + 'model/ParserCss', 'DomComponents'],
             obj.parse(str).html.should.deep.equal(result);
           });
 
+          it('Parse node with model attributes to fetch', function() {
+            var str = '<div id="test1" data-test="test-value" data-gjs-draggable=".myselector" data-gjs-stuff="test">test2 </div>';
+            var result = {
+              tagName: 'div',
+              draggable: '.myselector',
+              stuff: 'test',
+              attributes: {
+                id: 'test1',
+                'data-test': 'test-value'
+              },
+              type: 'text',
+              content: 'test2 ',
+            };
+            obj.parse(str).html.should.deep.equal(result);
+          });
+
+          it('Parse model attributes with true and false', function() {
+            var str = '<div id="test1" data-test="test-value" data-gjs-draggable="true" data-gjs-stuff="false">test2 </div>';
+            var result = {
+              tagName: 'div',
+              draggable: true,
+              stuff: false,
+              attributes: {
+                id: 'test1',
+                'data-test': 'test-value'
+              },
+              type: 'text',
+              content: 'test2 ',
+            };
+            obj.parse(str).html.should.deep.equal(result);
+          });
+
         });
 
       }