Mjml: HTML in Custom MJML Component

[dbenoni]

Describe the bug
The parser doesn't seem to render HTML when used inside of a MJML component, even though that HTML is within a <mj-text> tag.

To Reproduce
Steps to reproduce the behavior:

1. I duplicated the /components/MjBasicComponent.js from the Boilerplate
2. I successfully edited the color and text just to validate rendering before any further change.
3. I removed the <div> wrapper in the render section (just to have strictly p and span)
4. I replaced render by return this.renderMJML( and its associated closing tag.
5. I wrapped the HTML content within a <mj-text></mj-text> tags
6. I updated .mjmlconfig to add "./lib/MjHtmlDebug.js",
7. See result in https://mjml.io/try-it-live/Hk4T7suuS (I know the rendering won't work on the right, that's just to share the code)
8. Ran gulp build, looked in MJML App, every other component render, but not the content of HTML within custom component.

Expected behavior
I'd expect the HTML content of <mj-text> to render, just like it does when not in a custom component.

MJML environment (please complete the following information):

• OS: MacOS Mojave 10.14.5 (18F132)
• MJML App 2.12.0
  
  
  
  • MJML v^4.4.1
  
  
  • Node 10.16.3
  
  
  • Gulp 3.9.0
  
  

[iRyusa]

cc @kmcb777 can you take a look at this ?

[kmcb777]

That was a tricky one, actually the import of mj-core in the component cause the component to be rendered by this instance of mj-core. Here it will be rendered by the mj-core in gulp-mjml node_modules. Mj-core alone doesn't know about mj-text, to register base components we need to call
import 'mjml'
before the
import { BodyComponent } from 'mjml-core' at the top of the file.
I leave this open until we add this info in the doc and the boilerplate

[dbenoni]

Awesome, that works! Thanks 🎉

[iRyusa]

Should we move this in the boilerplate repo instead ?