Unable to Add Components to Blank Canvas
Drew-Daniels opened this issue · comments
After digging into a bug my team has seen after upgrading from grapesjs v0.18.4 to v0.19.5. I started looking into the grapesjs-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 from 0.18.4 to 0.19.5.
With Components (default example from grapesjs-mjml after running npm 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:
{
"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"
}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>Result - Fails:
screen-capture.webm
When dragging onto mj-wrapper Component:
Updated index.html
...
<mj-body>
<mj-wrapper></mj-wrapper>
</mj-body>
...Result - Works:
screen-capture.1.webm
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 #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 #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