Fix drop in empty canvas. Closes #297

GrapesJS · Sep 25, 2022 · 4534aa2 · 4534aa2
1 parent 0c30ed4
commit 4534aa2
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/src/components/Body.js b/src/components/Body.js
@@ -31,7 +31,7 @@ export default (editor, { dc, coreMjmlModel, coreMjmlView }) => {
       ...coreMjmlView,
       tagName: 'div',
       attributes: {
-        style: 'width: 100%; min-height: 100%',
+        style: 'width: 100%; min-height: 100vh',
         'data-type': 'mj-body',
       },
 

diff --git a/src/components/index.js b/src/components/index.js
@@ -177,10 +177,10 @@ export default (editor, opt = {}) => {
 
 
     getTemplateFromMjml() {
-      let mjmlTmpl = this.getMjmlTemplate();
-      let innerMjml = this.getInnerMjmlTemplate();
-      const htmlOutput = mjmlConvert(`${mjmlTmpl.start}
-        ${innerMjml.start}${innerMjml.end}${mjmlTmpl.end}`, opt.fonts);
+      const mjmlTmpl = this.getMjmlTemplate();
+      const innerMjml = this.getInnerMjmlTemplate();
+      const mjml = `${mjmlTmpl.start}${innerMjml.start}${innerMjml.end}${mjmlTmpl.end}`;
+      const htmlOutput = mjmlConvert(mjml, opt.fonts);
       let html = htmlOutput.html;
       html = html.replace(/<body(.*)>/, '<body>');
       let start = html.indexOf('<body>') + 6;

diff --git a/src/components/mjml.js b/src/components/mjml.js
@@ -1,17 +1,26 @@
 // Specs: https://mjml.io/documentation/#mjml
 import { isComponentType } from './utils.js';
 
-export default (editor, { dc }) => {
+export default (editor, { dc, coreMjmlModel, coreMjmlView }) => {
   const type = 'mjml';
 
   dc.addType(type, {
     isComponent: isComponentType(type),
     model: {
+      ...coreMjmlModel,
       defaults: {
         droppable: '[data-gjs-type=mj-head], [data-gjs-type=mj-body]',
         draggable: false,
       },
-    }
+    },
+    view: {
+      ...coreMjmlView,
+      tagName: 'div',
+      attributes: { style: 'min-height: 100vh' },
+      getTemplateFromMjml() {
+        return '';
+      }
+    },
   });
 
 };