I’m a newbie and just evaluating ProseMirror for now. To get started in my evaluation, I grabbed the code from prosemirror.net home page and used it as my text editor in my code.
One issue that I came across:
if I type 2 Enter keys in a row, I get an empty paragraph with the html being: < p > < br > < / p >.
When I save that page and then read it back, I get an extra < br >. That is, the empty paragraph will now look like: < p > < br > < br > < / p >.
So, as I keep re-editing the page, all the empty spaces keep growing…
ProseMirror is a tool kit so I assume this behavior can be adjusted (maybe it’s just a bug in the example editor configuration).
How difficult would it be to alter the example configuration so that this behavior does not happen?
I think the problem is that you’re taking the rendered HTML inside the editor and saving that. Use the DOMSerializer abstraction to convert state.doc to clean HTML instead.
I used your suggestion and got something to work. I used the method of
Now, my code saves empty paragraphs without hard breaks inside, so now re-editing the same text does not change the text – that’s good!
But now I think I understand why the editor inserts hard breaks during edit mode. When I display empty paragraphs in html, the empty paragraphs are essentially invisible – no vertical space is added even if I have many of them. But when I edit that same text (using the basic schema), each of those empty paragraphs shows up as a new block. So now the issue is that the editor version of the text and the static html version of the text look different…
ProseMirror is a toolkit so I can change editor and output behavior, but it’s not clear what the behavior should be. I tried some raw html experiments with using empty div elements but they are also invisible when viewed in html. (I did like that empty div give me less vertical space so writers have more control over the vertical dimension.)
The issue seems to be the html representation for text that allows writers to insert multiple new lines. That html representation needs to display properly in html and edit property in the editor. I’m assuming this is an issue that you have run into and thought about already. Any tips or suggestions or words of advice? Is there a simple representation for this or is this is one area where WYSIWYG and html have an impedance mismatch and solving it is really messy… What about workarounds like not allowing empty new lines (maybe the writer needs to have at least a non-breaking space in each new line)? Just want to know if I’m on the right track and facing a genuine issue with the editor.
PS: As a newbie, I’m glad you gave me the general direction for serialization. It seems like others who read ProseMirror Guide and especially the “Serialization and Parsing” section could benefit from that advice. Thanks for your help and the great editor toolkit!
You can also work around the collapsed block issue (which happens on the layout level) by giving elements like p a min-height style or an :after style that inserts a non-breaking or zero-width-non-breaking space.
I have a [hacked up] approach that I’m considering regarding empty paragraphs:
If the user want a blank line, then he needs to insert a hard break (inside a paragraph)
If the user inserts empty paragraphs via the editor, then I will post-process the document and remove them before saving the document. The next time the user edits the document, the empty paragraphs will not be there.
Can I get your opinion about the approach: does this sound like a reasonable implementation from a ProseMirror technical point of view?
For example, searching for and removing
< p >< /p > using text string search in the output html – is that a reliable method to remove blank paragraphs?