grapesjs-mjml plugin no longer works with grapesjs 0.19.4 (and up) and React

[Drew Daniels]

My team has previously used grapesjs v0.18.4, grapesjs-mjml v0.6.6 and react together without issue. However, since the upgrade we made from 0.18.4 to 0.19.5, the 3 no longer work together. I have created a simple example to illustrate the issue we're seeing.

Summary:

When using grapesjs v0.19.4 and up, whenever I try to drag a Section component onto a blank Canvas, I receive this warning:

{
    "errors": [
        "Target collection not found",
        "Component not draggable, acceptable by [[data-gjs-type=mj-body], [data-gjs-type=mj-wrapper]]"
    ],
    "model": {
        "tagName": "mj-section",
        "type": "mj-section"
    },
    "context": "sorter",
    "level": "warning"
}

Video:

v0.19.4 and up:
screen-capture (1).webm

v0.18.4:
screen-capture (2).webm

Here is my setup:

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.js:

import Builder from './Builder';

function App() {
  return (
    <div className="App">
      <Builder />
    </div>
  );
}

export default App;

Builder.js:

import { useState, useEffect } from 'react';

import grapesjs from 'grapesjs';

import 'grapesjs/dist/css/grapes.min.css';

import config from './config';

export default function Builder() {
  const [editor, setEditor] = useState(null);

  useEffect(() => {
    if (!editor) {
      const newEditor = grapesjs.init(config);
      setEditor(newEditor);
    }
  }, [editor])

  return (
    <div id="gjs" style={{ overflow: 'hidden', height: '100%' }}>
      <mjml>
        <mj-body />
      </mjml>
    </div>
  )
}

config.js:

import grapesJSMJML from 'grapesjs-mjml';

const config = {
  plugins: [grapesJSMJML],
  container: '#gjs',
}

export default config;

This appears to only be an issue when using grapesjs v0.19.4 or higher along with the grapesjs-mjml plugin.

What I have tried:

• Updating line 34 in src/components/Body.js:

From:

style: 'width: 100%; min-height: 100%',

To:

style: ' width: 100%; min-height: 100vh; margin:0 auto;',

• Setting the config.canvas.frameStyle property to the following in src/index.js (line 67):

config.canvas.frameStyle = `
  body { background-color: #fff }
  * ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1) }
  * ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2) }
  * ::-webkit-scrollbar { width: 10px }
  [data-gjs-type="mj-body"] { min-height: 100vh!important; }`;

• Adding mjml through editor.addComponents (and removing my JSX mjml within #gjs):

useEffect(() => {
  if (!editor) {
    const newEditor = grapesjs.init(config);
    newEditor.addComponents(`
    <mjml>
      <mj-body></mj-body>
    </mjml>
    `)
    setEditor(newEditor);
  }
}, [editor])

Nothing works, the only thing that makes a difference is downgrading to the previous version, which we do not want to do because of the XSS vulnerabilities that come with doing so.

[Drew Daniels]

Here is the example I used for testing if anyone would like to try recreating this: https://github.com/Drew-Daniels/grapesjs-react-bug

[Drew Daniels]

After looking through the grapesjs release notes again, I noticed a couple changes in v0.19.4 that I believe may have affected the grapesjs-mjml plugin's ability to work with React. The screenshots below are taken from the v0.19.4 release notes:

• Could the bug be related to changing the default canvas iframe mode? If anyone has more context on what this means that could be helpful.
  

• Although I am not testing the ability to paste components onto the canvas, the warning/error I am seeing mentions the sorter context:
  

[Amit Kumar]

Still getting this with grapejs 0.20.4 and mjml 1.0.4

@Drew-Daniels solution of adding

editorRef.current.onReady(() => {
      editorRef.current!.DomComponents.clear();
      editorRef.current!.setComponents(
        '<mj-body><mj-wrapper></mj-wrapper></mj-body>',
      );
    });

works

[rogueturnip]

This has had a temporary fix for a long time. wondering if anyone knows if this is the final solution?