Implement an option to use iframe for preview

debug/simplemde.css

@@ -212,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;
@@ -258,8 +255,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   position: relative;
   overflow: visible;
   -webkit-tap-highlight-color: transparent;
-  -webkit-font-variant-ligatures: none;
-  font-variant-ligatures: none;
+  -webkit-font-variant-ligatures: contextual;
+  font-variant-ligatures: contextual;
 }
 .CodeMirror-wrap pre {
   word-wrap: break-word;
@@ -333,9 +330,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; }
 
@@ -579,6 +573,11 @@ span.CodeMirror-selectedtext { background: none; }
     box-sizing: border-box;
 }
 
+iframe.editor-preview {
+    border: 0;
+    padding: 0;
+}
+
 .editor-preview-side {
     padding: 10px;
     position: fixed;
@@ -594,6 +593,11 @@ span.CodeMirror-selectedtext { background: none; }
     border: 1px solid #ddd;
 }
 
+iframe.editor-preview-side {
+    padding: 0;
+    height: 100%;
+}
+
 .editor-preview-active-side {
     display: block
 }

src/css/simplemde.css

@@ -225,6 +225,11 @@
     box-sizing: border-box;
 }
 
+iframe.editor-preview {
+    border: 0;
+    padding: 0;
+}
+
 .editor-preview-side {
     padding: 10px;
     position: fixed;
@@ -240,6 +245,11 @@
     border: 1px solid #ddd;
 }
 
+iframe.editor-preview-side {
+    padding: 0;
+    height: 100%;
+}
+
 .editor-preview-active-side {
     display: block
 }

src/js/simplemde.js

@@ -178,6 +178,46 @@ function getState(cm, pos) {
 	return ret;
 }
 
+function createPreviewContainer(className, previewConfig) {
+	var preview;
+
+	if(previewConfig.useIframe) {
+		preview = document.createElement("iframe");
+		preview.onload = function() {
+			var idoc = getIframeDocument(preview);
+
+			for(var i in previewConfig.editorCss) {
+				var link = idoc.createElement("link");
+				link.rel = "stylesheet";
+				link.href = previewConfig.editorCss[i];
+				idoc.head.appendChild(link);
+			}
+		};
+	} else {
+		preview = document.createElement("div");
+	}
+
+	preview.className = className;
+
+	return preview;
+}
+
+function getIframeDocument(iframe) {
+	return iframe.contentDocument || iframe.contentWindow.document;
+}
+
+function getPreviewContentContainer(preview) {
+	if(preview.tagName == "IFRAME") {
+		return getIframeDocument(preview).body;
+	}
+
+	return preview;
+}
+
+function injectPreviewContent(preview, content) {
+	getPreviewContentContainer(preview).innerHTML = content;
+}
+
 
 // Saved overflow setting
 var saved_overflow = "";
