Merge 672a7c9108288a1a153df648c41a0956f39acf5a into e32fe3f91c2d45f27f72a3662133b1c0e1a5bda1

.gitignore

@@ -7,3 +7,7 @@ bower_components/
 *.ipr
 *.iws
 .idea/
+
+#MacOS junk files (could add more, see : https://github.com/github/gitignore/blob/master/Global/macOS.gitignore)
+.DS_Store
+._*

gulpfile.js

@@ -38,8 +38,7 @@ gulp.task("lint", ["prettify-js"], function() {
 	gulp.src("./src/js/**/*.js")
 		.pipe(debug())
 		.pipe(eslint())
-		.pipe(eslint.format())
+		.pipe(eslint.format());
-		.pipe(eslint.failAfterError());
 });
 
 function taskBrowserify(opts) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simplemde",
-  "version": "1.11.2",
+  "version": "1.12.0",
   "description": "A simple, beautiful, and embeddable JavaScript Markdown editor. Features autosaving and spell checking.",
   "keywords": [
     "embeddable",
@@ -23,6 +23,7 @@
   "dependencies": {
     "codemirror": "*",
     "codemirror-spell-checker": "*",
+    "html2idom": "*",
     "marked": "*"
   },
   "devDependencies": {
@@ -30,16 +31,16 @@
     "debug": "*",
     "eslint": "*",
     "gulp": "*",
+    "gulp-clean-css": "*",
     "gulp-concat": "*",
     "gulp-debug": "*",
     "gulp-eslint": "*",
     "gulp-header": "*",
     "gulp-jsbeautifier": "*",
-    "gulp-clean-css": "*",
     "gulp-rename": "*",
     "gulp-uglify": "*",
-    "vinyl-source-stream": "*",
+    "vinyl-buffer": "*",
-    "vinyl-buffer": "*"
+    "vinyl-source-stream": "*"
   },
   "repository": {
     "type": "git",

src/js/simplemde.js

@@ -12,6 +12,8 @@ require("codemirror/mode/gfm/gfm.js");
 require("codemirror/mode/xml/xml.js");
 var CodeMirrorSpellChecker = require("codemirror-spell-checker");
 var marked = require("marked");
+var patchHTML = require("html2idom").patchHTML;
+var _ = require("lodash");
 
 
 // Some variables
@@ -211,7 +213,7 @@ function toggleFullScreen(editor) {
 
 
 	// Update toolbar button
-	if (editor.toolbarElements.fullscreen) {
+	if(editor.toolbarElements.fullscreen) {
 		var toolbarButton = editor.toolbarElements.fullscreen;
 
 		if(!/active/.test(toolbarButton.className)) {
@@ -691,29 +693,26 @@ function redo(editor) {
  * Toggle side by side preview
  */
 function toggleSideBySide(editor) {
+
 	var cm = editor.codemirror;
 	var wrapper = cm.getWrapperElement();
 	var preview = wrapper.nextSibling;
 	var toolbarButton = editor.toolbarElements["side-by-side"];
-	var useSideBySideListener = false;
+
 	if(/editor-preview-active-side/.test(preview.className)) {
+		editor.renderPreview(false); // stop rendering
 		preview.className = preview.className.replace(
 			/\s*editor-preview-active-side\s*/g, ""
 		);
 		toolbarButton.className = toolbarButton.className.replace(/\s*active\s*/g, "");
 		wrapper.className = wrapper.className.replace(/\s*CodeMirror-sided\s*/g, " ");
 	} else {
-		// When the preview button is clicked for the first time,
+		editor.renderPreview(preview);
-		// give some time for the transition from editor.css to fire and the view to slide from right to left,
-		// instead of just appearing.
-		setTimeout(function() {
 		if(!cm.getOption("fullScreen"))
 			toggleFullScreen(editor);
 		preview.className += " editor-preview-active-side";
-		}, 1);
 		toolbarButton.className += " active";
 		wrapper.className += " CodeMirror-sided";
-		useSideBySideListener = true;
 	}
 
 	// Hide normal preview if active
@@ -728,21 +727,6 @@ function toggleSideBySide(editor) {
 		toolbar_div.className = toolbar_div.className.replace(/\s*disabled-for-preview*/g, "");
 	}
 
-	var sideBySideRenderingFunction = function() {
-		preview.innerHTML = editor.options.previewRender(editor.value(), preview);
-	};
-
-	if(!cm.sideBySideRenderingFunction) {
-		cm.sideBySideRenderingFunction = sideBySideRenderingFunction;
-	}
-
-	if(useSideBySideListener) {
-		preview.innerHTML = editor.options.previewRender(editor.value(), preview);
-		cm.on("update", cm.sideBySideRenderingFunction);
-	} else {
-		cm.off("update", cm.sideBySideRenderingFunction);
-	}
-
 	// Refresh to fix selection being off (#309)
 	cm.refresh();
 }
@@ -757,12 +741,15 @@ function togglePreview(editor) {
 	var toolbar_div = wrapper.previousSibling;
 	var toolbar = editor.options.toolbar ? editor.toolbarElements.preview : false;
 	var preview = wrapper.lastChild;
+
 	if(!preview || !/editor-preview/.test(preview.className)) {
+		// initialize the preview element and the preview function
 		preview = document.createElement("div");
 		preview.className = "editor-preview";
 		wrapper.appendChild(preview);
 	}
 	if(/editor-preview-active/.test(preview.className)) {
+		editor.renderPreview(false); // stop rendering
 		preview.className = preview.className.replace(
 			/\s*editor-preview-active\s*/g, ""
 		);
@@ -771,6 +758,7 @@ function togglePreview(editor) {
 			toolbar_div.className = toolbar_div.className.replace(/\s*disabled-for-preview*/g, "");
 		}
 	} else {
+		editor.renderPreview(preview);
 		// When the preview button is clicked for the first time,
 		// give some time for the transition from editor.css to fire and the view to slide from right to left,
 		// instead of just appearing.
@@ -782,7 +770,6 @@ function togglePreview(editor) {
 			toolbar_div.className += " disabled-for-preview";
 		}
 	}
-	preview.innerHTML = editor.options.previewRender(editor.value(), preview);
 
 	// Turn off side by side if needed
 	var sidebyside = cm.getWrapperElement().nextSibling;
@@ -1470,19 +1457,20 @@ SimpleMDE.prototype.markdown = function(text) {
  * Render editor to the given element.
  */
 SimpleMDE.prototype.render = function(el) {
+	var editor = this;
+
 	if(!el) {
-		el = this.element || document.getElementsByTagName("textarea")[0];
+		el = editor.element || document.getElementsByTagName("textarea")[0];
 	}
 
-	if(this._rendered && this._rendered === el) {
+	if(editor._rendered && editor._rendered === el) {
 		// Already rendered.
 		return;
 	}
 
-	this.element = el;
+	editor.element = el;
-	var options = this.options;
+	var options = editor.options;
 
-	var self = this;
 	var keyMaps = {};
 
 	for(var key in options.shortcuts) {
@@ -1490,7 +1478,7 @@ SimpleMDE.prototype.render = function(el) {
 		if(options.shortcuts[key] !== null && bindings[key] !== null) {
 			(function(key) {
 				keyMaps[fixShortcut(options.shortcuts[key])] = function() {
-					bindings[key](self);
+					bindings[key](editor);
 				};
 			})(key);
 		}
@@ -1500,14 +1488,14 @@ SimpleMDE.prototype.render = function(el) {
 	keyMaps["Tab"] = "tabAndIndentMarkdownList";
 	keyMaps["Shift-Tab"] = "shiftTabAndUnindentMarkdownList";
 	keyMaps["Esc"] = function(cm) {
-		if(cm.getOption("fullScreen")) toggleFullScreen(self);
+		if(cm.getOption("fullScreen")) toggleFullScreen(editor);
 	};
 
 	document.addEventListener("keydown", function(e) {
 		e = e || window.event;
 
 		if(e.keyCode == 27) {
-			if(self.codemirror.getOption("fullScreen")) toggleFullScreen(self);
+			if(editor.codemirror.getOption("fullScreen")) toggleFullScreen(editor);
 		}
 	}, false);
 
@@ -1527,7 +1515,7 @@ SimpleMDE.prototype.render = function(el) {
 		mode.gitHubSpice = false;
 	}
 
-	this.codemirror = CodeMirror.fromTextArea(el, {
+	var cm = editor.codemirror = CodeMirror.fromTextArea(el, {
 		mode: mode,
 		backdrop: backdrop,
 		theme: "paper",
@@ -1543,37 +1531,36 @@ SimpleMDE.prototype.render = function(el) {
 		styleSelectedText: (options.styleSelectedText != undefined) ? options.styleSelectedText : !isMobile(),
 	});
 
-	this.codemirror.getScrollerElement().style.minHeight = options.minHeight;
+	cm.getScrollerElement().style.minHeight = options.minHeight;
 
-	if(options.forceSync === true) {
+	// Throttle preview update and save on text changes
-		var cm = this.codemirror;
+	cm.on("change", _.throttle(function() {
-		cm.on("change", function() {
+		editor.renderPreview();
-			cm.save();
+		if(options.forceSync === true) cm.save();
-		});
+	}, 200, {
-	}
+		leading: true
+	}));
 
-	this.gui = {};
+	editor.gui = {};
 
 	if(options.toolbar !== false) {
-		this.gui.toolbar = this.createToolbar();
+		editor.gui.toolbar = editor.createToolbar();
 	}
 	if(options.status !== false) {
-		this.gui.statusbar = this.createStatusbar();
+		editor.gui.statusbar = editor.createStatusbar();
 	}
 	if(options.autosave != undefined && options.autosave.enabled === true) {
-		this.autosave();
+		editor.autosave();
 	}
 
-	this.gui.sideBySide = this.createSideBySide();
+	editor.gui.sideBySide = editor.createSideBySide();
-
-	this._rendered = this.element;
 
+	editor._rendered = editor.element;
 
 	// Fixes CodeMirror bug (#344)
-	var temp_cm = this.codemirror;
 	setTimeout(function() {
-		temp_cm.refresh();
+		cm.refresh();
-	}.bind(temp_cm), 0);
+	}, 0);
 };
 
 // Safari, in Private Browsing Mode, looks like it supports localStorage but all calls to setItem throw QuotaExceededError. We're going to detect this and set a variable accordingly.
@@ -1914,21 +1901,39 @@ SimpleMDE.prototype.createStatusbar = function(status) {
 	return bar;
 };
 
+/**
+ * Set preview target and remember it
+ * Render the current markdown content inside it
+ */
+SimpleMDE.prototype.renderPreview = function(previewTarget) {
+	var editor = this;
+	if(previewTarget === false) {
+		// stop rendering preview
+		editor.previewElement = null;
+	}
+	if((typeof previewTarget === "object") && (previewTarget.nodeType === 1)) {
+		// remember new preview target
+		editor.previewElement = previewTarget;
+	}
+	if(!editor.previewElement) {
+		return;
+	}
+	patchHTML(editor.previewElement, editor.options.previewRender(editor.value()));
+};
+
 /**
  * Get or set the text content.
  */
 SimpleMDE.prototype.value = function(val) {
-	var cm = this.codemirror;
+	var editor = this,
+		cm = editor.codemirror;
 	if(val === undefined) {
 		return cm.getValue();
 	} else {
 		cm.getDoc().setValue(val);
-		if(this.isPreviewActive()) {
+		editor.renderPreview();
-			var wrapper = cm.getWrapperElement();
+
-			var preview = wrapper.lastChild;
+		return editor;
-			preview.innerHTML = this.options.previewRender(val, preview);
-		}
-		return this;
 	}
 };