[Vue] Not all RichText links should be route linked in an embedded implementation

[rowantervelde]

Describe the Bug

Since this PR #1037, all relative links within the content of Vue component ScRichText are interpreted as router links within the Vue application. However, in a "Client-side embedding" implementation, this is not always correct as it's also possible that relative links point to resources outside of the application but still within the same website.

To Reproduce

Use a relative link in the content of a ScRichText component for a resource outside the embedded Vue application.

Expected Behavior

In an embedded implementation, relative links should not all be interpreted as router links. In an ideal scenario, this should be indicated for each link in the content.

Possible Fix

Since it's difficult to indicate within the content of a ScRichText component which relative link is a router link and which isn't, a possible solution could be to use a property on the ScRichText component to specify how relative links should be handled. Either all as router links or all as normal relative links.

Provide environment information

• Sitecore Version: 10.3
• JSS Version: 21.1.5

[illiakovalenko]

@rowantervelde Thanks for the detailed information. I've created a ticket in our internal backlog. I've added your details to the ticket as well.

[bryandallen]

@illiakovalenko any information on when we can expect a fix? We're also experiencing this issue where all relative links in the RichText are being route linked. We've found some work arounds for some of our links, but we can't get past the issue where this code is also stripping off the query string if one was present on a relative link that needs it.

[illiakovalenko]

@bryandallen Let me raise again this issue in our team. Currently, it's in our backlog, and not really prioritized. I will keep you posted

[djsmith]

Another problem with the RichText component in how it uses the Vue router for anchor elements is when it has a target="_blank" attribute. RichText's bindRouteLinks function prevents the browser from opening the URL in a new tab/window.