Merge branch 'development'

.gitignore

@@ -6,3 +6,4 @@ node_modules/
 *.ipr
 *.iws
 .idea/
+.vscode/

.travis.yml

@@ -1,9 +1,8 @@
 language: node_js
 node_js:
-- '9'
+- '10'
 - '8'
 - '6'
-- '4'
 before_script:
 - npm install -g gulp
 script: gulp

README.md

@@ -8,7 +8,7 @@ Changes include:
 * Guide button works when editor is in preview mode
 * Links are now `https://` by default
 * Small styling changes
-* Node 8 and Node 9 support
+* Support for Node 8 and beyond
 * Lots of refactored code
 
 My intention is to continue development on this project, improving it and keeping it alive.
@@ -22,7 +22,58 @@ Via [npm](https://www.npmjs.com/package/easymde).
 npm install easymde --save
 ```
 
-Below is the original [README](https://github.com/sparksuite/simplemde-markdown-editor/), rewrite for EasyMDE pending.
+Via the UNPKG CDN.
+```html
+<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
+<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
+```
+
+## How to use
+
+#### Loading the editor
+
+After installing and/or importing the module, you can load EasyMDE onto the first TextArea on the webpage.
+```html
+<textarea></textarea>
+<script>
+var easyMDE = new EasyMDE();
+</script>
+```
+
+Alternatively you can select a specific TextArea, via Javascript.
+```html
+<textarea id="my-text-area"></textarea>
+<script>
+var easyMDE = new EasyMDE({element: document.getElementById('my-text-area')});
+</script>
+```
+
+Or via jQuery.
+```html
+<textarea id="my-text-area"></textarea>
+<script>
+var easyMDE = new EasyMDE({element: $('#my-text-area')[0]});
+</script>
+```
+
+#### Editor functions
+
+Use EasyMDE.value() to get the content of the editor.
+```html
+<script>
+easyMDE.value();
+</script>
+```
+
+Use EasyMDE.value(val) to set the content of the editor.
+```html
+<script>
+easyMDE.value('New input for **EasyMDE**');
+</script>
+```
+
+
+Below is the original [README](https://github.com/sparksuite/simplemde-markdown-editor/), rewrite for EasyMDE in progress.
 
 # SimpleMDE - Markdown Editor
 A drop-in JavaScript textarea replacement for writing beautiful and understandable Markdown. The WYSIWYG-esque editor allows users who may be less experienced with Markdown to use familiar toolbar buttons and shortcuts. In addition, the syntax is rendered while editing to clearly show the expected result. Headings are larger, emphasized words are italicized, links are underlined, etc. SimpleMDE is one of the first editors to feature both built-in autosaving and spell checking.
@@ -277,22 +328,22 @@ var simplemde = new SimpleMDE({
 
 SimpleMDE comes with an array of predefined keyboard shortcuts, but they can be altered with a configuration option. The list of default ones is as follows:
 
-Shortcut | Action
-:------- | :-----
-*Cmd-'* | "toggleBlockquote"
-*Cmd-B* | "toggleBold"
-*Cmd-E* | "cleanBlock"
-*Cmd-H* | "toggleHeadingSmaller"
-*Cmd-I* | "toggleItalic"
-*Cmd-K* | "drawLink"
-*Cmd-L* | "toggleUnorderedList"
-*Cmd-P* | "togglePreview"
-*Cmd-Alt-C* | "toggleCodeBlock"
-*Cmd-Alt-I* | "drawImage"
-*Cmd-Alt-L* | "toggleOrderedList"
-*Shift-Cmd-H* | "toggleHeadingBigger"
-*F9* | "toggleSideBySide"
-*F11* | "toggleFullScreen"
+Shortcut (Windows / Linux) | Shortcut (macOS) | Action
+:--- | :--- | :---
+*Ctrl-'* | *Cmd-'* | "toggleBlockquote"
+*Ctrl-B* | *Cmd-B* | "toggleBold"
+*Ctrl-E* | *Cmd-E* | "cleanBlock"
+*Ctrl-H* | *Cmd-H* | "toggleHeadingSmaller"
+*Ctrl-I* | *Cmd-I* | "toggleItalic"
+*Ctrl-K* | *Cmd-K* | "drawLink"
+*Ctrl-L* | *Cmd-L* | "toggleUnorderedList"
+*Ctrl-P* | *Cmd-P* | "togglePreview"
+*Ctrl-Alt-C* | *Cmd-Alt-C* | "toggleCodeBlock"
+*Ctrl-Alt-I* | *Cmd-Alt-I* | "drawImage"
+*Ctrl-Alt-L* | *Cmd-Alt-L* | "toggleOrderedList"
+*Shift-Ctrl-H* | *Shift-Cmd-H* | "toggleHeadingBigger"
+*F9* | *F9* | "toggleSideBySide"
+*F11* | *F11* | "toggleFullScreen"
 
 Here is how you can change a few, while leaving others untouched:
 

gulpfile.js

@@ -1,16 +1,16 @@
 'use strict';
 
-var gulp = require('gulp'),
-    minifycss = require('gulp-clean-css'),
-    uglify = require('gulp-uglify'),
-    concat = require('gulp-concat'),
-    header = require('gulp-header'),
-    buffer = require('vinyl-buffer'),
-    pkg = require('./package.json'),
-    eslint = require('gulp-eslint'),
-    browserify = require('browserify'),
-    source = require('vinyl-source-stream'),
-    rename = require('gulp-rename');
+var gulp = require('gulp');
+var cleanCSS = require('gulp-clean-css');
+var uglify = require('gulp-uglify');
+var concat = require('gulp-concat');
+var header = require('gulp-header');
+var buffer = require('vinyl-buffer');
+var pkg = require('./package.json');
+var eslint = require('gulp-eslint');
+var browserify = require('browserify');
+var source = require('vinyl-source-stream');
+var rename = require('gulp-rename');
 
 var banner = ['/**',
     ' * <%= pkg.name %> v<%= pkg.version %>',
@@ -20,23 +20,23 @@ var banner = ['/**',
     ' */',
     ''].join('\n');
 
-gulp.task('lint', function () {
-    gulp.src('./src/js/**/*.js')
+function lint() {
+    return gulp.src('./src/js/**/*.js')
         .pipe(eslint())
         .pipe(eslint.format())
         .pipe(eslint.failAfterError());
-});
+}
 
-gulp.task('scripts', ['lint'], function () {
+function scripts() {
     return browserify({entries: './src/js/easymde.js', standalone: 'EasyMDE'}).bundle()
         .pipe(source('easymde.min.js'))
         .pipe(buffer())
         .pipe(uglify())
         .pipe(header(banner, {pkg: pkg}))
         .pipe(gulp.dest('./dist/'));
-});
+}
 
-gulp.task('styles', function () {
+function styles() {
     var css_files = [
         './node_modules/codemirror/lib/codemirror.css',
         './src/css/*.css',
@@ -45,11 +45,13 @@ gulp.task('styles', function () {
 
     return gulp.src(css_files)
         .pipe(concat('easymde.css'))
-        .pipe(minifycss())
+        .pipe(cleanCSS())
         .pipe(rename('easymde.min.css'))
         .pipe(buffer())
         .pipe(header(banner, {pkg: pkg}))
         .pipe(gulp.dest('./dist/'));
-});
+}
 
-gulp.task('default', ['scripts', 'styles']);
+var build = gulp.parallel(gulp.series(lint, scripts), styles);
+
+gulp.task('default', build);

package.json

@@ -1,6 +1,6 @@
 {
     "name": "easymde",
-    "version": "2.0.0",
+    "version": "2.0.1",
     "description": "A simple, beautiful, and embeddable JavaScript Markdown editor that easy to use. Features include autosaving and spell checking.",
     "keywords": [
         "embeddable",
@@ -21,9 +21,9 @@
         "marked": "0.3.19"
     },
     "devDependencies": {
-        "browserify": "^16.2.0",
-        "gulp": "^3.9.1",
-        "gulp-clean-css": "^3.9.0",
+        "browserify": "^16.2.2",
+        "gulp": "^4.0.0",
+        "gulp-clean-css": "^3.9.4",
         "gulp-concat": "^2.6.1",
         "gulp-eslint": "^4.0.0",
         "gulp-header": "^2.0.5",
@@ -35,5 +35,8 @@
     "repository": {
         "type": "git",
         "url": "https://github.com/ionaru/easy-markdown-editor"
+    },
+    "scripts": {
+        "prepublishOnly ": "gulp"
     }
 }

src/css/easymde.css

@@ -111,7 +111,6 @@
     padding: 0;
 }
 
-.editor-toolbar a,
 .editor-toolbar button {
     background: transparent;
     display: inline-block;
@@ -126,19 +125,12 @@
     cursor: pointer;
 }
 
-.editor-toolbar a.active,
-.editor-toolbar a:hover,
 .editor-toolbar button.active,
 .editor-toolbar button:hover {
     background: #fcfcfc;
     border-color: #95a5a6;
 }
 
-.editor-toolbar a:before,
-.editor-toolbar button:before {
-    line-height: 30px
-}
-
 .editor-toolbar i.separator {
     display: inline-block;
     width: 0;
@@ -149,7 +141,7 @@
     margin: 0 6px;
 }
 
-.editor-toolbar a.fa-header-x:after {
+.editor-toolbar i.fa-header-x:after {
     font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
     font-size: 65%;
     vertical-align: text-bottom;
@@ -157,23 +149,23 @@
     top: 2px;
 }
 
-.editor-toolbar a.fa-header-1:after {
+.editor-toolbar i.fa-header-1:after {
     content: "1";
 }
 
-.editor-toolbar a.fa-header-2:after {
+.editor-toolbar i.fa-header-2:after {
     content: "2";
 }
 
-.editor-toolbar a.fa-header-3:after {
+.editor-toolbar i.fa-header-3:after {
     content: "3";
 }
 
-.editor-toolbar a.fa-header-bigger:after {
+.editor-toolbar i.fa-header-bigger:after {
     content: "▲";
 }
 
-.editor-toolbar a.fa-header-smaller:after {
+.editor-toolbar i.fa-header-smaller:after {
     content: "▼";
 }
 
@@ -183,7 +175,7 @@
 }
 
 @media only screen and (max-width: 700px) {
-    .editor-toolbar a.no-mobile {
+    .editor-toolbar i.no-mobile {
         display: none;
     }
 }

src/js/easymde.js

@@ -1145,31 +1145,31 @@ var toolbarBuiltInButtons = {
     'heading-smaller': {
         name: 'heading-smaller',
         action: toggleHeadingSmaller,
-        className: 'fa fa-header fa-header-x fa-header-smaller',
+        className: 'fa fa-header fa-heading fa-header-x fa-header-smaller',
         title: 'Smaller Heading'
     },
     'heading-bigger': {
         name: 'heading-bigger',
         action: toggleHeadingBigger,
-        className: 'fa fa-header fa-header-x fa-header-bigger',
+        className: 'fa fa-header fa-heading fa-header-x fa-header-bigger',
         title: 'Bigger Heading'
     },
     'heading-1': {
         name: 'heading-1',
         action: toggleHeading1,
-        className: 'fa fa-header fa-header-x fa-header-1',
+        className: 'fa fa-header fa-heading fa-header-x fa-header-1',
         title: 'Big Heading'
     },
     'heading-2': {
         name: 'heading-2',
         action: toggleHeading2,
-        className: 'fa fa-header fa-header-x fa-header-2',
+        className: 'fa fa-header fa-heading fa-header-x fa-header-2',
         title: 'Medium Heading'
     },
     'heading-3': {
         name: 'heading-3',
         action: toggleHeading3,
-        className: 'fa fa-header fa-header-x fa-header-3',
+        className: 'fa fa-header fa-heading fa-header-x fa-header-3',
         title: 'Small Heading'
     },
     'separator-1': {