Openfoodnetwork: Prevent links to get visitors out of OFN website

[myriamboure]

Description

Links generated in a WYSIWYG editor (ex: product description text) are opened in the same tab, and as a result the visitor quits the OFN website and shopfront and his shopping experience is disturbed.

@luisramos0 adding issue closing note: actually product description (add and replace) textareas do not allow links, so it's not applicable to this issue. The issue happens in enterprise long description (about us), enterprise group long description, shopfront message and shopfront closed message.

Expected Behavior

If there is a link in a WYSIWYG editor (product descriptions, shopfront messages, and shopfront closed messages) when cliking on the link it opens a new tab.

Actual Behavior

It opens the page in the same tab ad make visitor quit the OFN website.

Steps to Reproduce

1. Write some product description and add some url in it. Make sure the product is in an order cycle.
2. Then on the product description modal on the shopfront, click on the link.
3. The new page opens in the same tab.

Severity

S4

Initial Possible Fixes identified

Identified by @frank-west-iii when working on #953 :
1- "One is a global fix for any link generated in a WYSIWYG editor like this one. This will affect product descriptions, shopfront messages, and shopfront closed messages. Those are the ones that I can see in the code currently."
2- The other is just to apply this fix to the about us description.

It is related to an external library and we have to build some custom functionality into it:
https://github.com/textAngular/textAngular/wiki/Customising-The-Toolbar

Some additional context to the issue:
textAngular/textAngular#224

Actual Fix used

textAngular/textAngular#496

[myriamboure]

@frank-west-iii my vote would go toward applying the global fix in all WYSIWYG editors. In product descriptions people can redirect sometimes to another product page on another website. I guess shops can redirect to some external website in about us, but also in open/close shopfront messages.

@sstead @sauloperez do you agree? I think in anycase it's better to have a new tab opening when it doesn't need than having the visitor quit the shop. So even if the manager put some internal link in their description, I would rather open those in a blank tab as there are more cases when they would put an external link I guess.

[luisramos0]

Hi, I have fixed this for the "about us" in enterprises admin.
The default is now "open in new window". The toggle "open in new window" that you see when you click a link on the text area is still working and can be used to make the links open in the same window.

Do we want to have this behaviour in all text areas?
These are the ones I see:

• product description (add and replace)
• enterprise group long description
• enterprise long description
• preferred_shopfront_message
• preferred_shopfront_closed_message

Thanks, Luis

[luisramos0]

btw, solution found here: https://github.com/textAngular/textAngular/issues/496

[myriamboure]

I think personnaly external links should open in another tab for all the sections you mention @luisramos0 . @sstead if you have any objection let us know but I'm pretty confident you would agree with that ;-) Thanks Luis!

[luisramos0]

Actually product description (add and replace) textareas do not allow links, so it's not applicable to this change.
I have applied the change in enterprise long description, enterprise group long description, shopfront message and shopfront closed message.
It's ready for code review.