@@ -727,7 +767,7 @@ function toggleSideBySide(editor) {
 	}
 
 	var sideBySideRenderingFunction = function() {
-		preview.innerHTML = editor.options.previewRender(editor.value(), preview);
+		injectPreviewContent(preview, editor.options.previewRender(editor.value(), preview));
 	};
 
 	if(!cm.sideBySideRenderingFunction) {
@@ -735,7 +775,7 @@ function toggleSideBySide(editor) {
 	}
 
 	if(useSideBySideListener) {
-		preview.innerHTML = editor.options.previewRender(editor.value(), preview);
+		injectPreviewContent(preview, editor.options.previewRender(editor.value(), preview));
 		cm.on("update", cm.sideBySideRenderingFunction);
 	} else {
 		cm.off("update", cm.sideBySideRenderingFunction);
@@ -756,8 +796,7 @@ function togglePreview(editor) {
 	var toolbar = editor.options.toolbar ? editor.toolbarElements.preview : false;
 	var preview = wrapper.lastChild;
 	if(!preview || !/editor-preview/.test(preview.className)) {
-		preview = document.createElement("div");
-		preview.className = "editor-preview";
+		preview = createPreviewContainer("editor-preview", editor.options.previewConfig);
 		wrapper.appendChild(preview);
 	}
 	if(/editor-preview-active/.test(preview.className)) {
@@ -780,7 +819,7 @@ function togglePreview(editor) {
 			toolbar_div.className += " disabled-for-preview";
 		}
 	}
-	preview.innerHTML = editor.options.previewRender(editor.value(), preview);
+	injectPreviewContent(preview, editor.options.previewRender(editor.value(), preview));
 
 	// Turn off side by side if needed
 	var sidebyside = cm.getWrapperElement().nextSibling;
@@ -1376,6 +1415,13 @@ function SimpleMDE(options) {
 	}
 
 
+	// Set default options for preview config
+	options.previewConfig = extend({
+		useIframe: true, // should the preview be done in an iframe to isolate stylesheets
+		editorCss: [] // if the iframe mode is enabled, an array of stylesheets to style the preview area
+	}, options.previewConfig || {});
+
+
 	// Set default options for parsing config
 	options.parsingConfig = extend({
 		highlightFormatting: true // needed for toggleCodeBlock to detect types of code
@@ -1662,38 +1708,40 @@ SimpleMDE.prototype.createSideBySide = function() {
 	var preview = wrapper.nextSibling;
 
 	if(!preview || !/editor-preview-side/.test(preview.className)) {
-		preview = document.createElement("div");
-		preview.className = "editor-preview-side";
+		preview = createPreviewContainer("editor-preview-side", this.options.previewConfig);
 		wrapper.parentNode.insertBefore(preview, wrapper.nextSibling);
 	}
 
-	// Syncs scroll  editor -> preview
-	var cScroll = false;
-	var pScroll = false;
-	cm.on("scroll", function(v) {
-		if(cScroll) {
-			cScroll = false;
-			return;
-		}
-		pScroll = true;
-		var height = v.getScrollInfo().height - v.getScrollInfo().clientHeight;
-		var ratio = parseFloat(v.getScrollInfo().top) / height;
-		var move = (preview.scrollHeight - preview.clientHeight) * ratio;
-		preview.scrollTop = move;
-	});
+	if(preview.tagName == "DIV") {
+		// Syncs scroll  editor -> preview
+		var cScroll = false;
+		var pScroll = false;
+		cm.on("scroll", function(v) {
+			if(cScroll) {
+				cScroll = false;
+				return;
+			}
+			pScroll = true;
+			var height = v.getScrollInfo().height - v.getScrollInfo().clientHeight;
+			var ratio = parseFloat(v.getScrollInfo().top) / height;
+			var move = (preview.scrollHeight - preview.clientHeight) * ratio;
+			preview.scrollTop = move;
+		});
+
+		// Syncs scroll  preview -> editor
+		preview.onscroll = function() {
+			if(pScroll) {
+				pScroll = false;
+				return;
+			}
+			cScroll = true;
+			var height = preview.scrollHeight - preview.clientHeight;
+			var ratio = parseFloat(preview.scrollTop) / height;
+			var move = (cm.getScrollInfo().height - cm.getScrollInfo().clientHeight) * ratio;
+			cm.scrollTo(0, move);
+		};
+	}
 
-	// Syncs scroll  preview -> editor
-	preview.onscroll = function() {
-		if(pScroll) {
-			pScroll = false;
-			return;
-		}
-		cScroll = true;
-		var height = preview.scrollHeight - preview.clientHeight;
-		var ratio = parseFloat(preview.scrollTop) / height;
-		var move = (cm.getScrollInfo().height - cm.getScrollInfo().clientHeight) * ratio;
-		cm.scrollTo(0, move);
-	};
 	return preview;
 };
 
@@ -1923,7 +1971,7 @@ SimpleMDE.prototype.value = function(val) {
 		if(this.isPreviewActive()) {
 			var wrapper = cm.getWrapperElement();
 			var preview = wrapper.lastChild;
-			preview.innerHTML = this.options.previewRender(val, preview);
+			injectPreviewContent(preview, this.options.previewRender(val, preview));
 		}
 		return this;
 	}
@@ -2079,4 +2127,4 @@ SimpleMDE.prototype.toTextArea = function() {
 	}
 };
 
-module.exports = SimpleMDE;
+module.exports = SimpleMDE;