render() {
return `
${conditionalTag(`
<td
${this.htmlAttributes({
style: 'td',
class: suffixCssClasses(
this.getAttribute('css-class'),
'outlook',
),
})}
>
`)}
${this.renderContent()}
${conditionalTag(`
</td>
`)}
`
}
renderer: component =>
component.constructor.isRawElement()
? component.render()
: `
<!--[if mso | IE]>
<td
${component.htmlAttributes({
align: component.getAttribute('align'),
class: suffixCssClasses(
component.getAttribute('css-class'),
'outlook',
),
style: 'tdOutlook',
})}
>
<![endif]-->
${component.render()}
<!--[if mso | IE]>
</td>
<![endif]-->
`,
renderBefore() {
const { containerWidth } = this.context
return `
<!--[if mso | IE]>
<table
${this.htmlAttributes({
align: 'center',
border: '0',
cellpadding: '0',
cellspacing: '0',
class: suffixCssClasses(this.getAttribute('css-class'), 'outlook'),
style: { width: `${containerWidth}` },
width: parseInt(containerWidth, 10),
})}
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
`
}