fix: link overflow truncate

[Vyvy-vi]

Fixes #457
Fixes #465
this truncates long URLs to 50-character long hyperlinks.
and takes care of symbols inside hyperlinks.

[mattyg]

awesome thanks vy!

couple issues:

• If the viewport is too small, a 50 char URL will still overflow the content area. We need to add a CSS rules to break words if necessary. See the screenshot below. I think this is the CSS rule that resolves it: https://tailwindcss.com/docs/word-break#break-words

• lets consolidate this logic to render url strings to html links outside of the Praise component. We should be able to keep all the relevant logic in either components/MarkdownText.tsx or utils/parser.ts (we might want to consolidate them too).

• We have some redundant duplication of logic: in components/MarkdownText.tsx we use the linkifyHtml() function to convet url strings to html links. In this PR we're converting them twice (again in in parser.tsx), and then we're truncating any urls in Praise.tsx. Can we consolidate this into one implementation?

• If we want to keep using linkifyHtml(), it has a built-in option for handling truncation. See the option "format" on https://linkify.js.org/docs/options.html - might be simpler code but I don't have a strong preference.

• While looking at this I noticed another bug that it probably makes sense to address in the same PR, since they related to the same code. The bug is that if a url contains any markdown symbols, the html link rendering is broken. See Praise reasons containing URLs that including certain symbols are not rendered properly #465

outdated review

[nebs-dev]

Nice job.. for some reason discord-markdown didn't work for me and that is why i created custom parser, this is even better.