Extend markdown support for LBRY urls

[btzr-io]

WIP

PR Checklist

Please check all that apply to this PR using "x":

• I have checked that this PR is not a duplicate of an existing PR (open, closed or merged)
• I have checked that this PR does not introduce a breaking change
• This PR introduces breaking changes and I have provided a detailed explanation below

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting)
• Refactoring (no functional changes)
• Documentation changes
• Other - Please describe:

Fixes

• Automatically create lbry:// hyperlinks in description automatically create lbry:// hyperlinks in description #2229

Changes

• Channel mentions.
• Add channel information on mouseover Add channel information on mouse over #1393

Automatically generated links

• @channel -> [@channel](lbry://@chanel)
• @channel/claim -> [@channel/claim](lbry://@channel/claim)
• lbry://claim#e -> [lbry://claim#e](lbry://claim#e)

Todo

• Validate channel url
• Channel mentions ( custom link )
• Create channel tooltip
• Implement channel tooltip
• Auto-embed lbry urls

[neb-b]

This is awesome!

[neb-b]

Hey @btzr-io! Sorry I lost track of this one. Do you have any urls I can test this at?

[btzr-io]

@seanyesmunt Here is a claim with examples for all the new features:

lbry://channel-tooltip#336e32722929861f1e8557381ffac66cb93a4e7b

But you can see some real examples already working here:

Mentions for channels:

I think this is a good example of this feature but you could also mention a friend's channel or another channel you own:

"Get this episode, DRM free, on LBRY (https://lbry.com) at: @lunduke"
lbry://does-going-full-stallman-isolate-a#f5761639b0416038e0257046cce7b59f7b4a6e42

Auto-embed lbry urls
I think this is really useful for obscured links like what is this link? because usually the lbry url don't give us any information about the content ( it can help with clickbait)

"The full unedited video can be watched here"
lbry://one#3ae4ed38414e426c29c2bd6aeab7a6ac5da74a98

[btzr-io]

Also I still need to find a way to let the user choose if the auto-embed feature should apply for a specific link. I think discord has a syntax for this:

<http://no-preview.com> | http://show-preview.com

But this don't work on inline links like this [link'](<url>)

[neb-b]

Cool. I'll mess around with those links. Let me know when you would like me to review this PR.

[btzr-io]

I found a plugin for custom props, now we can block the auto-embed with this syntax:

[link](lbry://cute-fat-cats){ data-preview=false }

[btzr-io]

@seanyesmunt Ok, is ready for review:
I noticed some weird glitches / issues with the tooltip, but I'm still not sure if I fixed all of them 🙃

Also let me know if you notice any performance or loading time issues ( can't confirm nothing yet )

[neb-b]

Can you try to use https://ui.reach.tech/tooltip/?

I was planning to use this for the regular tooltips. It has great keyboard/accessibility support. If it looks like a lot of trouble don't worry about it.

[btzr-io]

@seanyesmunt ready for review ✌️

[neb-b]

I ended up adding reach/tooltip to the branch I'm working on. I used the ClaimListItem component (i'm going to rename to ClaimPreview) and added the tooltip in just a couple lines.

99b5cff

I really like what you did with your channel tooltip, but to keep development simpler in the future I'm going to just use this ^ for now.

Everything else looks good. I can merge once the tooltip stuff is removed.

[btzr-io]

@seanyesmunt Ok done 👍

[btzr-io]

I really like what you did with your channel tooltip, but to keep development simpler in the future I'm going to just use this ^ for now.

yeah that looks better and clean 👍 💯