Fix rendering of links in PostCard, Comment, and Message Chat components.

[Dimi Mikadze]

Currently, links in the above-described components are rendered as texts, hence users can't click on them.

I propose creating a utility function that identifies links in text and wraps them in an Anchor tag, with the following properties: target="__blank" rel="noreferrer noopener" and use that function for rendering texts in the relevant components.

Screenshot of the bug:

[Rajendrasinh Parmar]

@DimiMikadze Do you have any suggestions to handle the implementation of this feature?

I mean which kind of URLs will be supported?
Is there any approach that you can think of for this functionality?

[Dimi Mikadze]

@RajendrasinhParmar, that's a great question. Detection of the URL is a very complex subject. I was thinking of using regex for detecting URLs like https://www.getorca.org/ or www.getorca.org. Ones that contain protocol http(s) and/or ones that contain www, and replace them with Anchor element.

Something like this:

const linkify = (text: string) => {
  const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;

  return text.replace(urlRegex, (url) => `<a href="${url}" rel="noreferrer noopener" target="_blank">${url}</a>`);
};

What do you think?

[Rajendrasinh Parmar]

@DimiMikadze Yes exactly. I think that would be a better idea to handle it like this. We can start with basic implementation using basic URL detection and link generation for the same. And once that is in place we can improve the logic and make it more generic.

I'll try the above approach and will see how nicely we can handle that.

[Rajendrasinh Parmar]

@DimiMikadze I've worked on the required changes. Also implemented linkify component instead of test processing directly and replacing the text inside them.

Can you provide your feedback for the same?