From 39642b4a84579cd1e80f93505f31569a09ac1391 Mon Sep 17 00:00:00 2001
From: Lukas Hanak <lukas.hanak@sanezoo.com>
Date: Mon, 7 Aug 2023 19:17:19 +0200
Subject: [PATCH] Custom download function

---
 README.md    | 43 +++++++++++++++++++++++++++++++++++++++++++
 src/index.js |  4 +++-
 src/ui.js    | 15 ++++++++++++---
 3 files changed, 58 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index cdba3830..396078bd 100644
--- a/README.md
+++ b/README.md
@@ -97,6 +97,7 @@ Image Tool supports these configuration parameters:
 | captionPlaceholder | `string` | (default: `Caption`) Placeholder for Caption input |
 | buttonContent | `string` | Allows to override HTML content of «Select file» button |
 | uploader | `{{uploadByFile: function, uploadByUrl: function}}` | Optional custom uploading methods. See details below. |
+| downloader | `{{download: function}}` | Optional custom for downloading image. See details below. |
 | actions | `array` | Array with custom actions to show in the tool's settings menu. See details below. |
 
 Note that if you don't implement your custom uploader methods, the `endpoints` param is required.
@@ -296,3 +297,45 @@ var editor = EditorJS({
   ...
 });
 ```
+
+## Providing custom download method
+
+As mentioned at the Config Params section, you have an ability to provide own custom downloading methods.
+It is a quite simple: implement `download` method and pass them via `downloader` config param.
+
+
+| Method         | Arguments | Return value    | Description |
+| -------------- | --------- | -------------   | ------------|
+| download   | `url`, `File` | `url | blobUrl` | Custom download function to get image data |
+
+Example:
+
+```js
+import ImageTool from '@editorjs/image';
+
+var editor = EditorJS({
+  ...
+
+  tools: {
+    ...
+    image: {
+      class: ImageTool,
+      config: {
+        /**
+         * Custom downloader
+         */
+            downloader: {
+              async download(url: string, file: any) {
+                const data = await getImageData(); 
+                const blob = new Blob([data]);
+                const blobUrl = URL.createObjectURL(blob);
+                return blobUrl;
+              },
+            },
+      }
+    }
+  }
+
+  ...
+});
+```
diff --git a/src/index.js b/src/index.js
index 2bf61c42..125876de 100644
--- a/src/index.js
+++ b/src/index.js
@@ -61,6 +61,7 @@ import { IconAddBorder, IconStretch, IconAddBackground, IconPicture } from '@cod
  * @property {object} additionalRequestHeaders - allows to pass custom headers with Request
  * @property {string} buttonContent - overrides for Select File button
  * @property {object} [uploader] - optional custom uploader
+ * @property {object} [downloader] - optional custom downloader
  * @property {function(File): Promise.<UploadResponseFormat>} [uploader.uploadByFile] - method that upload image by File
  * @property {function(string): Promise.<UploadResponseFormat>} [uploader.uploadByUrl] - method that upload image by URL
  */
@@ -149,6 +150,7 @@ export default class ImageTool {
       captionPlaceholder: this.api.i18n.t(config.captionPlaceholder || 'Caption'),
       buttonContent: config.buttonContent || '',
       uploader: config.uploader || undefined,
+      downloader: config.downloader || undefined,
       actions: config.actions || [],
     };
 
@@ -381,7 +383,7 @@ export default class ImageTool {
     this._data.file = file || {};
 
     if (file && file.url) {
-      this.ui.fillImage(file.url);
+      this.ui.fillImage(file.url, file);
     }
   }
 
diff --git a/src/ui.js b/src/ui.js
index 8609ef21..d0ab7503 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -148,14 +148,23 @@ export default class Ui {
    * @param {string} url - image source
    * @returns {void}
    */
-  fillImage(url) {
+  async fillImage(url, file) {
+    let resultUrl;
+
+    // Check if downloader function exists in the config
+    if (this.config.downloader) {
+      resultUrl = await this.config.downloader.download(url, file);
+    } else {
+      resultUrl = url;
+    }
+
     /**
      * Check for a source extension to compose element correctly: video tag for mp4, img — for others
      */
-    const tag = /\.mp4$/.test(url) ? 'VIDEO' : 'IMG';
+    const tag = /\.mp4$/.test(resultUrl) ? 'VIDEO' : 'IMG';
 
     const attributes = {
-      src: url,
+      src: resultUrl,
     };
 
     /**