What is the difference between decoration and NodeView in tiptap?!

[amirhhashemi]

So tiptap doesn't have decoration API. I'm kind of new to both tiptap and ProseMirror and can't completely distinguish decorations and NodeViews in my head. My definition of decorations is "things that are in the editor but not in the document". tiptap doesn't have decoration API but we can get kind of the same result using NodeViews.

1. Put whatever you like in the NodeView
2. If you don't want it in the document (it's a decoration) don't render it (don't return those parts from the renderHTML method)

Is that a correct mindset?

[pointnet]

So tiptap doesn't have decoration API.

In fact, you can create decoration with tiptap by using the addProseMirrorPlugins method on Extension.create. This will be a prosemirror decoration so you won't be able to render react components easily.

but we can get kind of the same result using NodeViews.

NodeViews force you to have a node in the schema. If you have a node in the schema, you NEED to render html for the browser or the getHTML() method, either a text node or a dom element.

Let's take the example of the placeholder extension: https://github.com/ueberdosis/tiptap/blob/main/packages/extension-placeholder/src/placeholder.ts.

This extension is a decoration because you don't want a <placeholder> node in your editor html (I mean in the browser, not in the getHTML()) .

Another example, let's say you want a counter with the number of images in the current document, no need to create a node in the schema for that, just a decoration will do the trick.

Difference is always subtle, the more you'll use them, the most you'll understand them.

[amirhhashemi]

That makes sence. Thank you.

[hugh-sun-everlaw]

@pointnet thanks for sharing this. However, is using the addProseMirrorPlugins method on Extension.create the only way to add decoration in TipTap? I want to add decoration to the editor dynamically, like calling a function call on the editor. The reason I need this is that I am implementing a functionality where when user clicks on a button I want to show a tooltip at cursor position. Using addProseMirrorPlugins method on Extension.create to create this decoration won't allow me to do this. Thanks for any insight you have!

[Ragnar-Oock]

To do that you would need to create a ProseMirror Plugin that listen for transactions with a given meta (set via setMeta) and add the decoration to the document then.
here is a simple example of such a plugin I found when I was trying to do something like you : https://discuss.prosemirror.net/t/apply-decorations-directly-through-an-editor-method/2377/7
You can then create commands that simply add the meta to make it a bit cleaner when you use the extension, something like this (assuming you've named your meta showTooltip and that it carries only a flag, but you could add other info if needed):

addCommands() {
  return {
    addTooltip: () => ({ tr }) => tr.setMeta('showTooltip', true),
    removeTooltip: () => ({ tr }) => tr.setMeta('showTooltip', false),
  };
},