Pardon me if this is a duplicate question, I’ve been looking for info on this but haven’t been able to find anything related.
We are building a web component for our internal design system that wraps ProseMirror and will have a single value property that will be HTML string based. In other words, HTML string in and out. The issues we are facing now is what best praxis and utilities we can use to ensure whitespace preservation when serializing to HTML so that the snippet later on can be rendered as is?
We have learnt that contenteditable behaves differently depending on what white-space styling is applied, so it will either apply plain spaces or replaces spaces with NBSP. Ideally we would like to have the same type of serialization done in code and not being dependent on how browsers have implemented contenteditable. Another reason is that we need to be compatible with old CKE4 editor that we are phasing out and replacing with the new editor.
On a similar note, what is best praxis to HTML serialization and preventing empty paragraphs and blocks from collapsing? We would need to insert some additional content that in turn is ignored when parsed, something that we have working but we are wondering if there is a more intended way on handling that case.
So my questions in short:
Is there any best praxis on how to achieve the same type of NBSP handling without being dependent on styling the contenteditable as “white-space: normal” and falling back on browser implementation?
Are there any other styling rules that can affect the contenteditable and in turn affect how the ProseMirror content model gets generated? (text content, extra line breaks, etc)
What is best praxis on preventing empty paragraphs and blocks from collapsing and at the same time separate it from actual user content when parsed?
Any thing else we need to be aware of when we are serializing to HTML string and render the snippat as-is?
The library’s built-in serialization doesn’t have the non-breaking space hack. It just serializes spaces as spaces. That should be good enough to round-trip the content for getting it back into the editor. If you want to render things specially for HTML display, you could do your own custom rendering, either entirely or as a pre-processing pass over the content (replacing sequences of spaces with alternate non-breaking spaces, inserting a line break into empty paragraphs, etc).
For clarification, the prosemirror.css from prosemirror-view is a required inclusion? I had only seen the warning in the console about missing white-space styling and now I managed to see a section about CSS files to be included in the basic example. How essential is that styling and what parts of it is essential? The reason I’m asking is because if we skip “white-space: pre-wrap”, then the native contenteditable inserts alternating NBSP in correct patterns, but we don’t know what functionality in ProseMirror could possibly break with such change.
So considering we use the required prosemirror.css, have anyone else serialized to HTML that will be directly rendered, or do the majority simply render each content with a styled wrapper that re-applies the “white-space: pre-wrap“ during rendering? The issue we have is that we are saving this into the database and it can then be rendered in a multitude different views in a large platform with many legacy features. So we need to serialize standalone renderable HTML snippets, and we are kinda surprised that no-one else seems to have asked about this case before.
To run the editor, yes. It’s part of the library and the code assumes it is present. Changing the white-space style to get non-breaking spaces is not a good idea. It’ll interfere with the editor’s expectations.
Again, keep the nbsp kludge out of the document as handled by the editor, and if you really need them, insert them as part of your rendering logic.