From d8fa00e460e010388e5da748d48e08052240d6b7 Mon Sep 17 00:00:00 2001 From: Diego Garcia Weber Date: Tue, 1 Mar 2022 17:15:35 -0500 Subject: [PATCH 1/4] Adds the option to add a handler for images preview --- src/js/easymde.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/js/easymde.js b/src/js/easymde.js index f2f514e..050d05c 100644 --- a/src/js/easymde.js +++ b/src/js/easymde.js @@ -2207,6 +2207,9 @@ EasyMDE.prototype.render = function (el) { if (srcAttr && srcAttr.length >= 2) { var keySrc = srcAttr[1]; + if (options.imagesPreviewHandler) { + keySrc = options.imagesPreviewHandler(keySrc); + } if (!window.EMDEimagesCache[keySrc]) { var img = document.createElement('img'); From ed196be5a01dbf4af1203ceec1e5a8cc020e89e7 Mon Sep 17 00:00:00 2001 From: Diego Garcia Weber Date: Tue, 1 Mar 2022 20:47:30 -0500 Subject: [PATCH 2/4] added option to readme, imagesPreviewHandler to types and defensive check that the handler provided by the user returns a string --- README.md | 1 + src/js/easymde.js | 7 ++++++- types/easymde.d.ts | 1 + 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3e8a0a4..a93009b 100644 --- a/README.md +++ b/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 `` 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 diff --git a/src/js/easymde.js b/src/js/easymde.js index 050d05c..468bcb4 100644 --- a/src/js/easymde.js +++ b/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]) { diff --git a/types/easymde.d.ts b/types/easymde.d.ts index eb75699..3cf165c 100644 --- a/types/easymde.d.ts +++ b/types/easymde.d.ts @@ -195,6 +195,7 @@ declare namespace EasyMDE { placeholder?: string; previewClass?: string | ReadonlyArray; previewImagesInEditor?: boolean; + imagesPreviewHandler?: ((src: string) => string), previewRender?: (markdownPlaintext: string, previewElement: HTMLElement) => string; promptURLs?: boolean; renderingConfig?: RenderingOptions; From aa711787b2a7f3ea7b594b57b600b87c654120eb Mon Sep 17 00:00:00 2001 From: Diego Garcia Weber Date: Mon, 7 Mar 2022 10:58:09 -0500 Subject: [PATCH 3/4] clarified readme description of parameter, removed extra parantheses from type --- README.md | 2 +- types/easymde.d.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a93009b..dfb6c9a 100644 --- a/README.md +++ b/README.md @@ -144,7 +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 `` tag in the preview (for ex. as base64). Enables dynamic previewing of images in the frontend without having to upload them to a server. +- **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 `` 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 diff --git a/types/easymde.d.ts b/types/easymde.d.ts index 3cf165c..927c4b8 100644 --- a/types/easymde.d.ts +++ b/types/easymde.d.ts @@ -195,7 +195,7 @@ declare namespace EasyMDE { placeholder?: string; previewClass?: string | ReadonlyArray; previewImagesInEditor?: boolean; - imagesPreviewHandler?: ((src: string) => string), + imagesPreviewHandler?: (src: string) => string, previewRender?: (markdownPlaintext: string, previewElement: HTMLElement) => string; promptURLs?: boolean; renderingConfig?: RenderingOptions; From 1f30a117732cc68ffec87bda4327cf7804ace37f Mon Sep 17 00:00:00 2001 From: Jeroen Akkerman Date: Sat, 12 Mar 2022 01:45:14 +0100 Subject: [PATCH 4/4] Add changelog entry --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a7b979f..9f0814f 100644 --- a/CHANGELOG.md +++ b/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 +[#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 [Unreleased]: https://github.com/Ionaru/easy-markdown-editor/compare/2.16.1...HEAD