In the app I’m working on, the user can click on various HTML elements (currently P and H1-H6) to edit their contents. When the user clicks on element E, I parse the contents of E into a ProseMirror document, set up a state and a view, then render the view into E. When the user blurs the editor, I serialize the ProseMirror document and replace the contents of E with the resulting fragment.
This works as expected, with one glitch: if I append empty paragraphs (
<p></p>) to the end of the edited content (by pressing Enter a number of times at the end of the text), ProseMirror renders these empty paragraphs as
<p><br></p> which looks alright while the editor is active, but as soon as I blur the editor, these turn into actual empty paragraphs (
<p></p>) which are not displayed by the browser.
Blurring (unmounting) the editor and then focusing (mounting) it again thus makes the empty paragraphs disappear then reappear which is not too pretty.
Do you have any pointers on how this problem could be solved? (I’d prefer not to apply any modifications to the CSS of the page.)