Added a "disabled" configuration option along with a complementary setter method

SimpleMDE can now be disabled through initial configuration, or
disabled / re-enabled using a method dynamically. README documentation
has been updated.

In addition to this, there was a typo in the SimpleMDE JavaScript file,
where "Tootlip" was used (consistently). This was fixed as well.

A demo of the functionality can be found at
http://sweltering-verse.surge.sh

README.md

@@ -77,6 +77,7 @@ simplemde.value("This text will appear in the editor");
   - **bold** Can be set to `**` or `__`. Defaults to `**`.
   - **code** Can be set to  ```` ``` ```` or `~~~`.  Defaults to ```` ``` ````.
   - **italic** Can be set to `*` or `_`. Defaults to `*`.
+- **disabled**: If set to `true`, disables editing and general use of SimpleMDE. Defaults to `false`.
 - **element**: The DOM element for the textarea to use. Defaults to the first textarea on the page.
 - **forceSync**: If set to `true`, force text changes made in SimpleMDE to be immediately stored in original textarea. Defaults to `false`.
 - **hideIcons**: An array of icon names to hide. Can be used to hide specific icons shown by default without completely customizing the toolbar.
@@ -121,6 +122,7 @@ var simplemde = new SimpleMDE({
 		bold: "__",
 		italic: "_"
 	},
+	disabled: false,
 	element: document.getElementById("MyID"),
 	forceSync: true,
 	hideIcons: ["guide", "heading"],
@@ -178,6 +180,8 @@ var simplemde = new SimpleMDE({
 });
 ```
 
+**Note:** if you wish to dynamically disable / enable the SimpleMDE, make sure you use the `setDisabled` method (see below under "Useful methods"). You can access the current state of SimpleMDE via `simplemde.disabled`, however DO NOT change this property - treat it as a constant, or otherwise bad things will happen.
+
 #### Toolbar icons
 
 Below are the built-in toolbar icons (only some of which are enabled by default), which can be reorganized however you like. "Name" is the name of the icon, referenced in the JS. "Action" is either a function or a URL to open. "Class" is the class given to the icon. "Tooltip" is the small tooltip that appears via the `title=""` attribute. Note that shortcut hints are added automatically and reflect the specified action if it has a keybind assigned to it (i.e. with the value of `action` set to `bold` and that of `tooltip` set to `Bold`, the final text the user will see would be "Bold (Ctrl-B)").
@@ -323,6 +327,9 @@ simplemde.isPreviewActive(); // returns boolean
 simplemde.isSideBySideActive(); // returns boolean
 simplemde.isFullscreenActive(); // returns boolean
 simplemde.clearAutosavedValue(); // no returned value
+simplemde.setDisabled(true); // disables simpleMDE
+simplemde.setDisabled(false); // enables simpleMDE
+simplemde.setDisabled(!simplemde.disabled); // toggles simpleMDE
 ```
 
 ## How it works

debug/simplemde.css

@@ -94,8 +94,14 @@
 
 .cm-tab { display: inline-block; text-decoration: inherit; }
 
+.CodeMirror-rulers {
+  position: absolute;
+  left: 0; right: 0; top: -50px; bottom: -20px;
+  overflow: hidden;
+}
 .CodeMirror-ruler {
   border-left: 1px solid #ccc;
+  top: 0; bottom: 0;
   position: absolute;
 }
 
@@ -119,7 +125,7 @@
 .cm-s-default .cm-property,
 .cm-s-default .cm-operator {}
 .cm-s-default .cm-variable-2 {color: #05a;}
-.cm-s-default .cm-variable-3 {color: #085;}
+.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
 .cm-s-default .cm-comment {color: #a50;}
 .cm-s-default .cm-string {color: #a11;}
 .cm-s-default .cm-string-2 {color: #f50;}
@@ -206,9 +212,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   display: inline-block;
   vertical-align: top;
   margin-bottom: -30px;
-  /* Hack to make IE7 behave */
-  *zoom:1;
-  *display:inline;
 }
 .CodeMirror-gutter-wrapper {
   position: absolute;
@@ -226,11 +229,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   cursor: default;
   z-index: 4;
 }
-.CodeMirror-gutter-wrapper {
+.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
-  -webkit-user-select: none;
+.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
-  -moz-user-select: none;
-  user-select: none;
-}
 
 .CodeMirror-lines {
   cursor: text;
@@ -252,8 +252,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   position: relative;
   overflow: visible;
   -webkit-tap-highlight-color: transparent;
-  -webkit-font-variant-ligatures: none;
+  -webkit-font-variant-ligatures: contextual;
-  font-variant-ligatures: none;
+  font-variant-ligatures: contextual;
 }
 .CodeMirror-wrap pre {
   word-wrap: break-word;
@@ -275,6 +275,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 
 .CodeMirror-widget {}
 
+.CodeMirror-rtl pre { direction: rtl; }
+
 .CodeMirror-code {
   outline: none;
 }
@@ -297,7 +299,10 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   visibility: hidden;
 }
 
-.CodeMirror-cursor { position: absolute; }
+.CodeMirror-cursor {
+  position: absolute;
+  pointer-events: none;
+}
 .CodeMirror-measure pre { position: static; }
 
 div.CodeMirror-cursors {
@@ -324,9 +329,6 @@ div.CodeMirror-dragcursors {
   background: rgba(255, 255, 0, .4);
 }
 
-/* IE7 hack to prevent it from returning funny offsetTops on the spans */
-.CodeMirror span { *vertical-align: text-bottom; }
-
 /* Used to force a border model for a node */
 .cm-force-border { padding-right: .1px; }
 
@@ -354,6 +356,19 @@ span.CodeMirror-selectedtext { background: none; }
     z-index: 1;
 }
 
+.CodeMirror.SimpleMDE-disabled {
+    opacity: 0.5;
+}
+
+.CodeMirror.SimpleMDE-disabled,
+.CodeMirror.SimpleMDE-disabled * {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    cursor: not-allowed;
+}
+
 .CodeMirror-scroll {
     min-height: 300px
 }
@@ -473,12 +488,24 @@ span.CodeMirror-selectedtext { background: none; }
     cursor: pointer;
 }
 
+.editor-toolbar.SimpleMDE-disabled a {
+    opacity: 0.5;
+    cursor: not-allowed;
+    outline: none;
+}
+
 .editor-toolbar a.active,
 .editor-toolbar a:hover {
     background: #fcfcfc;
     border-color: #95a5a6;
 }
 
+.editor-toolbar.SimpleMDE-disabled a.active,
+.editor-toolbar.SimpleMDE-disabled a:hover {
+    background: transparent;
+    border-color: transparent;
+}
+
 .editor-toolbar a:before {
     line-height: 30px
 }

src/css/simplemde.css

@@ -9,6 +9,19 @@
     z-index: 1;
 }
 
+.CodeMirror.SimpleMDE-disabled {
+    opacity: 0.5;
+}
+
+.CodeMirror.SimpleMDE-disabled,
+.CodeMirror.SimpleMDE-disabled * {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    cursor: not-allowed;
+}
+
 .CodeMirror-scroll {
     min-height: 300px
 }
@@ -128,12 +141,24 @@
     cursor: pointer;
 }
 
+.editor-toolbar.SimpleMDE-disabled a {
+    opacity: 0.5;
+    cursor: not-allowed;
+    outline: none;
+}
+
 .editor-toolbar a.active,
 .editor-toolbar a:hover {
     background: #fcfcfc;
     border-color: #95a5a6;
 }
 
+.editor-toolbar.SimpleMDE-disabled a.active,
+.editor-toolbar.SimpleMDE-disabled a:hover {
+    background: transparent;
+    border-color: transparent;
+}
+
 .editor-toolbar a:before {
     line-height: 30px
 }

src/js/simplemde.js

@@ -72,7 +72,7 @@ var getBindingName = function(f) {
 var isMobile = function() {
 	var check = false;
 	(function(a) {
-		if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true;
+		if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0, 4))) check = true;
 	})(navigator.userAgent || navigator.vendor || window.opera);
 	return check;
 };
