After searching this forum, I learned that the <br class="Prosemirror-trailingBreak" /> only exists in the editing view in order to provide consistent editing experience in different browsers.
I wish there’s an explanation about that because people like me will question about it’s existence.
If there’s already one, please guide me.
Thanks
<br> nodes in empty text blocks (or after trailing actual-content <br> nodes) are a traditional kludge in contenteditable elements. They prevent the browser from collapsing the empty block (which would make it invisible and hard to interact with) and avoid a number of weird browser behaviors (such as not being able to put the cursor after a trailing <br> node that’s actually part of the content). In many situations, native editing actions (such as creating a new block with enter) will insert these too.
Since a library like ProseMirror is dependent on the browser for some of its cursor motion and editing behavior, and the browser expects these to exist, the library makes sure they exist without actually polluting the real document with them, by treating them as part of the editable-surface-rendering behavior.