How to access parent node in toDOM

1

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?

2

This isn’t really possible, for a relatively good reason — the DOM structure might be kept even if the parent changes type, and thus should depend only on the node itself. Sometimes you can solve this with some CSS kludges (maybe add :before elements and/or hide the elements you don’t need in a given context). Other than that, there’s no great way around it.

3

Thanks for the quick response! Well that makes sense, too bad that there isn’t a great way around it. I don’t think I can solve this one with CSS only, but hopefully I’ll find some other solution.