Enable option to use custom mjml parser instead of default one

README.md

@@ -11,7 +11,7 @@ This plugin enables the usage of [MJML](https://mjml.io/) components inside the
 <p align="center"><img src="http://grapesjs.com/img/grapesjs-mjml-demo.jpg" alt="GrapesJS" align="center"/></p>
 <br/>
 
-Supported MJML components:
+Supported MJML components (using default mjml-browser parser):
 `mj-mjml`
 `mj-head`
 `mj-body`
@@ -41,10 +41,12 @@ Supported MJML components:
 |`blocks`|Which blocks to add|(all)|
 |`block`|Add custom block options, based on block id.|`(blockId) => ({})`|
 |`codeViewerTheme`|Code viewer theme.|`hopscotch`|
+|`customComponents`|List of components which will be added to default one |`[]` |
 |`fonts`|Custom fonts on exported HTML header [more info](https://github.com/mjmlio/mjml#inside-nodejs)|`{}`|
 |`importPlaceholder`|Placeholder MJML template for the import modal|`''`|
 |`imagePlaceholderSrc`|Image placeholder source|`'https://via.placeholder.com/350x250/78c5d6/fff'`|
 |`i18n`|I18n object containing language [more info](https://grapesjs.com/docs/modules/I18n.html#configuration)|`{}`|
+|`mjmlParser`|Custom [mjml-browser](https://www.npmjs.com/package/mjml-browser) instance. Allows to extend MJML functionality or add custom MJML components |`(input: string \| MJMLJsonObject, opt: MJMLParsingOptions) => MJMLParseResults`|
 |`overwriteExport`|Overwrite default export command|`true`|
 |`preMjml`|String before the MJML in export code|`''`|
 |`postMjml`|String after the MJML in export code|`''`|
@@ -181,6 +183,39 @@ editor.on('load', () => {
 });
 ```
 
+### Using Independent mjml-browser Build
+
+In case, you have your own version of MJML with custom or extended components, it is possible
+to override default [mjml parser](https://github.com/mjmlio/mjml/tree/master/packages/mjml-browser)
+with custom one and create custom grapesJS components.
+
+For further info how to create MJML Component, you can
+[visit components folder](https://github.com/GrapesJS/mjml/tree/master/src/components)
+or you can go to [docs](https://grapesjs.com/docs/modules/Components.html#define-custom-component-type).
+
+```ts
+import 'grapesjs/dist/css/grapes.min.css'
+import grapesJS from 'grapesjs'
+import grapesJSMJML from 'grapesjs-mjml'
+import customMjmlParser from 'custom-mjml-parser';
+
+import customImage from 'custom/components/path'
+
+grapesJS.init({
+   fromElement: true,
+   container: '#gjs',
+   plugins: [grapesJSMJML],
+   pluginsOpts: {
+      [grapesJSMJML]: {
+        mjmlParser: customMjmlParser,
+        customComponents: [
+          customImage,
+        ]
+      }
+   },
+});
+```
+
 ## Development
 
 Clone the repository

package.json

@@ -28,6 +28,7 @@
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "dependencies": {
+    "@types/mjml": "^4.7.4",
     "mjml-browser": "^4.13.0"
   },
   "babel": {

src/commands/index.ts

@@ -22,7 +22,7 @@ export default (editor: Editor, opts: RequiredPluginOptions) => {
 
   Commands.add(cmdGetMjmlToHtml, (ed, _, opt) => {
       const mjml = Commands.run(cmdGetMjml);
-      return mjmlConvert(mjml, opts.fonts, opt);
+      return mjmlConvert(opts.mjmlParser, mjml, opts.fonts, opt);
   });
 
   openExportMjml(editor, opts, cmdOpenExport);

src/components/Body.ts

@@ -1,5 +1,6 @@
 // Specs: https://documentation.mjml.io/#mj-body
 import type { Editor } from 'grapesjs';
+import { ComponentPluginOptions } from '.';
 import { type as typeHero } from './Hero';
 import { type as typeRaw } from './Raw';
 import { type as typeSection } from './Section';
@@ -8,7 +9,7 @@ import { componentsToQuery, getName, isComponentType } from './utils';
 
 export const type = 'mj-body';
 
-export default (editor: Editor, { coreMjmlModel, coreMjmlView }: any) => {
+export default (editor: Editor, { coreMjmlModel, coreMjmlView }: ComponentPluginOptions) => {
   editor.Components.addType(type, {
     isComponent: isComponentType(type),
     model: {

src/components/Button.ts

@@ -1,12 +1,13 @@
 // Specs: https://documentation.mjml.io/#mj-button
 import type { Editor } from 'grapesjs';
+import { ComponentPluginOptions } from '.';
 import { componentsToQuery, getName, isComponentType } from './utils';
 import { type as typeColumn } from './Column';
 import { type as typeHero } from './Hero';
 
 export const type = 'mj-button';
 
-export default (editor:  Editor, { coreMjmlModel, coreMjmlView }: any) => {
+export default (editor:  Editor, { coreMjmlModel, coreMjmlView }: ComponentPluginOptions) => {
   editor.Components.addType(type, {
     isComponent: isComponentType(type),
     extend: 'link',

src/components/Column.ts

@@ -1,11 +1,13 @@
 // Specs: https://documentation.mjml.io/#mj-column
 import type { Editor } from 'grapesjs';
+import { ComponentPluginOptions } from '.';
 import { componentsToQuery, getName, isComponentType, mjmlConvert } from './utils';
 import { type as typeSection } from './Section';
 
+
 export const type = 'mj-column';
 
-export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }: any) => {
+export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }: ComponentPluginOptions) => {
   const clmPadd = opt.columnsPadding;
 
   editor.Components.addType(type, {
@@ -37,7 +39,7 @@ export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }:
       getTemplateFromMjml() {
         const mjmlTmpl = this.getMjmlTemplate();
         const innerMjml = this.getInnerMjmlTemplate();
-        const htmlOutput = mjmlConvert(`${mjmlTmpl.start}
+        const htmlOutput = mjmlConvert(opt.mjmlParser, `${mjmlTmpl.start}
           ${innerMjml.start}${innerMjml.end}${mjmlTmpl.end}`, opt.fonts);
         const html = htmlOutput.html;
 

src/components/Divider.ts

@@ -1,12 +1,13 @@
 // Specs: https://documentation.mjml.io/#mj-divider
 import type { Editor } from 'grapesjs';
+import { ComponentPluginOptions } from '.';
 import { componentsToQuery, getName, isComponentType } from './utils';
 import { type as typeColumn } from './Column';
 import { type as typeHero } from './Hero';
 
 export const type = 'mj-divider';
 
-export default (editor: Editor, { coreMjmlModel, coreMjmlView }: any) => {
+export default (editor: Editor, { coreMjmlModel, coreMjmlView }: ComponentPluginOptions) => {
   editor.Components.addType(type, {
     isComponent: isComponentType(type),
     model: {

src/components/Font.ts

@@ -1,11 +1,12 @@
 // Specs: https://documentation.mjml.io/#mj-font
 import type { Editor } from 'grapesjs';
+import { ComponentPluginOptions } from '.';
 import { componentsToQuery, isComponentType, mjmlConvert } from './utils';
 import { type as typeHead } from './Head';
 
 export const type = 'mj-font';
 
-export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }: any) => {
+export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }: ComponentPluginOptions) => {
   editor.Components.addType(type, {
     isComponent: isComponentType(type),
     model: {
@@ -40,7 +41,7 @@ export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }:
       getTemplateFromMjml() {
         let mjmlTmpl = this.getMjmlTemplate();
         let innerMjml = this.getInnerMjmlTemplate();
-        const htmlOutput = mjmlConvert(`${mjmlTmpl.start}
+        const htmlOutput = mjmlConvert(opt.mjmlParser, `${mjmlTmpl.start}
           ${innerMjml.start}${innerMjml.end}${mjmlTmpl.end}`, opt.fonts);
         let html = htmlOutput.html;
         let start = html.indexOf('<head>') + 6;

src/components/Group.ts

@@ -1,12 +1,13 @@
 // Specs: https://documentation.mjml.io/#mj-group
 import type { Editor } from 'grapesjs';
+import { ComponentPluginOptions } from '.';
 import { componentsToQuery, getName, isComponentType } from './utils';
 import { type as typeSection } from './Section';
 import { type as typeColumn } from './Column';
 
 export const type = 'mj-group';
 
-export default (editor: Editor, { coreMjmlModel, coreMjmlView }: any) => {
+export default (editor: Editor, { coreMjmlModel, coreMjmlView }: ComponentPluginOptions) => {
   editor.Components.addType(type, {
     isComponent: isComponentType(type),
     model: {

src/components/Hero.ts

@@ -1,5 +1,6 @@
 // Specs: https://documentation.mjml.io/#mj-hero
 import type { Editor } from 'grapesjs';
+import { ComponentPluginOptions } from '.';
 import { componentsToQuery, getName, isComponentType } from './utils';
 import { type as typeBody } from './Body';
 import { type as typeText } from './Text';
@@ -12,7 +13,7 @@ import { type as typeSpacer } from './Spacer';
 
 export const type = 'mj-hero';
 
-export default (editor: Editor, { coreMjmlModel, coreMjmlView }: any) => {
+export default (editor: Editor, { coreMjmlModel, coreMjmlView }: ComponentPluginOptions) => {
   editor.Components.addType(type, {
     isComponent: isComponentType(type),
     model: {

src/components/Image.ts

@@ -1,13 +1,14 @@
 // Specs: https://documentation.mjml.io/#mj-image
 import type { Editor } from 'grapesjs';
+import { ComponentPluginOptions } from '.';
 import { componentsToQuery, getName, isComponentType } from './utils';
 import { type as typeSection } from './Section';
 import { type as typeColumn } from './Column';
 import { type as typeHero } from './Hero';
 
 export const type = 'mj-image';
 
-export default (editor: Editor, { coreMjmlModel, coreMjmlView }: any) => {
+export default (editor: Editor, { coreMjmlModel, coreMjmlView }: ComponentPluginOptions) => {
   editor.Components.addType(type, {
     isComponent: isComponentType(type),
     extend: 'image',

src/components/NavBar.ts

@@ -1,13 +1,14 @@
 // Specs https://documentation.mjml.io/#mj-navbar
 import type { Editor } from 'grapesjs';
+import { ComponentPluginOptions } from '.';
 import { componentsToQuery, getName, isComponentType, mjmlConvert } from './utils';
 import { type as typeColumn } from './Column';
 import { type as typeHero } from './Hero';
 import { type as typeNavBarLink } from './NavBarLink';
 
 export const type = 'mj-navbar';
 
-export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }: any) => {
+export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }: ComponentPluginOptions) => {
   editor.Components.addType(type, {
     isComponent: isComponentType(type),
     model: {
@@ -51,7 +52,7 @@ export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }:
       getTemplateFromMjml() {
         const mjmlTmpl = this.getMjmlTemplate();
         const innerMjml = this.getInnerMjmlTemplate();
-        const htmlOutput = mjmlConvert(`${mjmlTmpl.start}
+        const htmlOutput = mjmlConvert(opt.mjmlParser, `${mjmlTmpl.start}
           ${innerMjml.start}${innerMjml.end}${mjmlTmpl.end}`, opt.fonts);
         const html = htmlOutput.html;
 

src/components/NavBarLink.ts

@@ -1,11 +1,12 @@
 // Specs: https://documentation.mjml.io/#mj-navbar-link
 import type { Editor } from 'grapesjs';
+import { ComponentPluginOptions } from '.';
 import { componentsToQuery, getName, isComponentType } from './utils';
 import { type as typeNavBar } from './NavBar';
 
 export const type = 'mj-navbar-link';
 
-export default (editor: Editor, { coreMjmlModel, coreMjmlView }: any) => {
+export default (editor: Editor, { coreMjmlModel, coreMjmlView }: ComponentPluginOptions) => {
   editor.Components.addType(type, {
     isComponent: isComponentType(type),
     extend: 'link',

src/components/Raw.ts

@@ -1,12 +1,13 @@
 // Specs: https://documentation.mjml.io/#mj-raw
 import type { Editor } from 'grapesjs';
+import { ComponentPluginOptions } from '.';
 import { componentsToQuery, getName, isComponentType } from './utils';
 import { type as typeBody } from './Body';
 import { type as typeHead } from './Head';
 
 export const type = 'mj-raw';
 
-export default (editor: Editor, { coreMjmlModel, coreMjmlView }: any) => {
+export default (editor: Editor, { coreMjmlModel, coreMjmlView }: ComponentPluginOptions) => {
   editor.Components.addType(type, {
     isComponent: isComponentType(type),
     model: {

src/components/Section.ts

@@ -1,5 +1,6 @@
 // Specs: https://documentation.mjml.io/#mj-section
 import type { Editor } from 'grapesjs';
+import { ComponentPluginOptions } from '.';
 import { componentsToQuery, getName, isComponentType } from './utils';
 import { type as typeBody } from './Body';
 import { type as typeWrapper } from './Wrapper';
@@ -8,7 +9,7 @@ import { type as typeGroup } from './Group';
 
 export const type = 'mj-section';
 
-export default (editor: Editor, { coreMjmlModel, coreMjmlView }: any) => {
+export default (editor: Editor, { coreMjmlModel, coreMjmlView }: ComponentPluginOptions) => {
   editor.Components.addType(type, {
     isComponent: isComponentType(type),
 

src/components/Social.ts

@@ -1,13 +1,14 @@
 // Specs: https://documentation.mjml.io/#mjml-social
 import type { Editor } from 'grapesjs';
+import { ComponentPluginOptions } from '.';
 import { componentsToQuery, getName, isComponentType } from './utils';
 import { type as typeColumn } from './Column';
 import { type as typeHero } from './Hero';
 import { type as typeSocialElement } from './SocialElement';
 
 export const type = 'mj-social';
 
-export default (editor: Editor, { coreMjmlModel, coreMjmlView }: any) => {
+export default (editor: Editor, { coreMjmlModel, coreMjmlView }: ComponentPluginOptions) => {
   editor.Components.addType(type, {
     isComponent: isComponentType(type),
 

src/components/SocialElement.ts

@@ -1,11 +1,12 @@
 // Specs: https://documentation.mjml.io/#mjml-social
 import type { Editor } from 'grapesjs';
+import { ComponentPluginOptions } from '.';
 import { componentsToQuery, getName, isComponentType } from './utils';
 import { type as typeSocial } from './Social';
 
 export const type = 'mj-social-element';
 
-export default (editor: Editor, { coreMjmlModel, coreMjmlView }: any) => {
+export default (editor: Editor, { coreMjmlModel, coreMjmlView }: ComponentPluginOptions) => {
   editor.Components.addType(type, {
     isComponent: isComponentType(type),
 

src/components/Spacer.ts

@@ -1,12 +1,13 @@
 // Specs: https://documentation.mjml.io/#mjml-spacer
 import type { Editor } from 'grapesjs';
+import { ComponentPluginOptions } from '.';
 import { componentsToQuery, getName, isComponentType } from './utils';
 import { type as typeColumn } from './Column';
 import { type as typeHero } from './Hero';
 
 export const type = 'mj-spacer';
 
-export default (editor: Editor, { coreMjmlModel, coreMjmlView }: any) => {
+export default (editor: Editor, { coreMjmlModel, coreMjmlView }: ComponentPluginOptions) => {
   editor.Components.addType(type, {
     isComponent: isComponentType(type),