Merge pull request #107 from NextStepWebs/development

Custom preview rendering, Loads of bug fixes
2025-06-30 14:41:01 -06:00 · 2015-09-17 01:21:32 -05:00 · 2015-09-17 01:21:32 -05:00 · 57fcf521a0
commit 57fcf521a0
parent cd17552bf6 263827a690
18 changed files with 8527 additions and 8385 deletions
--- a/README.md
+++ b/README.md
@ -9,7 +9,7 @@ A drop-in JavaScript textarea replacement for writing beautiful and understandab
 WYSIWYG editors that produce HTML are often complex and buggy. Markdown solves this problem in many ways, plus Markdown can be rendered natively on more platforms than HTML. However, Markdown is not a syntax that an average user will be familiar with, nor is it visually clear while editing. In otherwords, for an unfamiliar user, the syntax they write will make little sense until they click the preview button. SimpleMDE has been designed to bridge this gap for non-technical users who are less familiar with or just learning Markdown syntax.

 ## Quick start
-SimpleMDE is available on npm.
+SimpleMDE is available on [npm](https://www.npmjs.com/package/simplemde).
 ```
 npm install simplemde --save
 ```
@ -32,7 +32,6 @@ And then load SimpleMDE on the first textarea on a page
 ```HTML
 <script>
 var simplemde = new SimpleMDE();
-simplemde.render();
 </script>
 ```

@ -43,7 +42,6 @@ Pure JavaScript method
 ```HTML
 <script>
 var simplemde = new SimpleMDE({ element: document.getElementById("MyID") });
-simplemde.render();
 </script>
 ```

@ -52,56 +50,81 @@ jQuery method
 ```HTML
 <script>
 var simplemde = new SimpleMDE({ element: $("#MyID")[0] });
-simplemde.render();
 </script>
 ```

-## Get the content
+## Get/set the content

 ```JavaScript
 simplemde.value();
 ```

+```JavaScript
+simplemde.value("This text will appear in the editor");
+```
+
 ## Configuration

- **element**: The DOM element for the textarea to use. Defaults to the first textarea on the page.
- **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.
- **toolbar**: If set to `false`, hide the toolbar. Defaults to the [array of icons](#toolbar-icons).
- **toolbarTips**: If set to `false`, disable toolbar button tips. Defaults to `true`.
- **toolbarGuideIcon**: If set to `false`, disable guide icon in the toolbar. Defaults to `true`.
 - **autofocus**: If set to `true`, autofocuses the editor. Defaults to `false`.
- **lineWrapping**: If set to `false`, disable line wrapping. Defaults to `true`.
- **indentWithTabs**: If set to `false`, indent using spaces instead of tabs. Defaults to `true`.
- **tabSize**: If set, customize the tab size. Defaults to `2`.
- **initialValue**: If set, will customize the initial value of the editor.
- **spellChecker**: If set to `false`, disable the spell checker. Defaults to `true`.
- **singleLineBreaks**: If set to `false`, disable parsing GFM single line breaks. Defaults to `true`.
 - **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`.
-  - **unique_id**: You must set a unique identifier so that SimpleMDE can autosave. Something that separates this from other textareas.
  - **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.
+- **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`.
+- **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
 var simplemde = new SimpleMDE({
-	element: document.getElementById("MyID"),
-	status: false,
-	status: ['autosave', 'lines', 'words', 'cursor'], // Optional usage
-	toolbar: false,
-	toolbarTips: false,
-	toolbarGuideIcon: false,
 	autofocus: true,
-	lineWrapping: false,
-	indentWithTabs: false,
-	tabSize: 4,
-	initialValue: "Hello world!",
-	spellChecker: false,
-	singleLineBreaks: false,
 	autosave: {
 		enabled: true,
 		unique_id: "MyUniqueID",
 		delay: 1000,
 	},
+	element: document.getElementById("MyID"),
+	indentWithTabs: false,
+	initialValue: "Hello world!",
+	lineWrapping: false,
+	parsingConfig: {
+		allowAtxHeaderWithoutSpace: true,
+		fencedCodeBlocks: false,
+		strikethrough: false,
+		underscoresBreakWords: true,
+	},
+	previewRender: function(plainText) {
+		return customMarkdownParser(plainText); // Returns HTML from a custom parser
+	},
+	previewRender: function(plainText, preview) { // Async method
+		setTimeout(function(){
+			preview.innerHTML = customMarkdownParser(plainText);
+		}, 250);
+		
+		return "Loading...";
+	}
+	singleLineBreaks: false,
+	spellChecker: false,
+	status: false,
+	status: ['autosave', 'lines', 'words', 'cursor'], // Optional usage
+	tabSize: 4,
+	toolbar: false,
+	toolbarGuideIcon: false,
+	toolbarTips: false,
 });
 ```

@ -109,28 +132,28 @@ var simplemde = new SimpleMDE({

 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. The `Ctrl` and `Alt` in the title tags will be changed automatically to their Mac equivalents when needed. Additionally, you can add a separator between any icons by adding `"|"` to the toolbar array.

-Name | Action | Class | Tooltip
-:--- | :----- | :---- | :------
-bold | toggleBold | fa fa-bold | Bold (Ctrl+B)
-italic | toggleItalic | fa fa-italic | Italic (Ctrl+I)
-strikethrough | toggleStrikethrough | fa fa-strikethrough | Strikethrough
-heading | toggleHeadingSmaller | fa fa-header | Heading (Ctrl+H)
-heading-smaller | toggleHeadingSmaller | fa fa-header | Smaller Heading (Ctrl+H)
-heading-bigger | toggleHeadingBigger | fa fa-lg fa-header | Bigger Heading (Shift+Ctrl+H)
-heading-1 | toggleHeading1 | fa fa-header fa-header-x fa-header-1 | Big Heading
-heading-2 | toggleHeading2 | fa fa-header fa-header-x fa-header-2 | Medium Heading
-heading-3 | toggleHeading3 | fa fa-header fa-header-x fa-header-3 | Small Heading
-code | toggleCodeBlock | fa fa-code | Code (Ctrl+Alt+C)
-quote | toggleBlockquote | fa fa-quote-left | Quote (Ctrl+')
-unordered-list | toggleUnorderedList | fa fa-list-ul | Generic List (Ctrl+L)
-numbered-list | toggleOrderedList | fa fa-list-ol | Numbered List (Ctrl+Alt+L)
-link | drawLink | fa fa-link | Create Link (Ctrl+K)
-image | drawImage | fa fa-picture-o | Insert Image (Ctrl+Alt+I)
-horizontal-rule | drawHorizontalRule | fa fa-minus | Insert Horizontal Line
-preview | togglePreview | fa fa-eye | Toggle Preview (Ctrl+P)
-side-by-side | toggleSideBySide | fa fa-columns | Toggle Side by Side (F9)
-fullscreen | toggleFullScreen | fa fa-arrows-alt | Toggle Fullscreen (F11)
-guide | [This link](http://nextstepwebs.github.io/simplemde-markdown-editor/markdown-guide) | fa fa-question-circle | Markdown Guide
+Name | Action | Tooltip<br>Class
+:--- | :----- | :--------------
+bold | toggleBold | Bold (Ctrl+B)<br>fa fa-bold
+italic | toggleItalic | Italic (Ctrl+I)<br>fa fa-italic
+strikethrough | toggleStrikethrough | Strikethrough<br>fa fa-strikethrough
+heading | toggleHeadingSmaller | Heading (Ctrl+H)<br>fa fa-header
+heading-smaller | toggleHeadingSmaller | Smaller Heading (Ctrl+H)<br>fa fa-header
+heading-bigger | toggleHeadingBigger | Bigger Heading (Shift+Ctrl+H)<br>fa fa-lg fa-header
+heading-1 | toggleHeading1 | Big Heading<br>fa fa-header fa-header-x fa-header-1
+heading-2 | toggleHeading2 | Medium Heading<br>fa fa-header fa-header-x fa-header-2
+heading-3 | toggleHeading3 | Small Heading<br>fa fa-header fa-header-x fa-header-3
+code | toggleCodeBlock | Code (Ctrl+Alt+C)<br>fa fa-code
+quote | toggleBlockquote | Quote (Ctrl+')<br>fa fa-quote-left
+unordered-list | toggleUnorderedList | Generic List (Ctrl+L)<br>fa fa-list-ul
+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
+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:

--- a/dist/simplemde.min.css
+++ b/dist/simplemde.min.css
--- a/dist/simplemde.min.js
+++ b/dist/simplemde.min.js
--- a/gulpfile.js
+++ b/gulpfile.js
@ -1,61 +1,112 @@
-var gulp = require('gulp'),
-	minifycss = require('gulp-minify-css'),
-	uglify = require('gulp-uglify'),
-	concat = require('gulp-concat'),
-	header = require('gulp-header'),
-	pkg = require('./package.json'),
-	prettify = require('gulp-jsbeautifier');
+var gulp = require("gulp"),
+	minifycss = require("gulp-minify-css"),
+	uglify = require("gulp-uglify"),
+	concat = require("gulp-concat"),
+	header = require("gulp-header"),
+	pkg = require("./package.json"),
+	prettify = require("gulp-jsbeautifier"),
+	download = require("gulp-download");

-var banner = ['/**',
-	' * <%= pkg.name %> v<%= pkg.version %>',
-	' * Copyright <%= pkg.company %>',
-	' * @link <%= pkg.homepage %>',
-	' * @license <%= pkg.license %>',
-	' */',
-	''].join('\n');
+var banner = ["/**",
+	" * <%= pkg.name %> v<%= pkg.version %>",
+	" * Copyright <%= pkg.company %>",
+	" * @link <%= pkg.homepage %>",
+	" * @license <%= pkg.license %>",
+	" */",
+	""].join("\n");

-gulp.task('scripts', function() {
+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/markdown/markdown.js",
+		"https://raw.githubusercontent.com/codemirror/CodeMirror/master/mode/xml/xml.js"];
+	
+	download(download_urls)
+		.pipe(gulp.dest("src/js/codemirror/"));
+	
+	// Wait to make sure they've been downloaded
+	setTimeout(function() {
+		callback();
+	}, 5000);
+});
+
+gulp.task("downloads-js", function(callback) {
+	var download_urls = [
+		"https://raw.githubusercontent.com/chjj/marked/master/lib/marked.js",
+		"https://raw.githubusercontent.com/NextStepWebs/codemirror-spell-checker/master/src/js/spell-checker.js",
+		"https://raw.githubusercontent.com/NextStepWebs/codemirror-spell-checker/master/src/js/typo.js"];
+	
+	download(download_urls)
+		.pipe(gulp.dest("src/js/"));
+	
+	// Wait to make sure they've been downloaded
+	setTimeout(function() {
+		callback();
+	}, 5000);
+});
+
+gulp.task("downloads-css", function(callback) {
+	var download_urls = [
+		"https://raw.githubusercontent.com/codemirror/CodeMirror/master/lib/codemirror.css",
+		"https://raw.githubusercontent.com/NextStepWebs/codemirror-spell-checker/master/src/css/spell-checker.css"];
+	
+	download(download_urls)
+		.pipe(gulp.dest("src/css/"));
+	
+	// Wait to make sure they've been downloaded
+	setTimeout(function() {
+		callback();
+	}, 5000);
+});
+
+gulp.task("scripts", ["downloads-codemirror", "downloads-js", "downloads-css"], function() {
 	var js_files = [
-		'./src/js/codemirror/codemirror.js',
-		'./src/js/codemirror/continuelist.js',
-		'./src/js/codemirror/fullscreen.js',
-		'./src/js/codemirror/markdown.js',
-		'./src/js/codemirror/overlay.js',
-		'./src/js/codemirror/gfm.js',
-		'./src/js/codemirror/xml.js',
-		'./src/js/typo.js',
-		'./src/js/spell-checker.js',
-		'./src/js/marked.js',
-		'./src/js/simplemde.js'];
+		"./src/js/codemirror/codemirror.js",
+		"./src/js/codemirror/continuelist.js",
+		"./src/js/codemirror/tablist.js",
+		"./src/js/codemirror/fullscreen.js",
+		"./src/js/codemirror/markdown.js",
+		"./src/js/codemirror/overlay.js",
+		"./src/js/codemirror/gfm.js",
+		"./src/js/codemirror/xml.js",
+		"./src/js/typo.js",
+		"./src/js/spell-checker.js",
+		"./src/js/marked.js",
+		"./src/js/simplemde.js"];

 	return gulp.src(js_files)
 		.pipe(header(banner, {pkg: pkg}))
-		.pipe(concat('simplemde.min.js'))
-		.pipe(gulp.dest('dist'))
+		.pipe(concat("simplemde.min.js"))
+		.pipe(gulp.dest("dist"))
 		.pipe(uglify())
 		.pipe(header(banner, {pkg: pkg}))
-		.pipe(gulp.dest('dist'));
+		.pipe(gulp.dest("dist"));
 });

-gulp.task('styles', function() {
-	return gulp.src('./src/css/*.css')
-		.pipe(concat('simplemde.min.css'))
-		.pipe(gulp.dest('dist'))
+gulp.task("styles", ["downloads-codemirror", "downloads-js", "downloads-css"], function() {
+	return gulp.src("./src/css/*.css")
+		.pipe(concat("simplemde.min.css"))
+		.pipe(gulp.dest("dist"))
 		.pipe(minifycss())
 		.pipe(header(banner, {pkg: pkg}))
-		.pipe(gulp.dest('dist'));
+		.pipe(gulp.dest("dist"));
 });
 
-gulp.task('prettify-js', function() {
-	gulp.src('./src/js/simplemde.js')
+gulp.task("prettify-js", function() {
+	gulp.src("./src/js/simplemde.js")
 		.pipe(prettify({js: {braceStyle: "collapse", indentChar: "\t", indentSize: 1, maxPreserveNewlines: 3, spaceBeforeConditional: false}}))
-		.pipe(gulp.dest('./src/js'));
+		.pipe(gulp.dest("./src/js"));
 });
 
-gulp.task('prettify-css', function() {
-	gulp.src('./src/css/simplemde.css')
+gulp.task("prettify-css", function() {
+	gulp.src("./src/css/simplemde.css")
 		.pipe(prettify({css: {indentChar: "\t", indentSize: 1}}))
-		.pipe(gulp.dest('./src/css'));
+		.pipe(gulp.dest("./src/css"));
 });

-gulp.task('default', ['scripts', 'styles', 'prettify-js', 'prettify-css']);
+gulp.task("default", ["downloads-codemirror", "downloads-js", "downloads-css", "scripts", "styles", "prettify-js", "prettify-css"]);
--- a/package.json
+++ b/package.json
@ -1,8 +1,14 @@
 {
  "name": "simplemde",
-	"version": "1.7.0",
+  "version": "1.7.1",
  "description": "A simple, beautiful, and embeddable JavaScript markdown editor. Features autosaving and spell checking.",
-	"keywords": ["embeddable", "markdown", "editor", "javascript", "wysiwyg"],
+  "keywords": [
+	"embeddable",
+	"markdown",
+	"editor",
+	"javascript",
+	"wysiwyg"
+  ],
  "homepage": "https://github.com/NextStepWebs/simplemde-markdown-editor",
  "main": "gulpfile.js",
  "license": "MIT",
@ -20,7 +26,8 @@
 	"gulp-uglify": "*",
 	"gulp-concat": "*",
 	"gulp-header": "*",
-		"gulp-jsbeautifier": "*"
+	"gulp-jsbeautifier": "*",
+	"gulp-download": "*"
  },
  "repository": {
 	"type": "git",
--- a/src/css/simplemde.css
+++ b/src/css/simplemde.css
@ -66,11 +66,13 @@

 .editor-toolbar.fullscreen {
 	width: 100%;
-	height: 40px;
+	height: 50px;
 	overflow-x: auto;
 	overflow-y: hidden;
 	white-space: nowrap;
 	padding-top: 10px;
+	padding-bottom: 10px;
+	box-sizing: border-box;
 	background: #fff;
 	border: 0;
 	position: fixed;
@ -178,6 +180,8 @@
 .editor-toolbar.disabled-for-preview a:not(.fa-eye):not(.fa-arrows-alt):not(.fa-columns) {
 	pointer-events: none;
 	background: #fff;
+	border-color: transparent;
+	text-shadow: inherit;
 }

@media only screen and (max-width: 700px) {
--- a/src/js/codemirror/codemirror.js
+++ b/src/js/codemirror/codemirror.js
@ -1285,6 +1285,7 @@

      on(te, "compositionstart", function() {
        var start = cm.getCursor("from");
+        if (input.composing) input.composing.range.clear()
        input.composing = {
          start: start,
          range: cm.markText(start, cm.getCursor("to"), {className: "CodeMirror-composing"})
@ -8504,14 +8505,16 @@

  // KEY NAMES

-  var keyNames = {3: "Enter", 8: "Backspace", 9: "Tab", 13: "Enter", 16: "Shift", 17: "Ctrl", 18: "Alt",
+  var keyNames = CodeMirror.keyNames = {
+    3: "Enter", 8: "Backspace", 9: "Tab", 13: "Enter", 16: "Shift", 17: "Ctrl", 18: "Alt",
    19: "Pause", 20: "CapsLock", 27: "Esc", 32: "Space", 33: "PageUp", 34: "PageDown", 35: "End",
    36: "Home", 37: "Left", 38: "Up", 39: "Right", 40: "Down", 44: "PrintScrn", 45: "Insert",
-				  46: "Delete", 59: ";", 61: "=", 91: "Mod", 92: "Mod", 93: "Mod", 107: "=", 109: "-", 127: "Delete",
+    46: "Delete", 59: ";", 61: "=", 91: "Mod", 92: "Mod", 93: "Mod",
+    106: "*", 107: "=", 109: "-", 110: ".", 111: "/", 127: "Delete",
    173: "-", 186: ";", 187: "=", 188: ",", 189: "-", 190: ".", 191: "/", 192: "`", 219: "[", 220: "\\",
    221: "]", 222: "'", 63232: "Up", 63233: "Down", 63234: "Left", 63235: "Right", 63272: "Delete",
-				  63273: "Home", 63275: "End", 63276: "PageUp", 63277: "PageDown", 63302: "Insert"};
-  CodeMirror.keyNames = keyNames;
+    63273: "Home", 63275: "End", 63276: "PageUp", 63277: "PageDown", 63302: "Insert"
+  };
  (function() {
    // Number keys
    for (var i = 0; i < 10; i++) keyNames[i + 48] = keyNames[i + 96] = String(i);
--- a/src/js/codemirror/continuelist.js
+++ b/src/js/codemirror/continuelist.js
@ -1,5 +1,5 @@
-// NOTE: This has been modified from the original version to add additional commands
-
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE

 (function(mod) {
  if (typeof exports == "object" && typeof module == "object") // CommonJS
@ -17,33 +17,30 @@

  CodeMirror.commands.newlineAndIndentContinueMarkdownList = function(cm) {
    if (cm.getOption("disableInput")) return CodeMirror.Pass;
-		var ranges = cm.listSelections(),
-			replacements = [];
+    var ranges = cm.listSelections(), replacements = [];
    for (var i = 0; i < ranges.length; i++) {
      var pos = ranges[i].head;
      var eolState = cm.getStateAfter(pos.line);
      var inList = eolState.list !== false;
      var inQuote = eolState.quote !== 0;

-			var line = cm.getLine(pos.line),
-				match = listRE.exec(line);
+      var line = cm.getLine(pos.line), match = listRE.exec(line);
      if (!ranges[i].empty() || (!inList && !inQuote) || !match) {
        cm.execCommand("newlineAndIndent");
        return;
      }
      if (emptyListRE.test(line)) {
        cm.replaceRange("", {
-					line: pos.line,
-					ch: 0
+          line: pos.line, ch: 0
        }, {
-					line: pos.line,
-					ch: pos.ch + 1
+          line: pos.line, ch: pos.ch + 1
        });
        replacements[i] = "\n";
      } else {
-				var indent = match[1],
-					after = match[5];
-				var bullet = unorderedListRE.test(match[2]) || match[2].indexOf(">") >= 0 ? match[2] : (parseInt(match[3], 10) + 1) + match[4];
+        var indent = match[1], after = match[5];
+        var bullet = unorderedListRE.test(match[2]) || match[2].indexOf(">") >= 0
+          ? match[2]
+          : (parseInt(match[3], 10) + 1) + match[4];

        replacements[i] = "\n" + indent + bullet + after;
      }
@ -51,44 +48,4 @@

    cm.replaceSelections(replacements);
  };
-
-	CodeMirror.commands.shiftTabAndIndentContinueMarkdownList = function(cm) {
-		var ranges = cm.listSelections();
-		var pos = ranges[0].head;
-		var eolState = cm.getStateAfter(pos.line);
-		var inList = eolState.list !== false;
-
-		if (inList) {
-			cm.execCommand('indentLess');
-			return;
-		}
-		
-		if(cm.options.indentWithTabs){
-			cm.execCommand('insertTab');
-		}
-		else{
-			var spaces = Array(cm.options.tabSize + 1).join(" ");
-			cm.replaceSelection(spaces);
-		}
-	};
-
-	CodeMirror.commands.tabAndIndentContinueMarkdownList = function(cm) {
-		var ranges = cm.listSelections();
-		var pos = ranges[0].head;
-		var eolState = cm.getStateAfter(pos.line);
-		var inList = eolState.list !== false;
-
-		if (inList) {
-			cm.execCommand('indentMore');
-			return;
-		}
-
-		if(cm.options.indentWithTabs){
-			cm.execCommand('insertTab');
-		}
-		else{
-			var spaces = Array(cm.options.tabSize + 1).join(" ");
-			cm.replaceSelection(spaces);
-		}
-	};
 });
--- a/src/js/codemirror/gfm.js
+++ b/src/js/codemirror/gfm.js
@ -1,6 +1,5 @@
-// NOTE: This has been modified from the original version to remove linking GitHub-only references, like references to issues using #X.
-
-
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE

 (function(mod) {
  if (typeof exports == "object" && typeof module == "object") // CommonJS
@ -12,9 +11,14 @@
 })(function(CodeMirror) {
 "use strict";

-	CodeMirror.defineMode("gfm", function(config, modeConfig) {
-		var codeDepth = 0;
+var urlRE = /^((?:coap|doi|javascript|aaa|aaas|about|acap|cap|cid|crid|data|dav|dict|dns|file|ftp|geo|go|gopher|h323|http|https|iax|icap|im|imap|info|ipp|iris|iris\.beep|iris\.xpc|iris\.xpcs|iris\.lwz|ldap|mailto|mid|msrp|msrps|mtqp|mupdate|news|nfs|ni|nih|nntp|opaquelocktoken|pop|pres|rtsp|service|session|shttp|sieve|sip|sips|sms|snmp|soap\.beep|soap\.beeps|tag|tel|telnet|tftp|thismessage|tn3270|tip|tv|urn|vemmi|ws|wss|xcon|xcon-userid|xmlrpc\.beep|xmlrpc\.beeps|xmpp|z39\.50r|z39\.50s|adiumxtra|afp|afs|aim|apt|attachment|aw|beshare|bitcoin|bolo|callto|chrome|chrome-extension|com-eventbrite-attendee|content|cvs|dlna-playsingle|dlna-playcontainer|dtn|dvb|ed2k|facetime|feed|finger|fish|gg|git|gizmoproject|gtalk|hcp|icon|ipn|irc|irc6|ircs|itms|jar|jms|keyparc|lastfm|ldaps|magnet|maps|market|message|mms|ms-help|msnim|mumble|mvn|notes|oid|palm|paparazzi|platform|proxy|psyc|query|res|resource|rmi|rsync|rtmp|secondlife|sftp|sgn|skype|smb|soldat|spotify|ssh|steam|svn|teamspeak|things|udp|unreal|ut2004|ventrilo|view-source|webcal|wtai|wyciwyg|xfire|xri|ymsgr:(?:\/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]|\([^\s()<>]*\))+(?:\([^\s()<>]*\)|[^\s`*!()\[\]{};:'".,<>?«»“”‘’]))/i

+CodeMirror.defineMode("gfm", function(config, modeConfig) {
+  // Should GitHub spice be added (like linking #Num, SHA, etc.)
+  if (modeConfig.gitHubSpice === undefined)
+	modeConfig.gitHubSpice = true;
+
+  var codeDepth = 0;
  function blankLine(state) {
 	state.code = false;
 	return null;
@ -80,12 +84,28 @@
 	  }
 	  if (stream.sol() || state.ateSpace) {
 		state.ateSpace = false;
+		if (modeConfig.gitHubSpice) {
+		  if(stream.match(/^(?:[a-zA-Z0-9\-_]+\/)?(?:[a-zA-Z0-9\-_]+@)?(?:[a-f0-9]{7,40}\b)/)) {
+			// User/Project@SHA
+			// User@SHA
+			// SHA
+			state.combineTokens = true;
+			return "link";
+		  } else if (stream.match(/^(?:[a-zA-Z0-9\-_]+\/)?(?:[a-zA-Z0-9\-_]+)?#[0-9]+\b/)) {
+			// User/Project#Num
+			// User#Num
+			// #Num
+			state.combineTokens = true;
+			return "link";
 		  }
-				if (stream.match(/^((?:[a-z][\w-]+:(?:\/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]|\([^\s()<>]*\))+(?:\([^\s()<>]*\)|[^\s`*!()\[\]{};:'".,<>?«»“”‘’]))/i) &&
+		}
+	  }
+	  if (stream.match(urlRE) &&
 		 stream.string.slice(stream.start - 2, stream.start) != "](") {
 		// URLs
 		// Taken from http://daringfireball.net/2010/07/improved_regex_for_matching_urls
 		// And then (issue #1160) simplified to make it not crash the Chrome Regexp engine
+		// And then limited url schemes to the CommonMark list, so foo:bar isn't matched as a URL
 		state.combineTokens = true;
 		return "link";
 	  }
--- a/src/js/codemirror/markdown.js
+++ b/src/js/codemirror/markdown.js
@ -72,7 +72,7 @@ CodeMirror.defineMode("markdown", function(cmCfg, modeCfg) {
  ,   ulRE = /^[*\-+]\s+/
  ,   olRE = /^[0-9]+([.)])\s+/
  ,   taskListRE = /^\[(x| )\](?=\s)/ // Must follow ulRE or olRE
-  ,   atxHeaderRE = /^(#+)(?: |$)/
+  ,   atxHeaderRE = modeCfg.allowAtxHeaderWithoutSpace ? /^(#+)/ : /^(#+)(?: |$)/
  ,   setextHeaderRE = /^ *(?:\={1,}|-{1,})\s*$/
  ,   textRE = /^[^#!\[\]*_\\<>` "'(~]+/;

@ -178,7 +178,7 @@ CodeMirror.defineMode("markdown", function(cmCfg, modeCfg) {
        stream.match(olRE, true);
        listType = 'ol';
      }
-	  state.indentation += 4;
+      state.indentation = stream.column() + stream.current().length;
      state.list = true;
      state.listDepth++;
      if (modeCfg.taskLists && stream.match(taskListRE, false)) {
@ -702,6 +702,7 @@ CodeMirror.defineMode("markdown", function(cmCfg, modeCfg) {
        text: s.text,
        formatting: false,
        linkTitle: s.linkTitle,
+        code: s.code,
        em: s.em,
        strong: s.strong,
        strikethrough: s.strikethrough,
@ -742,9 +743,6 @@ CodeMirror.defineMode("markdown", function(cmCfg, modeCfg) {
        // Reset state.taskList
        state.taskList = false;

-		// Reset state.code
-		state.code = false;
-
        // Reset state.trailingSpace
        state.trailingSpace = 0;
        state.trailingSpaceNewLine = false;
--- a/src/js/codemirror/tablist.js
+++ b/src/js/codemirror/tablist.js
@ -0,0 +1,53 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+	mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+	define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+	mod(CodeMirror);
+})(function(CodeMirror) {
+  "use strict";
+
+  CodeMirror.commands.tabAndIndentMarkdownList = function(cm) {
+	var ranges = cm.listSelections();
+	  var pos = ranges[0].head;
+	  var eolState = cm.getStateAfter(pos.line);
+	  var inList = eolState.list !== false;
+
+	  if (inList) {
+		cm.execCommand('indentMore');
+		return;
+	  }
+
+	  if(cm.options.indentWithTabs){
+		cm.execCommand('insertTab');
+	  }
+	  else{
+		var spaces = Array(cm.options.tabSize + 1).join(" ");
+		cm.replaceSelection(spaces);
+	  }
+  };
+
+  CodeMirror.commands.shiftTabAndUnindentMarkdownList = function(cm) {
+	var ranges = cm.listSelections();
+	var pos = ranges[0].head;
+	var eolState = cm.getStateAfter(pos.line);
+	var inList = eolState.list !== false;
+
+	if (inList) {
+	  cm.execCommand('indentLess');
+	  return;
+	}
+
+	if(cm.options.indentWithTabs){
+	  cm.execCommand('insertTab');
+	}
+	else{
+	  var spaces = Array(cm.options.tabSize + 1).join(" ");
+	  cm.replaceSelection(spaces);
+	}
+  };
+});
--- a/src/js/marked.js
+++ b/src/js/marked.js
@ -1,5 +1,5 @@
 /**
- * marked - a markdown parser - v0.3.5
+ * marked - a markdown parser
 * Copyright (c) 2011-2014, Christopher Jeffrey. (MIT Licensed)
 * https://github.com/chjj/marked
 */
--- a/src/js/simplemde.js
+++ b/src/js/simplemde.js
@ -88,6 +88,8 @@ function getState(cm, pos) {
 			ret.quote = true;
 		} else if(data === 'strikethrough') {
 			ret.strikethrough = true;
+		} else if(data === 'comment') {
+			ret.code = true;
 		}
 	}
 	return ret;
@ -331,12 +333,11 @@ function toggleSideBySide(editor) {
 	}

 	// Start preview with the current text
-	var parse = editor.constructor.markdown;
-	preview.innerHTML = parse(cm.getValue());
+	preview.innerHTML = editor.options.previewRender(editor.value(), preview);

 	// Updates preview
 	cm.on('update', function() {
-		preview.innerHTML = parse(cm.getValue());
+		preview.innerHTML = editor.options.previewRender(editor.value(), preview);
 	});
 }

@ -349,9 +350,8 @@ function togglePreview(editor) {
 	var wrapper = cm.getWrapperElement();
 	var toolbar_div = wrapper.previousSibling;
 	var toolbar = editor.toolbarElements.preview;
-	var parse = editor.constructor.markdown;
 	var preview = wrapper.lastChild;
-	if(!/editor-preview/.test(preview.className)) {
+	if(!preview || !/editor-preview/.test(preview.className)) {
 		preview = document.createElement('div');
 		preview.className = 'editor-preview';
 		wrapper.appendChild(preview);
@ -373,8 +373,7 @@ function togglePreview(editor) {
 		toolbar.className += ' active';
 		toolbar_div.className += ' disabled-for-preview';
 	}
-	var text = cm.getValue();
-	preview.innerHTML = parse(text);
+	preview.innerHTML = editor.options.previewRender(editor.value(), preview);

 	// Turn off side by side if needed
 	var sidebyside = cm.getWrapperElement().nextSibling;
@ -402,8 +401,10 @@ function _replaceSelection(cm, active, start, end) {
 		cm.replaceSelection(start + text + end);

 		startPoint.ch += start.length;
+		if(startPoint !== endPoint) {
 			endPoint.ch += start.length;
 		}
+	}
 	cm.setSelection(startPoint, endPoint);
 	cm.focus();
 }
@ -555,11 +556,15 @@ function _toggleBlock(editor, type, start_chars, end_chars) {

 		if(type == "bold" || type == "strikethrough") {
 			startPoint.ch -= 2;
+			if(startPoint !== endPoint) {
 				endPoint.ch -= 2;
+			}
 		} else if(type == "italic") {
 			startPoint.ch -= 1;
+			if(startPoint !== endPoint) {
 				endPoint.ch -= 1;
 			}
+		}
 	} else {
 		text = cm.getSelection();
 		if(type == "bold") {
@ -730,6 +735,10 @@ var toolbar = ["bold", "italic", "heading", "|", "quote", "unordered-list", "ord
 function SimpleMDE(options) {
 	options = options || {};

+	// Used later to refer to it's parent
+	options.parent = this;
+
+	// Find the textarea to use
 	if(options.element) {
 		this.element = options.element;
 	} else if(options.element === null) {
@ -738,6 +747,7 @@ function SimpleMDE(options) {
 		return;
 	}

+	// Handle toolbar and status bar
 	if(options.toolbar !== false)
 		options.toolbar = options.toolbar || SimpleMDE.toolbar;

@ -745,9 +755,21 @@ function SimpleMDE(options) {
 		options.status = ['autosave', 'lines', 'words', 'cursor'];
 	}

+	// Add default preview rendering function
+	if(!options.previewRender) {
+		options.previewRender = function(plainText) {
+			// Note: 'this' refers to the options object
+			return this.parent.markdown(plainText);
+		}
+	}
+
+	// Set default options for parsing config
+	options.parsingConfig = options.parsingConfig || {};
+
+	// Update this options
 	this.options = options;

-	// If user has passed an element, it should auto rendered
+	// Auto render
 	this.render();

 	// The codemirror component is only available after rendering
@ -766,10 +788,10 @@ SimpleMDE.toolbar = toolbar;
 /**
 * Default markdown render.
 */
-SimpleMDE.markdown = function(text) {
+SimpleMDE.prototype.markdown = function(text) {
 	if(window.marked) {
 		// Update options
-		if(this.options.singleLineBreaks !== false) {
+		if(this.options && this.options.singleLineBreaks !== false) {
 			marked.setOptions({
 				breaks: true
 			});
@ -807,8 +829,8 @@ SimpleMDE.prototype.render = function(el) {
 	}

 	keyMaps["Enter"] = "newlineAndIndentContinueMarkdownList";
-	keyMaps["Tab"] = "tabAndIndentContinueMarkdownList";
-	keyMaps["Shift-Tab"] = "shiftTabAndIndentContinueMarkdownList";
+	keyMaps["Tab"] = "tabAndIndentMarkdownList";
+	keyMaps["Shift-Tab"] = "shiftTabAndUnindentMarkdownList";
 	keyMaps["F11"] = function(cm) {
 		toggleFullScreen(self);
 	};
@ -816,21 +838,25 @@ SimpleMDE.prototype.render = function(el) {
 		toggleSideBySide(self);
 	};
 	keyMaps["Esc"] = function(cm) {
-		if(cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
+		if(cm.getOption("fullScreen")) toggleFullScreen(self);
 	};

-	var mode = "spell-checker";
-	var backdrop = "gfm";
-
-	if(options.spellChecker === false) {
-		mode = "gfm";
-		backdrop = undefined;
+	var mode, backdrop;
+	if(options.spellChecker !== false) {
+		mode = "spell-checker";
+		backdrop = options.parsingConfig;
+		backdrop.name = "gfm";
+		backdrop.gitHubSpice = false;
+	} else {
+		mode = options.parsingConfig;
+		mode.name = "gfm";
+		mode.gitHubSpice = false;
 	}

 	this.codemirror = CodeMirror.fromTextArea(el, {
 		mode: mode,
 		backdrop: backdrop,
-		theme: 'paper',
+		theme: "paper",
 		tabSize: (options.tabSize != undefined) ? options.tabSize : 2,
 		indentUnit: (options.tabSize != undefined) ? options.tabSize : 2,
 		indentWithTabs: (options.indentWithTabs === false) ? false : true,
@ -850,7 +876,7 @@ SimpleMDE.prototype.render = function(el) {
 		this.autosave();
 	}

-	this.createSidebyside();
+	this.createSideBySide();

 	this._rendered = this.element;
 };
@ -905,12 +931,12 @@ SimpleMDE.prototype.autosave = function() {
 	}, this.options.autosave.delay || 10000);
 };

-SimpleMDE.prototype.createSidebyside = function() {
+SimpleMDE.prototype.createSideBySide = function() {
 	var cm = this.codemirror;
 	var wrapper = cm.getWrapperElement();
 	var preview = wrapper.nextSibling;

-	if(!/editor-preview-side/.test(preview.className)) {
+	if(!preview || !/editor-preview-side/.test(preview.className)) {
 		preview = document.createElement('div');
 		preview.className = 'editor-preview-side';
 		wrapper.parentNode.insertBefore(preview, wrapper.nextSibling);