Parser adds <br> tag to every paragraph


When I supply supply a content div which contains a paragraph with trailing line breaks, then I parse that div according to the demo schema, then I use the resulting content to create an EditorView, the HTML produced by the EditorView contains an extra line break

  1. Start with this content
<div id="content">
  1. Parse the content let startDoc = DOMParser.fromSchema(demoSchema).parse(content)

  2. Create a new EditorView let view = new EditorView(document.querySelector("#editor"), { …

  3. Editor has a third line break that wasn’t in the original HTML

<div contenteditable="true" class="ProseMirror ProseMirror-example-setup-style">

Anyone have this issue before? Any idea the best way to fix it? Thank you!


The third break is just there in the editor view to make the second break visible. It isn’t part of the document and you probably shouldn’t worry about it.


@marijn thank you for your quick reply! okeydokey, i understand.

however! the reason this was causing me trouble is that, for my application, i’ve been saving the HTML contents of my editor to my database, then parsing them back in when I want to continue working on my document. this causes the document to slowly accumulate line breaks as I save and refresh.

is it not conventional to save the HTML of my document and read it back in? should I be exclusively saving JSON and reading JSON?


I made this change to addTextBlockHacks() which seems to solve my problem.

Hopefully this is not a bad idea!

addTextblockHacks() {
    let lastChild =[this.index - 1]
    while (lastChild instanceof MarkViewDesc) lastChild = lastChild.children[lastChild.children.length - 1]

    if(!lastChild || // Empty textblock !== "hard_break") { // Don't double up on line breaks
      if (!(lastChild instanceof TextViewDesc) ||
          /\n$/.test(lastChild.node.text)) {
        if (this.index < &&[this.index].matchesHack()) {
        } else {
          let dom = document.createElement("br")
, 0, new BRHackViewDesc(, nothing, dom, null))
          this.changed = true


Definitely a bad idea.

And so is taking the innerHTML from the editor. Run the document through a DOMSerializer instead and save that HTML—that’ll be the actual document representation, rather than whatever the editor needs to display to make browsers behave.


In case you need it: This is my function to get HTML from prosemirror:

getHTML() {
	const div = document.createElement('div')
	const fragment = DOMSerializer


	return div.innerHTML


Excellent, thank you!

@philippkuehn I’ll give your function a shot