Bug fixes

README.md

@@ -40,7 +40,6 @@ Supported MJML components (using default mjml-browser parser):
 |`block`|Add custom block options, based on block id.|`(blockId) => ({})`|
 |`codeViewerTheme`|Code viewer theme.|`hopscotch`|
 |`customComponents`|List of components which will be added to default one |`[]` |
-|`fonts`|Custom fonts on exported HTML header [more info](https://github.com/mjmlio/mjml#inside-nodejs)|`{}`|
 |`importPlaceholder`|Placeholder MJML template for the import modal|`''`|
 |`imagePlaceholderSrc`|Image placeholder source|`'https://via.placeholder.com/350x250/78c5d6/fff'`|
 |`i18n`|I18n object containing language [more info](https://grapesjs.com/docs/modules/I18n.html#configuration)|`{}`|
@@ -141,46 +140,6 @@ grapesJS.init({
 });
 ```
 
-#### fonts usage:
-
-```js
-import 'grapesjs/dist/css/grapes.min.css'
-import grapesJS from 'grapesjs'
-import grapesJSMJML from 'grapesjs-mjml'
-
-const editor = grapesJS.init({
-   fromElement: true,
-   container: '#gjs',
-   plugins: [grapesJSMJML],
-   pluginsOpts: {
-      [grapesJSMJML]: {
-        // The font imports are included on HTML <head/> when fonts are used on the template
-        fonts: {
-          Montserrat: 'https://fonts.googleapis.com/css?family=Montserrat',
-          'Open Sans': 'https://fonts.googleapis.com/css?family=Open+Sans'
-        }
-      }
-   },
-});
-
-// add custom fonts options on editor's font list
-editor.on('load', () => {
-  const styleManager = editor.StyleManager;
-  const fontProperty = styleManager.getProperty('typography', 'font-family');
-
-  const list = [];
-  // empty list
-  fontProperty.set('list', list);
-
-  // custom list
-  list.push(fontProperty.addOption({value: 'Montserrat, sans-serif', name: 'Montserrat'}));
-  list.push(fontProperty.addOption({value: 'Open Sans, sans-serif', name: 'Open Sans'}));
-  fontProperty.set('list', list);
-
-  styleManager.render();
-});
-```
-
 ### Using Independent mjml-browser Build
 
 In case, you have your own version of MJML with custom or extended components, it is possible

src/commands/index.ts

@@ -1,5 +1,5 @@
 import type { Editor } from 'grapesjs';
-import { RequiredPluginOptions } from '..';
+import { CommandOptionsMjmlToHtml, RequiredPluginOptions } from '..';
 import { mjmlConvert } from '../components/utils';
 import openExportMjml from './openExportMjml';
 import openImportMjml from './openImportMjml';
@@ -17,29 +17,29 @@ export default (editor: Editor, opts: RequiredPluginOptions) => {
   const cmdOpenExport = opts.overwriteExport ? 'export-template' : cmdExportMjml;
 
   Commands.add(cmdGetMjml, () => {
-      return `${opts.preMjml}${editor.getHtml().trim()}${opts.postMjml}`;
+    return `${opts.preMjml}${editor.getHtml().trim()}${opts.postMjml}`;
   });
 
   Commands.add(cmdGetMjmlToHtml, (ed, _, opt) => {
-      const mjml = Commands.run(cmdGetMjml);
-      return mjmlConvert(opts.mjmlParser, mjml, opts.fonts, opt);
+    const { mjml, ...rest } = (opt || {}) as CommandOptionsMjmlToHtml;
+    const mjmlToParse = mjml || Commands.run(cmdGetMjml);
+    return mjmlConvert(opts.mjmlParser, mjmlToParse, opts.fonts, rest);
   });
 
   openExportMjml(editor, opts, cmdOpenExport);
   openImportMjml(editor, opts, cmdImportMjml);
 
   // Device commands
   Commands.add(cmdDeviceDesktop, {
-    run: ed => ed.setDevice('Desktop'),
+    run: (ed) => ed.setDevice('Desktop'),
     stop: () => {},
   });
   Commands.add(cmdDeviceTablet, {
-    run: ed => ed.setDevice('Tablet'),
+    run: (ed) => ed.setDevice('Tablet'),
     stop: () => {},
   });
   Commands.add(cmdDeviceMobile, {
-    run: ed => ed.setDevice('Mobile portrait'),
+    run: (ed) => ed.setDevice('Mobile portrait'),
     stop: () => {},
   });
-
 };

src/components/Column.ts

@@ -4,7 +4,6 @@ import { ComponentPluginOptions } from '.';
 import { componentsToQuery, getName, isComponentType, mjmlConvert } from './utils';
 import { type as typeSection } from './Section';
 
-
 export const type = 'mj-column';
 
 export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }: ComponentPluginOptions) => {
@@ -18,14 +17,27 @@ export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }:
         name: getName(editor, 'column'),
         draggable: componentsToQuery(typeSection),
         stylable: [
-          'background-color', 'vertical-align', 'width',
-          'border-radius', 'border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius',
-          'border', 'border-width', 'border-style', 'border-color',
-          'padding', 'padding-top', 'padding-left', 'padding-right', 'padding-bottom',
+          'background-color',
+          'vertical-align',
+          'width',
+          'border-radius',
+          'border-top-left-radius',
+          'border-top-right-radius',
+          'border-bottom-left-radius',
+          'border-bottom-right-radius',
+          'border',
+          'border-width',
+          'border-style',
+          'border-color',
+          'padding',
+          'padding-top',
+          'padding-left',
+          'padding-right',
+          'padding-bottom',
         ],
         'style-default': {
-          'vertical-align': 'top'
-        }
+          'vertical-align': 'top',
+        },
       },
     },
 
@@ -39,8 +51,12 @@ export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }:
       getTemplateFromMjml() {
         const mjmlTmpl = this.getMjmlTemplate();
         const innerMjml = this.getInnerMjmlTemplate();
-        const htmlOutput = mjmlConvert(opt.mjmlParser, `${mjmlTmpl.start}
-          ${innerMjml.start}${innerMjml.end}${mjmlTmpl.end}`, opt.fonts);
+        const htmlOutput = mjmlConvert(
+          opt.mjmlParser,
+          `${mjmlTmpl.start}
+          ${innerMjml.start}${innerMjml.end}${mjmlTmpl.end}`,
+          opt.fonts,
+        );
         const html = htmlOutput.html;
 
         // I need styles for responsive columns
@@ -51,7 +67,6 @@ export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }:
           styles.push(item.innerHTML);
         });
 
-
         const content = html.replace(/<body(.*)>/, '<body>');
         const start = content.indexOf('<body>') + 6;
         const end = content.indexOf('</body>');
@@ -70,7 +85,7 @@ export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }:
         return {
           attributes,
           content: componentEl.innerHTML,
-          style: styles.join(' ')
+          style: styles.join(' '),
         };
       },
 
@@ -86,6 +101,7 @@ export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }:
 
         // In case mjmlResult.attributes removes necessary stuff
         this.updateStatus();
+        this.postRender();
 
         return this;
       },
@@ -95,8 +111,8 @@ export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }:
         const modelStyle = model.get('style') || {};
         const stylable = model.get('stylable') as string[];
         const styles = Object.keys(modelStyle)
-          .filter(prop => stylable.indexOf(prop) > -1)
-          .map(prop => `${prop}:${modelStyle[prop]};`);
+          .filter((prop) => stylable.indexOf(prop) > -1)
+          .map((prop) => `${prop}:${modelStyle[prop]};`);
         const styleResult = `${attributes.style} ${styles.join(' ')} ${el.getAttribute('style')}`;
         el.setAttribute('style', styleResult);
         // #290 Fix double borders

src/components/Image.ts

@@ -20,22 +20,46 @@ export default (editor: Editor, { coreMjmlModel, coreMjmlView }: ComponentPlugin
         name: getName(editor, 'image'),
         draggable: componentsToQuery([typeSection, typeColumn, typeHero]),
         stylable: [
-          'width', 'height',
-          'padding', 'padding-top', 'padding-left', 'padding-right', 'padding-bottom',
-          'border-radius', 'border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius',
-          'border', 'border-width', 'border-style', 'border-color',
-          'container-background-color', 'align',
+          'width',
+          'height',
+          'padding',
+          'padding-top',
+          'padding-left',
+          'padding-right',
+          'padding-bottom',
+          'border-radius',
+          'border-top-left-radius',
+          'border-top-right-radius',
+          'border-bottom-left-radius',
+          'border-bottom-right-radius',
+          'border',
+          'border-width',
+          'border-style',
+          'border-color',
+          'container-background-color',
+          'align',
         ],
         'style-default': {
           'padding-top': '10px',
           'padding-bottom': '10px',
           'padding-right': '25px',
           'padding-left': '25px',
-          'align': 'center',
+          align: 'center',
         },
         traits: ['href', 'rel', 'alt', 'title'],
         void: false,
       },
+
+      getStylesToAttributes() {
+        const style = coreMjmlModel.getStylesToAttributes.call(this);
+
+        // Fix #339
+        if (style.width === 'auto') {
+          delete style.width;
+        }
+
+        return style;
+      },
     },
 
     view: {

src/components/NavBar.ts

@@ -31,8 +31,8 @@ export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }:
             options: [
               { value: 'hamburger', name: 'ON' },
               { value: '', name: 'OFF' },
-            ]
-          }
+            ],
+          },
         ],
       },
     },
@@ -52,8 +52,12 @@ export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }:
       getTemplateFromMjml() {
         const mjmlTmpl = this.getMjmlTemplate();
         const innerMjml = this.getInnerMjmlTemplate();
-        const htmlOutput = mjmlConvert(opt.mjmlParser, `${mjmlTmpl.start}
-          ${innerMjml.start}${innerMjml.end}${mjmlTmpl.end}`, opt.fonts);
+        const htmlOutput = mjmlConvert(
+          opt.mjmlParser,
+          `${mjmlTmpl.start}
+          ${innerMjml.start}${innerMjml.end}${mjmlTmpl.end}`,
+          opt.fonts,
+        );
         const html = htmlOutput.html;
 
         // I need styles for hamburger
@@ -64,7 +68,6 @@ export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }:
           styles.push(item.innerHTML);
         });
 
-
         const content = html.replace(/<body(.*)>/, '<body>');
         const start = content.indexOf('<body>') + 6;
         const end = content.indexOf('</body>');
@@ -83,7 +86,7 @@ export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }:
         return {
           attributes,
           content: componentEl.innerHTML,
-          style: styles.join(' ')
+          style: styles.join(' '),
         };
       },
 
@@ -96,6 +99,8 @@ export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }:
         this.getChildrenContainer().innerHTML = this.model.get('content')!;
         this.renderChildren();
         this.renderStyle();
+        this.postRender();
+
         return this;
       },