grapesjs / mjml

Newsletter Builder with MJML components in GrapesJS

GrapesJS

GrapesJS is a free and open source Web Builder Framework which helps building HTML templates, faster and easily, to be delivered in sites, newsletters or mobile apps. Mainly, GrapesJS was designed to be used inside a CMS to speed up the creation of dynamic templates. To better understand this concept check the image below

Generally any 'template system', that you'd find in various applications like CMS, is composed by the structure (HTML), style (CSS) and variables, which are then replaced with other templates and contents on server-side and rendered on client.

This demos show examples of what is possible to achieve:
Webpage Demo - http://grapesjs.com/demo.html
Newsletter Demo - http://grapesjs.com/demo-newsletter-editor.html

Table of contents

• Features
• Download
• Usage
• Development
• Documentation
• API
• Testing
• Plugins
• Support
• Changelog
• Contributing
• License

Features

Blocks	Style Manager	Layer Manager

Code Viewer	Asset Manager

• Local and remote storage

• Default built-in commands (basically for creating and managing different components)

Download

• CDNs
  • UNPKG (resolves to the latest version)
    • https://unpkg.com/grapesjs
    • https://unpkg.com/grapesjs/dist/css/grapes.min.css
  • CDNJS (replace X.X.X with the current version)
    • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/grapes.min.js
    • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/css/grapes.min.css
• NPM
  • npm i grapesjs
• GIT
  • git clone https://github.com/GrapesJS/grapesjs.git

For the development purpose you should follow instructions below.

Usage

<link rel="stylesheet" href="path/to/grapes.min.css">
<script src="path/to/grapes.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      components: '<div class="txt-red">Hello world!</div>',
      style: '.txt-red{color: red}',
  });
</script>

For a more practical example I'd suggest looking up the code inside this demo: http://grapesjs.com/demo.html

Development

Clone the repository and install all the necessary dependencies (yarn is highly recommended)

$ git clone https://github.com/GrapesJS/grapesjs.git
$ cd grapesjs
$ yarn

Start the dev server

$ yarn start

