NodeView with managed contentDOM does not get attributes applied

1

Hello! I can’t tell if this is intended behaviour (because it kinda makes sense) or unintended (because it also kinda doesn’t make sense).

I have a simple NodeView setup like so:

		<div data-type="todo">
			<div className={"todo-checkbox checkbox blue square " + (this.attrs["done"] ? "checked" : "unchecked")} contentEditable={false} onClick={this.toggle} />
			<div className="todo-assignee" contentEditable={false}></div>
			<div ref={this.setContentContainer} />
		</div>

This actually works perfectly, and the editing behaviour is exactly how I would expect. The final div with the ref={this.setContentContainer} becomes the contentDOM.

However, once changed from a simple Node to a NodeView, ProseMirror is no longer setting the attributes on it I would expect from toDOM(). With:

		toDOM(node: ProseMirrorNode) {
			const { done } = node.attrs;

			return [
				"div",
				{
					"data-done": done.toString(),
				},
				0
			];
		}

… I still end up with a simple div with no attributes. So my question is, even when using a ProseMirror “managed” contentDOM, is it expected to be only partially-managed, and things like attributes need to be handled by the NodeView?

2

The toDOM function from the schema’s node spec is completely ignored when you create a node view for that node type—the node view is responsible for rendering it (and could, if it wanted, use node.type.spec.toDOM in the process).

2 Likes
3

Thanks for the quick clarification, I’ve added a bit of logic to keep the attributes in-sync when updating. For future readers take a look at renderSpec to figure out how prosemirror turns toDOM into a usable element.