RichTextEditor: extra white space is removed when content is loaded

[mihannus]

Description

We're using the RichTextEditor in Delta format (JSON) mode, and the value is bound to a String field that is stored in the database. When the component is loaded with existing Delta format data then extra whitespace is removed (tabs, spaces).

Expected outcome

We'd expect the text to appear as it was when it was saved, with extra whitespaces preserved.

For example when populating the component with this data:
[{"attributes":{"bold":true},"insert":"Line 1"},{"insert":"\n\tIndent 1\n\t\tIndent 2\nLast line with\textra spaces and a \ttab\n\n"}]
then when expect to get the same data back, but now we get:
[{"attributes":{"bold":true},"insert":"Line 1"},{"insert":"\nIndent 1\nIndent 2\nLast line with extra spaces and a tab\n"}]

Minimal reproducible example

getBinder().forField(ingredientListEditor.asDelta())
	.bind(product -> product.getIngredientList(), (product, s) -> {
		product.setIngredientList(s);
	});

Steps to reproduce

1. Create RichTextEditor component
2. Write text that contains tabs and extra spaces into the editor component
3. Retrieve the JSON Delta format data from the component (should be correct at this point)
4. Re-populate the component with the retrieved data
5. Observe that the extra whitespace has been removed

Environment

Vaadin version(s): 24.1.10
OS: Windows 10

Browsers

Chrome

[TatuLund]

I do not know if this is related, but when html value is cleaned, Jsoup will strip white spaces

https://github.com/vaadin/flow-components/blob/main/vaadin-rich-text-editor-flow-parent/vaadin-rich-text-editor-flow/src/main/java/com/vaadin/flow/component/richtexteditor/RichTextEditor.java#L273

Setting prettyPrint to false would preseve white spaces

            var settings = new OutputSettings();
            settings.prettyPrint(false);
            var text = org.jsoup.safety.Jsoup.clean(e.getValue(), "", org.jsoup.safety.Safelist.basic()
                    .addTags("img", "h1", "h2", "h3", "s")
                    .addAttributes("img", "align", "alt", "height", "src",
                            "title", "width")
                    .addAttributes(":all", "style")
                    .addProtocols("img", "src", "data"),
                    settings);

[mihannus]

@TatuLund Yes I think you're right that it's Jsoup that strips the white spaces. I ran the application in the debugger and when RichTextEditor.sanitize was called with the following input:

<p><strong>Line 1</strong></p><p>	Indent 1</p><p>		Indent 2</p><p>Last line with extra     spaces and a 	tab</p>

then it returned:

<p><strong>Line 1</strong></p>
<p>Indent 1</p>
<p>Indent 2</p>
<p>Last line with extra spaces and a tab</p>