IGAPP-973: Mark external links

[LeandraH]

This pull request belongs to the issue https://issues.tuerantuer.org/browse/IGAPP-973.

To test on web: Go to http://localhost:9000/testumgebung/de/test-f%C3%BCr-externe-links, look at the links
To test on native: Go to Testumgebung, in German, click on Test für externe Links and look at the links.

[f1sh1918]

I have some rendering problems with the icon underline under the icon with chrome, check screenshot. This can be fixed by using display:flex for link and after-Element but this may cause other errors, so pls check before

[LeandraH]

Okay, I tested it on OS X Firefox, Chrome, Safari, and iOS and Android simulations, and it all looks good there. Would love for someone with Windows to test there a little :)
The weird underline didn't actually happen in native but I think it's better to still give it the display flex, just in case it changes some behavior down the line.

[steffenkleinle]

Nicely done!

Do you think it would be possible to also implement this for the NativeHtml component in native? Otherwise this does not work in the list content, see screenshot:

[LeandraH]

Nicely done!

Do you think it would be possible to also implement this for the NativeHtml component in native? Otherwise this does not work in the list content, see screenshot:

I'll give it a try :)

[LeandraH]

Looks like react-native-render-html can't handle a <path> element so getting the icon into the NativeHtml component seems to be a no in the foreseeable future :( Looking at the speed difference, I don't think it's worth it to replace react-native-render-html for such a small feature.

[f1sh1918]

Looks like react-native-render-html can't handle a <path> element so getting the icon into the NativeHtml component seems to be a no in the foreseeable future :( Looking at the speed difference, I don't think it's worth it to replace react-native-render-html for such a small feature.

Indeed the only solution i see is to create a logic to inject <img> or <svg> tags in this particular cases with the icon (before </a closes. but thats very hacky and can lead to errors. Not sure if thats worth to do

[steffenkleinle]

Is it somehow possible to use png or some other image format? Don't know much about that so no idea.

[steffenkleinle]

If it is currently not possible to use svgs in react-native-render-html could you perhaps open an issue there and in our jira to fix this later?

[LeandraH]

I got it! I can't get the space between the link and the icon to not be underlined (not even with important!) but I think that is a manageable difference.

[f1sh1918]

Really nice work :) thx for the effort you put in. Works nice.
Just added the little missing piece, maybe it way too obvious :)

[steffenkleinle]

Tested on android, thanks for investing the time to find a solution!

Maybe you could write some tests for this :)

One more thing: For me the icons look quite big and I think it could be a little smaller. Did you follow a design? Since I am not an UI/UX expert you may also just ignore this if you think its better this way or this was like this in a design.