fix: [UIE-10352] Added capability to open links in markdown in different tab (#13501)

* fix: [UIE-10352] Added capability to open links in markdown in different tab

* fix: [UIE-10352] added changeset

Author: tvijay-akamai

packages/manager/.changeset/pr-13501-fixed-1774516931626.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Product content received in markdown format can have links. Added capability in markdown to open these links in new tab ([#13501](https://github.com/linode/manager/pull/13501))

packages/manager/src/components/Markdown/Markdown.tsx

@@ -10,6 +10,7 @@ import type { SanitizeOptions } from 'src/utilities/sanitizeHTML';
 
 export interface HighlightedMarkdownProps {
   className?: string;
+  openLinksInNewTab?: boolean;
   sanitizeOptions?: SanitizeOptions;
   textOrMarkdown: string;
 }
@@ -20,7 +21,8 @@ export interface HighlightedMarkdownProps {
  * - Will perform syntax highlighting on any fenced code blocks
  */
 export const Markdown = (props: HighlightedMarkdownProps) => {
-  const { className, sanitizeOptions, textOrMarkdown } = props;
+  const { className, openLinksInNewTab, sanitizeOptions, textOrMarkdown } =
+    props;
 
   const theme = useTheme();
 
@@ -36,7 +38,7 @@ export const Markdown = (props: HighlightedMarkdownProps) => {
           lang,
           theme: getHighlighterTheme(theme.palette.mode),
         });
-      } catch (error) {
+      } catch {
         return shiki.codeToHtml(str, {
           lang: 'js',
           theme: getHighlighterTheme(theme.palette.mode),
@@ -48,6 +50,28 @@ export const Markdown = (props: HighlightedMarkdownProps) => {
     linkify: true,
   });
 
+  if (openLinksInNewTab) {
+    const defaultRender =
+      unsafeMarkdownIt.renderer.rules.link_open ||
+      function (tokens, idx, options, env, self) {
+        return self.renderToken(tokens, idx, options);
+      };
+
+    unsafeMarkdownIt.renderer.rules.link_open = function (
+      tokens,
+      idx,
+      options,
+      env,
+      self
+    ) {
+      tokens[idx].attrSet('target', '_blank');
+      // Adding rel="noopener noreferrer" directly here just as backup,
+      // although sanitizeHTML will already add it when it sees target="_blank"
+      tokens[idx].attrSet('rel', 'noopener noreferrer');
+      return defaultRender(tokens, idx, options, env, self);
+    };
+  }
+
   const unsafeParsedMarkdown = unsafeMarkdownIt.render(textOrMarkdown);
 
   const sanitizedHtml = sanitizeHTML({

packages/manager/src/features/Marketplace/ProductDetails/ProductDetailsTabs.tsx

@@ -38,8 +38,16 @@ const MarkdownContentRenderer = ({ content }: { content: string }) => {
   return (
     <StyledTabContent>
       <Markdown
+        openLinksInNewTab
         sanitizeOptions={{
-          ALLOWED_ATTR: [...allowedHTMLAttr, 'target', 'src', 'alt', 'style'],
+          ALLOWED_ATTR: [
+            ...allowedHTMLAttr,
+            'target',
+            'rel',
+            'src',
+            'alt',
+            'style',
+          ],
           ALLOWED_TAGS: [...allowedHTMLTagsFlexible, 'img'],
         }}
         textOrMarkdown={content}