Component properties configuration

@artf Sorry to post it again, It will be the continuation of #952

I just discussed the approach with MJML community and our conversation went like this

https://github.com/mjmlio/mjml/issues/1063#issuecomment-374526777

Please have a look at this.

So in order to avoid heavy load time and other MJML limitations and I have chosen to use Custom approach, where I'm creating my own components.

Again some more questions to avoid some development bottlenecks in future with Grapesjs implementation.

Let's take a two column layout <img width="111" alt="screen shot 2018-03-20 at 3 38 56 pm" src="https://user-images.githubusercontent.com/25955939/37652999-66a6a74a-2c63-11e8-901d-96340910387c.png"> as an example , where i can drag and drop the component and it's respective html will be rendered. The html is a MJML converted html https://mjml.io/try-it-live and i'm hard coding that converted code like below.

 I just stripped down some codes

bm.add('sect50', {
      label: opt.sect50BlkLabel,
      category: 'Structure' || opt.categoryLabel,
      attributes: {class:'gjs-fonts gjs-f-b2'},
      content: '
            <div data-gjs-removable="false" data-gjs-highlightable="false" class="mj-container" >
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
<tr>
   <td data-gjs-removable="false" data-gjs-highlightable="false" style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]-->
      <div data-gjs-removable="false" data-gjs-highlightable="false" style="margin:0 auto;max-width:600px">
         <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0;width:100%" align="center" border="0">
            <tbody>
               ...........bla..............bla...............bla..........
               <td style="vertical-align:top;width:600px;">
                  <![endif]-->
                  <div class="mj-column-per-100 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%">
                     <table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
                        <tbody>
                           ...........bla..............bla...............bla..........
                           ...........bla..............bla...............bla..........
                           <tr>
                              <td style="word-wrap:break-word;font-size:0;padding:10px 25px" align="left">
                                 <div data-gjs-removable="true" data-gjs-highlightable="true" style="cursor:auto;color:#f45e43;font-family:helvetica;font-size:20px;line-height:22px;text-align:left">Hello World</div>
                              </td>
                           </tr>
                           ...........bla..............bla...............bla..........   
                     </table>
                  </div>
                  <!--[if mso | IE]>
               </td>
               </tr>
         </table>
         <![endif]-->
      </div>
    })

, and added some attributes to data-gjs-removable="false" data-gjs-highlightable="false" make some div td tr as selectable/removable/draggable/droppable.

It looks manual entry of data model and it may lead to buggy in future and I don't know whether we can achieve everything like this.

1. Is there any way to configure these things using Custom component https://github.com/artf/grapesjs/wiki/Components.

2. While creating a custom component or While importing a template

   Is it possible to do the same level configuration to all it's children inorder to handle highlight, selectable, removable, draggable, droppable and others?
   

3. I'm going to develop the other components as well using this approach. Is this fine or any alternative ways?

Thanks in advance