Add indicator to all external links via CSS

[mkllnk]

Description

When a user clicks on a link, they should know if it is an internal or external link. External links are usually opened in a new tab. And some parts of our code are already adding an icon. But adding the icon in HTML can make translations containing HTML more complicated.

We suggest to use a CSS rule based on the target:

a[target="_blank"]::after {
  /*show the icon.. */
}

We currently display it like this:

<i class="icon-external-link"></i>

This came up in:

• Make Connected Apps links available in Transifex #13011 (review)

Acceptance Criteria & Tests

1. All links that currently have an indicator icon, should still have it.
2. Other links with target="_blank" should have the icon, including in user-defined text like shop messages.
3. The current rich text editors should still work as before (with or without displaying the icon, doesn't matter).
4. Links in the menus should not have the icon. Even if they go to an external page like https://about.openfoodnetwork.org.au it's considered internal.
5. You will need to browse through lots of parts of the app to ensure that nothing breaks and everything looks correct.