[Documentation]: onNodeChange Can you provide more examples for this please?

SourceCodeDeleted commented 1 month ago

What’s the URL to the page you’re sending feedback for?

https://tiptap.dev/docs/editor/extensions/functionality/drag-handle-react

What part of the documentation needs improvement?

PREFACE:

I am trying to implement Tiptap in react/Next and ideally I would like to have the TipTap template imported into my project and just pass it a unique ID and JSON for content, but it doesn't seem that is ready yet.

Currently, I have most components implemented, but I cannot remove or delete added components. I see that in the tiptap templates demo, that you can. From what I have read of the documentation , I can see that there is something called a onNodeChange. Maybe that is something which I can use to get a unique ID or the starting and ending positions of the node to call delete.

What is helpful about that part?

It is in general helpful, but needs more examples I think.

What is hard to understand, missing or misleading?

When I try to implement onNodeChange , it just closes the (openslash) / menu or doesn't do anything at all. I tried to use "pluginKey " but it crashed for some odd reason IIRC. TDLR I am just trying to recreate the template that is in the demo with react/next and need a way to delete components.

Anything to add? (optional)

Can the TipTap template just be imported into react ? Or is there a way to have components deleted when I call them? I also don't see a unique id for each created, but perhaps I haven't looked hard enough.

I was thinking that maybe I could just wrap a div around each component with a ref to a unique id and then just tie the delete button to it.

I like this project enough, that if I could get this working well that it would be worth purchasing a license for it. Unfortunately , it's not in that position yet.

SourceCodeDeleted commented 1 month ago

Can anyone shine some light on this one?)

kart-c commented 1 month ago

I am a little confused, do you want to implement a menu on the DragHandle to remove elements? This can be done by adding your own menu inside the drag handle. e.g.

<DragHandle editor={editor}>
  <PopoverMenu>
  </PopoverMenu>
</DragHandle>

I will try to explain what I know of onNodeChange.

onNodeChange will be called with an object of below three values

editor: Editor;
node: Node | null;
pos: number;

Everytime the drag-handle is changed, the onNodeChanged will be called. (e.g. hovering over an element)

Now the parameters from the onNodeChange can be used to perform actions if you want to (as shown in the tiptap templates). e.g. the node parameter can be used to delete that particular node.

Btw, I took reference for above from the tiptap template. Since you are already using drag-handle-react extension, you must have a pro account which will give you access to the template.

Hope this helps!

ueberdosis / tiptap