Tiptap: Empty paragraphs contains <br> which is not in getHTML

[chris-converdy]

I might be overlooking something but when you enter a few empty paragraphs it will render a

tag with a
inside. This
is not present when getting the HTML with getHTML. Is there a way to solve this?

https://tiptap.scrumpy.io/export

HTML in browser

HTML from getHTML, no br tags here

[philippkuehn]

This is a decoration and intended behavior by ProseMirror. Otherwise you won‘t be able to type inside of empty paragraphs in some situations.

[chris-converdy]

I see. I'm using the editor as an inline editor and it's crucial that the text looks identical whether the editor is initiated or not. Do you have any suggestions for a workaround? Or are you familiar with a way of disabling this behavior?

[philippkuehn]

Hmm maybe you can solve it with CSS in this case? Something like:

.ProseMirror > p > br:first-child:last-child {
  display: none;
}

[patrikengborg]

Any way to keep that <br> in an otherwise empty paragraph?

[chrisjbrown]

Also looking for a way to keep the <br> tags when calling getHTML()

[tjerman]

One solution would be to just use view's innerHTML (view.dom.innerHTML) - this will preserve those <br>'s.

This probably isn't the best idea (skipping DOMSerializer) in all cases, but for my use-case, it's good enough for now.

[ajgagnon]

One workaround I found it just to style things at the end so they work like <br> tags:

p:empty::after {
    content: "\00A0";
}

[iannator10]

One solution that I'm currently using is that you can replace the "<p></p>" tags with "<br>" using Regex.

For Example:

methods: {
    removeP: function() {
         var removeRegexP = /<p><\/p>/g
         this.html = this.html.replace(removeRegexP, "<br>");
    }
}

You can now use this.html which is a string that has no "<p></p>" but with "<br>"