Extend an extension to add a fully functional angular component.

[C0DE-RUNNER]

I want to extend TaskList extension and add an icon at the rightmost corner of the list. On clicking that icon, an overlay should open.
I've been trying to get this done for 3 days now. Any help/direction would be highly appreciated.

I have been successfully able to add the component as a separate extension with all functionalities. Putting it inside an existing extension is proving to be challenging.

Please help!

[sibiraj-s]

hi, @C0DE-RUNNER . Can you share your progress on a Stackblitz if possible and do you have some mock screenshot of what you are trying to do so I can help better?

[sibiraj-s]

I forked the stackblitz and with few mods to your code, I was able to render the custom add-modal inside the list item without issues. https://stackblitz.com/edit/ngx-tiptap-mentions-e88hsh

May be with addNodeView combined, you could get the desired result may be. I'll check the rest tomorrow.

[sibiraj-s]

I've made few more changes to dynamically add the add-modal component to the list item using addNodeView and AngularRenderer. its not the desired outcome, but close.

Update:
i've commented out the Angular renderer part as it is causing some performance issue(not sure if this is only with Stackblitz), I've update the code using some plain methods to get it work

[C0DE-RUNNER]

Hi, Thanks a lot. This is of great help. I'll try it in my code and update you on the progress.

[sibiraj-s]

Please check the https://stackblitz.com/edit/ngx-tiptap-mentions-e88hsh. I have updated to get the desired outcome(sort of). It works, but you will still need to get the part of uniquely identifying the node correctly and updating/destroying them correctly. I've just used position for now as an identifier, but its not reliable. Or you can use that, but smartly update the properties/inputs provided to the component.

You can refer AngularRenderer for the list of available methods

[C0DE-RUNNER]

Hey, this latest example fits well with the problem statement. It is rendering as the task list does, and fulfilling all the use cases as well. I'll look for a way to identify the node uniquely.

Thanks @sibiraj-s

[sibiraj-s]

Sure. I you happen to come up with a more cleaner way. Please share the solution here if possible, So others can refer.

Thanks.

[C0DE-RUNNER]

Hey, so I've been looking into it and didn't get any better solution than this, but I found out that our component that was added using addNodeView().
when we print the html using onEditorChange($event),I don't see the component that we added (but it is visible in dom tree). What could be the possible reason behind this?

<p>Hi everyone! Don’t forget the daily stand up at 8 AM.</p><p></p><ul data-type="taskList"><li data-checked="true" data-type="taskItem"><label><input type="checkbox" checked="checked"><span></span></label><div><p>A list item</p></div></li></ul>

[sibiraj-s]

what renders in the html. is upto how the tasklist extension is configured.

See
https://github.com/ueberdosis/tiptap/blob/develop/packages/extension-task-list/src/task-list.ts#L44
https://github.com/ueberdosis/tiptap/blob/develop/packages/extension-task-item/src/task-item.ts#L50

You can find the docs here for renderHTML. Not sure if you could overwrite it though.

[sakshi-klaarhq]

Please check the https://stackblitz.com/edit/ngx-tiptap-mentions-e88hsh. I have updated to get the desired outcome(sort of). It works, but you will still need to get the part of uniquely identifying the node correctly and updating/destroying them correctly. I've just used position for now as an identifier, but its not reliable. Or you can use that, but smartly update the properties/inputs provided to the component.

You can refer AngularRenderer for the list of available methods

[sakshi-klaarhq]

Hi, so in the solution, you mentioned that using the position is not a reliable solution. May I know why you concluded that?
I see that the same is used while adding checkboxes in the list but i don't see them causing any issue.
I recently encountered a problem of extra empty lists getting added to the editor on clicking the assign user button (which is very random and inconsistent bug)
This issue doesn't appear if the component is not added to the listitem.

[sibiraj-s]

The position of a node is subject to change, For example, You add some content before the list, or even you remove some content from the list, the position of the items after the node modified/deleted will change depending on the changes made. Hence said it might not be a reliable solution.

But, It might be enough in some cases depending on the implementation. Say for example, if the position is only needed when the item is interacted with, that should be more than enough since while working with the node, the chances of other nodes changing is not going to happen I guess unless there is some collaborative editing setup.