MJML Hero component

[NorthstarTech]

Can the mjml hero component (mj-hero) be used with grapejs? If so what are the necessary changes? I want to add the mj-hero block in grapesjs. Help needed.

[NorthstarTech]

      view: defaultView.extend(Object.assign({}, coreMjmlView, {
   tagName: 'div',

If you can provide any hints, it would be great. From my understanding, the hero tag would work similar to the mj-section

I have included the code below.

  // Hero
  domc.addType('mj-hero', {
    model: defaultModel.extend(Object.assign({}, coreMjmlModel, {
      defaults: Object.assign({}, defaultModel.prototype.defaults, {
        'custom-name': 'Hero',
        draggable: '[data-type=mj-container]',
        //droppable: '[data-type=mj-text, mj-button]',
        style: {
          'padding-top': '0px',
          'padding-bottom': '0px',
          'vertical-align': 'top',
          'text-align': 'center',
        },
        stylable: [
          'vertical-align',
          'padding', 'padding-top', 'padding-left', 'padding-right', 'padding-bottom',
          'background-color', 'background-url', 'background-size'
        ],
      }),
    }), {
      isComponent(el) {
        if (el.tagName == 'MJ-HERO') {
          return {type: 'mj-hero'};
        }
      },
    }),
    //  view
    view: defaultView.extend(Object.assign({}, coreMjmlView, {
      tagName: 'div',

      attributes: {
        style: 'pointer-events: all;',
        'data-type': 'mj-hero',
      },

      init() {
        coreMjmlView.init.call(this);
        this.listenTo(this.model.get('components'), 'add remove', this.render);
      },
    })),
  });

[kickbk]

Kinda wondering about this too. you are missing

getChildrenSelector() {
    return '???';
},

but honestly I couldn't figure out how you decide what the children selectors are. What do you go by? Is there a reference?

[kickbk]

FYI, you can achieve the same result as a hero by clicking on a section > Style Manager > Decorations > Background URL and load an image there.

[NorthstarTech]

Oh thanks, I will keep playing around with this.

I know I can do that but it doesn't account for the height of the image. I would have to add some empty content(probably text boxes) to add additional height.

[jmchaves]

Hey guys, I got a question: This is how I run init function:

var editor = grapesjs.init({
      fromElement: 1,
      container : '#gjs',
      plugins: ['grapesjs-mjml'],
      pluginsOpts: {
        'grapesjs-mjml': {/* ...options */}
      }
  });

Then I noticed you're using coreMjmlModel and coreMjmlView to create a custom component. Where can I get those values?

[izaa]

@jmchaves

Then I noticed you're using coreMjmlModel and coreMjmlView to create a custom component. Where can I get those values?

Have you tried

   var comps = editor.DomComponents;
   var defaultType = comps.getType('mjml');  // this    
   var defaultModel = defaultType.model; // <-- is this coreMjmlModel ?
   var defaultView = defaultType.view; // <-- is this coreMjmlView  ?

[artf]

I close this as mjml-hero was already included