Once the development server is started you should be able to reach the demo page (eg. http://localhost:8080)

Documentation

Check the getting started guide here: Documentation

API

API References could be found here: API-Reference

Testing

$ yarn test

Plugins

Official Plugins | Community Plugins

Wrappers

• @grapesjs/react - GrapesJS wrapper for React that allows you to build custom and declarative UI for your editor.

Extensions

• grapesjs-plugin-export - Export GrapesJS templates in a zip archive
• grapesjs-plugin-filestack - Add Filestack uploader in Asset Manager
• grapesjs-plugin-ckeditor - Replaces the built-in RTE with CKEditor
• grapesjs-tui-image-editor - GrapesJS TOAST UI Image Editor
• grapesjs-blocks-basic - Basic set of blocks
• grapesjs-plugin-forms - Set of form components and blocks
• grapesjs-navbar - Simple navbar component
• grapesjs-component-countdown - Simple countdown component
• grapesjs-style-gradient - Add gradient type input to the Style Manager
• grapesjs-style-filter - Add filter type input to the Style Manager
• grapesjs-style-bg - Full-stack background style property type, with the possibility to add images, colors, and gradients
• grapesjs-blocks-flexbox - Add the flexbox block
• grapesjs-lory-slider - Slider component by using lory
• grapesjs-tabs - Simple tabs component
• grapesjs-tooltip - Simple, CSS only, tooltip component for GrapesJS
• grapesjs-custom-code - Embed custom code
• grapesjs-touch - Enable touch support
• grapesjs-indexeddb - Storage wrapper for IndexedDB
• grapesjs-firestore - Storage wrapper for Cloud Firestore
• grapesjs-parser-postcss - Custom CSS parser for GrapesJS by using PostCSS
• grapesjs-typed - Typed component made by wrapping Typed.js library
• grapesjs-ui-suggest-classes - Enable auto-complete of classes in the SelectorManager UI
• grapesjs-fonts - Custom Fonts plugin, adds a UI to manage fonts in websites
• grapesjs-symbols - Symbols plugin to reuse elements in a website and accross pages
• grapesjs-click - Grab and drop blocks and components with click (no more drag-and-drop)
• grapesjs-float - Anchor a floating element next to another element (selected component, ...)

Presets

• grapesjs-preset-webpage - Webpage Builder
• grapesjs-preset-newsletter - Newsletter Builder
• grapesjs-mjml - Newsletter Builder with MJML components

Find out more about plugins here: Creating plugins

Support

If you like the project and you wish to see it grow, please consider supporting us with a donation of your choice or become a backer/sponsor via Open Collective

Thanks to BrowserStack for providing us browser testing services

License

BSD 3-clause

mjml's Issues

Setting MJ-container color prevents components from being dropped in view

The issue occurs on the demo as well. If you set the container color, it appears like you can't drop any section blocks on the canvas. Content blocks like image and text are working. After further inspection in the mjml code, it's clear the components are being added to the template.

Steps to reproduce

1. Any template works
2. set the container color
3. Add new blocks
4. Check code. The blocks will be there but they will not appear in editor.

Can't import `mj-head`

Try it on the demo, import:

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-text padding="0" font-size="12px" font-family="Verdana" />
      <mj-container padding="0" background-color="white" />
      <mj-class name="foobar" color="red" />
    </mj-attributes>
  </mj-head>
  <mj-body>
   <mj-column>
      <mj-text font-style="italic" font-size="20" color="#626262">
        My Company
      </mj-text>
    </mj-column>
  </mj-body>
</mjml>

Then view code. mj-head is now inside mj-body ?

Also these two errors:

Mjml export button

When i add the plugin export of the normal grapejs in my grapejs mjml that's doesn't work there is a possibility to add the button export.
Cause i won't to make a newsletter with some text like "$var1" and modify the export code to replace the text like '$var1" to a text from a google sheets with google sheets api v4 ,
Is it possible if yes i just want to know how to add the button export in the modal "export mjml", after i think i'm gonna be ready to start the rest of my idea thanks again artf !!

how to export the HTML

Hi Artf,

I seem to be bothering you on all fronts. Sorry.

I want to be able to get the converted mjml (HTML). What command should I use to get this?

If i open the "view code" dialog if gives the error: "Line 22 (mj-body) — Element mj-body doesn't exist or is not registered" . The mjml side all looks fine but nothing renders on the HTML side.

It also throws a js error:
grapes.min.js:2 Uncaught TypeError: Cannot read property 'split' of undefined at Xs (grapes.min.js:2) at Pa.splitLines (grapes.min.js:2) at Pa.<anonymous> (grapes.min.js:2) at Pa.setValue (grapes.min.js:2) at Ho.setValue (grapes.min.js:2) at n.setContent (grapes.min.js:2) at n.run (grapesjs-mjml.min.js:108) at n.updateActive (grapes.min.js:2) at y (grapes.min.js:2) at v (grapes.min.js:2)

Unable to make a layer visible after it has been hidden

When playing around with layers I found that when I hide the Container layer it can't be made visible again.

Steps to reproduce:

1. Navigate to http://grapesjs.com/demo-mjml.html
2. Open Layer Manager
3. Expand "Body"
4. Click on the eye icon to the left next to "Container" - this makes the "Container" hidden
5. Click on the eye icon to the left next to "Container"

Expected result:

In point 5 the "Container" layer becomes visible again

Current result:

In point 5 the "Container" stays hidden

html content in mjml

How to retrieve HTML content in grapes MJML? Is there any method to retrieve html? getHtml() method gives the mjml content. I want to get the html code.

Thanks

Text box that does not appear !

When opens a document with this code
<mj-container> <mj-section> <mj-column> <mj-text>Hello</mj-text> </mj-column> </mj-section> <mj-section> <mj-column> <mj-image src="http://test.png"/> <mj-text>simple text</mj-text> </mj-column> </mj-section> </mj-container>

The text box does not open : <mj-text>simple text</mj-text> ???
But the code is good in the source !

mjml outlook desktop responsive issue

when I added the 2 columns and added image in each column, outlook desktop shows the images vertically instead of side by side. please help me out to resolve the issue. Thanks

Link problem

The link management does not work, when you put a link on text it works randomly and does not update the code mjml;
The problem also exists on demo mjml.
For this to work you must reselect the text with the link and the mjml code has been updated !?

How to destroy grapesjs.init({ }) method ?

while loading my grapes-mjml component second time it gives backbone.undomanager error

Backbone.UndoManager is not a constructor
    at N.d.initUndoManager (grapes.min.js:17)
    at Object.onLoad (grapes.min.js:15)
    at grapes.min.js:17
    at Array.forEach (<anonymous>)
    at N.d.initialize (grapes.min.js:17)
    at N.d.b.Model (grapes.min.js:2)
    at new N.d (grapes.min.js:3)
    at new b (grapes.min.js:17)
    at Object.init (grapes.min.js:17)
    at VueComponent.mounted (Hello.vue?de18:14)

So,
How to destroy grapesjs.init({ }) ??

Attributes being removed on load

I've noticed this issue on both my local installation and on the demo page you have set up.

When adding images from a different source (for example placeholders) the system removes all attributes from all mjml tags.

Investigations show that they are saving correctly, it is at load time.

In the demo app I have set up a single image, changed the value of the src, then added a new item. This has caused the issue. I then removed the older image to show a smaller output. The designer shows a successful render, but below is what I see in gjs-mjml-components and gjs-mjml-html:

gjs-mjml-components:
`[
{
"tagName": "mj-container",
"type": "mj-container",
"removable": false,
"draggable": false,
"droppable": "[data-type=mj-section], [data-type=mj-wrapper]",
"badgable": true,
"stylable": [
"width",
"background-color"
],
"highlightable": true,
"copyable": false,
"resizable": false,
"editable": false,
"layerable": true,
"void": false,
"state": "",
"status": "",
"content": "",
"icon": "",
"style": {
"width": "600px"
},
"attributes": {
"width": "600px"
},
"classes": [

],
"script": "",
"traits": [
  {
    "type": "text",
    "label": "",
    "name": "id",
    "min": "",
    "max": "",
    "value": "",
    "default": "",
    "placeholder": "eg. Text here",
    "changeProp": 0,
    "options": [
      
    ]
  },
  {
    "type": "text",
    "label": "",
    "name": "title",
    "min": "",
    "max": "",
    "value": "",
    "default": "",
    "placeholder": "eg. Text here",
    "changeProp": 0,
    "options": []
  }
],
"custom-name": "Container",
"components": [
  {
    "tagName": "mj-section",
    "type": "mj-section",
    "removable": true,
    "draggable": "[data-type=mj-container]",
    "droppable": "[data-type=mj-column]",
    "badgable": true,
    "stylable": [
      "vertical-align",
      "text-align",
      "padding",
      "padding-top",
      "padding-left",
      "padding-right",
      "padding-bottom",
      "background-color",
      "background-url",
      "background-repeat",
      "background-size",
      "border-radius",
      "border-top-left-radius",
      "border-top-right-radius",
      "border-bottom-left-radius",
      "border-bottom-right-radius",
      "border",
      "border-width",
      "border-style",
      "border-color"
    ],
    "highlightable": true,
    "copyable": true,
    "resizable": false,
    "editable": false,
    "layerable": true,
    "void": false,
    "state": "",
    "status": "",
    "content": "",
    "icon": "",
    "style": {
      "padding-top": "10px",
      "padding-bottom": "10px",
      "vertical-align": "top",
      "text-align": "center"
    },
    "attributes": {
      "padding-top": "10px",
      "padding-bottom": "10px",
      "vertical-align": "top",
      "text-align": "center"
    },
    "classes": [],
    "script": "",
    "traits": [
      {
        "type": "text",
        "label": "",
        "name": "id",
        "min": "",
        "max": "",
        "value": "",
        "default": "",
        "placeholder": "eg. Text here",
        "changeProp": 0,
        "options": []
      },
      {
        "type": "text",
        "label": "",
        "name": "title",
        "min": "",
        "max": "",
        "value": "",
        "default": "",
        "placeholder": "eg. Text here",
        "changeProp": 0,
        "options": []
      }
    ],
    "custom-name": "Section",
    "components": [
      {
        "tagName": "mj-column",
        "type": "mj-column",
        "removable": true,
        "draggable": "[data-type=mj-section]",
        "droppable": true,
        "badgable": true,
        "stylable": [
          "background-color",
          "vertical-align",
          "width",
          "border-radius",
          "border-top-left-radius",
          "border-top-right-radius",
          "border-bottom-left-radius",
          "border-bottom-right-radius",
          "border",
          "border-width",
          "border-style",
          "border-color"
        ],
        "highlightable": true,
        "copyable": true,
        "resizable": false,
        "editable": false,
        "layerable": true,
        "void": false,
        "state": "",
        "status": "",
        "content": "",
        "icon": "",
        "style": {
        },
        "attributes": {
        },
        "classes": [],
        "script": "",
        "traits": [
          {
            "type": "text",
            "label": "",
            "name": "id",
            "min": "",
            "max": "",
            "value": "",
            "default": "",
            "placeholder": "eg. Text here",
            "changeProp": 0,
            "options": [
              
            ]
          },
          {
            "type": "text",
            "label": "",
            "name": "title",
            "min": "",
            "max": "",
            "value": "",
            "default": "",
            "placeholder": "eg. Text here",
            "changeProp": 0,
            "options": []
          }
        ],
        "custom-name": "Column",
        "components": [
          {
            "tagName": "mj-image",
            "type": "mj-image",
            "removable": true,
            "draggable": "[data-type=mj-column]",
            "droppable": 0,
            "badgable": true,
            "stylable": [
              "width",
              "height",
              "padding",
              "padding-top",
              "padding-left",
              "padding-right",
              "padding-bottom",
              "border-radius",
              "border-top-left-radius",
              "border-top-right-radius",
              "border-bottom-left-radius",
              "border-bottom-right-radius",
              "border",
              "border-width",
              "border-style",
              "border-color",
              "container-background-color",
              "align"
            ],
            "highlightable": false,
            "copyable": true,
            "resizable": false,
            "editable": false,
            "layerable": true,
            "void": true,
            "state": "",
            "status": "",
            "content": "",
            "icon": "",
            "style": {
              "src": "http://placehold.it/350x250/78c5d6/fff",
              "padding-top": "10px",
              "padding-bottom": "10px",
              "padding-right": "25px",
              "padding-left": "25px",
              "align": "center"
            },
            "attributes": {
              "src": "http://placehold.it/350x250/78c5d6/fff",
              "padding-top": "10px",
              "padding-bottom": "10px",
              "padding-right": "25px",
              "padding-left": "25px",
              "align": "center"
            },
            "classes": [
              
            ],
            "script": "",
            "traits": [
              {
                "type": "text",
                "label": "",
                "name": "href",
                "min": "",
                "max": "",
                "value": "",
                "default": "",
                "placeholder": "eg. https://google.com",
                "changeProp": 0,
                "options": [
                  
                ]
              },
              {
                "type": "text",
                "label": "",
                "name": "rel",
                "min": "",
                "max": "",
                "value": "",
                "default": "",
                "placeholder": "",
                "changeProp": 0,
                "options": [
                  
                ]
              },
              {
                "type": "text",
                "label": "",
                "name": "alt",
                "min": "",
                "max": "",
                "value": "",
                "default": "",
                "placeholder": "eg. Text here",
                "changeProp": 0,
                "options": [
                  
                ]
              },
              {
                "type": "text",
                "label": "",
                "name": "title",
                "min": "",
                "max": "",
                "value": "",
                "default": "",
                "placeholder": "eg. Text here",
                "changeProp": 0,
                "options": [
                  
                ]
              }
            ],
            "src": "http://placehold.it/350x250/78c5d6/fff",
            "custom-name": "Image",
            "components": [
              
            ]
          }
        ]
      }
    ]
  }
]

}
]`

gjs-mjml-html:
<mj-container><mj-section><mj-column><mj-image/></mj-column></mj-section></mj-container>

fromElement selfClosingTags

Try pasting this code in the page HTML, enable fromElement: true and reset the canvas.

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-social facebook-content="Share" twitter-content="Tweet" google-content="+1" instagram-content="Share" linkedin-content="Share" pinterest-content="Pin it"/>
          <mj-text>Test</mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

The MJML code remains the same but the HTML doesn't include the Text component.

A workaround is to close the mj-social tag like so:

...
          <mj-social facebook-content="Share" twitter-content="Tweet" google-content="+1" instagram-content="Share" linkedin-content="Share" pinterest-content="Pin it"></mj-social>
          <mj-text>Test</mj-text>
...

Then the Text component is visible when resetting the canvas.

style vs 'style-default'

Some more bug reports, if you don't mind...

At least for me, in model: linkModel.extend({ ...coreMjmlModel ... style: works and not 'style-default':
I applied to all those that have style, and then defaults appear in style manager.

Button.js is missing 'padding-top': '10px' in style:

Keep up the good work.

Library in dist folder not up to date

Hi,

I discovered that in your demo, the latest version is used of grapes-mjml.min.js.
The version in the demo is: 0.0.24.
The dist folder is still not updated with this version and its stuck on 0.0.12.
I have no issues when using the latest version, the only problem is that i don't get it minified :/

Could you please update the dist folder with the latest minified version of grapes-mjml.in.js?

Kind regards,

Stephan Hovius

Social Media Icon deletion

Currently, you have to type in what social media platform you want to use. I want to change that trait and either make it a multi-select or offer checkboxes or even a button. I can't find where the input for display is being set.

gjs-preset-mjml missing?

I think a repo needs to exist for the preset, currently only can find it here:

http://grapesjs.com/js/grapesjs-preset-mjml.js

mj-container and mj-section

when I remove the last section in the container, It also removes the container. How should I fix this issue? I always wants the mj-container on load without mj-section. Help needed. Thanks

command-import-mjml preventDefault()

Not really a bug, just a suggestion. If we could preventDefault in the import action (and other similar actions), that would be useful:

btnImp.onclick = (e) => {
    e.preventDefault();
    let code = codeViewer.editor.getValue();
    editor.DomComponents.getWrapper().set('content', '');
    editor.setComponents(code.trim());
    editor.Modal.close();
  };

In some cases (like ours), without it, the form will submit.

Layer Manager Issue- On Loading MJML

Hi

I am facing a weird issue on loading some mjml created by editor.
Basically it was nesting layers inside image and hence those nested elements like Text, social are not appearing on editor.

And I need to fix every time by using layer manager. Please find attached image to get better idea.

Thank you,
Nouman

Merge Tags/Merge fields in grapesjs-mjml

How to add merge tags/fields in grapesjs-mjml?

[BUG] Can't add columns in version 0.0.24

This is also not working the online demo:

When I try to add a column or double column, the editor gives a warning / error message:

"Invalid target position: Target collection not found, Target is not droppable, accepts [undefined], Component not draggable, acceptable by [undefined]"

Kind regards,

Stephan Hovius

mj-image and mj-text in one mj-column

In my application and the demo, components are disappearing from the canvas while still appearing in the code viewer and in any test emails I send. The html has the missing blocks as well. It happens most often when importing code in and when using images and text in the same column.
I used the code below to reproduce the events on the demo. Please check and provide any hints as to where the issue may lie. I am looking at the rendering on the canvas to be the source of the problem.

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-image width="400px" src="http://placehold.it/350x250/78c5d6/fff"/>
          <mj-text>Enter text in this block
          </mj-text>
        </mj-column>
        <mj-column>
          <mj-image width="400px" src="http://placehold.it/350x250/78c5d6/fff"/>
          <mj-text>Enter text in this block
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

mjml css issue

i got below mjml theme using editor.getHtml().

but when i display to my project. it converts in html and send it as an email.

i have attached image.

<mjml>
<mj-body>
<mj-container min-height="100px">
<mj-section>
<mj-column>
<mj-text>Content 1</mj-text>
</mj-column>
<mj-column>
<mj-text>Content 2</mj-text>
</mj-column>
<mj-column>
<mj-text>Content 3</mj-text>
</mj-column>
</mj-section>
</mj-container>
</mjml>
</mj-body>

Mjml import doesn't support mjml-style

When i import some code in the mjml import the ....
is transform into text and note into css

New bug detected : UndoManager for redo et undo don't work for mj-column and mj-section

mjml responsive issue

This code is not responsive on mobile. Text is viewing on left corner and image is in center. but in designing template, it is viewing fine. How should I fix this? Also, on outlook, it looks totally different, not working properly.

Insert text here Insert text here

Adding tables?

This is not really an issue. I am trying to do it myself, but is it possible to get mjml-table support anywhere soon? It's quite confusing because of td and tr. There really is no documentation about creating blocks for grapesjs-mjml and I am quite stuck when it comes to getting to understand all the conversion between html and mjml.

Please, that would be great help. If I make this work myself I will make pull request. :)

MJML Hero component

Can the mjml hero component (mj-hero) be used with grapejs? If so what are the necessary changes? I want to add the mj-hero block in grapesjs. Help needed.

grapesjs-MJML not working on IE11

grapesjs-mjml not working on IE11. How should I run grapesjs-mjml on IE11.
Thanks.

Edit MJML code

Hi,

Can we edit MJML code using GrapesJS-MJML or only view the code?
If not, can you support the ability to edit the MJML source code?

Canvas View issues

Love your plugin, especially with the mjml. Other than known problematic email clients, it gives really responsive emails. The only things I am having an issue with is the view of items in the editor. The email sent out work great. There's no issue in the mjml being created. However the view of certain elements are strange like the container view. I included photos. This doesn't affect the actual email. I can provide more details if necessary. Please inform me of what you need.

mjml with grapesjs

How to update MJML latest version in grapesJS?

Cannot be used with versions greater than 0.12.6

I am using this plugin. I stay attached to 0.12.6 We discussed it before in GrapesJS/grapesjs#440

container removes on empty the canvas.

When I empty the canvas by clicking on the delete trash button, It also deletes the container and cant drag the elements on the canvas/editor.

ALL mjml styles are stripped - demo included

http://grapesjs.com/demo-mjml.html

1. Add a text block or a column block to change the template
2. Refresh the page
3. View export html

This is a big issue

Before

After

Don't work with grapesjs >= v0.9.32

This version does not work with the version of grapesjs >= v0.9.32
VM5114 grapesjs-mjml.min.js:107 Uncaught TypeError: Cannot read property 'length' of undefined at r.addToCollection (VM5114 grapesjs-mjml.min.js:107) at r.<anonymous> (VM5114 grapesjs-mjml.min.js:107) at VM5111 grapes.min.js:2 at Function.C.each.C.forEach (VM5111 grapes.min.js:2) at i.each (VM5111 grapes.min.js:2) at render (VM5114 grapesjs-mjml.min.js:107) at i.renderChildren (VM5114 grapesjs-mjml.min.js:2) at i.render (VM5114 grapesjs-mjml.min.js:2) at i.addToCollection (VM5111 grapes.min.js:2) at i.<anonymous> (VM5111 grapes.min.js:2)

Thanks

Social component icon colors remove displayed networks

Reproduce like so: Go to your demo, add a social component. Add "google" and any other network, go and style the color of say Facebook's icon, and the networks we added disappear.

Clone doesn't take into account styled attributes

GrapesJS/grapesjs#129

Error Start on Windows

On windows 10 show this error

Cannot read property 'defaultView' of null

I just tried installing fresh version of grapesjs-mjml. When you hover selected component over scroll bar you get the following error in console. It doesn't crash anything.
Windows 10.

Imgur

Can't add 3rd column more than once

Weird inconsistencies

http://grapesjs.com/demo-mjml.html

Try dragging column 3 twice or 3 times into the template

Display.js display in traits

@artf fantastic update to grapesjs-mjml earlier today. Works way better with template import. I had to redo a bunch of custom components I created for MJML but it's so much more tidy. Thank you.

In components/Display.js under traits you have "display" which for the moment doesn't return the string of platforms (test on your demo). Any reason why you want to keep this away from the traits as a variable? Also, how do you feel about converting this string to checkboxes? Seems more user friendly?
{
name: 'display',
value: 'facebook twitter google',
},

Backbone.undoManager is not constructor

TypeError: Backbone.UndoManager is not a constructor at N.d.initUndoManager (grapes.min.js:17) at Object.onLoad (grapes.min.js:15) at grapes.min.js:17 at Array.forEach (<anonymous>) at N.d.initialize (grapes.min.js:17) at N.d.b.Model (grapes.min.js:2) at new N.d (grapes.min.js:3) at new b (grapes.min.js:17) at Object.init (grapes.min.js:17) at VueComponent.mounted (234:8)

when i disable undoManager still it gives same error.

mj-body isn't stylable but the style manager still contains options for it.

I am trying to remove the decorations tab from the style manager. Is there a default set that I have to override? I used the unstylabe and stylable properties in the component. It had no effect. Am I missing something?

Creating a block to insert HTML into the template

Can MJML raw be used to create a HTML block for grapejs? If not, are there other routes available to insert HTML directly into the template?

Padding attribute is not working

Hello
paddingattribute is not working apparently when using it like this :

<mj-section>
          <mj-column>
            <mj-image src="http://placehold.it/350x250/78c5d6/fff" padding="0px"></mj-image>
            <mj-text padding="0">Content 11111</mj-text>
          </mj-column>

          <mj-column>
            <mj-image src="http://placehold.it/350x250/78c5d6/fff" padding="0px"></mj-image>
            <mj-text>Content 2</mj-text>
          </mj-column>
        </mj-section> 

Any ideas ? thx

Demo isn't working

Your demo is just a blank white page. When I bring up the console, I see this error:

Loading failed for the <script> with source “http://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=grapesjscom”.

Problems trying to load and save

I recently found GrapesJS and it looks fantastic. I'm currently attempting to integrate the MJML editor into my app and stuck at trying to save and load my templates. I have spent quite some time going through various documentation (such as this: API Storage Manager) and some issues in the main repo related to remote storage, but I am still a bit stuck and would appreciate some assistance. My JS is as follows:

<script type="text/javascript">
        var editor = grapesjs.init({
            fromElement: 1,
            container: '#gjs',
            plugins: ['gjs-mjml'],
            pluginsOpts: {
                'gjs-mjml': {/* ...options */ }
            },
            storageManager: {
                //id: '',
                type: 'remote',
                stepsBeforeSave: 2,
                autosave: true,
                autoload: true,
                urlStore: '/email-templates/save/@Model.Id/@WorkContext.CurrentCultureCode',
                urlLoad: '/email-templates/load/@Model.Id',
                contentTypeJson: true,
            }
        });
    </script>

I have the following class for receiving storage attributes:

public class GrapesJSStorageData
{
	[JsonProperty("gjs-assets")]
	public string Assets { get; set; }

	[JsonProperty("gjs-css")]
	public string Css { get; set; }

	[JsonProperty("gjs-styles")]
	public string Styles { get; set; }

	[JsonProperty("gjs-html")]
	public string Html { get; set; }

	[JsonProperty("gjs-components")]
	public string Components{ get; set; }
}

NOTE: I didn't find those attribute names in your documentation, but rather from observing what GrapesJS posts to the server (it would be better if it was documented, and if it is already documented, then somewhere easier to find).

And the following are my Save and Load methods in my controller (I am using ASP.NET Core):

[Route("load/{id}")]
public async Task<IActionResult> Load(Guid id)
{
	// TODO: Not sure of correct response.. but this is here temporarily to prevent error when editor starts
	return Json(new
	{
		keys = new[] { "item1", "item2" },
		clb = ""
	});
}

[HttpPost]
[Route("save/{id}/{cultureCode?}")]
public async Task<IActionResult> Save(Guid id, string cultureCode, [FromBody] GrapesJSStorageData data)
{
	//TODO: My implementation of saving in DB

	// TODO: Not sure of correct response
	return Ok();
}

Basically I just need to know what to respond with from server to client. Can you provide the JSON format for me, please? And also an example of what to do on the client side (if anything) once it has been received.

Any help would be much appreciated. Thanks.

No way to add `category` to blocks

Not possible in mjml
https://github.com/artf/grapesjs-mjml/blob/master/src/blocks.js#L8

Possible in newsletter, category: opt.categoryLabel,
https://github.com/artf/grapesjs-preset-newsletter/blob/master/src/blocks.js#L16

Backbone.UndoManager is not a constructor

while loading my grapes-mjml component second time it gives backbone.undomanager error

Backbone.UndoManager is not a constructor
    at N.d.initUndoManager (grapes.min.js:17)
    at Object.onLoad (grapes.min.js:15)
    at grapes.min.js:17
    at Array.forEach (<anonymous>)
    at N.d.initialize (grapes.min.js:17)
    at N.d.b.Model (grapes.min.js:2)
    at new N.d (grapes.min.js:3)
    at new b (grapes.min.js:17)
    at Object.init (grapes.min.js:17)
    at VueComponent.mounted (Hello.vue?de18:14)

So,
How to destroy grapesjs.init({ }) ??

this is my script code,

<script>
let editor = null;
export default {
  name: 'templateEditor',
  mounted () {
  	editor = grapesjs.init({
      height: '100%',
      noticeOnUnload: 0,
      storageManager:{autoload: 0},
      container : '#gjs',
      fromElement: true,
      plugins: ['gjs-mjml'],
      pluginsOpts: {
        'gjs-mjml': {}
      }
    });
    window.editor = editor;
  }
}
</script>

ckeditor creates spans inside `mj-text`

I think this is undesired behavior. Believe it should rather apply the styles to mj-text element

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-text>
            <span style="color:#000000;">Start from here</span>
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>