Space between preview paragraphs and additional line-breaks in editor

[buttcheeksio]

Having an issue with react-quill where the editor shows no line-breaks between empty paragraphs while the decoded preview of the editor-text has additional line-breaks.

Here is the way lorem ipsum text appears in my editor

And here is the way that same text appears when I decode it

The text is being decoded with ReactHtmlParser(he.decode(body))

I would like the text to appear as it appears in the editor, or as closely to it as possible. At minimum I would like to get rid of the additional line-breaks.

[veigahector]

Hey, I know this is an old thread, but just wanted to give some insight for other user.

This seems to be a CSS issue.

The editor does not appear to have margin for the paragraphs

created

On the decoded page there seems to be a margin that actually separates one

from another.

you can try something like this

.ql-editor p { margin-top: 10px; margin-bottom: 10px; }

and on your decoded body you can do something like this: .decoded-content p { margin-top: 10px; margin-bottom: 10px; }

this will keep the margins the same and will look very similar.

[oojacoboo]

Removing margin/padding for all default html elements is strange. Why is the default CSS file doing this? It doesn't make any sense.

I'd have to assume there is some logical explanation for this, but I'm having a hard time finding it. You basically need to override this garbage.