DomSerializer: SerializeNode with child nodes

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), node, options)

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

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?

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)

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).

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.

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

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?

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

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
this.dom = main

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

Probably not. But you could create a structure like

<div class=wrapper>
  <div class=angular-stuff>...</div>
  <div class=content>...</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.