quill: unneeded line break....

string.replace("<p><br></p>", "");

Thats all I have to say.

I think that the correct behaviour should be to not create adjacent <p> tags unnecessarily. <p> tags don’t copy paste across text editors well and <p> tag top/bottom margin in the editing experience is unlike most text editors users are used to. A new line should just take you to the next line. That is, insert a <br/> tag, not a new <p></p> tag with a <br/> tag. Editing should be as close to the rendered output as possible (It is a WYSIWYG after all), so adding margins on <p> tags in the rendered output but not the editor is probably a poor decision.

What am I missing?

That is needed because otherwise you could not put your cursor into the empty line, the browser would ignore it.

Finally found solution to this and many related issues. https://github.com/quilljs/quill/issues/1379#issuecomment-396114612

http://stackoverflow.com/questions/17714340/cant-get-to-empty-paragraphs-in-contenteditable http://stackoverflow.com/questions/4063144/setting-the-caret-position-to-an-empty-node-inside-a-contenteditable-element

@twistedpixel

https://codepen.io/mackermedia/pen/gmNwZP

I came up with this regex here, I hope it helps someone:

const processedHtml = html.replace(/(^([ ]*<p><br><\/p>)*)|((<p><br><\/p>)*[ ]*$)/gi, "").trim(" ");

It replaces all beginning and ending instances of <p><br></p>. It also doesn’t care about whitespaces in the beginning or end of the html string; and finally, it trims any remaining whitespaces.

Does anyone have an actual solution to this or is the current solution still “don’t use Quill”?

Is there a way to make it so that each paragraph is separate? People shouldn’t be separating paragraphs with an empty paragraph/br element in between. Should I just give a margin-bottom to all paragraphs?

@gaborsar is correct and I elaborated more on this here. CSS could work but I’m not sure this is a robust solution in all browsers–though this is also moot because of the structure constraints I described.

As @gaborsar replied

This is necessary because otherwise you couldn’t place the cursor on the empty line, the browser would ignore it.

I solved my problem with CSS as follows:

<style> .ql-editor p { margin: 0 0 15px } </style>

In HTML, where the text result will be displayed, you can also do it in the ql-editor style.

string.replaceAll("<p><br></p>", "");

I fixed it in the editor CSS. By changing the p tag to have a sufficient margin-bottom, it makes it unnecessary for the user to enter a blank line for the sake of visual separation. It is naturally visually spaced out. Which is actually correct way to do it from a DTP/typography approach.

</p>
    // margin-bottom
<p>

instead of 
</p>
    <p><br></p>
<p>

maybe an adjustment that can be made to the Quill theme css

string.replace("<p><br></p>", ""); Thats all I have to say.

That would only replace the first instance of <p><br></p>

See https://gomakethings.com/how-to-replace-a-section-of-a-string-with-another-one-with-vanilla-js/#replacing-multiple-strings