feat: image loader config

Author: mikejpeters

README.md

@@ -83,6 +83,7 @@ Image Tool supports these configuration parameters:
 | buttonContent | `string` | Allows to override HTML content of «Select file» button |
 | uploader | `{{uploadByFile: function, uploadByUrl: function}}` | Optional custom uploading methods. See details below. |
 | actions | `array` | Array with custom actions to show in the tool's settings menu. See details below. |
+| imageLoader | `function` | Optional function for resolving the image URL. See details below. |
 
 Note that if you don't implement your custom uploader methods, the `endpoints` param is required.
 
@@ -281,3 +282,26 @@ var editor = EditorJS({
   ...
 });
 ```
+
+
+## Providing custom image loader
+
+If your images are served with a CDN (e.g. imgix) and you prefer to store relative URLs,
+you can configure an `imageLoader` function to return URLs to the theird-party image service.
+
+Example:
+
+```js
+import ImageTool from '@editorjs/image';
+
+var editor = EditorJS({
+  ...
+  tools: {
+    ...
+    image: {
+      class: ImageTool,
+      config: {
+        imageLoader: (src) => `https://example.com/${src}`
+  ...
+});
+```

src/index.js

@@ -63,6 +63,7 @@ import { IconAddBorder, IconStretch, IconAddBackground, IconPicture } from '@cod
  * @property {object} [uploader] - optional custom uploader
  * @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
+ * @property {function(string): string} [imageLoader] - method to resolve image URL
  */
 
 /**
@@ -150,6 +151,7 @@ export default class ImageTool {
       types: config.types || 'image/*',
       captionPlaceholder: this.api.i18n.t(config.captionPlaceholder || 'Caption'),
       buttonContent: config.buttonContent || '',
+      imageLoader: config.imageLoader || undefined,
       uploader: config.uploader || undefined,
       actions: config.actions || [],
     };

src/ui.js

@@ -154,6 +154,10 @@ export default class Ui {
      */
     const tag = /\.mp4$/.test(url) ? 'VIDEO' : 'IMG';
 
+    if (this.config.imageLoader) {
+      url = this.config.imageLoader(url);
+    }
+
     const attributes = {
       src: url,
     };