Parser adds <br> tag to every paragraph


#1

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">
  <p>
    hello
    <br>
    <br>
  </p>
</div>
  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">
  <p>
    hello
    <br>
    <br>
    <br>
  </p>
</div>

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


#2

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.


#3

@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?


#4

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

Hopefully this is not a bad idea!

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

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

#5

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.


#6

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

getHTML() {
	const div = document.createElement('div')
	const fragment = DOMSerializer
		.fromSchema(this.schema)
		.serializeFragment(this.state.doc.content)

	div.appendChild(fragment)

	return div.innerHTML
}

#7

Excellent, thank you!

@philippkuehn I’ll give your function a shot