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. https://github.com/mautic/mautic/issues/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

1. Build the preset: npm run build (done by author)
2. Create a PR (done by author)
3. Fork the repo: gh repo fork mautic/grapesjs-preset-mautic
4. Clone the repo: gh repo clone USERNAME/grapesjs-preset-mautic && gh pr checkout PRNUMBER>
5. Change into the plugin directory: e.g. cd mautic/plugins/GrapesJSBuilderBundle
6. 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).
7. 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';

7. 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

8. Install the global dependency (make sure it is v1): npm install parcel@1
9. Install the project depencencies: npm install
10. Build the JS code of the plugin 'plugin-grapesjs-builder' in the dev mode (not minified): npm run build-dev
11. Test the code locally. Make sure nothing is cached. Recommended way is using the incognito mode. E.g. https://mautic.ddev.site/s/emails
12. 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):

This project follows the all-contributors specification. Contributions of any kind welcome!