Grapesjs Mjml Versions Save

feat: add French locale (#211)

• feat: add option to use custom fonts in exported HTML (fixes https://github.com/artf/grapesjs-mjml/issues/207) (#208) thanks @adrianmarraco!

import 'grapesjs/dist/css/grapes.min.css'
import grapesJS from 'grapesjs'
import grapesJSMJML from 'grapesjs-mjml'

let editor = grapesJS.init({
   fromElement: 1,
   container : '#gjs',
   avoidInlineStyle : false,
   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', () => {  
  let styleManager = editor.StyleManager;
  let fontProperty = styleManager.getProperty('typography', 'font-family');

  let 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();
});

• fix: render components in the correct order after column drag and drop inside a wrapper (#204) Thanks @olivmonnier

• fix: display mj-image containing width="100%" correctly instead of showing the default mj-body width (550px)

• feat: upgrade mjml to ^4.7.0 and upgrade devDependencies, this should slightly decrease the bundle size by about 10%

• feat: added german (de) translation (#201), thanks @ditschedev

• fix: correctly import composite attributes (https://github.com/artf/grapesjs-mjml/pull/197) thanks @aki-ks

• fix: apply custom tag when selecting custom social-element (fixes #196)

• feat: include development bundle in the final build (742001878556aeefa0d6225155db5030ee4aebb0)

Changes

• Adds new command mjml-import:change that triggers when mjml gets imported, you can listen for this event using the following code:

editor.on('run:mjml-import:change', (mjml) => {
  console.log(mjml);
})