<commit_before>import { MJMLElement } from 'mjml-core'
import cloneDeep from 'lodash/cloneDeep'
import merge from 'lodash/merge'
import React, { Component } from 'react'

const tagName = 'mj-section'
const defaultMJMLDefinition = {
  attributes: {
    'background-repeat': 'repeat',
    'padding': '20px 0',
    'background-size': 'auto'
  }
}
const baseStyles = {
  div: {
    margin: '0 auto'
  },
  table: {
    fontSize: '1px',
    width: '100%'
  },
  td: {
    textAlign: 'center',
    verticalAlign: 'top'
  }
}
const postRender = $ => {
  $('.mj-section-outlook-background').each(function () {
    const url = $(this).data('url')
    const width = $(this).data('width')

    $(this)
      .removeAttr('class')
      .removeAttr('data-url')
      .removeAttr('data-width')

    if (!url) {
      return
    }

    $(this).before(`<!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:${width}px;">
        <v:fill origin="0.5, 0" position="0.5,0" type="tile" src="${url}" />
        <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
      <![endif]-->`)

    $(this).after(`<!--[if gte mso 9]>
        </v:textbox>
      </v:rect>
      <![endif]-->`)
  })

  $('.mj-section-outlook-open').each(function () {
    const $columnDiv = $(this).next()

    $(this).replaceWith(`<!--[if mso]>
      <table border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:${$columnDiv.data('vertical-align')};width:${parseInt($(this).data('width'))}px;">
      <![endif]-->`)

    $columnDiv.removeAttr('data-vertical-align')
  })

  $('.mj-section-outlook-line').each(function () {
    const $columnDiv = $(this).next()

    $(this).replaceWith(`<!--[if mso]>
    </td><td style="vertical-align:${$columnDiv.data('vertical-align')};width:${parseInt($(this).data('width'))}px;">
      <![endif]-->`)

    $columnDiv.removeAttr('data-vertical-align')
  })

  $('.mj-section-outlook-close').each(function () {
    $(this).replaceWith(`<!--[if mso]>
      </td></tr></table>
      <![endif]-->`)
  })

  return $
}

@MJMLElement
class Section extends Component {

  styles = this.getStyles()

  isFullWidth () {
    const { mjAttribute } = this.props

    return mjAttribute('full-width') == 'full-width'
  }

  getStyles () {
    const { mjAttribute, parentWidth, defaultUnit } = this.props

    const background = mjAttribute('background-url') ? {
      background: `url(${mjAttribute('background-url')}) top center / ${mjAttribute('background-size') || ''} ${mjAttribute('background-repeat') || ''}`
    } : {
      background: mjAttribute('background-color')
    }

    return merge({}, baseStyles, {
      td: {
        fontSize: '1px',
        padding: defaultUnit(mjAttribute('padding'), "px"),
        paddingBottom: defaultUnit(mjAttribute('padding-bottom'), "px"),
        paddingLeft: defaultUnit(mjAttribute('padding-left'), "px"),
        paddingRight: defaultUnit(mjAttribute('padding-right'), "px"),
        paddingTop: defaultUnit(mjAttribute('padding-top'), "px"),
        textAlign: mjAttribute('text-align'),
        verticalAlign: mjAttribute('vertical-align')
      },
      div: {
        maxWidth: parentWidth<commit_msg>blank space could break responsive<commit_after>import { MJMLElement } from 'mjml-core'
import cloneDeep from 'lodash/cloneDeep'
import merge from 'lodash/merge'
import React, { Component } from 'react'

const tagName = 'mj-section'
const defaultMJMLDefinition = {
  attributes: {
    'background-repeat': 'repeat',
    'padding': '20px 0',
    'background-size': 'auto'
  }
}
const baseStyles = {
  div: {
    margin: '0 auto'
  },
  table: {
    fontSize: '1px',
    width: '100%'
  },
  td: {
    textAlign: 'center',
    verticalAlign: 'top'
  }
}
const postRender = $ => {
  $('.mj-section-outlook-background').each(function () {
    const url = $(this).data('url')
    const width = $(this).data('width')

    $(this)
      .removeAttr('class')
      .removeAttr('data-url')
      .removeAttr('data-width')

    if (!url) {
      return
    }

    $(this).before(`<!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:${width}px;">
        <v:fill origin="0.5, 0" position="0.5,0" type="tile" src="${url}" />
        <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
      <![endif]-->`)

    $(this).after(`<!--[if gte mso 9]>
        </v:textbox>
      </v:rect>
      <![endif]-->`)
  })

  $('.mj-section-outlook-open').each(function () {
    const $columnDiv = $(this).next()

    $(this).replaceWith(`<!--[if mso]>
      <table border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:${$columnDiv.data('vertical-align')};width:${parseInt($(this).data('width'))}px;">
      <![endif]-->`)

    $columnDiv.removeAttr('data-vertical-align')
  })

  $('.mj-section-outlook-line').each(function () {
    const $columnDiv = $(this).next()

    $(this).replaceWith(`<!--[if mso]>
    </td><td style="vertical-align:${$columnDiv.data('vertical-align')};width:${parseInt($(this).data('width'))}px;">
      <![endif]-->`)

    $columnDiv.removeAttr('data-vertical-align')
  })

  $('.mj-section-outlook-close').each(function () {
    $(this).replaceWith(`<!--[if mso]>
      </td></tr></table>
      <![endif]-->`)
  })

  return $
}

@MJMLElement
class Section extends Component {

  styles = this.getStyles()

  isFullWidth () {
    const { mjAttribute } = this.props

    return mjAttribute('full-width') == 'full-width'
  }

  getStyles () {
    const { mjAttribute, parentWidth, defaultUnit } = this.props

    const background = mjAttribute('background-url') ? {
      background: `url(${mjAttribute('background-url')}) top center / ${mjAttribute('background-size') || ''} ${mjAttribute('background-repeat') || ''}`
    } : {
      background: mjAttribute('background-color')
    }

    return merge({}, baseStyles, {
      td: {
        fontSize: '0px',
        padding: defaultUnit(mjAttribute('padding'), "px"),
        paddingBottom: defaultUnit(mjAttribute('padding-bottom'), "px"),
        paddingLeft: defaultUnit(mjAttribute('padding-left'), "px"),
        paddingRight: defaultUnit(mjAttribute('padding-right'), "px"),
        paddingTop: defaultUnit(mjAttribute('padding-top'), "px"),
        textAlign: mjAttribute('text-align'),
        verticalAlign: mjAttribute('vertical-align')
      },
      div: {
        maxWidth: parentWidth
{'fraction_non_alphanumeric': 0.2097447795823666, 'fraction_numerical': 0.007424593967517401, 'mean_word_length': 3.3483523873570946, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 51, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2744642', 'n_tokens_mistral': 2224, 'n_tokens_neox': 2132, 'n_words': 355}