GrapeJS v0.5.41

GrapesJS Preset Newsletter v0.2.3
GrapeJS MJML v0.0.7
...

public/grapejs/dist/css/grapesjs-mjml.css

@@ -0,0 +1,248 @@
+.gjs-clm-tags .gjs-sm-title,
+.gjs-sm-sector .gjs-sm-title {
+  border-top: none;
+}
+
+.gjs-clm-tags .gjs-clm-tag {
+  /* background-color: $tag-color; */
+  border: none;
+  box-shadow: none;
+  padding: 5px 8px;
+  text-shadow: none;
+}
+
+.gjs-field {
+  background-color: rgba(0, 0, 0, 0.15);
+  box-shadow: none;
+}
+
+.gjs-btnt.gjs-pn-active,
+.gjs-pn-btn.gjs-pn-active {
+  box-shadow: none;
+}
+
+.gjs-pn-btn:hover {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.gjs-btnt.gjs-pn-active,
+.gjs-color-active,
+.gjs-pn-btn.gjs-pn-active,
+.gjs-pn-btn:active,
+.gjs-block:hover {
+  color: #f45e43; /* #f46d4c,#e4505d */
+}
+
+#gjs-rte-toolbar .gjs-rte-btn,
+.gjs-btn-prim,
+.gjs-btnt,
+.gjs-clm-tags .gjs-sm-composite.gjs-clm-field,
+.gjs-clm-tags .gjs-sm-field.gjs-sm-composite,
+.gjs-clm-tags .gjs-sm-stack #gjs-sm-add,
+.gjs-color-main,
+.gjs-mdl-dialog,
+.gjs-off-prv,
+.gjs-pn-btn,
+.gjs-pn-panel,
+.gjs-sm-sector .gjs-sm-composite.gjs-clm-field,
+.gjs-sm-sector .gjs-sm-field.gjs-sm-composite,
+.gjs-sm-sector .gjs-sm-stack #gjs-sm-add {
+  color: #888686;
+}
+
+#gjs-rte-toolbar,
+.gjs-bg-main,
+.gjs-clm-select option,
+.gjs-clm-tags .gjs-sm-colorp-c,
+.gjs-editor,
+.gjs-mdl-dialog,
+.gjs-nv-item .gjs-nv-title-c,
+.gjs-off-prv,
+.gjs-pn-panel,
+.gjs-select option,
+.gjs-sm-sector .gjs-sm-colorp-c,
+.gjs-sm-select option,
+.gjs-sm-unit option,
+.sp-container,
+.gjs-block {
+  background-color: #2c2e35;
+}
+
+.gjs-import-label,
+.gjs-export-label {
+  margin-bottom: 10px;
+  font-size: 13px;
+}
+
+.gjs-mdl-dialog .gjs-btn-import {
+  margin-top: 10px;
+}
+
+.CodeMirror {
+  border-radius: 3px;
+  height: 450px;
+  font-family: sans-serif, monospace;
+  letter-spacing: 0.3px;
+  font-size: 12px;
+}
+
+/* Extra */
+
+.gjs-block {
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+  margin: 10px 2.5% 5px;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
+  transition: box-shadow 0.2s ease 0s;
+}
+
+.gjs-block:hover {
+  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
+}
+
+#gjs-pn-views-container.gjs-pn-panel {
+  padding: 39px 0 0;
+}
+
+#gjs-pn-views.gjs-pn-panel {
+  padding: 0;
+  border: none;
+}
+
+#gjs-pn-views .gjs-pn-btn {
+  margin: 0;
+  height: 40px;
+  padding: 10px;
+  width: 25%;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
+}
+
+#gjs-pn-views .gjs-pn-active {
+  /*
+  color: rgba(255, 255, 255, 0.9);
+  border-bottom: 2px solid #f45e43;
+  */
+  border-radius: 0;
+}
+
+#gjs-pn-devices-c {
+  padding-left: 30px;
+}
+
+#gjs-pn-options {
+  padding-right: 30px;
+}
+
+.gjs-sm-composite .gjs-sm-properties {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+}
+
+#gjs-sm-border-top-left-radius,
+#gjs-sm-border-top-right-radius,
+#gjs-sm-border-bottom-left-radius,
+#gjs-sm-border-bottom-right-radius,
+#gjs-sm-margin-top,
+#gjs-sm-margin-bottom,
+#gjs-sm-margin-right,
+#gjs-sm-margin-left,
+#gjs-sm-padding-top,
+#gjs-sm-padding-bottom,
+#gjs-sm-padding-right,
+#gjs-sm-padding-left {
+  flex: 999 1 60px;
+}
+
+#gjs-sm-border-width,
+#gjs-sm-border-style,
+#gjs-sm-border-color {
+  flex: 999 1 80px;
+}
+
+#gjs-sm-margin-left,
+#gjs-sm-padding-left {
+  order: 2;
+}
+
+#gjs-sm-margin-right,
+#gjs-sm-padding-right {
+  order: 3;
+}
+
+#gjs-sm-margin-bottom,
+#gjs-sm-padding-bottom {
+  order: 4;
+}
+
+.gjs-field-radio {
+  width: 100%;
+}
+
+.gjs-field-radio #gjs-sm-input-holder {
+  display: flex;
+}
+
+.gjs-radio-item {
+  flex: 1 0 auto;
+  text-align: center;
+}
+
+.gjs-sm-sector .gjs-sm-property.gjs-sm-list {
+  width: 50%;
+}
+
+.gjs-mdl-content {
+  border-top: none;
+}
+
+.gjs-sm-sector .gjs-sm-property .gjs-sm-layer.gjs-sm-active {
+  background-color: rgba(255, 255, 255, 0.09);
+}
+
+/*
+
+#gjs-pn-views-container,
+#gjs-pn-views{
+  min-width: 270px;
+}
+*/
+
+.gjs-f-button::before { content: 'B'; }
+.gjs-f-divider::before { content: 'D'; }
+
+.gjs-mdl-dialog-sm {
+  width: 300px;
+}
+
+.gjs-mdl-dialog form .gjs-sm-property {
+  font-size: 12px;
+  margin-bottom: 15px;
+}
+
+.gjs-mdl-dialog form .gjs-sm-label {
+  margin-bottom: 5px;
+}
+
+.anim-spin {
+  animation: 0.5s linear 0s normal none infinite running spin;
+}
+
+.form-status {
+  float: right;
+  font-size: 14px;
+}
+
+.text-danger {
+  color: #f92929;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

public/grapejs/dist/css/grapesjs-preset-newsletter.css

@@ -54,14 +54,13 @@
 .gjs-nv-item .gjs-nv-title-c,
 .gjs-off-prv,
 .gjs-pn-panel,
+.gjs-block,
 .gjs-select option,
 .gjs-sm-sector .gjs-sm-colorp-c,
 .gjs-sm-select option,
 .gjs-sm-unit option,
-.sp-container,
-.gjs-block {
-  background-color: #373d49;
-}
+.sp-container {
+  background-color: #373d49; }
 
 .gjs-import-label,
 .gjs-export-label {
@@ -79,18 +78,15 @@
   font-size: 12px; }
 
 /* Extra */
-
 .gjs-block {
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 3px;
   margin: 10px 2.5% 5px;
   box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
-  transition: box-shadow 0.2s ease 0s;
-}
+  transition: box-shadow, color 0.2s ease 0s; }
 
 .gjs-block:hover {
-  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
-}
+  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15); }
 
 #gjs-pn-views-container.gjs-pn-panel {
   padding: 39px 0 0; }

