Getting the HTML produced by a doc Node as a string

1

Is there a convenient way of mapping a Node object into an HTML string?

A doc Node knows how to map itself into a sequence of DOM elements. And the browser, through various twisted methods, can convert this sequence into a text string. However, this string is a bit nasty - all whitespace is stripped, for instance. So going from a “nice HTML string” to a ProseMirror doc schema and then back to a HTML string delivers an uglified version of your original string.

Perhaps there is a much easier way?

I mean, I want to convert a doc Node say of the form (it may have been created from some HTML, originally)

header("My header")
paragraph("The grass is green in the spring.")
paragraph("The leaves are brown in the fall.")

into (note the whitespace)

"<h>My header</h>
<p>The grass is green in the spring.</p>
<p>The leaves are brown in the fall.</p>"
2

Nope—ProseMirror documents won’t save insignificant whitespace, so if you want a nice-looking HTML string, you’ll have to run it through some HTML formatter.

3

Ok.

I like the idea of getting the HTML string out. I guess it is really another View that I could implement: HTMLView.

4

I would like to convert a node inot html. Is that something you can help me understand?

5

Im using this function to format the output from innerHTML and then pass it to a CodeMirror

const format = (node: Element, level: number): Element => {

  var indentBefore = new Array(level++ + 1).join('  '),

    indentAfter = new Array(level - 1).join('  '),

    textNode

  for (var i = 0; i < node.children.length; i++) {

    textNode = document.createTextNode('\n' + indentBefore)

    node.insertBefore(textNode, node.children[i])

    format(node.children[i], level)

    if (node.lastElementChild == node.children[i]) {

      textNode = document.createTextNode('\n' + indentAfter)

      node.appendChild(textNode)

    }

  }

  return node

}