Update grapesjs compatibility (Mautic 4)

dist/blocks.js

@@ -1,114 +1,126 @@
 import DynamicContentBlocks from './dynamicContent/dynamicContent.blocks';
 import ContentService from './content.service';
 import ButtonBlock from './buttonBlock';
+import PanelsMjml from './panels/panels.mjml';
 import BlocksMjml from './blocks/blocks.mjml';
 export default ((editor, opts = {}) => {
   const bm = editor.BlockManager;
   const blocks = bm.getAll();
   const mode = ContentService.getMode(editor);
+
   if (mode === ContentService.modeEmailMjml) {
+    const panelMjml = new PanelsMjml(editor);
     const blockMjml = new BlocksMjml(editor);
+    panelMjml.restylePanels();
     blockMjml.addBlocks();
-  }
+  } // a add button block for landing page
+
 
-  // a add button block for landing page
   if (mode === ContentService.modePageHtml) {
     const buttonBlock = new ButtonBlock(editor);
     buttonBlock.addButtonBlock();
   } else {
     // Add Dynamic Content block only for email modes
     const dcb = new DynamicContentBlocks(editor, opts);
-    dcb.addDynamciContentBlock();
-  }
+    dcb.addDynamicContentBlock();
+  } // Add icon to mj-hero
+
 
-  // Add icon to mj-hero
   if (typeof bm.get('mj-hero') !== 'undefined') {
     bm.get('mj-hero').set({
       attributes: {
         class: 'gjs-fonts gjs-f-hero'
       }
     });
-  }
+  } // Delete mj-wrapper
+
 
-  // Delete mj-wrapper
   if (typeof bm.get('mj-wrapper') !== 'undefined') {
     bm.remove('mj-wrapper');
-  }
+  } // All block inside Blocks category
+
 
-  // All block inside Blocks category
   blocks.forEach(block => {
     block.set({
       category: Mautic.translate('grapesjsbuilder.categoryBlockLabel')
     });
   });
-
   /*
    * Custom block inside Sections category
    */
-
   // MJML columns
+
   if (typeof bm.get('mj-1-column') !== 'undefined') {
     bm.get('mj-1-column').set({
       label: Mautic.translate('grapesjsbuilder.components.names.oneColumn'),
       category: Mautic.translate('grapesjsbuilder.categorySectionLabel')
     });
   }
+
   if (typeof bm.get('mj-2-columns') !== 'undefined') {
     bm.get('mj-2-columns').set({
       label: Mautic.translate('grapesjsbuilder.components.names.twoColumn'),
       category: Mautic.translate('grapesjsbuilder.categorySectionLabel')
     });
   }
+
   if (typeof bm.get('mj-3-columns') !== 'undefined') {
     bm.get('mj-3-columns').set({
       label: Mautic.translate('grapesjsbuilder.components.names.threeColumn'),
       category: Mautic.translate('grapesjsbuilder.categorySectionLabel')
     });
   }
+
   if (typeof bm.get('mj-37-columns') !== 'undefined') {
     bm.get('mj-37-columns').set({
       category: Mautic.translate('grapesjsbuilder.categorySectionLabel')
     });
-  }
+  } // Newsletter columns
+
 
-  // Newsletter columns
   if (typeof bm.get('sect100') !== 'undefined') {
     bm.get('sect100').set({
       category: Mautic.translate('grapesjsbuilder.categorySectionLabel')
     });
   }
+
   if (typeof bm.get('sect50') !== 'undefined') {
     bm.get('sect50').set({
       category: Mautic.translate('grapesjsbuilder.categorySectionLabel')
     });
   }
+
   if (typeof bm.get('sect30') !== 'undefined') {
     bm.get('sect30').set({
       category: Mautic.translate('grapesjsbuilder.categorySectionLabel')
     });
   }
+
   if (typeof bm.get('sect37') !== 'undefined') {
     bm.get('sect37').set({
       category: Mautic.translate('grapesjsbuilder.categorySectionLabel')
     });
-  }
+  } // Webpage columns
+
 
-  // Webpage columns
   if (typeof bm.get('column1') !== 'undefined') {
     bm.get('column1').set({
       category: Mautic.translate('grapesjsbuilder.categorySectionLabel')
     });
   }
+
   if (typeof bm.get('column2') !== 'undefined') {
     bm.get('column2').set({
       category: Mautic.translate('grapesjsbuilder.categorySectionLabel')
     });
   }
+
   if (typeof bm.get('column3') !== 'undefined') {
     bm.get('column3').set({
       category: Mautic.translate('grapesjsbuilder.categorySectionLabel')
     });
   }
