Convert MJML to Grapesjs JSON data on server side

[jay-softsages]

Hi,
I love the editor!

I have MJML markup and I need to convert them to GrapesJs JSON { styles : [], assets : [], pages : []}
I was using the Unlayer Editor before but now I need to change all the email templates to be supported by GrapesJs.
So I manually converted the Unlayer Json to MJML and now as GrapesJs is a client-side module I need help so that I can run a JS script in the server to change all the Unlayer stored templates to GrapesJs JSON.

My plan -
Unlayer JSON -> MJML -> GrapesJs JSON

If I copy the MJML and paste it into the Import MJML popup of the editor then I get the output and can also get the JSON but I wonder if this is possible in the backend so that I don't have to manually copy and paste the MJML and save hundreds of templates.

I also saw this #3672 which is kind of similar to running GrapesJs on the server side.
I am stuck at the last step to convert MJML to GrapesJs JSON so please help if anybody has already worked with a similar task.

[artf]

The main issue with the headless option is that it's still relies on DOM API for parsing that means you could init the editor with the MJML plugin but you would need something like jsdom in order to work.

Here a quick example you can try directly on npm.runkit.com

require("jsdom");
require("global-jsdom/register");
const grapesjs = require("grapesjs");
const grapesjsMjml = require("grapesjs-mjml").default;

const editor = grapesjs.init({ headless: true, plugins: [grapesjsMjml]});

editor.setComponents(`<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image width="100px" src="/assets/img/logo-small.png"></mj-image>
        <mj-divider border-color="#F45E43"></mj-divider>
        <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>`);

console.log('Project data', editor.getProjectData());

[jay-softsages]

Thanks a lot !!!
That works perfectly.

Although, if I am importing MJML manually in the modal and checking in the local storage for JSON then it is also storing all the styles.

