https://github.com/mautic/grapesjs-preset-mautic
GrapesJS preset configuration for the Mautic editor
https://github.com/mautic/grapesjs-preset-mautic
grapesjs grapesjs-builder grapesjs-editor grapesjs-plugin
Last synced: 12 days ago
JSON representation
GrapesJS preset configuration for the Mautic editor
- Host: GitHub
- URL: https://github.com/mautic/grapesjs-preset-mautic
- Owner: mautic
- License: mit
- Created: 2020-03-10T10:25:31.000Z (about 5 years ago)
- Default Branch: 5.x
- Last Pushed: 2025-04-25T06:37:04.000Z (30 days ago)
- Last Synced: 2025-05-09T14:24:42.869Z (15 days ago)
- Topics: grapesjs, grapesjs-builder, grapesjs-editor, grapesjs-plugin
- Language: JavaScript
- Homepage: https://www.mautic.org
- Size: 619 KB
- Stars: 14
- Watchers: 17
- Forks: 20
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# GrapesJS Preset Mautic
[](#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](https://github.com/artf/grapesjs/blob/4bc79bd304072b458f63482d3a4f5049c6491467/src/panels/config/config.js#L56) | '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
```html
var editor = grapesjs.init({
container: '#gjs',
// ...
plugins: ['grapesjs-preset-mautic'],
pluginsOpts: {
'grapesjs-preset-mautic': { /* options */ }
}
});
```
Modern javascript
```js
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
```sh
$ git clone https://github.com/mautic/grapesjs-preset-mautic.git
$ cd grapesjs-preset-mautic
```
Install dependencies
```sh
$ npm i
```
Start the dev server
```sh
$ npm start
```
Build the source and use js from build folder to your project
```sh
$ 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
```js
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`
```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](https://github.com/mautic/grapesjs-preset-mautic/pulls) (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.
```js
// 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.
```js
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](https://allcontributors.org/docs/en/emoji-key)):
Disha P
💻
Adrian
💻 📖 👀 📓
Irfan Hanfi
💻
Ekkehard Gümbel
📓
John Linhart
👀
Volha Pivavarchyk
📓
Anna Munk
💻
Patryk Gruszka
👀
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!