add char counter + max length

src/css/easymde.css

@@ -32,7 +32,7 @@
 }
 
 .CodeMirror-placeholder {
-    opacity: .5;
+  opacity: 0.5;
 }
 
 .CodeMirror-focused .CodeMirror-selected {
@@ -57,16 +57,16 @@
 .editor-toolbar:after,
 .editor-toolbar:before {
   display: block;
-    content: ' ';
+  content: " ";
   height: 1px;
 }
 
 .editor-toolbar:before {
-    margin-bottom: 8px
+  margin-bottom: 8px;
 }
 
 .editor-toolbar:after {
-    margin-top: 8px
+  margin-top: 8px;
 }
 
 .editor-toolbar.fullscreen {
@@ -91,7 +91,13 @@
   width: 20px;
   height: 50px;
   background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
-    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
+  background: -webkit-gradient(
+    linear,
+    left top,
+    right top,
+    color-stop(0%, rgba(255, 255, 255, 1)),
+    color-stop(100%, rgba(255, 255, 255, 0))
+  );
   background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
   background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
   background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
@@ -107,7 +113,13 @@
   width: 20px;
   height: 50px;
   background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
-    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
+  background: -webkit-gradient(
+    linear,
+    left top,
+    right top,
+    color-stop(0%, rgba(255, 255, 255, 0)),
+    color-stop(100%, rgba(255, 255, 255, 1))
+  );
   background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
   background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
   background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
@@ -160,7 +172,13 @@
   width: 20px;
   height: 50px;
   background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
-    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
+  background: -webkit-gradient(
+    linear,
+    left top,
+    right top,
+    color-stop(0%, rgba(255, 255, 255, 1)),
+    color-stop(100%, rgba(255, 255, 255, 0))
+  );
   background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
   background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
   background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
@@ -176,7 +194,13 @@
   width: 20px;
   height: 50px;
   background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
-    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
+  background: -webkit-gradient(
+    linear,
+    left top,
+    right top,
+    color-stop(0%, rgba(255, 255, 255, 0)),
+    color-stop(100%, rgba(255, 255, 255, 1))
+  );
   background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
   background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
   background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
@@ -271,7 +295,7 @@
 }
 
 .editor-toolbar.disabled-for-preview button:not(.no-disable) {
-    opacity: .6;
+  opacity: 0.6;
   pointer-events: none;
 }
 
@@ -295,15 +319,19 @@
 }
 
 .editor-statusbar .lines:before {
-    content: 'lines: '
+  content: "lines: ";
 }
 
 .editor-statusbar .words:before {
-    content: 'words: '
+  content: "words: ";
 }
 
 .editor-statusbar .characters:before {
-    content: 'characters: '
+  content: "characters: ";
+}
+
+.editor-statusbar .characters.max-length-exceeded .counter {
+  color: red;
 }
 
 .editor-preview-full {
@@ -333,11 +361,11 @@
 }
 
 .editor-preview-active-side {
-    display: block
+  display: block;
 }
 
 .editor-preview-active {
-    display: block
+  display: block;
 }
 
 .editor-preview {
@@ -346,7 +374,7 @@
 }
 
 .editor-preview > p {
-    margin-top: 0
+  margin-top: 0;
 }
 
 .editor-preview pre {
@@ -393,7 +421,7 @@
 }
 
 .cm-s-easymde .cm-comment {
-    background: rgba(0, 0, 0, .05);
+  background: rgba(0, 0, 0, 0.05);
   border-radius: 2px;
 }
 

src/js/easymde.js

@@ -1240,6 +1240,23 @@ function wordCount(data) {
     return count;
 }
 
+function maxLengthCount(el, value, options) {
+    el.innerHTML = '';
+    var counter = document.createElement('span');
+    counter.classList.add('counter');
+    counter.innerHTML = String(value.length);
+    el.append(counter);
+    if (undefined !== options.maxLength && options.maxLength > 0) {
+        var maxLength = document.createElement('span');
+        maxLength.classList.add('max-length');
+        if (value.length > options.maxLength) {
+            el.classList.add('max-length-exceeded');
+        }
+        maxLength.innerHTML = String(' / ' + options.maxLength);
+        el.append(maxLength);
+    }
+}
+
 var toolbarBuiltInButtons = {
     'bold': {
         name: 'bold',
@@ -2362,6 +2379,13 @@ EasyMDE.prototype.createStatusbar = function (status) {
                     var pos = cm.getCursor();
                     el.innerHTML = pos.line + ':' + pos.ch;
                 };
+            } else if (name === 'characters') {
+                defaultValue = function (el) {
+                    maxLengthCount(el, 0, options);
+                };
+                onUpdate = function (el) {
+                    maxLengthCount(el, cm.getValue(), options);
+                };
             } else if (name === 'autosave') {
                 defaultValue = function (el) {
                     if (options.autosave != undefined && options.autosave.enabled === true) {