Merge pull request #411 from diego-gw/imagePreviewHandler

CHANGELOG.md

@@ -5,6 +5,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- Option to register an image preview handler: `imagesPreviewHandler` (Thanks to [@diego-gw], [#411]).
+
 ### Fixed
 - URLs with certain characters entered through prompts causing invalid markdown (Thanks to [@Zignature], [#393]).
 
@@ -243,6 +246,7 @@ Project forked from [SimpleMDE](https://github.com/sparksuite/simplemde-markdown
 [#9]: https://github.com/Ionaru/easy-markdown-editor/issues/9
 
 <!-- Linked PRs -->
+[#411]: https://github.com/Ionaru/easy-markdown-editor/pull/411
 [#393]: https://github.com/Ionaru/easy-markdown-editor/pull/393
 [#389]: https://github.com/Ionaru/easy-markdown-editor/pull/389
 [#388]: https://github.com/Ionaru/easy-markdown-editor/pull/388
@@ -346,6 +350,7 @@ Project forked from [SimpleMDE](https://github.com/sparksuite/simplemde-markdown
 [@Offerel]: https://github.com/Offerel
 [@Zignature]: https://github.com/Zignature
 [@kelvinj]: https://github.com/kelvinj
+[@diego-gw]: https://github.com/diego-gw
 
 <!-- Linked versions -->
 [Unreleased]: https://github.com/Ionaru/easy-markdown-editor/compare/2.16.1...HEAD

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 between the parantheses of the image markdown `![]( )` as argument and returns a string that serves as the `src` attribute of the `<img>` tag in the preview. Enables dynamic previewing of images in the frontend without having to upload them to a server, allows copy-pasting of images to the editor with preview.
 - **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

@@ -2208,6 +2208,14 @@ EasyMDE.prototype.render = function (el) {
                 if (srcAttr && srcAttr.length >= 2) {
                     var keySrc = srcAttr[1];
 
+                    if (options.imagesPreviewHandler) {
+                        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]) {
                         var img = document.createElement('img');
                         img.onload = function () {

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;