BUG: Editor is not working as expected since version of 0.19.4 of grapesjs
lilisgeorge opened this issue · comments
Since version 0.19.4 grapesjs editor is not working with mjml plugin.
You can reproduce the issue by instantiating a new grapesjs editor with mjml plugin.
Please provide some sort of reproduction or error.
Here is a codepen I have created to demonstrate the problem. That is how it used to work with v0.18.4
https://codepen.io/george-lilis/pen/yLvQRgN
With v0.19.4 you will notice that there are 2 Body elements. You cannot place elements on the root Body. However you can place elements on the nested Body Element.
Now if you remove the section element the nested Body element get collapsed and you can no more place elements again.
It should have only a root body element and user should be able to place elements.
EDIT: You can try and rollback to v0.18.4 to see the before and after
Hope it helps.
I have some hacky solution, maybe it can be done better. You need to add [data-gjs-type="mj-body"] { min-height: 100vh !important; } style to the iframe:
grapesjs.init({
container: '#gjs',
fromElement: true,
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; }`,
}}
});Those remaining styles are needed to preserve the original styling.
And the content of the editor must be at least:
<div id="gjs">
<mjml><mj-body></mj-body></mjml>
</div>Feel free to submit a PR if there is something to be fixed inside this library, unfortunately I can't dig into this myself but I try to actively merge bug fixes
The fix proposed by @barteksc works for me, although it should be modified to:
grapesjs.init({
container: '#gjs',
fromElement: true,
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; }`,
}
});Using the example index.html in grapesjs-mjml:
Setting canvas.frameStyle within the call to grapesjs.init works in index.html, however, I'm noticing that setting it in src/index.js does not work for some reason, although I cannot see why:
index.html
<!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': {}
},
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; }`,
}
});
}, 100);
</script>
</body>
</html>src/index.js
import loadBlocks from './blocks';
import loadComponents from './components';
import loadCommands from './commands';
import loadButtons from './buttons';
import loadStyle from './style';
import en from './locale/en';
const masterPlugin = (editor, opt = {}) => {
const config = editor.getConfig();
const opts = {
editor,
// Default template in case the canvas is empty
defaultTemplate: '',
// Code viewer theme
codeViewerTheme: 'hopscotch',
// Import placeholder MJML
importPlaceholder: '',
// Image placeholder source for mj-image block
imagePlaceholderSrc: '',
// Overwrite default export command
overwriteExport: 1,
// String before the MJML in export code
preMjml: '',
// String after the MJML in export code
postMjml: '',
// Export 'mjml', 'html' or both (leave empty) TODO
exportOnly: '',
// Clean all previous blocks if true
resetBlocks: 1,
// Reset the Style Manager and add new properties for MJML
resetStyleManager: 1,
// Column padding (this way it's easier select columns)
columnsPadding: '10px 0',
i18n: {},
// Custom fonts for include on MJML to HTML export options
// e.g.: {
// Montserrat: 'https://fonts.googleapis.com/css?family=Montserrat',
// 'Open Sans': 'https://fonts.googleapis.com/css?family=Open+Sans'
// }
fonts: {},
...opt,
};
// I need to prevent forced class creation as classes aren't working
// at the moment
config.forceClass = 0;
// Don't need to create css rules with media
config.devicePreviewMode = 1;
// Doesn't work without inline styling
config.avoidInlineStyle = 0;
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; }`;
// Load i18n files
editor.I18n.addMessages({
en,
...opts.i18n,
});
[
loadBlocks,
loadComponents,
loadCommands,
loadButtons,
loadStyle,
].forEach(module => module(editor, opts));
// Update devices
if (opts.resetDevices) {
const dm = editor.DeviceManager;
dm.getAll().reset();
dm.add('Desktop', '');
dm.add('Mobile', '320px');
dm.add('Tablet', '820px');
}
};
export default masterPlugin;
export const blocksPlugin = masterPlugin.blocksPlugin = loadBlocks;
export const componentsPlugin = masterPlugin.componentsPlugin = loadComponents;
export const commandsPlugin = masterPlugin.commandsPlugin = loadCommands;
export const buttonsPlugin = masterPlugin.buttonsPlugin = loadButtons;
export const stylePlugin = masterPlugin.stylePlugin = loadStyle;What's more confusing is that when I log out window.editor.getConfig(), I seem to get the same results for the value of config.canvas.frameStyle:
index.html
src/index.js:
This should be fixed in the latest release.