React-quill: image attributes removed on load of editor

[levous]

CodePen here
no matter how I override, extend or register ImageFormat, the overridden format(name, value) is never entered. I can break into static formats(domNode) and style is being recognized and added to the returned formats but passing html with img tags containing style attributes are still stripped of their attributes and then sent through onEditorChange.

My most recent attempt was to remove 'image' from formats and replace it with my custom blot... No luck

Upon setting editor value, it strips attributes.

const ParchmentEmbed = Quill.import('blots/block/embed');
console.log('>>>> ParchmentEmbed');
console.log(ParchmentEmbed);
const ATTRIBUTES = [
  'alt',
  'height',
  'width',
  'style'
];


class ImageWithStyle extends ParchmentEmbed {
  static create(value) {
    let node = super.create(value);
    if (typeof value === 'string') {
      node.setAttribute('src', this.sanitize(value));
    }
    return node;
  }

  static formats(domNode) {
    //debugger;
    return ATTRIBUTES.reduce(function(formats, attribute) {
      if (domNode.hasAttribute(attribute)) {
        formats[attribute] = domNode.getAttribute(attribute);
      }
      return formats;
    }, {});
  }

  static match(url) { 
    return /\.(jpe?g|gif|png)$/.test(url) || /^data:image\/.+;base64/.test(url);
  }

  static sanitize(url) {
    return url;
    //return sanitize(url, ['http', 'https', 'data']) ? url : '//:0';
  }

/*
  static value(domNode) {
    debugger;
    return domNode.getAttribute('src');
  }*/

  format(name, value) {
    debugger; // never gets hit
    if (ATTRIBUTES.indexOf(name) > -1) {
      if (value) {
        this.domNode.setAttribute(name, value);
      } else {
        this.domNode.removeAttribute(name);
      }
    } else {
      super.format(name, value);
    }
  }
}
ImageWithStyle.blotName = 'imagewithstyle';
ImageWithStyle.tagName = 'IMG';

Quill.register(ImageWithStyle, true);
Quill.register('modules/imageDrop', ImageDrop);
Quill.register('modules/imageResize', ImageResize);

...

<ReactQuill
          ref={(el) => { this.reactQuillRef = el }}
          theme='snow'
          onChange={this.handleChange}
          value={this.props.editorHtml}
          modules={Editor.modules}
          formats={Editor.formats}
          bounds={'.app'}
          placeholder='Author or Paste your contents'
         />


Editor.modules = {
  toolbar: [
    [{ 'header': '1'}, {'header': '2'}, { 'font': [] }],
    [{size: []}],
    ['bold', 'italic', 'underline', 'strike', 'blockquote'],
    [{'list': 'ordered'}, {'list': 'bullet'},
     {'indent': '-1'}, {'indent': '+1'}],
    ['link', 'image', 'video'],
    ['clean']
  ],
  clipboard: {
    // toggle to add extra line breaks when pasting HTML:
    matchVisual: false,
  },
  imageDrop: true,
  imageResize: {}
}

Editor.formats = [
  'header', 'font', 'size',
  'bold', 'italic', 'underline', 'strike', 'blockquote',
  'list', 'bullet', 'indent',
  'link', 'imagewithstyle', 'video'
]

...

If anyone can point me in the right direction, I'd really appreciate it

I'm using image resize and image drop but this behavior persists when I remove them as well.

[alexkrolick]

This is probably due to the initialization using the paste method from Quill. Possibly a dupe of #323.

[bakkerjoeri]

I believe this issue relates to which formats you allow Quill to handle, which is declared in Editor.formats. I'll explain.

These image attributes will show up in the delta as such:

insert: {
    image: "my/source.jpg",
}
attributes: {
    style: "float: left; margin: 1em;"
    width: "200px",
    height: "200px",
}

Just like a bold formatted text blot will have the attribute of bold: true, these image attributes will be processed into the image block embed blot as formats. Since alt, style, width and height are not included in your allowed Editor.formats array, Quill will discard them when processing content (be it a delta or your HTML).

I've forked your example, adding those 4 attributes to the allowed formats, and it works as expected: https://codepen.io/bakkerjoeri/pen/wXbBxB?editors=1111

I've had trouble with this myself in the past. Quill's guides mentions these kinds of formats as unregistered formats, because they are not registered to correspondent with creating a specific blot. And while, indeed, you do not need to register them to Quill, you still need to allow them in order for them to be processed.

I hope this helps. Let me know if this raises further questions.

[wQueryLoveMm]

@joeribakker Thanks for your answer.....It works....