DomSerializer: SerializeNode with child nodes

1

I was going through the code, and trying out the various DOM manipulation features and saw this:

  // :: (Node, ?Object) → dom.Node
  // Serialize this node to a DOM node. This can be useful when you
  // need to serialize a part of a document, as opposed to the whole
  // document. To serialize a whole document, use
  // [`serializeFragment`](#model.DOMSerializer.serializeFragment) on
  // its [`content`](#model.Node.content).

  serializeNode(node, options = {}) {
    return this.renderStructure(this.nodes[node.type.name](node), node, options)
  }

now this.nodes[node.type.name] does not return a function, and thus this.nodes[node.type.name](node) returns a TypeError. Can you confirm this?

2

Works fine for me. Are you, by any chance, calling it with a document node, for which there probably isn’t a serializer in nodes?

3

I was using a nodeView where I was calling it to serialize the content of the node

//This works fine
let {dom} = Promemirror.model.DOMSerializer.renderSpec(document, this.node.toDom(node)
//This does not
let a = new Prosemirror.model.DOMSerializer(this.node.type.schema.nodes, this.node.type.schema.marks)
let content = a.serializeNode(this.node)
4

You probably want DOMSerializer.fromSchema. The way you’re initializing the DOMSerializer isn’t valid – it takes object holding serializer functions, not node types (which is what you’re getting from the schema).

5

That does give me the dom. Thanks. However, does not solve the overall problem that I am trying to solve.

So my node has its content as two other nodes.

Now one of the nodes has a nodeView of its own. However if I serialize the parent node, the child nodes do not behave as required by their NodeViews.

6

Node views are in-editor-only things. If you’re serializing outside of the editor, you can’t use them.

7

My “parent” has a paragraph node and a CodeMirror node as its content. What I want is that I want a button over the CM node, which gives an option to run the given code. Thus I was using a node-view where I had made this button, but the CM node does not render according to the nodeView

Is there a way around such that I can have the CodeMirror NodeView with the Parent NodeView?

8

Are you trying to render a node view’s children, in the editor? In that case, have you tried the contentDOM property?

9

Got it.

So my dom structure for other nodeViews look li:

Div contenteditable false =>

–angular component through nodeview
–node dom

My code in general looks like this:

main = document.CreateElement('div')
main.innerHTLM = angularComponent
content = getDomFromNode(this.node)  // from renderspec or serializeNode
main.appendChild(content)
this.dom = main
angularCompile(this.dom)

So now I want to pass the dom structure of contentDom to dom. And then I can angularize this.dom Is this possible?

10

Probably not. But you could create a structure like

<div class=wrapper>
  <div class=angular-stuff>...</div>
  <div class=content>...</div>
</div>

Where contentDOM points at the <div> marked “content”, and you put your angular stuff in a sibling of that, so that it is isolated from the editor.