For Eg -
<mjml> <mj-body width="600px" background-color="#f0f0f0"> <mj-section background-color="#ffffff" full-width padding="0px 10px"> <mj-column> <mj-image src="https://a.mailmunch.co/user_data/landing_pages/1501102431634-yourlogo_11.png" width="257" padding="20px" align="center" alt="Image"></mj-image> </mj-column> </mj-section> <mj-section background-color="#ffffff" full-width padding="0px 10px 1px"> <mj-column> <mj-text padding="10px 20px" align="center" line-height="120%" color="#000"> <p style="font-size: 14px; line-height: 120%;"><span style="font-family: 'times new roman', times; font-size: 72px; line-height: 86.4px; color: #3e3e3e;">YOU'RE ON </span></p> <p style="font-size: 14px; line-height: 120%;"><span style="font-family: 'times new roman', times; font-size: 72px; line-height: 86.4px; color: #3e3e3e;">OUR LIST!</span></p> </mj-text> </mj-column> </mj-section> <mj-section background-color="#ffffff" full-width padding="0px"> <mj-column> <mj-text padding="10px 20px 20px" align="center" line-height="150%" color="#3d3d3d"> <p style="font-size: 14px; line-height: 150%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </mj-text> <mj-divider width="100%" align="center" padding="0px 10px" border-color="#CCC" border-style="solid" border-width="1px"></mj-divider> <mj-text padding="15px 20px" align="center" line-height="120%" color="#3d3d3d"> <p style="font-size: 14px; line-height: 120%;"><span style="font-family: 'times new roman', times; font-size: 30px; line-height: 36px;">WHAT DO YOU WANT TO DO NEXT?</span></p> </mj-text> <mj-divider width="100%" align="center" padding="0px 10px" border-color="#CCC" border-style="solid" border-width="1px"></mj-divider> </mj-column> </mj-section> <mj-section background-color="#ffffff" full-width padding="10px"> <mj-column> <mj-text padding="10px 20px" align="center" line-height="120%" color="#3d3d3d"> <p style="font-size: 14px; line-height: 120%;"><span style="font-size: 16px; line-height: 19.2px;">View our offers</span></p> </mj-text> <mj-image src="https://a.mailmunch.co/user_data/landing_pages/1501105749992-sale_03.png" width="184" padding="10px" align="center" alt="Image"></mj-image> </mj-column> <mj-column> <mj-text padding="10px 20px" align="center" line-height="120%" color="#3d3d3d"> <p style="font-size: 14px; line-height: 120%;"><span style="font-size: 16px; line-height: 19.2px;">Checkout our collection</span></p> </mj-text> <mj-image src="https://a.mailmunch.co/user_data/landing_pages/1501105736804-coll_03.png" width="184" padding="10px" align="center" alt="Image"></mj-image> </mj-column> </mj-section> <mj-section background-color="#ffffff" full-width padding="10px"> <mj-column> <mj-text padding="10px 20px" align="center" line-height="120%" color="#3d3d3d"> <p style="font-size: 14px; line-height: 120%;"><span style="font-size: 16px; line-height: 19.2px;">Like us on facebook</span></p> </mj-text> <mj-image src="https://a.mailmunch.co/user_data/landing_pages/1501105895064-likeus_03.png" width="184" padding="10px" align="center" alt="Image"></mj-image> </mj-column> <mj-column> <mj-text padding="10px 20px" align="center" line-height="120%" color="#3d3d3d"> <p style="font-size: 14px; line-height: 120%;"><span style="font-size: 16px; line-height: 19.2px;">Try our gift vouchers</span></p> </mj-text> <mj-image src="https://a.mailmunch.co/user_data/landing_pages/1501106358960-giftv_03.png" width="184" padding="10px" align="center" alt="Image"></mj-image> </mj-column> </mj-section> <mj-section background-color="#ffffff" full-width padding="10px 10px 5px"> <mj-column> <mj-divider width="100%" align="center" padding="0px 10px" border-color="#CCC" border-style="solid" border-width="1px"></mj-divider> <mj-text padding="15px 20px" align="center" line-height="120%" color="#000"> <p style="font-size: 14px; line-height: 120%;"><span style="font-size: 24px; line-height: 28.8px; font-family: 'times new roman', times;">DON'T JUST SHOP - GET REWARDED!</span></p> </mj-text> <mj-divider width="100%" align="center" padding="0px 10px" border-color="#CCC" border-style="solid" border-width="1px"></mj-divider> </mj-column> </mj-section> <mj-section background-color="#ffffff" full-width padding="5px 10px"> <mj-column> <mj-text padding="10px 20px" align="center" line-height="150%" color="#000"> <p style="font-size: 14px; line-height: 150%;">Learn more about our loyalty plan and earn $30 toward your first purchase when you apply for our Special Card.</p> </mj-text> </mj-column> </mj-section> <mj-section background-color="#ffffff" full-width padding="0px"> <mj-column> <mj-button padding="10px 30px" align="center" line-height="150%" color="#FFF" background-color="#707070" border-radius="0px"><span style="font-family: 'times new roman', times; font-size: 24px; line-height: 36px;">APPLY NOW</span></mj-button> </mj-column> </mj-section> <mj-section background-color="#f0f0f0" full-width padding="30px"> <mj-column> <mj-text padding="20px" align="left" line-height="120%" color="#000"> <div style="font-family: arial, helvetica, sans-serif;"><span style="font-size: 12px; color: #999999; line-height: 14.4px;">You received this email because you signed up for My Company Inc.</span></div> <div style="font-family: arial, helvetica, sans-serif;">&nbsp;</div> <div style="font-family: arial, helvetica, sans-serif;"><span style="font-size: 12px; color: #999999; line-height: 14.4px;">Unsubscribe</span></div> </mj-text> </mj-column> </mj-section> </mj-body> </mjml>

If I convert the above MJML using your code then I get assets and style as empty arrays but if I import manually on the https://grapesjs.com/demo-mjml.html then in local storage I can see that assets and styles array are not empty. I wonder if that can be possible too??