How to use mjml-section - 3 common examples
To help you get started, we’ve selected a few mjml-section examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
homerjam / mjml-mailchimp / src / mc-section.js View on Github 
'mj-wrapper': ['mc-section'],
'mc-section': ['mj-column', 'mj-group', 'mj-raw'],
});
const makeBackgroundString = flow(filter(identity), join(' '))
export default class McSection extends MjSection {
static allowedAttributes = {
...MjSection.allowedAttributes,
'mc:hideable': 'string',
'mc:repeatable': 'string',
'mc:variant': 'string',
'mc:edit': 'string',
}
static defaultAttributes = {
...MjSection.defaultAttributes,
'mc:hideable': false,
}
isHideable() {
if (this.getAttribute('mc:hideable') !== false) {
return true
}
return false
}
// MODIFIED from https://github.com/mjmlio/mjml/blob/master/packages/mjml-section/src/index.js
renderSection() {
const hasBackground = this.hasBackground()import { flow, identity, join, filter } from 'lodash/fp'
import MjSection from 'mjml-section'
import { registerDependencies } from 'mjml-validator'
registerDependencies({
'mj-body': ['mc-section'],
'mj-wrapper': ['mc-section'],
'mc-section': ['mj-column', 'mj-group', 'mj-raw'],
});
const makeBackgroundString = flow(filter(identity), join(' '))
export default class McSection extends MjSection {
static allowedAttributes = {
...MjSection.allowedAttributes,
'mc:hideable': 'string',
'mc:repeatable': 'string',
'mc:variant': 'string',
'mc:edit': 'string',
}
static defaultAttributes = {
...MjSection.defaultAttributes,
'mc:hideable': false,
}
isHideable() {
if (this.getAttribute('mc:hideable') !== false) {
return true
}import { helpers } from 'mjml-core'
import merge from 'lodash/merge'
import Section from 'mjml-section'
const tagName = 'mj-wrapper'
const parentTag = ['mj-container']
const defaultMJMLDefinition = merge({}, Section.defaultMJMLDefinition, {
inheritedAttributes: [
'width'
]
})
const postRender = ($) => {
$('.mj-wrapper-outlook-open').each(function () {
$(this).replaceWith(`${helpers.startConditionalTag}
<table cellspacing="0" cellpadding="0" border="0" role="presentation"><tbody><tr><td style="width:${parseInt($(this).data('width'))}px;">
${helpers.endConditionalTag}`)
})
$('.mj-wrapper-outlook-line').each(function () {
const width = parseInt($(this).data('width'))
$(this).replaceWith(`${helpers.startConditionalTag}
</td></tr><tr><td style="width:${width}px;"></td></tr></tbody></table>
