From 9d8ec897eb3a7f64153513983d5ed69c96ba32a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=B4me=20Tresarrieu?= <c.tresarrieu@gmail.com>
Date: Thu, 16 Jun 2022 20:22:27 +0200
Subject: [PATCH] feat(MarkdownContent): Expose `transformLinkUri` and
 `transformImageUri`
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Côme Tresarrieu <c.tresarrieu@gmail.com>
---
 .../MarkdownContent/MarkdownContent.test.tsx  | 38 +++++++++++++++++++
 .../MarkdownContent/MarkdownContent.tsx       | 12 +++++-
 2 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/packages/core-components/src/components/MarkdownContent/MarkdownContent.test.tsx b/packages/core-components/src/components/MarkdownContent/MarkdownContent.test.tsx
index 2e1550078f..9c08b83c40 100644
--- a/packages/core-components/src/components/MarkdownContent/MarkdownContent.test.tsx
+++ b/packages/core-components/src/components/MarkdownContent/MarkdownContent.test.tsx
@@ -62,4 +62,42 @@ describe('<MarkdownContent />', () => {
     expect(fp2).toBeInTheDocument();
     expect(rendered.getByText(');', { selector: 'span' })).toBeInTheDocument();
   });
+
+  it('render MarkdownContent component with transformed link', async () => {
+    const rendered = await renderWithEffects(
+      wrapInTestApp(
+        <MarkdownContent
+          content="[Title](https://backstage.io/link)"
+          transformLinkUri={href => {
+            return `${href}-modified`;
+          }}
+        />,
+      ),
+    );
+    const fp1 = rendered.getByText('Title', {
+      selector: 'a',
+    });
+    expect(fp1).toBeInTheDocument();
+    expect(fp1.getAttribute('href')).toEqual(
+      'https://backstage.io/link-modified',
+    );
+  });
+
+  it('render MarkdownContent component with transformed image', async () => {
+    const rendered = await renderWithEffects(
+      wrapInTestApp(
+        <MarkdownContent
+          content="![Image](https://backstage.io/blog/assets/6/header.png)"
+          transformImageUri={() => {
+            return `https://example.com/blog/assets/6/header.png`;
+          }}
+        />,
+      ),
+    );
+    const fp1 = rendered.getByAltText('Image');
+    expect(fp1).toBeInTheDocument();
+    expect(fp1.getAttribute('src')).toEqual(
+      'https://example.com/blog/assets/6/header.png',
+    );
+  });
 });
diff --git a/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx b/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx
index df4ad56776..4059482b79 100644
--- a/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx
+++ b/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx
@@ -68,6 +68,8 @@ type Props = {
   content: string;
   dialect?: 'gfm' | 'common-mark';
   linkTarget?: Options['linkTarget'];
+  transformLinkUri?: Options['transformLinkUri'];
+  transformImageUri?: Options['transformImageUri'];
 };
 
 const components: Options['components'] = {
@@ -91,7 +93,13 @@ const components: Options['components'] = {
  * If you just want to render to plain [CommonMark](https://commonmark.org/), set the dialect to `'common-mark'`
  */
 export function MarkdownContent(props: Props) {
-  const { content, dialect = 'gfm', linkTarget } = props;
+  const {
+    content,
+    dialect = 'gfm',
+    linkTarget,
+    transformLinkUri,
+    transformImageUri,
+  } = props;
   const classes = useStyles();
   return (
     <ReactMarkdown
@@ -100,6 +108,8 @@ export function MarkdownContent(props: Props) {
       children={content}
       components={components}
       linkTarget={linkTarget}
+      transformLinkUri={transformLinkUri}
+      transformImageUri={transformImageUri}
     />
   );
 }