Skip to content

GrapesJS preset configuration for the Mautic editor

License

Notifications You must be signed in to change notification settings

mautic/grapesjs-preset-mautic

Repository files navigation

GrapesJS Preset Mautic

All Contributors

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

  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';
  1. 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

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

💻
Adrian
Adrian

💻 📖 👀 📓
Irfan Hanfi
Irfan Hanfi

💻
Ekkehard Gümbel
Ekkehard Gümbel

📓
John Linhart
John Linhart

👀
Volha Pivavarchyk
Volha Pivavarchyk

📓
Anna Munk
Anna Munk

💻
Patryk Gruszka
Patryk Gruszka

👀

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