Merge pull request sparksuite#114 from NextStepWebs/development

Intelligently download Font Awesome, New options, Bug fixes

Author: WesCossick

README.md

@@ -21,12 +21,6 @@ SimpleMDE is also available on [jsDelivr](http://www.jsdelivr.com/#!simplemde).
 <script src="//cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
 ```
 
-SimpleMDE depends on Font Awesome (load via MaxCDN for best performance).
-
-```HTML
-<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
-```
-
 And then load SimpleMDE on the first textarea on a page
 
 ```HTML
@@ -65,28 +59,30 @@ simplemde.value("This text will appear in the editor");
 
 ## Configuration
 
+- **autoDownloadFontAwesome**: If set to `true`, force downloads Font Awesome (used for icons). If set to false, prevents downloading. Defaults to `undefined`, which will intelligently check whether Font Awesome has already been included, then download accordingly.
 - **autofocus**: If set to `true`, autofocuses the editor. Defaults to `false`.
 - **autosave**: *Saves the text that's being written. It will forget the text when the form is submitted.*
   - **enabled**: If set to `true`, autosave the text. Defaults to `false`.
   - **delay**: Delay between saves, in milliseconds. Defaults to `10000` (10s).
   - **unique_id**: You must set a unique identifier so that SimpleMDE can autosave. Something that separates this from other textareas.
 - **element**: The DOM element for the textarea to use. Defaults to the first textarea on the page.
+- **hideIcons**: An array of icon names to hide. Can be used to hide specific icons without completely customizing the toolbar.
 - **indentWithTabs**: If set to `false`, indent using spaces instead of tabs. Defaults to `true`.
 - **initialValue**: If set, will customize the initial value of the editor.
 - **lineWrapping**: If set to `false`, disable line wrapping. Defaults to `true`.
 - **parsingConfig**: Adjust settings for parsing the Markdown during editing (not previewing).
   - **allowAtxHeaderWithoutSpace**:  If set to `true`, will render headers without a space after the `#`. Defaults to `false`.
-  - **fencedCodeBlocks**:  If set to `false`, will not process GFM fenced code blocks syntax. Defaults to `true`.
   - **strikethrough**:  If set to `false`, will not process GFM strikethrough syntax. Defaults to `true`.
   - **underscoresBreakWords**: If set to `true`, let underscores be a delimiter for separating words. Defaults to `false`.
 - **previewRender**: Custom function for parsing the plaintext Markdown and returning HTML. Used when user previews.
-- **singleLineBreaks**: If set to `false`, disable parsing GFM single line breaks. Defaults to `true`.
+- **renderingConfig**: Adjust settings for parsing the Markdown during previewing (not editing).
+  - **singleLineBreaks**: If set to `false`, disable parsing GFM single line breaks. Defaults to `true`.
+  - **codeSyntaxHighlighting**: If set to `true`, will highlight using [highlight.js](https://github.com/isagalaev/highlight.js). Defaults to `false`. To use this feature you must include highlight.js on your page. For example, include the script and the CSS files like:<br>`<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>`<br>`<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">`
 - **spellChecker**: If set to `false`, disable the spell checker. Defaults to `true`.
 - **status**: If set to `false`, hide the status bar. Defaults to `true`.
   - Optionally, you can set an array of status bar elements to include, and in what order.
 - **tabSize**: If set, customize the tab size. Defaults to `2`.
 - **toolbar**: If set to `false`, hide the toolbar. Defaults to the [array of icons](#toolbar-icons).
-- **toolbarGuideIcon**: If set to `false`, disable guide icon in the toolbar. Defaults to `true`.
 - **toolbarTips**: If set to `false`, disable toolbar button tips. Defaults to `true`.
 
 ```JavaScript
@@ -98,12 +94,12 @@ var simplemde = new SimpleMDE({
 		delay: 1000,
 	},
 	element: document.getElementById("MyID"),
+	hideIcons: ["guide", "heading"],
 	indentWithTabs: false,
 	initialValue: "Hello world!",
 	lineWrapping: false,
 	parsingConfig: {
 		allowAtxHeaderWithoutSpace: true,
-		fencedCodeBlocks: false,
 		strikethrough: false,
 		underscoresBreakWords: true,
 	},
@@ -117,13 +113,15 @@ var simplemde = new SimpleMDE({
 
 		return "Loading...";
 	}
-	singleLineBreaks: false,
+	renderingConfig: {
+		singleLineBreaks: false,
+		codeSyntaxHighlighting: true,
+	},
 	spellChecker: false,
 	status: false,
 	status: ['autosave', 'lines', 'words', 'cursor'], // Optional usage
 	tabSize: 4,
 	toolbar: false,
-	toolbarGuideIcon: false,
 	toolbarTips: false,
 });
 ```
@@ -150,9 +148,9 @@ ordered-list | toggleOrderedList | Numbered List (Ctrl+Alt+L)<br>fa fa-list-ol
 link | drawLink | Create Link (Ctrl+K)<br>fa fa-link
 image | drawImage | Insert Image (Ctrl+Alt+I)<br>fa fa-picture-o
 horizontal-rule | drawHorizontalRule | Insert Horizontal Line<br>fa fa-minus
-preview | togglePreview | Toggle Preview (Ctrl+P)<br>fa fa-eye
-side-by-side | toggleSideBySide | Toggle Side by Side (F9)<br>fa fa-columns
-fullscreen | toggleFullScreen | Toggle Fullscreen (F11)<br>fa fa-arrows-alt
+preview | togglePreview | Toggle Preview (Ctrl+P)<br>fa fa-eye no-disable
+side-by-side | toggleSideBySide | Toggle Side by Side (F9)<br>fa fa-columns no-disable no-mobile
+fullscreen | toggleFullScreen | Toggle Fullscreen (F11)<br>fa fa-arrows-alt no-disable no-mobile
 guide | [This link](http://nextstepwebs.github.io/simplemde-markdown-editor/markdown-guide) | Markdown Guide<br>fa fa-question-circle
 
 Customize the toolbar using the `toolbar` option like:

dist/simplemde.min.css

@@ -19,10 +19,9 @@ gulp.task("downloads-codemirror", function(callback) {
 	var download_urls = [
 		"https://raw.githubusercontent.com/codemirror/CodeMirror/master/lib/codemirror.js",
 		"https://raw.githubusercontent.com/codemirror/CodeMirror/master/addon/edit/continuelist.js",
-		//"https://raw.githubusercontent.com/codemirror/CodeMirror/master/addon/edit/tablist.js", //waiting for PRs
 		"https://raw.githubusercontent.com/codemirror/CodeMirror/master/addon/display/fullscreen.js",
 		"https://raw.githubusercontent.com/codemirror/CodeMirror/master/addon/mode/overlay.js",
-		//"https://raw.githubusercontent.com/codemirror/CodeMirror/master/mode/gfm/gfm.js", //waiting for PRs
+		"https://raw.githubusercontent.com/codemirror/CodeMirror/master/mode/gfm/gfm.js",
 		"https://raw.githubusercontent.com/codemirror/CodeMirror/master/mode/markdown/markdown.js",
 		"https://raw.githubusercontent.com/codemirror/CodeMirror/master/mode/xml/xml.js"];
 

dist/simplemde.min.js

@@ -1,6 +1,6 @@
 {
   "name": "simplemde",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "A simple, beautiful, and embeddable JavaScript markdown editor. Features autosaving and spell checking.",
   "keywords": [
 	"embeddable",

gulpfile.js

@@ -177,15 +177,15 @@
 	content: "▼";
 }
 
-.editor-toolbar.disabled-for-preview a:not(.fa-eye):not(.fa-arrows-alt):not(.fa-columns) {
+.editor-toolbar.disabled-for-preview a:not(.no-disable) {
 	pointer-events: none;
 	background: #fff;
 	border-color: transparent;
 	text-shadow: inherit;
 }
 
 @media only screen and (max-width: 700px) {
-	.editor-toolbar a.fa-columns {
+	.editor-toolbar a.no-mobile {
 		display: none;
 	}
 }

package.json

@@ -1534,6 +1534,10 @@
       }
     },
 
+    readOnlyChanged: function(val) {
+      if (!val) this.reset();
+    },
+
     setUneditable: nothing,
 
     needsContentAttribute: false
@@ -1552,7 +1556,6 @@
     init: function(display) {
       var input = this, cm = input.cm;
       var div = input.div = display.lineDiv;
-      div.contentEditable = "true";
       disableBrowserMagic(div);
 
       on(div, "paste", function(e) { handlePaste(e, cm); })
@@ -1593,7 +1596,7 @@
 
       on(div, "input", function() {
         if (input.composing) return;
-        if (!input.pollContent())
+        if (isReadOnly(cm) || !input.pollContent())
           runInOp(input.cm, function() {regChange(cm);});
       });
 
@@ -1818,17 +1821,24 @@
       this.div.focus();
     },
     applyComposition: function(composing) {
-      if (composing.data && composing.data != composing.startData)
+      if (isReadOnly(this.cm))
+        operation(this.cm, regChange)(this.cm)
+      else if (composing.data && composing.data != composing.startData)
         operation(this.cm, applyTextInput)(this.cm, composing.data, 0, composing.sel);
     },
 
     setUneditable: function(node) {
-      node.setAttribute("contenteditable", "false");
+      node.contentEditable = "false"
     },
 
     onKeyPress: function(e) {
       e.preventDefault();
-      operation(this.cm, applyTextInput)(this.cm, String.fromCharCode(e.charCode == null ? e.keyCode : e.charCode), 0);
+      if (!isReadOnly(this.cm))
+        operation(this.cm, applyTextInput)(this.cm, String.fromCharCode(e.charCode == null ? e.keyCode : e.charCode), 0);
+    },
+
+    readOnlyChanged: function(val) {
+      this.div.contentEditable = String(val != "nocursor")
     },
 
     onContextMenu: nothing,
@@ -5389,8 +5399,8 @@
       cm.display.disabled = true;
     } else {
       cm.display.disabled = false;
-      if (!val) cm.display.input.reset();
     }
+    cm.display.input.readOnlyChanged(val)
   });
   option("disableInput", false, function(cm, val) {if (!val) cm.display.input.reset();}, true);
   option("dragDrop", true, dragDropChanged);
@@ -8093,24 +8103,30 @@
     }
   };
 
+  var noHandlers = []
+  function getHandlers(emitter, type, copy) {
+    var arr = emitter._handlers && emitter._handlers[type]
+    if (copy) return arr && arr.length > 0 ? arr.slice() : noHandlers
+    else return arr || noHandlers
+  }
+
   var off = CodeMirror.off = function(emitter, type, f) {
     if (emitter.removeEventListener)
       emitter.removeEventListener(type, f, false);
     else if (emitter.detachEvent)
       emitter.detachEvent("on" + type, f);
     else {
-      var arr = emitter._handlers && emitter._handlers[type];
-      if (!arr) return;
-      for (var i = 0; i < arr.length; ++i)
-        if (arr[i] == f) { arr.splice(i, 1); break; }
+      var handlers = getHandlers(emitter, type, false)
+      for (var i = 0; i < handlers.length; ++i)
+        if (handlers[i] == f) { handlers.splice(i, 1); break; }
     }
   };
 
   var signal = CodeMirror.signal = function(emitter, type /*, values...*/) {
-    var arr = emitter._handlers && emitter._handlers[type];
-    if (!arr) return;
+    var handlers = getHandlers(emitter, type, true)
+    if (!handlers.length) return;
     var args = Array.prototype.slice.call(arguments, 2);
-    for (var i = 0; i < arr.length; ++i) arr[i].apply(null, args);
+    for (var i = 0; i < handlers.length; ++i) handlers[i].apply(null, args);
   };
 
   var orphanDelayedCallbacks = null;
@@ -8123,8 +8139,8 @@
   // them to be executed when the last operation ends, or, if no
   // operation is active, when a timeout fires.
   function signalLater(emitter, type /*, values...*/) {
-    var arr = emitter._handlers && emitter._handlers[type];
-    if (!arr) return;
+    var arr = getHandlers(emitter, type, false)
+    if (!arr.length) return;
     var args = Array.prototype.slice.call(arguments, 2), list;
     if (operationGroup) {
       list = operationGroup.delayedCallbacks;
@@ -8164,8 +8180,7 @@
   }
 
   function hasHandler(emitter, type) {
-    var arr = emitter._handlers && emitter._handlers[type];
-    return arr && arr.length > 0;
+    return getHandlers(emitter, type).length > 0
   }
 
   // Add on and off methods to a constructor's prototype, to make
@@ -8819,7 +8834,7 @@
 
   // THE END
 
-  CodeMirror.version = "5.6.1";
+  CodeMirror.version = "5.7.1";
 
   return CodeMirror;
 });