added option to readme, imagesPreviewHandler to types and defensive check that the handler provided by the user returns a string

README.md

@@ -144,6 +144,7 @@ easyMDE.value('New input for **EasyMDE**');
 - **indentWithTabs**: If set to `false`, indent using spaces instead of tabs. Defaults to `true`.
 - **initialValue**: If set, will customize the initial value of the editor.
 - **previewImagesInEditor**: - EasyMDE will show preview of images, `false` by default, preview for images will appear only for images on separate lines.
+- **imagesPreviewHandler**: - A custom function for handling the preview of images. Takes the parsed string from the image markdown `![](string)` as argument and returns a string that serves as the `src` attribute of the `<img>` tag in the preview (for ex. as base64). Enables dynamic previewing of images in the frontend without having to upload them to a server.
 - **insertTexts**: Customize how certain buttons that insert text behave. Takes an array with two elements. The first element will be the text inserted before the cursor or highlight, and the second element will be inserted after. For example, this is the default link value: `["[", "](http://)"]`.
   - horizontalRule
   - image

src/js/easymde.js

@@ -2207,8 +2207,13 @@ EasyMDE.prototype.render = function (el) {
 
                 if (srcAttr && srcAttr.length >= 2) {
                     var keySrc = srcAttr[1];
+
                     if (options.imagesPreviewHandler) {
-                        keySrc = options.imagesPreviewHandler(keySrc);
+                        var newSrc = options.imagesPreviewHandler(srcAttr[1]);
+                        // defensive check making sure the handler provided by the user returns a string
+                        if (typeof newSrc === 'string') {
+                            keySrc = newSrc;
+                        }
                     }
 
                     if (!window.EMDEimagesCache[keySrc]) {

types/easymde.d.ts

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