Merge pull request Ionaru#471 from LevitatingOrange/detachedPreviewRe…

…ndering
borodean · Aug 20, 2022 · b4c55d9 · b4c55d9
2 parents c27f5d1 + 67f7553
commit b4c55d9
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/README.md b/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,

diff --git a/src/js/easymde.js b/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;
  }

diff --git a/types/easymde.d.ts b/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;