Added simple translate status bar and title toolbar. Added custom url for guide. Added onCursorActivity for update cursor position.

Signed-off-by: Dmitry Mazurov <dimabzz@gmail.com>

README.md

@@ -123,7 +123,6 @@ easyMDE.value('New input for **EasyMDE**');
   - **submit_delay**: Delay before assuming that submit of the form failed and saving the text, in milliseconds. Defaults to `autosave.delay` or `10000` (10s).
   - **uniqueId**: You must set a unique string identifier so that EasyMDE can autosave. Something that separates this from other instances of EasyMDE elsewhere on your website.
   - **timeFormat**: Set DateTimeFormat. More information see [DateTimeFormat instances](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat). Default `locale: en-US, format: hour:minute`.
-  - **text**: Set text for autosave.
 - **blockStyles**: Customize how certain buttons that style blocks of text behave.
   - **bold**: Can be set to `**` or `__`. Defaults to `**`.
   - **code**: Can be set to  ```` ``` ```` or `~~~`.  Defaults to ```` ``` ````.
@@ -188,11 +187,13 @@ easyMDE.value('New input for **EasyMDE**');
 - **nativeSpellcheck**: If set to `false`, disable native spell checker. Defaults to `true`.
 - **status**: If set to `false`, hide the status bar. Defaults to the array of built-in status bar items.
   - Optionally, you can set an array of status bar items to include, and in what order. You can even define your own custom status bar items.
+- **statusTexts**: Customize the text used to status bar.
 - **styleSelectedText**: If set to `false`, remove the `CodeMirror-selectedtext` class from selected lines. Defaults to `true`.
 - **syncSideBySidePreviewScroll**: If set to `false`, disable syncing scroll in side by side mode. Defaults to `true`.
 - **tabSize**: If set, customize the tab size. Defaults to `2`.
 - **theme**: Override the theme. Defaults to `easymde`.
 - **toolbar**: If set to `false`, hide the toolbar. Defaults to the [array of icons](#toolbar-icons).
+- **toolbarTitles**: Customize the title used to toolbar.
 - **toolbarTips**: If set to `false`, disable toolbar button tips. Defaults to `true`.
 
 
@@ -218,7 +219,6 @@ var editor = new EasyMDE({
 				minute: '2-digit',
 			},
 		},
-		text: "Autosaved: "
 	},
 	blockStyles: {
 		bold: "__",
@@ -287,10 +287,18 @@ var editor = new EasyMDE({
 			el.innerHTML = ++this.keystrokes + " Keystrokes";
 		},
 	}], // Another optional usage, with a custom status bar item that counts keystrokes
+	statusTexts: {
+		lines: "lines: ",
+		words: "words: ",
+		autosave: "Autosaved: ",
+	},
 	styleSelectedText: false,
 	syncSideBySidePreviewScroll: false,
 	tabSize: 4,
 	toolbar: false,
+	toobarTitles: {
+		"bold": {"title": "Bold"},
+	},
 	toolbarTips: false,
 });
 ```

src/css/easymde.css

@@ -202,11 +202,11 @@
 }
 
 .editor-statusbar .lines:before {
-    content: 'lines: '
+    content: attr(data-status-bar-before);
 }
 
 .editor-statusbar .words:before {
-    content: 'words: '
+    content: attr(data-status-bar-before);
 }
 
 .editor-statusbar .characters:before {

src/js/easymde.js

@@ -1489,6 +1489,12 @@ var promptTexts = {
     image: 'URL of the image:',
 };
 
+var statusTexts = {
+    lines: 'lines: ',
+    words: 'words: ',
+    autosave: 'Autosaved: ',
+};
+
 var timeFormat = {
     locale: 'en-US',
     format: {
@@ -1564,6 +1570,10 @@ function EasyMDE(options) {
         document.getElementsByTagName('head')[0].appendChild(link);
     }
 
+    if (options.markdownUrl != undefined) {
+        toolbarBuiltInButtons.guide.action = options.markdownUrl;
+    }
+
 
     // Find the textarea to use
     if (options.element) {
@@ -1633,6 +1643,10 @@ function EasyMDE(options) {
     options.promptTexts = extend({}, promptTexts, options.promptTexts || {});
 
 
+    // Merging the statusTexts, with the given options
+    options.statusTexts = extend({}, statusTexts, options.statusTexts || {});
+
+
     // Merging the blockStyles, with the given options
     options.blockStyles = extend({}, blockStyles, options.blockStyles || {});
 
@@ -2025,7 +2039,7 @@ EasyMDE.prototype.autosave = function () {
         if (el != null && el != undefined && el != '') {
             var d = new Date();
             var dd = new Intl.DateTimeFormat([this.options.autosave.timeFormat.locale, 'en-US'], this.options.autosave.timeFormat.format).format(d);
-            var save = this.options.autosave.text == undefined ? 'Autosaved: ' : this.options.autosave.text;
+            var save = this.options.statusTexts.autosave;
 
             el.innerHTML = save + dd;
         }
@@ -2265,7 +2279,11 @@ EasyMDE.prototype.createToolbar = function (items) {
     var i;
     for (i = 0; i < items.length; i++) {
         if (toolbarBuiltInButtons[items[i]] != undefined) {
-            items[i] = toolbarBuiltInButtons[items[i]];
+            if (this.options.toolbarTitles != undefined && this.options.toolbarTitles[items[i]] != undefined) {
+                items[i] = extend({}, toolbarBuiltInButtons[items[i]], this.options.toolbarTitles[items[i]]);
+            } else {
+                items[i] = toolbarBuiltInButtons[items[i]];
+            }
         }
     }
 
@@ -2372,25 +2390,31 @@ EasyMDE.prototype.createStatusbar = function (status) {
 
     // Set up the built-in items
     var items = [];
-    var i, onUpdate, defaultValue;
+    var i, onUpdate, onCursorActivity, defaultValue, dataSet;
 
     for (i = 0; i < status.length; i++) {
         // Reset some values
         onUpdate = undefined;
+        onCursorActivity = undefined;
         defaultValue = undefined;
+        dataSet = undefined;
 
 
         // Handle if custom or not
         if (typeof status[i] === 'object') {
             items.push({
                 className: status[i].className,
+                dataSet: status[i].dataSet,
                 defaultValue: status[i].defaultValue,
                 onUpdate: status[i].onUpdate,
+                onCursorActivity: status[i].onCursorActivity,
             });
         } else {
             var name = status[i];
 
             if (name === 'words') {
+                dataSet = options.statusTexts[name];
+
                 defaultValue = function (el) {
                     el.innerHTML = wordCount(cm.getValue());
                 };
@@ -2398,6 +2422,8 @@ EasyMDE.prototype.createStatusbar = function (status) {
                     el.innerHTML = wordCount(cm.getValue());
                 };
             } else if (name === 'lines') {
+                dataSet = options.statusTexts[name];
+
                 defaultValue = function (el) {
                     el.innerHTML = cm.lineCount();
                 };
@@ -2412,6 +2438,11 @@ EasyMDE.prototype.createStatusbar = function (status) {
                     var pos = cm.getCursor();
                     el.innerHTML = pos.line + ':' + pos.ch;
                 };
+                onCursorActivity = function (el) {
+                    var pos = cm.getCursor();
+                    
+                    el.innerHTML = pos.line + ':' + pos.ch;
+                };
             } else if (name === 'autosave') {
                 defaultValue = function (el) {
                     if (options.autosave != undefined && options.autosave.enabled === true) {
@@ -2426,8 +2457,10 @@ EasyMDE.prototype.createStatusbar = function (status) {
 
             items.push({
                 className: name,
+                dataSet: dataSet,
                 defaultValue: defaultValue,
                 onUpdate: onUpdate,
+                onCursorActivity: onCursorActivity,
             });
         }
     }
@@ -2449,6 +2482,11 @@ EasyMDE.prototype.createStatusbar = function (status) {
         el.className = item.className;
 
 
+        if (item.dataSet != undefined) {
+            el.dataset.statusBarBefore = item.dataSet;
+        }
+
+
         // Ensure the defaultValue is a function
         if (typeof item.defaultValue === 'function') {
             item.defaultValue(el);
@@ -2466,6 +2504,17 @@ EasyMDE.prototype.createStatusbar = function (status) {
         }
 
 
+        // Ensure the onCursorActivity is a function
+        if (typeof item.onCursorActivity === 'function') {
+            // Create a closure around the span of the current action, then execute the onCursorActivity handler
+            this.codemirror.on('cursorActivity', (function (el, item) {
+                    return function () {
+                        item.onCursorActivity(el);
+                    };
+            }(el, item)));
+        }
+
+
         // Append the item to the status bar
         bar.appendChild(el);
     }