preserveWhitespace doesn't work with reactiveForms

[haykoaghababyan]

ngx-quill - "^25.0.1"
quill - "2.0.0-rc.2"

This is my test component template 

<quill-editor
[preserveWhitespace]="true"
[formControl]="control">
</quill-editor>

When I set the value   
this.control.setValue(<p>Hayko           Aghababyan</p>);
It shows without spaces 

[KillerCodeMonkey]

does it work with ngModel?

[haykoaghababyan]

not
I tried with ngModel but got the same result as with formControl

[KillerCodeMonkey]

can you check if this happens with ngx-quill 24 and quill v1, please?

[haykoaghababyan]

yes it works with quill: 1.3.7 and ngx-quil: 24.0.5

[KillerCodeMonkey]

than maybe something in the quilljs styling changed. because i am just wrapping the editor element in a pre-tag if preserving is active.

[KillerCodeMonkey]

i tried a view things like hacky settings "white-space: pre-line" at the .ql-editor element but it is not working as well.

So i guess i need to find another solution or remove the option :S

[haykoaghababyan]

thanks ) for nowI= I
will use 1.3.7 version )

[KillerCodeMonkey]

maybe quill itself is removing additional white spaces

[KillerCodeMonkey]

@luin do you know if quill v2 is removing duplicated whitespaces?

for quill v1 it was enough to wrap the editor element into a pre-tag so duplicated whitespaces and new lines were preserved.

this does not seem to work, as well as setting css whiteSpace attribute.

thanks!

PS: sorry for linking/mentioning you here.. but i want to try to avoid useless issues at the quill repo

[luin]

white-space should do the trick actually. It's in quill.core.css in the bundle. Can you try if it works in playground?

--
Edited: for context IIRC we don't intend to make changes regarding whitespaces in 2.0.

[KillerCodeMonkey]

@luin but users can use html as source and then i use the clipboard module and this removes it

test:

quill.setContents(quill.clipboard.convert({ html: '<p>A     B</p>'}));

[luin]

Yeah but I think the behavior doesn't change compared to v1? We do collapse whitespace in clipboard unless the whitespaces are inside a <pre> tag. This makes sure users would see the exact whitespace size as they see in the source page.

[KillerCodeMonkey]

Strange but I am wrapping everything in a pre Tag. I changed Nothing there. I was wrapping the Editor container in a pre Tag and thats it. If you check my live demo the Preserve whitespace example is wrapped in a pre Tag, but White spaces are gone Am 6. März 2024 15:55:59 MEZ schrieb Zihua Li ***@***.***>:

…

Yeah but I think the behavior doesn't change compared to v1? We do collapse whitespace in clipboard unless the whitespaces are inside a `<pre>` tag. This makes sure users would see the exact whitespace size as they see in the source page. -- Reply to this email directly or view it on GitHub: #1812 (comment) You are receiving this because you commented. Message ID: ***@***.***>

[luin]

By wrapping inside a pre tag, I mean the string passed to clipboard.convert(), instead of the editor container. There are two places that could cause whitespace collapsing:

1. quill.clipboard.convert() collapses whitespaces that are not inside <pre>. E.g. quill.clipboard.convert({ html: '<p>A B</p>'}) would be collapsed whereas quill.clipboard.convert({ html: '<pre>A B</pre>'}) won't.
2. The white-space style of the editor container. The default style sets the editor style to white-space: pre-wrap and I think in most cases it should not be changed to other values.

[KillerCodeMonkey]

But then there is a change how the clipboard worked in v1 and v2 right? Since wrapping the Editor in a pre Tag was enough. Am 6. März 2024 16:08:20 MEZ schrieb Zihua Li ***@***.***>:

…

By wrapping inside a `pre` tag, I mean the string passed to `clipboard.convert()`, instead of the editor container. There are two places that could cause whitespace collapsing: 1. `quill.clipboard.convert()` collapses whitespaces that are not inside `<pre>`. E.g. `quill.clipboard.convert({ html: '<p>A B</p>'})` would be collapsed whereas `quill.clipboard.convert({ html: '<pre>A B</pre>'})` won't. 2. The `white-space` style of the editor container. The default style sets the editor style to `white-space: pre-wrap` and I think in most cases it should not be changed to other values. -- Reply to this email directly or view it on GitHub: #1812 (comment) You are receiving this because you commented. Message ID: ***@***.***>

[luin]

@KillerCodeMonkey Actually you are right. Turns out the behavior does change in v2. So in v1, clipboard inserted the HTML to a hidden div inside the editor container, and check whether we should collapse whitespaces or not with getComputedStyles(). That's why wrapping the editor with <pre> worked before. In v2, we parse the pasted HTML directly instead of inserting it to the DOM, so the previous way won't work.

The easiest way to preserve whitespace I think would be adding a TEXT_NODE matcher and overriding the behavior. Haven't tried it myself though.

[KillerCodeMonkey]

@luin thanks again for the response. so in general i will remove this functionality, because this would be to much of a change to the default quill behavior.

[KillerCodeMonkey]

feature removed with v25.1.0

[KillerCodeMonkey]

@luin sorry to bother you again, but with rc3 almost all my test cases are failing.

Do you changed something how to access the editor element?
https://github.com/KillerCodeMonkey/ngx-quill/actions/runs/8323103343/job/22772090567

[luin]

Oh I think it's a bug introduced in slab/quill#4053, where we added back the formats option support. In the PR we merge the options with { ...quillDefaults, ...userProvidedOptions }, so if you pass { registry: undefined } when creating Quill instances, the registry will become undefined, whereas the expected behavior is that undefined values should be ignored.

Thanks for pinging me. Will create a fix soon!

[KillerCodeMonkey]

i have to thank for the fast response (i am searching problems first on my side... so it is nice to get fast feedback)

[luin]

Can you try [email protected]? It's rc3 with this config fix. I ran the test against it and there's one failing test related to formats. I think it makes sense as we brought formats back.

[KillerCodeMonkey]

@luin yep nice my test case is catching that the format prop is working again as expected :D

looks good!