Merge 5344b3a1b5763841f97344a1d3767c58c9495b8e into 6d173d0024dc86974ac1d0aa4baae108cc096867

README.md

@@ -125,7 +125,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 ```` ``` ````.
@@ -143,6 +142,7 @@ easyMDE.value('New input for **EasyMDE**');
   - table
 - **lineWrapping**: If set to `false`, disable line wrapping. Defaults to `true`.
 - **minHeight**: Sets the minimum height for the composition area, before it starts auto-growing. Should be a string containing a valid CSS value like `"500px"`. Defaults to `"300px"`.
+- **markdownUrl**: Customize url for guide.
 - **maxHeight**: Sets fixed height for the composition area. `minHeight` option will be ignored. Should be a string containing a valid CSS value like `"500px"`. Defaults to `undefined`.
 - **onToggleFullScreen**: A function that gets called when the editor's full screen mode is toggled. The function will be passed a boolean as parameter, `true` when the editor is currently going into full screen mode, or `false`.
 - **parsingConfig**: Adjust settings for parsing the Markdown during editing (not previewing).
@@ -196,11 +196,13 @@ easyMDE.value('New input for **EasyMDE**');
 - **sideBySideFullscreen**: If set to `false`, allows side-by-side editing without going into fullscreen. 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`.
 
 
@@ -226,7 +228,6 @@ var editor = new EasyMDE({
 				minute: '2-digit',
 			},
 		},
-		text: "Autosaved: "
 	},
 	blockStyles: {
 		bold: "__",
@@ -245,6 +246,7 @@ var editor = new EasyMDE({
 	},
 	lineWrapping: false,
 	minHeight: "500px",
+	markdownUrl: "https://www.markdownguide.org/basic-syntax/",
 	parsingConfig: {
 		allowAtxHeaderWithoutSpace: true,
 		strikethrough: false,
@@ -295,11 +297,19 @@ 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,
 	sideBySideFullscreen: false,
 	syncSideBySidePreviewScroll: false,
 	tabSize: 4,
 	toolbar: false,
+	toobarTitles: {
+		"bold": {"title": "Bold"},
+	},
 	toolbarTips: false,
 });
 ```

src/css/easymde.css

@@ -227,11 +227,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

@@ -1563,6 +1563,12 @@ var promptTexts = {
     image: 'URL of the image:',
 };
 
+var statusTexts = {
+    lines: 'lines: ',
+    words: 'words: ',
+    autosave: 'Autosaved: ',
+};
+
 var timeFormat = {
     locale: 'en-US',
     format: {
@@ -1638,6 +1644,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) {
@@ -1707,6 +1717,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 || {});
 
@@ -1714,8 +1728,16 @@ function EasyMDE(options) {
     if (options.autosave != undefined) {
         // Merging the Autosave timeFormat, with the given options
         options.autosave.timeFormat = extend({}, timeFormat, options.autosave.timeFormat || {});
+
+        // Merging the Autosave text, with the given options and saving to statusTexts
+        if (options.autosave.text != undefined) {
+            options.statusTexts.autosave = options.autosave.text;
+        }
     }
 
+    // Merging the toolbar title, with the given options
+    toolbarBuiltInButtons = extend({}, toolbarBuiltInButtons, options.toolbarTitles || {});
+
 
     // Merging the shortcuts, with the given options
     options.shortcuts = extend({}, shortcuts, options.shortcuts || {});
@@ -2205,7 +2227,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;
         }
@@ -2568,19 +2590,21 @@ EasyMDE.prototype.createStatusbar = function (status) {
 
     // Set up the built-in items
     var items = [];
-    var i, onUpdate, onActivity, defaultValue;
+    var i, onUpdate, onActivity, defaultValue, dataSet;
 
     for (i = 0; i < status.length; i++) {
         // Reset some values
         onUpdate = undefined;
         onActivity = 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,
                 onActivity: status[i].onActivity,
@@ -2589,6 +2613,8 @@ EasyMDE.prototype.createStatusbar = function (status) {
             var name = status[i];
 
             if (name === 'words') {
+                dataSet = options.statusTexts[name];
+
                 defaultValue = function (el) {
                     el.innerHTML = wordCount(cm.getValue());
                 };
@@ -2596,6 +2622,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();
                 };
@@ -2610,6 +2638,11 @@ EasyMDE.prototype.createStatusbar = function (status) {
                     var pos = cm.getCursor();
                     el.innerHTML = pos.line + ':' + pos.ch;
                 };
+                onActivity = 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) {
@@ -2624,6 +2657,7 @@ EasyMDE.prototype.createStatusbar = function (status) {
 
             items.push({
                 className: name,
+                dataSet: dataSet,
                 defaultValue: defaultValue,
                 onUpdate: onUpdate,
                 onActivity: onActivity,
@@ -2648,6 +2682,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);
@@ -2673,6 +2712,17 @@ EasyMDE.prototype.createStatusbar = function (status) {
         }
 
 
+        // Ensure the onActivity is a function
+        if (typeof item.onActivity === 'function') {
+            // Create a closure around the span of the current action, then execute the onActivity handler
+            this.codemirror.on('cursorActivity', (function (el, item) {
+                    return function () {
+                        item.onActivity(el);
+                    };
+            }(el, item)));
+        }
+
+
         // Append the item to the status bar
         bar.appendChild(el);
     }