Closed Drew-Daniels closed 1 year ago
For extra context, I cannot replicate the same error when I use grapesjs
without the grapesjs-mjml
plugin.
Here is an example the operation I would like to be able to do with the plugin (using the development example from grapesjs
when running npm run start
):
screen-capture (23).webm
This is all just to confirm that this appears to be an issue when using grapesjs
with the grapesjs-mjml
plugin.
Hello Drew!
We here have had the same problem, and we solved it by doing this when start a new grapesjs e-mail editor, always:
editor.DomComponents.clear();
editor.setComponents('<mjml><mj-head id="mjmlHead"></mj-head><mj-body></mj-body></mjml>');
With this we guarantee that the right structure was placed in canva.
Setting the draggable: true
allows user to drop in original body, but it throws an error when we need to save the mjml rendered:
The right way:
Please, try the solution and help me to allow full-width="full-width"
property here 😅
Hi @ronaldohoch , thanks for the help. I see the error you mention now, so thanks for pointing that out.
I tried your solution, but unfortunately I'm not able getting the same results. When I undo my changes to grapesjs-mjml
, and add these lines, I can no longer drag Sections onto the blank canvas:
editor.DomComponents.clear();
editor.setComponents('<mjml><mj-head id="mjmlHead"></mj-head><mj-body></mj-body></mjml>');
I'll revisit this later to see if I can't find another solution to this.
It appears (at least from what I can tell) that <mj-section>
components are not able to be dragged onto <mj-body>
components, but can be dragged onto <mj-wrapper>
components:
grapesjs-mjml/index.html
NOTE: I have removed everything inside of <mj-body>...</mj-body>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GrapesJS Plugin</title>
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<style>
body,
html {
height: 100%;
margin: 0;
}
.cke_top {
background: #444 !important;
}
.cke_chrome {
border: none !important;
}
.cke_toolgroup {
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
</style>
</head>
<body>
<div id="gjs" style="height:0px; overflow:hidden">
<mjml>
<mj-head>
<mj-font name="Barlow" href="https://fonts.googleapis.com/css?family=Barlow" />
<mj-style>
.slogan {
background: #000;
}
</mj-style>
</mj-head>
<mj-body></mj-body>
</mjml>
</div>
<script type="text/javascript">
// Wait for the plugin to be injected by the dev server
setTimeout(() => {
window.editor = grapesjs.init({
height: '100%',
noticeOnUnload: 0,
storageManager: {autoload: 0},
container: '#gjs',
fromElement: true,
plugins: ['grapesjs-mjml'],
pluginsOpts: {
'grapesjs-mjml': {}
}
});
}, 100);
</script>
</body>
</html>
mj-wrapper
Component:Updated index.html
...
<mj-body>
<mj-wrapper></mj-wrapper>
</mj-body>
...
Well, checking mine version with a lot of changes, but i'm using the same grapes version as you, that one in cdn :D I'm remember this: https://github.com/artf/grapesjs-mjml/blob/master/src/components/Body.js#L34
In this line we put it:
style: ' width: 100%; min-height: 100vh; margin:0 auto;',
The error happens because for some reason, body keeps with height:0, so, we put min-height:100vh
to solve it.
You can see in your canva, the line crossing is the body, putting the min-height, you will not see that line.
Tryed in a new clone repo.
Huh, that works for me as well... Thanks for sharing that! I'll try using this fix in the project I'm working on and see if that works there also. Might be something to push up in a PR to this repo.
You can update the commit https://github.com/artf/grapesjs-mjml/pull/296
You can update the commit #296
That's what I'd like to do, however the more I've looked into this today it appears that the problem I'm facing in my setup might be a problem with using grapesjs-mjml
with React https://github.com/artf/grapesjs-mjml/issues/223 . Going to keep looking into this further to see if I can get a better idea of what's going on.
@ronaldohoch feel free to PR any other custom fixes that you have found and I'll gladly merge them
I created another ticket for this that is specialized to what appears may be incompatibility between grapesjs v0.19.4
, grapesjs-mjml v0.6.0
and react
, as this seems to be the crux of where the bug is coming from on my end
After digging into a bug my team has seen after upgrading from
grapesjs
v0.18.4
tov0.19.5
. I started looking into thegrapesjs-mjml
plugin specifically to see if this could be the thing causing it and appears this might be the cause.Specifically, when we start with a blank canvas, we are now unable to add components. When there are already components on the canvas, I can perform all the normal CRUD operations with components using the DnD functionality.
Bug Summary:
When the canvas is is blank, I cannot add components, however, when there are already components on the canvas, I can add them without issue. It is unclear if there is any correlation with
grapesjs
's changes from0.18.4
to0.19.5
.With Components (default example from
grapesjs-mjml
after runningnpm run start
):screen-capture (21).webm
Without Components (i.e., all components deleted so that all is left is a blank canvas):
screen-capture (22).webm
Full Warning/Error Output: