Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ref #2396 #2355 move body tag from skeleton to mj-body, add lang on w… #2408

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

ref #2396 #2355 move body tag from skeleton to mj-body, add lang on w… #2408

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1245156
ref #2396 #2355 move body tag from skeleton to mj-body, add lang on w…
Jan 13, 2022
82e7fde
lint
Jan 13, 2022
cae5b54
add id attribute on body
Jan 24, 2022
634c07c
add helper file
Jan 24, 2022
28f25f0
update doc
Jan 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/mjml-body/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,6 @@ This is the starting point of your email.
attribute | unit | description | default value
---------------------|---------------|--------------------------------|---------------
background-color | color formats | the general background color | n/a
css-class           | string   | class name, added to the root HTML element created | n/a
css-class           | string   | class name, added to the body tag in the generated HTML | n/a
id           | string   | id, added to the body tag in the generated HTML | n/a
width | px | email's width | 600px

0 packages/mjml-core/src/helpers/preview.js → packages/mjml-body/src/helpers/preview.js
View file
Open in desktop
File renamed without changes.
28 changes: 19 additions & 9 deletions packages/mjml-body/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
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 = {
Expand All @@ -21,25 +23,33 @@ export default class MjBody extends BodyComponent {

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

render() {
const { setBackgroundColor } = this.context
setBackgroundColor(this.getAttribute('background-color'))
const { preview, lang } = this.context.getGlobalDatas()

return `
<div
${this.htmlAttributes({
class: this.getAttribute('css-class'),
<body ${this.htmlAttributes({
id: this.getAttribute('id'),
class: this.getAttribute('css-class'),
style: 'body',
})}>
${buildPreview(preview)}
<div ${this.htmlAttributes({
lang,
style: 'div',
})}
>
${this.renderChildren()}
</div>
})}>
${this.renderChildren()}
</div>
</body>
`
}
}
10 changes: 1 addition & 9 deletions packages/mjml-core/src/helpers/skeleton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,16 @@
import { map, reduce, negate, isNil, isFunction } from 'lodash'
import buildPreview from './preview'
import { buildFontsTags } from './fonts'
import buildMediaQueriesTags from './mediaQueries'

export default function skeleton(options) {
const {
backgroundColor = '',
breakpoint = '480px',
content = '',
fonts = {},
mediaQueries = {},
headStyle = [],
componentsHeadStyle = {},
headRaw = [],
preview,
title = '',
style = [],
forceOWADesktop,
Expand Down Expand Up @@ -76,12 +73,7 @@ export default function skeleton(options) {
</style>
${headRaw.filter(negate(isNil)).join('\n')}
</head>
<body style="word-spacing:normal;${
backgroundColor ? `background-color:${backgroundColor};` : ''
}">
${buildPreview(preview)}
${content}
</body>
${content}
</html>
`
}
5 changes: 1 addition & 4 deletions packages/mjml-core/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,6 @@ export default function mjml2html(mjml, options = {}) {
mjml = handleMjml3(mjml, { noMigrateWarn })

const globalDatas = {
backgroundColor: '',
breakpoint: '480px',
classes: {},
classesDefault: {},
Expand Down Expand Up @@ -278,9 +277,7 @@ export default function mjml2html(mjml, options = {}) {
addComponentHeadSyle(headStyle) {
globalDatas.componentsHeadStyle.push(headStyle)
},
setBackgroundColor: (color) => {
globalDatas.backgroundColor = color
},
getGlobalDatas: () => globalDatas,
processing: (node, context) => processing(node, context, applyAttributes),
}

Expand Down