<br> tags are converted to p tags

[CharlieGreenman]

This is an old issue: https://github.com/quilljs/quill/issues/3065

It was closed as a result of quill 2 via the automated quill bot. I just want to say it is still an issue and that we should look into.

Note, this is also that HTML with a <br> tag will be converted to a <p> tag on quill render as well.

Thank you

[kozi]

Is there currently a good workaround for this?

[CharlieGreenman]

Is there currently a good workaround for this?

I am using tiptap instead

[kozi]

Is there currently a good workaround for this?

I am using tiptap instead

But this is only a "core"-library where I still have to do some things myself, right?

Basically, I think the quill editor is good. However, I wonder how such an essential functionality as <br> or SHIFT+RETURN is not supported.

[CharlieGreenman]

Nope, with tiptap more functionality than quill. I've already solved the br problem with tiptap via importing one of the tiptap extensions.

[Napam]

I experience issues with <br> not showing up as well.

In quill 1.3 i used the quill.root.innerHTML to store the quill value (the HTML would be used in other places, so using the Delta format was just inconvenient). But I can't now in quill 2 since the lists aren't semantic HTML anymore, so now I use quill.getSemanticHTML(), but that function removes the <br> tags.

[YakovcevMark]

I experience issues with <br> not showing up as well.

In quill 1.3 i used the quill.root.innerHTML to store the quill value (the HTML would be used in other places, so using the Delta format was just inconvenient). But I can't now in quill 2 since the lists aren't semantic HTML anymore, so now I use quill.getSemanticHTML(), but that function removes the <br> tags.

Yes, this problem still persists. I don't want to use any other library, so I wrote a handler to add a <br> tag to empty <p> tags. This code may not cover all cases, but the test version looks something like this:

quill.on('text-change', () => {
        const semanticHtml = quill.getSemanticHTML();
        onChange(semanticHtml.replaceAll('<p></p>', '<p><br/></p>'));
      }
);

[manonlespes]

@YakovcevMark thanks for tips, I did a few changes to make it work on my code but it is a nice work around.

Note : <br> is problematic for people who navigate with the aid of screen reading technology, as screen readers may announce the presence of the element, but not any content contained within <br>s. Thus, since in my case line breaks are purely aesthetic, I added an aria-hidden on the tag <p> :)