Update export-template command, fixes GrapesJS/grapesjs#353

GrapesJS · Sep 29, 2017 · 9852147 · 9852147
1 parent 7de22c0
commit 9852147
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -56,6 +56,7 @@ Download using one of the options:
 
 * `npm i grapesjs-preset-newsletter` or `yarn add grapesjs-preset-newsletter`
 * Latest release link https://github.com/artf/grapesjs-preset-newsletter/releases/latest
+* CDN https://unpkg.com/grapesjs-preset-newsletter
 
 
 ## Usage

diff --git a/dist/grapesjs-preset-newsletter.css b/dist/grapesjs-preset-newsletter.css
@@ -1,4 +1,5 @@
-/* #008f73 #4c9790 */
+/* Class names prefixes */
+/* Colors / Theme */
 .gjs-clm-tags .gjs-sm-title,
 .gjs-sm-sector .gjs-sm-title {
   border-top: none; }
@@ -42,8 +43,7 @@
 .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: #a0aabf;
-  /* #a0aabf #d0d6e2 */ }
+  color: #a0aabf; }
 
 #gjs-rte-toolbar,
 .gjs-bg-main,

diff --git a/index.html b/index.html
@@ -3,14 +3,14 @@
   <head>
     <meta charset="utf-8">
     <title>GrapesJS Newsletter Editor</title>
-    <link rel="stylesheet" href="./node_modules/grapesjs/dist/css/grapes.min.css">
+    <link rel="stylesheet" href="//unpkg.com/grapesjs@0.10.7/dist/css/grapes.min.css">
     <link rel="stylesheet" href="./style/material.css">
     <link rel="stylesheet" href="./style/tooltip.css">
     <link rel="stylesheet" href="./style/toastr.min.css">
     <link rel="stylesheet" href="./dist/grapesjs-preset-newsletter.css">
 
-    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
-    <script src="./node_modules/grapesjs/dist/grapes.min.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="//unpkg.com/grapesjs@0.10.7/dist/grapes.min.js"></script>
     <script src="./dist/grapesjs-preset-newsletter.min.js"></script>
     <script src="./js/toastr.min.js"></script>
 

diff --git a/package.json b/package.json
@@ -5,10 +5,10 @@
   "main": "dist/grapesjs-preset-newsletter.min.js",
   "scripts": {
     "lint": "eslint src",
-    "build": "WEBPACK_ENV=prod && npm run v:patch && webpack && npm run build:css",
+    "build": "cross-env WEBPACK_ENV=prod && npm run v:patch && webpack && npm run build:css",
     "build:css": "node-sass src/style/main.scss dist/grapesjs-preset-newsletter.css",
     "v:patch": "npm version --no-git-tag-version patch",
-    "start": "WEBPACK_ENV=dev ./node_modules/.bin/webpack-dev-server --progress --colors & npm run build:css -- -w"
+    "start": "cross-env WEBPACK_ENV=dev ./node_modules/.bin/webpack-dev-server --progress --colors & npm run build:css -- -w"
   },
   "keywords": [
     "grapesjs",

diff --git a/src/commands.js b/src/commands.js
@@ -7,8 +7,13 @@ define(function() {
     let tglImagesCommand = require('./toggleImagesCommand');
     cmdm.add(opt.cmdOpenImport, importCommand(opt));
     cmdm.add(opt.cmdTglImages, tglImagesCommand(opt));
-    // Overwrite export template
-    cmdm.add('export-template', exportCommand(opt));
+
+    // Overwrite export template after the editor is loaded
+    // (default commands are loaded after plugins)
+    editor.on('load', () => {
+      cmdm.add('export-template', exportCommand(opt));
+    });
+
     cmdm.add('undo', {
       run(editor, sender) {
         sender.set('active', 0);

diff --git a/src/openExportCommand.js b/src/openExportCommand.js
@@ -39,13 +39,12 @@ define(function() {
           viewer = codeViewer.editor;
           viewer.setOption('lineWrapping', 1);
         }
-        md.setContent('');
         md.setContent(container);
         const tmpl = editor.getHtml() + `<style>${editor.getCss()}</style>`;
         codeViewer.setContent(opt.inlineCss ? juice(tmpl) : tmpl);
         md.open();
         viewer.refresh();
-        sender && sender.set('active', 0);
+        sender && sender.set && sender.set('active', 0);
       },
     }
   };

diff --git a/src/style/_gjs_variables.scss b/src/style/_gjs_variables.scss
@@ -4,5 +4,6 @@ $app-prefix:        'gjs-' !default;
 /* Colors / Theme */
 
 $mainColor:         #373d49 !default;
+$fontColor:         #a0aabf !default;
 $active-color:      #35d7bb !default;
 $tag-color:         #4c9790 !default;
diff --git a/src/style/main.scss b/src/style/main.scss
@@ -49,7 +49,7 @@
 .#{$app-prefix}sm-sector .#{$app-prefix}sm-composite.#{$app-prefix}clm-field,
 .#{$app-prefix}sm-sector .#{$app-prefix}sm-field.#{$app-prefix}sm-composite,
 .#{$app-prefix}sm-sector .#{$app-prefix}sm-stack #gjs-sm-add {
-  color: #a0aabf; /* #a0aabf #d0d6e2 */
+  color: $fontColor;
 }
 
 #gjs-rte-toolbar,