Merge pull request #12096 from Rowern/master

feat(MarkdownContent): Expose `transformLinkUri` and `transformImageUri`

.changeset/cool-toys-flow.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': minor
+---
+
+Add `transformLinkUri` and `transformImageUri` to `MarkdownContent`

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',
+    );
+  });
 });

packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx

@@ -68,6 +68,8 @@ type Props = {
   content: string;
   dialect?: 'gfm' | 'common-mark';
   linkTarget?: Options['linkTarget'];
+  transformLinkUri?: (href: string) => string;
+  transformImageUri?: (href: string) => string;
 };
 
 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}
     />
   );
 }