iamacup / react-native-markdown-display

React Native 100% compatible CommonMark renderer
MIT License
604 stars 172 forks source link

Properly handling task list markdown #215

Open StCyr opened 6 months ago

StCyr commented 6 months ago

Hi,

Thanks for your component :-)

I'm using it with the markdown-it-task-lists component to show task list items in github style.

However, I've some difficulties to style it properly. As you can see in the screenshot hereunder, your component still renders the task list as a bullet list in addition to the task list rendering I've implemented.

I think the proper way to fix this is probably to update your component so that it doesn't create a bullet list when it's in fact a task list (ie: when the "-" of the bullet list is followed by a " [(\s|x|X)]" regexp); I believe it would be very difficult for me to implement that in my task list rule (All in all my implementation is already a bit hacky). Don't you think so?

24-05-15 14-51-22 7080

Here's the code I use to render the task list items:

        <Markdown
                            rules={{
                                html_inline: (node, children, parent, styles, inheritedStyles = {}) => (
                                    <BouncyCheckbox key={node.key}
                                        disableText={true}
                                        isChecked={node.content.match(/checked=/)}
                                        size={16}
                                        onPress={() => {
                                            const text = parent[0].children[1].content
                                            updateCardDescriptionTaskListItem(text)
                                        }}
                                    />
                                )
                            }}
                styles={theme.markdown}
                            mergeStyle={true}
                            markdownit={mdParser}
        >
                {card.description}
        </Markdown>