Fix markdown rendering issues

[micahmo]

Bug Description

A recently popular post on Lemmy compared the markdown rendering capabilities of several Lemmy apps. While Thunder performed very well, it was not perfect. I am creating this issue to track any known markdown issues that we can identify as a result of these posts.

https://lemmy.world/post/18159539
https://lemmy.world/post/18159531

(One of the posts is a cross-post, but I am including both because there is a different set of interesting comments.)

Note that the original post does not have a lot of details, and I didn't have time to read all the comments, so I'm not sure exactly what Thunder failed. When I get a chance I will try to read everything and specifically identify things that need to be fixed. I will update this bug accordingly.

EDIT

• Here is the comment that was used for testing: https://lemmy.world/comment/11514952
• And here are the detailed results: https://lemmy.world/comment/11518153

Expected Behaviour

N/A

Steps to Reproduce

N/A

Additional Context

No response

App Version

No response

Device

N/A

OS

N/A

[hjiangsu]

Thanks for this! From the post, these are the issues that Thunder is having problems with. From what I can see, these are fairly minor issues which is good to know.

Some notes on this:

• The first issue might be easily fixable (would have to look into what the raw markdown is and perform some testing on that)
• The second issue is a bit more complicated because we might have to touch the markdown library to be able to fix the issue. There is an open issue here: flutter_markdown: alignment in table doesn't work flutter/flutter#109487

[micahmo]

Cool, thank you for digging that up! I'm glad that Thunder performed so well; I know we've put a lot of work into the markdown rendering. 😊

[hjiangsu]

Small update, I've narrowed down the first issue. It seems like our custom imageBuilder in common_markdown_body is causing issues where it's inserting a new line after a picture.

Commenting out the imageBuilder logic, it renders the markdown properly:

[micahmo]

If I remove the Row from the imageBuilder and the Center from the ImagePreview, it seems to work! Unfortunately I don't know what other side effects that may have.

[hjiangsu]

Just another update, I've submitted a PR which should address the table alignment issue to flutter/packages repo.

If that fix goes in, we should be able to simply update the flutter_markdown dependency to fix the table issues!

[fmbarina]

While it wasn't included in the linked tests, Thunder seems to have difficulties displaying tables with too many columns. It'll make everything fit horizontally, even when doing so is clearly a sin against good UIs. Joking aside, I'm not sure if this counts as a mere markdown rendering problem, but I didn't find any issue about this searching for "table" in the tracker.

I can create a separate issue and add screenshots later if needed, just thought I should mention it.

[hjiangsu]

Thunder seems to have difficulties displaying tables with too many columns. It'll make everything fit horizontally, even when doing so is clearly a sin against good UIs.

Adding on to this (for devs):

It looks like if we apply a constraint on the column width, Flutter will apply a scrollable to the table which might help fix the issue of the table being squished. See flutter/packages#6983. The issue here is determining what is considered a good baseline for the column width!

https://pub.dev/documentation/flutter_markdown/latest/flutter_markdown/MarkdownStyleSheet-class.html