use quillclasses like ql-align-right instead of inline styles

[daslicht]

Hi,
when we set the alignment of an image inline styles get added.
There however are removed when you use them to initialize a quill:

slab/quill#2126

Any idea ?

[koan00]

The inline styles need to be registered to Quill, or else they are stripped.

There maybe better ways to do it, but I resolved it like this: koan00@95ba869

[daslicht]

any downside ? or is it ready to be mergred ?

[koan00]

Well the downside would be if overwrites the default image implementation of quill. If something else also needs to override the default implementation, there would be a conflict. The solution was found here: #10

I believe the code itself does not even have to be part of the resize module, and could be implemented separately. I just integrated it for ease of use for my narrow usage scope.

[arimus]

Confirmed that the solution @koan00 mentioned works. FYI, I was able to use this snippet right after my Quill import to get things working (included below from the commit referenced above). My recommendation would be to include this override code and provide a flag to disable it (and document that). This way we can get this working properly out of the box, but allow folks to disable it if needed (or the other way around).

import Quill from 'quill';

// BEGIN allow image alignment styles
const ImageFormatAttributesList = [
  'alt',
  'height',
  'width',
  'style'
];

const BaseImageFormat = Quill.import('formats/image');
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);
// END allow image alignment styles

[dextel2]

@arimus Can you provide TS version, I am facing difficulty in reduce

[arimus]

@arimus Can you provide TS version, I am facing difficulty in reduce

I believe I was using 3.8.3 at the time. If you are stuck on a version without reduce, you could use a polyfill or work around with a filter and a manual dedupe loop.