Problem with empty paragraphs

1

Hey, first of all, thanks for this great piece of work.

I think my problem is exactly the same as this one: How to preserve <br> tags in empty paragraphs

In the document view the empty paragraphs have inside the br tag, but when I get the editor’s content with DOMSerializer, the br tags are gone, which makes imposible to save in the DB the same thing the user is seeing while editing.

Is there any better solution than the workaround included in the thread I mentioned?

2

My answer to that thread still stands. Those breaks aren’t actually part of the document, they are just needed to it possible to edit empty paragraphs. An idea behind ProseMirror is that you don’t want to save the exact same HTML that is in the editor, but want a structured, cleaned-up document. It is possible to render back the breaks in empty nodes with your own custom serializer or some CSS rule, if you must.

1 Like
3

I only had an issue where what was parsed to prosemirror content already had a br, and where the paragraph was empty the minimum height would be different, which I fixed with some css.

4 
  getHTML() {
    if (this.state === null) {
      return '';
    }
    const div = document.createElement('div');

    const fragment = DOMSerializer.fromSchema(this.schema).serializeFragment(this.state.doc.content);
    div.appendChild(fragment);

    const newContent = div.innerHTML.replace(
      /<p[^>]*style=\"(\S*)\"[^>]*><\/p>/gi,
      '<p style="$1"><br/></p>'
    );

    return newContent;
  }
5

handle copy paste in and out of empty paragraph:

	p: {
	content: "inline*",
	draggable: true,
	group: "block",
	parseDOM: [
		{tag: "p"},
		{tag:"div"},
		{
			tag:"br",
			getAttrs: function(dn) {
				var pdn=dn.parentNode;
				// creating empty paragraph if not soft br ()
				// need to make it a loop since can be inside span (like google docs)
				while (pdn) {
					if (['DIV','P','TD','TH'].indexOf(pdn.tagName)>=0) {
						if (pdn.childNodes.length===1) return null; // create empty paragarph
						return false; // don't create a paragarph and stop
					} 
					pdn=pdn.parentNode;
				}
				return false; // don't create a paragarph
			}
		}
	],
	toDOM(node) {
		// if empty paragraph force br to preserve empty paragraph
		if (!node.content.size) {
			return ["div",["br"]];
		}
		return ["div", 0];
	}
},
6

it is not work :sob: