Why is renderHtml still required when using addNodeView?

[tom-coupe-sb]

I have a custom node whose rendering is controlled entirely using addNodeView and React. I have not defined renderHtml for the node. This functions completely fine. However, when you attempt to add this node as initial content to the editor, a runtime error is thrown, something about toDOM being missing. This can be solved by defining renderHtml, however this feels strange to me, as the rendering defined there gets overridden by addNodeView. I've noticed pattern of defining both renderHtml and addNodeView throughout the Tiptap library, for example here. What is the purpose of this?

[silenius]

I'm also wondering this with Vue, see #4888

[RodionKorneev]

I have a custom node whose rendering is controlled entirely using addNodeView and React. I have not defined renderHtml for the node. This functions completely fine. However, when you attempt to add this node as initial content to the editor, a runtime error is thrown, something about toDOM being missing. This can be solved by defining renderHtml, however this feels strange to me, as the rendering defined there gets overridden by addNodeView. I've noticed pattern of defining both renderHtml and addNodeView throughout the Tiptap library, for example here. What is the purpose of this?

I think the idea is to allow you to display content in editor in one way (using addNodeView), while exporting this content in HTML format in another way (using renderHtml).

For example this can be useful if you are exporting the content of your editor to HTML for saving somewhere. At the same time, when working in your editor, you want your node to look differently. For example, to have some decorations that you don't need to store.

So these methods have a different purpose.

You can find this text at the beginning of the article (https://tiptap.dev/docs/editor/extensions/custom-extensions/node-views):

Node views are amazing to improve the in-editor experience, but can also be used in a read-only instance of Tiptap. They are unrelated to the HTML output by design, so you have full control about the in-editor experience and the output.

One of them can be used as 'default' to another. In TipTap the renderHtml is required and is 'default' implementation. addNodeView is optional, and replaced by renderHtml result by default. I think this works that way.

[guanriyue]

1. renderHTML determines how you serialize your data for saving.
2. If you do not provide an additional nodeView for a specific node, it will default to using renderHTML for rendering.
3. The default renderHTML output may not meet your interactive needs, so you can provide a nodeView. For example, images in HTML do not support resizing by default, but you can implement this functionality using nodeView.