[decision needed] Fix links in CMS' HTML content

[Platonn]

CMS' HTML content may contain ordinary links (<a href>), but they may not work properly due to many reasons. For example, user is at /faq page and the CMS' HTML content contains links like: <a href="#anchor">. This causes prolems, as long as we have <base href="/">, because those links direct to /#anchor which is home page, not /faq#anchor.

Various cases should be also tested:

• local #anchor links
• relative links up in structure i.e. ../../some-route and to deeper pages ./some/nested/route
• links to other Spartacus' pages
• links with query params
• links external sites

Ideally, we would like to avoid full reloads of page after clicking a relative link (in scope of SPA). Unfortunately a native <a href> is not the case.

We should investigate how to prepare links in CMS to work properly in Spartacus and/or think about some mechanism (pipe?) to fix those links before rendering with `[innerHTML] directive if necessary.

Related issues: FAQ https://github.com/SAP/cloud-commerce-spartacus-storefront/issues/3482 T&C https://github.com/SAP/cloud-commerce-spartacus-storefront/issues/3506

[mirkosoft]

• anchors works OOTB if the url in cms component's content is changed to absolute (ie. href="/electronics-spa/en/USD/faq#c00" instead of just href="#c00"); browser's "back" button works but position is not preserved (won't go to the top). Solution to consider:
  • fix sample data (keeping anchors); this way the site context in url will be hardcoded at cms compontent content level (/electronics-spa/en/USD/)
  • if we don't want to have the above hardcoded we have to fix this on the front (parse the content and fix links - we can use placeholder like SITE_CONTEXT or smth in the cms; it would be nice to do that for some pages only /faq or toc/) - consider adding a property ("parse: true") on the backend component's data
  • still needs position handling fix
  • another, more sophisticated solution is to add attributes to cms' html so SPA can use them for routing (not sure html sanitizer will be happy with this)
• relative links up in structure (../cart) works OK but with reload.
• other spartacus pages works just fine (/Open-Catalogue/Cameras/Film-Cameras/c/574), with reload
• links to external site should open in the new tab (they work fine anyways)?
• links with query params (/Brands/Canon/c/brand_10?sortCode=price-asc) - works fine

[mirkosoft]

@Xymmer According to our talk the decision is about:

• not changing SPA code at all (altering sample data will fix the anchors issue but site context will be hardcoded in the content's links; this way #3482 and #3138 will be fixed)

OR

• changing the SPA code to parse and fix the content before rendering. Fix is easy but needs IMPEX change so only desired paragraph components (faq, toc) will be pre-parsed.

[Xymmer]

we'll go with changing spa code so we handle our default sample data, but we won't go crazy trying to handle all kinds of html that could be added in the future

[tobi-or-not-tobi]

Just be aware of:

• https://jira.hybris.com/browse/CMSX-8545 we created a CMS ticket to link links to components
• using IDs is pretty old fashion nowadays, especially if they're hardcoded. Only if there's a requirement to have the anchor link stateful in the URL, we need to stick to the # syntax, otherwise I'd suggest to use another selector to scroll to the component. That's part of the suggestion of CMSX-8545

[mirkosoft]

Moving this back to TODO as I didn't have time to think about this more. Basically, long term solution (cms-driven approach) depends on CMSX-8545 (extend the current link component functionality to handle in-page jumps). The temporary solution is about either:

• bypassing the angular's sanitization (obviously not good)
• use attribute which is not stripped, like target (weird)
• use custom sanitization which doesn't strip the id attr (seems overkill)
• other?

see https://github.com/angular/angular/blob/master/packages/core/src/sanitization/html_sanitizer.ts#L69

[Xymmer]

we'll have to schedule this one, talk to bill before taking this

[AbdelhalimOuasti]

Hi any news on this ? My customer needs FAQ page links.

[Xymmer]

@AbdelhalimOuasti since this is a sample data issue, you would normally have to customize the faq links. Is there something about this issue that is to be added generically to Spartacus itself?

[AbdelhalimOuasti]

Hi the problem is that the generated html does not keep the anchor :

- impex : <h2><a name=""l00""></a>Privacy and security</h2>
- HTML : <h2><a></a>Privacy and security</h2>

[giancorderoortiz]

Can this issue be solved in 4.0?

[hackergil]

Even after fixing the sample data, anchor names are not rendered (since DomSanitizer omits them)

A solution needs to be discussed for this one. Either we bypass DOM sanitization and trust HTML coming from the CMS or we come up with a more robust component. Ideas welcome.

[Platonn]

Local #anchor links in ParagraphComponent were fixed in https://github.com/SAP/spartacus/issues/14108

For other issues with ParagraphComponent, please create a new bug ticket, if needed.

[Platonn]

Duplicate of #14108