I have a use case where I need three different kinds of lists (bullet list, ordered list, todo list) with the following properties:
- It should be possible to convert one list type to another
- It should be possible to copy/move list items from one list type to another
- It should be possible to join lists of different types
- List items should have different DOM representations depending on their parent list type
Currently I get all of this for free with bullet lists and ordered lists as they can share the exact same list item type and I can set the styling of list items inside ordered lists using CSS. Unfortunately I need a different DOM structure for the todo items, which is why I’m currently using separate todo_list and todo_item types, which allows me to render them in a different way (and also has the benefit of allowing different attributes). At the same time this has the disadvantage of losing the first three properties that I get for free with bullet and ordered lists.
I now came up with the approach of using a single list item type that can be shared across all three list types (even if this means setting some node attributes that are actually only needed for the todo items). The problem with this approach is that I found no way to determine the parent of the currently rendered list item in the
toDOM method where I need to generate a different DOM structure based on this information.
What would be the best way to handle this use case in ProseMirror?