How to reload the updated contents?

[topcreator]

Hi.
I am using this library within react-quill ( https://www.npmjs.com/package/react-quill)
The blot works well to change size and align of images.
I can get the updated contents by using getContents.
<img src="https://cdn.sstatic.net/Img/unified/sprites.svg" width="83" height="232.7278891509434" style="display: block; margin: auto; cursor: nwse-resize;" data-align="center">

The width, height and style are updated by the formatter.
But I can't reload the html.
When I open the editor with the value, the props are removed as follow.
<img src="https://cdn.sstatic.net/Img/unified/sprites.svg">

Could you let me know how to reload the updated html contents?

Many thanks!

[ricard33]

Same issue, also using it within react-quill. Any solution ?

[Haaxor1689]

After checking out related issues such as #5 and a bit of tinkering I came to a working solution.

import { Quill } from 'react-quill';

const Video = Quill.import('formats/video');

const ATTRIBUTES = ['height', 'width', 'class', 'style'];

class CustomVideo extends Video {
	static create(props) {
		let node = super.create();

		node.setAttribute('src', props.src);
		ATTRIBUTES.forEach(attr => {
			props[attr] && node.setAttribute(attr, props[attr]);
		});

		// Set non-format related attributes with static values
		node.setAttribute('frameborder', '0');
		node.setAttribute('allowfullscreen', true);

		return node;
	}

	static formats(domNode) {
		return ATTRIBUTES.reduce((formats, attribute) => {
			const copy = { ...formats };

			if (domNode.hasAttribute(attribute)) {
				copy[attribute] = domNode.getAttribute(attribute);
			}

			return copy;
		}, {});
	}

	static value(node) {
		return ATTRIBUTES.reduce(
			(attrs, attribute) => {
				const copy = { ...attrs };

				if (node.hasAttribute(attribute)) {
					copy[attribute] = node.getAttribute(attribute);
				}

				return copy;
			},
			{ src: node.getAttribute('src') },
		);
	}

	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);
		}
	}
}

export default CustomVideo;

Then you need to override default video format like this:

Quill.register({
	'formats/video': CustomVideo,
});

This solution almost worked, but it was still missing the modified value function so the new attributes are actually passed to create function and are not thrown out.

This is a solution for video embed, for image one you just replace const Video = Quill.import('formats/video'); with const Image = Quill.import('formats/image'); etc.