Pasting html content (e-mail) partially remove css ( on images )

Lastest version of quill, Im using quill to answers to mails Pasting my mail content [html] with editor.clipboard.dangerouslyPasteHTML();

My html content is fine, but when pasted, all inline css on images are removed

Do i miss any configuration ? This is my Quill config

var toolbarOptions = [
 ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
 ['blockquote', 'code-block'],

 [{ 'header': 1 }, { 'header': 2 }],               // custom button values
 [{ 'list': 'ordered'}, { 'list': 'bullet' }],
 [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
 [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
 [{ 'direction': 'rtl' }],                         // text direction

 [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
 [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
 ['link', 'image'],
 [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
 [{ 'font': [] }],
 [{ 'align': [] }],

 ['clean']                                         // remove formatting button
];
 var options = {
   debug: 'info',
   modules: {
     toolbar: toolbarOptions,
     clipboard: {
       matchVisual: false,
       matchers: [
       ]
     }
   },
   placeholder: 'Compose an epic...',
   readOnly: false,
   theme: 'snow'
 };
 var editor = new Quill('#message_tiny', options);`

html to had : <img src="https://img.jpg" width="600" height="200" style="width:600px;height:200px;"> result: <img src="https://img.jpg">

Platforms:

Mac Osx, Chrome 63.0.3239.84

Version: Quill version : “1.3.4”

[blackChef]

A keepHTML blot could solve the problem:

import Quill from 'quill';
const BlockEmbed = Quill.import('blots/block/embed');

class keepHTML extends BlockEmbed {
  static create(node) {
    return node;
  }
  static value(node) {
    return node;
  }
};

keepHTML.blotName = 'keepHTML';
keepHTML.className = 'keepHTML';
keepHTML.tagName = 'div';

Quill.register(keepHTML);

What this does is that if any html node has “keepHTML” class, the whole html node will be preserved.

[levous]

OK… I’ve tried all sorts of solutions. I created and registered custom format blots and attributors. I was unsuccessful registering anything that would allow an img tag to have a very specific set of attributes.
I understand the philosophy behind deltas and totally agree. What an incredible solution! I was unable to find any examples for clipboard or documentation for deltas that demonstrate how one can extend what is recognized.
If I understand the principle of Deltas, it would be ideal to represent the alignment of an image using an ‘align’ attribute. Then, when formatting the dom, the formatter would emit the appropriate style="float:left; margin:1em" during conversion. I was unable to produce this using a custom formatter. You can see one attempt here: CodePen ReactQuill Custom Blot Eventually, I forked Quill and made the necessary changes in the default Image blot. This worked!

Here is the diff:

@@ -1,20 +1,36 @@
 import Parchment from 'parchment';
 import { sanitize } from '../formats/link';
 
+// override attributes to support image attributes.
+//  alt, width, height, and style alignment )
+// TODO: make checks to ensure style only contains the desired declarations
+//      float; margin; display;
 const ATTRIBUTES = [
+  'src',
   'alt',
   'height',
-  'width'
+  'width',
+  'style'
 ];
 
 
 class Image extends Parchment.Embed {
+
   static create(value) {
-    let node = super.create(value);
+    const imageNode = ATTRIBUTES.reduce(function(node, attribute) {
+      const attrPresent = Object.prototype.hasOwnProperty.call(value, attribute);
+      if (attrPresent) {
+        node.setAttribute(attribute, value[attribute]);
+      }
+      return node;
+    }, super.create(value));
+
+    // check for string only as in when uploading or dropping an image file
     if (typeof value === 'string') {
-      node.setAttribute('src', this.sanitize(value));
+      imageNode.setAttribute('src', this.sanitize(value));
     }
-    return node;
+
+    return imageNode;
   }
 
   static formats(domNode) {
 @@ -35,7 +51,12 @@ class Image extends Parchment.Embed {
   }
 
   static value(domNode) {
-    return domNode.getAttribute('src');
+    return ATTRIBUTES.reduce(function(formats, attribute) {
+      if (domNode.hasAttribute(attribute)) {
+        formats[attribute] = domNode.getAttribute(attribute);
+      }
+      return formats;
+    }, {});
   }
 
   format(name, value) {
     if (ATTRIBUTES.indexOf(name) > -1) {
       if (value) {
         this.domNode.setAttribute(name, value);
       } else {
         this.domNode.removeAttribute(name);
       }
     } else {
       super.format(name, value);
     }
   }
 }
 Image.blotName = 'image';
 Image.tagName = 'IMG';
 
 
 export default Image;

I would like to accomplish this in the proper way. Is there any way to allow these attributes to be retained on an img element through Quill?

The specific use case is that I need to align and resize images in html. The ImageResize module and retain the html changes made by that utility. The issue is posted here.