Using DOMSerializer inside a NodeView


#1

I’m trying to use DOMSerializer to produce DOM nodes so i can set the dom property inside a NodeView:

class TodoListView {
  constructor(node, view, getPos) {
    const domSerializer = DOMSerializer.fromSchema(mySchema)
    
    const serializedDom = domSerializer.serializeNode(node, {})
    
    this.dom = serializedDom;
  }
}

The reason i’m doing this is that i want to set up event handlers on the resulting dom. The expected dom is too complicated to produce with the document.createElement method, so i tried to do it with DOMSerializer.

This almost works: the view is rendered, but it is not possible to interact with it.

here’s the full code: https://glitch.com/edit/#!/spangle-dove

What am i doing wrong?


#2

Not sure if what you’re trying to do is possible, but you could instead use EditorProps.handleDOMEvents and setup your handlers. You’d then need to verify the event.target is the right element.


#3

By defining a node view like this, you’re telling ProseMirror that the node is an opaque element that it shouldn’t manage. For things to be editable, you have to let the editor render them. So don’t render the children in the node view implementation, just provide a contentDOM property that the editor will render the children into.


#4

Thanks, i was able to cover my use case with contentDOM.

I stumbled over another problem now which is unrelated to before mentioned problem. In this glitch you will see that getPos which is injected into NodeView is returning NaN for <li> nodes which are nested: https://glitch.com/edit/#!/jumpy-milk

This seems like a bug to me, can you confirm?