Merge pull request #471 from LevitatingOrange/detachedPreviewRendering

README.md

@@ -267,6 +267,11 @@ const editor = new EasyMDE({
             preview.innerHTML = customMarkdownParser(plainText);
         }, 250);
 
+        // If you return null, the innerHTML of the preview will not 
+        // be overwritten. Useful if you control the preview node's content via
+        // vdom diffing.
+        // return null;
+
         return "Loading...";
     },
     promptURLs: true,

src/js/easymde.js

@@ -1072,7 +1072,11 @@ function togglePreview(editor) {
             toolbar_div.classList.add('disabled-for-preview');
         }
     }
-    preview.innerHTML = editor.options.previewRender(editor.value(), preview);
+
+    var preview_result = editor.options.previewRender(editor.value(), preview);
+    if (preview_result !== null) {
+        preview.innerHTML = preview_result;
+    }
 
 }
 
@@ -2860,7 +2864,11 @@ EasyMDE.prototype.value = function (val) {
         if (this.isPreviewActive()) {
             var wrapper = cm.getWrapperElement();
             var preview = wrapper.lastChild;
-            preview.innerHTML = this.options.previewRender(val, preview);
+            var preview_result = this.options.previewRender(val, preview);
+            if (preview_result !== null) {
+                preview.innerHTML = preview_result;
+            }
+
         }
         return this;
     }

types/easymde.d.ts

@@ -196,7 +196,7 @@ declare namespace EasyMDE {
         previewClass?: string | ReadonlyArray<string>;
         previewImagesInEditor?: boolean;
         imagesPreviewHandler?: (src: string) => string,
-        previewRender?: (markdownPlaintext: string, previewElement: HTMLElement) => string;
+        previewRender?: (markdownPlaintext: string, previewElement: HTMLElement) => string | null;
         promptURLs?: boolean;
         renderingConfig?: RenderingOptions;
         shortcuts?: Shortcuts;