Added ability to add attributes to image/video tag from data.attributes object or config.attributes object

.eslintrc

@@ -5,6 +5,7 @@
   "globals": {
     "fetch": true,
     "ImageConfig": true,
-    "ImageToolData": true
+    "ImageToolData": true,
+    "quote-props": ["error", "consistent"]
   }
 }

.gitignore

@@ -2,4 +2,3 @@ node_modules/*
 npm-debug.log
 .idea/
 .DS_Store
-dist

README.md

@@ -98,6 +98,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. |
+| attributes | `object` | Object with attribute names to add to block html output such as lazy loading tag  |
 
 Note that if you don't implement your custom uploader methods, the `endpoints` param is required.
 
@@ -187,6 +188,12 @@ The response of your uploader **should**  cover the following format:
     "file": {
         "url" : "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg",
         // ... and any additional fields you want to store, such as width, height, color, extension, etc
+        "attributes" : {
+          "srcset": "clock-demo-200px.png 200w, clock-demo-400px.png 400w",
+          "width" : "400",
+          "height" : "400",
+          // ... and any attributes you would like the image / video element tag to have such as adding width, height, etc
+        }
     }
 }
 ```
@@ -289,6 +296,12 @@ var editor = EditorJS({
             })
           }
         }
+         /**
+         * Ability to added custom attribute to block output such as lazy loading tag 
+         */
+        attributes: {
+          srcset: 'clock-demo-200px.png 200w, clock-demo-400px.png 400w'
+        }
       }
     }
   }

src/index.js

@@ -75,6 +75,18 @@ import { IconAddBorder, IconStretch, IconAddBackground, IconPicture } from '@cod
  * @property {string} file.url - [Required] image source URL
  */
 export default class ImageTool {
+
+  /**
+   * Prevents image attributes from being removed during sanitization phase
+   *
+   */
+
+  static get 'sanitize'() {
+    return {
+      'img': true
+    };
+  }
+
   /**
    * Notify core that read-only mode is supported
    *
@@ -150,6 +162,7 @@ export default class ImageTool {
       buttonContent: config.buttonContent || '',
       uploader: config.uploader || undefined,
       actions: config.actions || [],
+      attributes: config.attributes || {}
     };
 
     /**
@@ -288,7 +301,7 @@ export default class ImageTool {
        * Drag n drop file from into the Editor
        */
       files: {
-        mimeTypes: [ 'image/*' ],
+        mimeTypes: ['image/*'],
       },
     };
   }
@@ -381,7 +394,7 @@ export default class ImageTool {
     this._data.file = file || {};
 
     if (file && file.url) {
-      this.ui.fillImage(file.url);
+      this.ui.fillImage(file);
     }
   }
 

src/ui.js

@@ -22,7 +22,7 @@ export default class Ui {
     this.readOnly = readOnly;
     this.nodes = {
       wrapper: make('div', [this.CSS.baseClass, this.CSS.wrapper]),
-      imageContainer: make('div', [ this.CSS.imageContainer ]),
+      imageContainer: make('div', [this.CSS.imageContainer]),
       fileButton: this.createFileButton(),
       imageEl: undefined,
       imagePreloader: make('div', this.CSS.imagePreloader),
@@ -109,7 +109,7 @@ export default class Ui {
    * @returns {Element}
    */
   createFileButton() {
-    const button = make('div', [ this.CSS.button ]);
+    const button = make('div', [this.CSS.button]);
 
     button.innerHTML = this.config.buttonContent || `${IconPicture} ${this.api.i18n.t('Select an Image')}`;
 
@@ -148,14 +148,19 @@ export default class Ui {
    * @param {string} url - image source
    * @returns {void}
    */
-  fillImage(url) {
+  fillImage(file) {
+    const url = file.url;
+    const fileAttributes = file.attributes || {};
+    const configAttributes = this.config.attributes || {};
     /**
      * Check for a source extension to compose element correctly: video tag for mp4, img — for others
      */
     const tag = /\.mp4$/.test(url) ? 'VIDEO' : 'IMG';
 
     const attributes = {
       src: url,
+      ...configAttributes,
+      ...fileAttributes
     };
 
     /**