Image align styles not being retained when they are already set

I cannot get the image styles that are set with the align to be kept when re-displaying the image inside a quill editor.

Use case:

1. Add and right align an image in the editor.
2. Save the editor innerHTML in a database
3. Redisplay the edited HTML in a new quill editor to allow user to update the HTML

Expected: image in the new editor should still be aligned right. Actual: image in new editor has had all the style attributes removed

I’ve updated the demo Plunk to show the issue. In this example, I’ve added the align style attributes to the first image in the HTML (style="display: inline; float: right; margin: 0px 0px 1em 1em;"). The editor has removed them and the image is not being aligned right.

[MaximusBaton]

@bdurand , you’re absolutely right! thanks!

here’s my solution:

var BaseImageFormat = Quill.import('formats/image');
const ImageFormatAttributesList = [
    'alt',
    'height',
    'width',
    'style'
];

class ImageFormat extends BaseImageFormat {
  static formats(domNode) {
    return ImageFormatAttributesList.reduce(function(formats, attribute) {
      if (domNode.hasAttribute(attribute)) {
        formats[attribute] = domNode.getAttribute(attribute);
      }
      return formats;
    }, {});
  }
  format(name, value) {
    if (ImageFormatAttributesList.indexOf(name) > -1) {
      if (value) {
        this.domNode.setAttribute(name, value);
      } else {
        this.domNode.removeAttribute(name);
      }
    } else {
      super.format(name, value);
    }
  }
}

Quill.register(ImageFormat, true);
                
                
var quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
        imageResize: {}
    }
});

[mxgr7]

Have you tried adding 'width’ to the formats: [...] option?