9gustin/react-notion-render

Nested Lists are not working

Opened this issue · 7 comments

Example

  • List Item 1
    • List Item 1.1
    • List Item 1.2
    • List Item 1.3
  • List Item 2
  • List Item 2

Description

The nested list (list item 1.1, list item 1.2, list item 1.3) are not rendered.

true, i leave here a mock example to replicate it, i would be working on it in the next week

[{"object":"block","id":"42b60d62-c0a0-4854-953c-c5e45c5c355e","created_time":"2021-12-29T15:49:00.000Z","last_edited_time":"2021-12-29T15:49:00.000Z","has_children":false,"archived":false,"type":"paragraph","paragraph":{"text":[{"type":"text","text":{"content":"Nested lists:","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"Nested lists:","href":null}]}},{"object":"block","id":"29a8f9b8-3c9b-458a-9b3c-7a90fec258ad","created_time":"2021-12-29T15:49:00.000Z","last_edited_time":"2021-12-29T15:50:00.000Z","has_children":false,"archived":false,"type":"paragraph","paragraph":{"text":[{"type":"text","text":{"content":"todo","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"todo","href":null}]}},{"object":"block","id":"f784b7dc-9e8e-4bce-8d32-17a821c378ed","created_time":"2021-12-29T15:49:00.000Z","last_edited_time":"2021-12-29T15:50:00.000Z","has_children":true,"archived":false,"type":"to_do","to_do":{"text":[{"type":"text","text":{"content":"Item lvl 1","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"Item lvl 1","href":null}],"checked":false,"children":[{"object":"block","id":"7d33cd7a-287e-4f9e-a581-a3c96a9494ce","created_time":"2021-12-29T15:49:00.000Z","last_edited_time":"2021-12-29T15:50:00.000Z","has_children":false,"archived":false,"type":"to_do","to_do":{"text":[{"type":"text","text":{"content":"item lvl 2","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"item lvl 2","href":null}],"checked":false}},{"object":"block","id":"34a509ba-b429-481f-868b-3ec5b0b05d79","created_time":"2021-12-29T15:49:00.000Z","last_edited_time":"2021-12-29T15:50:00.000Z","has_children":true,"archived":false,"type":"to_do","to_do":{"text":[{"type":"text","text":{"content":"item lvl 2","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"item lvl 2","href":null}],"checked":false}}]}},{"object":"block","id":"4e0e8382-e3b3-4aa8-9438-3cf19f1c2d22","created_time":"2021-12-29T15:49:00.000Z","last_edited_time":"2021-12-29T15:50:00.000Z","has_children":false,"archived":false,"type":"to_do","to_do":{"text":[{"type":"text","text":{"content":"item lvl 1","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"item lvl 1","href":null}],"checked":false}},{"object":"block","id":"b1262953-26b4-4eba-bc05-80c8cf145721","created_time":"2021-12-29T15:50:00.000Z","last_edited_time":"2021-12-29T15:50:00.000Z","has_children":false,"archived":false,"type":"paragraph","paragraph":{"text":[{"type":"text","text":{"content":"bullet","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"bullet","href":null}]}},{"object":"block","id":"c99b7b66-5a5e-481f-acf7-b7b51d4f1d3e","created_time":"2021-12-29T15:50:00.000Z","last_edited_time":"2021-12-29T15:50:00.000Z","has_children":false,"archived":false,"type":"bulleted_list_item","bulleted_list_item":{"text":[{"type":"text","text":{"content":"item lvl 1","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"item lvl 1","href":null}]}},{"object":"block","id":"b7362a55-ac8e-4b3f-b538-1564edd9a236","created_time":"2021-12-29T15:50:00.000Z","last_edited_time":"2021-12-29T15:50:00.000Z","has_children":false,"archived":false,"type":"bulleted_list_item","bulleted_list_item":{"text":[{"type":"text","text":{"content":"item lvl 1","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"item lvl 1","href":null}]}},{"object":"block","id":"dc69a0cb-be17-408b-b480-29675b3251fd","created_time":"2021-12-29T15:50:00.000Z","last_edited_time":"2021-12-29T15:50:00.000Z","has_children":true,"archived":false,"type":"bulleted_list_item","bulleted_list_item":{"text":[{"type":"text","text":{"content":"item lvl 1","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"item lvl 1","href":null}],"children":[{"object":"block","id":"cfae1168-36cc-4bf9-88b2-d93dab393221","created_time":"2021-12-29T15:50:00.000Z","last_edited_time":"2021-12-29T15:50:00.000Z","has_children":true,"archived":false,"type":"bulleted_list_item","bulleted_list_item":{"text":[{"type":"text","text":{"content":"item lvl 2","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"item lvl 2","href":null}]}}]}},{"object":"block","id":"43895722-cc74-4b63-ba5e-cb1c37bed18c","created_time":"2021-12-29T15:51:00.000Z","last_edited_time":"2021-12-29T15:51:00.000Z","has_children":false,"archived":false,"type":"paragraph","paragraph":{"text":[{"type":"text","text":{"content":"numered","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"numered","href":null}]}},{"object":"block","id":"b936408d-75f3-4dff-9da6-98d49d950484","created_time":"2021-12-29T15:50:00.000Z","last_edited_time":"2021-12-29T15:50:00.000Z","has_children":false,"archived":false,"type":"numbered_list_item","numbered_list_item":{"text":[{"type":"text","text":{"content":"item lvl 1","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"item lvl 1","href":null}]}},{"object":"block","id":"3bc35661-b853-4ee5-a5e1-6e363aa7e94c","created_time":"2021-12-29T15:50:00.000Z","last_edited_time":"2021-12-29T15:51:00.000Z","has_children":true,"archived":false,"type":"numbered_list_item","numbered_list_item":{"text":[{"type":"text","text":{"content":"item lvl 1","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"item lvl 1","href":null}],"children":[{"object":"block","id":"1da24458-9f7d-49b9-895a-c2b9379a535f","created_time":"2021-12-29T15:50:00.000Z","last_edited_time":"2021-12-29T15:51:00.000Z","has_children":true,"archived":false,"type":"numbered_list_item","numbered_list_item":{"text":[{"type":"text","text":{"content":"item lvl 2","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"item lvl 2","href":null}]}}]}},{"object":"block","id":"6ae015f3-0d59-4e9d-b993-9be4b6f0e35f","created_time":"2021-12-29T15:51:00.000Z","last_edited_time":"2021-12-29T15:51:00.000Z","has_children":false,"archived":false,"type":"paragraph","paragraph":{"text":[{"type":"text","text":{"content":"toggle","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"toggle","href":null}]}},{"object":"block","id":"6e98a3ab-606c-4eff-97da-07e1178fd83c","created_time":"2021-12-29T15:51:00.000Z","last_edited_time":"2021-12-29T15:51:00.000Z","has_children":true,"archived":false,"type":"toggle","toggle":{"text":[{"type":"text","text":{"content":"item lvl 1","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"item lvl 1","href":null}],"children":[{"object":"block","id":"ac0cf13f-4e2e-4f09-a1e2-45298b0a37b6","created_time":"2021-12-29T15:51:00.000Z","last_edited_time":"2021-12-29T15:51:00.000Z","has_children":true,"archived":false,"type":"toggle","toggle":{"text":[{"type":"text","text":{"content":"item lvl 2","link":null},"annotations":{"bold":false,"italic":false,"strikethrough":false,"underline":false,"code":false,"color":"default"},"plain_text":"item lvl 2","href":null}]}}]}},{"object":"block","id":"5e2656f8-9db4-4305-9dbb-74e0e2cd215d","created_time":"2021-12-29T15:51:00.000Z","last_edited_time":"2021-12-29T15:51:00.000Z","has_children":false,"archived":false,"type":"paragraph","paragraph":{"text":[]}}]

Here i have to do 2 things:

  1. Improve the way that the list and their childrens are generated into getBlocksToRender and ParsedBlock constructor.
  2. Add items render into ListItem component, it's already applied to toggle lists with no-list childrens, have to do something similar.

It's more complex that i have thinked, i still working on it.

Any luck with this?

Hey! I tried to fix it but I didn't finish it, I'm going to try again this week.

Awesome, please let me know if I can help in any way! 🙏

Honestly it seems hard to fix bc of how it was programmed. It has a bad mix of HOC's, classes, components, and no-clear structure/order (my fault). To make if works i'm going to think in a refactor and new code to a v4.

If i can figure out some workaround to fix it fast i let you know.

If you can check it you can try it following the contributors guide but it complex to fix :P

If anyone has figured out a workaround, it would be awesome if you could share! This might be the one blocker for me using this library.