Update grapesjs compatibility (Mautic 5 + CKE5)

dist/blocks.js

@@ -6,109 +6,118 @@ export default ((editor, opts = {}) => {
   const bm = editor.BlockManager;
   const blocks = bm.getAll();
   const mode = ContentService.getMode(editor);
+
   if (mode === ContentService.modeEmailMjml) {
     const blockMjml = new BlocksMjml(editor);
     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();
-  }
+  } // 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,13 +1,15 @@
-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>`;
@@ -85,4 +87,5 @@ export default class BlocksMjml {
       content: `<mj-section>${listItem}</mj-section>`
     });
   }
+
 }

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 {
@@ -32,4 +33,5 @@ export default class ButtonBlock {
          <a href="#" target="_blank" class="button">Button</a>`
     });
   }
+
 }

dist/buttons.js

@@ -6,40 +6,38 @@ export default ((editor, opts = {}) => {
     $
   } = editor;
   const pm = editor.Panels;
-  const defaultPanel = opts.defaultPanel || 'open-blocks';
+  const defaultPanel = opts.defaultPanel || 'open-blocks'; // Disable Import code button
 
-  // Disable Import code button
   if (!opts.showImportButton) {
     const mjmlImportBtn = pm.getButton('options', 'mjml-import');
     const htmlImportBtn = pm.getButton('options', 'gjs-open-import-template');
-    const pageImportBtn = pm.getButton('options', 'gjs-open-import-webpage');
+    const pageImportBtn = pm.getButton('options', 'gjs-open-import-webpage'); // MJML import
 
-    // MJML import
     if (mjmlImportBtn !== null) {
       pm.removeButton('options', 'mjml-import');
-    }
+    } // Newsletter import
+
 
-    // Newsletter import
     if (htmlImportBtn !== null) {
       pm.removeButton('options', 'gjs-open-import-template');
-    }
+    } // Webpage import
+
 
-    // Webpage import
     if (pageImportBtn !== null) {
       pm.removeButton('options', 'gjs-open-import-webpage');
     }
-  }
-
-  // disable useless export button since not all of .then(function (response) {
+  } // disable useless export button since not all of .then(function (response) {
   // template is exportet (in favour of code editor)
   // Causes issue: https://github.com/artf/grapesjs/issues/3444
   // @todo Possible workaround: hide it with css
   // editor.Panels.getButton('options', 'export-template').attributes.className = 'hide_panel_btn'
   // pm.removeButton('options', 'export-template');
-
   // Move Undo & Redo inside Commands Panel
+
+
   const undo = pm.getButton('options', 'undo');
   const redo = pm.getButton('options', 'redo');
+
   if (undo !== null) {
     pm.removeButton('options', 'undo');
     pm.addButton('commands', [{
@@ -48,11 +46,14 @@ export default ((editor, opts = {}) => {
       attributes: {
         title: 'Undo'
       },
+
       command() {
         editor.runCommand('core:undo');
       }
+
     }]);
   }
+
   if (redo !== null) {
     pm.removeButton('options', 'redo');
     pm.addButton('commands', [{
@@ -61,95 +62,103 @@ export default ((editor, opts = {}) => {
       attributes: {
         title: 'Redo'
       },
+
       command() {
         editor.runCommand('core:redo');
       }
+
     }]);
-  }
+  } // Remove preview button (because they are dublicated?)
+
 
-  // Remove preview button (because they are dublicated?)
   const preview = pm.getButton('options', 'preview');
+
   if (preview !== null) {
     pm.removeButton('options', 'preview');
-  }
+  } // Remove clear button
+
 
-  // Remove clear button
   const clear = pm.getButton('options', 'canvas-clear');
+
   if (clear !== null) {
     pm.removeButton('options', 'canvas-clear');
-  }
+  } // Remove toggle images button
+
 
-  // Remove toggle images button
   const toggleImages = pm.getButton('options', 'gjs-toggle-images');
+
   if (toggleImages !== null) {
     pm.removeButton('options', 'gjs-toggle-images');
-  }
-  // add editor preview button
+  } // add editor preview button
+
+
   const btnPreview = new ButtonPreview(editor);
   btnPreview.addCommand();
-  btnPreview.addButton();
+  btnPreview.addButton(); // add editor apply button
 
-  // add editor apply button
   const btnApply = new ButtonApply(editor);
   btnApply.addCommand();
-  btnApply.addButton();
+  btnApply.addButton(); // add editor close button
 
-  // add editor close button
   const btnClose = new ButtonClose(editor);
   btnClose.addCommand();
-  btnClose.addButton();
+  btnClose.addButton(); // Do stuff on load
 
-  // Do stuff on load
   editor.on('load', () => {
     // Hide Layers Manager
     if (!opts.showLayersManager) {
       const openLayersBtn = pm.getButton('views', 'open-layers');
+
       if (openLayersBtn !== null) {
         openLayersBtn.set('attributes', {
           style: 'display:none;'
         });
       }
-    }
+    } // Activate by default View Components button
+
 
-    // Activate by default View Components button
     const viewComponents = pm.getButton('options', 'sw-visibility');
+
     if (viewComponents) {
       viewComponents.set('active', 1);
-    }
+    } // Load and show settings and style manager
+
 
-    // Load and show settings and style manager
     if (!opts.combineSettingsAndSm) {
       const openTmBtn = pm.getButton('views', 'open-tm');
       const openSm = pm.getButton('views', 'open-sm');
+
       if (openTmBtn) {
         openTmBtn.set('active', 1);
       }
+
       if (openSm) {
         openSm.set('active', 1);
       }
-      pm.removeButton('views', 'open-tm');
 
-      // Add Settings Sector
+      pm.removeButton('views', 'open-tm'); // Add Settings Sector
+
       const traitsSector = $('<div class="gjs-sm-sector no-select">' + '<div class="gjs-sm-title"><span class="icon-settings fa fa-cog"></span> Settings</div>' + '<div class="gjs-sm-properties" style="display: none;"></div></div>');
       const traitsProps = traitsSector.find('.gjs-sm-properties');
       traitsProps.append($('.gjs-trt-traits'));
       $('.gjs-sm-sectors').before(traitsSector);
       traitsSector.find('.gjs-sm-title').on('click', () => {
         const traitStyle = traitsProps.get(0).style;
         const hidden = traitStyle.display === 'none';
+
         if (hidden) {
           traitStyle.display = 'block';
         } else {
           traitStyle.display = 'none';
         }
-      });
+      }); // Open settings
 
-      // Open settings
       traitsProps.get(0).style.display = 'block';
-    }
+    } // Open the default panel
+
 
-    // Open the default panel
     const openBlocksBtn = editor.Panels.getButton('views', defaultPanel);
+
     if (openBlocksBtn) {
       openBlocksBtn.set('active', 1);
     }