Configuración de propiedades de los componentes

@artf Perdona que lo publique de nuevo, será la continuación del #952

Acabo de hablar del enfoque con la comunidad de MJML y nuestra conversación fue así

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

Por favor, échale un vistazo a esto.

Así que, para evitar tiempos de carga pesados y otras limitaciones de MJML, he optado por usar el enfoque personalizado, donde creo mis propios componentes.

De nuevo, algunas preguntas más para evitar cuellos de botella en el desarrollo en el futuro con la implementación de Grapesj.

Tomemos como ejemplo un diseño de dos columnas <img width="111" alt="captura de pantalla 2018-03-20 a las 3 38 56 pm" src="https://user-images.githubusercontent.com/25955939/37652999-66a6a74a-2c63-11e8-901d-96340910387c.png"> como ejemplo, donde puedo arrastrar y soltar el componente y se renderizará su HTML respectivo. El html es un MJML convertido html https://mjml.io/try-it-live y estoy codificando ese código convertido como abajo.

 Acabo de despojar algunos códigos

bm.add('sect50', {
      etiqueta: opt.sect50BlkLabel,
      categoría: 'Estructura' || opt.categoryLabel,
      Atributos: {Clase:'GJS-Fonts GJS-F-B2'},
      Contenido: '
            <div data-gjs-removable="false" data-gjs-highlightable="false" class="mj-container" >
<!--[si mso | IE]>
<tabla rol="presentación" borde="0" celpadding="0" celdaspaje="0" ancho="600" aline="centro" estilo="ancho: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">
         <tabletable 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%">
                     <tabla rol="presentación" cellpadding="0" celda_espacio="0"ancho="100%"borde="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">Hola mundo</div>
                              </td>
                           </tr>
                           ........... Bla.............. Bla............... Bla..........   
                     </table>
                  </div>
                  <!--[si mso | IE]>
               </td>
               </tr>
         </table>
         <! [endif]-->
      </div>
    })

, y añadió algunos atributos a 'data-gjs-removable="false" data-gjs-highlightable="false"' haciendo que algunos 'div td tr' sean seleccionables/removibles/arrastrables/soltables.

Parece que la introducción manual del modelo de datos y puede que en el futuro haya fallos, y no sé si podremos lograr todo así.

1. ¿Hay alguna forma de configurar estas cosas usando el componente personalizado https://github.com/artf/grapesjs/wiki/Components?

2. Mientras creas un componente personalizado o mientras importas una plantilla ! captura de pantalla 2018-03-20 a las 5:53 16:00

¿Es posible hacer la misma configuración de niveles con todos sus hijos para gestionar resaltado, seleccionable, removible, arrastrable, soltable y otros?

3. Voy a desarrollar también los otros componentes usando este enfoque. ¿Está bien esto o hay alguna alternativa que haga?

! captura de pantalla 2018-03-20 a las 6:05 41 pm

Gracias de antemano