@@ -100,7 +100,7 @@ function createIcon(options, enableTooltips, shortcuts) {
 	enableTooltips = (enableTooltips == undefined) ? true : enableTooltips;
 
 	if(options.title && enableTooltips) {
-		el.title = createTootlip(options.title, options.action, shortcuts);
+		el.title = createTooltip(options.title, options.action, shortcuts);
 
 		if(isMac) {
 			el.title = el.title.replace("Ctrl", "⌘");
@@ -120,7 +120,7 @@ function createSep() {
 	return el;
 }
 
-function createTootlip(title, action, shortcuts) {
+function createTooltip(title, action, shortcuts) {
 	var actionName;
 	var tooltip = title;
 
@@ -171,7 +171,7 @@ function getState(cm, pos) {
 			ret.link = true;
 		} else if(data === "tag") {
 			ret.image = true;
-		} else if(data.match(/^header(\-[1-6])?$/)) {
+		} else if(data.match(/^header(-[1-6])?$/)) {
 			ret[data.replace("header", "heading")] = true;
 		}
 	}
@@ -900,8 +900,8 @@ function _toggleLine(cm, name) {
 	var startPoint = cm.getCursor("start");
 	var endPoint = cm.getCursor("end");
 	var repl = {
-		"quote": /^(\s*)\>\s+/,
+		"quote": /^(\s*)>\s+/,
-		"unordered-list": /^(\s*)(\*|\-|\+)\s+/,
+		"unordered-list": /^(\s*)(\*|-|\+)\s+/,
 		"ordered-list": /^(\s*)\d+\.\s+/
 	};
 	var map = {
@@ -1008,7 +1008,7 @@ function _cleanBlock(cm) {
 
 	for(var line = startPoint.line; line <= endPoint.line; line++) {
 		text = cm.getLine(line);
-		text = text.replace(/^[ ]*([# ]+|\*|\-|[> ]+|[0-9]+(.|\)))[ ]*/, "");
+		text = text.replace(/^[ ]*([# ]+|\*|-|[> ]+|[0-9]+(.|\)))[ ]*/, "");
 
 		cm.replaceRange(text, {
 			line: line,
@@ -1479,6 +1479,7 @@ SimpleMDE.prototype.render = function(el) {
 		mode.gitHubSpice = false;
 	}
 
+	this.disabled = (this.options.disabled) ? this.options.disabled : false;
 	this.codemirror = CodeMirror.fromTextArea(el, {
 		mode: mode,
 		backdrop: backdrop,
@@ -1492,7 +1493,29 @@ SimpleMDE.prototype.render = function(el) {
 		lineWrapping: (options.lineWrapping === false) ? false : true,
 		allowDropFileTypes: ["text/plain"],
 		placeholder: options.placeholder || el.getAttribute("placeholder") || "",
-		styleSelectedText: (options.styleSelectedText != undefined) ? options.styleSelectedText : true
+		styleSelectedText: (options.styleSelectedText != undefined) ? options.styleSelectedText : true,
+		readOnly: (this.disabled) ? "nocursor" : false
+	});
+
+	if(this.disabled) {
+		var wrapperElement = this.codemirror.getWrapperElement();
+		wrapperElement.className += " SimpleMDE-disabled";
+	}
+
+	var _this = this;
+	this.codemirror.on("beforeSelectionChange", function(CMInstance, obj) {
+		if(_this.disabled) {
+			obj.update([{
+				anchor: {
+					ch: 0,
+					line: 0
+				},
+				head: {
+					ch: 0,
+					line: 0
+				}
+			}]);
+		}
 	});
 
 	if(options.forceSync === true) {
@@ -1665,6 +1688,9 @@ SimpleMDE.prototype.createToolbar = function(items) {
 	var bar = document.createElement("div");
 	bar.className = "editor-toolbar";
 
+	if(this.disabled)
+		bar.className += " SimpleMDE-disabled";
+
 	var self = this;
 
 	var toolbarData = {};
@@ -1712,7 +1738,8 @@ SimpleMDE.prototype.createToolbar = function(items) {
 				if(typeof item.action === "function") {
 					el.onclick = function(e) {
 						e.preventDefault();
-						item.action(self);
+						if(!self.disabled)
+							item.action(self);
 					};
 				} else if(typeof item.action === "string") {
 					el.href = item.action;
@@ -1972,6 +1999,20 @@ SimpleMDE.prototype.toggleFullScreen = function() {
 	toggleFullScreen(this);
 };
 
+SimpleMDE.prototype.setDisabled = function(disable) {
+	this.disabled = disable;
+	var wrapperElement = this.codemirror.getWrapperElement();
+	if(disable) {
+		this.gui.toolbar.className += " SimpleMDE-disabled";
+		this.codemirror.setOption("readOnly", "nocursor");
+		wrapperElement.className = "CodeMirror cm-s-paper CodeMirror-wrap SimpleMDE-disabled";
+	} else {
+		this.codemirror.setOption("readOnly", false);
+		this.gui.toolbar.className = this.gui.toolbar.className.replace(/ SimpleMDE-disabled/, "");
+		wrapperElement.className = wrapperElement.className.replace(/ SimpleMDE-disabled/, "");
+	}
+};
+
 SimpleMDE.prototype.isPreviewActive = function() {
 	var cm = this.codemirror;
 	var wrapper = cm.getWrapperElement();