public/grapejs/dist/js/grapesjs-preset-mjml.js

@@ -0,0 +1,124 @@
+grapesjs.plugins.add('gjs-preset-mjml', (editor, opts) => {
+  var opt = opts || {};
+  var config = editor.getConfig();
+
+  config.showDevices = 0;
+
+  var updateTooltip = function(coll, pos) {
+    coll.each(function(item) {
+      var attrs = item.get('attributes');
+      attrs['data-tooltip-pos'] = pos || 'bottom';
+      item.set('attributes', attrs);
+    });
+  }
+
+
+  /****************** COMMANDS *************************/
+
+  var cmdm = editor.Commands;
+  cmdm.add('undo', {
+    run: function(editor, sender) {
+      sender.set('active', 0);
+      editor.UndoManager.undo(1);
+    }
+  });
+  cmdm.add('redo', {
+    run: function(editor, sender) {
+      sender.set('active', 0);
+      editor.UndoManager.redo(1);
+    }
+  });
+  cmdm.add('set-device-desktop', {
+    run: function(editor) {
+      editor.setDevice('Desktop');
+    }
+  });
+  cmdm.add('set-device-mobile', {
+    run: function(editor) {
+      editor.setDevice('Mobile');
+    }
+  });
+  cmdm.add('clean-all', {
+    run: function(editor, sender) {
+      sender && sender.set('active',false);
+      if (confirm('Are you sure you want to clean the canvas?')) {
+        editor.setComponents('<mj-container><mj-section><mj-column>'+
+          '<mj-text>Start from here</mj-text></mj-column></mj-section></mj-container>');
+        localStorage.setItem('gjs-mjml-css', '');
+        localStorage.setItem('gjs-mjml-html', '');
+      }
+    }
+  });
+
+  /****************** BUTTONS *************************/
+
+  var pnm = editor.Panels;
+  pnm.addButton('options', [{
+    id: 'undo',
+    className: 'fa fa-undo icon-undo',
+    command: 'undo',
+    attributes: { title: 'Undo (CTRL/CMD + Z)'}
+  },{
+    id: 'redo',
+    className: 'fa fa-repeat icon-redo',
+    command: 'redo',
+    attributes: { title: 'Redo (CTRL/CMD + SHIFT + Z)' }
+  },{
+    id: 'clean-all',
+    className: 'fa fa-trash icon-blank',
+    command: 'clean-all',
+    attributes: { title: 'Empty canvas' }
+  }]);
+
+  // Add devices buttons
+  var panelDevices = pnm.addPanel({id: 'devices-c'});
+  var deviceBtns = panelDevices.get('buttons');
+  deviceBtns.add([{
+    id: 'deviceDesktop',
+    command: 'set-device-desktop',
+    className: 'fa fa-desktop',
+    attributes: {'title': 'Desktop'},
+    active: 1,
+  },{
+    id: 'deviceMobile',
+    command: 'set-device-mobile',
+    className: 'fa fa-mobile',
+    attributes: {'title': 'Mobile'},
+  }]);
+
+  // Remove preview and code button
+  let prvBtn = pnm.addButton('options', 'preview');
+  let optPanel = pnm.getPanel('options');
+  let cmdBtns = optPanel.get('buttons');
+  prvBtn && cmdBtns.remove(prvBtn);
+
+  updateTooltip(deviceBtns);
+  updateTooltip(pnm.getPanel('options').get('buttons'));
+  updateTooltip(pnm.getPanel('options').get('buttons'));
+  updateTooltip(pnm.getPanel('views').get('buttons'));
+
+
+
+  /****************** EVENTS *************************/
+
+  // On component change show the Style Manager
+  editor.on('change:selectedComponent', function() {
+    var openLayersBtn = editor.Panels.getButton('views', 'open-layers');
+
+    // Don't switch when the Layer Manager is on or
+    // there is no selected component
+    if((!openLayersBtn || !openLayersBtn.get('active')) &&
+      editor.editor.get('selectedComponent')) {
+      var openSmBtn = editor.Panels.getButton('views', 'open-sm');
+      openSmBtn && openSmBtn.set('active', 1);
+    }
+  });
+
+  // Do stuff on load
+  editor.on('load', function() {
+    // Open block manager
+    var openBlocksBtn = editor.Panels.getButton('views', 'open-blocks');
+    openBlocksBtn && openBlocksBtn.set('active', 1);
+  });
+
+});