before merge

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,5 @@
+If you're submitting a bug, complete these tasks:
+
+- Set up a [JSFiddle](https://jsfiddle.net/) that replicates the bug
+- Link to your JSFiddle
+- Provide an exact list of step-by-step instructions that will replicate the bug

.travis.yml

@@ -3,7 +3,6 @@ node_js:
 - '6'
 - '5'
 - '4'
-- '0.12'
 before_script:
 - npm install -g gulp
 script: gulp

README.md

@@ -88,16 +88,22 @@ simplemde.value("This text will appear in the editor");
   - link
   - 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"`. Dafaults to `"300px"`.
 - **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`.
   - **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`.
-- **placeholder**: Custom placeholder that should be displayed
+- **placeholder**: If set, displays a custom placeholder message.
 - **previewRender**: Custom function for parsing the plaintext Markdown and returning HTML. Used when user previews.
+- **promptTexts**: Customize title of the prompt box when the `promptURLs` option is set to `true` and the `image` or `url` button is clicked.
+  - image
+  - link
 - **promptURLs**: If set to `true`, a JS alert window appears asking for the link or image URL. Defaults to `false`.
 - **renderingConfig**: Adjust settings for parsing the Markdown during previewing (not editing).
+  - **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 or pass in using the `hljs` option. 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">`
+  - **hljs**: An injectible instance of [highlight.js](https://github.com/isagalaev/highlight.js). If you don't want to rely on the global namespace (`window.hljs`), you can provide an instance here. Defaults to `undefined`.
+  - **markedOptions**: Set the internal Markdown renderer's [options](https://github.com/chjj/marked#options-1). Other `renderingConfig` options will take precedence.
   - **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">`
 - **shortcuts**: Keyboard shortcuts associated with this instance. Defaults to the [array of shortcuts](#keyboard-shortcuts).
 - **showIcons**: An array of icon names to show. Can be used to show specific icons hidden by default without completely customizing the toolbar.
 - **spellChecker**: If set to `false`, disable the spell checker. Defaults to `true`.
@@ -133,6 +139,7 @@ var simplemde = new SimpleMDE({
 		table: ["", "\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text     | Text      | Text     |\n\n"],
 	},
 	lineWrapping: false,
+	minHeight: "500px",
 	parsingConfig: {
 		allowAtxHeaderWithoutSpace: true,
 		strikethrough: false,
@@ -150,6 +157,10 @@ var simplemde = new SimpleMDE({
 		return "Loading...";
 	},
 	promptURLs: true,
+	promptTexts: {
+		link: "URL for the link:",
+		image: "URL of the image:"
+	},
 	renderingConfig: {
 		singleLineBreaks: false,
 		codeSyntaxHighlighting: true,
@@ -276,24 +287,6 @@ Shortcuts are automatically converted between platforms. If you define a shortcu
 
 The list of actions that can be bound is the same as the list of built-in actions available for [toolbar buttons](#toolbar-icons).
 
-#### Height
-
-To change the minimum height (before it starts auto-growing):
-
-```CSS
-.CodeMirror, .CodeMirror-scroll {
-	min-height: 200px;
-}
-```
-
-Or, you can keep the height static:
-
-```CSS
-.CodeMirror {
-	height: 300px;
-}
-```
-
 ## Event handling
 You can catch the following list of events: https://codemirror.net/doc/manual.html#events
 

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;
 }
 
@@ -297,7 +303,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 {
@@ -345,7 +354,6 @@ span.CodeMirror-selectedtext { background: none; }
 
 .CodeMirror {
     height: auto;
-    min-height: 300px;
     border: 1px solid #ddd;
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
@@ -354,10 +362,6 @@ span.CodeMirror-selectedtext { background: none; }
     z-index: 1;
 }
 
-.CodeMirror-scroll {
-    min-height: 300px
-}
-
 .CodeMirror-fullscreen {
     background: #fff;
     position: fixed !important;
@@ -367,6 +371,8 @@ span.CodeMirror-selectedtext { background: none; }
     bottom: 0;
     height: auto;
     z-index: 9;
+    border-right: none !important;
+    border-bottom-right-radius: 0 !important;
 }
 
 .CodeMirror-sided {

src/css/simplemde.css

@@ -1,16 +1,13 @@
 .CodeMirror {
+    box-sizing: border-box;
     height: auto;
-    min-height: 300px;
     border: 1px solid #ddd;
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
     padding: 10px;
     font: inherit;
     z-index: 1;
-}
+    word-wrap: break-word;
-
-.CodeMirror-scroll {
-    min-height: 300px
 }
 
 .CodeMirror-fullscreen {
@@ -22,6 +19,8 @@
     bottom: 0;
     height: auto;
     z-index: 9;
+    border-right: none !important;
+    border-bottom-right-radius: 0 !important;
 }
 
 .CodeMirror-sided {
@@ -115,7 +114,9 @@
     padding: 0;
 }
 
-.editor-toolbar a {
+.editor-toolbar a,
+.editor-toolbar button {
+    background: transparent;
     display: inline-block;
     text-align: center;
     text-decoration: none!important;
@@ -123,18 +124,22 @@
     width: 30px;
     height: 30px;
     margin: 0;
+    padding: 0;
     border: 1px solid transparent;
     border-radius: 3px;
     cursor: pointer;
 }
 
 .editor-toolbar a.active,
-.editor-toolbar a:hover {
+.editor-toolbar a:hover,
+.editor-toolbar button.active,
+.editor-toolbar button:hover {
     background: #fcfcfc;
     border-color: #95a5a6;
 }
 
-.editor-toolbar a:before {
+.editor-toolbar a:before,
+.editor-toolbar button:before {
     line-height: 30px
 }
 
@@ -241,6 +246,7 @@
     display: none;
     box-sizing: border-box;
     border: 1px solid #ddd;
+    word-wrap: break-word;
 }
 
 .editor-preview-active-side {

src/js/simplemde.js

@@ -96,11 +96,11 @@ function fixShortcut(name) {
  */
 function createIcon(options, enableTooltips, shortcuts) {
 	options = options || {};
-	var el = document.createElement("a");
+	var el = document.createElement("button");
 	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;
 
@@ -827,8 +827,10 @@ function _replaceSelection(cm, active, startEnd, url) {
 	var text;
 	var start = startEnd[0];
 	var end = startEnd[1];
-	var startPoint = cm.getCursor("start");
+	var startPoint = {},
-	var endPoint = cm.getCursor("end");
+		endPoint = {};
+	Object.assign(startPoint, cm.getCursor("start"));
+	Object.assign(endPoint, cm.getCursor("end"));
 	if(url) {
 		end = end.replace("#url#", url);
 	}
@@ -928,26 +930,57 @@ function _toggleLine(cm, name) {
 	if(/editor-preview-active/.test(cm.getWrapperElement().lastChild.className))
 		return;
 
+	var listRegexp = /^(\s*)(\*|\-|\+|\d*\.)(\s+)/;
+	var whitespacesRegexp = /^\s*/;
+
 	var stat = getState(cm);
 	var startPoint = cm.getCursor("start");
 	var endPoint = cm.getCursor("end");
 	var repl = {
 		"quote": /^(\s*)\>\s+/,
-		"unordered-list": /^(\s*)(\*|\-|\+)\s+/,
+		"unordered-list": listRegexp,
-		"ordered-list": /^(\s*)\d+\.\s+/
+		"ordered-list": listRegexp
 	};
+
+	var _getChar = function(name, i) {
 		var map = {
 			"quote": ">",
 			"unordered-list": "*",
-		"ordered-list": "1. "
+			"ordered-list": "%%i."
 		};
+
+		return map[name].replace("%%i", i);
+	};
+
+	var _checkChar = function(name, char) {
+		var map = {
+			"quote": "\>",
+			"unordered-list": "\*",
+			"ordered-list": "\d+."
+		};
+		var rt = new RegExp(map[name]);
+
+		return char && rt.test(char);
+	};
+
+	var line = 1;
 	for(var i = startPoint.line; i <= endPoint.line; i++) {
 		(function(i) {
 			var text = cm.getLine(i);
 			if(stat[name]) {
 				text = text.replace(repl[name], "$1");
 			} else {
-				text = map[name] + text;
+				var arr = listRegexp.exec(text);
+				var char = _getChar(name, line);
+				if(arr !== null) {
+					if(_checkChar(name, arr[2])) {
+						char = "";
+					}
+					text = arr[1] + char + arr[3] + text.replace(whitespacesRegexp, "").replace(repl[name], "$1");
+				} else {
+					text = char + " " + text;
+				}
+				line += 1;
 			}
 			cm.replaceRange(text, {
 				line: i,
@@ -1386,7 +1419,7 @@ function SimpleMDE(options) {
 
 
 	// Merging the promptTexts, with the given options
-	options.promptTexts = promptTexts;
+	options.promptTexts = extend({}, promptTexts, options.promptTexts || {});
 
 
 	// Merging the blockStyles, with the given options
@@ -1396,6 +1429,8 @@ function SimpleMDE(options) {
 	// Merging the shortcuts, with the given options
 	options.shortcuts = extend({}, shortcuts, options.shortcuts || {});
 
+	options.minHeight = options.minHeight || "300px";
+
 
 	// Change unique_id to uniqueId for backwards compatibility
 	if(options.autosave != undefined && options.autosave.unique_id != undefined && options.autosave.unique_id != "")
@@ -1424,8 +1459,12 @@ function SimpleMDE(options) {
 SimpleMDE.prototype.markdown = function(text) {
 	if(marked) {
 		// Initialize
-		var markedOptions = {};
+		var markedOptions;
-
+		if(this.options && this.options.renderingConfig && this.options.renderingConfig.markedOptions) {
+			markedOptions = this.options.renderingConfig.markedOptions;
+		} else {
+			markedOptions = {};
+		}
 
 		// Update options
 		if(this.options && this.options.renderingConfig && this.options.renderingConfig.singleLineBreaks === false) {
@@ -1434,11 +1473,18 @@ SimpleMDE.prototype.markdown = function(text) {
 			markedOptions.breaks = true;
 		}
 
-		if(this.options && this.options.renderingConfig && this.options.renderingConfig.codeSyntaxHighlighting === true && window.hljs) {
+		if(this.options && this.options.renderingConfig && this.options.renderingConfig.codeSyntaxHighlighting === true) {
+
+			/* Get HLJS from config or window */
+			var hljs = this.options.renderingConfig.hljs || window.hljs;
+
+			/* Check if HLJS loaded */
+			if(hljs) {
 				markedOptions.highlight = function(code) {
-				return window.hljs.highlightAuto(code).value;
+					return hljs.highlightAuto(code).value;
 				};
 			}
+		}
 
 
 		// Set options
@@ -1527,6 +1573,8 @@ SimpleMDE.prototype.render = function(el) {
 		styleSelectedText: (options.styleSelectedText != undefined) ? options.styleSelectedText : true
 	});
 
+	this.codemirror.getScrollerElement().style.minHeight = options.minHeight;
+
 	if(options.forceSync === true) {
 		var cm = this.codemirror;
 		cm.on("change", function() {
@@ -1899,10 +1947,16 @@ SimpleMDE.prototype.createStatusbar = function(status) {
  * Get or set the text content.
  */
 SimpleMDE.prototype.value = function(val) {
+	var cm = this.codemirror;
 	if(val === undefined) {
-		return this.codemirror.getValue();
+		return cm.getValue();
 	} else {
-		this.codemirror.getDoc().setValue(val);
+		cm.getDoc().setValue(val);
+		if(this.isPreviewActive()) {
+			var wrapper = cm.getWrapperElement();
+			var preview = wrapper.lastChild;
+			preview.innerHTML = this.options.previewRender(val, preview);
+		}
 		return this;
 	}
 };