Combining `wrapIn` command with `NodeView`

1

Hi, I am trying to create block nodes (e.g., for blockquotes, code blocks…) and I want to extend them with custom editing interfaces. I would like to use custom NodeViews for that purpose.

To wrap existing nodes with these block nodes, I would like to use the wrapIn command from prosemirror-commands. If I don’t define the constructor of the NodeView, this approach works very well. I.e., the content at the current cursor position / selection is wrapped in the block node. However, once I set the this.dom property in the NodeView’s constructor, the original node is simply removed and an empty custom block node is created.

How can I place the the existing node into the newly created “wrapper”? I assume that I should use contentDOM, but I don’t know what value to assign to it. Here is the code in question:

class BlockView implements NodeView {
  constructor (node, editorView, getPos) {
    this.dom = document.createElement('custom')
    // I assume I have to set this.contentDOM here - but what to?
  }
}
2

for the most simple case, just make this.contentDOM equal dom, but you can make contentDOM a child of dom.

dom is the root of your NodeView, contentDOM is where child nodes are placed.

3

Hi Roberto, setting this.contentDOM equal to dom does exactly what I want. Thank you very much for the help and for the explanation as well!