MJML Componenets integration in GrapesJS
npm install grapesjs-mjml> Requires GrapesJS v0.15.9 or higher
This plugin enables the usage of MJML components inside the GrapesJS environment. MJML components are rendered in real-time using the official v4 compiler (+ some mocks to make it run in the browser), therefore the result is, almost, the same as using the MJML Live Editor.
Supported MJML components (using default mjml-browser parser):mj-mjmlmj-headmj-bodymj-wrappermj-groupmj-sectionmj-columnmj-textmj-imagemj-buttonmj-socialmj-social-elementmj-dividermj-spacermj-stylemj-fontmj-heromj-navbarmj-navbar-linkmj-raw
|Option|Description|Default|
|-|-|-
|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 |[] |
|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|{}|
|mjmlParser|Custom 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|''|
|resetBlocks|Clean all previous blocks if true|true|
|resetDevices|Clean all previous devices and set a new one for mobile|true|
|resetStyleManager|Reset the Style Manager and add new properties for MJML|true|
|resetDevices|Clean all previous devices and set a new one for mobile|true|
|hideSelector|Hide the default selector manager|true|
|useXmlParser|Experimental: use XML parser instead of HTML. This should allow importing void MJML elements (without closing tags) like false|
|columnsPadding|Column padding (this way it's easier to select columns)|10px 0|
|useCustomTheme|Load custom preset theme|true|
* npm i grapesjs-mjml
``html
`
#### Or using ESM imports:
`js
import 'grapesjs/dist/css/grapes.min.css'
import grapesJS from 'grapesjs'
import grapesJSMJML from 'grapesjs-mjml'
grapesJS.init({
fromElement: true,
container: '#gjs',
plugins: [grapesJSMJML],
pluginsOpts: {
[grapesJSMJML]: {/ ...options /}
},
});
`
#### i18n usage:
`js
import 'grapesjs/dist/css/grapes.min.css'
import grapesJS from 'grapesjs'
import nl from 'grapesjs/locale/nl'
import grapesJSMJML from 'grapesjs-mjml'
import mjmlNL from 'grapesjs-mjml/locale/nl'
grapesJS.init({
fromElement: true,
container: '#gjs',
i18n: {
// locale: 'en', // default locale
// detectLocale: true, // by default, the editor will detect the language
// localeFallback: 'en', // default fallback
messages: { nl: nl },
},
plugins: [grapesJSMJML],
pluginsOpts: {
[grapesJSMJML]: {
// Optional options
i18n: { nl: mjmlNL }
}
},
});
`
In case, you have your own version of MJML with custom or extended components, it is possible
to override default mjml parser
with custom one and create custom grapesJS components.
For further info how to create MJML Component, you can
visit components folder
or you can go to docs.
`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,
]
}
},
});
`
Clone the repository
`sh`
$ git clone https://github.com/GrapesJS/mjml.git
$ cd mjml
Install it
`sh`
$ npm i
Start the dev server
`sh`
$ npm start
1) Run npm run v:patch` to bump the version in package.json and create a git tag
2) Push the commit + new tag
3) Go to github and draft a new release
4) Select the new tag and add some release notes
5) Hit publish, the release will automatically publish to npm
BSD 3-Clause