It is not possible to create a signature (ex an email signature) in the RichTextEditor

[FollowSteph]

Description

if you want to create a normal email signature it's not possible in the RTE because each line is a paragraph. There's no option to use something shift-enter to change the paragragh to a br tag for example. This is important because the RTE is very likely going to need the ability to do single spacing by a lot of people. Email signatures is a very common example, but it could also be anything with different spacing. In the screenshot below each line is wrapped in a paragraph tag.

Now yes you can do rte.getElement().getStyle().set("--lumo-line-height-m","1.0"); to replace the line height from 1.6 to 1.0 the challenge is that if you want to say use that text to send an email, etc. you will still have the paragraph tags which means you can't use that component to give users the ability to send any kind of rich emails.

Expected outcome

The ability to have single spacing.

Minimal reproducible example

See the above screenshot

Steps to reproduce

See the above screenshot

Environment

Vaadin version(s): 24.3.12 OS: All.

Browsers

No response

[web-padawan]

Thanks for the issue. This is a known limitation of Quill library we use under the hood: it doesn't support <br> tags. See https://github.com/quilljs/quill/issues/4194 (also the original issue reported at https://github.com/quilljs/quill/issues/3065 and closed without the actual fix).

[FollowSteph]

Is it possible to switch the <p> tags for <br> tags? There seem to be some kind of indication that this might be possible through a configuration in quilljs but I'm not sure how that would be done in RTE? At least then with some post processing it would be possible to adjust the tags if needed.

[Leon-Kunstek]

For everyone looking for a quick fix until this becomes a feature, you could always use something along the lines of: quill.getSemanticHTML().replaceAll('</p><p>', '<br>').replace(/<p>|<\/p>/gm, '')

[web-padawan]

We could implement this in V25 by adapting the fix from https://github.com/quill-next/quill-next/pull/32.