Update README with some more modern JS

README.md

@@ -51,7 +51,7 @@ The editor is entirely customizable, from theming to toolbar buttons and javascr
 Via [npm](https://www.npmjs.com/package/easymde):
 
 ```
-npm install easymde --save
+npm install easymde
 ```
 
 Via the *UNPKG* CDN:
@@ -61,6 +61,11 @@ Via the *UNPKG* CDN:
 <script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
 ```
 
+Or *jsDelivr*:
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
+<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
+```
 
 ## How to use
 
@@ -71,7 +76,7 @@ After installing and/or importing the module, you can load EasyMDE onto the firs
 ```html
 <textarea></textarea>
 <script>
-var easyMDE = new EasyMDE();
+const easyMDE = new EasyMDE();
 </script>
 ```
 
@@ -80,7 +85,7 @@ 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')});
+const easyMDE = new EasyMDE({element: document.getElementById('my-text-area')});
 </script>
 ```
 
@@ -89,7 +94,7 @@ Or via jQuery:
 ```html
 <textarea id="my-text-area"></textarea>
 <script>
-var easyMDE = new EasyMDE({element: $('#my-text-area')[0]});
+const easyMDE = new EasyMDE({element: $('#my-text-area')[0]});
 </script>
 ```
 
@@ -214,7 +219,7 @@ easyMDE.value('New input for **EasyMDE**');
 Most options demonstrate the non-default behavior:
 
 ```JavaScript
-var editor = new EasyMDE({
+const editor = new EasyMDE({
 	autofocus: true,
 	autosave: {
 		enabled: true,
@@ -245,7 +250,7 @@ var editor = new EasyMDE({
 	insertTexts: {
 		horizontalRule: ["", "\n\n-----\n\n"],
 		image: ["![](http://", ")"],
-		link: ["[", "](http://)"],
+		link: ["[", "](https://)"],
 		table: ["", "\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text     | Text      | Text     |\n\n"],
 	},
 	lineWrapping: false,
@@ -260,11 +265,9 @@ var editor = new EasyMDE({
 	previewClass: "my-custom-styling",
 	previewClass: ["my-custom-styling", "more-custom-styling"],
 
-	previewRender: function(plainText) {
-		return customMarkdownParser(plainText); // Returns HTML from a custom parser
-	},
-	previewRender: function(plainText, preview) { // Async method
-		setTimeout(function(){
+	previewRender: (plainText) => customMarkdownParser(plainText), // Returns HTML from a custom parser
+	previewRender: (plainText, preview) => { // Async method
+		setTimeout(() => {
 			preview.innerHTML = customMarkdownParser(plainText);
 		}, 250);
 
@@ -278,7 +281,7 @@ var editor = new EasyMDE({
 	renderingConfig: {
 		singleLineBreaks: false,
 		codeSyntaxHighlighting: true,
-		sanitizerFunction: function(renderedHTML) {
+		sanitizerFunction: (renderedHTML) => {
 			// Using DOMPurify and only allowing <b> tags
 			return DOMPurify.sanitize(renderedHTML, {ALLOWED_TAGS: ['b']})
 		},
@@ -292,13 +295,14 @@ var editor = new EasyMDE({
 	status: ["autosave", "lines", "words", "cursor"], // Optional usage
 	status: ["autosave", "lines", "words", "cursor", {
 		className: "keystrokes",
-		defaultValue: function(el) {
-			this.keystrokes = 0;
-			el.innerHTML = "0 Keystrokes";
-		},
-		onUpdate: function(el) {
-			el.innerHTML = ++this.keystrokes + " Keystrokes";
-		},
+        defaultValue: (el) => {
+            el.setAttribute('data-keystrokes', 0);
+        },
+        onUpdate: (el) => {
+            let keystrokes = Number(el.getAttribute('data-keystrokes')) + 1;
+            el.innerHTML = keystrokes + " Keystrokes";
+            el.setAttribute('data-keystrokes', keystrokes);
+        },
 	}], // Another optional usage, with a custom status bar item that counts keystrokes
 	styleSelectedText: false,
 	sideBySideFullscreen: false,
@@ -349,7 +353,7 @@ Customize the toolbar using the `toolbar` option.
 Only the order of existing buttons:
 
 ```JavaScript
-var easyMDE = new EasyMDE({
+const easyMDE = new EasyMDE({
 	toolbar: ["bold", "italic", "heading", "|", "quote"]
 });
 ```
@@ -357,7 +361,7 @@ var easyMDE = new EasyMDE({
 All information and/or add your own icons
 
 ```Javascript
-var easyMDE = new EasyMDE({
+const easyMDE = new EasyMDE({
 	toolbar: [{
 			name: "bold",
 			action: EasyMDE.toggleBold,
@@ -381,7 +385,7 @@ var easyMDE = new EasyMDE({
 Put some buttons on dropdown menu
 
 ```Javascript
-var easyMDE = new EasyMDE({
+const easyMDE = new EasyMDE({
 	toolbar: [{
                 name: "heading",
                 action: EasyMDE.toggleHeadingSmaller,
@@ -443,7 +447,7 @@ Shortcut (Windows / Linux) | Shortcut (macOS) | Action
 Here is how you can change a few, while leaving others untouched:
 
 ```JavaScript
-var editor = new EasyMDE({
+const editor = new EasyMDE({
 	shortcuts: {
 		"toggleOrderedList": "Ctrl-Alt-K", // alter the shortcut for toggleOrderedList
 		"toggleCodeBlock": null, // unbind Ctrl-Alt-C
@@ -464,7 +468,7 @@ The list of actions that can be bound is the same as the list of built-in action
 You can catch the following list of events: https://codemirror.net/doc/manual.html#events
 
 ```JavaScript
-var easyMDE = new EasyMDE();
+const easyMDE = new EasyMDE();
 easyMDE.codemirror.on("change", function(){
 	console.log(easyMDE.value());
 });
@@ -476,7 +480,7 @@ easyMDE.codemirror.on("change", function(){
 You can revert to the initial text area by calling the `toTextArea` method. Note that this clears up the autosave (if enabled) associated with it. The text area will retain any text from the destroyed EasyMDE instance.
 
 ```JavaScript
-var easyMDE = new EasyMDE();
+const easyMDE = new EasyMDE();
 // ...
 easyMDE.toTextArea();
 easyMDE = null;
@@ -490,7 +494,7 @@ If you need to remove installed listeners (when editor not needed anymore), call
 The following self-explanatory methods may be of use while developing with EasyMDE.
 
 ```js
-var easyMDE = new EasyMDE();
+const easyMDE = new EasyMDE();
 easyMDE.isPreviewActive(); // returns boolean
 easyMDE.isSideBySideActive(); // returns boolean
 easyMDE.isFullscreenActive(); // returns boolean

example/index.html

@@ -13,7 +13,7 @@
 <body>
     <textarea></textarea>
     <script>
-        var easyMDE = new EasyMDE();
+        const easyMDE = new EasyMDE();
     </script>
 </body>
 

example/index_sideBySideFullscreenFalse.html

@@ -13,7 +13,7 @@
 <body>
     <textarea></textarea>
     <script>
-        var easyMDE = new EasyMDE({sideBySideFullscreen: false});
+        const easyMDE = new EasyMDE({sideBySideFullscreen: false});
     </script>
 </body>