How to transfer data from a custom component added to tiptap editor

[C0DE-RUNNER]

I've added a custom component to my tiptap editor taskItem

This is used to assign tasks to the users.

Problems I'm facing:

1. We can either send the HTML or the JSON data to the backend from the editor. Neither of those have any instance of the AssignUser component ( which is obvious since we didn't make use of renderHTML ).
2. Due to point 1, to send data to the backend, we tried to add an attribute to the taskItems to identify them uniquely and hence map the userid to the respective taskItem. While doing so, we are not able to add unique ids to them: either a constant id is applied to all or a new id is generated everytime.
   Getting same id for all the taskItems here
   TaskItem.extend({ draggable: true, addAttributes() { return { ...this.parent?.(), userID: { default: '', parseHTML: element => element.getAttribute('data-userID') || '', renderHTML: attributes => ({ 'data-userID': attributes.userID || uuidv4() } ), }, }; }, addNodeView: this.addNodeView(), }),

Getting different id's for all the taskItems but those are getting updated and changed on every change made to the editor.
TaskItem.extend({ draggable: true, addAttributes() { return { ...this.parent?.(), userID: { default: '', parseHTML: element => element.getAttribute('data-userID') || '', renderHTML: attributes => ({ 'data-userID': uuidv4() } ), }, }; }, addNodeView: this.addNodeView(), }),

also tried leaving it empty over here
renderHTML: attributes => ({ 'data-userID': '' }

and adding the uuid in the addNodeView() function, but getting empty attribute value for data-userid

` addNodeView() {
//initial code
Object.entries(HTMLAttributes).forEach(([key, value]) => {
listItem.setAttribute(key, value as string);
listItem.setAttribute('data-userid', uuidv4())
});

// return statement
}
`

Basic Stackblitz link: https://stackblitz.com/edit/ngx-tiptap-mentions-niuc7z?file=src%2Fapp%2Fadd-modal%2Fadd-modal.component.ts,src%2Fapp%2Fadd-modal%2Fadd-modal.component.html,src%2Fapp%2Fadd-modal%2Fadd-modal.component.css

This is all I could think of. Do you have a better solution / any modifications to the above mentioned ones that can help with our case.
Thank you very much in advance.

[sibiraj-s]

I am just seeing this. I missed the notification. Are you still facing issues?

[sakshi-klaarhq]

Hi, thanks for replying. I'm not facing this issue anymore. I'm able to transfer data using uniqueId that is mapped to every list item.

[sibiraj-s]

Great. 🎉