Feat: add customComponent property to plugin options

GrapesJS · Nov 25, 2023 · ebac70c · ebac70c
1 parent abe0b22
commit ebac70c
Show file tree

Hide file tree

Showing 22 changed files with 101 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -41,6 +41,7 @@ Supported MJML components (using default mjml-browser parser):
 |`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'`|
@@ -182,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

diff --git a/src/components/Body.ts b/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: {

diff --git a/src/components/Button.ts b/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',

diff --git a/src/components/Column.ts b/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, {

diff --git a/src/components/Divider.ts b/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: {

diff --git a/src/components/Font.ts b/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: {

diff --git a/src/components/Group.ts b/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: {

diff --git a/src/components/Hero.ts b/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: {

diff --git a/src/components/Image.ts b/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',

diff --git a/src/components/NavBar.ts b/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: {

diff --git a/src/components/NavBarLink.ts b/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',

diff --git a/src/components/Raw.ts b/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: {

diff --git a/src/components/Section.ts b/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),
 

diff --git a/src/components/Social.ts b/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),
 

diff --git a/src/components/SocialElement.ts b/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),
 

diff --git a/src/components/Spacer.ts b/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),
 

diff --git a/src/components/Style.ts b/src/components/Style.ts
@@ -1,11 +1,12 @@
 // Specs: https://documentation.mjml.io/#mj-style
 import type { Editor } from 'grapesjs';
+import { ComponentPluginOptions } from '.';
 import { componentsToQuery, isComponentType, mjmlConvert } from './utils';
 import { type as typeHead } from './Head';
 
 export const type = 'mj-style';
 
-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),
 

diff --git a/src/components/Text.ts b/src/components/Text.ts
@@ -1,12 +1,13 @@
 // Specs: https://documentation.mjml.io/#mjml-text
 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-text';
 
-export default (editor: Editor, { coreMjmlModel, coreMjmlView }: any) => {
+export default (editor: Editor, { coreMjmlModel, coreMjmlView }: ComponentPluginOptions) => {
   editor.Components.addType(type, {
     extend: 'text',
     extendFnView: ['onActive'],

diff --git a/src/components/Wrapper.ts b/src/components/Wrapper.ts
@@ -1,12 +1,13 @@
 // Specs: https://documentation.mjml.io/#mjml-wrapper
 import type { Editor } from 'grapesjs';
+import { ComponentPluginOptions } from '.';
 import { componentsToQuery, getName, isComponentType } from './utils';
 import { type as typeBody } from './Body';
 import { type as typeSection } from './Section';
 
 export const type = 'mj-wrapper';
 
-export default (editor: Editor, { coreMjmlModel, coreMjmlView }: any) => {
+export default (editor: Editor, { coreMjmlModel, coreMjmlView }: ComponentPluginOptions) => {
   editor.Components.addType(type, {
     isComponent: isComponentType(type),
 

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1,5 +1,5 @@
-import type { Editor } from 'grapesjs';
-import { mjmlConvert, debounce } from './utils';
+import type { Editor, PluginOptions } from 'grapesjs';
+import { mjmlConvert, debounce, componentsToQuery } from './utils';
 import loadMjml from './mjml';
 import loadHead from './Head';
 import loadStyle from './Style';
@@ -22,6 +22,20 @@ import loadHero from './Hero';
 import loadRaw from './Raw';
 import { RequiredPluginOptions } from '..';
 
+export type ComponentPluginOptions = {
+  /**
+   * Core model, which can be extended
+   */
+  coreMjmlModel: any;
+  /**
+   * Core view, which can be extended
+   */
+  coreMjmlView: any;
+  opt: Required<PluginOptions>;
+  sandboxEl: HTMLDivElement;
+  componentsToQuery: typeof componentsToQuery,
+}
+
 export default (editor: Editor, opt: RequiredPluginOptions) => {
   const { Components  } = editor;
   // @ts-ignore
@@ -266,9 +280,8 @@ export default (editor: Editor, opt: RequiredPluginOptions) => {
     }
   } as any;
 
-
   // MJML Internal view (for elements inside mj-columns)
-  const compOpts = { coreMjmlModel, coreMjmlView, opt, sandboxEl };
+  const compOpts = { coreMjmlModel, coreMjmlView, opt, sandboxEl, componentsToQuery};
 
   // Avoid the <body> tag from the default wrapper
   editor.Components.addType('wrapper', {
@@ -303,6 +316,7 @@ export default (editor: Editor, opt: RequiredPluginOptions) => {
     loadNavBarLink,
     loadHero,
     loadRaw,
+    ...opt.customComponents,
   ]
   .forEach(module => module(editor, compOpts));
 };
diff --git a/src/components/mjml.ts b/src/components/mjml.ts
@@ -1,12 +1,13 @@
 // Specs: https://documentation.mjml.io/#mjml
 import type { Editor } from 'grapesjs';
+import { ComponentPluginOptions } from '.';
 import { isComponentType, componentsToQuery } from './utils';
 import { type as typeHead } from './Head';
 import { type as typeBody } from './Body';
 
 export const type = 'mjml';
 
-export default (editor: Editor, { coreMjmlModel, coreMjmlView }: any) => {
+export default (editor: Editor, { coreMjmlModel, coreMjmlView }: ComponentPluginOptions) => {
   editor.Components.addType(type, {
     isComponent: isComponentType(type),
     model: {