index.js

import { BodyComponent } from 'mjml-core'
import buildPreview from './helpers/preview'

export default class MjBody extends BodyComponent {
  static componentName = 'mj-body'

  static allowedAttributes = {
    width: 'unit(px)',
    'background-color': 'color',
    id: 'string',
  }

  static defaultAttributes = {
    width: '600px',
  }

  getChildContext() {
    return {
      ...this.context,
      containerWidth: this.getAttribute('width'),
    }
  }

  getStyles() {
    return {
      div: {
        'word-spacing': 'normal',
        'background-color': this.getAttribute('background-color'),
      },
    }
  }

  render() {
    const {
      globalData: { lang, dir, title, preview },
    } = this.context

    return `<body${this.htmlAttributes({
      id: this.getAttribute('id'),
      class: this.getAttribute('css-class'),
      'xml:lang': lang,
    })}>
    ${buildPreview(preview)}
    <div${this.htmlAttributes({
        ...(title && { 'aria-label': title }),
        'aria-roledescription': 'email',
        role: 'article',
        lang,
        dir,
        style: 'div',
      })}>
    ${this.renderChildren()}
    </div>
  </body>`
  }
}