--resize-width resets to original size when quill loads (when it has alignment)
Hello, I have encountered a bug with the following steps:
1. Setup quill with blot-formatter2
2. Start the app
3. Insert an image into the editor
4. **Add alignment** and resize it
5. Get the HTML via `getSemanticHTML`
6. Close the app
7. Set the HTML as the content of quill to be used as initial HTML as per https://quilljs.com/docs/quickstart
8. Start the app
9. The image that was resized is now small again: the `--resize-width` property is set to the original image size (visible via inspect), while the `width` property is retained.
The issue can be seen in the following tiny app - it simply sets up the quill editor and in the initial HTML is a blue rectangle, that we expect to be big, but it is actually small when loaded
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@enzedonline/quill-blot-formatter2@3.0/dist/css/quill-blot-formatter2.css" rel="stylesheet">
</head>
<body>
<!-- Include stylesheet -->
<!-- Create the editor container -->
<div id="editor">
<p><span class="ql-image-align-center" contenteditable="false" data-relative-size="false" style="--resize-width: 672px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAJCAYAAAD+WDajAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABASURBVChThY5RCgAgCMWmZ+x+3bT6MEup6IGgbqBSaut4dgeACrAqDaDZtb3ngAThCpnCEwKoSPrhf9NjMOphHAE4BBQffabUAAAAAElFTkSuQmCC" width="672px" height="auto" data-blot-align="center"></span></p><p></p>
</div>
<button id="setHtmlToClipboard">Set html to clipboard</button>
<!-- Include the Quill library -->
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@enzedonline/quill-blot-formatter2@3.0/dist/index.js"></script>
<!-- Initialize Quill editor -->
<script>
Quill.register('modules/blotFormatter2', window.QuillBlotFormatter2.default);
const quill = new Quill('#editor', {
theme: 'snow',
modules: {
blotFormatter2: {}
}
});
document.getElementById('setHtmlToClipboard').addEventListener('click', async () => {
const html = quill.getSemanticHTML();
await navigator.clipboard.writeText(html);
alert('HTML content copied to clipboard!');
});
</script>
</body>
</html>
```
Any help would be appreciated!
I believe the issue is related to https://github.com/enzedonline/quill-blot-formatter2/issues/25
2 条评论