In the docs for NodeView.contentDOM, it’s written
When it is not present, the node view itself is responsible for rendering (or deciding not to render) its child nodes
Are they any examples anywhere of a node view that renders the child nodes itself? I can see how I could easily do this in a read-only way with a dom-serializer, but what about if I want them to be editable?
For example, say my schema has
content: 'title block*' so I know that title node is always going to be present, and say I want to wrap it in some extra div, e.g. to add some UI controls to the title. But I don’t want the other blocks to be wrapped in that div so I can’t use
Is this doable?
Yes, you could render separately editable/focusable controls in a node view and when changed, dispatch transactions to the parent editor that update some aspect of the node or its children.
Thank you. What I’m aiming at is a little different, unless I’m misunderstanding you.
What I’d like to do is have the content be fully “ProseMirror editable”, with potentially a whole tree of nested nodes under there. So exactly like you get with
contentDOM, but with the content sort “broken up” and different bits of it placed at different points in the node-view’s dom.
No, that is not possible. A single ProseMirror editor can only manage a single contenteditable range, so there can’t be uneditable elements with editable islands in them that are part of the same outer editor. You can create little nested editors, and keep those in sync with the outer one (see this example) though.
OK but it’s possible to have arbitrary wrapper elements around the
contentDOM right? That’s the whole point of having it separate to
dom as I understand. So in principle it would seem possible to have different wrappers, e.g. one for the first child node and one for the rest? I don’t need any of it to be non-contenteditable.
I realise I could do the same in the
toDOM of whatever node type that first child has (or a node-view for that type) but in my case it’s not a special node type. I could probably go that way if I had to, but it’s inconvenient for reasons that are not particularly relevant.
Yes, that works. You can even put uneditable siblings in one of the parents of the content DOM element.
Can you explain how? There’s only one
contentDOM which normally gets all the children. How would I code up which child nodes should go into which wrapper?
I misread your message. Putting different children in different nodes is not possible.