diff --git a/README.md b/README.md index 6e05f16..d981455 100644 --- 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 index 13f90f6..9776fcc 100644 --- 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 index 5ba5870..698b7dd 100644 --- a/index.html +++ b/index.html @@ -3,14 +3,14 @@ GrapesJS Newsletter Editor - + - - + + diff --git a/package.json b/package.json index f1d6451..9e241c2 100644 --- 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 index d20cd1c..d71cc7a 100644 --- 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 index 8b956ae..e8f61bd 100644 --- 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() + ``; 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 index 2612e14..2bd2a53 100644 --- 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 index ff4f517..066e695 100644 --- 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,