+
   if (typeof bm.get('column3-7') !== 'undefined') {
     bm.get('column3-7').set({
       category: Mautic.translate('grapesjsbuilder.categorySectionLabel')

dist/blocks/blocks.mjml.js

@@ -1,23 +1,25 @@
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 export default class BlocksMjml {
   constructor(editor) {
     _defineProperty(this, "blockManager", void 0);
+
     _defineProperty(this, "editor", void 0);
+
     this.editor = editor;
     this.blockManager = editor.BlockManager;
   }
+
   addBlocks() {
     const sections37 = `<mj-column width="30%"><mj-text>Content 1</mj-text></mj-column>
         <mj-column width="70%"><mj-text>Content 2</mj-text></mj-column>`;
     this.blockManager.add('mj-37-columns', {
       label: Mautic.translate('grapesjsbuilder.components.names.twoColumnThirdSevens'),
       category: Mautic.translate('grapesjsbuilder.categorySectionLabel'),
-      attributes: {
-        class: 'gjs-fonts gjs-f-b37'
-      },
-      content: `<mj-section>${sections37}</mj-section>`
+      content: `<mj-section>${sections37}</mj-section>`,
+      media: `<svg viewBox="0 0 24 24">
+        <path fill="currentColor" d="M2 20h5V4H2v16Zm-1 0V4a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1ZM10 20h12V4H10v16Zm-1 0V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H10a1 1 0 0 1-1-1Z"></path>
+      </svg>`
     });
     const textSect = `<mj-column>
           <mj-text font-size="18px" font-weight="bold">
@@ -30,10 +32,10 @@ export default class BlocksMjml {
     this.blockManager.add('text-sect', {
       label: Mautic.translate('grapesjsbuilder.components.names.textSectionBlkLabel'),
       category: Mautic.translate('grapesjsbuilder.reusableDynamicContentBlockLabel'),
-      attributes: {
-        class: 'gjs-fonts gjs-f-h1p'
-      },
-      content: `<mj-section>${textSect}</mj-section>`
+      content: `<mj-section>${textSect}</mj-section>`,
+      media: `<svg viewBox="0 0 24 24">
+        <path fill="currentColor" d="M20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20M4,6V18H20V6H4M6,9H18V11H6V9M6,13H16V15H6V13Z" />
+      </svg>`
     });
     const gridItem = `<mj-group>
         <mj-column>
@@ -58,10 +60,10 @@ export default class BlocksMjml {
     this.blockManager.add('grid-items', {
       label: Mautic.translate('grapesjsbuilder.components.names.gridItemsBlkLabel'),
       category: Mautic.translate('grapesjsbuilder.reusableDynamicContentBlockLabel'),
-      attributes: {
-        class: 'fa fa-th'
-      },
-      content: `<mj-section>${gridItem}</mj-section>`
+      content: `<mj-section>${gridItem}</mj-section>`,
+      media: `<svg viewBox="0 0 24 24">
+        <path fill="currentColor" d="M3,11H11V3H3M3,21H11V13H3M13,21H21V13H13M13,3V11H21V3"/>
+      </svg>`
     });
     const listItem = `<mj-group>
         <mj-column width="30%">
@@ -79,10 +81,11 @@ export default class BlocksMjml {
     this.blockManager.add('list-items', {
       label: Mautic.translate('grapesjsbuilder.components.names.listItemsBlkLabel'),
       category: Mautic.translate('grapesjsbuilder.reusableDynamicContentBlockLabel'),
-      attributes: {
-        class: 'fa fa-th-list'
-      },
-      content: `<mj-section>${listItem}</mj-section>`
+      content: `<mj-section>${listItem}</mj-section>`,
+      media: `<svg viewBox="0 0 24 24">
+        <path fill="currentColor" d="M2 14H8V20H2M16 8H10V10H16M2 10H8V4H2M10 4V6H22V4M10 20H16V18H10M10 16H22V14H10"/>
+      </svg>`
     });
   }
+
 }

dist/buttonBlock.js

@@ -1,11 +1,12 @@
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 export default class ButtonBlock {
   constructor(editor) {
     _defineProperty(this, "blockManager", void 0);
+
     this.blockManager = editor.BlockManager;
   }
+
   addButtonBlock() {
     const style = `<style>
                       .button {
@@ -29,7 +30,11 @@ export default class ButtonBlock {
         class: 'gjs-fonts gjs-f-button'
       },
       content: `${style}
-         <a href="#" target="_blank" class="button">Button</a>`
+         <a href="#" target="_blank" class="button">Button</a>`,
+      media: `<svg viewBox="0 0 24 24">
+        <path fill="currentColor" d="M20 20.5C20 21.3 19.3 22 18.5 22H13C12.6 22 12.3 21.9 12 21.6L8 17.4L8.7 16.6C8.9 16.4 9.2 16.3 9.5 16.3H9.7L12 18V9C12 8.4 12.4 8 13 8S14 8.4 14 9V13.5L15.2 13.6L19.1 15.8C19.6 16 20 16.6 20 17.1V20.5M20 2H4C2.9 2 2 2.9 2 4V12C2 13.1 2.9 14 4 14H8V12H4V4H20V12H18V14H20C21.1 14 22 13.1 22 12V4C22 2.9 21.1 2 20 2Z" />
+    </svg>`
     });
   }
+
 }