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

…rapping div
mjmlio · Jan 13, 2022 · 1245156 · 1245156
1 parent 0f4c641
commit 1245156
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 31 deletions.
diff --git a/packages/mjml-body/src/index.js b/packages/mjml-body/src/index.js
@@ -1,4 +1,5 @@
 import { BodyComponent } from 'mjml-core'
+import buildPreview from './helpers/preview'
 
 export default class MjBody extends BodyComponent {
   static componentName = 'mj-body'
@@ -21,25 +22,32 @@ 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({
+        class: this.getAttribute('css-class'),
+        style: 'body',
+      })}>
+        ${buildPreview(preview)}
+        <div ${this.htmlAttributes({
+          lang,
           style: 'div',
-        })}
-      >
-        ${this.renderChildren()}
-      </div>
+        })}>
+          ${this.renderChildren()}
+        </div>
+      </body>
     `
   }
 }
diff --git a/packages/mjml-core/src/createComponent.js b/packages/mjml-core/src/createComponent.js
@@ -54,6 +54,7 @@ class Component {
       context = {},
       props = {},
       globalAttributes = {},
+      globalDatas = {},
     } = initialDatas
 
     this.props = {

diff --git a/packages/mjml-core/src/helpers/preview.js b/packages/mjml-core/src/helpers/preview.js
diff --git a/packages/mjml-core/src/helpers/skeleton.js b/packages/mjml-core/src/helpers/skeleton.js
@@ -5,7 +5,6 @@ import buildMediaQueriesTags from './mediaQueries'
 
 export default function skeleton(options) {
   const {
-    backgroundColor = '',
     breakpoint = '480px',
     content = '',
     fonts = {},
@@ -76,12 +75,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>
   `
 }
diff --git a/packages/mjml-core/src/index.js b/packages/mjml-core/src/index.js
@@ -138,7 +138,6 @@ export default function mjml2html(mjml, options = {}) {
   mjml = handleMjml3(mjml, { noMigrateWarn })
 
   const globalDatas = {
-    backgroundColor: '',
     breakpoint: '480px',
     classes: {},
     classesDefault: {},
@@ -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),
   }