GrapesJS Preset Mautic

This preset configures GrapesJS to be used as a Mautic Builder with some unique features and blocks.

Plugin to add GrapesJS features

Add function to edit source code
Extend the original image and add a confirm dialog before removing it
Option to hide/show Layers Manager
Option to enable/disable Import code button
Move Settings panel inside Style Manager panel
Open Block Manager at launch
Add Dynamic Content Block used in Mautic

Options

Option	Description	Default
sourceEdit	Activate source code edition	true
sourceEditBtnLabel	Label for source code button save	'Edit'
sourceCancelBtnLabel	Label for source code button cancel	'Cancel'
sourceEditModalTitle	Title for source code modal	'Edit code'
deleteAssetConfirmText	Label for asset deletion confirm	'Are you sure?'
showLayersManager	Show Layers Manager panel	false
combineSettingsAndSm	Show settings combined with the Style Manager	true
showImportButton	Show Import code button	false
defaultPanel	Set the panel that should be open by default: Button ids	'open-blocks'
categorySectionLabel	Category 'section' label	'Sections'
categoryBlockLabel	Category 'block' label	'Blocks'
dynamicContentModalTitle	Title for Dynamic Content modal	'Edit Dynamic Content'

Summary

Plugin name: grapesjs-preset-mautic

Download

GIT
- git clone https://github.com/mautic/grapesjs-preset-mautic.git

Usage

Directly in the browser

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-preset-mautic.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container: '#gjs',
      // ...
      plugins: ['grapesjs-preset-mautic'],
      pluginsOpts: {
        'grapesjs-preset-mautic': { /* options */ }
      }
  });
</script>

Modern javascript

import grapesjs from 'grapesjs';
import plugin from 'grapesjs-preset-mautic';
import 'grapesjs/dist/css/grapes.min.css';

const editor = grapesjs.init({
  container : '#gjs',
  // ...
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: { /* options */ }
  }
  // or
  plugins: [
    editor => plugin(editor, { /* options */ }),
  ],
});

Development

Clone the repository

$ git clone https://github.com/mautic/grapesjs-preset-mautic.git
$ cd grapesjs-preset-mautic

Install dependencies

$ npm i

Start the dev server

$ npm start

Build the source and use js from build folder to your project

$ npm run build

Dependencies

Html needs to be beautified for the click tracking to work. Therefore, we can not use the built in command: mjml-get-code but we have to use mjml2html directly.

beautify option is deprecated in mjml-core and only available in mjml cli. mautic/mautic#10331

Logging

How to log

this.logger = new Logger(editor);
this.logger.debug('Some info for debugging', {param} );
this.logger.info('Some info for debugging');
this.logger.warning('Some info for debugging');
this.logger.error('Some info for debugging');

Changing the log level

During development the log level can be set to debug in index.js

  const config = {
    showLayersManager: 0,
    showImportButton: 0,
    logFilter: 'log:debug',
    // logFilter: 'log:info',
    ...opts,
  };

Dynamic Content

Takes HTML from the Dynamic Content popup and adds it to the canvas based on the text (html) or mj-text (mjml) component.

How to test a preset pull request

Build the preset: npm run build (done by author)
Create a PR (done by author)
Fork the repo: gh repo fork mautic/grapesjs-preset-mautic
Clone the repo: gh repo clone USERNAME/grapesjs-preset-mautic && gh pr checkout PRNUMBER>
Change into the plugin directory: e.g. cd mautic/plugins/GrapesJSBuilderBundle
Optional: Is the plugin code touched by this preset code change too? Checkout the correct plugin PR from github.com/mautic/mautic as well. E.g. gh pr checkout PR when you are in the Mautic directory (not the preset directory).
Change the code for the import path of the preset in plugins/GrapesJsBuilderBundle/Assets/library/js/builder.service.js to the local version of the preset. E.g.

// import grapesjsmautic from 'grapesjs-preset-mautic';
import grapesjsmautic from '../../../../../../grapesjs-preset-mautic/src';

Change the code for the import path of the preset in plugins/GrapesJsBuilderBundle/Assets/library/js/codeMode/codeEditor.js to the local version of the preset. E.g.

import MjmlService from '../../../../../../../grapesjs-preset-mautic/dist/mjml/mjml.service';
import ContentService from '../../../../../../../grapesjs-preset-mautic/dist/content.service';

Locate the preset repo by starting from this location: plugins/GrapesJsBuilderBundle/Assets/library/js/. In the above example we assume that the preset is one folder above Mautic

Install the global dependency (make sure it is v1): npm install parcel@1
Install the project depencencies: npm install
Build the JS code of the plugin 'plugin-grapesjs-builder' in the dev mode (not minified): npm run build-dev
Test the code locally. Make sure nothing is cached. Recommended way is using the incognito mode. E.g. https://mautic.ddev.site/s/emails
Check the browser console if you find errors. They help a lot with debugging!

License

MIT

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Disha P} 💻	_Adrian 💻 📖 👀 📓	_{Irfan Hanfi} 💻	_{Ekkehard Gümbel} 📓	_{John Linhart} 👀	_{Volha Pivavarchyk} 📓	_{Anna Munk} 💻
_{Patryk Gruszka} 👀